前言
本文教程主要针对 Hexo Butterfly 主题博客，基于原版主题增加文章索引可能不够美观，只是分享思路，有兴趣和有基础的小伙伴可以对此二次魔改。
开发思路：参考 Hexo 页面变量 中的 page.current 获取当前页码，以及 Hexo 配置文件中 [Blogroot]\_config.yml 的 per_page 每页显示的文章量计算文章索引。
修改文章渲染函数
打开 \themes\butterfly\layout\includes\mixins\article-sort.pug 文件。
基于原版主题，增加文章索引可能不够美观，只是分享思路。
修改以下代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| - mixin articleSort(posts)
+ mixin articleSort(posts, current)
.article-sort
- var year
- posts.each(function (article) {
- let tempYear = date(article.date, 'YYYY')
- let no_cover = article.cover
- let title = article.title || _p('no_title')
if tempYear !== year
- year = tempYear
.article-sort-item.year= year
.article-sort-item(class=no_cover)
if article.cover && theme.cover.archives_enable
a.article-sort-item-img(href=url_for(article.path) title=title)
img(src=url_for(article.cover) alt=title onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'`)
.article-sort-item-info
.article-sort-item-time
i.far.fa-calendar-alt
time.post-meta-date-created(datetime=date_xml(article.date) title=_p('post.created') + ' ' + full_date(article.date))= date(article.date, config.date_format)
a.article-sort-item-title(href=url_for(article.path) title=title)= title
+ span.article-sort-item-index= (current - 1) * config.per_page + post_index + 1
- })
|
需配合本站 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
| mixin articleSort(posts, current)
.article-sort
- var year
- posts.each(function (article, post_index) {
- let tempYear = date(article.date, 'YYYY')
- let no_cover = article.cover === false || !theme.cover.archives_enable ? 'no-article-cover' : ''
- let title = article.title || _p('no_title')
if tempYear !== year
- year = tempYear
.article-sort-item.year= year
.article-sort-item(class=no_cover)
if article.cover && theme.cover.archives_enable
a.article-sort-item-img(href=url_for(article.path) title=title)
img(src=url_for(article.cover) alt=title onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'`)
.article-sort-item-info
a.article-sort-item-title(href=url_for(article.path) title=title)= title
span.article-sort-item-index= (current - 1) * config.per_page + post_index + 1
.article-meta-wrap
if (theme.post_meta.page.categories && article.categories.data.length > 0)
span.article-sort-item-categories
i.fas.fa-inbox
each item, index in article.categories.data
a(href=url_for(item.path)).article-meta__categories #[=item.name]
if (index < article.categories.data.length - 1)
i.fas.fa-angle-right
if (theme.post_meta.page.tags && article.tags.data.length > 0)
span.article-sort-item-tags
i.fas.fa-tag
each item, index in article.tags.data
a(href=url_for(item.path)).article-meta__tags #[=item.name]
if (index < article.tags.data.length - 1)
span.article-meta__link #[='•']
.article-sort-item-time
i.far.fa-calendar-alt
time.post-meta-date-created(datetime=date_xml(article.date) title=_p('post.created') + ' ' + full_date(article.date))= date(article.date, config.date_format)
- })
|
修改归档、分类、标签页面
归档页面
\themes\butterfly\layout\archive.pug
1
2
3
4
5
6
7
8
9
| extends includes/layout.pug
block content
include ./includes/mixins/article-sort.pug
#archive
.article-sort-title= _p('page.articles') + ' - ' + site.posts.length
- +articleSort(page.posts)
+ +articleSort(page.posts, page.current)
include includes/pagination.pug
|
分类页面
\themes\butterfly\layout\category.pug
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| extends includes/layout.pug
block content
if theme.category_ui == 'index'
include ./includes/mixins/post-ui.pug
#recent-posts.recent-posts.category_ui
+postUI
include includes/pagination.pug
else
include ./includes/mixins/article-sort.pug
#category
.article-sort-title= _p('page.category') + ' - ' + page.category
- +articleSort(page.posts)
+ +articleSort(page.posts, page.current)
include includes/pagination.pug
|
标签页面
\themes\butterfly\layout\tag.pug
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| extends includes/layout.pug
block content
if theme.tag_ui == 'index'
include ./includes/mixins/post-ui.pug
#recent-posts.recent-posts
+postUI
include includes/pagination.pug
else
include ./includes/mixins/article-sort.pug
#tag
.article-sort-title= _p('page.tag') + ' - ' + page.tag
- +articleSort(page.posts)
+ +articleSort(page.posts, page.current)
include includes/pagination.pug
|
增加文章索引样式
\themes\butterfly\source\css\_page\archives.styl，大概在 100 行的位置，增加 .article-sort-item-index 的样式.
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
107
108
109
110
111
112
113
114
115
116
117
118
| .article-sort
margin-left: 10px
padding-left: 20px
border-left: 2px solid lighten($light-blue, 20)
&-title
position: relative
margin-left: 10px
padding-bottom: 20px
padding-left: 20px
font-size: 1.72em
&:hover
&:before
border-color: var(--pseudo-hover)
&:before
position: absolute
top: calc(((100% - 36px) / 2))
left: -9px
z-index: 1
width: w = 10px
height: h = w
border: .5 * w solid $light-blue
border-radius: w
background: var(--card-bg)
content: ''
line-height: h
transition: all .2s ease-in-out
&:after
position: absolute
bottom: 0
left: 0
z-index: 0
width: 2px
height: 1.5em
background: lighten($light-blue, 20)
content: ''
&-item
position: relative
display: flex
align-items: center
margin: 0 0 20px 10px
transition: all .2s ease-in-out
&:hover
&:before
border-color: var(--pseudo-hover)
&:before
$w = 6px
position: absolute
left: calc(-20px - 17px)
width: w = $w
height: h = w
border: .5 * w solid $light-blue
border-radius: w
background: var(--card-bg)
content: ''
transition: all .2s ease-in-out
&.no-article-cover
height: 80px
.article-sort-item-info
padding: 0
&.year
font-size: 1.43em
&:hover
&:before
border-color: $light-blue
&:before
border-color: var(--pseudo-hover)
&-time
color: $theme-meta-color
font-size: 95%
time
padding-left: 6px
cursor: default
&-title
@extend .limit-more-line
color: var(--font-color)
font-size: 1.1em
transition: all .3s
-webkit-line-clamp: 2
&:hover
color: $text-hover
transform: translateX(10px)
+ &-index
+ opacity: .5
+ position: absolute
+ top: .5rem
+ right: .5rem
+ font-style: italic
+ font-size: 2.5rem
+ line-height: 1.5rem
&-img
overflow: hidden
width: 80px
height: 80px
img
@extend .imgHover
&-info
flex: 1
padding: 0 16px
|
Hexo 三连
执行 Hexo 三连
1
| hexo clean && hexo g && hexo s
|
微信
支付宝
