前言
本文教程主要针对 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
|