初始化中...
这篇文章讲的是即可短文的更新内容，在即可短文的基础功能之上，添加了可以设置多个链接与视频的功能，文章中介绍了如何添加这两个功能到即可短文中，并贴上了代码，如果有疑问的地方，可以评论区留言哦~
前言
前段时间，使用即刻短文发短文，想附加几个链接，发现即刻短文不支持，所以自己参考一下源码修改了一下，让即刻短文支持了附加多个链接。过了几天，正好看到有小伙伴研究出了怎么给即刻短文附加视频，还发了文章教程，所以顺便也给博客的即刻短文添加了支持视频的附加。
预览效果
效果如下：
修改pug文件
找到 themes\butterfly\layout\includes\page\essay.pug 文件，做如下的修改来支持配置文件配置视频和多个链接：
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
| if item.image
.bber-container-img
each iten, indey in item.image
a.bber-content-img(href=item.image[indey], target="_blank", data-fancybox="gallery", data-caption="")
img(src=item.image[indey])
.bber-content-noimg
.bber-content-noimg
.bber-content-noimg
+ if item.video
+ .bber-container-video
+ each iten, indey in item.video
+ a.bber-content-video(href=item.video[indey], target="_blank", data-type="video",data-preload="none",data-autoplay="false")
+ video(src=item.video[indey])
if item.aplayer
.bber-music
//- .aplayer.no-destroy(data-id=item.aplayer.id data-server=item.aplayer.server data-type="song" data-order="list" data-preload="none" data-autoplay="false" data-mutex="true" data-theme='var(--anzhiyu-main)')
meting-js(id=item.aplayer.id server=item.aplayer.server type="song" mutex="true" preload="auto" theme="var(--anzhiyu-main)" order="list")
hr
.bber-bottom
.bber-info
.bber-info-time
- var datedata = new Date(item.date).toISOString()
i.far.fa-clock
time.datatime(datetime= item.date)= datedata
if item.from
.bber-info-from
i.far.fa-popsicle
span=item.from
+ if item.link
+ each val, key in item.link
+ a.bber-content-link(target="_blank", title="跳转到短文指引的链接", href=val, rel="external nofollow")
+ i.fas.fa-link
+ | 链接
.bber-reply(onclick="anzhiyu.commentText(" + `'${item.content}'` + ")")
|
修改或新建css文件
找到 themes\butterfly\source\css_custom\essay\essay.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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
| #bber .bber-container-img {
display: flex;
align-items: center;
justify-content: space-around;
width: 100%;
flex-wrap: wrap;
margin-bottom: 0.3rem;
}
#bber .bber-container-img .bber-content-noimg {
width: calc(100% / 4 - 5px);
}
#bber .bber-content-img img {
object-fit: cover;
max-height: 100%;
border-radius: 12px;
}
#bber .bber-content-img {
height: 100px;
border-radius: 12px;
overflow: hidden;
display: flex;
position: relative;
margin-top: 10px;
}
#bber .bber-content .datacont {
order: 0;
font-size: 0.8rem;
font-weight: 700;
color: var(--anzhiyu-fontcolor);
width: 100%;
line-height: 1.38;
border-radius: 12px;
margin-bottom: 0.5rem;
display: flex;
flex-direction: column;
text-align: justify;
}
#bber p {
margin: 0px;
}
#bber div.bber-content {
display: flex;
flex-flow: wrap;
border-radius: 12px;
width: 100%;
height: 100%;
}
#bber .timeline ul li.bber-item {
position: relative;
width: 32%;
border: var(--style-border-always);
border-radius: 12px;
padding: 1rem 1rem 0.5rem;
transition: all 0.3s ease 0s;
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
align-items: flex-start;
background: var(--anzhiyu-card-bg);
box-shadow: var(--anzhiyu-shadow-border);
margin-right: 2%;
}
#bber .timeline #waterfall.show {
opacity: 1;
}
#bber .timeline #waterfall {
opacity: 0;
transition: all 0.3s ease 0s;
}
#bber ul.list {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
#bber {
margin-top: 1rem;
width: 100%;
}
#bber > section > ul > li.bber-item {
margin-bottom: 1rem;
}
#bber-tips {
font-size: 14px;
display: flex;
justify-content: center;
margin-top: 1rem;
}
#bber .timeline ul li.bber-item hr {
display: flex;
position: relative;
margin: 8px 0px;
border: 1px dashed var(--anzhiyu-theme-op);
width: 100%;
}
#bber .bber-info {
display: flex;
align-items: center;
flex-wrap: wrap;
align-content: flex-start;
}
#bber > section > ul > li > div .bber-info-time,
#bber > section > ul > li > div .bber-info-from {
color: var(--anzhiyu-fontcolor);
font-size: 0.7rem;
background-color: var(--anzhiyu-gray-op);
padding: 0px 8px;
border-radius: 20px;
cursor: default;
display: flex;
align-items: center;
margin-right: 4px;
margin-top: 4px;
}
#bber .bber-info .far.fa-clock {
margin-right: 4px;
}
#bber > section > ul > li > div .bber-info-from span,
#bber > section > ul > li > div .bber-info-from {
margin-right: 4px;
}
#bber .bber-bottom {
display: flex;
justify-content: space-between;
width: 100%;
}
#bber .bber-bottom .bber-reply {
cursor: url(/img/x2.cur), auto !important;
}
#bber .timeline ul li.bber-item:hover {
border: var(--style-border-hover);
}
#bber .bber-content-link {
display: flex;
margin-right: 4px;
font-size: 0.7rem;
align-items: center;
background-color: rgba(245, 108, 108, 0.13);
color: rgb(245, 108, 108);
padding: 0px 8px;
border-radius: 20px;
margin-top: 4px;
}
#bber .bber-content-link i {
margin-right: 3px;
}
#bber .bber-content-link:hover {
background-color: var(--anzhiyu-main);
color: var(--anzhiyu-white);
}
#bber .bber-music {
width: 100%;
height: 90px;
margin: 0.5rem 0;
border-radius: 8px;
overflow: hidden;
border: var(--style-border-always);
background: var(--anzhiyu-secondbg);
}
#bber .aplayer {
margin: 0;
}
#bber .aplayer.aplayer-withlrc .aplayer-pic {
height: 82px;
width: 82px;
margin: 4px;
border-radius: 4px;
}
.bber-music .aplayer.aplayer-withlrc .aplayer-info {
padding: 5px 7px 0;
}
#bber .aplayer .aplayer-info .aplayer-music {
height: 23px;
}
#bber .aplayer .aplayer-info .aplayer-music .aplayer-title {
font-size: 0.8rem;
font-weight: 700;
margin: 0;
color: var(--anzhiyu-fontcolor);
}
#bber .aplayer .aplayer-info .aplayer-controller {
align-items: center;
}
#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap {
padding: 0;
}
#bber .aplayer .aplayer-info .aplayer-controller .aplayer-time {
position: initial;
}
#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {
background: var(--anzhiyu-gray);
height: 8px;
border-radius: 12px;
transition: 0.3s;
overflow: hidden;
}
#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded {
height: 100%;
border-radius: 12px;
}
#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played {
height: 100%;
border-radius: 12px;
}
#bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb {
display: none;
}
#bber .aplayer .aplayer-info .aplayer-controller .aplayer-time {
position: initial;
}
.author-content.author-content-item.essayPage {
height: 19rem;
background: url(/img/xision_duolong.webp) left 28% / cover no-repeat;
color: var(--anzhiyu-white);
overflow: hidden;
margin-top: 0px;
border-radius: 15px !important;
}
@media screen and (max-width: 1300px) {
#bber .timeline ul li.bber-item {
width: 49%;
margin-right: 1%;
}
}
@media screen and (max-width: 768px) {
#bber .timeline ul li.bber-item {
width: 100%;
margin-right: 0px;
}
}
[data-theme="dark"] #bber .bber-music .aplayer,
[data-theme="dark"] #bber .aplayer .aplayer-lrc:before,
[data-theme="dark"] #bber .aplayer .aplayer-lrc:after {
background: var(--anzhiyu-card-bg);
color: var(--anzhiyu-fontcolor);
}
#bber .aplayer .aplayer-lrc p {
color: var(--anzhiyu-fontcolor);
}
a.bber-content-video video {
border-radius: 4px;
max-width: 100%;
width: 7rem;
transition: all 0.28s ease;
-moz-transition: all 0.28s ease;
-webkit-transition: all 0.28s ease;
-o-transition: all 0.28s ease;
}
a.bber-content-video video:hover {
box-shadow: 0 4px 8px 0px rgb(0 0 0 / 24%), 0 8px 16px 0px rgb(0 0 0 / 24%);
}
#bber .bber-container-video {
display: flex;
align-items: center;
justify-content: space-around;
width: 100%;
flex-wrap: wrap;
margin-bottom: 0.3rem;
}
|
引入css文件
如果没有创建新的essay.css文件就跳过这一步，创建了css文件的小伙伴需要看这里，这里将教你怎么引入新建的css文件。
修改 _config.butterfly.yml 主题配置文件，修改内容如下：
1
2
3
4
5
6
7
8
9
| # Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
head:
# 自定义css
+ - <link rel="stylesheet" href="/css/essay.css"> #添加的自定义css文件
bottom:
# 自定义js
|
Hexo三连
1
| hexo clean && hexo g && hexo s
|
