Hexo-pure改造计划——添加说说页面

温馨提示:点击页面下方以展开或折叠目录~

hexo pure 主题添加动态说说

添加说说页面

文件(夹)操作

按照这个,添加「相册」页面

给你的Hexo博客添加说说页面

哔哔点啥」微信公众号 2.0

./theme/pure/shuoshuo/文件夹下添加index.md文件,将下面代码复制过去,更改云函数环境id

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
---
title: 说点啥
type: shuoshuo
toc: false
noDate: 'true'
comments: 'false'
---
<div class="content">
<div class="post">
<h2 class="post-title">说说</h2>
<div class="post-content">
<div class="search-box">
<input type="text" id="searchBoxInput" placeholder="搜搜以前说了啥">
</div>
<style>
.timeline ul {
margin:0;
background-color: #fff;/*背景颜色 */
padding: 10px;
min-height: 200px;
}

.timeline ul li
{
background:#08f0f8;/*线条*/
list-style-type:none;
position:relative;
width:3px;
margin-left:2em;
padding:0.8em 0 2em;
}
.timeline ul li::after
{
transform: rotate(45deg);
content:'';
background-color:#92b3b9;/*棱块*/
display: block;
position: absolute;
top: 10px;
left: -5px;
width: 0.8em;
height:0.8em;
outline: 15px solid #fff;
}
.timeline ul li div
{
position:relative;
/* background-color: red;整个一条 */
top:-13px;
left:3em;
width:670px;
padding:0px 16px 0px;
}
.timeline ul li p.datatime{
color: #fafafa;
font-size: 0.75em;
font-style:italic;
background-color: #3b3d42;/*时间的背景颜色*/
display: inline-block;
padding:0.25em 1em 0.2em 1em;
}
.timeline ul li p.datacont{
white-space: pre-wrap;
margin:0.65em 0 0.3em;
/* background-color: red;说说的背景颜色 */
}
.timeline ul li p.datacont img{
display:block;
max-height:340px!important;
/* background-color: red;图片边框颜色 */
}
.timeline ul li p.datacont img[src*="emotion"]
{
display:inline-block;
width:auto;
background-color: red;
}
.timeline ul li p.datafrom{
color: #aaa;
font-size: 0.75em !important;
font-style:italic;
/* background-color: red;发送人的背景颜色 */
}
.timeline ul li p
{
margin:0;
font-size:16px;
letter-spacing:1px;
color:#3b3d42;
/* background-color: red;内容和发送人都红了 */
}
button{
width: auto;
border-radius: 5%;
background-color: #d4e3e4;
}
.dark-theme .timeline ul li div p{
color:#fafafa;
/* background-color: red;没反应 */
}
.dark-theme .timeline ul li div p svg{
fill:#fafafa;
}
.dark-theme .timeline ul li p.datafrom{
color: #aaa;
}
.dark-theme .timeline ul li{
background:#3b3d42;
}
.dark-theme .timeline ul li::after{
outline: 15px solid #292a2d;
}
@media(max-width:860px) {
.timeline ul li{margin-left:0;}
.timeline ul li div{width:calc(100vw- 75px);left:30px;} }
</style>
<div id="bber"></div>
</div>
</div>
<script src="https://imgcache.qq.com/qcloud/cloudbase-js-sdk/1.4.0/cloudbase.full.js">
</script>
<script src="https://cdn.jsdelivr.net/gh/buddys/qq-wechat-emotion-parser@master/dist/qq-wechat-emotion-parser.min.js">
</script>
<script>
const app = cloudbase.init({
env: "函数的环境id",
})
</script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/lmm214/bber@0.0.6/bber.js">
</script>
</div>

更改函数的环境id你自己函数的环境id