之前首页公告一直用的 哔哔 ,但是我的 哔哔 当随笔用了。里面放的是一些生活中的吐槽,看法,杂文之类的,不想把他和博客之类的东西混在一起。

所以单独搞了个公告页面,参考张洪大佬的博客,做出以下调整。

标签外挂引入

我的公告页面用的 时间线标签外挂,所以要引入,如果想 DIY 样式的可以不用引入。

引入 timeline.js

文件地址:themes/butterfly/scripts/tag/timeline.js

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
'use strict';

function postTimeline(args, content) {
if (args.length > 0) {
return `<div class="timeline"><p class='p h2'>${args}</p>${content}</div>`;
} else {
return `<div class="timeline">${content}</div>`;
}
}

function postTimenode(args, content) {
args = args.join(' ').split(',')
var time = args[0]
return `<div class="timenode"><div class="meta"><p>${hexo.render.renderSync({text: time, engine: 'markdown'})}</p></div><div class="body">${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')}</div></div>`;
}


// {% timeline %}
// ... timenode ...
// {% endtimeline %}
hexo.extend.tag.register('timeline', postTimeline, {ends: true});

// {% timenode time %}
// what happened
// {% endtimenode %}
hexo.extend.tag.register('timenode', postTimenode, {ends: true});

引入 timeline.styl

文件地址:themes/butterfly/sources/css/_tags/timeline.styl

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
div
&.timenode
position relative
&:before
top 0
height 6px
&:after
top 26px
height calc(100% - 26px)
&:last-child
&:after
height calc(100% - 26px - 16px)
border-bottom-left-radius 2px
border-bottom-right-radius 2px
.meta
position relative
color var(--tab-botton-color)
font-size 0.375rem
line-height 32px
height 32px
&:before
background rgba(68, 215, 182, 0.5)
width 16px
height 16px
border-radius 8px
&:after
background #44d7b6
margin-left 2px
margin-top 2px
width 12px
height 12px
border-radius 6px
transform scale(0.5)
p
font-weight bold !important
margin 0 0 0 24px !important
.body
margin 4px 0 10px 24px
padding 10px
border-radius 12px
background #efeded
display inline-block
p
&:first-child
margin-top 0 !important
&:last-child
margin-bottom 0 !important
.highlight
background #fff7ea
filter grayscale(0%)
figcaption
background #ffeed2
.gutter
background #ffedd0
&:hover
.meta
color #444
&:before
background rgba(255, 87, 34, 0.5)
&:after
background #ff5722
transform scale(1)

div.timenode:before,
div.timenode:after
content ""
z-index 1
position absolute
background rgba(68, 215, 182, 0.5)
width 2px
left 7px

div.timenode .meta,
div.timenode .body
max-width calc(100% - 24px)

div.timenode .meta:before,
div.timenode .meta:after
content ""
position absolute
top 8px
z-index 2

[data-theme="dark"]
div
&.timenode
.body
background #2c2c2c
&:hover
.meta
color #ccd0d7
.meta
color rgba(255, 255, 255, 0.6)
&.timeline
p
&.p
&.h2
color rgba(255, 255, 255, 0.6)

公告模板引入

新建 homeNotice.pug

文件地址:themes/butterfly/layout/includes/homeNotices.pug

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#noticeList.container(onclick=`window.open('/notice/','_self')`)
.nlogo="公告"
.swiper-container
#notice-item.swiper-wrapper
if site.data.notice
each i in site.data.notice
.li-style.swiper-slide=i.msg
i.fas.fa-arrow-circle-right(title="查看全文")

.js-pjax
script(src='https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js',data-pjax='')
script.
new Swiper('.swiper-container', {
direction: 'vertical',
loop: true,
autoplay: {
delay: 3000,
disableOnInteraction: true,
}
})

引入 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
#notice-item {
width: 100%;
height: 25px;
line-height: 25px;
}
#notice-item .li-style {
width: 100%;
height: 25px;
font-weight: 500;
text-align: center;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
transition: 0.3s;
}
#noticeList {
background: var(--card-bg);
color: var(--font-color);
margin-top: 1rem;
padding: 0.6rem 1rem;
border-radius: 12px;
cursor: pointer;
display: flex;
align-items: center;
}
#noticeList .nlogo{
color: var(--font-color);
font-weight: 600;
display: inline;
}
#noticeList .swiper-container{
display: flex;
flex: 1;
}
#noticeList i {
text-align: right;
}

引入 homeNotice 模板

文件地址:themes/butterfly/layout/index.pug

1
2
3
4
5
6
7
8
extends includes/layout.pug

block content
include ./includes/mixins/post-ui.pug
#recent-posts.recent-posts
+ include includes/homeNotice.pug
+postUI
include includes/pagination.pug

引入 notice 模板

文件地址:themes/butterfly/layout/includes/page/notice.pug

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#article-container
if top_img === false && page.tip
h1.page-title.page-title-has= page.title
.page-title-tip!= page.tip
else
h1.page-title= page.title

!= page.content

.timeline(class="notice")
if site.data.notice
each i in site.data.notice
.timenode
.meta
p
p=i.date
p
.body
p=i.msg

添加判断

文件地址:themes/butterfly/layout/page.pug

1
2
3
4
5
6
when 'categories'
include includes/page/categories.pug
+ when 'notice'
+ include includes/page/notice.pug
default
include includes/page/default-page.pug

新建模板

1
hexo new page notice
1
2
3
4
5
6
7
---
title: 公告
type: "notice"
aside: false
comments: false
---
...

引入 notice.yml

新增公告直接向上添加即可。文件地址:source/_data/notice.yml

1
2
3
4
- date: 2021.05.24
msg: Butterfly 主题首页增加公告
- date: 2021.04.29
msg: 博客正式上线

大功告成

hexo 三连过后,惊喜出现了【 或者惊吓 (‧̣̥̇꒪່⍢꒪່ ) 】,快去试试看吧~

参考文献

《Hexo-Butterfly 说说朋友圈适配》 - 张洪Heo
《基于 Butterfly 的外挂标签引入》 - Akilar