Hexo-ブログyiliaテーマ作成カテゴリ(categories)とタグ(tags)トップページ
18255 ワード
転載元:http://orzcss.com/posts/5a207d64/
概要
デフォルトでインストールされているhexo自体は、カテゴリとタグの最初のページがありません。たとえば、
多くの資料を探しましたが、解決策を提供する人がいません。もっと多いのは答えのない問題です。この問題は簡単すぎるかもしれません。メモする人がいません。
どうやって実現するのか教えます。
ステップ1
新しいページを作って、「categories」と名付けました。コマンドは以下の通りです
新しく作成したページを編集して、ページの種類をcategories tagsに設定します。テーマは自動的にこのページに分類されたタブクラウドを表示します。ページの内容は以下の通りです。
メニューにリンクを追加します。編集
見つけました
そして見つけます
概要
デフォルトでインストールされているhexo自体は、カテゴリとタグの最初のページがありません。たとえば、
http://orzcss.com/categories/ページが開いたら、いつも表示されます。 Cannot GET /categories/は多くの方法を試してみたが、やはり無効だった。多くの資料を探しましたが、解決策を提供する人がいません。もっと多いのは答えのない問題です。この問題は簡単すぎるかもしれません。メモする人がいません。
どうやって実現するのか教えます。
ステップ1
新しいページを作って、「categories」と名付けました。コマンドは以下の通りです
1
2
3
hexo new page "categories"
hexo new page "tags"
新しく作成したページを編集して、ページの種類をcategories tagsに設定します。テーマは自動的にこのページに分類されたタブクラウドを表示します。ページの内容は以下の通りです。
1
2
3
4
5
---
title:
date: 2016-10-21 11:59:10
type: "categories"
---
1
2
3
4
5
---
title:
date: 2016-10-21 11:59:10
type: "tags"
---
1
2
3
4
5
6
---
title:
date: 2016-10-21 11:59:10
type: "categories"
comments: false
---
1
2
3
4
5
6
---
title:
date: 2016-10-21 11:59:10
type: "tags"
comments: false
---
メニューにリンクを追加します。編集
yilia/_config.yml（私が使っているのはyiliaテーマです。）、categories tagsをmenuに追加します。1
2
3
4
5
menu:
home: /
archives: /archives
categories: /categories
tags: /tags
見つけました
layout/_partial/article.ejs （私が使っているのはyiliaのテーマです。）そして見つけます
div ：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<% if (page.type === "tags") { %>
<div class="tag-cloud">
<div class="tag-cloud-title">
<%- _p('counter.tag_cloud', site.tags.length) %>
div>
<div class="tag-cloud-tags">
<%- tagcloud({
min_font: 12,
max_font: 30,
amount: 200,
color: true,
start_color: '#ccc',
end_color: '#111'
}) %>
div>
div>
<% } else if (page.type === 'categories') { %>
<div class="category-all-page">
<div class="category-all-title">
<%- _p('counter.categories', site.categories.length) %>
div>
<div class="category-all">
<%- list_categories() %>
div>
div>
<% } else { %>
<% if (post.excerpt && index){ %> <%- post.excerpt %>
<% } else { %>
<%- post.content %>
<% } %>
<% } %>
， ，
yilia/source/css/_partial/article.styl ろに のcssコードを します。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
/*tag-cloud*/
.tag-cloud {
text-align: center;
margin-top: 50px;
}
.tag-cloud a {
display: inline-block;
margin: 10px;
}
.tag-cloud-title {
font-weight: 700;
font-size: 24px;
}
.tag-cloud-tags {
margin-top: 15px;
a {
display: inline-block;
text-decoration: none;
font-weight: normal;
font-size: 10px;
color: #fff;
line-height: normal;
padding: 5px 5px 5px 10px;
position: relative;
border-radius: 0 5px 5px 0;
font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;
&:hover {
opacity: 0.8;
}
&:before {
content: " ";
width: 0;
height: 0;
position: absolute;
top: 0;
left: -18px;
border: 9px solid transparent;
}
&:after {
content: " ";
width: 4px;
height: 4px;
border-radius: 4px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, .3);
position: absolute;
top: 7px;
left: 2px;
}
}
a.color1 {
background: #FF945C;
&:before {
border-right-color: #FF945C;
}
}
a.color2 {
background: #F5C7B7;
&:before {
border-right-color: #F5C7B7;
}
}
a.color3 {
background: #BA8F6C;
&:before {
border-right-color: #BA8F6C;
}
}
a.color4 {
background: #CFB7C4;
&:before {
border-right-color: #CFB7C4;
}
}
a.color5 {
background: #7B5D5F;
&:before {
border-right-color: #7B5D5F;
}
}
}
/*category-all-page*/
.category-all-page {
margin-top: 50px;
.category-all-title {
font-weight: 700;
font-size: 24px;
text-align: center;
}
.category-list-item:after {
content: '';
clear: both;
display: table;
}
.category-list-count {
float: right;
margin-left: 5px;
}
.category-list-count:before {
content: ' ';
}
.category-list-count:after {
content: ' ';
}
}
<！-- ページ- の のビット->