爱吃肉的猫 https://meuicat.com/ 记录生活与技术点滴 Sun, 15 Dec 2024 10:06:07 GMT http://hexo.io/ 那就，再相逢 https://meuicat.com/posts/f8b8816a.html https://meuicat.com/posts/f8b8816a.html Sun, 15 Dec 2024 09:57:28 GMT 早已不害怕冬天。冬天，是春的上联。 从2024的备忘录里抽出的每一天，都如同从土地里煅烧出来的砖瓦，至今350个日夜胡乱垒在身上，硬生生堆出一座山野蹉跎的废墟来。

我曾在这一年的中旬这样总结：

“2024的上半年，是我人生中一段难熬的时光。

无数问题如野草一般在我的荒原疯长：理想与现实的错位、离经叛道的痛苦、左右摇摆的恍惚、经验主义的蛊惑、破罐子破摔的糜烂、一味逃避的慌张..

在反复的头痛欲裂和无效的精神内耗之后，我发现眼前的现实世界已经在一定程度上开始错乱。
于是，我决定放弃挣扎，不再抵抗，想看看无可救药的自己究竟能烂成什么样子，gap term 就这样在浑浑噩噩与混吃等死中度过。”

七月，我曾颜之厚矣地说过：

“我是豪放飘逸、乐观豁达、沉郁顿挫、忧国忧民、通俗晓畅、柔靡绮丽、深沉悲痛、清新自然、慷慨悲凉、平淡质朴、婉约细腻、晦涩难解的总和。
与五岳四渎，与日月天地，与佛与儒与道，与万物为一。”

现在回想起来，什么狗屁圣人，不过是空洞的自我标榜，都留给其他人去当好了。我只想做个俗人，俗不可耐的那种，幼稚好骗贪得无厌。第一次在万物寂寥的山巅，感到无限生机。
我有一腔少年事。山高高，路迢迢，所思在远道。

而2024下半年，则是一趟自我救赎的单向旅程。
学习、工作、喝酒、远行。我独自通宵爬完一整座山然后枕着天街瞌睡三晌，深夜顶着大雨只为一睹海的对岸；
徒步十公里穿行萧瑟的乡野，同友畅聊周公与截茕。

蓝道前无畏飞跃的滑雪小能手，棋牌桌前关三家的麻将侥幸哥，也曾在西湖边上装疯卖傻，上海滩外浅弹低吟；宽窄天府俗世一逛，南北金陵装模作样。
逃去淄博啃一嘴烧烤，我蹲在路边得意忘形；留在济南追一天夕阳，我跑到黄河都不死心..

这两年独自旅行了很多地方，也在旅途中结交到了同样沉耽于饮酒写诗的至友。
同事给带的早餐、朋友投喂的零食、路灯下被拉长的影子、柏油路上的小动物、飘落的树叶、教室里透过窗户射进的光影，生活并不总是暗淡无光。
不知道从哪一天起，饼干碎屑落在日记本上时，在我心里已不再似大雨如注。

我开始相信，这一切都是命运。

差十几分是命运，人生路口走岔路是命运；人过来了，但格却丢了。
人各有命，这一辈子吉凶祸福如影随形，天要注定的事怎么都逃不掉。

我能做的不是逆天改命。我没有哪吒的混天绫和乾坤圈，搅不翻东海，也救不了苍生。
落子无悔，抉择本身就是向前。我能做的仅仅是在我能力所及内竭尽全力，然后允许一切发生，接受命定的事与愿违。
如此如此，就算圆满了。

拉长的时间线浓缩成一颗糖：清晨乡间的凉薄荷味。我含着它耍赖，迟迟不肯咽下，就这样抓住风的尾巴，四处游荡。

2024，当然还有些想对娜娜说的话：

“夫人，我当然是个疯子，不然为什么会逆着天灾，赶来送你一束玫瑰花？
“你的名字是无解的春，被埋藏于千万年前的秋季。”

夫人，我曾一无所有，是你你携春日的音符，在我生命里写下满山遍野的浪漫。
远山火盆断了火，云翳深林巫毒落。

夫人，明天一定会好的，我无比坚信。
那时玫瑰将洒满浴缸，你会在暖流里泛起涟漪歌唱。

佛罗伦萨的少女对着海岸捏造的谎。
启示录，窄门，和回不去的故乡。
寻月的人从此不再流浪。

我无比坚信。”

还有些将说未说的，就放在下一分钟吧。
下一分钟，继续奔跑着去见未见的世界，继续去爱这破碎泥泞的人间。

年末将至，平安喜乐。祝你，祝我，也祝我们。

]]> 生活随笔 封の唠叨 地球体验卷 https://meuicat.com/posts/f8b8816a.html#disqus_thread Butterfly的魔改教程：最新评论页 https://meuicat.com/posts/9619b717.html https://meuicat.com/posts/9619b717.html Thu, 27 Jun 2024 12:10:45 GMT 显示全站最新评论内容，快速预览；内附评论总数显示、热评弹窗教程

230821 更新：新增article的JSON文件原生api，再也不用手动新增结构数据啦~

230720 更新：修复控制台无容器时报错

230718 更新：修复个人卡片显示评论数量异常。新增作者标识，提升UI样式

240628 更新：新增评论过滤匹配功能；调整、减少冗余UI样式以及JS优化

240702 更新：热评弹窗优化、UI调整、教程地址更新

新版

效果预览

最新评论
快速预览本站最新评论

创建数据

  • 创建 [blogRoot]/source/comments/index.md 页面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
---
title: 最新评论
date: 2023-07-17 14:07:01
type: comments
top_img: false
aside: false
top_page: true
top_bg: https://img.meuicat.com/banner
top_item: 速览
top_title: 最新评论
top_tips: 快速预览本站最新评论
---

<!-- 页面内容 -->
  • 修改 [blogRoot]/themes/butterfly/layout/page.pug 来使页面匹配
    （ + 号直接删除 即是正常缩进）
1
2
3
4
5
6
      when 'categories'
        include includes/page/categories.pug
+      when 'comments'
+        include includes/page/comments.pug
      default
        include includes/page/default-page.pug
  • 新建 [blogRoot]/themes/butterfly/layout/includes/page/comments.pug 页面，并新增以下内容
1
2
3
#comments-page
    .page-load
        img(src="https://img.meuicat.com/blog/loading.svg" style="margin:auto")
  • 新建 [blogRoot]/themes/butterfly/source/css/_page/comment.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
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
#comments-page
    display: flex
    flex-wrap: wrap
    gap: 12px
    width: 100%
    margin-top: 1.5rem

    .page-load
        display: flex
        width: 100%

    .comment-card
        position: relative
        width: calc(100% / 4 - 9px)
        border-radius: 12px
        border: var(--style-border)
        padding: 14px
        cursor: pointer
        transition: .3s
        overflow: hidden
        box-shadow: var(--icat-shadow-border)
        background: var(--icat-card-bg)
        animation: slide-in .6s .4s backwards
        will-change: transform

        +maxWidth1024()
            width: calc(100% / 2 - 6px)

        +maxWidth768()
            width: 100%    
  
        &:hover
            border-color: var(--icat-blue)

            .comment-more
                opacity: 1

        .comment-info
            display: flex
            align-items: center
            padding-bottom: 14px
            margin-bottom: 8px
            border-bottom: 1px dashed var(--hr-border)

            img
                width: 50px
                height: 50px
                object-fit: cover
                border-radius: 50%
                margin: 0 !important

            .comment-information
                display: flex
                flex-direction: column
                margin-left: 12px
                line-height: 1.5

                .comment-user
                    display: flex
                    align-items: center
                    font-weight: bold
                    font-size: 15px

                .comment-author
                    &:after
                        content: "\e04f"
                        font-family: "iconfont" !important
                        padding-left: 6px
                        font-size: 14px
                        color: var(--icat-green)

                .comment-time
                    opacity: .8
                    font-size: 12px

    .comment-content
        margin: 8px 5px 0
        overflow: hidden
        text-overflow: ellipsis
        display: -webkit-box
        -webkit-box-orient: vertical
        -webkit-line-clamp: 2
        line-height: 1.7
        font-weight: 400

    .comment-more
        position: absolute
        left: 0
        top: 0
        height: 100%
        width: 100%
        z-index: 1
        background: var(--icat-blue)
        color: var(--icat-white)
        margin: 0
        display: flex
        padding: .5rem 1rem
        opacity: 0
        flex-direction: column
        justify-content: space-between
        transition: .3s

        .comment-title
            display: flex
            align-items: center
            justify-content: space-between

            span
                display: flex
                font-size: 16px
                align-items: center
                overflow: hidden
                text-overflow: ellipsis
                display: -webkit-box
                -webkit-box-orient: vertical
                -webkit-line-clamp: 1
                font-weight: 400

                i
                    margin-right: 4px

            a
                font-size: 14px
                color: var(--icat-white)
                opacity: .6
                margin-left: 4px
                white-space: nowrap

        .comment-tool
            display: flex
            flex-wrap: wrap
            gap: 4px 8px

            a
                background: var(--icat-card-bg-op);
                color: var(--icat-white)
                border-radius: 8px
                padding: 4px 8px
                font-size: 14px
                opacity: .6

        a:hover
            opacity: 1

[data-theme='dark']
    #comments-page
        .comment-card
            .comment-info
                .comment-information
                    .comment-author
                        &:after
                            color: var(--icat-blue)
可选CSS样式
  • 新建 [blogRoot]/themes/butterfly/source/css/comment.css 样式文件，并新增以下内容
    （也可以在自建的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
#comments-page {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -o-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  margin-top: 1.5rem;
}
#comments-page .page-load {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  width: 100%;
}
#comments-page .comment-card {
  position: relative;
  width: calc(100% / 4 - 9px);
  border-radius: 12px;
  border: var(--style-border);
  padding: 14px;
  cursor: pointer;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
  overflow: hidden;
  -webkit-box-shadow: var(--icat-shadow-border);
  box-shadow: var(--icat-shadow-border);
  background: var(--icat-card-bg);
  -webkit-animation: slide-in 0.6s 0.4s backwards;
  -moz-animation: slide-in 0.6s 0.4s backwards;
  -o-animation: slide-in 0.6s 0.4s backwards;
  -ms-animation: slide-in 0.6s 0.4s backwards;
  animation: slide-in 0.6s 0.4s backwards;
  will-change: transform;
}
@media screen and (max-width: 1024px) {
  #comments-page .comment-card {
    width: calc(100% / 2 - 6px);
  }
}
@media screen and (max-width: 768px) {
  #comments-page .comment-card {
    width: 100%;
  }
}
#comments-page .comment-card:hover {
  border-color: var(--icat-blue);
}
#comments-page .comment-card:hover .comment-more {
  opacity: 1;
  -ms-filter: none;
  filter: none;
}
#comments-page .comment-card .comment-info {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  padding-bottom: 14px;
  margin-bottom: 8px;
  border-bottom: 1px dashed var(--hr-border);
}
#comments-page .comment-card .comment-info img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 !important;
}
#comments-page .comment-card .comment-info .comment-information {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -o-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-left: 12px;
  line-height: 1.5;
}
#comments-page .comment-card .comment-info .comment-information .comment-user {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  font-weight: bold;
  font-size: 15px;
}
#comments-page .comment-card .comment-info .comment-information .comment-author:after {
  content: "\e04f";
  font-family: "iconfont" !important;
  padding-left: 6px;
  font-size: 14px;
  color: var(--icat-green);
}
#comments-page .comment-card .comment-info .comment-information .comment-time {
  opacity: 0.8;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80);
  font-size: 12px;
}
#comments-page .comment-content {
  margin: 8px 5px 0;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.7;
  font-weight: 400;
}
#comments-page .comment-more {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
  background: var(--icat-blue);
  color: var(--icat-white);
  margin: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  padding: 0.5rem 1rem;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -o-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -o-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}
#comments-page .comment-more .comment-title {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -o-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
#comments-page .comment-more .comment-title span {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  font-size: 16px;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  font-weight: 400;
}
#comments-page .comment-more .comment-title span i {
  margin-right: 4px;
}
#comments-page .comment-more .comment-title a {
  font-size: 14px;
  color: var(--icat-white);
  opacity: 0.6;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  filter: alpha(opacity=60);
  margin-left: 4px;
  white-space: nowrap;
}
#comments-page .comment-more .comment-tool {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -o-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 4px 8px;
}
#comments-page .comment-more .comment-tool a {
  background: var(--icat-card-bg-op);
  color: var(--icat-white);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 14px;
  opacity: 0.6;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  filter: alpha(opacity=60);
}
#comments-page .comment-more a:hover {
  opacity: 1;
  -ms-filter: none;
  filter: none;
}
[data-theme='dark'] #comments-page .comment-card .comment-info .comment-information .comment-author:after {
  color: var(--icat-blue);
}

/* 最新评论页 */
  • 在 _config.butterfly.yml 主题配置文件中 inject 下的 head 引入 comment.css
1
2
3
4
5
6
7
8
9
  ···

inject:
  head:
    - <link rel="stylesheet" href="/css/comment.css"> # 最新评论页
  bottom:
    - ···

  ···
  • 创建 [blogRoot]/themes/butterfly/source/js/comment.js 文件，并新增以下内容
    （或写在自建的公共 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
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
let article;
const comment = {
    fetchData(options, type, exclude) {
        fetch('{envId}', {
            method: "POST",
            body: JSON.stringify({
                "event": "GET_RECENT_COMMENTS",
                "accessToken": "{YOUR_TOKEN}",
                "includeReply": true,
                ...options
            }),
            headers: { 'Content-Type': 'application/json' }
        }).then(res => res.json()).then(response => {
            let html = '',
data = response.data;

if (exclude) {
switch (type) {
case 'visitor':
data = data.filter(item => item.mailMd5 === exclude);
break;
case 'v-shield':
data = data.filter(item => item.mailMd5 !== exclude);
break;
case 'a-shield':
data = data.filter(item => item.url !== exclude);
break;
default:
break;
}
}

            data.forEach(item => {
                const createdDate = new Date(item.created);
                const formattedDate = `${createdDate.getFullYear().toString().slice(-2)}-${createdDate.getMonth() + 1}-${createdDate.getDate()} ${createdDate.getHours()}:${createdDate.getMinutes()}:${createdDate.getSeconds()}`;
                html += `<div class="comment-card">
                <div class="comment-info">
                    <img src="${item.avatar}" class="nolazyload">
                    <div class="comment-information">
                        <span class="${['亦封', '亦小封'].includes(item.nick) ? 'comment-author' : ''} comment-user" data-mailMd5="${item.mailMd5}">${item.nick}</span>
                        <span class="comment-time">${formattedDate}</span>
                    </div>
                </div>
                <div class="comment-content">${item.commentText.replaceAll('<', '&lt;').replaceAll('>', '&gt;')}</div>
                <div class="comment-more">
                    <div class="comment-title">
                        <span class="comment-link" title="查看此文章" onclick="pjax.loadUrl('${item.url}')">
                            <i class="iconfont icat-read"></i>
                            ${article[item.url]}
                        </span>
                        <a onclick="pjax.loadUrl('${item.url}#${item.id}')">查看评论</a>
                    </div>
                    <div class="comment-tool">`

let a = `<a href="javascript:void(0)" onclick="comment.article(event)" title="显示此文章所有评论">查看更多</a>`,
b = `<a href="javascript:void(0)" onclick="comment.article(event, true)" title="不显示此文章的评论">屏蔽文章</a>`,
c = `<a href="javascript:void(0)" onclick="comment.visitor(event, true)" title="不显示该访客的评论">屏蔽Ta</a>`,
d = `<a href="javascript:void(0)" onclick="comment.visitor(event)" title="显示该访客的所有评论">查看Ta更多评论</a>`
e = `<a href="javascript:void(0)" onclick="comment.data()" title="查看本站最新评论">返回评论</a>`;
switch (type) {
case 'article':
html += e + c + d;
break;
case 'visitor':
html += e + a + b;
break;
case 'v-shield':
case 'a-shield':
html += a + b + c + d + e;
break;
default:
if (!type) html += a + b + c + d;
break;
}

html += `</div>
</div>
</div>`
            });
            document.getElementById('comments-page').innerHTML = html;
        });
    },
visitor(event, shield) {
        const spanElement = event.target.closest('.comment-card').querySelector('.comment-user');
        const mail = spanElement.getAttribute('data-mailMd5');
if (shield) {
this.fetchData({
"pageSize": -1
}, 'v-shield', mail);
return
}
this.fetchData({
"pageSize": -1
        }, 'visitor', mail);
    },
    article(event, shield) {
        const spanElement = event.target.closest('.comment-card').querySelector('.comment-link');
        const url = spanElement.getAttribute('onclick').match(/'(\/.*?)'/)[1];
if (shield) {
this.fetchData({
"pageSize": -1
}, 'a-shield', url);
return
}
        this.fetchData({
            "urls": [url]
        }, 'article');
    },
    data() {
        if (!article) fetch('/article.json').then(res => res.json()).then(data => { article = data; });
        this.fetchData({
            "pageSize": 100
        });
    }
};

window.DOMReady = function () {
if (document.querySelector('#comments-page')) comment.data();
};

window.addEventListener("load", DOMReady)
document.addEventListener("pjax:complete", DOMReady)

// 最新评论页

注意：
{envId} 和 {YOUR_TOKEN} 需要替换为对应值

  • 在 _config.butterfly.yml 主题配置文件中 inject 下的 bottom 引入 comment.js
1
2
3
4
5
6
7
8
9
  ···

inject:
  head:
    - ···
  bottom:
    - <script type="text/javascript" src="/js/comment.js"></script> # 最新评论页

  ···

个人卡片总评论

  • 修改 [blogRoot]/themes/butterfly/layout/includes/widget/card_author.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
if theme.aside.card_author.enable
  .card-widget.card-info
    .is-center
      .avatar-img
        img(src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="avatar")
      .author-info__name= config.author
      .author-info__description!= theme.aside.card_author.description || config.description

    .card-info-data.site-data.is-center
      a(href=url_for(config.archive_dir) + '/')
        .headline= _p('aside.articles')
        .length-num= site.posts.length
      a(href=url_for(config.tag_dir) + '/')
        .headline= _p('aside.tags')
        .length-num= site.tags.length
-     a(href=url_for(config.category_dir) + '/')
-       .headline= _p('aside.categories') 
-       .length-num= site.categories.length
+      a(href="/comments/")
+        .headline= _p('评论') 
+        .length-num.comment-total= _p('0')

    if theme.aside.card_author.button.enable
      a#card-info-btn(href=theme.aside.card_author.button.link)
        i(class=theme.aside.card_author.button.icon)
        span=theme.aside.card_author.button.text
  
    if(theme.social)
        .card-info-social-icons.is-center
          !=fragment_cache('social', function(){return partial('includes/header/social')})
  • 新增 /themes/butterfly/source/js/comment.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
let article;
const comment = {
    ···

+    total: function() {
+        fetch('{envId}', {
+          method: "POST",
+          body: JSON.stringify({ event: "GET_RECENT_COMMENTS", accessToken: "{YOUR_TOKEN}", includeReply: true, pageSize: -1 }),
+          headers: { 'Content-Type': 'application/json' }
+        }).then(res => res.json()).then(({ data }) => {
+          const totalBox = document.querySelectorAll('.length-num.comment-total');
+          if (totalBox) element.innerText = data.length;
+          // console.log('本站Twikoo总评论数:', totalComments);
+        });
+    } // 评论总数
};

window.DOMReady = function () {
+    comment.total();
    if (document.querySelector('#comments-page')) comment.data();
};

window.addEventListener("load", DOMReady)
document.addEventListener("pjax:complete", DOMReady)

热评弹窗

本小节魔改内容包含 右键菜单 添加热评开关功能，如有需要请移步至 Butterfly的魔改教程：右键菜单

样式与旧版有细微差异，如需旧版可查看下方的旧版热评弹窗教程

  • 新增 [blogRoot]/themes/butterfly/layout/includes/layout.pug 页面内容
    （**+** 号直接删除 即是正常缩进）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
        ···

        if (footerBg)
          if (footerBg === true)
            - var footer_bg = bg_img
          else
            - var footer_bg = isImgOrUrl(theme.footer_bg) ? `background-image: url('${url_for(footerBg)}')` : `background: ${footerBg}`
        else
          - var footer_bg = ''

+        #comment-barrage
        footer#footer(style=footer_bg)
          !=partial('includes/footer', {}, {cache: true})

    else
      include ./404.pug

    include ./rightside.pug
    ···
  • 新建 [blogRoot]/themes/butterfly/source/css/_page/barrage.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
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
#comment-barrage
    position: fixed
    bottom: 40px
    right: 68px
    display: flex
    flex-direction: column
    justify-content: end
    align-items: flex-end
    z-index: 999
    transition: .3s
    user-select: none

    +maxWidth768()
        display: none

.comment-barrage-item
    min-width: 286px
    max-width: 286px
    width: fit-content
    min-height: 80px
    max-height: 150px
    margin: 4px
    padding: 8px 14px
    background: var(--card-bg)
    border-radius: 8px
    color: var(--icat-fontcolor)
    animation: barrageIn .6s cubic-bezier(0.42, 0, 0.3, 1.11)
    transition: .3s
    display: flex
    flex-direction: column
    border: var(--style-border)
    backdrop-filter: saturate(180%) blur(20px)
    position: fixed
    box-shadow: var(--icat-shadow-border)
    overflow: hidden

    &:hover
        border: 1px solid var(--icat-blue)
        box-shadow: var(--icat-shadow-blue)

    &.out
        opacity: 0
        animation: barrageOut 0.6s cubic-bezier(0.42, 0, 0.3, 1.11)

    &.hovered
        opacity: 0

    pre
        display: none

    li
        display: none


    p
        color: var(--icat-fontcolor)
        margin: 8px 0 0
        line-height: 1.2
        -webkit-line-clamp: 2
        display: -webkit-box
        -webkit-box-orient: vertical
        font-size: 12px
        font-weight: bold
        overflow: hidden
        text-overflow: ellipsis

        &:hover
            color: var(--icat-blue)

        img
            &:not(.tk-owo-emotion)
                display: none

            &.tk-owo-emotion
                width: 16px
                padding: 0
                margin: 0
                transform: translateY(2px)

    blockquote
        display: none

    br
        display: none

    .barrageHead
        height: 30px
        padding: 0
        line-height: 30px
        font-size: 12px
        border-bottom: var(--style-border)
        display: flex
        justify-content: space-between
        align-items: center
        font-weight: bold
        padding-bottom: 6px

    .barrageAvatar
        width: 18px
        height: 18px
        margin: 0
        margin-right: 8px
        border-radius: 50%
        background: var(--icat-blue)

    .barrageTime
        margin-left: 4px

    .comment-barrage-close
        color: var(--icat-secondtext)
        cursor: pointer
        line-height: 1
        margin-left: auto

        &:hover
            color: var(--icat-blue)

    .barrageContent
        font-size: 14px
        font-weight: normal
        height: calc(100% - 30px)
        overflow: hidden
        width: fit-content
        max-height: 48px

        a
            pointer-events:none
            font-size: 14px


        &:-webkit-scrollbar
            height: 0
            width: 4px

            &-button
                display: none
可选CSS样式
  • 新建 [blogRoot]/themes/butterfly/source/css/barrage.css 样式文件，并新增以下内容
    （也可以在自建的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
#comment-barrage {
  position: fixed;
  bottom: 40px;
  right: 68px;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -o-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: end;
  -moz-box-pack: end;
  -o-box-pack: end;
  -ms-flex-pack: end;
  -webkit-justify-content: end;
  justify-content: end;
  -webkit-box-align: end;
  -moz-box-align: end;
  -o-box-align: end;
  -ms-flex-align: end;
  -webkit-align-items: flex-end;
  align-items: flex-end;
  z-index: 999;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
@media screen and (max-width: 768px) {
  #comment-barrage {
    display: none;
  }
}
.comment-barrage-item {
  min-width: 286px;
  max-width: 286px;
  width: fit-content;
  min-height: 80px;
  max-height: 150px;
  margin: 4px;
  padding: 8px 14px;
  background: var(--card-bg);
  border-radius: 8px;
  color: var(--icat-fontcolor);
  -webkit-animation: barrageIn 0.6s cubic-bezier(0.42, 0, 0.3, 1.11);
  -moz-animation: barrageIn 0.6s cubic-bezier(0.42, 0, 0.3, 1.11);
  -o-animation: barrageIn 0.6s cubic-bezier(0.42, 0, 0.3, 1.11);
  -ms-animation: barrageIn 0.6s cubic-bezier(0.42, 0, 0.3, 1.11);
  animation: barrageIn 0.6s cubic-bezier(0.42, 0, 0.3, 1.11);
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -o-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  border: var(--style-border);
  backdrop-filter: saturate(180%) blur(20px);
  position: fixed;
  -webkit-box-shadow: var(--icat-shadow-border);
  box-shadow: var(--icat-shadow-border);
  overflow: hidden;
}
.comment-barrage-item:hover {
  border: 1px solid var(--icat-blue);
  -webkit-box-shadow: var(--icat-shadow-blue);
  box-shadow: var(--icat-shadow-blue);
}
.comment-barrage-item.out {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-animation: barrageOut 0.6s cubic-bezier(0.42, 0, 0.3, 1.11);
  -moz-animation: barrageOut 0.6s cubic-bezier(0.42, 0, 0.3, 1.11);
  -o-animation: barrageOut 0.6s cubic-bezier(0.42, 0, 0.3, 1.11);
  -ms-animation: barrageOut 0.6s cubic-bezier(0.42, 0, 0.3, 1.11);
  animation: barrageOut 0.6s cubic-bezier(0.42, 0, 0.3, 1.11);
}
.comment-barrage-item.hovered {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
.comment-barrage-item pre {
  display: none;
}
.comment-barrage-item li {
  display: none;
}
.comment-barrage-item p {
  color: var(--icat-fontcolor);
  margin: 8px 0 0;
  line-height: 1.2;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  font-size: 12px;
  font-weight: bold;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}
.comment-barrage-item p:hover {
  color: var(--icat-blue);
}
.comment-barrage-item p img:not(.tk-owo-emotion) {
  display: none;
}
.comment-barrage-item p img.tk-owo-emotion {
  width: 16px;
  padding: 0;
  margin: 0;
  -webkit-transform: translateY(2px);
  -moz-transform: translateY(2px);
  -o-transform: translateY(2px);
  -ms-transform: translateY(2px);
  transform: translateY(2px);
}
.comment-barrage-item blockquote {
  display: none;
}
.comment-barrage-item br {
  display: none;
}
.comment-barrage-item .barrageHead {
  height: 30px;
  padding: 0;
  line-height: 30px;
  font-size: 12px;
  border-bottom: var(--style-border);
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -o-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  font-weight: bold;
  padding-bottom: 6px;
}
.comment-barrage-item .barrageAvatar {
  width: 18px;
  height: 18px;
  margin: 0;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--icat-blue);
}
.comment-barrage-item .barrageTime {
  margin-left: 4px;
}
.comment-barrage-item .comment-barrage-close {
  color: var(--icat-secondtext);
  cursor: pointer;
  line-height: 1;
  margin-left: auto;
}
.comment-barrage-item .comment-barrage-close:hover {
  color: var(--icat-blue);
}
.comment-barrage-item .barrageContent {
  font-size: 14px;
  font-weight: normal;
  height: calc(100% - 30px);
  overflow: hidden;
  width: fit-content;
  max-height: 48px;
}
.comment-barrage-item .barrageContent a {
  pointer-events: none;
  font-size: 14px;
}
.comment-barrage-item .barrageContent:-webkit-scrollbar {
  height: 0;
  width: 4px;
}
.comment-barrage-item .barrageContent:-webkit-scrollbar-button {
  display: none;
}

/* 热评弹窗 */
  • 在 _config.butterfly.yml 主题配置文件中 inject 下的 head 引入 barrage.css
1
2
3
4
5
6
7
8
9
  ···

inject:
  head:
    - <link rel="stylesheet" href="/css/barrage.css"> # 热评弹窗
  bottom:
    - ···

  ···
  • 全替换 [blogRoot]/themes/butterfly/source/js/comment.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
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
let article,
Interval = null,
hoverBarrage = false;
const comment = {
initBarrage(data) {
if (!data.length) return;
        let Index = 0,
box = [],
dom = document.querySelector('#comment-barrage');

clearInterval(Interval);
Interval = null;

Interval = setInterval(() => {
if (box.length >= 1 && !hoverBarrage) {
removeBarrage(box.shift());
}
if(!hoverBarrage){
BarrageBox(data[Index]);
Index += 1;
Index %= data.length;
}
        }, 5000);
$("#menu-commentBarrage span").text("关闭热评");
$("#comment-barrage").hover(function() {
hoverBarrage = true;
console.log("热评悬浮");
}, function() {
hoverBarrage = false;
console.log("停止悬浮");
});

async function BarrageBox(data){
const time = await meuicat.changeTime([data.created]);

let barrage = document.createElement('div');
barrage.className = 'comment-barrage-item'
barrage.innerHTML = `
<div class="barrageHead">
<img class="barrageAvatar" src="${data.avatar}"/>
<div class="barrageNick">${data.nick}</div>
<div class="barrageTime">评论于${time[0].timeString}</div>
<a class="comment-barrage-close" href="javascript:rm.switchCommentBarrage()"><i class="iconfont icat-close"></i></a>
</div>
<a class="barrageContent" href="javascript:void(0);" onclick="meuicat.scrollTo('${data.id}');">${data.comment}</a>
`
box.push(barrage);
dom.append(barrage);
}
function removeBarrage(barrage){
barrage.className = 'comment-barrage-item out';
setTimeout(()=>{
dom.removeChild(barrage);
},1000)
}

const scrollBarrage = btf.throttle(function(){
let visibleBottom = window.scrollY + document.documentElement.clientHeight,
comment = document.getElementById('post-comment'),
centerY = comment.offsetTop+(comment.offsetHeight/2);

if(document.body.clientWidth > 768){
  if(centerY > visibleBottom){
dom.style.bottom = '40px';
  } else { 
dom.style.bottom = '-200px';
  }
}
}, 200)

document.addEventListener('scroll', scrollBarrage);
document.addEventListener('pjax:send', function(){
clearInterval(Interval);
document.removeEventListener('scroll', scrollBarrage);
});
    }, //热评弹窗
    fetchData(options, type, exclude) {
        fetch('{envId}', {
            method: "POST",
            body: JSON.stringify({
                "event": "GET_RECENT_COMMENTS",
                "accessToken": "{YOUR_TOKEN}",
                "includeReply": true,
                ...options
            }),
            headers: { 'Content-Type': 'application/json' }
        }).then(res => res.json()).then(response => {
            let html = '',
data = response.data;

if (type === 'total') {
const totalBox = document.querySelectorAll('.length-num.comment-total, .N_comments');
totalBox.forEach(element => {
if (element.classList.contains('N_comments')) {
element.innerText = data.length + '条评论';
} else {
element.innerText = data.length;
}
});
return
};
if (exclude) {
switch (type) {
case 'visitor':
data = data.filter(item => item.mailMd5 === exclude);
break;
case 'v-shield':
data = data.filter(item => item.mailMd5 !== exclude);
break;
case 'a-shield':
data = data.filter(item => item.url !== exclude);
break;
default:
break;
}
}

if (type === 'barrage') return this.initBarrage(data);

            data.forEach(item => {
                const createdDate = new Date(item.created);
                const formattedDate = `${createdDate.getFullYear().toString().slice(-2)}-${createdDate.getMonth() + 1}-${createdDate.getDate()} ${createdDate.getHours()}:${createdDate.getMinutes()}:${createdDate.getSeconds()}`;
                html += `<div class="comment-card">
                <div class="comment-info">
                    <img src="${item.avatar}" class="nolazyload">
                    <div class="comment-information">
                        <span class="${['亦封', '亦小封'].includes(item.nick) ? 'comment-author' : ''} comment-user" data-mailMd5="${item.mailMd5}">${item.nick}</span>
                        <span class="comment-time">${formattedDate}</span>
                    </div>
                </div>
                <div class="comment-content">${item.commentText.replaceAll('<', '&lt;').replaceAll('>', '&gt;')}</div>
                <div class="comment-more">
                    <div class="comment-title">
                        <span class="comment-link" title="查看此文章" onclick="pjax.loadUrl('${item.url}')">
                            <i class="iconfont icat-read"></i>
                            ${article[item.url]}
                        </span>
                        <a onclick="pjax.loadUrl('${item.url}#${item.id}')">查看评论</a>
                    </div>
                    <div class="comment-tool">`

let a = `<a href="javascript:void(0)" onclick="comment.article(event)" title="显示此文章所有评论">查看更多</a>`,
b = `<a href="javascript:void(0)" onclick="comment.article(event, true)" title="不显示此文章的评论">屏蔽文章</a>`,
c = `<a href="javascript:void(0)" onclick="comment.visitor(event, true)" title="不显示该访客的评论">屏蔽Ta</a>`,
d = `<a href="javascript:void(0)" onclick="comment.visitor(event)" title="显示该访客的所有评论">查看Ta更多评论</a>`
e = `<a href="javascript:void(0)" onclick="comment.data()" title="查看本站最新评论">返回评论</a>`;
switch (type) {
case 'article':
html += e + c + d;
break;
case 'visitor':
html += e + a + b;
break;
case 'v-shield':
case 'a-shield':
html += a + b + c + d + e;
break;
default:
if (!type) html += a + b + c + d;
break;
}

html += `</div>
</div>
</div>`
            });
            document.getElementById('comments-page').innerHTML = html;
        });
    },
visitor(event, shield) {
        const spanElement = event.target.closest('.comment-card').querySelector('.comment-user');
        const mail = spanElement.getAttribute('data-mailMd5');
if (shield) {
this.fetchData({
"pageSize": -1
}, 'v-shield', mail);
return
}
this.fetchData({
"pageSize": -1
        }, 'visitor', mail);
    },
    article(event, shield) {
        const spanElement = event.target.closest('.comment-card').querySelector('.comment-link');
        const url = spanElement.getAttribute('onclick').match(/'(\/.*?)'/)[1];
if (shield) {
this.fetchData({
"pageSize": -1
}, 'a-shield', url);
return
}
        this.fetchData({
            "urls": [url]
        }, 'article');
    },
    data() {
        if (!article) {
fetch('/articles.json').then(res => res.json()).then(data => {
article = {};
[...data.post, ...data.page].forEach(item => {
                    article[item.link] = item.title;
                });
});
}
        this.fetchData({
            "pageSize": 100
        });
    }, // 最新评论页
};
单独使用热评弹窗
  • 创建 [blogRoot]/themes/butterfly/source/js/barrage.js 文件，并新增以下内容
    （或写在自建的公共 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
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
let Interval = null,
hoverBarrage = false;
const barrage = {
  fetchData(options) {
        fetch('{envId}', {
            method: "POST",
            body: JSON.stringify({
                "event": "GET_RECENT_COMMENTS",
                "accessToken": "{YOUR_TOKEN}",
                "includeReply": true,
                ...options
            }),
            headers: { 'Content-Type': 'application/json' }
        }).then(res => res.json()).then(response => {
            let html = '',
            data = response.data;
            let Index = 0,
box = [],
dom = document.querySelector('#comment-barrage');

clearInterval(Interval);
Interval = null;

Interval = setInterval(() => {
if (box.length >= 1 && !hoverBarrage) {
removeBarrage(box.shift());
}
if(!hoverBarrage){
BarrageBox(data[Index]);
Index += 1;
Index %= data.length;
}
        }, 5000);
$("#menu-commentBarrage span").text("关闭热评");
$("#comment-barrage").hover(function() {
hoverBarrage = true;
console.log("热评悬浮");
}, function() {
hoverBarrage = false;
console.log("停止悬浮");
});

async function BarrageBox(data){
const time = await meuicat.changeTime([data.created]);

let barrage = document.createElement('div');
barrage.className = 'comment-barrage-item'
barrage.innerHTML = `
<div class="barrageHead">
<img class="barrageAvatar" src="${data.avatar}"/>
<div class="barrageNick">${data.nick}</div>
<div class="barrageTime">评论于${time[0].timeString}</div>
<a class="comment-barrage-close" href="javascript:rm.switchCommentBarrage()"><i class="iconfont icat-close"></i></a>
</div>
<a class="barrageContent" href="javascript:void(0);" onclick="meuicat.scrollTo('${data.id}');">${data.comment}</a>
`
box.push(barrage);
dom.append(barrage);
}
function removeBarrage(barrage){
barrage.className = 'comment-barrage-item out';
setTimeout(()=>{
dom.removeChild(barrage);
},1000)
}

const scrollBarrage = btf.throttle(function(){
let visibleBottom = window.scrollY + document.documentElement.clientHeight,
comment = document.getElementById('post-comment'),
centerY = comment.offsetTop+(comment.offsetHeight/2);

if(document.body.clientWidth > 768){
  if(centerY > visibleBottom){
dom.style.bottom = '40px';
  } else { 
dom.style.bottom = '-200px';
  }
}
}, 200)

document.addEventListener('scroll', scrollBarrage);
document.addEventListener('pjax:send', function(){
clearInterval(Interval);
document.removeEventListener('scroll', scrollBarrage);
});
      
        });
    },
    data() {
        this.fetchData({ "urls": [window.location.pathname] });
    }
};

window.DOMReady = function () {
barrage.data();
};

window.addEventListener("load", DOMReady)
document.addEventListener("pjax:complete", DOMReady)

// 热评弹窗

注意：
{envId} 和 {YOUR_TOKEN} 需要替换为对应值

  • 在 _config.butterfly.yml 主题配置文件中 inject 下的 bottom 引入 barrage.js
1
2
3
4
5
6
7
8
9
  ···

inject:
  head:
    - ···
  bottom:
    - <script type="text/javascript" src="/js/barrage.js"></script> # 热评弹窗

  ···

旧版

效果预览

最新评论
快速预览本站最新评论
历史迭代教程

创建数据

  • 创建 [blogRoot]/source/comments/index.md 页面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
---
title: 最新评论
date: 2023-07-17 14:07:01
type: comments
top_img: false
aside: false
top_page: true
top_bg: https://img.meuicat.com/banner
top_item: 速览
top_title: 最新评论
top_tips: 快速预览本站最新评论
---

<!-- 页面内容 -->
  • 修改 [blogRoot]/themes/butterfly/layout/page.pug 来使页面匹配
    （ + 号直接删除 即是正常缩进）
1
2
3
4
5
6
      when 'categories'
        include includes/page/categories.pug
+      when 'comments'
+        include includes/page/comments.pug
      default
        include includes/page/default-page.pug
  • 新建 [blogRoot]/themes/butterfly/layout/includes/page/comments.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
#comments-page

script.
    if (1) {
        fetch('/article.json').then(res => res.json()).then(data => {
            let article = data
            fetch('{envId}', {
                method: "POST",
                body: JSON.stringify({ "event": "GET_RECENT_COMMENTS", "accessToken": "{YOUR_TOKEN}", "includeReply": true, "pageSize": 100, }),
                headers: { 'Content-Type': 'application/json' }
            }).then(res => res.json()).then(({ data }) => {
                let html = ''
                data.forEach(item => {
                    const createdDate = new Date(item.created);
                    const formattedDate = `${createdDate.getFullYear().toString().slice(-2)}-${createdDate.getMonth() + 1}-${createdDate.getDate()} ${createdDate.getHours()}:${createdDate.getMinutes()}:${createdDate.getSeconds()}`;
                    html += `<div class="comment-card" title="${item.commentText.replaceAll(/<.*?>/g, '').replaceAll(/[\s\n]/g, '')}" onclick="pjax.loadUrl('${item.url}#${item.id}')">
                    <div class="comment-info">
                        <img src="${item.avatar}" class="nolazyload">
                        <div class="comment-information">
                            <span class="${item.nick === '亦封' ? 'comment-user comment-author' : 'comment-user'}">${item.nick}</span>
                            <span class="comment-time">${formattedDate}</span>
                        </div>
                    </div>
                    <div class="comment-content">${item.commentText.replaceAll('<', '&lt;').replaceAll('>', '&gt;')}</div>
                    <div class="comment-article">"${article[item.url]}"</div>
                </div>`
                })
                document.getElementById('comments-page').innerHTML = html
            })
        })
    }
  • 创建 [blogRoot]/themes/butterfly/scripts/helpers/article-json.js 文件，并新增以下内容，用来生成并处理 article.json 数据文件
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
/**
 * MeuiCat
 * generate json - article_comments
 * developer：meuciat.com
 */

'use strict'

hexo.extend.generator.register('theData', function (locals) {
    const postsData = locals.posts
      .filter(post => post.path !== '/' && post.comments !== false)
      .map(post => {
        const link = post.permalink.replace(/^(?:\/\/|[^/]+)*\//, '/');
        return {
          [link]: post.title || "暂无标题"
        };
      });
  
    const pagesData = locals.pages
      .filter(page => page.path !== '/' && page.comments !== false && !page.source.endsWith('.js') && !page.source.endsWith('.css'))
      .map(page => {
        const link = page.permalink.replace(/^(?:\/\/|[^/]+)*\//, '/').replace('index.html', '');
        return {
          [link]: page.title || "暂无标题"
        };
      });
  
    const combinedData = postsData.concat(pagesData);
  
    const jsonData = combinedData.reduce((acc, obj) => {
      const key = Object.keys(obj)[0];
      const value = obj[key];
      acc[key] = value;
      return acc;
    }, {});
  
    return {
      path: 'article.json',
      data: JSON.stringify(jsonData)
    };
  });
  • 新建 [blogRoot]/source/css/comments.css 样式文件，并新增以下内容
    （也可以在自建的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
#comments-page {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  min-height: 100px;
  width: 100%;
  margin-top: 1.5rem;
}
#comments-page .comment-card {
  position: relative;
  width: calc(100% / 4 - 9px);
  border-radius: 12px;
  border: var(--style-border);
  padding: 14px;
  cursor: pointer;
  transition: .3s;
  overflow: hidden;
  box-shadow: var(--icat-shadow-border);
  background: var(--icat-card-bg);
}
@media screen and (max-width: 900px) {
  #comments-page .comment-card {
    width: calc(100% / 2 - 6px);
  }
}
@media screen and (max-width: 768px) {
  #comments-page .comment-card {
    width: 100%;
  }
}
#comments-page .comment-card:hover {
  border-color: var(--icat-blue);
}
#comments-page .comment-card:hover .comment-article {
  opacity: 1;
  top: 0;
}
#comments-page .comment-card .comment-info {
  display: flex;
  align-items: center;
  padding-bottom: 14px;
  margin-bottom: 8px;
  border-bottom: 1px dashed var(--hr-border);
}
#comments-page .comment-card .comment-info img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 !important;
}
#comments-page .comment-card .comment-info .comment-information {
  display: flex;
  flex-direction: column;
  margin-left: 12px;
  line-height: 1.5;
}
#comments-page .comment-card .comment-info .comment-information .comment-user {
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: 15px;
}
#comments-page .comment-card .comment-info .comment-information .comment-author::after {
  content: "\e04f";
  font-family: "iconfont" !important;
  padding-left: 6px;
  font-size: 14px;
  color: var(--icat-green);
}
[data-theme="dark"] #comments-page .comment-card .comment-info .comment-information .comment-author::after {
  color: var(--icat-blue);
}
#comments-page .comment-card .comment-info .comment-information .comment-time {
  opacity: .8;
  font-size: 12px;
}
#comments-page .comment-card .comment-info .comment-content {
  margin: 8px 5px 0;
}
.comment-content, .comment-article {
  transition: .3s;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.7;
  font-weight: 400;
}
.comment-article {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
  background: var(--icat-blue);
  color: white;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  text-align: center;
}

/* 最新评论页面样式 */
  • 在 _config.butterfly.yml 主题配置文件中 inject 下的 head 引入 comments.css 样式
1
2
3
4
5
6
7
8
9
10
  ···

inject:
  head:
    - <link rel="stylesheet" href="/css/comments.css"> # 最新评论 - 样式
    - ···
  bottom:
    - ···

  ···

个人卡片总评论

  • 修改 [blogRoot]/themes/butterfly/layout/includes/widget/card_author.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
if theme.aside.card_author.enable
  .card-widget.card-info
    .is-center
      .avatar-img
        img(src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="avatar")
      .author-info__name= config.author
      .author-info__description!= theme.aside.card_author.description || config.description

    .card-info-data.site-data.is-center
      a(href=url_for(config.archive_dir) + '/')
        .headline= _p('aside.articles')
        .length-num= site.posts.length
      a(href=url_for(config.tag_dir) + '/')
        .headline= _p('aside.tags')
        .length-num= site.tags.length
-     a(href=url_for(config.category_dir) + '/')
-       .headline= _p('aside.categories') 
-       .length-num= site.categories.length
+      a(href="/comments/")
+        .headline= _p('评论') 
+        .length-num.icat-pc-comment= _p('0')

    if theme.aside.card_author.button.enable
      a#card-info-btn(href=theme.aside.card_author.button.link)
        i(class=theme.aside.card_author.button.icon)
        span=theme.aside.card_author.button.text
  
    if(theme.social)
        .card-info-social-icons.is-center
          !=fragment_cache('social', function(){return partial('includes/header/social')})
  • 修改 [blogRoot]/themes/butterfly/layout/includes/sidebar.pug 页面内容
    （ + 号直接删除 即是正常缩进）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#sidebar
  #menu-mask
  #sidebar-menus
    .avatar-img.is-center
      img(src=url_for(theme.avatar.img) onerror=`onerror=null;src='${theme.error_img.flink}'` alt="avatar")
    .sidebar-site-data.site-data.is-center
      a(href=url_for(config.archive_dir) + '/')
        .headline= _p('aside.articles') 
        .length-num= site.posts.length
      a(href=url_for(config.tag_dir) + '/' )
        .headline= _p('aside.tags')
        .length-num= site.tags.length
-     a(href=url_for(config.category_dir) + '/')
-       .headline= _p('aside.categories') 
-       .length-num= site.categories.length
+      a(href="/comments/")
+        .headline= _p('评论') 
+        .length-num.icat-pe-comment= _p('0')

    hr
    !=partial('includes/header/menu_item', {}, {cache: true})
  • 创建 [blogRoot]/source/js/comments.js 文件，并新增以下内容，用来处理获取总评论数量
    （或写在自建的公共 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
27
28
29
fetch('/article.json')
  .then(res => res.json())
  .then(articleData => {
    const urls = Object.keys(articleData);

    fetch('{envId}', {
      method: "POST",
      body: JSON.stringify({ "event": "GET_RECENT_COMMENTS", "accessToken": "{YOUR_TOKEN}", "includeReply": true, "pageSize": -1 }),
      headers: { 'Content-Type': 'application/json' }
    })
      .then(res => res.json())
      .then(({ data }) => {
        let totalComments = 0;
        data.forEach(item => {
          totalComments++;
        });
        const commentElement = document.querySelector('.length-num.icat-pc-comment');
        if (commentElement) {
          commentElement.innerText = totalComments;
        }
        const commentElements = document.querySelector('.length-num.icat-pe-comment');
        if (commentElements) {
          commentElements.innerText = totalComments;
        }
        console.log('本站Twikoo总评论数:', totalComments);
      });
  });

// 总评论数量
  • 在 _config.butterfly.yml 主题配置文件中 inject 下的 bottom 引入 comments.js 文件
1
2
3
4
5
6
7
8
9
10
  ···

inject:
  head:
    - ···
  bottom:
    - <script async type="text/javascript" src="/js/comments.js"></script>
    - ···

  ···
  • 创建 [blogRoot]/themes/butterfly/scripts/helpers/article-json.js 文件，并新增以下内容，用来生成并处理 article.json 数据文件
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
/**
 * MeuiCat
 * generate json - article_comments
 * developer：meuciat.com
 */

'use strict'

hexo.extend.generator.register('theData', function (locals) {
    const postsData = locals.posts
      .filter(post => post.path !== '/' && post.comments !== false)
      .map(post => {
        const link = post.permalink.replace(/^(?:\/\/|[^/]+)*\//, '/');
        return {
          [link]: post.title || "暂无标题"
        };
      });
  
    const pagesData = locals.pages
      .filter(page => page.path !== '/' && page.comments !== false && !page.source.endsWith('.js') && !page.source.endsWith('.css'))
      .map(page => {
        const link = page.permalink.replace(/^(?:\/\/|[^/]+)*\//, '/').replace('index.html', '');
        return {
          [link]: page.title || "暂无标题"
        };
      });
  
    const combinedData = postsData.concat(pagesData);
  
    const jsonData = combinedData.reduce((acc, obj) => {
      const key = Object.keys(obj)[0];
      const value = obj[key];
      acc[key] = value;
      return acc;
    }, {});
  
    return {
      path: 'article.json',
      data: JSON.stringify(jsonData)
    };
  });

热评弹窗

本小节魔改内容包含 右键菜单 添加热评开关功能，如有需要请移步至 ✨ 本章 - 七小节 | 右键菜单

样式参考 洪佬的 可自行移步张洪Heo

  • 新增 [blogRoot]/themes/butterfly/layout/includes/rightmenu.pug 页面内容
    （**+** 号直接删除 即是正常缩进；注意该内容中 fontawesome 图标 需要自行替换）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    ···

    .rightMenu-group.rightMenu-line
        a.rightMenu-item(href="javascript:toRandomPost()")
            i.iconfont.icat-random
            span='随便逛逛'
        a.rightMenu-item(href="javascript:rmf.translate();")
            i.iconfont.icat-simple-complex
            span='繁简转换'
+        a.rightMenu-item(href="javascript:hotreview.switchCommentBarrage();")
+            i.iconfont.icat-danmu
+            span.menu-commentBarrage-text 关闭热评
    .rightMenu-group.rightMenu-line
        a.rightMenu-item(href="javascript:pjax.loadUrl(\"/privacy/\");")
            i.iconfont.icat-conceal
            span='隐私协议'
        a.rightMenu-item(href="javascript:pjax.loadUrl(\"/cc/\");")
            i.iconfont.icat-cc
            span='版权协议'
  • 新增 [blogRoot]/themes/butterfly/layout/includes/third-party/comments/index.pug 页面内容
    （**+** 号直接删除 即是正常缩进）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
          ···

          when 'Giscus'
            #giscus-wrap
          when 'Facebook Comments'
            .fb-comments(data-colorscheme = theme.display_mode === 'dark' ? 'dark' : 'light'
                        data-numposts= theme.facebook_comments.pageSize || 10
                        data-order-by= theme.facebook_comments.order_by || 'social'
                        data-width="100%")
          when 'Remark42'
            #remark42
          when 'Artalk'
            #artalk-wrap

+  .comment-barrage
  • 创建 [blogRoot]/source/js/Barrage.js 文件，并新增以下内容，用来处理跳转和开关变量
    （或写在自建的公共 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
var hotreview = {
  switchCommentBarrage:function() {
    document.querySelector(".comment-barrage")&&($(".comment-barrage").is(":visible")?($(".comment-barrage").hide(),$(".menu-commentBarrage-text").text("显示热评"),document.querySelector("#consoleCommentBarrage").classList.remove("on"),localStorage.setItem("commentBarrageSwitch","false")):$(".comment-barrage").is(":hidden")&&($(".comment-barrage").show(),$(".menu-commentBarrage-text").text("关闭热评"),document.querySelector("#consoleCommentBarrage").classList.add("on"),localStorage.removeItem("commentBarrageSwitch"))),
    rm.hideRightMenu()
  },
  scrollTo: function(e) {
    const t = document.getElementById(e);
    if (t) {
      const e = t.getBoundingClientRect().top + window.pageYOffset - 80,
      o = window.pageYOffset,
      n = e - o;
      let a = null;
      window.requestAnimationFrame((function e(t) {
        a || (a = t);
        const i = t - a,
        l = (c = Math.min(i / 0, 1)) < .5 ? 2 * c * c: (4 - 2 * c) * c - 1;
        var c;
        window.scrollTo(0, o + n * l),
        i < 600 && window.requestAnimationFrame(e)
      }))
    }
  },
}

// 热评弹窗跳转
  • 新建 [blogRoot]/source/css/Barrage.css 样式文件，并新增以下内容
    （也可以在自建的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
.comment-barrage {
position: fixed;
bottom: 40px;
right: 68px;
display: flex;
flex-direction: column;
justify-content: end;
align-items: flex-end;
  z-index: 999;
  transition: 0.3s;
  user-select: none;
  -webkit-user-select: none;
}

@media screen and (max-width: 768px){
.comment-barrage {
display: none!important;
}
}
.comment-barrage-item {
min-width: 286px;
max-width: 286px;
width: fit-content;
min-height: 80px;
max-height: 150px;
margin: 4px;
padding: 8px 14px;
background: var(--icat-maskbgdeep);
border-radius: 8px;
color: var(--icat-fontcolor);
animation: barrageIn 0.6s cubic-bezier(0.42, 0, 0.3, 1.11);
transition: 0.3s;
display: flex;
flex-direction: column;
border: var(--style-border-always);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: fixed;
  box-shadow: var(--icat-shadow-border);
  overflow: hidden;
}

.comment-barrage-item:hover {
  border: 1px solid var(--icat-blue);
  box-shadow: var(--icat-shadow-blue);
}

.comment-barrage-item.out{
opacity: 0;
  animation: barrageOut 0.6s cubic-bezier(0.42, 0, 0.3, 1.11);
}

.comment-barrage-item.hovered {
  opacity: 0;
}

.comment-barrage-item .comment-barrage-close {
  color: var(--icat-secondtext);
  cursor: pointer;
  line-height: 1;
  margin: 4px;
}

.comment-barrage-item .comment-barrage-close .icatfont {
  font-size: 18px!important;
}

.comment-barrage-item pre {
  display: none;
}

.comment-barrage-item li {
  display: none;
}

.comment-barrage-item p img:not(.tk-owo-emotion) {
  display: none;
}

.comment-barrage-item p img.tk-owo-emotion {
  width: 16px;
  padding: 0;
  margin: 0;
  transform: translateY(2px);
}

.comment-barrage-item blockquote {
  display: none;
}

.comment-barrage-item br {
  display: none;
}

.comment-barrage-item .barrageHead{
height: 30px;
padding: 0;
line-height: 30px;
font-size: 12px;
border-bottom: var(--style-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  padding-bottom: 6px;
}

.comment-barrage-item .barrageHead .barrageTitle {
color: var(--icat-card-bg);
margin-right: 8px;
  background: var(--icat-fontcolor);
  line-height: 1;
  padding: 4px;
  border-radius: 4px;
  white-space:nowrap;
}

.comment-barrage-item .barrageHead .barrageTitle:hover {
  background: var(--icat-blue);
  color: var(--icat-white);
}

.comment-barrage-item .barrageAvatar{
width: 18px;
height: 18px;
  margin: 0;
margin-left: auto;
  margin-right: 8px;
border-radius: 50%;
  background: var(--icat-secondbg);
}
.comment-barrage-item .barrageContent{
font-size: 14px!important;
  font-weight: normal!important;
height: calc(100% - 30px);
overflow: hidden;
  width: fit-content;
  max-height: 48px;
}

.comment-barrage-item .barrageContent a {
  pointer-events:none;
  font-size: 14px!important;
}

.comment-barrage-item .barrageContent::-webkit-scrollbar{
height: 0;
width: 4px;
}
.comment-barrage-item .barrageContent::-webkit-scrollbar-button{
display: none;
}

.barrageHead .comment-barrage-close i {
  color: var(--icat-fontcolor);
}

.comment-barrage-item p{
  color: var(--icat-fontcolor);
  margin: 8px 0 0;
  line-height: 1.2;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
  font-size: 12px;
  font-weight: bold;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}
.comment-barrage-item p:hover,
.barrageHead .comment-barrage-close i:hover {
  color: var(--icat-blue);
}

/* 热评弹窗样式 */
  • 创建 [blogRoot]/themes/butterfly/source/js/commentBarrage.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
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
var postCommentElement = document.getElementById("post-comment");
if (postCommentElement) {
var commentBarrageConfig = {
//同时最多显示弹幕数
maxBarrage: 1,
//弹幕显示间隔时间ms
barrageTime: 4000,
//twikoo部署地址腾讯云的为环境ID
twikooUrl: "{envId}",
//token获取见上方
accessToken: "{YOUR_TOKEN}",
pageUrl: window.location.pathname,
barrageTimer: [],
barrageList: [],
barrageIndex: 0,
dom: document.querySelector('.comment-barrage'),
}

var commentInterval = null;
var hoverOnCommentBarrage = false;

$(".comment-barrage").hover(function() {
  hoverOnCommentBarrage = true;
  console.log("热评悬浮");
}, function() {
  hoverOnCommentBarrage = false;
  console.log("停止悬浮");
});

function initCommentBarrage(){
// console.log("开始创建热评")

var data = JSON.stringify({
"event": "COMMENT_GET",
"commentBarrageConfig.accessToken": commentBarrageConfig.accessToken,
"url": commentBarrageConfig.pageUrl
});
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.addEventListener("readystatechange", function() {
if(this.readyState === 4) {
commentBarrageConfig.barrageList = commentLinkFilter(JSON.parse(this.responseText).data);
commentBarrageConfig.dom.innerHTML = '';
}
});
xhr.open("POST", commentBarrageConfig.twikooUrl);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(data);


  clearInterval(commentInterval);
  commentInterval = null;

  commentInterval = setInterval(()=>{
    if(commentBarrageConfig.barrageList.length && !hoverOnCommentBarrage){
      popCommentBarrage(commentBarrageConfig.barrageList[commentBarrageConfig.barrageIndex]);
      commentBarrageConfig.barrageIndex += 1;
      commentBarrageConfig.barrageIndex %= commentBarrageConfig.barrageList.length;
    }
    if((commentBarrageConfig.barrageTimer.length > (commentBarrageConfig.barrageList.length > commentBarrageConfig.maxBarrage?commentBarrageConfig.maxBarrage:commentBarrageConfig.barrageList.length)) && !hoverOnCommentBarrage){
      removeCommentBarrage(commentBarrageConfig.barrageTimer.shift())
    }
  },commentBarrageConfig.barrageTime)
}
function commentLinkFilter(data){
data.sort((a,b)=>{
return a.created - b.created;
})
let newData = [];
data.forEach(item=>{
newData.push(...getCommentReplies(item));
});
return newData;
}
function getCommentReplies(item){
if(item.replies){
let replies = [item];
item.replies.forEach(item=>{
replies.push(...getCommentReplies(item));
})
return replies;
}else{
return [];
}
}
function popCommentBarrage(data){
let barrage = document.createElement('div');
let width = commentBarrageConfig.dom.clientWidth;
let height = commentBarrageConfig.dom.clientHeight;
barrage.className = 'comment-barrage-item'
barrage.innerHTML = `
<div class="barrageHead">
      <a class="barrageTitle" href="javascript:hotreview.scrollTo('post-comment')"">热评</a>
<div class="barrageNick">${data.nick}</div>
<img class="barrageAvatar" src="https://cravatar.cn/avatar/${data.mailMd5}"/>
<a class="comment-barrage-close" href="javascript:hotreview.switchCommentBarrage()"><i class="iconfont icat-close"></i></a>
</div>
<a class="barrageContent" href="javascript:hotreview.scrollTo('${data.id}');">${data.comment}</a>
`
commentBarrageConfig.barrageTimer.push(barrage);
commentBarrageConfig.dom.append(barrage);
}
function removeCommentBarrage(barrage){
barrage.className = 'comment-barrage-item out';
setTimeout(()=>{
commentBarrageConfig.dom.removeChild(barrage);
},1000)
}



// 自动隐藏
document.addEventListener('scroll',btf.throttle(function(){
    //滚动条高度+视窗高度 = 可见区域底部高度
    var visibleBottom = window.scrollY + document.documentElement.clientHeight;
    //可见区域顶部高度
    var visibleTop = window.scrollY;
    // 获取翻页按钮容器
    var pagination = document.querySelector('.comment-barrage');
    // 获取位置监测容器，此处采用评论区
    var eventlistner = document.getElementById('post-comment');
    if (eventlistner&&pagination){
    var centerY = eventlistner.offsetTop+(eventlistner.offsetHeight/2);
    if(document.body.clientWidth > 768){
      if(centerY>visibleBottom){
        pagination.style.bottom = '40px';
      }else{
        pagination.style.bottom = '-200px';
      }
    }
  }
  }, 200))

initCommentBarrage();

document.addEventListener('pjax:send', function(){
  clearInterval(commentInterval);
});

} else {
console.log("iCat提醒您：此页面没有评论！");
}

// 热评弹窗函数
  • 在 _config.butterfly.yml 主题配置文件中 inject 下的 head 和 bottom 分别引入 barragesColor Barrage.css commentBarrage.js Barrage.js
1
2
3
4
5
6
7
8
9
10
11
  ···

inject:
  head:
    - <link rel="stylesheet" href="/css/Barrage.css"> # 热评弹窗 - 样式
    - <style id="barragesColor"></style> # 热评弹窗 - 载体
  bottom:
    - <script type="text/javascript" src="/js/Barrage.js"></script> # 热评弹窗
    - <script type="text/javascript" src="/js/commentBarrage.js" data-pjax=""></script> # 热评弹窗 - 函数处理

  ···

Token获取

  • 在 开发人员工具 - 应用 - 本地存储空间 - 你的网址 - twikoo-access-token 里面即可看到对于的值
]]> 经验分享 Butterfly主题 魔改记录 Twikoo https://meuicat.com/posts/9619b717.html#disqus_thread 离歌不夜天 https://meuicat.com/posts/a2e4a12c.html https://meuicat.com/posts/a2e4a12c.html Wed, 12 Jun 2024 14:25:07 GMT 身处不时客，醒来扰金梦 没想到会在一千多公里外的出差地，和韩再次相遇。
这是我们再见面的第六年。

工作项目最后一项完美结束，一桌人推杯换盏，说着客套却不太得体的话，戒烟许久让我感觉这烟雾缭绕的空气透不过气。
杨端着酒杯陪我走出了房间。

出门抬头的时候我恍恍惚惚的好像看到一个熟悉的面孔，但一眨眼的功夫就不见了，我笑着摇了摇头。
最近睡眠欠佳，加上奔波忙碌人有点恍惚也正常。我背过身靠在栏杆上和杨在门口闲聊。

老杨？
我听到一个熟悉的声音从身后传来。
惠颖？！
我猛然回头，看到了一张熟悉而又陌生的脸。
小封？！

“你们认识？”
她俩不约而同说出了同样的一句话。
接下来他们说了什么我什么也没听进去，只知道鬼使神差的我接过杨手中的红酒一饮而下，杨顿时愣在原地。
韩走过来，说笑着帮我解了围。

“哈哈哈，小封这是见到老朋友激动的。老杨，我和他几年没见了，先聊会儿，我这几天都在这咱们单独再聚。”杨识趣地，笑着转身回了房间。
“下楼走走？这太闷了。”韩也没多说什么，上前扶着晕乎乎的我走下了楼。
“没想到竟然在这里见到你。”“临时出差。”

你是不是瘦了？睡眠有改善吗？看着状态还行。你现在忙什么呢？还是要经常出差吗？
我和Cindy打听过你很多次消息，她说你失联了。

你分手的时候我并不知道，我以为你会把工作分开。
老杜和老严知道我们的事情后骂了我，你也没和他们联系。
你现在是在深圳还是去上海了？我一直以为你去上海了。

对了，之前月殊翻出一些照片，好像是那几年在学校拍的，她让我寄给你，我说我没你的地址，要不你留个地址？
上次那件事你没给我解释的机会，我是想给你和她道歉的。
我听说了你的一些情况，不知道是真是假。
我…

颖。我打断了她的话。
“嗯？”从烟盒递给我一支烟。
“娜娜很爱我，再见。”

“曲阑深处重相见，匀泪偎人颤。”
这句话突然出现在我的脑海里。

分开的时候并不体面，歇斯底里中毅然决然的分开。

恋爱谈过了，世界看过了，叛逆争吵过了，纠结拧巴过了；
冷战过了，和好过了，感性过了，失去理智过了，一无所有过了，倔强过了。
也终于成长了，于是，两手一摊，人就该散了。

所有前尘往事一闪而过，瞬间熄灭。
回到饭店，我站在门口点燃了那支烟，一阵风吹来，才感觉酒劲儿有点上头。
手里的烟还没熄灭，在火光燃烧到烟蒂，灼伤指尖的时候，我蹲在台阶角落里，长叹一口气。

烟灭。
我起身抓了抓被风吹乱的头发，使劲的上扬嘴角，让情绪消散。

拿起手机，给娜老师发了一条消息。

然后。
转身，上楼，开门，微笑，讲话，入座。
回到这场原本还没结束的局。

]]> 生活随笔 封の唠叨 地球体验卷 https://meuicat.com/posts/a2e4a12c.html#disqus_thread 前端分享 - 滑动阻尼效果 https://meuicat.com/posts/deefcce5.html https://meuicat.com/posts/deefcce5.html Fri, 17 May 2024 09:47:48 GMT 纯干货！三步实现滑动阻尼效果！ 效果预览
亦小封の主页
欢迎查看我的个人主页

思路讲解

在我的个人主页中，上下滑动（滚动）时会有一个缓冲的效果。
其实在一些非常好的网站里也会用到滑动阻尼的效果。它会使用户的交互体验得到一个非常棒的提升。

通常来说，也可以使用CSS的 scroll-behavior 属性，这个属性是可以让你在滑动容器时提供平滑的滚动行为。
但是，这个属性暂时不是我想要的阻尼效果。

滑动原理

添加一个缓动效果，使用一个容器.scrollbox，使用 transition 属性，实现滑动缓冲效果时长。

固定窗口，将我们的浏览器窗口固定在原位。
首先我们要明白一点，为什么我们的浏览器窗口可以上下移动？那是因为页面内容超过浏览器窗口大小，从而body大小改变，出现滚动条，使触发浏览器窗口滚动。

所以先将整个网页内容大小固定起来，将它设置为窗口大小。再为它添加个容器，使得它跟我们浏览器窗口大小相同。

再添加容器.viewbox，使用 fixed 属性，将它固定在浏览器顶端。
这个时候就可以使用JS来监听滚动事件。

首先获取.scrollbox的实际高度，然后将其的高度设为body的高度。（offsetHeight包括边框和内部空白补丁）
最后要做的就是，当我们滚动的时候，为.scrollbox添加一个 transform 属性移动即可。

效果实现

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
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滑动阻尼</title>
    <style>
        * {
            font-size: 2vmin;
            margin: 0;
            padding: 0;
        }

        ::-webkit-scrollbar {
            display: none;
        }

        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            background-color: #171717;
        }

        .scrollbox {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            flex-shrink: 0;
            transition: .3s ease-out;
        }

        .viewbox {
            position: fixed;
            top: 0;
            display: flex;
            align-items: flex-start;
            width: 100%;
            height: 100vh;
            overflow: hidden;
        }

        .box {
            width: 100%;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: calc(18px + 1vw);
            font-weight: bold;
        }

    </style>
</head>

<body>
    <div class="viewbox">
        <div class="scrollbox">
            <div class="box" style="background-color: #17f700;">#17f700</div>
            <div class="box" style="background-color: #ffc93e;">#ffc93e</div>
            <div class="box" style="background-color: #0084FF;">#0084FF</div>
            <div class="box" style="background-color: #FF3842;">#FF3842</div>
            <div class="box" style="background-color: #d44040;">#d44040</div>
        </div>
    </div>
</body>
<script>
    let scrollbox = document.getElementsByClassName("scrollbox")[0];
    function resize_body() {
        let height = scrollbox.offsetHeight;
        document.body.style.height = `${height}px`;
    };
    function scroll() {
        scrollbox.style.transform = `translateY(${-scrollY}px)`;
    };
    window.addEventListener("scroll", scroll);
    window.addEventListener("load", resize_body);
    window.addEventListener("resize", resize_body);
</script>

</html>

进阶优化

在移动端部分浏览器内访问时，滑动的时候大多会有Bug出现，初步个人理论推测应该是和本身的滑动策略冲突导致的。所以我在个人主页里的滑动阻尼效果进行了优化。

在移动端时移除了滑动阻尼的效果，使用 scroll-behavior: smooth; 处理滚动的平滑效果。（实在想不出好的办法来解决）

而JS上我使用的是 document.body.clientWidth >= 768 进行判断，当屏幕宽度小于768时，将body和.scrollbox的效果清除。

]]> 知识笔记 HTML Script https://meuicat.com/posts/deefcce5.html#disqus_thread Butterfly的魔改教程：右键菜单 https://meuicat.com/posts/25b0b30e.html https://meuicat.com/posts/25b0b30e.html Mon, 01 Apr 2024 13:00:28 GMT 轻量级自定义右键菜单，小白也能直接上手~

📚 更多文档目录

🚀 搭建教程 | 1 - 📑 前置教程 | 2 - 🎈 主题调整 | 3 - ✨ 魔改教程 | 4 - 🐈 重构自用数据记录

本篇教程基于 Hexo 6.3.0 & Butterfly 4.9.0 为博主的魔改教程记录，以防自己日后因魔改迷失所记录 📝

240410 更新：新增无jquery依赖的版本，使用原生js实现；修复已知图片处理的问题

效果预览

在本站PC端自行右键体验

创建数据

  • 创建 [blogRoot]/themes/butterfly/layout/includes/rightmenu.pug 页面文件，并新增以下内容
    （注意该内容中 fontawesome 图标 需要自行替换）
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
.js-pjax
  #rightMenu
    .rightMenu-group.rightMenu-small
      .rightMenu-item#menu-backward
        i.iconfont.icat-angle-left
      .rightMenu-item#menu-forward
        i.iconfont.icat-angle-right
      .rightMenu-item#menu-refresh
        i.iconfont.icat-refresh
      .rightMenu-item#menu-darkmode
        i.iconfont.icat-changing-over
    .rightMenu-group.rightMenu-line.rightMenuPost
      .rightMenu-item#menu-reading
        i.iconfont.icat-read
        span='阅读模式'
      .rightMenu-item#menu-commentBarrage
        i.iconfont.icat-danmu
        span='热评开关'
      .rightMenu-item#menu-postlink
        i.iconfont.icat-copy-paste
        span='复制本文地址'
    .rightMenu-group.rightMenu-line.rightMenuPlugin
      .rightMenu-item#menu-copytext
        i.iconfont.icat-copy-paste
        span='复制内容'
      .rightMenu-item#menu-pastetext
        i.iconfont.icat-clipboar
        span='粘贴内容'
      .rightMenu-item#menu-commenttext
        i.iconfont.icat-message
        span='引用评论'
      .rightMenu-item#menu-search
        i.iconfont.icat-search
        span='站内搜索'
      .rightMenu-item#menu-searchBaidu
        i.iconfont.icat-baidu
        span='百度搜索'
      .rightMenu-item#menu-newwindow
        i.iconfont.icat-new-window
        span='新建窗口打开'
      .rightMenu-item#menu-copylink
        i.iconfont.icat-jump-link
        span='复制链接地址'
      .rightMenu-item#menu-copyimg
        i.iconfont.icat-copy-paste
        span='复制此图片'
      .rightMenu-item#menu-downloadimg
        i.iconfont.icat-download-save
        span='下载此图片'
      .rightMenu-item#menu-copylinkimg
        i.iconfont.icat-jump-link
        span='复制图片链接'
    .rightMenu-group.rightMenu-line.rightMenuOther
      a.rightMenu-item#menu-randomPost
        i.iconfont.icat-random
        span='随便逛逛'
      if theme.translate.enable
        a.rightMenu-item#menu-translate
          i.iconfont.icat-simple-complex
          span='繁简转换'
      .rightMenu-item#menu-asidehide
        i.iconfont.icat-danmu
        span='边栏控制'
    .rightMenu-group.rightMenu-line
      a.rightMenu-item(href="/privacy/")
        i.iconfont.icat-conceal
        span='隐私协议'
      a.rightMenu-item(href="/cc/")
        i.iconfont.icat-cc
        span='版权协议'
  #rightMenu-mask
  • 新增 [blogRoot]/themes/butterfly/layout/includes/layout.pug 页面内容
    （ + 号直接删除 即是正常缩进）
1
2
3
4
5
6
7
8
  ···

    else
      include ./404.pug

    include ./rightside.pug
    include ./additional-js.pug
+    !=partial('includes/rightmenu',{}, {cache:true})
  • 新建 [blogRoot]/themes/butterfly/source/css/_page/rightmenu.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
#rightMenu
  display: none
  position: fixed
  width: 160px
  height: fit-content
  top: 10%
  left: 10%
  background-color: var(--icat-maskbgdeep)
  backdrop-filter: blur(20px) saturate(1.5)
  transform: translateZ(0)
  border: var(--style-border)
  border-radius: 8px
  z-index: 99994
  box-shadow: var(--icat-shadow-black)
  transition: border 0.3s
  user-select: none

  &:hover
    border: var(--style-border-hover-always)

  .rightMenu-group
    padding: 6px 6px

    &:not(:nth-last-child(1))
      border-bottom: 1px solid var(--icat-card-border)

    &.rightMenu-small
      display: flex
      justify-content: space-between

    &.rightMenu-line
      .rightMenu-item
        display: flex
        height: 40px
        padding: 0 4px
        align-items: center
        transition: .6s

    .rightMenu-item
      height: 30px
      border-radius: 6px
      transition: .3s
      color: var(--font-color)
      cursor: pointer

      *
        height: 40px
        line-height: 40px

      &:not(:last-child)
        margin-bottom: 4px

      &:hover
        background-color: var(--icat-blue)
        color: var(--icat-white)

      i
        display: inline-block
        text-align: center
        line-height: 30px
        width: 30px
        height: 30px
        padding: 0 5px

#rightMenu .rightMenu-group .rightMenu-item .icat-refresh,
#rightMenu .rightMenu-group .rightMenu-item .icat-changing-over,
#rightMenu .rightMenu-group .rightMenu-item .icat-simple-complex 
  font-weight: 900

#rightMenu-mask
  position: fixed
  width: 100vw
  height: 100vh
  background: 0 0
  top: 0
  left: 0
  display: none
  z-index: 998
可选CSS样式
  • 新建 [blogRoot]/themes/butterfly/source/css/rightmenu.css 样式文件，并新增以下内容
    （也可以在自建的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
#rightMenu {
  display: none;
  position: fixed;
  width: 160px;
  height: fit-content;
  top: 10%;
  left: 10%;
  background-color: var(--icat-maskbgdeep);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -o-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  border: var(--style-border);
  border-radius: 8px;
  z-index: 99994;
  -webkit-box-shadow: var(--icat-shadow-black);
  box-shadow: var(--icat-shadow-black);
  -webkit-transition: border 0.3s;
  -moz-transition: border 0.3s;
  -o-transition: border 0.3s;
  -ms-transition: border 0.3s;
  transition: border 0.3s;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#rightMenu:hover {
  border: var(--style-border-hover-always);
}
#rightMenu .rightMenu-group {
  padding: 6px 6px;
}
#rightMenu .rightMenu-group:not(:nth-last-child(1)) {
  border-bottom: 1px solid var(--icat-card-border);
}
#rightMenu .rightMenu-group.rightMenu-small {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -o-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
#rightMenu .rightMenu-group.rightMenu-line .rightMenu-item {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  height: 40px;
  padding: 0 4px;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-transition: 0.6s;
  -moz-transition: 0.6s;
  -o-transition: 0.6s;
  -ms-transition: 0.6s;
  transition: 0.6s;
}
#rightMenu .rightMenu-group .rightMenu-item {
  height: 30px;
  border-radius: 6px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
  color: var(--font-color);
  cursor: pointer;
}
#rightMenu .rightMenu-group .rightMenu-item * {
  height: 40px;
  line-height: 40px;
}
#rightMenu .rightMenu-group .rightMenu-item:not(:last-child) {
  margin-bottom: 4px;
}
#rightMenu .rightMenu-group .rightMenu-item:hover {
  background-color: var(--icat-blue);
  color: var(--icat-white);
}
#rightMenu .rightMenu-group .rightMenu-item i {
  display: inline-block;
  text-align: center;
  line-height: 30px;
  width: 30px;
  height: 30px;
  padding: 0 5px;
}
#rightMenu .rightMenu-group .rightMenu-item .icat-refresh,
#rightMenu .rightMenu-group .rightMenu-item .icat-changing-over,
#rightMenu .rightMenu-group .rightMenu-item .icat-simple-complex {
  font-weight: 900;
}
#rightMenu-mask {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: 0 0;
  top: 0;
  left: 0;
  display: none;
  z-index: 998;
}

/* 右键样式 */
  • 在 _config.butterfly.yml 主题配置文件中 inject 下的 head 引入 rightmenu.css
1
2
3
4
5
6
7
8
9
  ···

inject:
  head:
    - <link rel="stylesheet" href="/css/rightmenu.css"> # 右键菜单样式
  bottom:
    - ···

  ···
  • 创建 [blogRoot]/themes/butterfly/source/js/rightmenu.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
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
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
var selectTextNow = "";
let rmWidth = $("#rightMenu").width(),
    rmHeight = $("#rightMenu").height(),
    domhref = "",
    domImgSrc = "",
    globalEvent = null,
    rm = {};

function imageToBlob(e) {
const n = new Image,
t = document.createElement("canvas"),
o = t.getContext("2d");
return n.crossOrigin = "", n.src = e, new Promise((e => {
n.onload = function() {
t.width = this.naturalWidth, t.height = this.naturalHeight, o.drawImage(this, 0, 0), t.toBlob((n => {
e(n)
}), "image/png", .75)
}
}))
}
async function copyImage(e) {
const n = await imageToBlob(e),
t = new ClipboardItem({
"image/png": n
});
navigator.clipboard.write([t])
}

function stopMaskScroll() {
if (document.getElementById("rightMenu-mask")) {
document.getElementById("rightMenu-mask").addEventListener("mousewheel", (function(e) {
            rm.hideRightMenu()
        }), !1)
}
if (document.getElementById("rightMenu")) {
document.getElementById("rightMenu").addEventListener("mousewheel", (function(e) {
            rm.hideRightMenu()
        }), !1)
}
}

function addRightMenuClickEvent() {
    $("#rightMenu-mask").on("click", rm.hideRightMenu),
    $("#rightMenu-mask").contextmenu((function() {
        return rm.hideRightMenu(), !1
    })),
$("#menu-backward").on("click", (function() {
        window.history.back(),
        rm.hideRightMenu()
    })),
    $("#menu-forward").on("click", (function() {
        window.history.forward(),
        rm.hideRightMenu()
    })),
    $("#menu-refresh").on("click", (function() {
        rm.hideRightMenu(),
        window.location.reload()
    })),
    $("#menu-darkmode").on("click", rm.switchDarkMode),
    $("#menu-reading").on("click", rm.switchReadMode),
    $("#menu-commentBarrage").on("click", (function() {
        rm.hideRightMenu(),
        rm.switchCommentBarrage()
    })),
    $("#menu-postlink").on("click", rm.copyPostUrl),
    $("#menu-copytext").on("click", (function() {
        rm.rightmenuCopyText(selectTextNow),
        btf.snackbarShow("复制成功，复制和转载请标注本文地址")
    })),
    $("#menu-pastetext").on("click", rm.pasteText),
    $("#menu-commenttext").on("click", (function() {
        rm.commentText(selectTextNow),
        rm.hideRightMenu()
    })),
    $("#menu-searchBaidu").on("click", rm.searchBaidu),
    $("#menu-newwindow").on("click", (function() {
window.open(domhref),
        rm.hideRightMenu()
})),
    $("#menu-copylink").on("click", rm.copyLink),
    $("#menu-copyimg").on("click", (function() {
        rm.writeClipImg(domImgSrc)
    })),
    $("#menu-downloadimg").on("click", (function() {
        rm.downloadImage(domImgSrc, "MeuiCat")
    })),
    $("#menu-copylinkimg").on("click", (function() {
        rm.CopyLinkImg(domImgSrc)
    })),
    $("#menu-randomPost").on("click", (function() {
        rm.hideRightMenu(),
        toRandomPost()
    })),
    $("#menu-translate").on("click", rm.translate),
    $("#menu-asidehide").on("click", rm.hideAsideBtn)
}

function selceText() {
var e;
e = document.selection ? document.selection.createRange()
.text : window.getSelection() + "", selectTextNow = e || ""
}

window.oncontextmenu = function(e) {
if (document.body.clientWidth > 768) {
let n = e.clientX + 10,
t = e.clientY,
            p = $(".rightMenuPost"),
            o = $(".rightMenuOther"),
            i = $(".rightMenuPlugin"),
            g = $("#menu-commentBarrage"),
            c = $("#menu-copytext"),
            r = $("#menu-pastetext"),
            m = $("#menu-commenttext"),
            d = $("#menu-search"),
            s = $("#menu-searchBaidu"),
a = $("#menu-newwindow"),
u = $("#menu-copylink"),
l = $("#menu-copyimg"),
h = $("#menu-downloadimg"),
w = $("#menu-copylinkimg"),
            y = e.target.href,
            M = e.target.currentSrc,
            b = !1;
        return o.show(),
        globalEvent = e,
        selectTextNow && window.getSelection() ? (b = !0, c.show(), $("#post-comment").length ? m.show() : m.hide(), d.show(), s.show(), p.hide()) : (c.hide(), m.hide(), d.hide(), s.hide()),
        y ? (b = !0, a.show(), u.show(), domhref = y, p.hide()) : (a.hide(), u.hide()),
        M ? (b = !0, l.show(), h.show(), w.show(), domImgSrc = M, p.hide()) : (l.hide(), h.hide(), w.hide()),
        "input" === e.target.tagName.toLowerCase() || "textarea" === e.target.tagName.toLowerCase() ? (b = !0, r.show(), p.hide()) : r.hide(),
        b ? (o.hide(), i.show()) : (i.hide(), $("#body-wrap.post").length ? p.show() : p.hide()),
        $(".read-mode").length ? g.hide() : g.show(),
        rm.reloadrmSize(),
        n + rmWidth > window.innerWidth && (n -= rmWidth + 10),
        t + rmHeight > window.innerHeight && (t -= t + rmHeight - window.innerHeight),
        rm.showRightMenu(!0, t, n),
        $("#rightMenu-mask").attr("style", "display: flex"),
        !1;
}
}
document.onmouseup = document.ondbclick = selceText

rm.showRightMenu = function(e, n = 0, t = 0) {
let o = $("#rightMenu");
o.css("top", n + "px").css("left", t + "px"),
    e ? (o.show(), stopMaskScroll()) : o.hide()
},
rm.hideRightMenu = function() {
rm.showRightMenu(!1),
    $("#rightMenu-mask").attr("style", "display: none")
},
rm.reloadrmSize = function() {
rmWidth = $("#rightMenu").width(),
    rmHeight = $("#rightMenu").height()
},
rm.switchDarkMode = function() {
    const nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
    if (nowMode === 'light') {
        activateDarkMode()
        saveToLocal.set('theme', 'dark', 2)
        GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night)
    } else {
        activateLightMode()
        saveToLocal.set('theme', 'light', 2)
        GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day)
    }
    typeof utterancesTheme === 'function' && utterancesTheme()
    typeof FB === 'object' && window.loadFBComment()
    window.DISQUS && document.getElementById('disqus_thread')
        .children.length && setTimeout(() => window.disqusReset(), 200)
    rm.hideRightMenu()
},
rm.switchReadMode = function() {
    const $body = document.body;
    if ($(".read-mode").length === 0) {
        $body.classList.add('read-mode');
        const newEle = document.createElement('button');
        newEle.type = 'button';
        newEle.className = 'iconfont icat-exit-mode exit-readmode';
        $body.appendChild(newEle);

        const clickFn = () => {
            $body.classList.remove('read-mode');
            newEle.remove();
            newEle.removeEventListener('click', clickFn);
        };

        newEle.addEventListener('click', clickFn);
        $("#menu-reading span").text("退出阅读模式");
    } else {
        $body.classList.remove('read-mode');
        $(".exit-readmode").remove();
        $("#menu-reading span").text("阅读模式");
    }
    rm.hideRightMenu();
},
rm.switchCommentBarrage = function() {
    document.querySelector(".comment-barrage") && ($(".comment-barrage").is(":visible") ? ($(".comment-barrage").hide(),
    $("#menu-commentBarrage span").text("显示热评"),
    document.querySelector("#consoleCommentBarrage").classList.remove("on"),
    localStorage.setItem("commentBarrageSwitch", "false")) : $(".comment-barrage").is(":hidden") && ($(".comment-barrage").show(),
    $("#menu-commentBarrage span").text("关闭热评"),
    document.querySelector("#consoleCommentBarrage").classList.add("on"),
    localStorage.removeItem("commentBarrageSwitch"))),
    rm.hideRightMenu()
},
rm.copyUrl = function(e) {
$("body")
.after("<input id='copyVal'></input>");
var n = e,
t = document.getElementById("copyVal");
t.value = n, t.select(), t.setSelectionRange(0, t.value.length), document.execCommand("copy"), $("#copyVal")
.remove()
},
rm.copyPostUrl = function() {
var e = window.location.href;
rm.copyUrl(e),
    btf.snackbarShow("复制本页链接地址成功", !1, 2000),
    rm.hideRightMenu()
},
rm.rightmenuCopyText = function(e) {
navigator.clipboard && navigator.clipboard.writeText(e),
    rm.hideRightMenu()
},
rm.readClipboard = function() {
navigator.clipboard && navigator.clipboard.readText()
.then((e => rm.insertAtCaret(globalEvent.target, e)))
},
rm.insertAtCaret = function(e, n) {
const t = e.selectionStart,
o = e.selectionEnd;
if (document.selection) e.focus(), document.selection.createRange()
.text = n, e.focus();
else if (t || "0" == t) {
var i = e.scrollTop;
e.value = e.value.substring(0, t) + n + e.value.substring(o, e.value.length), e.focus(), e.selectionStart = t + n.length, e.selectionEnd = t + n.length, e.scrollTop = i
} else e.value += n, e.focus()
},
rm.pasteText = function() {
rm.readClipboard(),
rm.hideRightMenu()
},
rm.commentText = function (txt) {
    const inputs = ["#wl-edit", ".el-textarea__inner"];
    for (let i = 0; i < inputs.length; i++) {
        let el = document.querySelector(inputs[i]);
        if (el != null) {
            el.dispatchEvent(new Event('input', { bubble: true, cancelable: true }));
            el.value = '> ' + txt.replace(/\n/g, '\n> ') + '\n\n';
            el.focus();
            el.setSelectionRange(-1, -1);
        }
    }
},
rm.searchBaidu = function() {
btf.snackbarShow("即将跳转到百度搜索", !1, 2000), setTimeout((function() {
window.open("https://www.baidu.com/s?wd=" + selectTextNow)
}), "2000"),
    rm.hideRightMenu()
},
rm.rightmenuCopyText = function(e) {
navigator.clipboard && navigator.clipboard.writeText(e),
    rm.hideRightMenu()
},
rm.copyLink = function() {
rm.rightmenuCopyText(domhref),
    btf.snackbarShow("已复制链接地址")
},
rm.downloadimging = !1,
rm.writeClipImg = function(e) {
    const t = "2000";
const n = "localhost" === window.location.hostname || "127.0.0.1" === window.location.hostname ? 0 : 10000;
console.log("按下复制"),
    rm.hideRightMenu(),
    btf.snackbarShow("正在下载中，请稍后", !1, n),
    0 == rm.downloadimging && (rm.downloadimging = !0,
    setTimeout((function() {
copyImage(e), btf.snackbarShow("复制成功！图片已添加盲水印，请遵守版权协议"), rm.downloadimging = !1
}), t))
},
rm.downloadImage = function(e, t) {
    rm.hideRightMenu(),
    0 == rm.downloadimging ? (rm.downloadimging = !0, btf.snackbarShow("正在下载中，请稍后", !1, 10000), setTimeout((function() {
        let o = new Image;
        o.setAttribute("crossOrigin", "anonymous"), o.onload = function() {
            let e = document.createElement("canvas");
            e.width = o.width, e.height = o.height, e.getContext("2d")
                .drawImage(o, 0, 0, o.width, o.height);
            let n = e.toDataURL("image/png"),
                a = document.createElement("a"),
                l = new MouseEvent("click");
            a.download = t || "photo", a.href = n, a.dispatchEvent(l)
        }, o.src = e, btf.snackbarShow("图片已添加盲水印，请遵守版权协议"), rm.downloadimging = !1
    }), "10000")) : btf.snackbarShow("有正在进行中的下载，请稍后再试")
},
rm.CopyLinkImg = function(e) {
rm.rightmenuCopyText(e),
    btf.snackbarShow("已复制图片链接")
},
rm.translate = function() {
    rm.hideRightMenu(),
document.getElementById("translateLink").click();
},
rm.hideAsideBtn = function() {
    const $htmlDom = document.documentElement.classList
    const saveStatus = $htmlDom.contains('hide-aside') ? 'show' : 'hide'
    saveToLocal.set('aside-status', saveStatus, 2)
    $htmlDom.toggle('hide-aside')
    rm.hideRightMenu()
};

// 右键菜单
  • 在 _config.butterfly.yml 主题配置文件中 inject 下的 bottom 引入 jquery 和 rightmenu.js
1
2
3
4
5
6
7
8
9
10
  ···

inject:
  head:
    - ···
  bottom:
    - <script src="https://cdn.staticfile.net/jquery/3.7.1/jquery.min.js"></script> # JQ库
    - <script type="text/javascript" src="/js/rightmenu.js"></script> # 右键菜单

  ···
无JQ库
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
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
var selectTextNow = "";
let rmWidth = document.getElementById("rightMenu").offsetWidth,
    rmHeight = document.getElementById("rightMenu").offsetHeight,
    domhref = "",
    domImgSrc = "",
    globalEvent = null,
    rm = {};

function imageToBlob(e) {
const n = new Image,
t = document.createElement("canvas"),
o = t.getContext("2d");
return n.crossOrigin = "", n.src = e, new Promise((e => {
n.onload = function() {
t.width = this.naturalWidth, t.height = this.naturalHeight, o.drawImage(this, 0, 0), t.toBlob((n => {
e(n)
}), "image/png", .75)
}
}))
}
async function copyImage(e) {
const n = await imageToBlob(e),
t = new ClipboardItem({
"image/png": n
});
navigator.clipboard.write([t])
}

function stopMaskScroll() {
if (document.getElementById("rightMenu-mask")) {
document.getElementById("rightMenu-mask").addEventListener("mousewheel", (function(e) {
            rm.hideRightMenu()
        }), !1)
}
if (document.getElementById("rightMenu")) {
document.getElementById("rightMenu").addEventListener("mousewheel", (function(e) {
            rm.hideRightMenu()
        }), !1)
}
}

function addRightMenuClickEvent() {
    document.getElementById("rightMenu-mask").addEventListener("click", rm.hideRightMenu);
    document.getElementById("rightMenu-mask").addEventListener("contextmenu", function() {
        rm.hideRightMenu();
        return false;
    });
    document.getElementById("menu-backward").addEventListener("click", function() {
        window.history.back();
        rm.hideRightMenu();
    });
    document.getElementById("menu-forward").addEventListener("click", function() {
        window.history.forward();
        rm.hideRightMenu();
    });
    document.getElementById("menu-refresh").addEventListener("click", function() {
        rm.hideRightMenu();
        window.location.reload();
    });
    document.getElementById("menu-darkmode").addEventListener("click", rm.switchDarkMode);
    document.getElementById("menu-reading").addEventListener("click", rm.switchReadMode);
    document.getElementById("menu-commentBarrage").addEventListener("click", function() {
        rm.hideRightMenu();
        rm.switchCommentBarrage();
    });
    document.getElementById("menu-postlink").addEventListener("click", rm.copyPostUrl);
    document.getElementById("menu-copytext").addEventListener("click", function() {
        rm.rightmenuCopyText(selectTextNow);
        btf.snackbarShow("复制成功，复制和转载请标注本文地址");
    });
    document.getElementById("menu-pastetext").addEventListener("click", rm.pasteText);
    document.getElementById("menu-commenttext").addEventListener("click", function() {
        rm.commentText(selectTextNow);
        rm.hideRightMenu();
    });
    document.getElementById("menu-searchBaidu").addEventListener("click", rm.searchBaidu);
    document.getElementById("menu-newwindow").addEventListener("click", function() {
        window.open(domhref);
        rm.hideRightMenu();
    });
    document.getElementById("menu-copylink").addEventListener("click", rm.copyLink);
    document.getElementById("menu-copyimg").addEventListener("click", function() {
        rm.writeClipImg(domImgSrc);
    });
    document.getElementById("menu-downloadimg").addEventListener("click", function() {
        rm.downloadImage(domImgSrc, "MeuiCat");
    });
    document.getElementById("menu-copylinkimg").addEventListener("click", function() {
        rm.CopyLinkImg(domImgSrc);
    });
    document.getElementById("menu-randomPost").addEventListener("click", function() {
        rm.hideRightMenu();
        toRandomPost();
    });
    document.getElementById("menu-translate").addEventListener("click", rm.translate);
    document.getElementById("menu-asidehide").addEventListener("click", rm.hideAsideBtn);
}

function selceText() {
    var e;
    if (window.getSelection) {
        e = window.getSelection().toString();
    } else if (document.selection) {
        e = document.selection.createRange().text;
    }
    selectTextNow = e || "";
}

window.oncontextmenu = function(e) {
    if (document.body.clientWidth > 768) {
        let n = e.clientX + 10,
            t = e.clientY,
            p = document.querySelector(".rightMenuPost"),
            o = document.querySelector(".rightMenuOther"),
            i = document.querySelector(".rightMenuPlugin"),
            g = document.getElementById("menu-commentBarrage"),
            c = document.getElementById("menu-copytext"),
            r = document.getElementById("menu-pastetext"),
            m = document.getElementById("menu-commenttext"),
            d = document.getElementById("menu-search"),
            s = document.getElementById("menu-searchBaidu"),
            a = document.getElementById("menu-newwindow"),
            u = document.getElementById("menu-copylink"),
            l = document.getElementById("menu-copyimg"),
            h = document.getElementById("menu-downloadimg"),
            w = document.getElementById("menu-copylinkimg"),
            y = e.target.href,
            M = e.target.currentSrc,
            b = false;

        o.style.display = "block";
        globalEvent = e;

        if (selectTextNow && window.getSelection()) {
            b = true;
            c.style.display = "block";
            document.getElementById("post-comment") ? m.style.display = "block" : m.style.display = "none";
            d.style.display = "block";
            s.style.display = "block";
            p.style.display = "none";
        } else {
            c.style.display = "none";
            m.style.display = "none";
            d.style.display = "none";
            s.style.display = "none";
        }

        if (y) {
            b = true;
            a.style.display = "block";
            u.style.display = "block";
            domhref = y;
            p.style.display = "none";
        } else {
            a.style.display = "none";
            u.style.display = "none";
        }

        if (M) {
            b = true;
            l.style.display = "block";
            h.style.display = "block";
            w.style.display = "block";
            domImgSrc = M;
            p.style.display = "none";
        } else {
            l.style.display = "none";
            h.style.display = "none";
            w.style.display = "none";
        }

        if (e.target.tagName.toLowerCase() === "input" || e.target.tagName.toLowerCase() === "textarea") {
            b = true;
            r.style.display = "block";
            p.style.display = "none";
        } else {
            r.style.display = "none";
        }

        if (b) {
            o.style.display = "none";
            i.style.display = "block";
        } else {
            i.style.display = "none";
            document.querySelector("#body-wrap.post") ? p.style.display = "block" : p.style.display = "none";
        }

        document.querySelector(".read-mode") ? g.style.display = "none" : g.style.display = "block";

        rm.reloadrmSize();

        if (n + rmWidth > window.innerWidth) {
            n -= rmWidth + 10;
        }

        if (t + rmHeight > window.innerHeight) {
            t -= t + rmHeight - window.innerHeight;
        }

        rm.showRightMenu(true, t, n);
        document.getElementById("rightMenu-mask").style.display = "flex";
        return false;
    }
}
document.onmouseup = document.ondbclick = selceText

rm.showRightMenu = function(e, n = 0, t = 0) {
    const rightMenu = document.getElementById("rightMenu");
    rightMenu.style.top = n + "px";
    rightMenu.style.left = t + "px";
    if (e) {
        rightMenu.style.display = "block";
        stopMaskScroll();
    } else {
        rightMenu.style.display = "none";
    }
},
rm.hideRightMenu = function() {
    rm.showRightMenu(false);
    document.getElementById("rightMenu-mask").style.display = "none";
},
rm.reloadrmSize = function() {
    rmWidth = document.getElementById("rightMenu").offsetWidth;
    rmHeight = document.getElementById("rightMenu").offsetHeight;
},
rm.switchDarkMode = function() {
    const nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
    if (nowMode === 'light') {
        activateDarkMode()
        saveToLocal.set('theme', 'dark', 2)
        GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night)
    } else {
        activateLightMode()
        saveToLocal.set('theme', 'light', 2)
        GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day)
    }
    typeof utterancesTheme === 'function' && utterancesTheme()
    typeof FB === 'object' && window.loadFBComment()
    window.DISQUS && document.getElementById('disqus_thread')
        .children.length && setTimeout(() => window.disqusReset(), 200)
    rm.hideRightMenu()
},
rm.switchReadMode = function() {
    const body = document.body;
    if (!document.querySelector(".read-mode")) {
        body.classList.add('read-mode');
        const newButton = document.createElement('button');
        newButton.type = 'button';
        newButton.className = 'iconfont icat-exit-mode exit-readmode';
        body.appendChild(newButton);

        const clickFn = () => {
            body.classList.remove('read-mode');
            newButton.remove();
            newButton.removeEventListener('click', clickFn);
        };

        newButton.addEventListener('click', clickFn);
        document.getElementById("menu-reading").querySelector("span").textContent = "退出阅读模式";
    } else {
        body.classList.remove('read-mode');
        const exitButton = document.querySelector('.exit-readmode');
        if (exitButton) {
            exitButton.remove();
        }
        document.getElementById("menu-reading").querySelector("span").textContent = "阅读模式";
    }
    rm.hideRightMenu();
},
rm.switchCommentBarrage = function() {
    const commentBarrage = document.querySelector(".comment-barrage");
    if (commentBarrage) {
        if (commentBarrage.style.display === "block") {
            commentBarrage.style.display = "none";
            document.getElementById("menu-commentBarrage").querySelector("span").textContent = "显示热评";
            document.querySelector("#consoleCommentBarrage").classList.remove("on");
            localStorage.setItem("commentBarrageSwitch", "false");
        } else {
            commentBarrage.style.display = "block";
            document.getElementById("menu-commentBarrage").querySelector("span").textContent = "关闭热评";
            document.querySelector("#consoleCommentBarrage").classList.add("on");
            localStorage.removeItem("commentBarrageSwitch");
        }
    }
    rm.hideRightMenu();
},
rm.copyUrl = function(url) {
    const input = document.createElement("input");
    input.id = "copyVal";
    document.body.appendChild(input);
    input.value = url;
    input.select();
    input.setSelectionRange(0, input.value.length);
    document.execCommand("copy");
    input.remove();
},
rm.copyPostUrl = function() {
    const url = window.location.href;
    rm.copyUrl(url);
    btf.snackbarShow("复制本页链接地址成功", false, 2000);
    rm.hideRightMenu();
},
rm.rightmenuCopyText = function(text) {
    if (navigator.clipboard) {
        navigator.clipboard.writeText(text);
    }
    rm.hideRightMenu();
},
rm.readClipboard = function() {
    if (navigator.clipboard) {
        navigator.clipboard.readText().then((text) => rm.insertAtCaret(globalEvent.target, text));
    }
},
rm.insertAtCaret = function(input, text) {
    const start = input.selectionStart;
    const end = input.selectionEnd;
    if (document.selection) {
        input.focus();
        document.selection.createRange().text = text;
        input.focus();
    } else if (start || start === 0) {
        const scrollTop = input.scrollTop;
        input.value = input.value.substring(0, start) + text + input.value.substring(end, input.value.length);
        input.focus();
        input.selectionStart = start + text.length;
        input.selectionEnd = start + text.length;
        input.scrollTop = scrollTop;
    } else {
        input.value += text;
        input.focus();
    }
},
rm.pasteText = function() {
    rm.readClipboard();
    rm.hideRightMenu();
},
rm.commentText = function (txt) {
    const inputs = ["#wl-edit", ".el-textarea__inner"];
    for (let i = 0; i < inputs.length; i++) {
        let el = document.querySelector(inputs[i]);
        if (el != null) {
            el.dispatchEvent(new Event('input', { bubble: true, cancelable: true }));
            el.value = '> ' + txt.replace(/\n/g, '\n> ') + '\n\n';
            el.focus();
            el.setSelectionRange(-1, -1);
        }
    }
},
rm.searchBaidu = function() {
    btf.snackbarShow("即将跳转到百度搜索", false, 2000);
    setTimeout(function() {
        window.open("https://www.baidu.com/s?wd=" + selectTextNow);
    }, 2000);
    rm.hideRightMenu();
},
rm.copyLink = function() {
    rm.rightmenuCopyText(domhref);
    btf.snackbarShow("已复制链接地址");
},
rm.writeClipImg = function(url) {
    const lazyTime = "2000";
    const waitTime = "localhost" === window.location.hostname || "127.0.0.1" === window.location.hostname ? 0 : 10000;
    console.log("按下复制");
    rm.hideRightMenu();
    btf.snackbarShow("正在下载中，请稍后", false, waitTime);
    if (rm.downloadimging === 0) {
        rm.downloadimging = true;
        setTimeout(function() {
            copyImage(url);
            btf.snackbarShow("复制成功！图片已添加盲水印，请遵守版权协议");
            rm.downloadimging = false;
        }, lazyTime);
    }
},
rm.downloadImage = function(url, name) {
    rm.hideRightMenu();
    if (rm.downloadimging === 0) {
        rm.downloadimging = true;
        btf.snackbarShow("正在下载中，请稍后", false, 10000);
        setTimeout(function() {
            let img = new Image();
            img.setAttribute("crossOrigin", "anonymous");
            img.onload = function() {
                let canvas = document.createElement("canvas");
                canvas.width = img.width;
                canvas.height = img.height;
                let ctx = canvas.getContext("2d");
                ctx.drawImage(img, 0, 0, img.width, img.height);
                let dataURL = canvas.toDataURL("image/png");
                let a = document.createElement("a");
                let event = new MouseEvent("click");
                a.download = name || "photo";
                a.href = dataURL;
                a.dispatchEvent(event);
            };
            img.src = url;
            btf.snackbarShow("图片已添加盲水印，请遵守版权协议");
            rm.downloadimging = false;
        }, 10000);
    } else {
        btf.snackbarShow("有正在进行中的下载，请稍后再试");
    }
},
rm.CopyLinkImg = function(url) {
    rm.rightmenuCopyText(url);
    btf.snackbarShow("已复制图片链接");
},
rm.translate = function() {
    rm.hideRightMenu();
    document.getElementById("translateLink").click();
},
rm.hideAsideBtn = function() {
    const htmlDom = document.documentElement.classList;
    const saveStatus = htmlDom.contains('hide-aside') ? 'show' : 'hide';
    saveToLocal.set('aside-status', saveStatus, 2);
    htmlDom.toggle('hide-aside');
    rm.hideRightMenu();
};

// 右键菜单
  • 在 _config.butterfly.yml 主题配置文件中 inject 下的 bottom 引入 rightmenu.js
1
2
3
4
5
6
7
8
9
  ···

inject:
  head:
    - ···
  bottom:
    - <script type="text/javascript" src="/js/rightmenu.js"></script> # 右键菜单

  ···

声明三重曲

仅供参考

隐私协议

  • 创建 [blogRoot]/source/privacy/index.md 页面，配置以下内容
1
2
3
4
5
6
7
8
9
---
title: 隐私政策
date: 2023-03-14 12:04:24
top_img: false
aside: false
comments: false
---

<!-- 页面内容 -->
  • 新增 [blogRoot]/source/privacy/index.md 页面内容
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
<script src="https://cdn.meuicat.com/gh/UAParser.js/ua-parser.min.js"></script>
<script>
function getIpInfo() {
  var fetchUrl = "https://api.qjqq.cn/api/Local"
  fetch(fetchUrl)
    .then(res => res.json())
    .then(json => {
      var ip = json.ip;
      var country = json.data.country;
      var prov = json.data.prov;
      var city = json.data.city;
      var district = json.data.district;
      var precise_radius = json.data.radius;
      var radius = Math.floor(precise_radius);
      var isp = json.data.isp;
      document.getElementById("userAgentIp")
        .innerHTML = ip;
      document.getElementById("userAgentCountry")
        .innerHTML = country;
      document.getElementById("userAgentProv")
        .innerHTML = prov;
      document.getElementById("userAgentCity")
        .innerHTML = city;
      document.getElementById("userAgentDistrict")
        .innerHTML = district;
      document.getElementById("userAgentRadius")
        .innerHTML = radius + '公里';
      document.getElementById("userAgentISP")
        .innerHTML = isp;

      // 使用ua-parser-js解析User-Agent
      var parser = new UAParser();
      var result = parser.getResult();
      document.getElementById("userAgentOS")
        .innerHTML = result.os.name + " " + result.os.version;
      document.getElementById("userAgentBrowser")
        .innerHTML = result.browser.name + " " + result.browser.version;
    })
} // 获取ip信息
</script>

本站非常重视用户的隐私和个人信息保护。你在使用网站时，可能会收集和使用你的相关信息；通过《隐私政策》向你说明在你访问 `meuicat.com`网站时，如何收集、使用、保存、共享和转让这些信息

## 最新更新时间

协议最新更新时间为：**2023-09-22**

### 一、在访问时如何收集和使用你的个人信息

**在访问时，收集访问信息的服务会收集不限于以下信息：**

<font color="Peru">**网络身份标识信息**</font>（浏览器UA、IP地址）

<font color="Peru">**设备信息**</font>

<font color="Peru">**浏览过程**</font>（操作方式、浏览方式与时长、性能与网络加载情况）


**在访问时，本站内置的第三方服务会通过以下或更多途径，来获取你的以下或更多信息：**

* <font color="ForestGreen">**51la统计工具**</font> 会收集你的访问信息，用于网站维护

* <font color="ForestGreen">**灵雀应用监控平台**</font> 会收集你的访问操作过程和资源加载情况，用于网站维护

* <font color="ForestGreen">**busuanzi统计**</font> 仅加载统计访问量

* <font color="ForestGreen">**阿里云**</font> 会收集你的访问信息

* <font color="ForestGreen">**腾讯Codesign**</font> 仅提供icon图标显示加载服务

* <font color="ForestGreen">**多吉云CDN**</font> 、<font color="ForestGreen">**无畏云CDN**</font> 会收集你的访问信息，用于网站加速


**在访问时，本人仅会处于以下目的，使用你的个人信息：**

* 用于网站的优化与文章分类，用户优化文章

* 恶意访问识别，用于维护网站

* 恶意攻击排查，用于维护网站

* 网站点击情况监测，用于优化网站页面

* 网站加载情况监测，用于优化网站性能

* 用于网站搜索结果优化

* 浏览数据的展示

**第三方信息获取方将您的数据用于以下用途：**
第三方可能会用于其他目的，详情请访问对应第三方服务提供的隐私协议

**你应该知道在你访问的时候不限于以下信息会被第三方获取并使用：**
第三方部分为了抵抗攻击、使用不同节点cdn加速等需求会收集不限于以下信息

<div class="table-wrap">
    <table>
        <thead>
            <tr>
                <th>类型<div style="width:100px"></div></th>
                <th>内容</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td td colspan="2"><b style="color: var(--icat-blue);font-size: 16px;">网络信息</b></td>
             </tr>
            <tr>
                <td>IP地址</td><td><div id="userAgentIp">未能获取到信息</div></td>
            </tr>
            <tr>
                <td>国家</td><td><div id="userAgentCountry">未能获取到信息</div></td>
            </tr>
            <tr>
                <td>省份</td><td><div id="userAgentProv">未能获取到信息</div></td>
            </tr>
            <tr>
                <td>城市</td><td><div id="userAgentCity">未能获取到信息</div></td>
            </tr>
            <tr>
                <td>区域</td><td><div id="userAgentDistrict">未能获取到信息</div></td>
            </tr>
            <tr>
                <td>偏差半径</td><td><div id="userAgentRadius">未能获取到信息</div></td>
            </tr>
            <tr>
                <td>运营商</td><td><div id="userAgentISP">未能获取到信息</div></td>
            </tr>
            <tr>
                <td td colspan="2"><b style="color: var(--icat-blue);font-size: 16px;">设备信息</b></td></tr>
            <tr>
                <td>操作系统</td><td><div id="userAgentOS">未能获取到信息</div></td>
            </tr>
            <tr>
                <td>浏览器</td><td><div id="userAgentBrowser">未能获取到信息</div></td>
            </tr>
        </tbody>
    </table>
</div>

> 此页面如果未能获取到信息并不代表无法读取上述信息，以实际情况为准

### 二、在评论时如何收集和使用你的个人信息

评论使用的是无登陆系统的匿名评论系统，你可以自愿填写真实的、或者虚假的信息作为你评论的展示信息。<font color="Peru">**鼓励你使用不易被人恶意识别的昵称进行评论**</font>，但是建议你填写<font color="Peru">**真实的邮箱**</font>以便收到回复（邮箱信息不会被公开）

在你评论时，会额外收集你的个人信息

#### 在评论时，本站内置的第三方服务会通过以下或更多途径，来获取你的相关信息：

* <font color="ForestGreen">**cravatar**</font> 会收集你的访问信息、评论填写的个人信息用于展示头像

#### 在访问时，本人仅会处于以下目的，收集并使用以下信息：

* 评论时会记录你的QQ帐号（如果在邮箱位置填写QQ邮箱或QQ号），方便获取你的QQ头像。如果使用QQ邮箱但不想展示QQ头像，可以填写不含QQ号的QQ邮箱。（主动，存储）

* 评论时会记录你的邮箱，当我回复后会通过邮件通知你（主动，存储，不会公开邮箱）

* 评论时会记录你的网址，用于点击头像时快速进入你的网站（主动，存储）

* 评论时会记录你的IP地址，作为反垃圾的用户判别依据（被动，存储，不会公开IP，会公开IP所在城市）

* 评论会记录你的浏览器代理，用作展示系统版本、浏览器版本方便展示你使用的设备，快速定位问题（被动，存储）

### 三、如何使用 Cookies 和本地 LocalStorage 存储

本站为实现深色模式切换，不蒜子的uv统计等功能，会在你的浏览器中进行本地存储，你可以随时清除浏览器中保存的所有 Cookies 以及 LocalStorage，不影响你的正常使用

本博客中的以下业务会在你的计算机上主动存储数据：

#### <font color="Peru">**内置服务**</font>

* 即刻短文
* 生活相册
* 人生足迹
* 评论系统

#### <font color="Peru">**第三方服务**</font>

* 51la分析
* 灵雀监控
* busuanzi统计
* 多吉云CDN
* 无畏云CDN

关于如何使用你的Cookies，请访问 [**Cookies政策**](/cookies/)
关于如何[**在 Chrome 中清除、启用和管理 Cookie**](https://support.google.com/chrome/answer/95647?co=GENIE.Platform=Desktop&hl=zh-Hans)

### 四、如何共享、转让你的个人信息
本人不会与任何公司、组织和个人共享你的隐私信息

本人不会将你的个人信息转让给任何公司、组织和个人

第三方服务的共享、转让情况详见对应服务的隐私协议

### 五、附属协议
当监测到存在恶意访问、恶意请求、恶意攻击、恶意评论的行为时，为了防止增大受害范围，可能会临时将你的ip地址及访问信息短期内添加到黑名单，短期内禁止访问

此黑名单可能被公开，并共享给其他站点（主体并非本人）使用，包括但不限于：IP地址、设备信息、地理位置

Cookies政策

  • 创建 [blogRoot]/source/cookies/index.md 页面，配置以下内容
1
2
3
4
5
6
7
8
9
---
title: Cookies
date: 2023-03-14 13:07:26
top_img: false
aside: false
comments: false
---

<!-- 页面内容 -->
  • 新增 [blogRoot]/source/cookies/index.md 页面内容
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
我使用Cookies来保持我的网站和我开发的软件的可靠性，安全性和个性化。当你接受Cookies时，这有助于通过我识别你的身份、记住你的偏好、或提供个性化用户体验来帮助我改善网站

本政策应与我的 [**隐私政策**](/privacy/) 一起阅读，该隐私政策解释了我如何使用个人信息

如果你对我使用你的个人信息或Cookies的方式有任何疑问，请通过 `meuicat_718@163.com` 与我联系

如果你想管理你的Cookies，请按照下面“如何管理Cookies”部分中的说明进行操作。


# 什么是Cookies？

Cookies是一种小型文本文件，当你访问网站时，网站可能会将这些文件放在你的计算机或设备上。Cookies会帮助网站或其他网站在你下次访问时识别你的设备。网站信标、像素或其他类似文件也可以做同样的事情。我在此政策中使用术语“Cookies”来指代以这种方式收集信息的所有文件

Cookies提供许多功能。例如，他们可以帮助我记住你喜欢深色模式还是浅色模式，分析我网站的效果

大多数网站使用Cookies来收集和保留有关其访问者的个人信息。大多数Cookies收集一般信息，例如访问者如何到达和使用我的网站，他们使用的设备，他们的互联网协议地址（IP地址），他们正在查看的页面及其大致位置（例如，我将能够认识到你正在从深圳访问我的网站）


# Cookies的目的

我将Cookies分为以下类别:

| 用途 | 说明 |
| :----: | :----: |
| 授权 | 你访问我的网站时，我可通过 Cookie 提供正确信息，为你打造个性化的体验。例如：Cookie会告知你通过搜索引擎搜索的具体内容来改善文章的标题优化关键词、或者创建更符合你搜索需求的文章内容 |
| 安全措施 | 我通过 Cookie 启用及支持安全功能，监控和防止可疑活动、欺诈性流量和违反版权协议的行为 |
| 偏好、功能和服务 | 我使用功能性Cookies来让我记住你的偏好，或保存你向我提供的有关你的喜好或其他信息 |
| 个性化广告 | 本站及所属旗下产品、IP没有个性化广告 |
| 网站性能、分析和研究 | 我使用这些cookie来监控网站性能。这使我能够通过快速识别和解决出现的任何问题来提供高质量的体验 |


# 我的网站上的第三方Cookies

我还在我的网站上使用属于上述类别的第三方Cookies，用于以下目的：

* 帮助我监控网站上的流量；
* 识别欺诈或非人为性流量；
* 协助市场调研；
* 改善网站功能；
* 监督我的版权协议和隐私政策的遵守情况

| 第三方服务商 | 用途 |
| :----: | :----: |
| 51.la | 用于统计站内访问情况，进行针对性优化异常 |
| 灵雀应用监控 | 监控系统将网站所发生的程序异常、资源加载异常、网络请求异常上报汇总，同时对页面和资源进行性能监控和卡顿监测，分析不同维度下的耗时情况，快速解决遇到的问题 |
| Twikoo | Twikoo评论服务，自建存储私有，用于本站的评论服务 |


# 如何管理Cookies？

在将Cookie放置在你的计算机或设备上之前，系统会显示一个弹出窗口，要求你同意设置这些Cookie。通过同意放置Cookies，你可以让我为你提供最佳的体验和服务。如果你愿意，你可以通过浏览器设置关闭本站的Cookie来拒绝同意放置Cookies；但是，我网站的部分功能可能无法完全或按预期运行。你有机会允许和/或拒绝使用Cookie。你可以通过访问浏览器设置随时返回到你的Cookie偏好设置以查看和/或删除它们

除了我提供的控件之外，你还可以选择在Internet浏览器中启用或禁用Cookie。大多数互联网浏览器还允许你选择是要禁用所有Cookie还是仅禁用第三方Cookie。默认情况下，大多数互联网浏览器都接受Cookie，但这可以更改。有关详细信息，请参阅Internet浏览器中的帮助菜单或设备随附的文档

以下链接提供了有关如何在所有主流浏览器中控制Cookie的说明：

* [**Google Chrome**](https://support.google.com/chrome/answer/95647?hl=en)
* [**IE**](https://support.microsoft.com/en-us/help/260971/description-of-cookies)
* [**Safari（桌面版）**](https://support.apple.com/guide/safari/manage-cookies-and-website-data-sfri11471/mac)
* [**Safari（移动版）**](https://support.apple.com/en-us/HT201265)
* [**火狐浏览器**](https://support.mozilla.org/en-US/kb/Cookies-information-websites-store-on-your-computer)
* [**Android浏览器**](http://support.google.com/ics/nexus/bin/answer.py?hl=en&answer=2425067)

如你使用其他浏览器，请参阅浏览器制造商提供的文档。
有关Cookies以及如何管理Cookies的更多信息，请访问：

[**wikipedia.org**](https://zh.wikipedia.org/wiki/Cookie) 、 [**allaboutCookies.org**](https://www.allaboutcookies.org/) 或 [**aboutCookies.org**](https://www.aboutcookies.org/)


# 更多信息

有关我数据处理的更多信息，请参阅我的隐私政策。如果你对此Cookie政策有任何疑问，请通过 `meuicat_718@163.com` 与我联系


# 对此Cookie政策的更改

我可能对此Cookie政策所做的任何更改都将发布在此页面上。如果更改很重要，我会在我的主页或应用上明确指出该政策已更新

版权协议

  • 创建 [blogRoot]/source/cc/index.md 页面，配置以下内容
1
2
3
4
5
6
7
8
9
---
title: 版权协议
date: 2023-03-14 13:27:27
top_img: false
aside: false
comments: false
---

<!-- 页面内容 -->
  • 新增 [blogRoot]/source/cc/index.md 页面内容
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
为了保持文章质量，并保持互联网的开放共享精神，保持页面流量的稳定，综合考虑下本站的所有原创文章均采用cc协议中比较严格的[署名-非商业性使用-禁止演绎 4.0 国际](https://creativecommons.org/licenses/by-nc-nd/4.0/deed.zh)标准。这篇文章主要想能够更加清楚明白的介绍本站的协议标准和要求。方便你合理的使用本站的文章

本站无广告嵌入和商业行为。违反协议的行为不仅会损害原作者的创作热情，而且会影响整个版权环境。强烈呼吁你能够在转载时遵守协议。遵守协议的行为几乎不会对你的目标产生负面影响，鼓励创作环境是每个创作者的期望


# 哪些文章适于本协议？

所有原创内容均在文章标题顶部，以及文章结尾的版权说明部分展示

原创内容的非商用转载必须为完整转载且标注出处的 `带有完整url链接` 或 `访问原文` 之类字样的超链接

作为参考资料的情况可以无需完整转载，摘录所需要的部分内容即可，但需标注出处


# 你可以做什么？

只要你遵守本页的许可，你可以自由地共享文章的内容 — 在任何媒介以任何形式复制、发行本作品。并且无需通知作者


# 你需要遵守什么样的许可？

### 署名

你必须标注内容的来源，你需要在文章开头部分（或者明显位置）标注原文章链接（建议使用超链接提升阅读体验）

### 禁止商用

本站内容免费向互联网所有用户提供，分享本站文章时禁止商业性使用、禁止在转载页面中插入广告（例如谷歌广告、百度广告）、禁止阅读的拦截行为（例如关注公众号、下载App后观看文章）

### 禁止演绎
* 分享全部内容（无修改）
你需要在文章开头部分（或者明显位置）标注原文章链接（建议使用超链接）

* 分享部分截取内容或者衍生创作
目前本站全部原创文章的衍生品禁止公开分享和分发。如有更好的修改建议，可以在对应文章下留言。如有衍生创作需求，可以在评论中联系。

* 作为参考资料截取部分内容
作为参考资料的情况可以无需完整转载，摘录所需要的部分内容即可，但需标注出处。


# 什么内容会被版权保护

**包括但不限于：**

* 文章封面图片
* 文章标题和正文
* 站点图片素材（不含主题自带素材）


# 例外情况
本着友好互相进步的原则，被本站友链收录的博客允许博客文章内容的衍生品的分享和分发，但仍需标注出处

本着互联网开放精神，你可以在博客文章下方留言要求授权博文的衍生品的分享和分发，标注你的网站地址

关于主题样式的版权信息，可以详见[Butterfly](https://github.com/jerryc127/hexo-theme-butterfly/)主题说明，本站已经历多次版本迭代，[查看具体更新](/update/)


# 网站源代码协议
网站源代码（仅包含css、js）的代码部分采用GPL协议

参考文献

Butterfly魔改：自定义右键菜单
这篇博文讲解了如何在Hexo博客中添加自定义的右键菜单，包含遮罩、超链接样式和繁简切换功能，然后提供了CSS和JS代码供参考。本文基于原版链接进行了魔改，实现了Acrylic风格的右键菜单。
Butterfly主题美化教程
Butterfly主题美化教程
青桔-API
致力于为用户提供稳定、快速的免费API数据接口服务。
]]> 经验分享 Butterfly主题 魔改记录 https://meuicat.com/posts/25b0b30e.html#disqus_thread 音乐分享 - doi微醺氛围 https://meuicat.com/posts/4ccc2869.html https://meuicat.com/posts/4ccc2869.html Sun, 24 Mar 2024 16:16:05 GMT 未满十八勿进！单身人士酌请查看~ 对于一个耳机重度患者来说，音乐就是我每天的必须品。

翻看整理了下歌单发现，以前创建过一个doi增添氛围的歌单。就是带点颜色的哪种音乐。涩的不多，但节奏真的很顶。
喝点小酒，放点奇奇怪怪的音乐，氛围感拉满，让人和气氛都能快速的进入状态。

毕竟音乐嘛，能够更好的放松身心，忘记一切。在一些音乐节奏或者特别“污”的词，会使人更加投入其中。

娜老师表示：一百昏~ 👏

《混搭风格的doi氛围》
跟 亦小封 一起欣赏更多音乐

那么这一期就来浅浅“涩”一下。
歌单里还是有那么几首是我个人认为能排的上号的，很不错的，很顶的，能够很快速的进入下一个“阶段”。

这个版本的i love you baby真的有一种眼之所及皆是你的感觉，氛围感拉满，丝毫没有颜色程度。但是很有微醺的氛围。
超级适合小酌的低声BGM。聊天暧昧对视拉满。

这首的前奏的调调很独得娜老师芳心，但我却爱上了一分钟处的欲转音。
开头确实颅内高潮，节奏感很强。高音部分也选择用假音处理，增添了几分魅惑的味道。而最后的真声让人一机灵，喘息声，还有气音都给这首歌赋予了性感“诡异”的感听感
巨喜欢这种半死不活又顶的调。

R&B独有的破碎感，并且伴随一股很强的神秘和迷幻感。
每一重节拍重音与紧贴着的两颗心脏搏动相应，配上细腻的气息，犹如细丝绕耳，很惊艳。
有种挑逗情思，但又很深情的厚重感，沦陷，真的沦陷。

当然了，适用得当可以加深亲密关系，但是尊重和理解是前提
感觉不适要及时制止，双方喜欢才有效

]]> 闲聊杂谈 网易云音乐 https://meuicat.com/posts/4ccc2869.html#disqus_thread Butterfly的魔改教程：动态相册页 https://meuicat.com/posts/188958b4.html https://meuicat.com/posts/188958b4.html Mon, 12 Feb 2024 05:31:33 GMT 用照片来定格住最好的自己；是时光流逝的见证者，亦是记录者

📚 更多文档目录

🚀 搭建教程 | 1 - 📑 前置教程 | 2 - 🎈 主题调整 | 3 - ✨ 魔改教程 | 4 - 🐈 重构自用数据记录

本篇教程基于 Hexo 6.3.0 & Butterfly 4.9.0 为博主的魔改教程记录，以防自己日后因魔改迷失所记录 📝

本小节魔改内容不包括 顶部banner栏，如有需要请移步至 ✨ 第二章 - 三小节 | 魔改页前置

240410 更新：调整Bar配置问题，修复多个相册页面造成的问题

240112 更新：新增Bar条切换相册分类；修复Bar栏重复点击的问题

如果没有服务器可以搭建memos，可以使用iCat自用的memos服务

iCat - Memos
Memos畅所欲言

效果预览

生活相册
关于我 快门の色彩瞬间

创建数据

  • 新建 [blogRoot]/themes/butterfly/layout/includes/page/photo.pug 页面，并新增以下内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
if page.bar
    .icat-status-bar
        .status-bar-tips= page.bar.tips || '类别'
        .status-bar
            #bar-box
                each item in page.bar.list
                    - const content = item.split(' || ')
                    .status-bar-item
                        a(onclick="photos('" + content[0] + "')") #{content[1]}
        #status-bar-button(onclick="statusbar()")
            i.iconfont.icat-chevron-too
        if page.bar.more
            - const contents = page.bar.more.split(' || ')
            if contents[0].startsWith('/')
                a.status-bar-more(href="javascript:void(0)" onclick="pjax.loadUrl('" + contents[0] + "')") #{contents[1]}
            else
                a.status-bar-more(href=contents[0]) #{contents[1]}
div.gallery-photos.page
    img(src="https://img.meuicat.com/blog/loading.svg" style="margin:auto")
  • 修改 [blogRoot]/themes/butterfly/layout/page.pug 来使页面匹配
    （ + 号直接删除 即是正常缩进）
1
2
3
4
5
6
      when 'categories'
        include includes/page/categories.pug
+      when 'photo'
+        include includes/page/photo.pug
      default
        include includes/page/default-page.pug
  • 新建 [blogRoot]/themes/butterfly/source/css/_page/photo.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
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
.icat-status-bar
    margin: 16px 0
    display: flex
    white-space: nowrap
    align-items: center
    background: var(--icat-card-bg)
    border-radius: 8px
    padding: 0 12px
    border: var(--style-border)
    transition: .6s
    box-shadow: var(--icat-shadow-border)

    &:hover
        border-color: var(--icat-blue)
        box-shadow: var(--icat-shadow-blue)

    .status-bar
        padding: 0.4rem 0 0.4rem 0.4rem
        white-space: nowrap
        overflow: hidden
        transition: .3s
        width: 100%
        justify-content: space-between
        user-select: none
        display: flex
        align-items: center
        font-size: 15px

        #bar-box
            white-space: nowrap
            overflow-x: scroll
            overflow-y: hidden
            display: flex
            border-radius: 8px
            align-items: center
            height: 30px

            .status-bar-item
                a
                    padding: 0.1rem 0.5rem
                    margin-right: 10px
                    font-weight: 700
                    border-radius: 8px
                    display: flex
                    align-items: center
                    height: 30px
                    color: var(--icat-fontcolor)
                    opacity: .8
                    transition: .6s

                    &:hover
                        background: var(--icat-blue)
                        opacity: 1
                        color: var(--icat-white)

                &.selected
                    a
                        background: var(--icat-blue) !important
                        opacity: 1 !important
                        color: var(--icat-white) !important

    #status-bar-button
        margin-left: 12px
        cursor: pointer
        height: 22px
        display: flex
        align-items: center
        transition: .6s

        &:hover
            color: var(--icat-blue)

    .status-bar-more
        margin-left: 12px
        font-weight: 400
        color: var(--icat-fontcolor)
        opacity: .8
        transition: .6s

        &:hover
            color: var(--icat-blue)

#bar-box::-webkit-scrollbar
    display: none

.gallery-photos
    width: 100%
    text-align: center
    animation: slide-in .6s .4s backwards

    .gallery-photo
        min-height: 5rem
        width: 24.99%
        padding: 4px
        position: relative
        animation: slide-in 0.6s 0.4s backwards

        +maxWidth1024()
            width: 33.3%

        +maxWidth768()
            width: 49.9%
            padding: 3px

        +minWidth2000()
            width: 20%

        &:hover
            img
            transform: scale(1.1)

        a
            border-radius: 8px
            border: var(--style-border)
            box-shadow: var(--icat-shadow-border)
            display: block
            overflow: hidden
            transition: .6s

            &:hover
                border-color: var(--icat-blue)
                box-shadow: var(--icat-shadow-blue)

            img
                display: block
                width: 100%
                animation: fadeIn 1s
                cursor: pointer
                transition: all .4s ease-in-out

        .photo-title,
        .photo-time
            max-width: calc(100% - 7px)
            line-height: 1.8
            position: absolute
            left: 4px
            font-size: 14px
            background: rgba(0,0,0,0.3)
            padding: 0px 8px
            color: #fff
            animation: fadeIn 1s

        .photo-title
            bottom:4px
            border-radius: 0 8px 0 8px

            +maxWidth768()
                font-size: 12px
                left: 3px
                bottom: 3px

        .photo-time
            top:4px
            border-radius: 8px 0 8px 0
可选CSS样式
  • 新建 [blogRoot]/source/css/photo.css 样式文件，并新增以下内容
    （也可以在自建的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
.icat-status-bar {
  margin: 16px 0;
  display: flex;
  white-space: nowrap;
  align-items: center;
  background: var(--icat-card-bg);
  border-radius: 8px;
  padding: 0 12px;
  border: var(--style-border);
  transition: 0.6s;
  box-shadow: var(--icat-shadow-border);
}
.icat-status-bar:hover {
  border-color: var(--icat-blue);
  box-shadow: var(--icat-shadow-blue);
}
.icat-status-bar .status-bar {
  padding: 0.4rem 0 0.4rem 0.4rem;
  white-space: nowrap;
  overflow: hidden;
  transition: 0.3s;
  width: 100%;
  justify-content: space-between;
  user-select: none;
  display: flex;
  align-items: center;
  font-size: 15px;
}
.icat-status-bar .status-bar #bar-box {
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
  display: flex;
  border-radius: 8px;
  align-items: center;
  height: 30px;
}
.icat-status-bar .status-bar #bar-box .status-bar-item a {
  padding: 0.1rem 0.5rem;
  margin-right: 10px;
  font-weight: 700;
  border-radius: 8px;
  display: flex;
  align-items: center;
  height: 30px;
  color: var(--icat-fontcolor);
  opacity: 0.8;
  transition: 0.6s;
}
.icat-status-bar .status-bar #bar-box .status-bar-item a:hover {
  background: var(--icat-blue);
  opacity: 1;
  -ms-filter: none;
  filter: none;
  color: var(--icat-white);
}
.icat-status-bar .status-bar #bar-box .status-bar-item.selected a {
  background: var(--icat-blue) !important;
  opacity: 1 !important;
  -ms-filter: none !important;
  filter: none !important;
  color: var(--icat-white) !important;
}
.icat-status-bar #status-bar-button {
  margin-left: 12px;
  cursor: pointer;
  height: 22px;
  display: flex;
  align-items: center;
  transition: 0.6s;
}
.icat-status-bar #status-bar-button:hover {
  color: var(--icat-blue);
}
.icat-status-bar .status-bar-more {
  margin-left: 12px;
  font-weight: 400;
  color: var(--icat-fontcolor);
  opacity: 0.8;
  transition: 0.6s;
}
.icat-status-bar .status-bar-more:hover {
  color: var(--icat-blue);
}
#bar-box::-webkit-scrollbar {
  display: none;
}

/* Bar栏样式 */

.gallery-photos {
width:100%;
margin-top:16px;
  text-align: center;
}
.gallery-photo {
min-height:5rem;
width:24.99%;
padding:4px;
position:relative;
}
.gallery-photo a {
border-radius:8px;
  border: var(--style-border-always);
  box-shadow: var(--icat-shadow-border);
display:block;
overflow:hidden;
}
.gallery-photo img {
display:block;
width:100%;
animation:fadeIn 1s;
cursor:pointer;
transition:all .4s ease-in-out !important;
}
.gallery-photo span.photo-title,.gallery-photo span.photo-time {
max-width:calc(100% - 7px);
line-height:1.8;
position:absolute;
left:4px;
font-size:14px;
background:rgba(0,0,0,0.3);
padding:0px 8px;
color:#fff;
animation:fadeIn 1s;
}
.gallery-photo span.photo-title {
bottom:4px;
border-radius:0 8px 0 8px;
}
.gallery-photo span.photo-time {
top:4px;
border-radius:8px 0 8px 0;
}
.gallery-photo:hover img {
transform:scale(1.1);
}
@media screen and (max-width:1100px) {
.gallery-photo {
width:33.3%;
}
}@media screen and (max-width:768px) {
.gallery-photo {
width:49.9%;
padding:3px
}
/* .gallery-photo span.photo-time {
display:none
}
手机端隐藏时间显示 */
.gallery-photo span.photo-title {
font-size:12px
}
.gallery-photo span.photo-title {
left:3px;
bottom:3px;
}
@keyframes fadeIn {
0% {
  opacity:0;
  }
  100% {
  opacity:1;
  }
}

/* Memos动态相册样式 */
  • 在 _config.butterfly.yml 主题配置文件中 inject 下的 head 引入 photo.css
1
2
3
4
5
6
7
8
9
  ···

inject:
  head:
    - <link rel="stylesheet" href="/css/photo.css"> # 动态相册样式
  bottom:
    - ···

  ···
  • 创建 [blogRoot]/source/js/memos/photo.js 文件，并新增以下内容，用来处理Memos动态相册的函数
    （或写在自建的公共 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
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
function whenDOMReady() {
  if (location.pathname == '/photos/') photos('相册'); // 首次进入需要刷新展示的相评分类
}
whenDOMReady()
document.addEventListener("pjax:complete", whenDOMReady)

// 适配pjax

window.onresize = () => {
  if (location.pathname == '/photos/') waterfall('.gallery-photos');
};

// 自适应

function photos(tag) {
    let apiUrl = `你的memos地址/api/v1/memo?creatorId=用户UID&tag=${tag}`; // 修改Memos API地址以及 UID
  
    fetch(apiUrl).then(res => res.json()).then(data => {
        let html = '',
            imgs = []
        data.forEach(item => {
            let ls = item.content.match(/\!\[.*?\]\(.*?\)/g)
            if (ls) imgs = imgs.concat(ls)
            if (item.resourceList.length) {
                item.resourceList.forEach(t => {
                    if (t.externalLink) imgs.push(`![](${t.externalLink})`)
                    else imgs.push(`![](${url}/o/r/${t.id}/${t.publicId}/${t.filename})`)
                })
            }
        })

        if (imgs) imgs.forEach(item => {
            let img = item.replace(/!\[.*?\]\((.*?)\)/g, '$1'),
                time, title, tat = item.replace(/!\[(.*?)\]\(.*?\)/g, '$1')
            if (tat.indexOf(' ') != -1) {
                time = tat.split(' ')[0]
                title = tat.split(' ')[1]
            } else title = tat

            html += `<div class="gallery-photo"><a href="${img}" data-fancybox="gallery" class="fancybox" data-thumb="${img}"><img class="no-lazyload photo-img" loading='lazy' decoding="async" src="${img}"></a>`
            title ? html += `<span class="photo-title">${title}</span>` : ''
            time ? html += `<span class="photo-time">${time}</span>` : ''
            html += `</div>`
        })

        document.querySelector('.gallery-photos.page').innerHTML = html
        imgStatus.watch('.photo-img', () => { waterfall('.gallery-photos') })
        window.Lately && Lately.init({ target: '.photo-time' })
    }).catch()

    if (document.querySelector(".icat-status-bar")) {
      var statusBarItemItems = document.querySelectorAll('.status-bar-item');
      let firstElement = statusBarItemItems[1];
      firstElement.classList.add('selected');
    
      Array.from(statusBarItemItems).forEach(function (element) {
        element.onclick = function (event) {
          var selectedElements = document.querySelectorAll('.status-bar-item.selected');
          Array.from(selectedElements).forEach(function (selectedElement) {
            selectedElement.classList.remove('selected');
          });
          element.classList.add('selected');
    
          event.stopPropagation();
          event.preventDefault();
          return false;
        };
      });
    }
}

// 相册页处理函数

function statusbar() {
    var e;
    var t = document.getElementById("bar-box");
    var o = document.getElementById("status-bar-button");
    var n = t.clientWidth;
    if (t) {
        if (t.scrollLeft + t.clientWidth >= t.scrollWidth - 8) {
            t.scroll({ left: 0, behavior: "smooth" });
        } else {
            t.scrollBy({ left: n, behavior: "smooth" });
        }
        t.addEventListener("scroll", function n() {
            clearTimeout(e);
            e = setTimeout(function () {
                o.style.transform =
                    t.scrollLeft + t.clientWidth >= t.scrollWidth - 8 ? "rotate(180deg)" : "";
                t.removeEventListener("scroll", n);
            }, 150);
        });
    }
};
// Bar滚动处理

memos api地址格式如下所示：
https://memos地址/api/v1/memo?creatorId=用户UID&tag=标签名

memos地址就是首页地址，如：memos.meuicat.com

Memos 0.20.1以下版本UID的获取方式：

  • 点击个人头像，然后点击 RSS

  • 根据浏览器链接获取ID

如url是：https://memos.meuicat.com/u/1/rss.xml
则creatorId就是1
最后完整链接如下：
https://memos.meuicat.com/api/v1/memo?creatorId=1&tag=相册
能看到数据则为正确链接

Memos 0.21.0版本UID获取方式：

  • 点击设置 - 我的账号 - 编辑

  • 用户名上显示的数字即是你的UID

  • 创建 [blogRoot]/source/js/memos/imgStatus.min.js 文件，并新增以下内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
! function() {
this.loaded = 0, this.failed = 0, this.total = 0, this.watch = function(a, b) {
var c = document.querySelectorAll(a);
if (!c.length) return console.log("[imgStatus]: There aren't any images associated with this selector (" + a + ")!");
this.total = c.length;
for (var d = 0; d < this.total; d++) isCached(c[d].src) ? this._setLoaded(b) : c[d].addEventListener ? (c[d].addEventListener("load", this._setLoaded.bind(this, b)), c[d].addEventListener("error", this._setFailed.bind(this, b))) : (c[d].attachEvent("onload", this._setLoaded.bind(this, b)), c[d].attachEvent("onerror", this._setFailed.bind(this, b)))
}, this.isCached = function(a) {
var b = new Image;
return b.src = a, b.complete
}, this._setFailed = function(a, b) {
++this.failed, "function" == typeof a && a(this)
}, this._setLoaded = function(a, b) {
++this.loaded, "function" == typeof a && a(this)
}, this.isDone = function() {
return this.loaded + this.failed === this.total ? !0 : !1
}, "object" == typeof window && (window.imgStatus = this)
}();

// imgStatus.min.js
  • 创建 [blogRoot]/source/js/memos/lately.min.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
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
! function() {
window.Lately = new function() {
var t = this;
this.lang = {
second: "秒",
minute: "分钟",
hour: "小时",
day: "天",
month: "个月",
year: "年",
ago: "前",
error: "NaN"
};
var e = function(e) {
e = new Date(n(e));
var r = new function() {
this.second = (Date.now() - e.getTime()) / 1e3, this.minute = this.second / 60, this.hour = this.minute / 60, this.day = this.hour / 24, this.month = this.day / 30, this.year = this.month / 12
}, i = Object.keys(r).reverse().find(function(t) {
return r[t] >= 1
});
return (i ? function(t, e) {
return Math.floor(t) + e
}(r[i], t.lang[i]) : t.lang.error) + t.lang.ago
}, n = function(t) {
return t = new Date(t && ("number" == typeof t ? t : t.replace(/-/g, "/").replace("T", " "))), !isNaN(t.getTime()) && t.getTime()
};
return {
init: function() {
var r = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {}, i = r.target,
a = void 0 === i ? "time" : i,
o = r.lang;
o && (t.lang = o);
var u = !0,
h = !1,
l = void 0;
try {
for (var s, c = document.querySelectorAll(a)[Symbol.iterator](); !(u = (s = c.next()).done); u = !0) {
var f = s.value,
g = n(f.dateTime) || n(f.title) || n(f.innerHTML) || 0;
if (!g) return;
f.title = new Date(g).toLocaleString(), f.innerHTML = e(g)
}
} catch (t) {
h = !0, l = t
} finally {
try {
!u && c.
return &&c.
return ()
} finally {
if (h) throw l
}
}
},
format: e
}
}
}();

/*
 * Lately.min.js 2.5.2
 * MIT License - http://www.opensource.org/licenses/mit-license.php
 * https://tokinx.github.io/lately/
 */
  • 创建 [blogRoot]/source/js/memos/waterfall.min.js 文件，并新增以下内容，用来处理Memos动态相册的瀑布流
    （在上几节的即刻短文教程里添加了瀑布流的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
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
function waterfall(a) {
function b(a, b) {
var c = window.getComputedStyle(b);
return parseFloat(c["margin" + a]) || 0
}

function c(a) {
return a + "px"
}

function d(a) {
return parseFloat(a.style.top)
}

function e(a) {
return parseFloat(a.style.left)
}

function f(a) {
return a.clientWidth
}

function g(a) {
return a.clientHeight
}

function h(a) {
return d(a) + g(a) + b("Bottom", a)
}

function i(a) {
return e(a) + f(a) + b("Right", a)
}

function j(a) {
a = a.sort(function(a, b) {
return h(a) === h(b) ? e(b) - e(a) : h(b) - h(a)
})
}

function k(b) {
f(a) != t && (b.target.removeEventListener(b.type, arguments.callee), waterfall(a))
}
"string" == typeof a && (a = document.querySelector(a));
var l = [].map.call(a.children, function(a) {
return a.style.position = "absolute", a
});
a.style.position = "relative";
var m = [];
l.length && (l[0].style.top = "0px", l[0].style.left = c(b("Left", l[0])), m.push(l[0]));
for (var n = 1; n < l.length; n++) {
var o = l[n - 1],
p = l[n],
q = i(o) + f(p) <= f(a);
if (!q) break;
p.style.top = o.style.top, p.style.left = c(i(o) + b("Left", p)), m.push(p)
}
for (; n < l.length; n++) {
j(m);
var p = l[n],
r = m.pop();
p.style.top = c(h(r) + b("Top", p)), p.style.left = c(e(r)), m.push(p)
}
j(m);
var s = m[0];
a.style.height = c(h(s) + b("Bottom", s));
var t = f(a);
window.addEventListener ? window.addEventListener("resize", k) : document.body.onresize = k
}

// 瀑布流处理
  • 在 _config.butterfly.yml 主题配置文件中 inject 下的 head 和 bottom 分别引入 waterfall.min.js lately.min.js imgStatus.min.js photo.js
1
2
3
4
5
6
7
8
9
10
11
12
  ···

inject:
  head:
    - ···
  bottom:
    - <script type="text/javascript" src="/js/memos/waterfall.min.js"></script> # memos动态相册 - waterfall
    - <script type="text/javascript" src="/js/memos/imgStatus.min.js"></script> # memos动态相册 - imgStatus
    - <script type="text/javascript" src="/js/memos/lately.min.js"></script> # memos动态相册 - lately
    - <script type="text/javascript" src="/js/memos/photo.js"></script> # memos动态相册 - 格式链JS

  ···
  • 创建并修改 [blogRoot]/source/photos/index.md 页面
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
---
title: 生活相册
date: 2023-03-14 21:47:47
type: photo
top_img: false
aside: false
top_page: true
top_bg: https://img.meuicat.com/banner
top_item: 相册
top_title: 快门の色彩瞬间
top_tips: 活在当下 热烈且自由
comments: false
bar: 
  tips: 年份类别
  list: 
    - 相册 || 全部
    - 2023 || 2023
    - 2022 || 2022
    - 2021 || 2021
    - 2020 || 2020
    - 2019 || 2019
    - 2018 || 2018
    - 2017 || 2017
  more: /album/ || 影集
---

<!-- 页面内容 -->
参数类型释义
bar可选是否使用Bar分类栏
bar.tips可选Bar分类栏的提示文字
bar.list必选Bar分类栏的tag和显示文字，第一个参数为tag；第二个参数为需要显示的文字
bar.more可选Bar分类栏更多按钮的跳转链接和显示文字，第一个参数为跳转链接地址（支持/album/、https://meuicat.com这种格式，不支持不带头标的meuicat.com格式；第二个参数为需要显示的文字

使用参数

1
2
3
4
5
6
7
8
9
#相册
<!-- 写法就是markdown的写法，中括号里先写时间再写标题，中间使用空格隔开 -->
![2023-01-29 我是标题](图片链接)
<!-- 若不想要时间只写标题即可 -->
![我是标题](图片链接)
<!-- 若不想要标题只写时间即可，只不过后面需要添加空格 -->
![2023-01-29 ](图片链接)
<!-- 也可以只填写图片链接 -->
![](图片链接)
  • 在 memos 内的写法
1
2
3
4
5
#相册
![2023-02-09 ](https://s11.ax1x.com/2023/03/16/pp3jQ3V.jpg)
![ 犹豫没要微信](https://s11.ax1x.com/2023/03/17/ppGlZid.jpg)
![2022-10-12 可可爱爱没有脑袋](https://s11.ax1x.com/2023/03/16/pp34dpj.jpg)
![](https://s11.ax1x.com/2023/03/15/pp39iRI.jpg)

魔改适配

已适配Solitude主题，具体魔改教程可前往下方文章查看

Solitude魔改教程：iCat同款动态相册页
用照片来定格住最好的自己；是时光流逝的见证者，亦是记录者
]]> 经验分享 Butterfly主题 魔改记录 https://meuicat.com/posts/188958b4.html#disqus_thread 近况记事 - 11 https://meuicat.com/posts/b8f4fd90.html https://meuicat.com/posts/b8f4fd90.html Fri, 15 Dec 2023 12:18:07 GMT 2023年小结；记事碎碎念~ 刚在公众号上写完一篇“时光情书”，才想起月记还没动笔。原本是前段时间就该写了，奈何突然协会点名，让我加了好几天的班。
又快一年过去，博客里的碎碎念记已达二十四篇之多，其中大部分都是流水帐，毫无可读性。只是那时心里烦闷，找个地一吐为快。

从周篇再到现在的月篇，三万三千余字，随着心态慢慢平稳，也慢慢的将许多事情习惯性的收在心里，更多的是身边的朋友好像并不嫌弃我叨叨叨的说个不停。所以在往后的日子里，会不会变成季篇或者年篇，我也说不准，反正闲下来就写写记记，也是一种惬意。

作为我的阶段性过渡，白话文流水帐的意义并不大。
我的老师，老谢说过：“写作最重要的是要有主观思想”。所以很多时候往往是有感而发，就写进了给未来夫人的信里，我想，许多年后，这也是一份迟到且特殊的礼物。
十月始，至今已有十三篇，因为字写的丑，每写一封，都会打上电子档，同步到我的公众号上。对比博客里写的鸡零狗碎，这些信里跨越着我的一切，感受到的过去、现在又或是未来。

给未来夫人的信，我将它称为“时光情书”，需要跨越未知的时间，去等待一个属于它的人。
每一封都是我想说的话，念给你听，哄你入睡..

2023年就要结束啦~
本篇碎碎念也将是今年的最后一篇了，就写点不一样的吧，分为几个点来总结一下今年。

创业小记

六月，一场同学聚会上，老友相聚，命运的齿轮开始转动。老杨家里是做二手房东的，大学实习就在家里带人看房收租。
我打趣的问道：嘿，老杨，你这不是已经实习完毕业了吗？你还在家里收租啊？“我也不想的，但又不知道做什么，好烦。” 老杨的表情显得有些无奈，耸了耸肩深深叹了口气说道。

我想了想，好像现在大部分人都是如此，包括我自己。欢声笑语中，我们仿佛看到了生活中的一抹迷茫，也感知到了人生十字路口的彷徨。

我和老杨在学生时代就认识，那时的我还挺内向的，不爱说话。刚开始觉得挺烦的，因为她实在自来熟。
虽然第一印象不太好，那么久的相处，一同学习，家里离得也挺近，她常常等我一起走，说是一个人走不安全，我也不知道是谁不安全，碰到劫匪都能甩两拳的人，跟我说不安全。算是被她感染到了吧，自己的性格也慢慢的开朗起来。

那天晚上，送她回家的路上，我还是好奇的问道：当初那么多人，干嘛逮住我叭叭叭的。老杨依旧还在叭叭的嘴停顿了片刻“因为你长得好看，看的顺眼，没想到那么怂，好欺负”。
车窗边的绿树和五光十色的高楼飞驰而过，仿佛形成了一帧帧的跑马灯。

我追求完美，但是任何事情都没有绝对的完美而言，只有接近完美。所以我需要未雨绸缪，我可以等，但我需要提前准备好我上战场时所需要的一切，那么就需要先“纸上谈兵”，从纸上把公司开起来。
我和老杨的行动力是极强的，从第一个idea开始，到BP，再到实行、落地只用了不到三个月的时间。而一个好的idea要有一个好的BP去实现框架的发展，和运行布局了。

运气靠策划。

洛克菲勒曾说过的一段话：运气靠策划。我们必须要尽心策划运气，而策划运气，需要好的计划，好的计划一定是好的设计，好的设计一定能发挥作用。你需要知道，在构思好的设计时，要首先考虑两个基本条件，第一个条件是知道自己的目标，比如你要做什么，甚至你要成为什么样的人；第二个条件是知道自己拥有什么资源，如地位、金钱、人际关系，乃至能力。

这两个基本条件的顺序并非绝对不可改变，你可能先有一个构想、一个目标，才开始寻找适于这些资源的目标。还可以把它们混合到一起，形成第三和第四种方法，列如拥有某种目标和某种资源，为实现目标，你必须选择性的创造一些资源；也可能拥有一些资源和某个目标，你必须根据这些资源；提高或降低目标。

你根据资源调整目标或根据目标调整资源之后，就拥有了一个基础————可以据此构思设计的结构，剩下的东西就是用手段有时间去填充和等待运气的来临了。

这三个月以来开过数不清的会议，我们也是前瞻性的做出了很多利于当下乃至往后发展的措施，也很认真的讨论过我们俩应该做一些什么样的内容。具体的可以分为三个规划内容：发展规划 股权利益 阶段实收。

发展规划

发展规划包含着产品和业务、盈利模式还有竞品分析，我们将这个归纳为目前的重心，也随着当下及时调整侧重点。

在饱和的市场里分一杯羹，没有天时地利人和的情况下，难以登天。在做大学生市场这一类目行业，优势是在于我们毕业不久，有着几乎和大学生相同的心理和需求。

产品和业务

首先第一个就是要搞清楚产品和业务。那一定要清楚公司要做什么，定位是什么？针对这个市场的痛点又是什么？你有什么？
这里有一个项目描述的一个公式，一般就是说，产品的存在是针对某某某人群的，在这里趁机描述你针对人群的特点，就比如产品有什么医学上的特征或者是生活习惯上的特征，比如说是多少岁到多少岁，然后这个人群大概在全中国、全世界有多少产品，产品属于什么类别的，再加上你的核心卖点，也就是这个产品本身它有什么特色，然后再加上你这家公司和其他竞争对手的主要区别，然后最后呢就加上你的slogan，概念就升华了。

简单以我们为例代入示范就是，我们的产品是针对大学生人群的，该人群具有对新事物的好奇心和探索欲望，他们可能在进行穷游、实习或找工作过渡期间需要灵活、经济实惠的住宿选择的特征，年龄在18至25岁之间，广州天河范围内符合人数约为500余人。
产品属于住宿服务类别，主要卖点是我们旅社的年轻化氛围和多元化服务，与竞争对手主要区别是在于我们致力于提供更具社交性和灵活性的住宿体验。我们的旅社不仅是一个简单的住宿场所，更是一个可以促进交流、分享经验的社区，为大学生提供更多可能性和机会。
通过这一业务，我们公司想要达成的使命是成为本区校园大学生在短期内出行的首选住宿并口口相传的品牌。我们的Slogan是：“年轻·旅行·家”，以此表达我们的理念，希望成为大学生们在旅途中的温馨驿站，为他们提供舒适、便捷和充满活力的住宿体验。

盈利模式

通常盈利模式有两种，To B和To C，而我们现在主要接触的是To C群体，我们的现阶段的主要业务还是主抓青旅方面，因为快年底了，一些放假不回家，又或者想要在年前稍微出去玩玩的大学生们，刚好就有这个住宿需求。而我们主要的有两方面：住宿费用 定制服务费。
(主要也是为了打造一个良好的交友环境，可以让疲惫的旅人们放松放松心灵，不管在那都有家的感觉)

竞品分析

竞品分析有很多方面，一个是产品本身的竞品分析，一个是财务方面的竞品分析。

我们起初通过的市场调研来看，广州天河附近的青旅也好酒店也好，以及竞品前三的方案对比我们来看，我们并没有什么优势，但我们唯一的优势就是老杨在广州的大学同学多，那么这就是我们公司的一个优势。竞品第一的广旅属于中高端市场，服务较为专业，但较缺乏年轻化的社交体验。竞品第二的悦动注重社交活动，价格相对亲民，但设施和服务相对基础。那我们就靠着他们不要的客户群体，将这一小块蛋糕收入囊中。

股权利益

回溯到原本的身份。作为一个乙方公司的创业者，只是分享一些积累的小小的成功的经验，或者是踩过的坑。

我们从创业最开始，对我们很有思维上影响的一些书。我们看的第一本书叫 《企业融资》 和 《从天使投资到IPO》。第一个我们认为很有用的点就是股权分配。无论你的公司小或大都应该学会这条公式。大致的跟大家讲一下，那就是我们应该把我们的股份分为四个层面。

股权分配

第一个股叫 创始人原创股，给idea了。我们这个时代一定是要尊重idea。一个好的idea能把一群人聚到一起之先，用想法领亮了一盏灯展灯，吸引来一群人点亮这种灯的人，他会拿到这个原创股。这个原创股一般是要给到 25%-30%。接下来呢我拿着这个idea去跟很多我的朋友聊了，聊完之后我从中筛出两个人，一共三个人组成了team。
这个时候呢会划分出一个股份，叫做 发起人身份。因为你只产生一个idea，还不算发起人，也只是个创始人。这三个人属于桃园结义了，他们三个人对外的身份就是这家公司的发这个身份。这个身份股一般呢是在总股份里面给到 10% 左右的一个比例，并且平分到每个人身上。
接下来呢就是最重要的一个东西了，金额股。金额股呢又不应该是占比最高的那个股份。因为这三个合伙人又当股东、又当投资人、又当员工的这个时间阶段，其实钱它没有想象中那么那么重要。这样的比例一般是要在 20%-25% 左右。
接下来就是比原创、比发起人、比资金都要重要的一个股份的分配，那就是岗位贡献股。前面我们说了嘛，钱不是那么的重要。那什么最重要？其实就是这个时候你能不能出工、出力这件事情是最重要的。明天开始谁来上班？那来到工位之上你负责什么？你擅长什么？你有什么资源，谁能给公司带来更高的收益，谁就应该占的股份更多。

总结一下，其中25%到30%给到创始人，其中10%给到发起人身份股，那其中不超过25%的股份给到金额股，然后35%到40%的股份比例给到岗位贡献。如果是三人合伙，其中一个是创始人，这三个人在钱贡献等等方面都是平分的话，那每个人会得到的股份大约就是53.3%，23.35%和23.35%。其中创始人债股超过50%，有相对控制权。

我们开设两家公司，A公司和B公司，老杨为 创始人，拥有者A公司的50%最大控股权和B公司的30%合同控股权，其余两位合伙人分别为40%和10%的干事控股权。
关于法人这个问题，一定一定要慎重，如果公司哪天出事了，那么法人就是一时间被传的，所以法人和实际控制人一定要区分开，实际控制人可以在外运作，但法人却不能，这个点真的很重要。

退出机制

最后就是非常有用的要点就是退出机制。当事情不赚钱或者已经赚到钱的时候，你得想到怎么让这个钱从公账里来到自己的兜里。所以要立好一条线，就比如你退出的条件是怎么样的，或者说啊我亏损了，我亏损到怎样的程度了，那我退出了不能继续再往下退了，大家也要先聊好这条线。
比如说有另一个股东想你退出，这时候你们可以拍把你的股份卖给他。还有一种就是最惨的，就是叫破产清算，就是你的公司已经被迫资不抵债了。这种情况下需要清算资产就把你的电脑啊，把你用公司名义买的汽车全部清算卖掉。

生活与工作

漩涡的中心，我的脑袋是混乱的，我根本无法分析。我想是已经到了深渊的最里面了。
有失眠、自我检讨、自我消耗、自我批判，一直回想过去，醒着的每一刻都在将我推入痛苦里。也许我在很早的某些时候就已经预知了将会发生这样的事，可我无动于衷。只是一味的责怪自己喜欢逃避问题，不上进。
朋友有劝过我好好吃药定期复查。从半颗的药量加到一颗半，吃了三个月。我只是越吃越内心烦躁越压抑，每一天觉得人生很没有意义。但这个药的副作用却能很好地帮助我入睡，每天睡醒之后已经过了大下午了。我也没有力气出去走走，没有力气去做事情，依旧一直复盘自己，责怪自己。看了那些得了抑郁症焦虑症的文章，我还觉得自己好过一点，找到内心的平衡和平静。

那些人和我说要念佛要正面思考，要懂得感恩。我真的当他们说废话，因为我内心太痛苦了，我不想去接受这些。

说实话，我的生活又或是生命里其他的东西都是狭隘的，一时间我不知道该怎么描述我内心的困境，事实上我这个知识结构也好，还是文字储备也好都没有办法准确的表达出这些问题。
除了对青春逝去非常狭窄的抒情，其他的便什么都没有了。这难道不是狭隘么。

我今年一直在思考的一个问题。
我们从出生就一直是危险的，几岁的时候担心各种疾病又或是幼小的生命会被无情夺去。熬过了最脆弱的那几年，开始上学。各类考试，期中、期末、中高考。就像一关一关的闯，带着目的的去做着什么，哪怕这件事是最喜欢的、最讨厌的也要去做。

我想体验的人生不是这样的，我天性带来的是儿时有很多玩具或者有很多属于自己的时间，有属于自己的一片小天地。上学也可以有大把时间出去玩，去看山里的树和落叶，看各种城市看不到的东西。看天上的云和水里的鱼。下了班可以去看电影，去买自己喜欢的食物。

就似总是追求结果和抱着一个目的，可是最后往往得不到自己想要的答案。
在愚蠢的生活中跨过再跨过，在迷茫中拾起一些东西又再丢掉一些。

偶然点开沉静多年的收藏夹，一个个地点路线显得特别刺眼。
于是我开始丢掉撬开身上的枷锁，迈步走向心中的小世界。今年走过的地方并不多，二十三趟旅程，有人间繁华，有人间烟火，也有生命真谛。时常怀抱孤独又没办法寂静忍受孤独，并且也是一个极其无聊的人。思维好像游离在宇宙边缘，在一个黑洞洞的漩涡里，也在一个没有引力的空间里飘荡。眼前的人间烟火仿佛与我无关，熙熙攘攘的人群也与我不是一个方向。

我意识到没有事物可以永存，包括记忆也会在不久的将来随着死亡而消逝。举起了相机，将眼前所见、所感受到的一切记录到二维层次里。
站在世界的喧嚣里，人群的欢呼声里，在被多巴胺分配的时刻里我才觉得世界所有的都像是锦上添花。被束缚的思维得到了释放，心里的萌芽在悄然生长。

或许，当你见过高山的巍峨、沙漠的广阔，体会到天地的无垠，你就会变得谦逊；当你见识过不同的风土人情，你就会发现这世上有无数种生活。人只有阅过山河、见过湖海，才能拓宽视野、增长智慧，看到人生更多的可能性。

今年初，我意识到我不能停下来，我需要工作来填补我所空缺的那部分，其余的就交给朋友和旅行。我没有去察觉，我只知道我工作很忙，忙到一下班倒头就睡，忙到很多私人的事情都忽略了。断药的这段时间，除了脾气炸一些外，失眠、胃口差、恶心、心跳加快、呼吸紧张这些倒没有呈现出来。

朋友引荐推荐的摄影协会，氛围和会员们对我不断地认可，使我心态从濒临破碎的边缘拉回。我很喜欢这个地方，至于有多喜欢，可能早在潜意识里将此当做了第二个家。
我不爱被胶片留下身影，以至于从小到现在都没有几张照片，也可能是容貌焦虑搞的鬼。但在我用相机快门按下的那一刻，感光原件记录了那零点几秒的光影。瞬息而变的时间，变成了永恒。我无法拍到过去，也无法拍到未来，但却可以记录当下，留给未来。
贾宝玉说女儿是水做的骨肉，所以女孩子总是有不同的美。同样的地方，不同的时间，也会有不同的景色。不同的景色在不同的人眼里也是那么不同。
所以摄影的意义是在于记录，也在于分享。我借你的眼睛，看这世间万物。

我生命的礼物可能会是我的救命稻草也可能是一副苦药。

很难想象，仅仅一年时间，再看向所有事物时更为通透了，仿佛再也没有从前那些稚嫩憧憬的想法，共情能力也荡然无存，我不知道这是不是自私。
我们将终其一生，寻找两个东西，一个是价值感，一个是归属感，价值感来着被肯定，而归属感来自被爱，我崇拜生命里的真诚，喜欢岁月验证过的友谊，敬仰与人为善的知己，更感恩生命里不离不弃的任何人。
人总要静下来，过一段宁静又自醒的日子，整理自己沉淀再沉淀，去成为温柔而强大。

至于其他，有则锦上添花，无则依旧风华。

]]> 生活随笔 封の唠叨 https://meuicat.com/posts/b8f4fd90.html#disqus_thread 微信公众号：Ai大模型让回复更具智能化 https://meuicat.com/posts/3609a3d2.html https://meuicat.com/posts/3609a3d2.html Mon, 27 Nov 2023 16:55:43 GMT 零基础，快速将大模型接入你的微信公众号，支持GPT-3.5，GPT-4，讯飞星火，文心一言！ 前言

前段时间逛GitHub刷到一个项目：chatgpt-on-wechat，特别有意思。使用大模型搭建微信聊天机器人，基于 GPT3.5/GPT4.0/Claude/文心一言/讯飞星火/LinkAI，支持个人微信、公众号、企业微信、飞书部署，能处理文本、语音和图片，访问操作系统和互联网，支持基于知识库定制专属机器人。

简单来说就是，利用这些平台的Api接口实现，微信机器人以及公众号智能回复的功能。

正好想起之前听说星火有提供体验包，就打算接上我那个人公众号试试。效果还不错，可以多个模型切换，管理模式等等，并且带关键词回复（和配置），原本的功能也不会丢失。
使用体验方面，除了感觉有点延迟之外，也不知道是程序上的问题，还是我用的是测试机比较拉胯（服务器121配置），其他方面倒没有碰到过什么问题了。

chatgpt-on-wechat

ChatGPT近期以强大的对话和信息整合能力风靡全网，可以写代码、改论文、讲故事，几乎无所不能，这让人不禁有个大胆的想法，能否用他的对话模型把我们的微信打造成一个智能机器人，可以在与好友对话中给出意想不到的回应，而且再也不用担心女朋友影响我们 打游戏 工作了。

功能支持

截稿前（23.11.28），最新版本支持的功能：

  • 多端部署：有多种部署方式可选择且功能完备，目前已支持个人微信、微信公众号和、业微信、飞书等部署方式
  • 基础对话：私聊及群聊的消息智能回复，支持多轮会话上下文记忆，支持 GPT-3.5, GPT-4, claude, 文心一言, 讯飞星火
  • 语音能力：可识别语音消息，通过文字或语音回复，支持 azure, baidu, google, openai(whisper/tts) 等多种语音模型
  • 图像能力：支持图片生成、图片识别、图生图（如照片修复），可选择 Dall-E-3, stable diffusion, replicate, midjourney, vision模型
  • 丰富插件：支持个性化插件扩展，已实现多角色切换、文字冒险、敏感词过滤、聊天记录总结、文档总结和对话等插件
  • Tool工具：与操作系统和互联网交互，支持最新信息搜索、数学计算、天气和资讯查询、网页总结，基于 chatgpt-tool-hub 实现
  • 知识库：通过上传知识库文件自定义专属机器人，可作为数字分身、领域知识库、智能客服使用，基于 LinkAI 实现

部署方式

运行方式需要的资源优势劣势
Docker部署服务器 + docker环境不用关心python环境和依赖插件配置稍麻烦
本地运行个人机器 + 本地代理 + python环境方便本地代码调试不适合长时间稳定运行
服务器部署服务器 + python环境方便配置和源码修改、稳定运行需要简单的linux基础
Railway部署一个超过半年的github账号一键部署免费额度有限，插件等高级功能使用不便

值得注意的是，公众号目前只支持 服务器 和 docker 环境部署，不支持railway及本地部署。

效果预览

当然了，你也可以前往下方微信公众号：亦小封，进行回复体验~

亦小封 | 微信公众号
一个不太称职的科技博主日常生活记录，专注于网络产品设计、视觉摄影艺术的层次追求。还有就是一些发疯文章啦！

部署教程

本篇教程只提供 服务器部署 方案，为实机实装步骤。更多部署方式可参考：项目文档 - 程序部署

  1. 准备一个微信公众号（订阅号/服务号），以及一台Linux的服务器

  2. 前往 讯飞星火认知大模型 注册账号，并进行实名认证。（当然了，也可以使用文心一言或者ChatGPT等等，即可。）

讯飞星火认知大模型
讯飞星火认知大模型，是由科大讯飞推出的新一代认知智能大模型，拥有跨领域的知识和语言理解能力，能够基于自然对话方式理解与执行任务，提供语言理解、知识问答、逻辑推理、数学题解答、代码理解与编写等多种能力。
  1. 在 星火大模型V3.0 处进行点击立刻购买，选择个人认证的免费保进行下单。回到页面后，记下APPID、APISecret、APIKey的值，后面需要用到。（注意这些内容不可重置，所以勿轻易泄露。）

  1. 检查你的服务器Python版本是否在 3.7.1~3.9.X 之间，推荐3.8版本，如果满足条件则可跳过第5、6步骤。

  2. 根据以下内容，逐步进行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
yum install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline-devel tk-devel gcc make libffi-devel
#安装依赖包

yum install wget
#安装wget

wget https://www.python.org/ftp/python/3.8.1/Python-3.8.1.tgz
#下载源码包

tar -zxvf Python-3.8.1.tgz
#解压压缩包

cd Python-3.8.1
#进入文件夹

./configure prefix=/usr/local/python3
#配置安装位置

make && make install
#安装make
  1. 配置软连接。
1
2
3
4
sudo rm /usr/bin/python3

ln -s /usr/local/python3/bin/python3.8 /usr/bin/python3
#添加python3的软链接
  1. 进入宝塔创建站点，然后在站点设置的 反向代理 进行添加你所需要映射的端口，写法为：127.0.0.1:端口号
  1. 在FinalShell上，进入该站点的根目录处，也就是所示的：/www/wwwroot/ai。接着逐步执行下方内容。
1
2
3
4
5
6
7
8
cd /www/wwwroot/ai
#进入站点根目录

git clone https://github.com/zhayujie/chatgpt-on-wechat
#拉取项目源码

pip3 install --upgrade pip
#更新下pip版本
  1. 进入后拉取项目代码，再到宝塔的站点文件处将拉取到的 chatgpt-on-wechat 文件夹内所有的文件移动到站点的根目录。

  1. 根据以下内容，逐步进行。
1
2
3
pip3 install -r requirements.txt
pip3 install -r requirements-optional.txt
#安装依赖

  1. 登录微信公众号，找到设置与开发里的 基本配置 选项，进行开通后，会得到开发者的 AppID 和 AppSecret，将其记下，后面需要用到。

  2. 在宝塔内，站点根目录处新建 config.json 文件，配置好下边的东西，放进去。

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
{
  "open_ai_api_key": "没用，但是别删",
  "model": "xunfei",
  "xunfei_app_id": "星火APPID",
  "xunfei_api_secret": "星火APISecret",
  "xunfei_api_key": "星火APIKey",
  "channel_type": "wechatmp",
  "wechatmp_app_id": "公众号开发者AppID" ,
  "wechatmp_app_secret": "公众号开发者AppSecret" ,
  "wechatmp_aes_key": "",
  "wechatmp_token": "meuicat",
  "wechatmp_port": 2170,
  "proxy": "",
  "hot_reload": false,
  "single_chat_prefix": [""],
  "single_chat_reply_prefix": "🤖 MeuiCat Ai：\n\n",
  "image_create_prefix": [
    "画",
    "看",
    "找"
  ],
  "speech_recognition": false,
  "group_speech_recognition": false,
  "voice_reply_voice": false,
  "conversation_max_tokens": 2500,
  "expires_in_seconds": 3600,
  "character_desc": "你是ChatGPT, 一个由OpenAI训练的大型语言模型, 你旨在回答并解决人们的任何问题，并且可以使用多种语言与人交流。",
  "temperature": 0.8,
  "top_p": 1,
  "subscribe_msg": "哈喽~你终于来啦~\n这里是小封的瞎捣鼓频道~\n本公众号已接入Ai对话功能，注意文明发言哦~\n\n谢谢你长得好看，又关注我呀~\n祝你天天开心~",
  "use_linkai": false,
  "linkai_api_key": "",
  "linkai_app_code": ""
}
类型释义
model我这使用的是讯飞的星火大模型 xunfei，可配置为：gpt-3.5-turbo、gpt-3.5-turbo-16k、gpt-4、wenxin、xunfei
channel_type订阅号填：wechatmp；而服务号则填：wechatmp_service，但是要确保开通了客服接口
wechatmp_token设置一个你自己的秘钥，必须为英文或数字，长度为3-32字符。后面需要用到。
wechatmp_port此处填写第七步所填写的端口号，在不冲突的前提下，任意数值皆可，但注意需要在安全策略放行改端口。
  1. 当然，你也可以在 config.json 配置多个模型以便切换。
1
2
3
4
5
6
"open_ai_api_key": "",
#chatgtp

"baidu_wenxin_api_key": "",
"baidu_wenxin_secret_key": "",
#文心一言
  1. 在站点根目录下，逐步执行以下命令，启动运行。
1
2
3
touch nohup.out
nohup python3 app.py & tail -f nohup.out
#运行成功后，可以 Ctrl+C 退出日志

  1. 正常运行后，来到微信公众号后台的 基本配置 选项，将你的服务器公网地址填进 IP白名单 内。

  2. 接着在 服务器配置 处修改配置，依次填写URL、Token、EncodingAESKey，消息加解密方式选择明文，提交即可。

类型释义
URL如果绑定了域名，那此处就为：你的域名/wx；如果没有绑定域名，则为：http://你的公网ip/wx。
Token此处填写第十二步 wechatmp_token 的值。
EncodingAESKey点击随机生成即可。
  1. 至此，大功告成！可以前往公众号里体验了~

进阶教程

当修改了 config.json 时，也可以在公众号里进行管理身份认证直接进行重载配置、切换模型等操作。

管理认证

  1. 在公众号内进行发言，在日志处可以看到用户身份id，复制下来。

  1. 打开宝塔，进入 [站点根目录]/plugins/godcmd/config.json 文件，进行配置身份和密钥。
1
2
3
4
{
    "password": "你的密钥",
    "admin_users": ["用户身份id"]
}
  1. 关闭进程后，重新运行。
1
2
3
4
5
6
7
8
ps -ef | grep app.py | grep -v grep
#查看进程id

kill -9 进程id
#关闭进程

nohup python3 app.py & tail -f nohup.out
#重新运行项目

管理命令

类型释义用法
help帮助文档。#help 或 #help 插件名
auth管理身份验证。#auth 密钥
reconf重载配置，修改完配置后可以通过命令进行重载。#reconf
model查看或切换模型#model 可查看当前模型和模型列表；#model 模型名称 可切换使用该模型。

关键词

  1. 打开宝塔，进入 [站点根目录]/plugins/keyword/config.json 文件，进行配置。
1
2
3
4
5
6
{
  "keywords": {
    "hello": "Hello, Welcome to iCat.",
    "爱吃肉的猫": "我是一款基于星火大模型3.0的智能回复助手，这是我的开发者：亦小封，以及他的博客：爱吃肉的猫（meuicat.com），你可以直接给我发送你想知道的问题，我相信能给到你满意的答复！"
  }
}
  1. 关闭进程后，重新运行。

参考文献

chatgpt-on-wechat | GitHub
Wechat robot based on ChatGPT，which using OpenAI api and itchat library.
chatgpt-on-wechat | 项目文档
Wechat chatgpt-on-wechat (cow) 项目是使用 ChatGPT 搭建的智能聊天机器人，在GPT3.5/4.0 API 及 itchat框架的基础上实现，支持个人微信、公众号、企业微信部署，能生成文本、语音和图片，访问操作系统和互联网。
LinkAI
LinkAI是一站式的AI应用平台，聚合文本、语音、图像等多模态基础模型，在此基础上提供知识库定制化、Agent插件等增强能力，基于开源生态和开放接口快速完成应用接入。
]]> 经验分享 Docker AI 微信公众号 https://meuicat.com/posts/3609a3d2.html#disqus_thread 近况记事 - 10 https://meuicat.com/posts/cff3cd06.html https://meuicat.com/posts/cff3cd06.html Thu, 09 Nov 2023 21:33:10 GMT 天外来物要结束啦；月更记事碎碎念~ 早，现在是凌晨五点，不是一晚上没睡，而是昨晚又是不到九点就躺着睡着了
最近这一个星期都很怪，早睡，又早醒，想多睡一会都没有睡意。可能是习惯了只睡六七个小时，梦做到一半就醒了，很是无语…

“每个男孩都有一个机车梦，所以别把青春插稻秧，黑丝哪有压弯香
虽然今年六月份的时候，第一次骑朋友的车就摔了，我人没多大事，车倒是摔损了几个零配件，算我命大些。但机车梦不死，我仍是少年！

上个月被朋友拉着重新碰起了机车，老蹭别人的车，心里难免痒痒，怎么着也得搞一辆自己的吧（我爹：怎么有种不好的预感？）。DUCATI 939，我人生第一辆机车

对比了很多个品牌，单纯只是被这一辆车的颜值所吸引，很独特。即使是多年前的老车型，看对眼了，也减轻不了在心里占据的位置，即使是当时959的老大哥又或者现在同类的950
Panigale超跑风，把这个来自意大利经典品牌的个性和运动外观进行了完美融合。而且在当年的意大利米兰车展上，杜卡迪939也一举拿下了最美车型！并不需要动辄万转以上才能爆发的最大功率和扭矩，只要你上了6000转动力输出就已经能感受到这台车的魅力

“下班后的兜风是回收快乐的时候，尤其兜的是周六的晚风
带好头盔，插上钥匙打着火，戴上耳机，把音量调到最大，开启降噪
俯下身，轻拧油门，耳机里是夏日入侵的企划

跟随着音乐的节奏，在加速与刹车之间来回切换。我喜欢在车流里穿梭的感觉，更喜欢这追风的姿态，有点年轻的不知所谓

开车专属bgm | 网易云音乐
跟 亦小封 一起欣赏更多音乐

前两月，老杨给我发了条消息称组织了一些三五好友，打算来个同学聚会。聚会上看到久违谋面的老同学，我看某些人都已经情绪失控了
和这群老友的聚会依然和以前一样简单，我们都在相互诉说着世道的不易，羡慕着已经先我们一步结婚生子的幸运同龄人，就像老刘今年喜得千金一样

散场后，送老杨回家的路上，我们相聊甚欢，聊人生，聊理想，聊当下，随后一拍即合，开公司
当时是脑子一热就拍板，拉着另外几个臭味相投的朋友就开始干了，即使是做什么，往哪个方向发展都还没想好
随后的一个月里，我们大大小小的会议里，几十次头脑风暴，划出了最基本的架构，接着就是实干了

从市场调研分析上来看，现如今社会上，大学生校园还是很有市场的，所以我们规划了两个部分和方向，老杨主导做青年旅舍和校园易购，我主导摄影、电商和技术支持
老杨在广州的房子改造成青旅，由于老杨是女生，所以这个青旅对外只向女性朋友开放。全新装修、免费24小时pal空调、额外定制、靠近地铁口
而周日至周五的晚上我们会到广州的几所大学附近摆摊。我们主抓女生的消费群体，售卖一些精致的饰品和手机壳。我们主抓女性心理，拍照、写真则是女生们必不可少的一个环节，试问有哪个女生买了好看的喜欢的东西，戴上了不想拍个美美的照片呢？这时，我则是在另一个摊位，负责给“留住夏天”拍照
可以说这一些都只是试点，给公司引流，饰品和手机壳我们在网上有做淘宝和亚马逊，而拍照则是为了宣传大学生们来拍写真

十月上旬，安己科技，不断自我提升和发展，追求个人成长和成功，爱人先爱己

“千万不要安于现状，舒适圈会让人停止前行
后面跟小谭聊天，得知他们公司12月份要搬到龙岗，他不准备跟过去，而他也准备转行。说实话，我看到这个真的挺欣慰的，以前老听他说想转行想转行的，一问就说没机会，这下正好可以让他选择了
小谭的原话：家里面的人就说，让我放心大胆的出去闯闯，反正他们现在还年轻，可以在背后撑着，哪怕是失败了也不怕
吃亏没关系，被社会鞭打也没关系，但父母的爱会温暖一切，父母的支持是孩子的最大底气

写给未来夫人的信 No.3
自由和爱，我会毫不犹豫选前者

今年的双十一从10月23号就开始了，明天就是最后一天，我们也是响应了一下平台的规则和玩法，大促时间轴、满减力度、补贴code以及浅、爆品横幅做了优化措施。老杨虽然也在努补这些知识，但也属于是临阵磨枪了。今年速卖通玩的是赛马规则，不然真抢不到我们想要的流量
而我做了两方的打算，双十一我们要做，但双十一的余热我们也要搞好，新店铺对于双十一肯定是比不了那些老店铺的，销量也就一般般，而双十一过后通常都会进入一个“疲软期”，后面的销量肯定也会有个急剧的下滑
虽然我们这小团体里面没有主攻电商方面的人，但是也免不了我们可以集思广益啊，一个接一个的头脑风暴
当然了，我们主要看紧的还是亚马逊，快到黑五和网一，很多卖家都提高了广告bid，提前冲排名和位置。广告竞价直接翻了几倍，真的要吐了..虽然说卖家精灵BSR的top日单波动不大…

千叮咛万嘱咐老杨各种事宜，并安排完线上的工作后，便开始了我今年最后一趟旅程
刚到南京时，恰巧是万圣节。在欢乐谷，就日常穿着的我，显得非常格格不入。逛了四个鬼屋，走快速通道玩了几个游乐项目，转的我头晕，对游乐场实在不感兴趣（可能是一个人玩起来没意思）。有一说一，万圣节这个主题略感失望，没有上海万圣节有意思 😐

题外话：
推荐一家店 3 coffee，叁咖啡，地址是：南京市鼓楼区上海路82-1 号
特别适合拍照、打卡，室内每个地方都特别有设计性，出片率嘎嘎高。主要是东西也很好喝
绝对不是广告！是真安利~ 以后青团的影展有机会考虑这地方，在南京的喵友们说不定我们还会碰面呢

奔着老薛巡演去的成都，连续看了两场老薛（1104实在抢不到票，买的是黄牛，我有罪..）
这两日我感受到前所未有的“梦幻”，可以睡到自然醒，睡醒后去找好吃的，打卡一些被推荐的地方，晚上再慢悠悠的去看老薛
这样的日子太舒服了，舒服到让我有那么一瞬间，感到十分恐惧，害怕自己又沉醉于这样的生活，无法自拔

成都火锅真的吃不完，根本吃不完，好吃的东西太多了，真的想全吃一遍。而且成都的驻场真的太有感觉了，我大爱Live
总结，美食多且好吃，妹子多且好看，整起！

现在我所在的地方是湖北省黄冈市红安县，是本次旅程的最后一站
这个地方很美，有山岳风光、有人间烟火、有历史沿革，我用心感受着，体验着，青砖黑瓦、木格窗户、木板门扇，多姿多彩的人文历史，造就了这方水土的与众不同
曾无数次想来到这个城市，现如今踏上这个地方时却是一种结束。站在那个路口上，我遥望四周，感受着曾经想感受的一切。看着那个她有可能生活过的地方，黯然失色
说好一起回来看外公的，不过没关系，我来了..

天外来物，和曾经的女孩
都结束啦～

]]> 生活随笔 封の唠叨 https://meuicat.com/posts/cff3cd06.html#disqus_thread PWA：让你的网站变成桌面应用APP https://meuicat.com/posts/e0534e44.html https://meuicat.com/posts/e0534e44.html Fri, 27 Oct 2023 16:05:22 GMT PWA 全称为Progressive Web App，中文译为渐进式Web APP，其目的是通过各种 Web 技术实现与原生 App 相近的用户体验 前言

下班后闲来无事，博客的也完善的差不多了，便想着逛逛大佬们的博客寻求下新灵感，突然在@张洪heo那里看到一篇 让网页支持iOS添加到主屏幕全屏应用，webapp启动图生成工具 的文章
Butterfly原生的PWA配置比较精简，在某些方面的适配会有些问题，本站就一直没有启用PWA。洪哥这完善的PWA模块刚好可以弥补原生的问题，对于离线又或是响应来说，这最适合不过了

本篇内容在洪哥提供的PWA模块为基础下，删减、修改了一小部分内容，并提供了一份ejs的写法

PWA

PWA 全称为 Progressive Web App，中文译为渐进式 Web APP，其目的是通过各种 Web 技术实现与原生 App 相近的用户体验

纵观现有 Web 应用与原生应用的对比差距，如离线缓存、沉浸式体验等等，可以通过已经实现的 Web 技术去弥补这些差距，最终达到与原生应用相近的用户体验效果

类型
 描述
PWA特性
安全可靠使用 Service Work 技术实现即时下载，当用户打开应用后，页面资源的加载不再完全依赖于网络，而是使用 Service Work 缓存离线包存在本地，确保为用户提供即时可靠的体验
访问更快首屏可以部署在服务端，节省网页请求时间，加载速度更快，拥有更平滑的动态效果和快速的页面响应
响应式界面支持各种类型的终端和屏幕
沉浸式体验在支持 PWA 的浏览器和手机应用上可以直接将 Web 应用添加到用户的主屏幕上，无需从应用商店下载安装。从主屏幕上打开应用之后，提供沉浸式的全屏幕体验
PWA功能
手机应用配置(Web App Manifest)可以通过 manifest.json 文件配置，使得可以直接添加到手机的桌面上
离线加载与缓存(Service Worker+Cache API)可以通过 Service Worker + HTTPS +Cache Api + indexedDB 等一系列 Web 技术实现离线加载和缓存
消息推动与通知(Push&Notification)实现实时的消息推送与通知
数据及时更新(Background Sync)后台同步，数据及时更新

魔改教程

  • 将 [blogRoot]/themes/butterfly/layout/includes/head/pwa.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
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
link(rel="manifest" href=url_for(theme.pwa.manifest))
if(theme.pwa.theme_color)
  meta(name="msapplication-TileColor" content=theme.pwa.theme_color)
if(theme.pwa.mask_icon)
  link(rel="mask-icon" href=url_for(theme.pwa.mask_icon) color="#5bbad5")

if(theme.pwa.apple_touch_icon) 
  link(rel="apple-touch-icon" sizes="180x180" href=url_for(theme.pwa.apple_touch_icon))
  link(rel="apple-touch-icon-precomposed", sizes="180x180", href=url_for(theme.pwa.apple_touch_icon))
if(theme.pwa.favicon_32_32) 
  link(rel="icon" type="image/png" sizes="32x32" href=url_for(theme.pwa.favicon_32_32))
if(theme.pwa.favicon_16_16)
  link(rel="icon" type="image/png" sizes="16x16" href=url_for(theme.pwa.favicon_16_16))
if(theme.pwa.bookmark_icon)
  link(rel="bookmark", href=url_for(theme.pwa.bookmark_icon))

if(theme.pwa.startup_image_enable)
  if(theme.pwa.favicon_2048_2732)
    link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_2048_2732), media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)")
  if(theme.pwa.favicon_2732_2048)
    link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_2732_2048), media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)")
  if(theme.pwa.favicon_1668_2388)
    link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_1668_2388), media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)")
  if(theme.pwa.favicon_2388_1668)
    link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_2388_1668), media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)")
  if(theme.pwa.favicon_1536_2048)
    link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_1536_2048), media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)")
  if(theme.pwa.favicon_2048_1536)
    link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_2048_1536), media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)")
  if(theme.pwa.favicon_1668_2224)
    link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_1668_2224), media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)")
  if(theme.pwa.favicon_2224_1668)
    link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_2224_1668), media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)")
  if(theme.pwa.favicon_1620_2160)
    link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_1620_2160), media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)")
  if(theme.pwa.favicon_2160_1620)
    link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_2160_1620), media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)")
  if(theme.pwa.favicon_1290_2796)
    link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_1290_2796), media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)")
  if(theme.pwa.favicon_2796_1290)
    link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_2796_1290), media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)")
  if(theme.pwa.favicon_1179_2556)
    link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_1179_2556), media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)")
  if(theme.pwa.favicon_2556_1179)
    link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_2556_1179), media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)")
  if(theme.pwa.favicon_1248_2778)
    link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_1248_2778), media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)")
  if(theme.pwa.favicon_2778_1248)
    link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_2778_1248), media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)")
  if(theme.pwa.favicon_1170_2532)
    link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_1170_2532), media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)")
  if(theme.pwa.favicon_2532_1170)
    link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_2532_1170), media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)")
  if(theme.pwa.favicon_1125_2436)
    link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_1125_2436), media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)")
  if(theme.pwa.favicon_2436_1125)
    link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_2436_1125), media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)")
  if(theme.pwa.favicon_1242_2688)
    link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_1242_2688), media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)")
  if(theme.pwa.favicon_2688_1242)
    link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_2688_1242), media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)")
  if(theme.pwa.favicon_828_1792)
    link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_828_1792), media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)")
  if(theme.pwa.favicon_1792_828)
    link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_1792_828), media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)")
  if(theme.pwa.favicon_1242_2208)
    link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_1242_2208), media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)")
  if(theme.pwa.favicon_2208_1242)
    link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_2208_1242), media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)")
  if(theme.pwa.favicon_750_1334)
    link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_750_1334), media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)")
  if(theme.pwa.favicon_1334_750)
    link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_1334_750), media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)")
  if(theme.pwa.favicon_640_1136)
    link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_640_1136), media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)")
  if(theme.pwa.favicon_1136_640)
    link(rel="apple-touch-startup-image", href=url_for(theme.pwa.favicon_1136_640), media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)")
ejs写法
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
<meta name="theme-color" content="<%- theme.pwa.theme_color %>">
<link rel="manifest" href="<%- theme.pwa.manifest %>">
<% if (theme.pwa.theme_color) { %><meta name="msapplication-TileColor" content="<%- theme.pwa.theme_color %>"><% } %>
<% if (theme.pwa.mask_icon) { %><link rel="mask-icon" href="<%- theme.pwa.mask_icon %>" color="<%- theme.pwa.theme_color %>"><% } %>
<% if (theme.pwa.apple_touch_icon) { %><link rel="apple-touch-icon" sizes="180x180" href="<%- theme.pwa.apple_touch_icon %>">
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="<%- theme.pwa.apple_touch_icon %>">
<meta name="apple-mobile-web-app-title" content="<%= config.title %>"><% } %>
<% if (theme.pwa.favicon_16_16) { %><link rel="icon" type="image/png" sizes="16x16" href="<%- theme.pwa.favicon_16_16 %>"><% } %>
<% if (theme.pwa.favicon_32_32) { %><link rel="icon" type="image/png" sizes="32x32" href="<%- theme.pwa.favicon_32_32 %>"><% } %>
<% if (theme.pwa.bookmark_icon) { %><link rel="bookmark" href="<%- theme.pwa.bookmark_icon %>"><% } %><% if (theme.pwa.startup_image_enable) { %>
<% if (theme.pwa.favicon_2048_2732) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_2048_2732 %>" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"><% } %>
<% if (theme.pwa.favicon_2732_2048) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_2732_2048 %>" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"><% } %>
<% if (theme.pwa.favicon_1668_2388) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_1668_2388 %>" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"><% } %>
<% if (theme.pwa.favicon_2388_1668) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_2388_1668 %>" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"><% } %>
<% if (theme.pwa.favicon_1536_2048) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_1536_2048 %>" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"><% } %>
<% if (theme.pwa.favicon_2048_1536) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_2048_1536 %>" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"><% } %>
<% if (theme.pwa.favicon_1668_2224) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_1668_2224 %>" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"><% } %>
<% if (theme.pwa.favicon_1668_2224) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_1668_2224 %>" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"><% } %>
<% if (theme.pwa.favicon_1620_2160) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_1620_2160 %>" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"><% } %>
<% if (theme.pwa.favicon_2160_1620) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_2160_1620 %>" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"><% } %>
<% if (theme.pwa.favicon_1290_2796) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_1290_2796 %>" media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"><% } %>
<% if (theme.pwa.favicon_2796_1290) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_2796_1290 %>" media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"><% } %>
<% if (theme.pwa.favicon_1179_2556) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_1179_2556 %>" media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"><% } %>
<% if (theme.pwa.favicon_2556_1179) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_2556_1179 %>" media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"><% } %>
<% if (theme.pwa.favicon_1248_2778) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_1248_2778 %>" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"><% } %>
<% if (theme.pwa.favicon_2778_1248) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_2778_1248 %>" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"><% } %>
<% if (theme.pwa.favicon_1170_2532) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_1170_2532 %>" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"><% } %>
<% if (theme.pwa.favicon_2532_1170) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_2532_1170 %>" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"><% } %>
<% if (theme.pwa.favicon_1125_2436) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_1125_2436 %>" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"><% } %>
<% if (theme.pwa.favicon_2436_1125) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_2436_1125 %>" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"><% } %>
<% if (theme.pwa.favicon_1242_2688) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_1242_2688 %>" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"><% } %>
<% if (theme.pwa.favicon_2688_1242) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_2688_1242 %>" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"><% } %>
<% if (theme.pwa.favicon_828_1792) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_828_1792 %>" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"><% } %>
<% if (theme.pwa.favicon_1792_828) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_1792_828 %>" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"><% } %>
<% if (theme.pwa.favicon_1242_2208) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_1242_2208 %>" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"><% } %>
<% if (theme.pwa.favicon_2208_1242) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_2208_1242 %>" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"><% } %>
<% if (theme.pwa.favicon_750_1334) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_750_1334 %>" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"><% } %>
<% if (theme.pwa.favicon_1334_750) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_1334_750 %>" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"><% } %>
<% if (theme.pwa.favicon_640_1136) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_640_1136 %>" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"><% } %>
<% if (theme.pwa.favicon_1136_640) { %><link rel="apple-touch-startup-image" href="<%- theme.pwa.favicon_1136_640 %>" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"><% } %><% } %>
  • 新建 [blogRoot]/source/manifest.json 文件，并新增以下内容
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
{
    "name": "爱吃肉的猫",
    "short_name": "MeuiCat",
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "fullscreen",
    "scope": "/",
    "start_url": "/",
    "id": "/",
    "icons": [
        {
            "src": "/media/pwa/manifest-icon-192.maskable.png",
            "sizes": "192x192",
            "type": "image/png",
            "purpose": "any"
        },
        {
            "src": "/media/pwa/manifest-icon-192.maskable.png",
            "sizes": "192x192",
            "type": "image/png",
            "purpose": "maskable"
        },
        {
            "src": "/media/pwa/manifest-icon-512.maskable.png",
            "sizes": "512x512",
            "type": "image/png",
            "purpose": "any"
        },
        {
            "src": "/media/pwa/manifest-icon-512.maskable.png",
            "sizes": "512x512",
            "type": "image/png",
            "purpose": "maskable"
        }
    ],
    "splash_pages": null
}
  • 在 _config.butterfly.yml 主题配置文件中 pwa 配置项全部替换为以下内容
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
# PWA
# https://github.com/JLHwung/hexo-offline
# https://butterfly.js.org/posts/ceeb73f/#PWA
# --------------------------------------

pwa:
  enable: true
  # pwa开关
  startup_image_enable: true
  # pwa启动页开关
  manifest: /manifest.json
  theme_color: var(--icat-blue)
  mask_icon: /media/pwa/apple-icon-180.png
  apple_touch_icon: /media/pwa/apple-icon-180.png
  bookmark_icon: /media/pwa/apple-icon-180.png
  favicon_32_32: /media/pwa/32.png
  favicon_16_16: /media/pwa/16.png
  favicon_2048_2732: /media/pwa/siteicon/2048x2732.png
  favicon_2732_2048: /media/pwa/siteicon/2732x2048.png
  favicon_1668_2388: /media/pwa/siteicon/1668x2388.png
  favicon_2388_1668: /media/pwa/siteicon/2388x1668.png
  favicon_1536_2048: /media/pwa/siteicon/1536x2048.png
  favicon_2048_1536: /media/pwa/siteicon/2048x1536.png
  favicon_1668_2224: /media/pwa/siteicon/1668x2224.png
  favicon_2224_1668: /media/pwa/siteicon/2224x1668.png
  favicon_1620_2160: /media/pwa/siteicon/1620x2160.png
  favicon_2160_1620: /media/pwa/siteicon/2160x1620.png
  favicon_1290_2796: /media/pwa/siteicon/1290x2796.png
  favicon_2796_1290: /media/pwa/siteicon/2796x1290.png
  favicon_1179_2556: /media/pwa/siteicon/1179x2556.png
  favicon_2556_1179: /media/pwa/siteicon/2556x1179.png
  favicon_1248_2778: /media/pwa/siteicon/1248x2778.png
  favicon_2778_1248: /media/pwa/siteicon/2778x1248.png
  favicon_1170_2532: /media/pwa/siteicon/1170x2532.png
  favicon_2532_1170: /media/pwa/siteicon/2532x1170.png
  favicon_1125_2436: /media/pwa/siteicon/1125x2436.png
  favicon_2436_1125: /media/pwa/siteicon/2436x1125.png
  favicon_1242_2688: /media/pwa/siteicon/1242x2688.png
  favicon_2688_1242: /media/pwa/siteicon/2688x1242.png
  favicon_828_1792: /media/pwa/siteicon/828x1792.png
  favicon_1792_828: /media/pwa/siteicon/1792x828.png
  favicon_1242_2208: /media/pwa/siteicon/1242x2208.png
  favicon_2208_1242: /media/pwa/siteicon/2208x1242.png
  favicon_750_1334: /media/pwa/siteicon/750x1334.png
  favicon_1334_750: /media/pwa/siteicon/1334x750.png
  favicon_640_1136: /media/pwa/siteicon/640x1136.png
  favicon_1136_640: /media/pwa/siteicon/1136x640.png
  • 如若已安装过hexo-offline插件，可跳过此步骤
1
npm install hexo-offline --save
  • 在hexo的根目录新建 hexo-offline.config.cjs 文件，并新增以下内容
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
// offline config passed to workbox-build.
module.exports = {
// 静态文件合集，如果你的站点使用了例如 webp 格式的文件，请将文件类型添加进去。
globPatterns: ["**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff}"],
globDirectory: "public",
swDest: "public/service-worker.js",
maximumFileSizeToCacheInBytes: 10485760, // 缓存的最大文件大小，以字节为单位。
skipWaiting: true,
clientsClaim: true,
// runtimeCaching: [
// // 如果你需要加载 CDN 资源，请配置该选项，如果没有，可以不配置。
// // CDNs - should be CacheFirst, since they should be used specific versions so should not change
// {
// urlPattern: /^https:\/\/npm\.elemecdn\.com\/anzhiyu-blog/, // 缓存elmentcdn
// handler: "CacheFirst",
// },
// ],
manifestTransforms: [
async (manifestEntries, compilation) => {
const timestamp = new Date()
.toISOString()
.replace(/[-:.TZ]/g, ""); // 获取当前时间戳
manifestEntries.push({
url: "/",
revision: `index-${timestamp}`,
},  {
url: "about/",
revision: `about-${timestamp}`,
});
return {
manifest: manifestEntries
};
},
],
};

PWA素材

我这里所使用的是Figma进行制作，设计模版也进行过修改，如果介意，可以前往 张洪heo 获取原版文件素材

蓝奏云下载
PWA - ICONS & 闪屏素材
  • 在 草稿页内的右上角导入功能，选择我提供的fig文件进行导入
    （张洪heo博客提供的原版文件也可以进行导入，操作步骤也一致）

  • 进入设计文件后，放大左上角的logo画框

  • 在合适的画面大小，按住 alt 键，同时鼠标左键双击

  • 在弹出的功能菜单里进行替换图片即可

  • 完成替换后，设计文件里所有的画框logo都会进行同步更换

  • 缩小到合适画面大小，将左侧的画框全部选中（可使用快捷键 ctrl + A）后，使用快捷键 ctrl + shift + E 进行导出

实际效果

]]> 经验分享 Butterfly主题 魔改记录 PWA https://meuicat.com/posts/e0534e44.html#disqus_thread Healthy Love https://meuicat.com/posts/4310ee3f.html https://meuicat.com/posts/4310ee3f.html Thu, 19 Oct 2023 18:28:12 GMT 人会在被爱和夸赞里变得自信起来 我这一路走来，遇到过很多人，我总是在想，或许是因为遇到的人足够温暖善良，所以才会让我也想成为一个温柔阳光、能时刻给他人传递温暖的人

这段时间，我睡眠质量不怎么好，不知道怎么形容那种感觉，就像是夜神在天空撒了一把安眠粉，却唯独把我抛在了世界外
虽然我一直希望自己能够不断和解，也总告诉自己明天会好的，但是日子好像只是在日复一日，只能说没有变得更差，我就万分庆幸了

至于如何与自己和解呢？我好像总是容易不断陷入到对这个问题的思考里。从小到大，我好像都在时常责怪自己，责怪不够好看、不够坚强、不够独立，责怪自己没有像别人一样的聪明笃学，责怪自己知道不足还不努力去改变，责怪自己为什么不能像别人一样做事灵敏而是反应迟钝，责怪自己为什么如此普通，责怪自己很多很多很多。长期这样的情绪一直困扰着我，虽然时而能想通，但还是无可避免会进入这个循环圈里…

我想要好多好多爱，可是好像又很渺茫，我鼓励周围的人勇敢去爱每个人、每件事，但到了自己身上又不可避免地退缩，就像“我高喊着无爱者自由，羡慕的目光却总是投向被爱者”

内心的疏离感一直存在，总是敏感，面对别人的善意和爱，也总是手足无措，不知道该怎么办，所以假装冷淡，像个倔头倔脑的小孩一样，一边想成为自己的依靠，一边又渴望有人懂。我明明好像在爱里活看，却不曾与自己和解。我也不明白是为什么，我总是鼓励周围的朋友不要焦虑，不要觉得自己长得不好看、不要怀疑自己，要快乐、要做自己，但我自己却经常容貌焦虑等等各种焦虑，但我保证，我是发自内心的觉得他们容貌并不平庸，也是真的觉得他们值得美好的一切

昨晚看到了一句话:“为什么传递快乐，明明你都不快乐”。可能是无聊造成的情绪波动，也有可能是自己内心的纠结带来的影响，最近的状态的确有点不好，不过其实我并不觉得我不快乐，但好像也不是很快乐，只是对很多事都提不起劲儿。这种时候，我真的觉得，春夏说的那句话“我几乎讨厌这个世界的大部分，但一定有小部分的东西留住你”很对，朋友就是能留住我、治愈我的那部分

我想，换个角度想，我不应该悲观，因为相比之下我是个运气好的小孩，为自己热爱的事情在付出，也遇到了很多很好很好的人
我很庆幸这个世界，光亮终归是大于黑暗的。希望我们都能坦诚面对自己，大胆去接受、去取舍、去行动、去感受，总之别被拧巴犹疑的心态误终生。希望在阳光下的我们永远拥有被爱的能力

我想，在普通的日子里，我是幸福的

日子被若无其事的揭过。虽至十月，但暑气并未消退，只有昼夜温差有些许差别
短短十月，无意间伤害了两个女生，两段失败的感情，使我望而止步。只是每每听到一首熟悉的音乐就会惆怅好久，看着一轮婉月，日子不像写诗
歌在听我，故事在写我，我在吹风，秋天在经过

KKKi的随笔

突然想写下最近的生活，是谈了一段很健康的恋爱；是在家里和妈妈作伴；是最近的状态真的很好。
跟小刘在一起，会很真切的感受到什么叫爱人如养花。每次和小刘出去玩完回家，我妈都说：“天天都出去，都不知道聊些什么，回来还笑嘻嘻。”因为小刘一直都在向我输入很积极向上的情绪，而且他会毫无保留的表达对我的喜欢爱和夸赞，能感觉到是非常真诚的。都说女孩子要夸才好看，哪怕是我素颜，穿着很随便的见小刘，他都会说：“今天还是这么好看，素颜也漂亮。”妈妈也会说：“在家里养着就是很漂亮了。”大概这就是我现在越来越自信的原因吧。

其实我是一个脾气比较暴躁和焦躁的人，但是相反小刘情绪稳定，也很有耐心。在我不开心的时候，他会引导我说出来；在我没有安全感的时候，用行动给了我安全感；在我发脾气的时候，会稳定我的情绪后再慢慢跟我说。妈妈倒是有让我改改性格，不过跟小刘在一起后真的很少生气，他真的一直有把我当小朋友对待。

我记性也比较差，但是小刘会帮我记住，然后每次都会提醒我，也会在我不舒服的时候，安安静静的陪着我，关心我的情况怎么样了。

小刘和我有很多相似的，我们算是认识比较久，但是没有想到现在才发现我们有这么多相似的爱好，一样喜欢看电影，喜欢饭后散步，会觉得两个人待在一起也很开心，两个人一起出去玩也很有意思…太多了。
他有太多的好了，所以我想一直记录，因为我一直都相信一句，爱人如初，我可以永远像一开始爱上你般去爱你。

认识了很多年的一位好友，往日里我都喊她姐。她也曾有过一段长达五年的爱情长跑，以失败告终，但现在迎来了真正爱她、对她好的人
记得前段时间，和她闲聊到，“被喜欢的人夸真的会越来越自信起来”、“爱的最高境界是心疼”，这些小刘都是满分标准答案。爱人如养花，浇灌亦是娇惯。在伴侣当中，一个人的才华不为另外一个人所肯定，是最痛苦的

所以恋爱的意义，大概是彼此照亮，成为彼此的避风港，又或精神寄托，让本就平淡的生活增添一丝美好。在平庸无望之时，发现更好的自己

]]> 生活随笔 封の唠叨 https://meuicat.com/posts/4310ee3f.html#disqus_thread Butterfly的魔改教程：关于本站 https://meuicat.com/posts/319c2ac7.html https://meuicat.com/posts/319c2ac7.html Sat, 14 Oct 2023 13:48:05 GMT 一款轻简约的博主&站点介绍页面，聚合展示 iCat版关于页

效果预览

关于本站
山高路遠 看世界 也找自己.

创建数据

  • 创建 [blogRoot]/source/about/index.md 页面
1
2
3
4
5
6
7
8
9
---
title: 关于本站
date: 2021-10-16 13:42:00
type: about
top_img: false
aside: false
---

<!-- 页面内容 -->
  • 修改 [blogRoot]/themes/butterfly/layout/page.pug 来使页面匹配
    （ + 号直接删除 即是正常缩进）
1
2
3
4
5
6
      when 'categories'
        include includes/page/categories.pug
+      when 'about'
+        include includes/page/about.pug
      default
        include includes/page/default-page.pug
  • 新建 [blogRoot]/themes/butterfly/layout/includes/page/about.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
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
#icat-about-page
  .Personal-Introduction
    .PI-box-left
      .title 你好！
      .title=_p('我是'+config.author)
      .describe=theme.about.Personal_Introduction.describe
      span.describe-tips=theme.about.Personal_Introduction.tips
      .PI-button
        a(href="#one") 博主信息
        a(href="#two") 本站信息
        a(href="#name-list") 打赏名单
    .PI-box-right
      .PI-img
        img(src=theme.about.Personal_Introduction.image)

  .about-layout.Personal-Introduction-bar
    .bar-box
      span.tips 生于
      .title(style="color:#43a6c6")=theme.about.Personal_Introduction.bar.year
    .bar-box
      span.tips 星座
      .title(style="color:#c69043")=theme.about.Personal_Introduction.bar.constellation
    .bar-box
      span.tips 爱好
      .title(style="color:#d44040")=theme.about.Personal_Introduction.bar.hobby
    .bar-box
      span.tips 职业
      .title(style="color:#b04fe6")=theme.about.Personal_Introduction.bar.career

  #one
    .about-layout.width.photo
    .about-layout.width.map
      span 现在生活在
        p=theme.about.map
    .width.h1-box
      .box-top
        .top
          span 01
          .title-h1 博主信息
      .about-layout.box-bottom(onclick="meuicat.Introduction()")
        span#Introduction MeuiCat

  .Philosophical
    .about-layout.P-box-left
      .tips 性格
      .title=theme.about.Philosophical.title
      .title(style="color:#56a178")=theme.about.Philosophical.referred_to_as
      .image
        img(src=theme.about.Philosophical.image)
      .tips-bottom 在 
        a(href="https://www.16personalities.com/" target="_blank") 16Personalities 
        | 了解关于 
        a(href=theme.about.Philosophical.link target="_blank")=theme.about.Philosophical.title
        |&ensp;的更多信息

    .about-layout.P-box-right
      .tips 座右铭
      span.title(style="opacity:.6;margin-bottom: 8px")=theme.about.Philosophical.motto_one
      span.title=theme.about.Philosophical.motto_two
      .tips-bottom=theme.about.Philosophical.motto_tips

  .about-layout.Socialize
    .tips 账号
    .title 社交平台
    .S-box
      each url, icon in theme.about.Account_number
        a.btn-layout(href=url_for(trim(url.split('||')[0])) target="_blank")=icon
    .S-img
      .img-box

  #two
    .h1-box
      .box-top
        .top
          span 02
          .title-h1 本站信息
      .about-layout.box-bottom
        span#run-time 运行时间
    .information
      .about-layout.Version
        .V-box
          .title Hexo
          .tips-v V4.9.0
        .V-box
          .title Butterfly
          .tips-v V6.3.0
        .V-box
          .title MeuiCat
          .tips-v V3.1.1

      .about-layout.Statistics
        span= site.posts.length + _p('篇文章')
        span.N_comments 评论数量
        span= site.tags.length + _p('个分类')
        span= totalcount(site) + _p('字')

  .data
    .about-layout.statistic
      .tips 浏览
      .title 访问统计
      #statistic
      .tips-bottom
        .T-box 统计信息来自 
          a(href="https://user.51.la/activity/invite?cc=22L4t3" target="_blank") 51la 
          | 网站统计
        a.T-btn(href="/charts/" target="_blank") 更多统计

    .about-layout.union
      .tips 共创
      .title 站长联盟
      .U-box
        each url, icon in theme.about.Union
          a.btn-layout(href=url_for(trim(url.split('||')[0])) target="_blank")=icon

  .about-layout.content
    .tips 心路历程
    .title 关于本站的介绍
    != page.content

  .about-layout#name-list
    .tips 致谢
    .title 赞赏名单
    .tips-t 非必要无需赞助！同时也感谢赞赏的喵友，让我感受到写博客这件事情能够给你们创造了价值
    .Appreciation-List
      each i in site.data.reward
        - let rawData = [...i.reward_list]
        .reward-list-all
          - let reward_list_amount = i.reward_list.sort((a,b)=>b.amount -  a.amount)
          each item, index in reward_list_amount
            .reward-list-item
              .reward-list-item-name=item.name
              .reward-list-bottom-group
                if item.amount >= 50
                  .reward-list-item-money(style='background:#ffc93e')=`¥${item.amount}`
                else
                  .reward-list-item-money=`¥${item.amount + (item.suffix ? item.suffix : "")}`
                .datatime.reward-list-item-time(datatime=item.datatime)=new Date(item.datatime).toISOString().slice(0, -14)
        .reward-list-updateDate
          | 更新时间：
          time.datatime.reward-list-updateDate-time(datatime=rawData[0].datatime)=new Date(rawData[0].datatime).toISOString().slice(0, -14)
    .post-reward
      .reward-button
        i.iconfont.icat-gift
        = ' ' + _p('donate')
      .reward-main
        ul.reward-all
          span.reward-title 感谢你赐予我前进的力量
          ul.reward-group
            each item in theme.reward.QR_code
              - var clickTo = item.link ? item.link : item.img
              li.reward-item
                a(href=url_for(clickTo) target='_blank')
                  img.post-qr-code-img(src=url_for(item.img) alt=item.text)
                .post-qr-code-desc=item.text
          a.reward-btn-aifadian(href=theme.about.aifadian target="_blank")
            i.iconfont.icat-aifadian
            .reward-text 我的爱发电

  • 第 88 、 89 、 104 、 106 行均可自行修改为你需要的内容

  • 在 _config.butterfly.yml 中的 新增以下配置项
    （ + 号直接删除 即是正常缩进）

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
  ···

# about
# MeuiCat设计
# https://meuicat.com/blog/78/
# --------------------------------------

about: 
  Personal_Introduction:
  # 个人简介
    image: https://img.meuicat.com/blog/17.webp
    describe: 一个不太称职的科技博主日常生活记录，专注于网络产品设计、视觉摄影艺术的层次追求。还有就是一些发疯文章啦!
    tips: It is precisely because of those dark and turbid past that I have achieved my shining self at this moment

    bar:
      year: 2002
      constellation: 狮子座
      hobby: 人文摄影
      career: 数控项目师

  map: 深圳 坪山
  # 现居地

  Philosophical: 
  # 博主信息介绍
    title: 活动家
    referred_to_as: ENFP-T
    image: https://www.16personalities.com/static/images/personality-types/avatars/email/large/ENFP_male.png?v=1
    link: https://www.16personalities.com/enfp-personality?utm_source=welcome-turbulent-campaigner&utm_medium=email&utm_campaign=results&utm_content=type-personality-0

    motto_one: 活在當下 即是全部
    motto_two: 熱烈且自由
    motto_tips: Now is everything, warm and free

  Account_number:
  # 社交平台（可多项配置，无数量限制）
    QQ: http://wpa.qq.com/msgrd?v=3&uin=2714344056
    知乎: https://www.zhihu.com/people/yi-feng-23-58-66
    哔哩哔哩: https://space.bilibili.com/383847872?spm_id_from=333.1007.0.0
    简书: https://www.jianshu.com/u/335e0723f4b2
    Telegram: https://t.me/yife68
    稀土掘金: https://juejin.cn/user/3299011890786382
    Twitter: https://twitter.com/yife68
    网易云音乐: https://music.163.com/#/user/home?id=542585674
    抖音: https://v.douyin.com/ieoSBPCC/
    站酷: https://www.zcool.com.cn/u/25042342?share_id=1580929692
    微博: https://weibo.com/u/5651487069
    GitHub: https://github.com/yife68
    微信公众号: meuicat.Weixin()
    # xx: xxxx

  Union: 
  # 博客联盟（可多项配置，无数量限制）
    十年之约: https://www.foreverblog.cn/blog/4006.html
    开往: https://travellings.cn/
    BlogFinder: https://bf.zzxworld.com/s/876
    个性商店: https://storeweb.cn/site/o/1674
    博友圈: https://www.boyouquan.com/blogs/meuicat.com
    中文博客导航: https://zhblogs.ohyee.cc/?tab=blog_list&page=1&tags=&search=%E7%88%B1%E5%90%83%E8%82%89%E7%9A%84%E7%8C%AB
    # xx: xxxx

  aifadian: https://afdian.net/a/yife68
  # 爱发电主页
  • 创建 [blogroot]/source/_data/reward.yml 添加赞赏数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
- class_name: 赞赏
  reward_list:
    - name: 天才少女
      amount: 134
      datatime: 2023-10-05
      suffix: 喵粮
    - name: 天才少女
      amount: 52
      datatime: 2023-10-05
      suffix: 喵粮
    - name: 我推天下第一帅
      amount: 5
      datatime: 2023-10-05
      suffix: 喵粮
    - name: 爱发电用户_401ac
      amount: 5
      datatime: 2023-08-02
      suffix: 小喵爪
    - name: _
      amount: 35
      datatime: 2023-06-25
      suffix: 喵粮
  • 新建 [blogroot]/themes/butterfly/source/css/_page/about.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
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
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
#icat-about-page
    .about-layout
        border-radius: 12px
        background: var(--icat-card-bg)
        border: var(--style-border)
        box-shadow: var(--icat-shadow-border)
        position: relative
        padding: 1rem 2rem
        overflow: hidden
        transition: 0.6s

        &:hover
            box-shadow: var(--icat-shadow-blue)
            border-color: var(--icat-blue)

            .title
                color: var(--icat-fontcolor)

    .title
        font-size: 36px
        font-weight: 700
        line-height: 1.1
        transition: .6s

    .tips
        opacity: .8
        font-size: .6rem
        line-height: 1
        margin-bottom: 12px
        display: flex

    .tips-bottom
        color: var(--icat-gray)
        font-size: 14px
        position: absolute
        bottom: 1rem
        left: 2rem

        a
            color: var(--icat-gray)
            font-weight: 600

    .h1-box
        display: flex
        flex-direction: column
        justify-content: flex-end

        +maxWidth768()
            height: 220px

        .box-top
            margin: auto

            .top
                position: relative

                span
                    font-size: 100px
                    position: absolute
                    top: -106px
                    left: -64px
                    margin: 0
                    padding: 0
                    opacity: .4

                    +maxWidth768()
                        display: none

                .title-h1
                    font-size: 42px
                    font-weight: 700
                    line-height: 1.1
                    margin: 0.5rem 0
                    letter-spacing: 0.2rem
                    color: var(--icat-fontcolor)

        .box-bottom
            padding: 1.25rem 2rem
            display: inline-flex
            justify-content: center

            span
                font-size: 18px

    .btn-layout
        padding: 6px 18px
        background: var(--icat-background)
        margin: 0 18px 18px 0
        border: var(--style-border)
        border-radius: 8px
        box-shadow: var(--icat-shadow-border)

        &:hover
            box-shadow: var(--icat-shadow-blue)
            border-color: var(--icat-blue)
            background: var(--icat-blue)
            color: var(--icat-white)

    .Personal-Introduction
        display: flex
        justify-content: space-between

        .PI-box-left
            margin-top: 4.25rem
            color: var(--icat-fontcolor)
            font-weight: 400
            width: 60%
            position: relative

            +maxWidth768()
                width: 100%
                z-index: 1

            .title
                font-size: 42px
                margin: .5rem 0
                letter-spacing: .2rem

            .describe
                font-size: 18px
                letter-spacing: .2rem
                margin-top: 2.25rem
                opacity: .9

                +maxWidth768()
                    font-size: 16px
                    letter-spacing: 0

            .describe-tips
                font-size: 16px
                opacity: .4

                +maxWidth768()
                    font-size: 12px

            .PI-button
                position: absolute
                bottom: 0
                display: flex

                +maxWidth768()
                    position: static
                    margin-top: 10px
                
                a
                    border-radius: 8px
                    background: var(--icat-card-bg)
                    border: var(--style-border)
                    box-shadow: var(--icat-shadow-border)
                    padding: 6px 18px
                    transition: .6s
                    margin-right: 16px

                    &:hover
                        background: var(--icat-blue)
                        color: var(--icat-white)
                        box-shadow: var(--icat-shadow-blue)

        .PI-box-right
            height: 420px
            overflow: hidden
            width: 40%
            display: flex
            justify-content: center

            +maxWidth768()
                position: absolute
                right: 0
                width: 38%

    .Personal-Introduction-bar
        margin: 2.25rem 0
        display: flex
        justify-content: space-between

        +maxWidth768()
            flex-wrap: wrap

        .bar-box
            margin: 0.5rem 2rem 0.5rem 0

            +maxWidth768()
                width: 50%
                margin: 0.5rem 0

            .title
                +maxWidth768()
                    font-size: 26px

    #one
        display: flex

        +maxWidth768()
            flex-direction: column

        .width
            width: calc(100% / 3 - 8px)
            margin-right: 16px
            aspect-ratio: 1/1

            +maxWidth768()
                width: 100%
                margin-right: 0
                margin-bottom: 16px

            &:last-child
                margin-right: 0

        .photo
            overflow: hidden
            background: url(https://img.meuicat.com/blog/18.webp) no-repeat center
            background-size: 130%
            transition: 1s

            +maxWidth768()
                order: 1
                padding: calc(100% / 2)

            &:hover
                background-size: 100%
                background-position-x: 50%
                background-position-y: 50%

        .map
            background: url(https://img.meuicat.com/blog/19.webp) no-repeat center
            background-size: 100%
            overflow: hidden
            transition: 2s

            +maxWidth768()
                order: 1
                padding: calc(100% / 2)

            &:hover
                background-size: 150%
                background-position-x: 5%
                background-position-y: 5%

                span
                    bottom: -100%

            span
                position: absolute
                bottom: 0
                left: 0
                width: 100%
                background: var(--icat-maskbg)
                padding: 1.25rem 2rem
                -webkit-backdrop-filter: saturate(180%) blur(20px)
                backdrop-filter: saturate(180%) blur(20px)
                font-size: 18px
                display: flex
                align-items: center
                transition: bottom 1s
                border-radius: 0 0 12px 12px

                p
                    margin: 0
                    font-weight: bolder

    .Philosophical
        margin-top: 16px
        min-height: 240px
        display: flex
        gap: 16px

        +maxWidth768()
            flex-direction: column
            gap: 0
            margin-top: 0

        .P-box-left
            width: 60%
            padding: 2.25rem 2rem

            +maxWidth768()
                width: 100%
                height: 210px
                margin-bottom: 16px

            &:hover
                .image
                    transform: rotate(-10deg)

            .image
                position: absolute
                right: 30px
                top: 10px
                width: 220px
                transition: transform 2s cubic-bezier(.13,.45,.21,1.02)

                +maxWidth768()
                    width: 120px
                    right: 18px
                    top: 40px

        .P-box-right
            width: 40%
            padding: 2.25rem 2rem
            display: flex
            flex-direction: column

            +maxWidth768()
                width: 100%
                height: 210px


    .Socialize
        margin-top: 16px
        padding: 2.25rem 2rem

        &:hover
            .S-img .img-box
                transform: rotate(0deg) translateY(58%) scale(2)

        .S-box
            margin-top: 2.25rem
            width: 60%
            display: flex
            flex-wrap: wrap

            +maxWidth768()
                width: 100%
                z-index: 1
                position: sticky

        .S-img
            width: 40%
            height: 100%
            position: absolute
            right: 0
            top: 0
            display: flex
            align-items: center
            justify-content: center

            +maxWidth768()
                bottom: 0
                height: 40%
                top: auto

            .img-box
                background: url(https://img.meuicat.com/blog/21.webp) no-repeat center
                background-size: contain
                aspect-ratio: 8/16
                height: 95%
                transform: rotate(12deg) translateY(58%) scale(2)
                transition: .6s

                +maxWidth768()
                    transform: rotate(12deg) translateY(62%) scale(3)
                    filter: blur(2px)

    #two
        margin-top: 32px
        display: flex

        +maxWidth768()
            flex-direction: column

        .h1-box
            width: 50%
            margin-right: 16px
            aspect-ratio: 1/1

            +maxWidth768()
                width: 100%
                margin-bottom: 16px

        .information
            width: 100%
            display: flex
            flex-direction: column
            justify-content: space-between

            .Version
                display: flex
                height: 100%
                margin-bottom: 16px
                align-items: center
                justify-content: space-around

                +maxWidth768()
                    flex-direction: column

                .V-box
                    display: flex
                    flex-direction: column
                    align-items: center
                    position: relative

                    +maxWidth768()
                        margin: 16px 0

                    &:nth-child(1)
                        &:before
                            background: url(https://img.meuicat.com/blog/22.webp) no-repeat center

                    &:nth-child(2)
                        &:before
                            background: url(https://img.meuicat.com/blog/23.webp) no-repeat center

                    &:nth-child(3)
                        &:before
                            background: url(https://img.meuicat.com/blog/24.webp) no-repeat center

                    &:before
                        position: absolute
                        right: -26px
                        top: -16px
                        filter: blur(2px)
                        opacity: .5
                        content: ""
                        width: 60px
                        height: 100%

                    .title
                        color: var(--icat-fontcolor)
                        z-index: 1

            .Statistics
                padding: 1.25rem 2rem
                display: inline-flex
                justify-content: space-between

                +maxWidth768()
                    flex-wrap: wrap

                span
                    font-size: 18px
                    margin-bottom: 10px

                    +maxWidth768()
                        margin-bottom: 0
                        width: 50%
                        text-align: center

    .data
        margin-top: 16px
        display: flex
        justify-content: space-between

        +maxWidth768()
            flex-direction: column

        .statistic
            width: calc(65% - 8px)
            padding: 2.25rem 2rem
            display: flex
            flex-direction: column
            background: url(https://img.meuicat.com/blog/25.webp) no-repeat center
            background-size: 100%
            color: var(--icat-white)

            +maxWidth768()
                width: 100%
                margin-bottom: 16px

            &:hover
                .title
                    color: var(--icat-white)

            &:before
                box-shadow: 0 -159px 173px 71px #0c1c2c inset
                position: absolute
                content: ""
                width: 100%
                height: 100%
                top: 0
                left: 0

            & > *
                z-index: 1

            #statistic
                display: flex
                justify-content: space-between
                margin: auto 0

                +maxWidth768()
                    flex-wrap: wrap
                    margin: 1.25rem 0

                div
                    margin: 0 16px 16px 0

                    +maxWidth768()
                        margin: 0 0 16px
                        width: 50%

                    span:last-child
                        font-size: 36px
                        font-weight: 700
                        line-height: 1.1
                        color: var(--icat-white)

            .tips-bottom
                display: flex
                justify-content: space-between
                align-items: center
                width: 100%

                .T-btn
                    height: 40px
                    width: 124px
                    border-radius: 20px
                    display: flex
                    box-shadow: var(--icat-shadow-border)
                    align-items: center
                    justify-content: center
                    border: var(--style-border)
                    background: var(--icat-background)
                    margin-right: 4rem

                    +maxWidth768()
                        display: none

                    &:hover
                        box-shadow: var(--icat-shadow-blue)
                        border-color: var(--icat-blue)
                        background: var(--icat-blue)
                        color: var(--icat-white)

        .union
            width: calc(35% - 8px)
            padding: 2.25rem 2rem

            +maxWidth768()
                width: 100%

            .U-box
                margin-top: 1.25rem
                display: flex
                flex-wrap: wrap

    .content
        margin-top: 16px
        padding: 2.25rem 2rem

    #name-list
        margin-top: 16px
        padding: 2.25rem 2rem

        .reward-list-all
            display: flex
            flex-wrap: wrap
            flex-direction: row
            margin-top: 1rem
            margin-bottom: 0.5rem
            margin-left: -0.25rem
            margin-right: -0.25rem

            .reward-list-item
                padding: 1rem
                border-radius: 12px
                border: var(--style-border)
                width: calc((100% / 4) - 0.5rem)
                margin: 0 0.25rem 0.5rem 0.25rem
                box-shadow: var(--icat-shadow-border)
                transition: .6s

                +maxWidth768()
                    width: 100% !important

                &:hover
                    background: var(--icat-blue)
                    color: var(--icat-white)
                    box-shadow: var(--icat-shadow-blue)

                    .reward-list-item-money
                        background: var(--icat-white)
                        opacity: .8
                        color: var(--icat-black)

                    .reward-list-item-time
                        color: var(--icat-white)
                        opacity: .6

                .reward-list-item-name
                    font-size: 1rem
                    font-weight: 700
                    line-height: 1
                    margin-bottom: 0.5rem

                .reward-list-bottom-group
                    display: flex
                    align-items: center
                    justify-content: space-between

                .reward-list-item-money
                    padding: 4px
                    background: var(--font-color)
                    color: var(--card-bg)
                    font-size: 12px
                    line-height: 1
                    border-radius: 4px
                    margin-right: 4px
                    white-space: nowrap

                .reward-list-item-time
                    font-size: 12px
                    color: var(--icat-secondtext)
                    white-space: nowrap

        .post-reward
            position: absolute
            right: 2rem
            top: 2rem

            .reward-main
                top: 40px
                right: 0
                padding: .5rem 0 0

                .reward-all
                    &:before
                        top: 0
            
            .reward-button
                margin-right: 0


[data-theme='dark']
    #icat-about-page
        #one
            .map
                background: url(https://img.meuicat.com/blog/20.webp) no-repeat center
                background-size: 100%
                
                &:hover
                    background-size: 150%
                    background-position-x: 5%
                    background-position-y: 5%

        .data
            .statistic
                color: var(--font-color)

  • 第 211 行为博主信息的个人照片模块

  • 第 225 和 622 行分别为日、夜状态下博主信息的现居地地图模块

  • 第 343 行为博主信息的社交平台模块展示图

  • 第 397 、 401 、405 行分别为本站信息的框架模块favicon图标

  • 第 451 行为本站信息的访问统计模块的背景图

  • 创建 [blogRoot]/themes/butterfly/scripts/helpers/article-json.js 文件，并新增以下内容，用来生成并处理 article.json 数据文件

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
/**
 * MeuiCat
 * generate json - article_comments
 * developer：meuciat.com
 */

'use strict'

hexo.extend.generator.register('theData', function (locals) {
    const postsData = locals.posts
      .filter(post => post.path !== '/' && post.comments !== false)
      .map(post => {
        const link = post.permalink.replace(/^(?:\/\/|[^/]+)*\//, '/');
        return {
          [link]: post.title || "暂无标题"
        };
      });
  
    const pagesData = locals.pages
      .filter(page => page.path !== '/' && page.comments !== false && !page.source.endsWith('.js') && !page.source.endsWith('.css'))
      .map(page => {
        const link = page.permalink.replace(/^(?:\/\/|[^/]+)*\//, '/').replace('index.html', '');
        return {
          [link]: page.title || "暂无标题"
        };
      });
  
    const combinedData = postsData.concat(pagesData);
  
    const jsonData = combinedData.reduce((acc, obj) => {
      const key = Object.keys(obj)[0];
      const value = obj[key];
      acc[key] = value;
      return acc;
    }, {});
  
    return {
      path: 'article.json',
      data: JSON.stringify(jsonData)
    };
  });
  • 创建 [blogRoot]/source/js/about.js 文件，并新增以下内容，用来处理关于页的函数赋值处理
    （或写在自建的公共 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
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
function whenDOMReady() {
if (location.pathname.startsWith('/about/')) meuicat.comments(), meuicat.Introduction(), meuicat.runtimen(), meuicat.fiftyonela();
}

whenDOMReady() // 打开网站先执行一次
document.addEventListener("pjax:complete", whenDOMReady) // pjax加载完成（切换页面）后再执行一次

let lastSayHello = "";
var meuicat = {
comments: function() {
fetch('/article.json')
.then(res => res.json())
.then(articleData => {
const urls = Object.keys(articleData);

fetch('{TWIKOO_LINK}', {
method: "POST",
body: JSON.stringify({ event: "GET_RECENT_COMMENTS", accessToken: "{YOUR_TOKEN}", includeReply: true, pageSize: -1 }),
headers: { 'Content-Type': 'application/json' }
})
.then(res => res.json())
.then(({ data }) => {
const totalComments = data.length;
const commentElements = document.querySelectorAll('.N_comments');
commentElements.forEach(element => {
if (element.classList.contains('N_comments')) {
element.innerText = totalComments + '条评论';
} else {
console.log(`iCat提醒您：\n\n评论总数功能无法获取到正确的元素，请检查页面是否正常！\n\n教程地址：https://meuicat.com/blog/78/`);
}
});
});
});
}, // 总评论数量
Introduction: function() {
const e = [
"🤖️ 数码科技爱好者",
"🔍 分享与热心帮助",
"🏠 智能家居小能手",
"🔨 设计开发一条龙",
"📷 人文摄影的坚定者",
"🏃 脚踏实地行动派",
"📚 热爱阅读的书虫迷",
"🎵 薛之谦七年热爱粉",
"🏋️‍♀️ 坚韧不拔的健身达人",
"🍜 走哪吃哪的美食迷",
"🎮 Minecraft骨灰级玩家",
"👨‍🍳 一位爱做饭的程序猿",
],
t = document.getElementById("Introduction");
let o = e[Math.floor(Math.random() * e.length)];
for (; o === lastSayHello;) o = e[Math.floor(Math.random() * e.length)];
(t.textContent = o), (lastSayHello = o);
}, // about 个人介绍词
runtimen: function() {
let t = new Date("2021/10/15 00:00:00")
.getTime(),
n = new Date()
.getTime(),
a = Math.round((n - t) / 1e3),
l = (a / 7884e4)
.toFixed(2);
let c = document.getElementById("run-time");
c && (c.innerHTML = `已稳定运行 ${l} 坤年 🏀`),
setTimeout(meuicat.runtime, 1e3);
}, // about 运行时间
fiftyonela: function() {
fetch('https://v6-widget.51.la/v6/{掩码ID}/quote.js')
.then(res => res.text())
.then((data) => {
let title = ['今日人数', '今日访问', '昨日人数', '昨日访问', '本月访问']
let num = data.match(/(<\/span><span>).*?(\/span><\/p>)/g)

num = num.map((el) => {
let val = el.replace(/(<\/span><span>)/g, '')
let str = val.replace(/(<\/span><\/p>)/g, '')
return str
})

let statisticEl = document.getElementById('statistic')
let activeVisitors = num[0]

// 添加最近活跃访客的内容
let TBoxEl = document.querySelector('.T-box')
if (TBoxEl) {
TBoxEl.innerHTML = '最近活跃：' + activeVisitors + '&ensp;|&ensp;' + TBoxEl.innerHTML
}

// 自定义不显示哪个或者显示哪个，如下不显示总访问量
for (let i = 0; i < num.length; i++) {
if (!statisticEl) return
if (i == 0 || i == num.length - 1) continue;
statisticEl.innerHTML += '<div><span class="tips">' + title[i - 1] + '</span><span id=' + title[i - 1] + '>' + num[i] + '</span></div>'
}
});
} // about 51la统计显示
}

  • 第 16 和 18 行里的{TWIKOO_LINK}需填入你的Twikoo地址，{YOUR_TOKEN}则为Twikoo的Token

  • 第 56 行的初始时间可自行更改

  • 第 68 行的{掩码ID}由 51la统计 提供
    （需要在 站点配置-参数设置-数据挂件 中开启数据挂件即可显示）

  • 在 _config.butterfly.yml 主题配置文件中 inject 下的 head 引入51la统计文件

1
2
3
4
5
6
7
8
9
10
  ···

inject:
  head:
    - <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script> # 51统计样式
    - <script> LA.init({id:"# 自己的id",ck:"# 自己的ck"})</script> # 51统计 - id & ck
  bottom:
    - ···

  ···

上述皆可在 站点配置-参数设置-统计代码-手动安装（通用） 中找到

  • 在 _config.butterfly.yml 主题配置文件中 inject 下的 bottom 引入 about.js 文件
1
2
3
4
5
6
7
8
9
  ···

inject:
  head:
    ···
  bottom:
    - <script type="text/javascript" src="/js/about.js"></script> # about关于页 - 处理函数

  ···
  • 心路历程模块的内容可直接写在md文件里；新增 [blogRoot]/source/about/index.md 页面内容
1
2
3
4
5
6
7
首先，对每一位来到这里的iCat喵友们说声 "有幸遇见 很高兴认识你" 👋
创立iCat的初衷也是想着每一个人都可以像猫咪那样过的有仪式感；傲娇性随时放射；有位猫主子宠着
也是想能够有一个让自己积累知识、积累兴趣的地方；是属于自己的温暖小窝；也是偌大的社会里的属于自己的内心避风港
和他人分享，会让这些成为积累和沉淀。如果能够帮助到更多的人，帮助更多人解决问题，那一定是非常棒的事情

与大多数垂直类的技术博客不同，这里的种类会非常的繁杂，有技能的教程干货、有生活上的吐槽和想法；所以一般我研究什么、发现了什么都会分享在这里
这些就是创造 MueiCat 的本意，也是我分享生活的方式。有幸能和你相遇在这里，相信我们能共同留下一段美好记忆

Heo版关于页

此版本关于页剔除了部分没用到的功能，所以跟Heo的关于页会有些许出入，整体效果可在下方查看

效果预览

iCat V2 - 关于本站
山高路遠 看世界 也找自己.

创建数据

  • 创建 [blogRoot]/source/about/index.md 页面
1
2
3
4
5
6
7
8
9
---
title: 关于本站
date: 2021-10-16 13:42:00
type: about
top_img: false
aside: false
---

<!-- 页面内容 -->
  • 修改 [blogRoot]/themes/butterfly/layout/page.pug 来使页面匹配
    （ + 号直接删除 即是正常缩进）
1
2
3
4
5
6
      when 'categories'
        include includes/page/categories.pug
+      when 'about'
+        include includes/page/about.pug
      default
        include includes/page/default-page.pug
  • 新建 [blogRoot]/themes/butterfly/layout/includes/page/about.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
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
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
#icat-about-page
  .icat-author-box
    .icat-author-img
      img.no-lightbox(src='https://s11.ax1x.com/2023/07/07/pCc1TSO.jpg')
    .image-dot
  .icat-author-content
    .icat-author-content-item.myInfoAndSayHello
      .title-one Hey，很高兴认识你👋
      .title-two
        | 我叫
        span.inline-word  亦封
      .title-one
        | 是一名 自媒体iCat博主 & 
        span.inline-word 数控项目师
    .aboutsiteTips.icat-author-content-item
      .icat-author-content-item-tips 追求
      h2
        | 源于
        br
        | 热爱而去
        span.inline-word 体验
        .mask
          span.first-tips 旅行
          |
          span 生活
          |
          span(data-up) 设计
          |
          span(data-show) 感受

  .hello-about
    .cursor(style='translate:none;rotate:none;scale:none;transform:translate(721px,180px)')
    .shapes
      .shape.shape-1(style='translate:none;rotate:none;scale:none;transform:translate(721px,180px)')
      .shape.shape-2(style='translate:none;rotate:none;scale:none;transform:translate(721px,180px)')
      .shape.shape-3(style='translate:none;rotate:none;scale:none;transform:translate(721px,180px)')
    .content
      h1 MeuiCat

  .icat-author-content
    .icat-author-content-item.skills
      .card-content
        .icat-author-content-item-tips 技能
        span.icat-author-content-item-title 极致创造
        .skills-style-group
          .tags-group-all
            .tags-group-wrapper
              each i in site.data.creativity
                - const evenNum = i.creativity_list.filter((x, index) => index % 2 === 0);
                - const oddNum = i.creativity_list.filter((x, index) => index % 2 === 1);
                each item, index in i.creativity_list
                  if ((index+1 <= evenNum.length) && (index+1 <= oddNum.length))
                    .tags-group-icon-pair
                      .tags-group-icon(style=`background: ${evenNum[index].color}`)
                        img.no-lightbox(title=evenNum[index].name, src=evenNum[index].icon)
                      .tags-group-icon(style=`background: ${oddNum[index].color}`)
                        img.no-lightbox(title=oddNum[index].name, src=oddNum[index].icon)
          .skills-list
            each i in site.data.creativity
              each item, index in i.creativity_list
                .skill-info
                  .skill-icon(style=`background: ${item.color}`)
                    img.no-lightbox(title=item.name, src=item.icon)
                  .skill-name
                    span=item.name
            .etc ...
    .icat-author-content-item.careers
      .card-content
        .icat-author-content-item-tips 生涯
        span.icat-author-content-item-title 無限進步
        .careers-group
          .careers-item
            .circle(style='background:#357ef5')
            .name EC/DC | 电商设计师
          .careers-item
            .circle(style='background:#937df7')
            .name EC/TP | 运营规划师
          .careers-item
            .circle(style='background:#00d0e1')
            .name UGC | 自媒体IP
          .careers-item
            .circle(style='background:#ff0000')
            .name CNC/PE | 数控项目师
        img.icat-author-content-img.no-lightbox(alt='生涯', src='https://yife68.gitee.io/icat-pic/blog/2.webp')

  .icat-author-content
    .about-statistic.icat-author-content-item
      .card-content
        .icat-author-content-item-tips 数据
        span.icat-author-content-item-title 访问统计
        #statistic
        .post-tips
          | 统计信息来自
          a(href='https://user.51.la/activity/invite?cc=22L4t3', target='_blank', rel='noopener nofollow') 51la网站统计
        .icat-banner-button-group
          a.banner-button(onclick='pjax.loadUrl("/census/")', data-pjax-state)
            i.iconfont.icat-51la
            |
            span.banner-button-text 访问统计
    .icat-author-content-item-group.column.mapAndInfo
      .icat-author-content-item.map.single
        span.map-title
          | 现在住在
          b 上海 虹口
      .icat-author-content-item.selfInfo.single
        div
          span.selfInfo-title 生于
          |
          span.selfInfo-content(style='color:#43a6c6') 2002
        div
          span.selfInfo-title 星座
          |
          span.selfInfo-content(style='color:#c69043') 狮子座
        div
          span.selfInfo-title 现在职业
          |
          span.selfInfo-content(style='color:#b04fe6') 数控工程/项目师

  .icat-author-content
    .icat-author-content-item.personalities
      .icat-author-content-item-tips 性格
      span.icat-author-content-item-title 活动家
      .title-two(style='color:#56a178') ENFP-T
      .post-tips
        | 在 
        a(href='https://www.16personalities.com/', target='_blank', rel='noopener nofollow') 16Personalities 
        | 了解关于 
        a(target='_blank', rel='noopener external nofollow', href='https://www.16personalities.com/enfp-personality?utm_source=welcome-turbulent-campaigner&utm_medium=email&utm_campaign=results&utm_content=type-personality-0') 活动家 
        | 的更多信息
      .image
        img.no-lightbox(src='https://www.16personalities.com/static/images/personality-types/avatars/email/large/ENFP_male.png?v=1')
    .icat-author-content-item.myphoto
      img.icat-author-content-img.no-lightbox(alt='img', src='https://yife68.gitee.io/icat-pic/blog/6.webp')

  .icat-author-content
    .icat-author-content-item.maxim
      .icat-author-content-item-tips 座右铭
      span.maxim-title
        span(style='opacity:.6;margin-bottom:8px') 山高路遠
        |
        span 看世界 也找自己.
    .icat-author-content-item.buff
      .card-content
        .icat-author-content-item-tips 特长
        span.buff-title
          span(style='opacity:.6;margin-bottom:8px')
            | 说走就走的
            span.inline-word 追风狂魔
          |
          span
            | 各项学习能力
            span.inline-word MAX
      .card-background-icon
        i.fa-solid.fa-dice-d20

  .icat-author-content
    .icat-author-content-item.game-yuanshen
      .card-content
        .icat-author-content-item-tips 爱好游戏
        span.icat-author-content-item-title Minecraft
        .content-bottom
          .tips.game-yuanshen-uid ID: Beam_Sealed
    .icat-author-content-item.comic-content
      .card-content
        .icat-author-content-item-tips 爱好电影
        span.icat-author-content-item-title 动物世界
        .content-bottom
          .icat-banner-button-group
            a.banner-button(onclick='window.open("https://movie.douban.com/subject/26925317/")', data-pjax-state)
              i.iconfont.icat-play
              |
              span.banner-button-text 豆瓣详情

  .icat-author-content
    .icat-author-content-item.like-technology
      .card-content
        .icat-author-content-item-tips 关注偏好
        span.icat-author-content-item-title 数码科技
        .content-bottom
          .tips 手机、电脑软硬件
    .icat-author-content-item.like-music
      .card-content
        .icat-author-content-item-tips 音乐偏好
        span.icat-author-content-item-title 电子乐、Beat
        |
        span.icat-author-content-item-title 纯音乐、名谣
        .content-bottom
          .tips 跟 亦小封 一起欣赏更多音乐
        .icat-banner-button-group
          a.banner-button(onclick='window.open("https://music.163.com/#/user/home?id=542585674")', data-pjax-state)
            i.iconfont.icat-music
            |
            span.banner-button-text 更多推荐

  .icat-author-content
    .create-site-post.icat-author-content-item.single
      .icat-author-content-item-tips 心路历程
      h1 关于本站
      h3 首先，对每一位来到这里的iCat喵友们说声 "有幸遇见 很高兴认识你" 👋
      strong 创立iCat的初衷也是想着每一个人都可以像猫咪那样过的有仪式感；傲娇性随时放射；有位猫主子宠着
      br
      strong 也是想能够有一个让自己积累知识、积累兴趣的地方；是属于自己的温暖小窝；也是偌大的社会里的属于自己的内心避风港
      br
      strong 和他人分享，会让这些成为积累和沉淀。如果能够帮助到更多的人，帮助更多人解决问题，那一定是非常棒的事情
      br
      br
      strong 与大多数垂直类的技术博客不同，这里的种类会非常的繁杂，有技能的教程干货、有生活上的吐槽和想法；所以一般我研究什么、发现了什么都会分享在这里
      br
      strong 这些就是创造 <b>MueiCat</b> 的本意，也是我分享生活的方式。有幸能和你相遇在这里，相信我们能共同留下一段美好记忆
      br
      br
      h2 博客类型
      strong 本站建立于 2021年10月16日
      br
      strong
        emp
          a(target="_blank" href="https://hexo.io/zh-cn/") Hexo 
          | 强力驱动 | Theme by 
          a(target="_blank" href="https://github.com/jerryc127/hexo-theme-butterfly/") Butterfly
      br
      strong 备案： <font color="red">粤ICP备2022035648号</font> | 萌备： <font color="red">萌ICP备20227060号</font>
      br
      strong
        emp
          a(target="_blank" rel="noopener" href="/privacy/") 隐私协议 
        strong | 
          a(target="_blank" rel="noopener" href="/cookies/") Cookies政策 
        strong | 
          a(target="_blank" rel="noopener" href="/cc/") 版权协议
      br
      strong 留言等信息回复请联系 个人微信(<b>y59851</b>)、TG、邮箱或者 在评论区留言
      br
      strong
        emp
          a(target="_blank" color="red" href="/Website-History/") 查看关于更多 iCat 发展历程
      br
      h2 本站加入的博客联盟
      strong
        ul
          li 
            emp
              a(target="_blank" rel="noopener" href="https://www.foreverblog.cn/blog/4006.html") 十年之约 
            strong | 十年之约是一个记录、展示独立博客的平台，即从加入这个活动起，我们的博客10年不关闭或者更久，保持更新和活力
          li 
            emp
              a(target="_blank" rel="noopener" href="https://travellings.cn/") 开往 
            strong | 我们希望通过让友链接力下去，可以让流量流动起来，让网络变得开放。
          li 
            emp
              a(target="_blank" rel="noopener" href="https://bf.zzxworld.com/s/876") BlogFinder 
            strong | 聚合优秀的个人博客，发掘优质的个人博客文章和内容。
          li 
            emp
              a(target="_blank" rel="noopener" href="https://storeweb.cn/site/o/1674") 个性商店 
            strong | 一个精致的，带社交元素的个人网站发布平台，博客收录网站
          li 
            emp
              a(target="_blank" rel="noopener" href="https://boke.lu/icat-author/18") 博客录 
            strong | boke.lu · 博客收录展示平台
      h2 更多主页平台
      strong
        ul
          li 抖音号：y59851
          li 微信公众号：卡布是只猫 (iCat-KaBu）、奇诺是只猫 (iCat-QiNuo）、美式是只猫 (iCat-MeiShi）、小王爱吃糖
          li Telegram: 
            emp
              a(target="_blank" rel="noopener" href="https://t.me/yife68") 亦封
          li GitHub: 
            emp
              a(target="_blank" rel="noopener" href="https://github.com/yife68") 亦封
          li Gitee: 
            emp
              a(target="_blank" rel="noopener" href="https://gitee.com/yife68") 亦封
      h3 如果遇到问题可以去上方频道私信我！

  .icat-author-content
    .icat-author-content-item.single.reward
      .icat-author-content-item-tips 致谢
      span.icat-author-content-item-title 赞赏名单
      .icat-author-content-item-description 非必要无需赞助！同时也感谢赞赏的喵友，让我感受到写博客这件事情能够给你们创造了价值
        each i in site.data.reward
          - let rawData = [...i.reward_list]
          .reward-list-all
            - let reward_list_amount = i.reward_list.sort((a,b)=>b.amount -  a.amount)
            each item, index in reward_list_amount
              .reward-list-item
                .reward-list-item-name=item.name
                .reward-list-bottom-group
                  if item.amount >= 50
                    .reward-list-item-money(style='background:#ffc93e')=`¥${item.amount}`
                  else
                    .reward-list-item-money=`¥${item.amount + (item.suffix ? item.suffix : "")}`
                  .datatime.reward-list-item-time(datatime=item.datatime)=new Date(item.datatime).toISOString().slice(0, -14)
          .reward-list-updateDate
            | 更新时间：
            time.datatime.reward-list-updateDate-time(datatime=rawData[0].datatime)=new Date(rawData[0].datatime).toISOString().slice(0, -14)
      .post-reward
        #con
        #TA-con(type='button', onclick='reward()')
          #text-con
            #linght
            #TA 为TA充电
        #tube-con
          svg(viewBox='0 0 1028 385', fill='none', xmlns='http://www.w3.org/2000/svg')
            path(d='M1 77H234.226L307.006 24H790', stroke='#e5e9ef', stroke-width='20')
            path(d='M0 140H233.035L329.72 71H1028', stroke='#e5e9ef', stroke-width='20')
            path(d='M1 255H234.226L307.006 307H790', stroke='#e5e9ef', stroke-width='20')
            path(d='M0 305H233.035L329.72 375H1028', stroke='#e5e9ef', stroke-width='20')
            rect(y='186', width='236', height='24', fill='#e5e9ef')
            ellipse(cx='790', cy='25.5', rx='25', ry='25.5', fill='#e5e9ef')
            circle(r='14', transform='matrix(1 0 0 -1 790 25)', fill='white')
            ellipse(cx='790', cy='307.5', rx='25', ry='25.5', fill='#e5e9ef')
            circle(r='14', transform='matrix(1 0 0 -1 790 308)', fill='white')
          #mask
            svg(viewBox='0 0 1028 385', fill='none', xmlns='http://www.w3.org/2000/svg')
              path(d='M1 77H234.226L307.006 24H790', stroke='#f25d8e', stroke-width='20')
              path(d='M0 140H233.035L329.72 71H1028', stroke='#f25d8e', stroke-width='20')
              path(d='M1 255H234.226L307.006 307H790', stroke='#f25d8e', stroke-width='20')
              path(d='M0 305H233.035L329.72 375H1028', stroke='#f25d8e', stroke-width='20')
              rect(y='186', width='236', height='24', fill='#f25d8e')
              ellipse(cx='790', cy='25.5', rx='25', ry='25.5', fill='#f25d8e')
              circle(r='14', transform='matrix(1 0 0 -1 790 25)', fill='white')
              ellipse(cx='790', cy='307.5', rx='25', ry='25.5', fill='#f25d8e')
              circle(r='14', transform='matrix(1 0 0 -1 790 308)', fill='white')
          #orange-mask
            svg(viewBox='0 0 1028 385', fill='none', xmlns='http://www.w3.org/2000/svg')
              path(d='M1 77H234.226L307.006 24H790', stroke='#ffd52b', stroke-width='20')
              path(d='M0 140H233.035L329.72 71H1028', stroke='#ffd52b', stroke-width='20')
              path(d='M1 255H234.226L307.006 307H790', stroke='#ffd52b', stroke-width='20')
              path(d='M0 305H233.035L329.72 375H1028', stroke='#ffd52b', stroke-width='20')
              rect(y='186', width='236', height='24', fill='#ffd52b')
              ellipse(cx='790', cy='25.5', rx='25', ry='25.5', fill='#ffd52b')
              circle(r='14', transform='matrix(1 0 0 -1 790 25)', fill='white')
              ellipse(cx='790', cy='307.5', rx='25', ry='25.5', fill='#ffd52b')
              circle(r='14', transform='matrix(1 0 0 -1 790 308)', fill='white')
          p#people
            | <a href="https://afdian.net/a/yife68">爱发电</a>
            b ：
            | 小喵爪
script(src=url_for(theme.CDN.option.countup_js))
script(src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/gsap/3.9.1/gsap.min.js")
script.
  (() => {
    function isInViewPortOfOne(el) {
      if (!el) return;
      const viewPortHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
      const offsetTop = el.offsetTop;
      const scrollTop = document.documentElement.scrollTop;
      const top = offsetTop - scrollTop;
      return top <= viewPortHeight;
    }
    fetch('https://v6-widget.51.la/v6/{掩码ID}/quote.js').then(res => res.text()).then((data) => {
        let title = ['最近活跃', '今日人数', '今日访问', '昨日人数', '昨日访问', '本月访问', '总访问量']
        let num = data.match(/(<\/span><span>).*?(\/span><\/p>)/g)

        num = num.map((el) => {
          let val = el.replace(/(<\/span><span>)/g, '')
          let str = val.replace(/(<\/span><\/p>)/g, '')
          return str
        })

        let statisticEl = document.getElementById('statistic')

        // 自定义不显示哪个或者显示哪个，如下为不显示 最近活跃访客 和 总访问量
        let statistic = []
        for (let i = 0; i < num.length; i++) {
            if (!statisticEl) return
            if (i == 0 || i == num.length - 1) continue;
            statisticEl.innerHTML += '<div><span>' + title[i] + '</span><span id='+ title[i] + '>' + num[i] + '</span></div>'
            queueMicrotask(()=> {
              statistic.push(new CountUp(title[i], 0, num[i], 0, 2, {
                  useEasing: true,
                  useGrouping: true,
                  separator: ',',
                  decimal: '.',
                  prefix: '',
                  suffix: ''
              }))
            })
        }

        function statisticUP () {
          let statisticElment = document.querySelector('.about-statistic.icat-author-content-item');
          if(isInViewPortOfOne(statisticElment)) {
            for (let i = 0; i < num.length; i++) {
              if (i == 0 || i == num.length - 1) continue;
              statistic[i-1].start();
            }
            document.removeEventListener('scroll', throttleStatisticUP);
          }
        }

        const selfInfoContentYear = new CountUp('selfInfo-content-year', 0, 2002, 0, 2, {
          useEasing: true,
          useGrouping: false,
          separator: ',',
          decimal: '.',
          prefix: '',
          suffix: ''
        })

        function scrollSelfInfoContentYear() {
          let selfInfoContentYearElment = document.querySelector('.icat-author-content-item.selfInfo.single');
          if (selfInfoContentYearElment && isInViewPortOfOne(selfInfoContentYearElment)) {
            selfInfoContentYear.start()
            document.removeEventListener('scroll', throttleScrollSelfInfoContentYear);
          }
        }
        const throttleStatisticUP = btf.throttle(statisticUP, 200)
        document.addEventListener('scroll', throttleStatisticUP, {passive: true})

        const throttleScrollSelfInfoContentYear = btf.throttle(scrollSelfInfoContentYear, 200)
        document.addEventListener('scroll', throttleScrollSelfInfoContentYear, {passive: true})
    });

    var pursuitInterval = null;
      pursuitInterval = setInterval(function () {
        const show = document.querySelector('span[data-show]')
        const next = show.nextElementSibling || document.querySelector('.first-tips')
        const up = document.querySelector('span[data-up]')

        if (up) {
          up.removeAttribute('data-up')
        }

        show.removeAttribute('data-show')
        show.setAttribute('data-up', '')

        next.setAttribute('data-show', '')
      }, 2000)

      document.addEventListener('pjax:send', function(){
        clearInterval(pursuitInterval);
      });

      var helloAboutEl = document.querySelector('.hello-about')
      helloAboutEl.addEventListener("mousemove", evt => {
        const mouseX = evt.offsetX;
        const mouseY = evt.offsetY;
        gsap.set(".cursor", {
          x: mouseX,
          y: mouseY,
        })

        gsap.to(".shape", {
          x: mouseX,
          y: mouseY,
          stagger: -0.1
        })
      })
  })()
  • 创建 [blogroot]/source/_data/reward.yml 添加赞赏数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
- class_name: 赞赏
  reward_list:
    - name: 🌙
      amount: 5.1
      datatime: 2023-04-30
      suffix: 喵粮
    - name: 罐装旺仔
      amount: 5
      datatime: 2022-12-11
      suffix: 小喵爪
    - name: 魏安安
      amount: 9.99
      datatime: 2022-11-07
      suffix: 喵粮
    - name: 热心
      amount: 6.66
      datatime: 2021-10-29
      suffix: 喵粮
    - name: 指南针先生
      amount: 10
      datatime: 2021-11-09
      suffix: 喵粮
  • 创建 [blogroot]/source/_data/creativity.yml 添加创造力数据
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
- class_name: 开启创造力
  creativity_list:
    - name: Vue
      color: "#b8f0ae"
      icon: https://s11.ax1x.com/2023/04/22/p9ZCMxP.png
    - name: Docker
      color: "#57b6e6"
      icon: https://s11.ax1x.com/2023/04/22/p9Z9BAH.png
    - name: Photoshop
      color: "#4082c3"
      icon: https://s11.ax1x.com/2023/04/22/p9Z9y9I.png
    - name: Node
      color: "#333"
      icon: https://s11.ax1x.com/2023/04/22/p9ZCu8I.png
    - name: AfterEffect
      color: "#989bf8"
      icon: https://s11.ax1x.com/2023/04/22/p9Z9NjK.png
    - name: Python
      color: "#fff"
      icon: https://s11.ax1x.com/2023/04/22/p9Z9fHg.png
    - name: Java
      color: "#fff"
      icon: https://s11.ax1x.com/2023/04/22/p9Z9z59.png
    - name: CSS3
      color: "#2c51db"
      icon: https://s11.ax1x.com/2023/04/22/p9Z9TCn.png
    - name: JS
      color: "#f7cb4f"
      icon: https://s11.ax1x.com/2023/04/22/p9Z9bvV.png
    - name: HTML
      color: "#e9572b"
      icon: https://s11.ax1x.com/2023/04/22/p9Z9ODU.png
    - name: Git
      color: "#df5b40"
      icon: https://s11.ax1x.com/2023/04/22/p9Z9xUJ.png
    - name: illustrator
      color: "#f29e39"
      icon: https://s11.ax1x.com/2023/04/22/p9Z94EQ.png
  • 新建 [blogroot]/themes/butterfly/source/css/_page/about/about.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
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
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
#page:has(#icat-about-page)
  border: 0
  box-shadow: none !important
  padding: 0 !important
  background: transparent !important


.icat-author-box
  position: relative
  margin: 34px 0 62px

  @media screen and (max-width: 768px)
    margin: 34px 0 44px

  .icat-author-img
    margin: auto
    border-radius: 50%
    overflow: hidden
    width: 180px
    height: 180px

    img
      border-radius: 50%
      overflow: hidden
      width: 180px
      height: 180px
      border: 6px solid var(--icat-white)

.image-dot
  width: 40px
  height: 40px
  background: #6bdf8f
  position: absolute
  border-radius: 50%
  border: 6px solid var(--icat-white)
  top: 50%
  left: 50%
  transform: translate(35px, 45px)

.icat-author-content
  display: flex
  flex-wrap: wrap
  justify-content: space-between
  width: 100%
  margin-top: 1rem

  @media screen and (max-width: 768px)
    margin-top: 0

  .icat-author-content-item
    width: 49%
    border-radius: 24px
    background: var(--icat-card-bg)
    border: var(--style-border-always)
    box-shadow: var(--icat-shadow-border)
    position: relative
    padding: 1rem 2rem
    overflow: hidden

    &:hover
      .card-background-icon
        transform: rotate(20deg)

    @media screen and (max-width: 768px)
      width: 100% !important
      margin-top: 1rem
      padding: 1rem

    .card-content
      position: absolute
      width: 100%
      height: 100%
      top: 0
      left: 0
      z-index: 2
      display: flex
      flex-direction: column
      padding: 1rem 2rem

    .icat-author-content-item-tips
      opacity: .8
      font-size: .6rem
      margin-bottom: 0.5rem

    .icat-author-content-item-title
      font-size: 36px
      font-weight: 700
      line-height: 1

    .skills-style-group
      position: relative

      .skills-list
        display: flex
        opacity: 0
        transition: 0.3s
        position: absolute
        width: 100%
        top: 0
        left: 0
        flex-wrap: wrap
        flex-direction: row
        margin-top: 10px

        .skill-info
          display: flex
          align-items: center
          margin-right: 10px
          margin-top: 10px
          background: var(--icat-background)
          border-radius: 40px
          padding: 4px 12px 4px 5px
          border: var(--style-border)
          box-shadow: var(--icat-shadow-border)

          .skill-icon
            width: 32px
            height: 32px
            border-radius: 32px
            display: flex
            align-items: center
            justify-content: center
            margin-right: 10px

            img
              width: 18px
              height: 18px
              margin: 0 auto !important

        .etc
          margin-right: 10px
          margin-top: 15px
          font-weight: 900

      .tags-group-all
        display: flex
        transform: rotate(0)
        transition: 0.3s

        .tags-group-wrapper
          margin-top: 40px
          display: flex
          flex-wrap: nowrap
          animation: rowup 60s linear infinite

          @keyframes rowup
            0%
              transform: translateX(0)
            100%
              transform: translateX(-50%)

          .tags-group-icon-pair
            margin-left: 1rem

            .tags-group-icon
              display: flex
              align-items: center
              justify-content: center
              color: #fff
              font-size: 66px
              font-weight: 700
              box-shadow: var(--icat-shadow-blackdeep)
              width: 120px
              height: 120px
              border-radius: 30px

              img
                width: 60%
                margin: 0 auto !important

              &:nth-child(even)
                margin-top: 1rem
                transform: translate(-60px)

  .myInfoAndSayHello
    display: flex
    flex-direction: column
    justify-content: center
    color: var(--icat-white)
    background: linear-gradient(120deg, #5b27ff 0, #00d4ff 100%)
    background-size: 200%
    animation: gradient 15s ease infinite
    width: 59.5%

    .title-one
      opacity: 0.8
      line-height: 1.3

    .title-two
      font-size: 36px
      font-weight: 700
      line-height: 1.1
      margin: 0.5rem 0

  .aboutsiteTips
    display: flex
    justify-content: center
    align-items: flex-start
    flex-direction: column
    width: 39.5%

    h2
      margin-right: auto
      font-size: 36px
      font-family: Helvetica
      line-height: 1.06
      letter-spacing: -0.02em
      color: var(--font-color)
      margin-top: 0

      .inline-word
        word-break: keep-all
        white-space: nowrap
      
      .mask
        height: 36px
        position: relative
        overflow: hidden
        margin-top: 4px

        span
          display: block
          box-sizing: border-box
          position: absolute
          top: 36px
          padding-bottom: var(--offset)
          background-size: 100% 100%
          -webkit-background-clip: text
          background-clip: text
          -webkit-text-fill-color: transparent
          background-repeat: no-repeat
          
          &[data-show]
            transform: translateY(-100%)
            transition: 0.5s transform ease-in-out

          &[data-up]
            transform: translateY(-200%)
            transition: 0.5s transform ease-in-out

          &:nth-child(1)
            background-image: linear-gradient(45deg, #0ecffe 50%, #07a6f1)

          &:nth-child(2)
            background-image: linear-gradient(45deg, #18e198 50%, #0ec15d)

          &:nth-child(3)
            background-image: linear-gradient(45deg, #8a7cfb 50%, #633e9c)

          &:nth-child(4)
            background-image: linear-gradient(45deg, #fa7671 50%, #f45f7f)

  .skills
    display: flex
    justify-content: center
    align-items: flex-start
    flex-direction: column
    width: 50%
    min-height: 450px

    &:hover
      .skills-style-group .tags-group-all
        opacity: 0
      .skills-style-group .skills-list
        opacity: 1

  .about-statistic
    min-height: 380px
    width: 39%
    background: url(https://yife68.gitee.io/icat-pic/blog/3.webp) no-repeat top //统计栏背景图
    background-size: cover
    color: var(--icat-white)
    overflow: hidden

    &:after
      box-shadow: 0 -159px 173px 71px #0c1c2c inset
      position: absolute
      content: ""
      width: 100%
      height: 100%
      top: 0
      left: 0

    #statistic
      font-size: 16px
      border-radius: 15px
      width: 100%
      color: var(--icat-white)
      display: flex
      justify-content: space-between
      flex-direction: row
      flex-wrap: wrap
      margin-top: 1rem
      margin-bottom: 2rem

      div
        display: flex
        justify-content: space-between
        flex-direction: column
        width: 50%
        margin-bottom: 0.5rem

        span

          &:first-child
            opacity: 0.8
            font-size: 0.6rem

          &:last-child
            font-weight: 700
            font-size: 34px
            line-height: 1
            white-space: nowrap

  .mapAndInfo
    width: 59%

  .column
    display: flex
    flex-direction: column
    justify-content: space-between

    @media screen and (max-width: 768px)
      width: 100% !important

    .map
      background: url(https://yife68.gitee.io/icat-pic/blog/4.webp) no-repeat center
      min-height: 160px
      max-height: 400px
      position: relative
      overflow: hidden
      margin-bottom: 0.5rem
      height: 60%
      background-size: 100%
      transition: 1s ease-in-out

      @media screen and (max-width: 768px)
        margin-bottom: 0

      &:hover
        background-size: 120%
        transition: 4s ease-in-out
        background-position-x: 0
        background-position-y: 22%
        .map-title
          bottom: -100%

      .map-title
        position: absolute
        bottom: 0
        left: 0
        width: 100%
        background: var(--icat-maskbg)
        padding: 0.5rem 2rem
        backdrop-filter: saturate(180%) blur(20px)
        -webkit-backdrop-filter: blur(20px)
        transition: 1s ease-in-out
        font-size: 20px
        border-radius: 0 0 24px 24px

        b
          color: var(--font-color)

    .selfInfo
      display: flex
      min-height: 100px
      max-height: 400px
      justify-content: space-between
      align-items: center
      flex-wrap: wrap
      height: -webkit-fill-available
      height: 40%

      @media screen and (max-width: 768px)
        height: 95%

      div
        display: flex
        flex-direction: column
        margin: 0.5rem 2rem 0.5rem 0

        .selfInfo-title
          opacity: 0.8
          font-size: 0.6rem
          line-height: 1
          margin-bottom: 8px

        .selfInfo-content
          font-weight: 700
          font-size: 34px
          line-height: 1

  .personalities
    position: relative
    width: 59%

    @media screen and (max-width: 768px)
      height: 170px

    .title-two
      font-size: 36px
      font-weight: 700
      line-height: 1.1

    .image
      position: absolute
      right: 30px
      top: 10px
      width: 220px
      transition: transform 2s cubic-bezier(0.13, 0.45, 0.21, 1.02)

      @media screen and (max-width: 768px)
        width: 90px

      img
        display: block
        margin: 0 auto 20px
        max-width: 100%
        transition: filter 375ms ease-in 0.2s

    &:hover
      .image
        transform: rotate(-10deg)

  .myphoto
    height: 60%
    min-height: 240px
    position: relative
    overflow: hidden
    width: 39%
    display: flex
    align-items: center
    justify-content: center

    img
      position: absolute
      min-width: 100%
      object-fit: cover
      transition: 0.6s
      animation: coverIn 2s ease-out forwards
      transition: transform 2s ease-out !important

    &:hover
      img
        transform: scale(1.1)

  .maxim
    font-size: 36px
    font-weight: 700
    line-height: 1.1
    display: flex
    align-items: flex-start
    flex-direction: column
    justify-content: center
    width: 39%

    .maxim-title
      display: flex
      flex-direction: column

  .buff
    height: 200px
    font-size: 36px
    font-weight: 700
    line-height: 1.1
    display: flex
    align-items: flex-start
    flex-direction: column
    justify-content: center
    background: linear-gradient(120deg, #ff27e8 0, #ff8000 100%)
    color: var(--icat-white)
    background-size: 200%
    animation: gradient 15s ease infinite
    min-height: 200px
    height: fit-content
    width: 59%

    .card-content
      display: flex
      flex-direction: column
      justify-content: center

      .buff-title
        display: flex
        flex-direction: column

    .card-background-icon
      font-size: 12rem
      opacity: 0.2
      position: absolute
      right: 0
      bottom: -40%
      transform: rotate(30deg)
      transition: 2s ease-in-out

  .game-yuanshen
    background: url(https://yife68.gitee.io/icat-pic/blog/7.webp) no-repeat top
    background-size: cover
    min-height: 300px
    overflow: hidden
    color: var(--icat-white)
    width: 59%

    &:after
      box-shadow: 0 -69px 203px 11px #575d8b inset
      position: absolute
      content: ""
      width: 100%
      height: 100%
      top: 0
      left: 0

  .comic-content
    width: 39%
    background: url(https://yife68.gitee.io/icat-pic/blog/8.webp) no-repeat top
    background-size: cover
    min-height: 300px
    overflow: hidden
    color: var(--icat-white)

    &:after
      box-shadow: 0 -48px 203px 11px #505050 inset
      position: absolute
      content: ""
      width: 100%
      height: 100%
      top: 0
      left: 0

  .like-technology
    background: url(https://yife68.gitee.io/icat-pic/blog/9.webp) no-repeat
    background-size: cover
    min-height: 230px
    color: var(--icat-white)

  .like-music
    background: url(https://yife68.gitee.io/icat-pic/blog/10.webp) no-repeat top
    background-size: cover
    min-height: 400px
    color: var(--icat-white)
    overflow: hidden

    &:after
      box-shadow: 0 -69px 203px 11px #212121 inset
      position: absolute
      content: ""
      width: 100%
      height: 100%
      top: 0
      left: 0

  .reward-list-all
    display: flex
    flex-wrap: wrap
    flex-direction: row
    margin-top: 1rem
    margin-bottom: 0.5rem
    margin-left: -0.25rem
    margin-right: -0.25rem

    .reward-list-item
      padding: 1rem
      border-radius: 12px
      border: var(--style-border-always)
      width: calc((100% / 3) - 0.5rem)
      margin: 0 0.25rem 0.5rem 0.25rem
      box-shadow: var(--icat-shadow-border)

      @media screen and (max-width: 768px)
        width: 100% !important

      .reward-list-item-name
        font-size: 1rem
        font-weight: 700
        line-height: 1
        margin-bottom: 0.5rem

      .reward-list-bottom-group
        display: flex
        align-items: center
        justify-content: space-between

      .reward-list-item-money
        padding: 4px
        background: var(--font-color)
        color: var(--card-bg)
        font-size: 12px
        line-height: 1
        border-radius: 4px
        margin-right: 4px
        white-space: nowrap

      .reward-list-item-time
        font-size: 12px
        color: var(--icat-secondtext)
        white-space: nowrap


  .post-reward
    position: absolute
    margin-top: 0px
    width: auto
    text-align: none
    pointer-events: none
    right: 2rem
    top: 2rem

    >*
      pointer-events: auto


.hello-about
  margin: 20px auto
  border-radius: 24px
  background: var(--icat-card-bg)
  border: var(--style-border-always)
  box-shadow: var(--icat-shadow-border)
  position: relative
  overflow: hidden
  user-select: none

  @media screen and (max-width: 768px)
    margin: 1rem auto 0

  .cursor
    position: absolute
    background: #2128bd
    width: 20px
    height: 20px
    margin: -10px 0 0 -10px
    border-radius: 50%
    will-change: transform
    user-select: none
    pointer-events: none
    z-index: 3

    &:selection
      color: #fff
      background: #2128bd

  .shapes
    position: relative
    height: 315px
    width: 100%
    background: #2128bd
    overflow: hidden
    border-radius: 24px
    border: var(--style-border)

    .shape 
      will-change: transform
      position: absolute
      border-radius: 50%
    
    .shape.shape-1
      background: #005ffe
      width: 650px
      height: 650px
      margin: -325px 0 0 -325px

    .shape.shape-2
      background: #ffe5e3
      width: 440px
      height: 440px
      margin: -220px 0 0 -220px

    .shape.shape-3
      background: #ffcc57
      width: 270px
      height: 270px
      margin: -135px 0 0 -135px

  .content
    top: 0
    left: 0
    position: absolute
    display: flex
    justify-content: center
    align-items: center
    height: 315px
    width: 100%
    background: #fff
    mix-blend-mode: screen
    border-radius: 24px

    h1
      font-size: 200px
      color: #000
      margin: 0
      text-align: center
      font: inherit
      vertical-align: baseline
      line-height: 1
      font-size: calc((0.0989119683 * 100vw + (58.5558852621px)))
      width: 100%
      height: 100%
      display: flex
      align-items: center
      justify-content: center

      @media (min-width: 419px)
        font-size: calc((0.0989119683 * 100vw + (58.5558852621px)))


.careers
  min-height: 400px

  .careers-group
    margin-top: 12px

    .careers-item
      display: flex
      align-items: center

      .circle
        width: 16px
        height: 16px
        margin-right: 8px
        border-radius: 16px

      .name
        color: var(--icat-secondtext)

  img
    position: absolute
    left: 0
    bottom: 20px
    width: 100%
    transition: 0.6s


.icat-banner-button-group
  position: absolute
  bottom: 1rem
  right: 2rem

  .banner-button
    height: 40px
    width: 124px
    border-radius: 20px
    box-shadow: var(--icat-shadow-border)
    justify-content: center
    background: var(--icat-card-bg)
    color: var(--font-color)
    display: flex
    align-items: center
    z-index: 1
    transition: 0.3s
    cursor: pointer

    @media screen and (max-width: 768px)
      width: 40px
      border: var(--style-border-always)
      background: var(--icat-white)
      color: var(--icat-black)

    i
      font-size: 1.15rem

      @media screen and (max-width: 768px)
        font-size: .9rem

    &:hover
      background: var(--icat-main)
      color: var(--icat-white)
      border-radius: 20px !important

    .banner-button-text
      padding: 0 6px

      @media screen and (max-width: 768px)
        display: none


.post-tips
  color: var(--icat-gray)
  font-size: 14px
  position: absolute
  bottom: 1rem
  left: 2rem

  @media screen and (max-width: 768px)
    left: auto

  a
    color: var(--icat-gray) !important
    border: none !important


.content-bottom
  margin-top: auto
  display: flex
  align-items: center
  justify-content: space-between

  .icon-group
    display: flex
    position: relative

    i
      display: inline-block
      width: 143px
      height: 18px
      margin-right: 0.5rem


.single
  width: 100% !important

#page

  .page-title
    display: none !important

[data-theme="dark"]
  .hello-about

    .content
      background: transparent

    h1
      color: var(--icat-white)

  .icat-author-content

    .map
      background: url(https://yife68.gitee.io/icat-pic/blog/5.webp) no-repeat center
      background-size: 100%
  • 新建 [blogRoot]/themes/butterfly/source/css/about.css 样式文件，并新增以下内容
    （也可以在自建的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
.post-reward .reward-button {
  display: inline-block;
  padding: 4px 24px;
  background: var(--btn-bg);
  color: var(--btn-color);
  cursor: pointer;
}
.post-reward:hover .reward-button {
  background: var(--btn-hover-color);
}
.post-reward:hover .reward-button>.reward-main {
  display: block;
}
.post-reward .reward-main {
  position: absolute;
  bottom: 40px;
  left: -23%;
  z-index: 100;
  display: none;
  padding: 0 0 15px;
}
.post-reward .reward-main .reward-all {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  margin: 0;
  padding: 20px 10px;
  border-radius: 4px;
  background: var(--reward-pop);
}
.post-reward .reward-main .reward-all:before {
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 20px;
  content: '';
}
.post-reward .reward-main .reward-all:after {
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  margin: 0 auto;
  width: 0;
  height: 0;
  border-top: 13px solid var(--reward-pop);
  border-right: 13px solid transparent;
  border-left: 13px solid transparent;
  content: '';
}
.post-reward .reward-main .reward-all .reward-item {
  display: inline-block;
  padding: 0 8px;
  list-style-type: none;
  vertical-align: top;
}
.post-reward .reward-main .reward-all .reward-item img {
  width: 130px;
  height: 130px;
}
.post-reward .reward-main .reward-all .reward-item .post-qr-code-desc {
  width: 130px;
  color: #858585;
}
.author-content-item.single.reward .reward-list-updateDate {
  color: var(--icat-gray);
  font-size: 14px;
}
#console.reward-show,#console.show {
  opacity: 1;
  pointer-events: all;
}
#console.reward-show .console-mask,#console.show .console-mask {
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.about-reward {
  position: absolute;
  top: 1rem;
  right: 2rem;
}
.reward #con {
  position: relative;
  width: 350px;
  height: 85px;
  border-radius: 4px;
}
.reward #TA-con {
  position: absolute;
  top: 50%;
  left: 10%;
  width: 157px;
  height: 50px;
  border-radius: 4px;
  background-color: #f25d8e;
  box-shadow: 0 4px 4px rgba(255,112,159,.3);
  cursor: pointer;
  transform: translateY(-50%);
}
.reward #text-con {
  position: relative;
  margin: 0 auto;
  width: 100px;
  height: 100%;
}
.reward #linght {
  position: absolute;
  top: 36%;
  left: 4px;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 10px;
  border-top: 10px solid #fff;
  border-radius: 4px;
  transform: rotate(-55deg);
}
.reward #linght::after {
  position: absolute;
  top: -13px;
  left: -11px;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 10px;
  border-top: 10px solid #fff;
  border-radius: 4px;
  content: "";
  transform: rotate(180deg);
}
.reward #TA {
  float: right;
  color: #fff;
  font-size: 15px;
  line-height: 50px;
}
.reward #TA-con:hover {
  background-color: #ff6b9a;
}
.reward #tube-con {
  position: absolute;
  top: 15px;
  right: -5px;
  width: 157px;
  height: 55px;
}
.reward svg {
  width: 100%;
  height: 100%;
}
.reward #mask {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: all .5s;
}
.reward #mask svg {
  width: 157px;
  height: 55px;
}
.reward #TA-con:hover+#tube-con>#mask {
  width: 157px;
}
.reward #TA-con:hover+#tube-con>#orange-mask {
  animation: move1 .5s linear .2s infinite;
}
.reward #TA-con:hover+#tube-con>#orange-mask svg {
  animation: movetwo .5s linear .2s infinite;
}
.reward #orange-mask {
  position: absolute;
  top: 0;
  left: -15px;
  overflow: hidden;
  width: 18px;
  height: 100%;
}
.reward #orange-mask svg {
  position: absolute;
  top: 0;
  left: 15px;
  width: 157px;
  height: 55px;
}
@keyframes move1 {
  0% {
    left: -15px;
  }
  100% {
    left: 140px;
  }
}
@keyframes movetwo {
  0% {
    left: 15px;
  }
  100% {
    left: -140px;
  }
}
.reward #people {
  position: absolute;
  top: 4px;
  right: 10px;
  color: #aaa;
  font-size: 12px;
  font-family: "雅黑";
}
.reward #people>b {
  color: #777;
}

@media screen and (min-width:768px) and (max-width:896px) {
  .author-content-item.like-music .content-bottom .tips {
    display: none;
  }
}
@media screen and (max-width:768px) {
  .post-reward {
    display: none;
  }
  .layout>div:first-child:not(.recent-posts) {
    padding: 1rem 1rem!important;
    box-shadow: none!important;
  }
  #selfInfo-content-year {
    width: 90px;
  }
  .console-card-group-reward .reward-all .reward-item img {
    width: 130px;
    height: 130px;
  }
  .reward .about-reward #con {
    width: 170px;
  }
  .reward #tube-con {
    display: none;
  }
}
/* 响应式 */

/* 打赏充电样式 */
  • 创建 [blogRoot]/source/js/reward.js 文件，并新增以下内容，用来处理打赏弹窗
    （或写在自建的公共 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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
function reward(){
  Swal.fire({
    title: '<strong>您正在为 <u>MeuiCat</u> 充电</strong>',
    html: '<b>请选择您的付款方式</b>',
    icon: 'info',
    showCancelButton: true,
    confirmButtonText:
      '<i class="iconfont icat-alipay"></i> 支付宝',
    cancelButtonText:
      '<i class="iconfont icat-weixin"></i> 微信支付',
    confirmButtonColor: '#1677FF',
    cancelButtonColor: '#2AAE67',
  }).then((result) => {
    if (result.isConfirmed) {
      Swal.fire({
        title: '感谢您',
        html: '请打开支付宝 <b>[扫一扫]</b> 以充电',
        imageUrl: 'https://yife68.gitee.io/icat-pic-2022/03/19/alipay.jpg',
        imageWidth: 175,
        imageHeight: 175,
        imageAlt: 'Custom image'
      }).then((result) => {
        Swal.fire(
          '充电成功',
          '感谢您的支持',
          'success'
        )
      })
    } else if (
      result.dismiss === Swal.DismissReason.cancel
    ) {
      Swal.fire({
        title: '感谢您',
        html: '请打开微信 <b>[扫一扫]</b> 以充电',
        imageUrl: 'https://yife68.gitee.io/icat-pic-2022/03/19/wechat.jpg',
        imageWidth: 175,
        imageHeight: 175,
        imageAlt: 'Custom image'
      }).then((result) => {
        Swal.fire(
          '充电成功',
          '感谢您的支持',
          'success'
        )
      })
    }
  })
}

// 打赏弹窗
  • 在 _config.butterfly.yml 主题配置文件中 inject 下的 head 引入 about.css reward.js sweetalert2.all.min.js
1
2
3
4
5
6
7
8
9
10
11
  ···

inject:
  head:
    - <link rel="stylesheet" href="/css/about.css"> # 关于页面 - 打赏弹窗样式
    - <script type="text/javascript" src ="/js/reward.js" ></script> # 关于页面 - 打赏充电JS
    - <script src="https://cdn1.tianli0.top/npm/sweetalert2@11.6.16/dist/sweetalert2.all.min.js"></script> # 关于页面 - 打赏弹窗逻辑
  bottom:
    - ···

  ···
  • 创建 [Blogroot]/source/js/countup.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
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
var CountUp = function (target, startVal, endVal, decimals, duration, options) {
    var self = this;
    self.version = function () {
      return "1.9.2";
    };
    self.options = {
      useEasing: true,
      useGrouping: true,
      separator: ",",
      decimal: ".",
      easingFn: easeOutExpo,
      formattingFn: formatNumber,
      prefix: "",
      suffix: "",
      numerals: [],
    };
    if (options && typeof options === "object") {
      for (var key in self.options) {
        if (options.hasOwnProperty(key) && options[key] !== null) {
          self.options[key] = options[key];
        }
      }
    }
    if (self.options.separator === "") {
      self.options.useGrouping = false;
    } else {
      self.options.separator = "" + self.options.separator;
    }
    var lastTime = 0;
    var vendors = ["webkit", "moz", "ms", "o"];
    for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
      window.requestAnimationFrame = window[vendors[x] + "RequestAnimationFrame"];
      window.cancelAnimationFrame =
        window[vendors[x] + "CancelAnimationFrame"] || window[vendors[x] + "CancelRequestAnimationFrame"];
    }
    if (!window.requestAnimationFrame) {
      window.requestAnimationFrame = function (callback, element) {
        var currTime = new Date().getTime();
        var timeToCall = Math.max(0, 16 - (currTime - lastTime));
        var id = window.setTimeout(function () {
          callback(currTime + timeToCall);
        }, timeToCall);
        lastTime = currTime + timeToCall;
        return id;
      };
    }
    if (!window.cancelAnimationFrame) {
      window.cancelAnimationFrame = function (id) {
        clearTimeout(id);
      };
    }
    function formatNumber(num) {
      num = num.toFixed(self.decimals);
      num += "";
      var x, x1, x2, x3, i, l;
      x = num.split(".");
      x1 = x[0];
      x2 = x.length > 1 ? self.options.decimal + x[1] : "";
      if (self.options.useGrouping) {
        x3 = "";
        for (i = 0, l = x1.length; i < l; ++i) {
          if (i !== 0 && i % 3 === 0) {
            x3 = self.options.separator + x3;
          }
          x3 = x1[l - i - 1] + x3;
        }
        x1 = x3;
      }
      if (self.options.numerals.length) {
        x1 = x1.replace(/[0-9]/g, function (w) {
          return self.options.numerals[+w];
        });
        x2 = x2.replace(/[0-9]/g, function (w) {
          return self.options.numerals[+w];
        });
      }
      return self.options.prefix + x1 + x2 + self.options.suffix;
    }
    function easeOutExpo(t, b, c, d) {
      return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b;
    }
    function ensureNumber(n) {
      return typeof n === "number" && !isNaN(n);
    }
    self.initialize = function () {
      if (self.initialized) {
        return true;
      }
      self.error = "";
      self.d = typeof target === "string" ? document.getElementById(target) : target;
      if (!self.d) {
        self.error = "[CountUp] target is null or undefined";
        return false;
      }
      self.startVal = Number(startVal);
      self.endVal = Number(endVal);
      if (ensureNumber(self.startVal) && ensureNumber(self.endVal)) {
        self.decimals = Math.max(0, decimals || 0);
        self.dec = Math.pow(10, self.decimals);
        self.duration = Number(duration) * 1000 || 2000;
        self.countDown = self.startVal > self.endVal;
        self.frameVal = self.startVal;
        self.initialized = true;
        return true;
      } else {
        self.error = "[CountUp] startVal (" + startVal + ") or endVal (" + endVal + ") is not a number";
        return false;
      }
    };
    self.printValue = function (value) {
      var result = self.options.formattingFn(value);
      if (self.d.tagName === "INPUT") {
        this.d.value = result;
      } else {
        if (self.d.tagName === "text" || self.d.tagName === "tspan") {
          this.d.textContent = result;
        } else {
          this.d.innerHTML = result;
        }
      }
    };
    self.count = function (timestamp) {
      if (!self.startTime) {
        self.startTime = timestamp;
      }
      self.timestamp = timestamp;
      var progress = timestamp - self.startTime;
      self.remaining = self.duration - progress;
      if (self.options.useEasing) {
        if (self.countDown) {
          self.frameVal = self.startVal - self.options.easingFn(progress, 0, self.startVal - self.endVal, self.duration);
        } else {
          self.frameVal = self.options.easingFn(progress, self.startVal, self.endVal - self.startVal, self.duration);
        }
      } else {
        if (self.countDown) {
          self.frameVal = self.startVal - (self.startVal - self.endVal) * (progress / self.duration);
        } else {
          self.frameVal = self.startVal + (self.endVal - self.startVal) * (progress / self.duration);
        }
      }
      if (self.countDown) {
        self.frameVal = self.frameVal < self.endVal ? self.endVal : self.frameVal;
      } else {
        self.frameVal = self.frameVal > self.endVal ? self.endVal : self.frameVal;
      }
      self.frameVal = Math.round(self.frameVal * self.dec) / self.dec;
      self.printValue(self.frameVal);
      if (progress < self.duration) {
        self.rAF = requestAnimationFrame(self.count);
      } else {
        if (self.callback) {
          self.callback();
        }
      }
    };
    self.start = function (callback) {
      if (!self.initialize()) {
        return;
      }
      self.callback = callback;
      self.rAF = requestAnimationFrame(self.count);
    };
    self.pauseResume = function () {
      if (!self.paused) {
        self.paused = true;
        cancelAnimationFrame(self.rAF);
      } else {
        self.paused = false;
        delete self.startTime;
        self.duration = self.remaining;
        self.startVal = self.frameVal;
        requestAnimationFrame(self.count);
      }
    };
    self.reset = function () {
      self.paused = false;
      delete self.startTime;
      self.initialized = false;
      if (self.initialize()) {
        cancelAnimationFrame(self.rAF);
        self.printValue(self.startVal);
      }
    };
    self.update = function (newEndVal) {
      if (!self.initialize()) {
        return;
      }
      newEndVal = Number(newEndVal);
      if (!ensureNumber(newEndVal)) {
        self.error = "[CountUp] update() - new endVal is not a number: " + newEndVal;
        return;
      }
      self.error = "";
      if (newEndVal === self.frameVal) {
        return;
      }
      cancelAnimationFrame(self.rAF);
      self.paused = false;
      delete self.startTime;
      self.startVal = self.frameVal;
      self.endVal = newEndVal;
      self.countDown = self.startVal > self.endVal;
      self.rAF = requestAnimationFrame(self.count);
    };
    if (self.initialize()) {
      self.printValue(self.startVal);
    }
  };
  • 在 _config.butterfly.yml 中的 CDN 下的 option 引入 countup.js
    （ + 号直接删除 即是正常缩进）
1
2
3
4
5
6
7
8
9
  ···

CDN:
  option:
  # 可以在这里更换部分文件,会覆盖原有的配置
    # main_css:
      ···
    # busuanzi:
+    countup_js: /js/countup.js
  • 如果开启了 51la统计 就需要在 _config.butterfly.yml 主题配置文件中 inject 下的 head 引入文件
1
2
3
4
5
6
7
8
inject:
  head:
    - <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script> # 51统计样式
    - <script> LA.init({id:"# 自己的id",ck:"# 自己的ck"})</script> # 51统计 - id & ck
    - <script src="https://sdk.51.la/perf/js-sdk-perf.min.js" crossorigin="anonymous"></script> # 灵雀监控样式
    - <script>new LingQue.Monitor().init({id:"# 自己的id",sendSuspicious:true});</script> # 灵雀监控 - id
  bottom:
    - ···

其中 你的ID 为上方about.pug提到的 {掩码ID}
而 你的CK 可以在 站点配置-参数设置-统计代码-手动安装（通用） 中找到

安装sweetalert2

  • 在 [blogroot] 执行该命令安装插件
1
npm install sweetalert2 --save

关于about内容

  • 第4行 中的 https://s11.ax1x.com/2023/07/07/pCc1TSO.jpg 为页面最上方头像

  • 第84行 中的 https://yife68.gitee.io/icat-pic/blog/2.webp 为生涯板块的图像

  • 第198行 至 第274行 为使用 Plaintext 语法撰写的心路历程，需自行修改

  • 第352行 中的 {掩码ID} 由访问统计板块中 51la统计 提供
    （需要在 站点配置-参数设置-数据挂件 中开启数据挂件）

]]> 经验分享 Butterfly主题 魔改记录 https://meuicat.com/posts/319c2ac7.html#disqus_thread 近况记事 - 9 https://meuicat.com/posts/48e96712.html https://meuicat.com/posts/48e96712.html Mon, 09 Oct 2023 10:35:21 GMT 天冷加衣；月更记事碎碎念~ 国庆假期结束，估摸着这会喵友们都在无精打采的干活吧，上篇至今也有近月之久，正好来分享下我与国庆的那些事~
这一路走走停停，有惊喜，有遗憾，旅行不一定要有意义，看看自己没有踏足的土地，去别人活腻的城市体验一番，吃一吃别人吃厌的东西
很多地方我们一生可能只会去一次，遗憾是常有的，而释怀是一生的必修课

前些天布柒糖群里有人分享了一份长达63页的PPT，我也是整整用了十分钟才看完，其实我本来是不想聊这个事情的，因为我觉得出轨简直是..当今家常便饭了吧，太普遍太正常太屡见不鲜了，这简直好像都不是件事。出轨，我也精神出轨过，我也曾背叛过一段感情，就似那句：辜负真心的人，要吞一万根针
其实还挺想帮这哥们说几句的，这哥们真的太man了，太是个男人了，他能写出63页PPT，他得承受多大的心理煎熬和心理压力，他敲的每一个字都像一把利刃一样重复刺在自己的胸口，敲的每一个字，都像一个炸弹一样在自己的心中爆炸开来。他回忆起和自己前女友的点点滴滴都有可能是欺骗，是谎言，他女朋友所跟他保证的任何一句话也都是放屁，他女朋友当初所违约或是说“老公我今天可能晚点到”又或说“明天我没空”这些话也都有可能是这女生为了出轨而找的借口
切抛开出轨不聊，无谓就是出轨变心了，也甚至可能不是变心了，那两个出轨对象她真的爱吗、喜欢吗？不，不可能的。这只是在维持所谓的新鲜感，或者说，只是需要在不同的男人身上所获取到自己的不同需求，金钱、两性、精神寄托等等
总而言之呢，我的结论，又或者说看完这个东西之后的一些反思，首先还是一个劝告，异地恋可以谈但是不推荐，不敢说异地恋都翻车，因为我也见过好的，人家现在感情也很好，马上也要领证了。另外呢就是想说，任何时候，千万不要把除自己以外的任何人，当做你的未来人生蓝图的规划中心，不要以其他人为中心区规划你的未来，这个其他人包括亲戚朋友，父母、恋人、兄弟姐妹。因为你一旦以其他人为中心去规划你的未来的话，当离别来临时，人生将沉入无底黑暗，你的世界会随即崩塌
最后，还是那句话啊，无论男女，不管婚前婚后，背叛感情的总归会付出点什么，人们将其称之为“代价”和“报应”


截图内容

上月中旬，许久不见的老同学忽然联系到我，邀请我到中山参加乔迁喜宴，一并的还有17的老吴和小谭，薛和古也有。很久没见了，也很久我们这群人没聚到一块了，但奈何那几日刚好碰上我一亲戚结婚，而我也需要到桂林接亲。薛也因不碰巧，脚受伤，没能去成。毕竟分道扬镳后，再见需迎万难

婚礼过后，顺便回了一趟老家的新房里，把网络布局给做一下（我不是专业的，所以走线有点乱..别在意这些细节）。从上到下的设备分别是：
无线路由器（当op用）：TL-XDR6088；排插：德木pdu机柜排插；硬盘录像机：TL-NVR6108-L8P；第二排左边黑色的：广电的家庭服务器）其实就是调制调解器，用的还是同轴线）；中间白色的：移动光猫；右边黑色的：R86S万兆软路由；右边蓝色的：2.5G光口转电口，光口插着猫棒，电信的宽带；万兆交换机：TL-ST5008F；24千兆电口+4万兆光口 交换机：TL-SH5428；NAS：威联通 TS-551；UPS：雷迪斯 H1000M；机柜外面的UPS：雷迪斯 D1500

我对网络要求还是蛮高的，即使不常回老家，但还是要用到的时候，能物有所值，最最最重要的是，终于有一个属于自己的家了，在这个世界，有那么一小块属于我的地方

“雾失楼台，月迷津渡”
中秋前夕，便跟我爹请好了假，26号便踏上了本次旅程的第一站：郴州。云和溪流，雾船渔夫和落日夕阳，现在我是置身于山野水中的云鹤
夕阳西下，我在天边放了一把大火，烧的云海鲜红；玲在属于她的战场 – 厨房，也放了一把大火，炒的热火朝天。我匮乏的词库无法表达玲厨艺的精湛，只觉得用任何赞美之词来歌颂都不为过，秋水大雪火光暮色，都等我吃完这顿饭再说

每个地方的记忆都需停留在离别前，在前往下一站时，这方山水景色的记忆将印刻在我脑海的最深处

北上旅记 - 岳阳
记于二零二三年 第十七篇 湖南岳阳

在长沙游玩时，遇见两个老人家问我：汉庭酒店怎么走？估摸着大概7、80岁的老两口，从武汉来长沙游玩，大概是早晨出来散步，累了准备回酒店休息。这附近到是有很多个汉庭，但具体问的时候，他们又说在橘子酒店，我便提出带他们去橘子附近，看看能不能想起到底是哪一家，两位老人却拒绝了，估计是怕我们骗他，他们便又向其他路人打听
看着他们到处询问，真的很想帮他们，几次说带他们去找酒店，他们也都拒绝了，老爷子还双手合十的表示感谢。估计是不相信有这么好心助人的，愿意亲自领他们去找，或者是真的不想麻烦路人。心里隐隐有些难受，两个老人出门旅游真的不容易

题外话：
给家里有老人，如果他们要独自出门，就告诉他们带上纸和笔，把酒店的电话，出门乘车的站点都记下，乘坐地铁记好几号出口，以及附近的标志性建筑物

“列车运行前方到站是 – 武汉车站，ladies and gentleman…”
此刻，自由的灵魂不再困顿于荆棘，我是游荡在鄂城的浪子

北上旅记 - 黄冈
记于二零二三年 第十九篇 湖北黄冈

最后的最后：
“假期余额不足，请尽快调整心情，投入到工作中..”
玲的假期也到了最后一天，我也面临了两个选择，继续只身一人走完剩下的旅程，又或是直接到终点站：上海，看完女儿后，安心回去搬砖干活。纠结一翻后，便觉得一个人的旅程总是会缺少些什么，便选择了后者

小耶不管多久没见，完全不害怕我，反倒是一直贴着我，对我一如既往的粘人，一叫名字就小跑到脚边贴贴，让老夫的少女心，狠狠沦陷了~ （当然了，买了超多它爱吃的零食和罐头，足够撑到我下次再来看它，我这可比她妈对它好一百倍）


旅程景色

[{"url":"https://img.meuicat.com/posts/2023/10/14.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/10/15.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/10/16.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/10/17.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/10/18.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/10/19.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/10/20.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/10/21.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/10/22.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/10/23.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/10/24.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/10/25.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/10/26.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/10/27.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/10/28.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/10/29.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/10/30.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/10/31.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/10/32.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/10/33.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/10/34.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/10/35.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/10/36.webp","alt":""}]
]]> 生活随笔 封の唠叨 https://meuicat.com/posts/48e96712.html#disqus_thread Butterfly的魔改教程：待办清单 https://meuicat.com/posts/8ac5bd01.html https://meuicat.com/posts/8ac5bd01.html Fri, 06 Oct 2023 16:20:40 GMT 给你的博客记录一个生活清单页

📚 更多文档目录

🚀 搭建教程 | 1 - 📑 前置教程 | 2 - 🎈 主题调整 | 3 - ✨ 魔改教程 | 4 - 🐈 重构自用数据记录

本篇教程基于 Hexo 6.3.0 & Butterfly 4.8.5 为博主的魔改教程记录，以防自己日后因魔改迷失所记录 📝

本小节魔改内容不包括 顶部banner栏，如有需要请移步至 ✨ 第二章 - 三小节 | 魔改页前置

最后更新于 2023 年 10 月 06 日

231006 更新：适配本地静态数据部署

效果预览

待办录
我の那些待办清单

创建数据

  • 创建 [blogRoot]/source/project/index.md 页面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
---
title: 清单
date: 2023-04-20 11:56:42
type: project
top_img: false
aside: false
top_page: true
top_bg: https://img.meuicat.com/banner
top_item: 待办
top_title: 生活清单
top_tips: 原来我有这么多想要做的事情
comments: false
---

<!-- 页面内容 -->
  • 修改 [blogRoot]/themes/butterfly/layout/page.pug 来使页面匹配
    （ + 号直接删除 即是正常缩进）
1
2
3
4
5
6
      when 'categories'
        include includes/page/categories.pug
+      when 'project'
+        include includes/page/project.pug
      default
        include includes/page/default-page.pug
  • 新建 [blogRoot]/themes/butterfly/layout/includes/page/project.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
35
36
37
if page.memos_url
    #todolist
    .todolist-bottom
        p Powered by 
            a(target="_blank" href="https://github.com/usememos/memos" rel="noopener external nofollow") Memos
    
else
    if site.data.project
        #todolist
            - let result = ""
            each i in site.data.project
                - let className = i.class_name
                - let listResult = ""
                - let state = ""
                - let strikethrough = ""

                each j in i.project_list
                    - 
                        if (j.state) {
                            state = `fa-circle-check`
                            strikethrough = `class="achieve"`
                        } else {
                            state = `fa-circle`
                            strikethrough = ``
                        }
                        listResult += `
                            <li ${strikethrough}>
                                <i style="margin-right: 5px;" class="fa-regular ${state}"></i>${j.content}
                            </li>`
                    -
                
                - result += `<div class="list_item"><h3>${className}</h3><ul>${listResult}</ul></div>`
            != result

        .todolist-bottom
            p Powered by 
                a(target="_blank" href="https://github.com/usememos/memos" rel="noopener external nofollow") Memos
  • 新建 [blogRoot]/source/css/project.css 样式文件，并新增以下内容
    （也可以在自建的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
#todolist {
  display: flex;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.list_item {
  display: inline-block;
  width: calc(33.333% - .5rem);
  background: #ffe3dd;
  border-radius: 12px;
  border: var(--style-border-always);
  box-shadow: var(--icat-shadow-border);
  padding: 10px 1rem 1.2rem;
  border: 2px dashed #f7a796;
  --todo-border: 1px solid #f7a796;
  margin-right: 1rem;
  margin-bottom: 1rem;
}
.list_item h3 {
  margin: 0;
  color: #333;
  border-bottom: var(--todo-border);
}
.list_item ul {
  font-size: 17px;
  padding: 0 !important;
  margin: 0;
}
.list_item li{
  margin: 0 !important;
  color: #333;
  border-bottom: var(--todo-border);
}
.list_item li::marker {
content: none;
}
li.achieve {
  opacity: .8;
  text-decoration: line-through;
}
.bottom {
  line-height: 1.5;
  text-align: right;
}
.bottom p {
  margin: 0 !important;
}
.bottom a {
  font-weight: 700;
  color: var(--font-color) !important;
}
[data-theme="dark"] .list_item {
  border: 2px solid var(--icat-card-border) !important;
}
@media screen and (max-width: 900px) {
  div#todolist {
    margin: 1rem 5px 0;
  }
}
@media screen and (max-width: 768px) {
  .list_item{
    width: 100%;
  }
  .bottom {
    text-align: center;
  }
}

/* Memos清单页样式 */
  • 创建 [blogRoot]/source/js/memos/waterfall.min.js 文件，并新增以下内容，用来处理Memos清单页的瀑布流
    （在前几节的即刻短文和上一节的Memos动态相册教程里都有此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
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
function waterfall(a) {
function b(a, b) {
var c = window.getComputedStyle(b);
return parseFloat(c["margin" + a]) || 0
}

function c(a) {
return a + "px"
}

function d(a) {
return parseFloat(a.style.top)
}

function e(a) {
return parseFloat(a.style.left)
}

function f(a) {
return a.clientWidth
}

function g(a) {
return a.clientHeight
}

function h(a) {
return d(a) + g(a) + b("Bottom", a)
}

function i(a) {
return e(a) + f(a) + b("Right", a)
}

function j(a) {
a = a.sort(function(a, b) {
return h(a) === h(b) ? e(b) - e(a) : h(b) - h(a)
})
}

function k(b) {
f(a) != t && (b.target.removeEventListener(b.type, arguments.callee), waterfall(a))
}
"string" == typeof a && (a = document.querySelector(a));
var l = [].map.call(a.children, function(a) {
return a.style.position = "absolute", a
});
a.style.position = "relative";
var m = [];
l.length && (l[0].style.top = "0px", l[0].style.left = c(b("Left", l[0])), m.push(l[0]));
for (var n = 1; n < l.length; n++) {
var o = l[n - 1],
p = l[n],
q = i(o) + f(p) <= f(a);
if (!q) break;
p.style.top = o.style.top, p.style.left = c(i(o) + b("Left", p)), m.push(p)
}
for (; n < l.length; n++) {
j(m);
var p = l[n],
r = m.pop();
p.style.top = c(h(r) + b("Top", p)), p.style.left = c(e(r)), m.push(p)
}
j(m);
var s = m[0];
a.style.height = c(h(s) + b("Bottom", s));
var t = f(a);
window.addEventListener ? window.addEventListener("resize", k) : document.body.onresize = k
}

// 瀑布流处理
  • 在 _config.butterfly.yml 主题配置文件中 inject 下的 head 和 bottom 分别引入 project.css waterfall.min.js
1
2
3
4
5
6
7
8
9
  ···

inject:
  head:
    - <link rel="stylesheet" href="/css/project.css"> # 清单页样式
  bottom:
    - <script type="text/javascript" src="/js/memos/waterfall.min.js"></script> # memos清单页 - waterfall瀑布流

  ···

部署数据文件

  • 创建 [blogRoot]/source/_data/project.yml 文件，并新增以下内容
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
- class_name: 近期计划
  project_list:
    - content: 工作项目顺利收尾完工
      state: true
    - content: 返深
      state: true
    - content: 抽空处理分享describe
      state: true
    - content: 考虑转行
      state: false

- class_name: 要处理的项目
  project_list:
    - content: 做一款阅读类博客主题
      state: false
    - content: 导航页
      state: false
    - content: 个人主页
      state: false
    - content: 简历页
      state: false
    - content: 重构 iCat 布柒糖FM
      state: true
    - content: 重构 iCat 卡布奇诺
      state: true
    - content: 二次重构优化 iCat爱吃肉的猫 V2.0
      state: true
    - content: 布柒糖FM 项目铺展
      state: false

- class_name: 自我提升
  project_list:
    - content: 每月至少阅读一本书
      state: true
    - content: 养成定点喝水的习惯
      state: true
    - content: 每日刮胡子
      state: true
    - content: 定期护肤
      state: false
    - content: 专升本
      state: false
    - content: 坚持健身
      state: false

- class_name: 想学的技术
  project_list:
    - content: CSS进阶
      state: true
    - content: Javascript进阶
      state: false
    - content: 微信小程序
      state: true
    - content: 单片机
      state: false
    - content: Node
      state: true
    - content: Docker
      state: true
    - content: Webpack
      state: false
    - content: Photoshop
      state: true
    - content: Illustrator
      state: false
    - content: EJS
      state: true

- class_name: 想买的东西
  project_list:
    - content: 奥林巴斯 EM-5 III
      state: false
    - content: SONY A7R3A
      state: false
    - content: DJI Mini 3 Pro
      state: false
    - content: MacBook Pro
      state: true
    - content: Apple Watch Series 7
      state: true
    - content: 换WD 移动硬盘 2TB
      state: false
  • 创建 [blogRoot]/source/js/memos/project.js 文件，并新增以下内容，用来处理本地清单的瀑布流响应布局
    （或写在自建的公共 js 中也可以）
1
2
3
4
5
6
7
8
9
function whenDOMReady() {
window.addEventListener('load', function() {
if (location.pathname == '/project/') waterfall('#todolist');
});
}
whenDOMReady()
document.addEventListener("pjax:complete", whenDOMReady)

// 清单函数适配pjax
  • 在 _config.butterfly.yml 主题配置文件中 inject 下的 bottom 引入 project.js 文件
1
2
3
4
5
6
7
8
9
  ···

inject:
  head:
    ···
  bottom:
    - <script type="text/javascript" src="/js/memos/project.js"></script> # memos清单页 - 逻辑函数

  ···

如果没有服务器可以搭建memos，可以使用iCat自用的memos服务：iCat - Memos

  • 新增 [blogRoot]/source/project/index.md 页面的 Post Front-matter 配置项 memos_url 为 true
1
2
3
4
5
6
7
---
···

memos_url: true
---

<!-- 文章内容 -->
  • 创建 [blogRoot]/source/js/memos/project.js 文件，并新增以下内容，用来处理Memos清单的函数
    （或写在自建的公共 js 中也可以）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
todolist();
function todolist() {
    fetch('你的memos地址/api/v1/memo?creatorId=用户ID&tag=清单').then(res => res.json()).then(data => {
        // 获取并处理数据
        data.forEach(item => {
            // 处理数据
            let content = item.content,
                title = content.match(/\[(.*?)\]/g)[0].replace(/\[(.*?)\]/, '$1');
            // 去掉多余内容，替换清单内容
            content = content.replace(/#.*\s/g, '').replace(/(-\s\[\s\]\s)(.*)/g, `<li><i style="margin-right: 5px;" class="fa-regular fa-circle"></i>$2</li>`).replace(/(-\s\[x\]\s)(.*)/g, `<li class="achieve"><i style="margin-right: 5px;" class="fa-regular fa-circle-check"></i>$2</li>`);
            // 渲染数据
            let div = document.createElement('div');
            div.className = 'list_item';
            div.innerHTML = `<h3>${title}</h3><ul>${content}</ul>`;
            document.getElementById('todolist').appendChild(div);
        });
        waterfall('#todolist');
    }).catch()
}

// 清单函数
Memos1.4.0以上版本
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
todolist();
function todolist() {
    fetch('你的memos地址/api/memo?creatorId=用户ID&tag=清单').then(res => res.json()).then(data => { // 注意替换链接和ID
        // 获取并处理数据
        data = data.data
        let box = document.getElementById('todolist')
        data.forEach(item => {
            // 处理数据
            let content = item.content,
                title = content.match(/\[(.*?)\]/g)[0].replace(/\[(.*?)\]/,'$1');
            // 去掉多余内容，替换清单内容
            content = content.replace(/#.*\s/g, '').replace(/(-\s\[\s\]\s)(.*)/g, `<li><i style="margin-right: 5px;" class="fa-regular fa-circle"></i>$2</li>`).replace(/(-\s\[x\]\s)(.*)/g, `<li class="achieve"><i style="margin-right: 5px;" class="fa-regular fa-circle-check"></i>$2</li>`);
            // 渲染数据
            let div = document.createElement('div');
            div.className = 'list_item';
            div.innerHTML = `<h3>${title}</h3><ul>${content}</ul>`;
            box.appendChild(div);
        });
        waterfall('#todolist');
    }).catch()
}

// 清单函数
  • 在 _config.butterfly.yml 主题配置文件中 inject 下的 bottom 引入 project.js 文件
1
2
3
4
5
6
7
8
9
  ···

inject:
  head:
    ···
  bottom:
    - <script type="text/javascript" src="/js/memos/project.js"></script> # memos清单页 - 逻辑函数

  ···

memos api地址格式如下所示：
https://memos地址/api/v1/memo?creatorId=用户ID&tag=标签名

memos地址就是首页地址，如：memos.meuicat.com

用户ID获取方式：

  • 点击个人头像，然后点击 RSS

  • 根据浏览器链接获取ID

如url是：https://memos.meuicat.com/u/1/rss.xml
则creatorId就是1
最后完整链接如下：
https://memos.meuicat.com/api/v1/memo?creatorId=1&tag=清单
能看到数据则为正确链接

  • Memos用法：
1
2
3
#清单 [我是标题栏]
- [ ] 我是内容1
- [x] 我是内容2

注意：
前面的 #清单 是固定的
标题用中括号包起来
已完成的将括号内的空格改成 x 即可

]]> 经验分享 Butterfly主题 魔改记录 https://meuicat.com/posts/8ac5bd01.html#disqus_thread TrollStore - 不掉签助手 https://meuicat.com/posts/95852e61.html https://meuicat.com/posts/95852e61.html Sun, 24 Sep 2023 17:47:46 GMT 一款永久签名工具，无需帐户，无需登录，无需证书，无需越狱，IPA 安装后永不过期，完全免费，使用简单方便 前言

首先来简单回顾下在9月19日凌晨时段，苹果正式发布 iOS 17、iPadOS 17、watchOS 10 正式版，而iOS 17系统不再支持 iPhone 8、8P、X 设备（嗯，我的XR还可以再战一年🤪），这就意味着不能使用 checkm8 硬件漏洞，同时 Palera1n 越狱将停留在 iOS 16 系统
小封有话说：估计苹果好几年前就巴不得让X以下的机型停更。始终啊，这一天，还是到来了，往后这个圈子里得少一大波狱友了

iOS 17
iPadOS 17

说实话啊，个人感觉手机的话，一直待在老系统的老款机型就没什么必要升，而iPad就随缘、看情况吧（因为这个我升了😁）。当然了，要是想尝鲜的，可以一试，不管怎么说都是有亮点的

iOS 17 新功能

包括但不限于：

电话新增 Live Voicemail 功能
锁屏时间和调整大小 辅助功能新增辅助访问（简易模式）
待机功能（充电横屏显示） 键盘表情符号支持贴纸
键盘新增听写语言 信息发送内容添加多个功能
音乐支持交叉渐入渐出歌曲 软件更新界面改进
触感触控改进（像3D Touch回归） 音乐小组件改进
待机新增通知可关闭 设置音乐新增渐入渐出
实时语音新增国内多个声音 设置相机新增深度控制功能
新增新的铃声 隔空投送新增彼此靠近

以上这些功能，有几点更新是我个人较为喜欢的，主要是用得上。而我的主力设备iPhone XR还一直停留在iOS 14，可玩性还蛮高的，所以就给iPad升了个iPadOS 17

就比如这个待机、横屏这一点，就特别适合我这种不管是上班还是下班都坐在电脑面前的卑微仔了，在充电的时候，设备横屏，它就会显示时钟或者日期等内容（敲键盘时需要听歌的我狂喜✌️）
而验证码自动清除功能和呼叫我的Apple Watch，这两点无疑是拯救了我，我有一丢丢健忘和强迫症，有的东西随手一丢就忘了放哪了，这简直可以随手就来~

呼叫Apple Watch
验证码自动清除

TrollStore 是什么？

水了那么多，该步入本篇的正题啦~

2022年7月2日，ZhouweiZhang 公开了利用漏洞绕过签名的方法，并且分享了详细的打包方法。通过绕过签名的方法，安装应用后，可以永不过期
绕过签名使用的漏洞是：CVE-2022-26766，CVE-2022-26763。这是由 Linus Henze 递交的漏洞，这些漏洞，仅仅存在于 iOS 14.0 - iOS 15.4.1 等系统中
而上述这些漏洞，被苹果在 iOS 15.5 正式版及以上系统成功修复

在2022年9月3日，opa334 发布了 TrollStore。TrollStore 是一款手机端 IPA 永久签名安装工具，完全免费。利用的正是绕过签名漏洞。使用 TrollStore 安装 IPA 后，可以实现永不过期

简单来说！使用 trollstore 工具，你想安装什么App都行，不需要签名，永久使用（一些第三方IPA，一些奇奇怪怪的软件，dddd~ 😏）

而苹果在 iOS 17.0.1 和 16.7 中修复的绕签名漏洞，这也是史诗级漏洞，并且被积极利用。trollstore 巨魔 opa334 开发者表示：这很有可能有帮助
这说明iOS 17也可能会有支持trollstore的可能，这还不欢呼？

TrollStore 支持情况

巨魔的特点：

  • 完全免费
  • 手机端直装任何的IPA
  • 安装 IPA 后永不过期（不掉签）
  • 无需帐户，无需登录，无需证书，无需越狱

巨魔支持的机型范围：

  • 支持：A8 - A15、M1 设备

巨魔支持的系统范围：

  • 支持：iOS 14.0 - iOS 14.8.1
  • 支持：iOS 15.0 - iOS 15.4.1
  • 支持：iOS 15.5 Beta 1 - Beta 4
  • 支持：iOS 15.6 Beta 1 - Beta 5

TrollStore 安装教程

  • 在下方选择适合的安装器版本，点击后会弹出在在“iTunes”中打开此页的弹窗，点击打开，接着再点击安装

  • 接着在桌面找到Developer 或 GTA Car Tracker 应用，打开后点击 install TrollStore 按钮（如果是国行版设备，请科学上网，不然会报错）

  • 这时就安装好Trollstore了，桌面就会显示 Trollstore，点击打开它

  • 打开Trollstore后，点击右下角 Settings，再点击 installed ldid 选项

使用方法

  • 先下载你要安装IPA，进入分享页面，点击Trollstore进行导入，点击弹窗的 Install 就会自动安装

  • 稍等片刻后，在桌面上就会显示安装完成啦

安装器

TrollStore Helper 1
iOS 15.0 - iOS 15.4.1 所有机型
TrollStore Helper 2
iOS14.0-14.8.1 A12-A14机型

IPA包

  • BatteryInfo【电池助手】，可以查看本机的网络速度、充电电压、电流和开机时间等，把并且还可以通过悬浮窗悬浮缩小

  • Filza【文件管理】，可以查看本机的文件，也可修改部分文件内容，打开IPA的数据文件啊等等（部分文件目录会闪退，属于正常现象）

  • Cowabunga【工具助手】，可以修改手机很多的设置内容，比如字体、锁头图标、Dock透明、状态栏美化等等，可玩性挺高的

  • TrollSpeed【网速显示】，悬浮显示网速，强迫症的我狂喜

  • WiFiList【WiFi密码】可以查看连接过的WiFi密码、第一次和最近一次连接的时间，还有一些关于WiFi的信息、地点等等。并且还可以生成WiFi二维码分享给别人直接连接

分享一下我在使用的IPA包，可以在下方链接进行下载。以及一些第三方IPA平台如：冷冷雨的SuperVIP就包含了许多注入了插件的IPA包（永久会员：69，一年会员：49）。当然了，也可以在轻松签添加各大软件源，有付费也有免费的，看自己的需求就好

夸克网盘
部分IPA包下载地址
]]> 经验分享 TrollStore 不掉签软件 https://meuicat.com/posts/95852e61.html#disqus_thread 近况记事 - 8 https://meuicat.com/posts/3fee5784.html https://meuicat.com/posts/3fee5784.html Thu, 14 Sep 2023 17:59:08 GMT 月更记事碎碎念~ 晚上好，又到了写碎碎念的日子，从第一篇到现在也有半年了。说起写作，在很久之前，还是在学校被迫习惯的，那时候不仅有每日一篇的日记，周记还有每月小结，可谓哀声一遍
老谢，我们都这么叫他，在他的笔尖字迹亦或是言行举止，无不展现出对于艺术和优秀品质的追求。笔下的字体端正而工整，每一笔都凝聚着他对于细致和精益求精的追求。而无论是在书法的艺术上还是在人格的塑造上，都给予着我们深刻的启示和影响。他是一位令人敬佩的师者，用他独特的风范和魅力，点亮着那一缕心灵之火

好啦，今天陪伴的音乐是《陀飞轮》

陀飞轮是机械表里的一种装置，它能让游丝摆轮旋转，从而使每个方向受到的地心引力都很均衡。我们每个人的时间都很宝贵，要好好珍惜
人生就是一座围墙，有闲的时候想要钱、有钱的时候又想要闲。年少或许就该贪玩就该冲动，放肆而无害。珍惜现在所拥有的时间，能够享受和挥洒的时间，不被时间推着走，不被期待所压抑，不被梦想所束缚
在时计里看破一生，渺渺

上两个月搬家的时候，在杂物间找到了两把的吉他，吉他袋上面都落了一沉厚厚的灰，内袋已因太旧而碎烂。在触碰到吉他的那一瞬间，那些曾经激荡心弦的旋律，似乎在如今的杂物间中复苏
几个指尖轻触，我尝试着弹奏一段简单的旋律，左手指尖的老茧早已不在多年，按的很是吃痛，但那种与吉他的默契感，仿佛重新点燃了我的内心火焰

还记得在学生时代加入吉他社团的时候，社长说：我学吉他，练琴弹吉他就是为了装逼，也是因为我当初看到有个人弹吉他很吊，羡慕了，我也想弹出那么吊的高阶指弹，我就学了
嗯..如果问我的话，是因为喜欢，也是为了能装逼~ 泰裤辣~ 😎

说真的，会弹吉他的男孩是超级加分了，哪个女生不希望自己的男朋友多才多艺呢？即使单身嗷，只要往学校操场一坐，吉他一弹，随便拉一个心动女嘉宾给她伴奏，故事这不就来了吗（有对象的情况下还能让别人的情侣嫉妒，赢麻了）

写给夫人的信 第1封 | 微信公众号
书呈台鉴，情长纸短，不尽依依

上个月初跟着木木老师体验了一把特种兵式，也是第一次跑那么老远做商拍，两天，深圳 - 沈阳，属实把我累坏了，各种忙前忙后的
结果回来没多久就从业余变成常驻了，有点小窃喜，但就一点，不多

我这人很怕束缚，如同在工作上有岗位上的提升都会让我很懊恼，因为这会将原来的生活节奏被打破，并且会是很多事情上受到限制，这不能干，那要注意的，条条框框的规矩会把我逼疯
可能这也是一种不上进的表现吧，毕竟人往高处走水往低处流，不想当将军的士兵不是好士兵。嗯..怎么说，既然被认可提升了，那就做好本职工作，顺其自然吧，反正也是该干什么就干什么，多的也只是每周四去协会报道（貌似有点像常驻摄影了？？）

过一个很特别的七夕
七夕 青尘 海边 烧烤 露营 还有日落

前一天还在笑，苏拉台风？就这？第二天欲哭无泪，受罪的是钱包。干着活，我妈给我打电话，说楼下好多车被砸了，我回去一看，别家的车被砸出了一个大洞。心怀忐忑跑过去一看，好家伙，我爹的三辆后玻璃，我的一辆前挡风、车顶玻璃，全裂开了，无一幸免..因为贴了防爆膜，所以上往下远处是看不出异常的。当时直接叫了交警，本来打算直接一起全报保险的，结果我爹说这点钱直接修就好了，报保险后面几年会影响保费，保险不打折，贵很多的。我：？我貌似今年保修好几次了
当时看的时候，透过顶上的遮阳帘，隐约看到天窗上整片玻璃有裂痕，后面中午再去看，发现已经有水渗透进来了。等雨停后才送修。但不得不说，特斯拉售后真的很舒服，效率也很高，五星好评！周六6点送过去的时候，正好下班了，但工作人员还是协助我把前期要办的手续办了。接着周日（第二天）中午十一点就通知我可以取车了，并且车修好20公里免费送车，这一点直接赞爆~ 👏
在这里不得不提一句啊，太平洋保险真的特别垃圾，上一次报保险整整五天才给出定损金和赔付那些内容，并且要拖好久才能报赔成功，这次上报也是三天了无音讯。那天送修的时候就听特斯拉的人说太平洋赔付都很慢，问了下别的保险公司，一般都是2天左右就赔付了 😡

九月的第二天，当头一棒，这个月应该不会再有比这个更倒霉的事情了吧..

最近的生活依旧按部就班着，但状态有点跟不上，哪哪都在赶，一直想想着换一份工作，到现在都还没开始计划。前段时间一时初心报价报少了九千的铝料，又背上了这笔巨款，心已经凉的透透的了。博客呢也在新文件夹里重构大改，效果一时半会也出不来，现在卡在百分之七十，动弹不得了，等有空又有心思的时候再整吧，已经逐渐地失去耐心了，越到后面要优化和调整的地方就越多（研究pjax中..）
这个月几乎被安排满了，想去参加朋友的乔迁喜宴都调不出时间。忙啊，都忙，忙点好..

]]> 生活随笔 封の唠叨 https://meuicat.com/posts/3fee5784.html#disqus_thread Twikoo评论回复邮件模版 https://meuicat.com/posts/2df5e8be.html https://meuicat.com/posts/2df5e8be.html Mon, 28 Aug 2023 13:15:06 GMT 一些样式不错的Twikoo的邮件通知模版

前些时间，@理随 来找我，问我有没有其他样式的Twikoo邮件模版，也是一直鸽了许久，没空弄。刚好这两天可以摸摸鱼，闲着也是闲着，开工~

使用前置须知

参数释义

参数释义
${SITE_URL}网站链接
${SITE_NAME}网站名字
${POST_URL}文章链接
${PARENT_NICK}被回复人昵称
${PARENT_COMMENT}被回复人的评论内容
${PARENT_IMG}被回复人头像
${NICK}回复人昵称
${COMMENT}回复人评论内容
${IMG}回复人头像
${MAIL}回复人邮件
${IP}回复人 IP 地址

安装方法

  • 将修改好的邮件模版的html用美化压缩工具进行压缩，如：在线html美化工具

  • 将压缩后的html复制进，Twikoo后台 - 邮件通知 的 MAIL_TEMPLATE 和 MAIL_TEMPLATE_ADMIN 对应处

样式一

效果预览

访客端PE样式
访客端PC样式
博主端PE样式
博主端PC样式

样式代码

访客模版 MAIL_TEMPLATE

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
<div style="background:#fff">
    <div style="display:flex;position:relative;width:100%;height:206px;background-color:#b7dde1;background-image:linear-gradient(45deg,#b7dde1 0,#e2bfbd 100%);top:0;left:0;justify-content:center">
        <div style="position:absolute;width:152px;height:152px;display:flex;justify-content:center;top:130px">
            <img src="https://s11.ax1x.com/2023/04/20/p9kLm8J.png" style="width:100%;height:100%;border-radius:50%;border:4px solid #f0f0f2;object-fit:cover">
        </div>
    </div>
    <div style="margin-top:92px;display:flex;flex-direction:column;align-items:center">
        <div style="display:flex;flex-direction:column;align-items:center;margin:0 20px">
            <span style="font-size:26px;font-family:PingFang-SC-Bold,PingFang-SC;font-weight:700;color:#000;line-height:37px;text-align:center">
                嘿~ 您在&nbsp;${SITE_NAME}&nbsp;博客中收到一条新回复！
            </span>
            <span style="font-size:16px;font-family:PingFang-SC-Bold,PingFang-SC;font-weight:700;color:#00000030;line-height:22px;margin-top:21px;text-align:center">
                一条来自&nbsp;${NICK}&nbsp;的回复~
            </span>
        </div>
        <div style="margin:0 20px;min-height:128px;background:#f7f9fe;border-radius:12px;margin-top:34px;display:flex;flex-direction:column;align-items:flex-start;padding:32px 16px;width:calc(100% - 40px)">
            <div style="display:flex;flex-direction:column;margin-left:30px;margin-bottom:16px">
                <span style="height:22px;font-size:16px;font-family:PingFang-SC-Bold,PingFang-SC;font-weight:700;color:#c5343e;line-height:22px">
                    您的评论：
                </span>
                <span style="margin-top:6px;margin-right:22px;font-size:16px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#000;line-height:22px">
                    ${PARENT_COMMENT}
                </span>
            </div>
            <hr style="display:flex;position:relative;border:1px dashed #ef859d2e;box-sizing:content-box;height:0;overflow:visible;width:100%">
            <div style="display:flex;flex-direction:column;margin-left:30px">
                <hr>
                <span style="height:22px;font-size:16px;font-family:PingFang-SC-Bold,PingFang-SC;font-weight:700;color:#c5343e;line-height:22px">
                    回复者：${NICK}
                </span>
                <span style="margin-top:6px;margin-right:22px;font-size:16px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#000;line-height:22px">
                    ${COMMENT}
                </span>
            </div>
            <a style="min-width:106px;height:38px;background:#b7dde1;border-radius:32px;display:flex;align-items:center;justify-content:center;text-decoration:none;margin:auto;margin-top:32px" href="${POST_URL}">
                <span style="color:#000;font-size:14px;font-weight:600">查看详情</span>
            </a>
        </div>
        <div style="display:flex;flex-direction:column;align-items:center;margin-top:34px;margin-bottom:17px">
            <span style="height:17px;font-size:12px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#000;line-height:17px;opacity:.7">
                此邮件由评论服务自动发出，直接回复无效！
            </span>
            <a style="height:17px;font-size:12px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#db214b;line-height:17px;margin-top:6px;text-decoration:none" href="${SITE_URL}">
                前往博客
            </a>
        </div>
    </div>
</div>

博主模版 MAIL_TEMPLATE_ADMIN

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
<div style="background:#fff">
    <div style="display:flex;position:relative;width:100%;height:206px;background-color:#b7dde1;background-image:linear-gradient(45deg,#b7dde1 0,#e2bfbd 100%);top:0;left:0;justify-content:center">
        <div style="position:absolute;width:152px;height:152px;display:flex;justify-content:center;top:130px">
            <img src="https://s11.ax1x.com/2023/04/20/p9kLm8J.png" style="width:100%;height:100%;border-radius:50%;border:4px solid #f0f0f2;object-fit:cover">
        </div>
    </div>
    <div style="margin-top:92px;display:flex;flex-direction:column;align-items:center">
        <div style="display:flex;flex-direction:column;align-items:center;margin:0 20px">
            <span style="font-size:26px;font-family:PingFang-SC-Bold,PingFang-SC;font-weight:700;color:#000;line-height:37px;text-align:center">
                嘿~ 您的博客&nbsp;${SITE_NAME}&nbsp;收到一条新回复！
            </span>
            <span style="font-size:16px;font-family:PingFang-SC-Bold,PingFang-SC;font-weight:700;color:#00000030;line-height:22px;margin-top:21px;text-align:center">
                一条来自&nbsp;${NICK}&nbsp;的评论~
            </span>
        </div>
        <div style="margin:0 20px;min-height:128px;background:#f7f9fe;border-radius:12px;margin-top:34px;display:flex;flex-direction:column;align-items:flex-start;padding:32px 16px;width:calc(100% - 40px)">
            <div style="display:flex;flex-direction:column;margin-left:30px;margin-bottom:16px">
                <span style="height:22px;font-size:16px;font-family:PingFang-SC-Bold,PingFang-SC;font-weight:700;color:#c5343e;line-height:22px">
                    评论者：${NICK}
                </span>
                <span style="margin-top:3px;margin-right:22px;font-size:16px;font-family:PingFangSC-Regular,PingFang SC;font-weight:700;color:#c5343e;line-height:22px">
                    评论者IP：${IP}
                </span>
                <span style="margin-top:3px;margin-right:22px;font-size:16px;font-family:PingFangSC-Regular,PingFang SC;font-weight:700;color:#c5343e;line-height:22px">
                    评论者邮箱：${MAIL}
                </span>
                <span style="margin-top:9px;margin-right:22px;font-size:16px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#c5343e;line-height:22px">
                    文章地址：${POST_URL}
                </span>
            </div>
            <hr style="display:flex;position:relative;border:1px dashed #ef859d2e;box-sizing:content-box;height:0;overflow:visible;width:100%">
            <div style="display:flex;flex-direction:column;margin-left:30px">
                <hr>
                <span style="height:22px;font-size:16px;font-family:PingFang-SC-Bold,PingFang-SC;font-weight:700;color:#c5343e;line-height:22px">
                    评论内容：
                </span>
                <span style="margin-top:6px;margin-right:22px;font-size:16px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#000;line-height:22px">
                    ${COMMENT}
                </span>
            </div>
            <a style="min-width:106px;height:38px;background:#b7dde1;border-radius:32px;display:flex;align-items:center;justify-content:center;text-decoration:none;margin:auto;margin-top:32px" href="${POST_URL}">
                <span style="color:#000;font-size:14px;font-weight:600">
                    查看详情
                </span>
            </a>
        </div>
        <div style="display:flex;flex-direction:column;align-items:center;margin-top:34px;margin-bottom:17px">
            <span style="height:17px;font-size:12px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;color:#000;line-height:17px;opacity:.7">
                此邮件由评论服务自动发出，直接回复无效！
            </span>
        </div>
    </div>
</div>

原版参考

Twikoo评论回复邮件模板：Acrylic Mail 粉
这篇博文介绍了 Twikoo评论回复邮件模板：Acrylic Mail 粉。博文的作者自己设计了邮件回复模板，并附上了安装和二创原始代码，方便其他用户使用和编辑。同时也讲解了Twikoo邮件自定义的参数含义，方便用户进行魔改。

样式二

效果预览

访客端PE样式
访客端PC样式
博主端PE样式
博主端PC样式

样式代码

访客模版 MAIL_TEMPLATE

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
<div>
    <div id="content">
        <div
            style="background: cornsilk;width: 95%;max-width: 800px;margin: auto auto;border-radius: 5px;border: #49b1f5 1px solid;overflow: hidden;-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.12);box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.18);   ">
            <header style="overflow: hidden">
                <img src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/violet.jpg" style="width: 100%; z-index: 666">
            </header>
            <div style="padding: 5px 20px">
                <div class="dear" style="position: relative;color: white;float: left;z-index: 999;background: #49b1f5;padding: 5px 30px;margin: -25px auto 0;box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);">
                    亲爱的 ${PARENT_NICK}：
                </div>
                <br>
                <center>
                    <h3>来自&nbsp;<a style="text-decoration: none; color: #FFAEB9">${NICK}</a>&nbsp;的回复</h3>
                </center>
                <hr style="width:200px;border:0;border-bottom:1px solid #e5e5e5;margin:12px auto;">
                <br>&nbsp; &nbsp;
                <p>您在<a href="${POST_URL}" style="text-decoration: none;color: #49b1f5" target="_blank">&nbsp;${SITE_NAME}&nbsp;</a>上发表的评论：</p>
                <div class="tk-content" style=" border-bottom: #ddd 1px solid; border-left: #ddd 1px solid; padding-bottom: 20px; background-color: #FFFACD; margin: 15px 0px; padding-left: 20px; padding-right: 20px; border-top: #ddd 1px solid; border-right: #ddd 1px solid;  padding-top: 20px;">
                    ${PARENT_COMMENT}
                </div>
                <p><a style="text-decoration: none; color: #FFAEB9">&nbsp;${NICK}</a>&nbsp;给您回复啦：</p>
                <div class="tk-content" style=" border-bottom: #ddd 1px solid; border-left: #ddd 1px solid; padding-bottom: 20px; background-color: #FFFACD;  margin: 15px 0px;  padding-left: 20px; padding-right: 20px; border-top: #ddd 1px solid; border-right: #ddd 1px solid; padding-top: 20px;">
                    ${COMMENT}
                </div>
                <p>欢迎再次光临<a style="text-decoration:none; color:#12addb" href="${SITE_URL}" target="_blank">${SITE_NAME}</a>！</p>
                <p>此邮件由评论服务自动发出，直接回复无效！</p>
                <p>
                    <br>
                </p>
                <div class="chakan" style="text-align: center;">
                    <a href="${POST_URL}" style="color:#ffffff;text-decoration:none;display:inline-block;min-height:28px;line-height:28px;padding:0 13px;outline:0;background:#3eae5f;font-size:13px;text-align: center;font-weight:400;border:0;border-radius:999em" target="_blank">点击去原文查看&gt;&gt;</a>
                </div>
                <div class="footer-p" style="text-align: center; margin-top: 5rem; display:block;color:#b3b3b1;text-decoration:none;">
                    <img src="https://meuicat.com/media/favicon.ico" style="width:1.8rem; margin:0 auto">&nbsp;
                    <hr style="width:165px;border:0;border-bottom:1px solid #e5e5e5;margin:5px auto;">©&nbsp;2021 - 2023&nbsp;
                    <a href="https:/meuicat.com/" style="text-align:center; color: #0da1e6a6" target="_blank">MeuiCat</a>
                </div>
            </div>
        </div>
    </div>
    <style type="text/css">
        .qmbox::-webkit-scrollbar {
            display: none;
        }
        .qmbox #divNeteaseBigAttach,
        .qmbox #divNeteaseBigAttach_bak {
            display: none;
        }
        .qmbox blockquote {
            display: none;
        }
        .qmbox body {
            font-size: 14px;
            font-family: arial, verdana, sans-serif;
            line-height: 1.666;
            padding: 0;
            margin: 0;
            overflow: auto;
            white-space: normal;
            word-wrap: break-word;
            min-height: 100px;
        }
        .qmbox td,
        .qmbox input,
        .qmbox button,
        .qmbox select,
        .qmbox body {
            font-family: Helvetica, 'Microsoft Yahei', verdana;
        }
        .qmbox pre {
            white-space: pre-wrap;
            white-space: -moz-pre-wrap;
            white-space: -pre-wrap;
            white-space: -o-pre-wrap;
            word-wrap: break-word;
            width: 95%;
        }
        .qmbox th,
        .qmbox td {
            font-family: arial, verdana, sans-serif;
            line-height: 1.666;
        }
        .qmbox img {
            border: 0;
        }
        .qmbox header,
        .qmbox footer,
        .qmbox section,
        .qmbox aside,
        .qmbox article,
        .qmbox nav,
        .qmbox hgroup,
        .qmbox figure,
        .qmbox figcaption {
            display: block;
        }
        .qmbox blockquote {
            margin-right: 0px;
        }
        .qmbox a,
        .qmbox td a {
            color: #236da1;
        }
        @media screen and (max-width: 1100px) {
            #content p {
                font-size: 10px;
            }
            #content h3 {
                font-size: 14px;
            }
            .footer-p {
                font-size: 9px;
            }
            .dear {
                font-size: 12px;
            }
        }
    </style>
</div>

博主模版 MAIL_TEMPLATE_ADMIN

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
<div>
    <div id="content">
        <div
            style="background: cornsilk;width: 95%;max-width: 800px;margin: auto auto;border-radius: 5px;border: #49b1f5 1px solid;overflow: hidden;-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.12);box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.18);   ">
            <header style="overflow: hidden">
                <img src="https://npm.elemecdn.com/hexo-butterfly-envelope/lib/violet.jpg" style="width: 100%; z-index: 666">
            </header>
            <div style="padding: 5px 20px">
                <div class="dear" style="position: relative;color: white;float: left;z-index: 999;background: #49b1f5;padding: 5px 30px;margin: -25px auto 0;box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);">
                    亲爱的 ${SITE_NAME} 博主：
                </div>
                <br>
                <center>
                    <h3>你的博客收到了一条评论！</h3>
                </center>
                <hr style="width:200px;border:0;border-bottom:1px solid #e5e5e5;margin:12px auto;">
                <br>&nbsp; &nbsp;
                <p style="font-weight: bold;color: #49b1f5">&nbsp;评论者信息：&nbsp;</p>
                <div class="tk-content" style=" border-bottom: #ddd 1px solid; border-left: #ddd 1px solid; padding-bottom: 20px; background-color: #FFFACD; margin: 15px 0px; padding-left: 20px; padding-right: 20px; border-top: #ddd 1px solid; border-right: #ddd 1px solid;  padding-top: 20px;">
                    评论者：${NICK}<br>评论者IP：${IP}<br>评论者邮箱：${MAIL}<br>文章评论地址：${POST_URL}
                </div>
                <p><a style="text-decoration: none; color: #FFAEB9">&nbsp;${NICK}</a>&nbsp;的评论内容：</p>
                <div class="tk-content" style=" border-bottom: #ddd 1px solid; border-left: #ddd 1px solid; padding-bottom: 20px; background-color: #FFFACD;  margin: 15px 0px;  padding-left: 20px; padding-right: 20px; border-top: #ddd 1px solid; border-right: #ddd 1px solid; padding-top: 20px;">
                    ${COMMENT}
                </div>
                <p>此邮件由评论服务自动发出，直接回复无效！</p>
                <p>
                    <br>
                </p>
                <div class="chakan" style="text-align: center;">
                    <a href="${POST_URL}" style="color:#ffffff;text-decoration:none;display:inline-block;min-height:28px;line-height:28px;padding:0 13px;outline:0;background:#3eae5f;font-size:13px;text-align: center;font-weight:400;border:0;border-radius:999em" target="_blank">点击去原文查看&gt;&gt;</a>
                </div>
                <div class="footer-p" style="text-align: center; margin-top: 5rem; display:block;color:#b3b3b1;text-decoration:none;">
                    <img src="https://meuicat.com/media/favicon.ico" style="width:1.8rem; margin:0 auto">&nbsp;
                    <hr style="width:165px;border:0;border-bottom:1px solid #e5e5e5;margin:5px auto;">©&nbsp;2021 - 2023&nbsp;
                    <a href="https:/meuicat.com/" style="text-align:center; color: #0da1e6a6" target="_blank">MeuiCat</a>
                </div>
            </div>
        </div>
    </div>
    <style type="text/css">
        .qmbox::-webkit-scrollbar {
            display: none;
        }
        .qmbox #divNeteaseBigAttach,
        .qmbox #divNeteaseBigAttach_bak {
            display: none;
        }
        .qmbox blockquote {
            display: none;
        }
        .qmbox body {
            font-size: 14px;
            font-family: arial, verdana, sans-serif;
            line-height: 1.666;
            padding: 0;
            margin: 0;
            overflow: auto;
            white-space: normal;
            word-wrap: break-word;
            min-height: 100px;
        }
        .qmbox td,
        .qmbox input,
        .qmbox button,
        .qmbox select,
        .qmbox body {
            font-family: Helvetica, 'Microsoft Yahei', verdana;
        }
        .qmbox pre {
            white-space: pre-wrap;
            white-space: -moz-pre-wrap;
            white-space: -pre-wrap;
            white-space: -o-pre-wrap;
            word-wrap: break-word;
            width: 95%;
        }
        .qmbox th,
        .qmbox td {
            font-family: arial, verdana, sans-serif;
            line-height: 1.666;
        }
        .qmbox img {
            border: 0;
        }
        .qmbox header,
        .qmbox footer,
        .qmbox section,
        .qmbox aside,
        .qmbox article,
        .qmbox nav,
        .qmbox hgroup,
        .qmbox figure,
        .qmbox figcaption {
            display: block;
        }
        .qmbox blockquote {
            margin-right: 0px;
        }
        .qmbox a,
        .qmbox td a {
            color: #236da1;
        }
        @media screen and (max-width: 1100px) {
            #content p {
                font-size: 10px;
            }
            #content h3 {
                font-size: 14px;
            }
            .footer-p {
                font-size: 9px;
            }
            .dear {
                font-size: 12px;
            }
        }
    </style>
</div>

样式三

效果预览

访客端PE样式
访客端PC样式
博主端PE样式
博主端PC样式

样式代码

访客模版 MAIL_TEMPLATE

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
<div>
    <div style="border-radius:5px;font-size:13px;width:680px;margin:30px auto 0;max-width:100%">
        <div style="box-shadow:0 0 30px 0 rgb(219 216 214);border-radius:5px;width:630px;margin:auto;max-width:100%;margin-bottom:-30px">
            <div style="width:200px;height:40px;margin-top:-20px;margin-left:0;text-align:center;line-height:40px;text-decoration:none;color:#fff;background-color:#94a9b9;border-radius:5px 0">
                Dear: ${PARENT_NICK}
            </div>
            <div style="line-height:180%;padding:0 15px 12px;margin:30px auto;color:#555;font-size:12px;margin-bottom:0">
                <h2 style="border-bottom:1px solid #ddd;font-size:14px;font-weight:400;padding:13px 0 10px 8px">
                    <span style=color:#de6561;font-weight:700>&gt;</span>
                    您在<a style=text-decoration:none;color:#12addb href=${SITE_URL} target=_blank>
                            ${SITE_NAME}
                        </a>
                    上的评论有了新的回复呐~
                </h2>
                <div style="padding:0 12px 0 12px;margin-top:18px">
                    <div class=Messages_box>
                        <p style=display:flex;justify-content:flex-end>您曾评论：</p>
                        <div class="ax_post_box-comments-single Messages-author" style=display:flex;justify-content:flex-end;margin-bottom:5px;margin-top:7px>
                            <div class=ax_post_box-comment-avatar style=width:auto;flex:none;order:2>
                                <img src=${PARENT_IMG} style=width:40px;height:40px;border-radius:5px>
                            </div>
                            <div class=ax_post_box-comment-text style=position:relative;margin-right:10px>
                                <span class=ax_post_box-comment-text-before style="width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:8px solid;border-left-color:#f4f4f4;border-right:0;border-right-color:transparent;right:-7px;left:auto;top:12px;position:absolute"></span>
                                <div class=ax_post_box-comment-text-inner style=max-width:506px;background-color:#f1f3fa;padding:10px;border-radius:9px;margin-bottom:3px>
                                    ${PARENT_COMMENT}
                                </div>
                            </div>
                        </div>
                        <p>
                            <strong>${NICK}</strong>
                             回复您：
                        </p>
                        <div class="ax_post_box-comments-single Messages-user" style=display:flex;margin-bottom:5px;margin-top:7px>
                            <div class=ax_post_box-comment-avatar style=width:auto;flex:none>
                                <img src=${IMG} style=width:40px;height:40px;border-radius:5px>
                            </div>
                            <div class=ax_post_box-comment-text style=position:relative;margin-left:10px>
                                <span class=ax_post_box-comment-text-before style="width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-right:8px solid;border-right-color:#f4f4f4;left:-7px;right:auto;top:12px;position:absolute"></span>
                                <div class=ax_post_box-comment-text-inner style=max-width:506px;background-color:#f1f3fa;padding:10px;border-radius:9px;margin-bottom:3px>
                                    ${COMMENT}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div style=text-align:center;margin-right:66px>
                <a style="text-decoration:none;color:#fff;background-color:#94a9b9;padding:5px 20px;border-radius:4px;position:absolute;margin-top:10px" href=${POST_URL} target=_blank>查看</a>
            </div>
        </div>
        <div style="width:100%;height:345px;background-repeat:no-repeat;border-radius:5px 5px 0 0;background-image:url(https://s11.ax1x.com/2023/08/27/pPU9Br9.png);background-size:cover;background-position:50% 50%"></div>
        <div style=color:#8c8c8c;font-size:10px;width:100%;text-align:center;margin-top:20px>
            <p>本邮件为系统自动发送，请勿直接回复~</p>
        </div>
        <div style=color:#8c8c8c;font-size:10px;width:100%;text-align:center;margin-top:5px>
            <p>Copyright © 2021 - 2023 <a href="${SITE_URL}">${SITE_NAME}</a></p>
        </div>
    </div>
    <style>
        * {
            margin: 0;
            padding: 0
        }
        img {
            -webkit-user-drag: none;
            border-radius: 3px
        }
        ul,
        ol {
            margin-left: 1rem !important
        }
        .tk-owo-emotion {
            width: 35px;
            height: auto;
            max-width: 300px;
            max-height: 300px;
            vertical-align: middle
        }
        .ax_post_box-comment-text-inner p,
        .ax_post_box-comment-text-inner img {
            max-width: 506px !important
        }
    </style>
</div>

博主模版 MAIL_TEMPLATE_ADMIN

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
<div>
    <div style="border-radius:5px;font-size:13px;width:680px;margin:0 auto;max-width:100%">
        <div style="box-shadow:0 0 30px 0 rgb(219 216 214);border-radius:5px;width:630px;margin:auto;max-width:100%;margin-bottom:-30px">
            <div style="line-height:180%;padding:0 15px 12px;margin:10px auto;color:#555;font-size:12px;margin-bottom:0">
                <h2 style="border-bottom:1px solid #ddd;font-size:14px;font-weight:400;padding:13px 0 10px 8px">
                    <span style=color:#de6561;font-weight:700>&gt; </span>
                    <a style=text-decoration:none;color:#12addb href=${SITE_URL} target=_blank>
                        ${SITE_NAME}
                    </a>
                     有新的评论了耶~
                </h2>
                <div style="padding:0 12px 0 12px;margin-top:18px">
                    <div class=Messages_box>
                        <p>
                            <strong>${NICK}</strong> 评论：
                        </p>
                        <div class="ax_post_box-comments-single Messages-user" style=display:flex;margin-bottom:5px;margin-top:10px>
                            <div class=ax_post_box-comment-avatar style=width:auto;flex:none>
                                <img src=${IMG} style=width:40px;height:40px;border-radius:5px>
                            </div>
                            <div class=ax_post_box-comment-text style=position:relative;margin-left:10px>
                                <span class=ax_post_box-comment-text-before style="width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-right:8px solid;border-right-color:#f4f4f4;left:-7px;right:auto;top:12px;position:absolute"></span>
                                <div class=ax_post_box-comment-text-inner style=background-color:#f1f3fa;padding:10px;border-radius:9px;margin-bottom:3px;max-width:506px>
                                    ${COMMENT}
                                </div>
                            </div>
                        </div>
                    </div>
                    <p style="background-color:#f5f5f5;border:0 solid #ddd;padding:10px 15px;margin:18px 0">
                        IP：${IP}<br>邮箱：<a href=mailto:${MAIL}>${MAIL}</a><br>文章地址：${POST_URL}
                    </p>
                </div>
            </div>
            <div style=text-align:center;margin-right:66px>
                <a style="text-decoration:none;color:#fff;background-color:#94a9b9;padding:5px 20px;border-radius:4px;position:absolute;margin-top:10px" href=${POST_URL} target=_blank>查看</a>
            </div>
        </div>
        <div style="width:100%;height:345px;background-repeat:no-repeat;border-radius:5px 5px 0 0;background-image:url(https://s11.ax1x.com/2023/08/27/pPU9Br9.png);background-size:cover;background-position:50% 50%"></div>
        <div style=color:#8c8c8c;font-size:10px;width:100%;text-align:center;margin-top:20px>
            <p>Copyright © 2021 - 2023 <a href="${SITE_URL}">${SITE_NAME}</a></p>
        </div>
    </div>
    <style>
        * {
            margin: 0;
            padding: 0
        }
        a {
            text-decoration: none;
            color: #555;
        }
        img {
            -webkit-user-drag: none;
            border-radius: 3px
        }

        ul,
        ol {
            margin-left: 1rem !important
        }

        .tk-owo-emotion {
            width: 35px;
            height: auto;
            max-width: 300px;
            max-height: 300px;
            vertical-align: middle
        }

        .ax_post_box-comment-text-inner p,
        .ax_post_box-comment-text-inner img {
            max-width: 506px !important
        }
    </style>
</div>

样式四

效果预览

访客端PE样式
访客端PC样式
博主端PE样式
博主端PC样式

样式代码

访客模版 MAIL_TEMPLATE

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
<div style="position:relative;font-size:14px;height:auto;padding:15px 15px 10px 15px;z-index:1;zoom:1;line-height:1.7;">
    <div style="max-width: 600px;padding: 3rem 1rem 0;margin: auto;font-size: 14px;color: #444;">
        <div style="display: flex;height: 80px;align-items: flex-end;">
            <img style="border-radius: 25%;width: 80px;height: 80px;" src="${PARENT_IMG}">
            <div style="display: flex;flex-direction: column;justify-content: end;line-height: 1.7;margin-left: 1rem;">
                <span style="font-size: 18px;white-space: nowrap;">你好,『 
                    <span style="font-weight: bold;">${PARENT_NICK}</span>&nbsp;』</span>
                    <span style="color: #555;">您在本站的留言有新的回复。</span>
                </div>
        </div>
        <div style="margin-top:30px;">
            <div style="margin-bottom: 30px;">
                <span style="display: flex;align-items: center;">
                    ${NICK}
                    <span style="font-size: 12px;color: #888;margin-left: .5rem;">
                        回复说：
                    </span>
                </span>
                <div style="display: flex;flex-direction: column;max-width: 100%;margin-top:5px;background: rgb(243 244 246 / 60%)!important;padding: 0 1.5rem;border-radius: 5px 25px 25px 25px;width: fit-content;">
                    <p>
                        ${COMMENT}
                    </p>
                </div>
            </div>
        </div>
        <div>
            <a href="${POST_URL}" style="background: #36d1dc!important;background: -webkit-linear-gradient(45deg, rgb(54, 209, 220), rgb(91, 134, 229))!important;background: linear-gradient(45deg, rgb(54, 209, 220), rgb(91, 134, 229))!important;padding: .5rem 1rem;border-radius: 10px;margin-bottom: 1rem;box-shadow: 0 0 18px rgb(159 198 255);color: white;font-size: 16px;text-decoration: none;display: block;width: fit-content;"
            rel="noopener" target="_blank">
                查看详细内容
            </a>
            <p style="margin: 5px!important;color: #888;font-size: 12px;">
                此邮件由系统自动发出，请勿直接回复！
            </p>
            <a href="${SITE_URL}" style="margin: 5px;color: #888;font-size: 12px;text-decoration: none;" rel="noopener" target="_blank">
                MEUICAT.COM
            </a>
        </div>
    </div>
    <style type="text/css">
        .tk-owo-emotion {
            border-radius: 10px;
            max-width: 80px;
        }
    </style>
</div>

博主模版 MAIL_TEMPLATE_ADMIN

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
<div style="position:relative;font-size:14px;height:auto;padding:15px 15px 10px 15px;z-index:1;zoom:1;line-height:1.7;">
    <div style="max-width: 600px;padding: 3rem 1rem 0;margin: auto;font-size: 14px;color: #444;">
        <div style="display: flex;height: 80px;align-items: flex-end;">
            <img style="border-radius: 25%;width: 80px;height: 80px;" src="https://thirdqq.qlogo.cn/g?b=sdk&nk=2714344056&s=140">
            <div style="display: flex;flex-direction: column;justify-content: end;line-height: 1.7;margin-left: 1rem;">
                <span style="font-size: 18px;white-space: nowrap;">你好,『 
                    <span style="font-weight: bold;">${SITE_NAME}</span>&nbsp;』博主</span>
                    <span style="color: #555;">您的博客收到一条新回复！</span>
                </div>
        </div>
        <div style="margin-top:30px;">
            <div style="margin-bottom: 30px;display: grid;justify-content: end;justify-items: end;">
                <span style="display: flex;align-items: center;">
                    <span style="font-size: 12px;color: #888;margin-left: .5rem;">
                        评论者信息
                    </span>
                </span>
                <div style="display: flex;flex-direction: column;max-width: 100%;margin-top:5px;background: rgb(243 244 246 / 60%)!important;padding: 0 1.5rem;border-radius: 25px 5px 25px 25px;width: fit-content;">
                    <p>
                        IP：${IP}<br>邮箱地址：${MAIL}<br>文章地址：${POST_URL}
                    </p>
                </div>
            </div>
            <div style="margin-bottom: 30px;">
                <span style="display: flex;align-items: center;">
                    ${NICK}
                    <span style="font-size: 12px;color: #888;margin-left: .5rem;">
                        回复说：
                    </span>
                </span>
                <div style="display: flex;flex-direction: column;max-width: 100%;margin-top:5px;background: rgb(243 244 246 / 60%)!important;padding: 0 1.5rem;border-radius: 5px 25px 25px 25px;width: fit-content;">
                    <p>
                        ${COMMENT}
                    </p>
                </div>
            </div>
        </div>
        <div>
            <a href="${POST_URL}" style="background: #36d1dc!important;background: -webkit-linear-gradient(45deg, rgb(54, 209, 220), rgb(91, 134, 229))!important;background: linear-gradient(45deg, rgb(54, 209, 220), rgb(91, 134, 229))!important;padding: .5rem 1rem;border-radius: 10px;margin-bottom: 1rem;box-shadow: 0 0 18px rgb(159 198 255);color: white;font-size: 16px;text-decoration: none;display: block;width: fit-content;"
            rel="noopener" target="_blank">
                查看详细内容
            </a>
            <p style="margin: 5px!important;color: #888;font-size: 12px;">
                此邮件由系统自动发出，请勿直接回复！
            </p>
            <a href="${SITE_URL}" style="margin: 5px;color: #888;font-size: 12px;text-decoration: none;" rel="noopener" target="_blank">
                MEUICAT.COM
            </a>
        </div>
    </div>
    <style type="text/css">
        .tk-owo-emotion {
            border-radius: 10px;
            max-width: 80px;
        }
    </style>
</div>

样式五

效果预览

访客端PE样式
访客端PC样式
博主端PE样式
博主端PC样式

样式代码

访客模版 MAIL_TEMPLATE

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
<div>
    <table width="100%" height="100%" style="min-width: 348px;" border="0" cellspacing="0" cellpadding="0" lang="en">
        <tbody>
            <tr height="32" style="height: 32px;"><td></td></tr>
            <tr align="center">
                <td>
                    <table border="0" cellspacing="0" cellpadding="0" style="padding-bottom: 20px; max-width: 516px; min-width: 220px;">
                        <tbody>
                            <tr>
                                <td width="8" style="width: 8px;"></td>
                                <td>
                                    <div style="border-style: solid; border-width: thin; border-color:#dadce0; border-radius: 8px; padding: 40px 20px;" align="center">
                                        <img src="https://s11.ax1x.com/2023/08/28/pPau9US.png" width="74" height="24" aria-hidden="true" style="margin-bottom: 16px;">
                                        <div style="font-family: 'Google Sans',Roboto,RobotoDraft,Helvetica,Arial,sans-serif;border-bottom: thin solid #dadce0; color: rgba(0,0,0,0.87); line-height: 32px; padding-bottom: 24px;text-align: center; word-break: break-word;">
                                            <div style="font-size: 24px;">
                                                您的评论有新的回复
                                            </div>
                                        </div>
                                        <div style="font-family: Roboto-Regular,Helvetica,Arial,sans-serif; font-size: 14px; color: rgba(0,0,0,0.87); line-height: 20px;padding-top: 20px; text-align: left;">
                                            ${NICK}
                                            <span style="color: #888;margin-left: .5rem;">
                                                回复说：
                                            </span>
                                            ${COMMENT}
                                            <div style="padding-top: 32px; text-align: center;">
                                                <a href="${POST_URL}" target="_blank" link-id="main-button-link" style="font-family: 'Google Sans',Roboto,RobotoDraft,Helvetica,Arial,sans-serif; line-height: 16px; color: #ffffff; font-weight: 400; text-decoration: none;font-size: 14px;display:inline-block;padding: 10px 24px;background-color: #D94235; border-radius: 5px; min-width: 90px;" rel="noopener">
                                                    查看详细
                                                </a>
                                            </div>
                                        </div>
                                        <div style="padding-top: 20px; font-size: 12px; line-height: 16px; color: #5f6368; letter-spacing: 0.3px; text-align: center">
                                            您也可以访问以下网址查看文章评论详情：<br>
                                            <a href="${POST_URL}" style="color: rgba(0, 0, 0, 0.87);text-decoration: inherit;">
                                                ${POST_URL}
                                            </a>
                                        </div>
                                    </div>
                                    <div style="text-align: left;">
                                        <div style="font-family: Roboto-Regular,Helvetica,Arial,sans-serif;color: rgba(0,0,0,0.54); font-size: 11px; line-height: 18px; padding-top: 12px; text-align: center;">
                                            <div>
                                                此邮件由系统自动发出，目的是告知您在本站的评论得到了新的回复，请勿在此直接回复！
                                            </div>
                                            <div style="direction: ltr;">
                                                Copyright © 2021 - 2023 
                                                <a href="${SITE_URL}" style="font-family: Roboto-Regular,Helvetica,Arial,sans-serif;color: rgba(0,0,0,0.54); font-size: 11px; line-height: 18px; padding-top: 12px; text-align: center;">
                                                    ${SITE_NAME}
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td width="8" style="width: 8px;"></td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            <tr height="32" style="height: 32px;"><td></td></tr>
        </tbody>
    </table>
</div>

博主模版 MAIL_TEMPLATE_ADMIN

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
<div>
    <table width="100%" height="100%" style="min-width: 348px;" border="0" cellspacing="0" cellpadding="0" lang="en">
        <tbody>
            <tr height="32" style="height: 32px;"><td></td></tr>
            <tr align="center">
                <td>
                    <table border="0" cellspacing="0" cellpadding="0" style="padding-bottom: 20px; max-width: 516px; min-width: 220px;">
                        <tbody>
                            <tr>
                                <td width="8" style="width: 8px;"></td>
                                <td>
                                    <div style="border-style: solid; border-width: thin; border-color:#dadce0; border-radius: 8px; padding: 40px 20px;" align="center">
                                        <img src="https://s11.ax1x.com/2023/08/28/pPau9US.png" width="74" height="24" aria-hidden="true" style="margin-bottom: 16px;">
                                        <div style="font-family: 'Google Sans',Roboto,RobotoDraft,Helvetica,Arial,sans-serif;border-bottom: thin solid #dadce0; color: rgba(0,0,0,0.87); line-height: 32px; padding-bottom: 24px;text-align: center; word-break: break-word;">
                                            <div style="font-size: 24px;">
                                                您的博客收到一条新回复
                                            </div>
                                            <table align="center" style="margin-top:8px;">
                                                <tbody>
                                                    <tr style="line-height: normal;">
                                                        <td style="display: grid;justify-items: center;">
                                                            <span style="font-family: 'Google Sans',Roboto,RobotoDraft,Helvetica,Arial,sans-serif;color: rgba(0,0,0,0.87); font-size: 14px; line-height: 20px;">
                                                                ${NICK} | ${IP}
                                                            </span>
                                                            <span style="font-family: 'Google Sans',Roboto,RobotoDraft,Helvetica,Arial,sans-serif;color: rgba(0,0,0,0.87); font-size: 14px; line-height: 20px;">
                                                                ${MAIL}
                                                            </span>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div style="font-family: Roboto-Regular,Helvetica,Arial,sans-serif; font-size: 14px; color: rgba(0,0,0,0.87); line-height: 20px;padding-top: 20px; text-align: left;">
                                            <span style="color: #888;">
                                                回复说：
                                            </span>
                                            ${COMMENT}
                                            <div style="padding-top: 32px; text-align: center;">
                                                <a href="${POST_URL}" target="_blank" link-id="main-button-link" style="font-family: 'Google Sans',Roboto,RobotoDraft,Helvetica,Arial,sans-serif; line-height: 16px; color: #ffffff; font-weight: 400; text-decoration: none;font-size: 14px;display:inline-block;padding: 10px 24px;background-color: #D94235; border-radius: 5px; min-width: 90px;" rel="noopener">
                                                    查看详细
                                                </a>
                                            </div>
                                        </div>
                                        <div style="padding-top: 20px; font-size: 12px; line-height: 16px; color: #5f6368; letter-spacing: 0.3px; text-align: center">
                                            您也可以访问以下网址查看文章评论详情：<br>
                                            <a href="${POST_URL}" style="color: rgba(0, 0, 0, 0.87);text-decoration: inherit;">
                                                ${POST_URL}
                                            </a>
                                        </div>
                                    </div>
                                    <div style="text-align: left;">
                                        <div style="font-family: Roboto-Regular,Helvetica,Arial,sans-serif;color: rgba(0,0,0,0.54); font-size: 11px; line-height: 18px; padding-top: 12px; text-align: center;">
                                            <div>
                                                此邮件由系统自动发出，目的是告知您的站点有了新的回复，请勿在此直接回复！
                                            </div>
                                            <div style="direction: ltr;">
                                                Copyright © 2021 - 2023 
                                                <a href="${SITE_URL}" style="font-family: Roboto-Regular,Helvetica,Arial,sans-serif;color: rgba(0,0,0,0.54); font-size: 11px; line-height: 18px; padding-top: 12px; text-align: center;">
                                                    ${SITE_NAME}
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td width="8" style="width: 8px;"></td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            <tr height="32" style="height: 32px;"><td></td></tr>
        </tbody>
    </table>
</div>

样式六

效果预览

访客端PE样式
访客端PC样式
博主端PE样式
博主端PC样式

样式代码

访客模版 MAIL_TEMPLATE

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
<div>
    <table cellspacing="0" border="0" cellpadding="0" align="center" width="100%" bgcolor="transparent" style="border-collapse:separate;border-spacing:0;letter-spacing:0;max-width:580px">
        <tbody>
            <tr>
                <td>
                    <table width="100%" style="border-collapse:separate;border-spacing:0;table-layout:fixed">
                        <tbody>
                            <tr>
                                <td style="color:#000;line-height:1.6">
                                    <h1 style="font-size:28px;font-weight:700;margin:28px auto;text-align:center">
                                        新回复通知
                                    </h1>
                                    <div style="height:240px;background-color:#3274ff"></div>
                                    <div style="margin:-120px 4% 0;background-color:#fff;font-size:18px;padding:8%;box-shadow:0 0 0 1px rgb(0,85,255,.1),3px 3px 0 rgb(0,85,255,.1);font-size:14px">
                                        <div style="margin-bottom:8%">
                                            <div style="display:inline-block;width:80%">
                                                <span style="color:#666;display: flex;justify-content: flex-end">
                                                    ${PARENT_NICK}
                                                </span>
                                                <div style="background-color:#F5F7FA;border-radius:10px;border-top-right-radius:0;padding:5% 8%;text-align: end">
                                                    ${PARENT_COMMENT}
                                                </div>
                                            </div>
                                            <img src="${PARENT_IMG}" style="border-radius:50%;width:15%;display:inline-block;vertical-align:top;margin-left:2%">
                                        </div>
                                        <div style="margin-bottom:8%">
                                            <img src="${IMG}" style="border-radius:50%;width:15%;display:inline-block;vertical-align:top;margin-right:2%">
                                            <div style="display:inline-block;width:80%">
                                                <span style="color:#666">
                                                    ${NICK}
                                                </span>
                                                <div style="background-color:#3274ff;color:#fff;border-radius:10px;border-top-left-radius:0;padding:5% 8%">
                                                    ${COMMENT}
                                                </div>
                                            </div>
                                        </div>
                                        <div style="border-top:1px dashed #ddd;text-align:center">
                                            <a target="_blank" href="${POST_URL}" style="background-color:#3274ff;border:none;color:#fff!important;margin:8% auto 0;padding:3% 10%;display:inline-block;text-decoration:none;border-radius: 6px" rel="noopener">
                                                立即回复
                                            </a>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
    <table width="100%" align="center" style="border-collapse:separate;border-spacing:0;padding:5% 0;table-layout:fixed;text-align:center">
        <tbody>
            <tr>
                <td style="font-size:12px;padding:0">
                    <table cellspacing="0" border="0" cellpadding="0" align="center" width="100%" bgcolor="transparent" style="border-collapse:separate;border-spacing:0;letter-spacing:0;max-width:580px">
                        <tbody>
                            <tr>
                                <td valign="top" align="center" style="font-size:12px;color:#aaa">
                                    <div>
                                        <p>这是由系统自动发送的电子邮件，请勿在此直接回复！</p>
                                        <p>
                                            © 2021 - 2023 
                                            <a href="${SITE_URL}" style="color:#aaa" target="_blank" rel="noopener">
                                                ${SITE_NAME}
                                            </a>
                                        </p>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
</div>

博主模版 MAIL_TEMPLATE_ADMIN

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
<div>
    <table cellspacing="0" border="0" cellpadding="0" align="center" width="100%" bgcolor="transparent" style="border-collapse:separate;border-spacing:0;letter-spacing:0;max-width:580px">
        <tbody>
            <tr>
                <td>
                    <table width="100%" style="border-collapse:separate;border-spacing:0;table-layout:fixed">
                        <tbody>
                            <tr>
                                <td style="color:#000;line-height:1.6">
                                    <h1 style="font-size:28px;font-weight:700;margin:28px auto;text-align:center">
                                        博客有新的回复
                                    </h1>
                                    <div style="height:240px;background-color:#3274ff"></div>
                                    <div style="margin:-120px 4% 0;background-color:#fff;font-size:18px;padding:8%;box-shadow:0 0 0 1px rgb(0,85,255,.1),3px 3px 0 rgb(0,85,255,.1);font-size:14px">
                                        <div style="margin-bottom:8%">
                                            <div style="display:inline-block;width:100%">
                                                <div style="background-color:#F5F7FA;border-radius:10px;padding:5% 8%;display: flex;justify-content: center">
                                                    <span style="text-align: center">评论者IP：${IP}<br>评论者邮箱：${MAIL}<br>文章地址：${POST_URL}</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div style="margin-bottom:8%">
                                            <img src="${IMG}" style="border-radius:50%;width:15%;display:inline-block;vertical-align:top;margin-right:2%">
                                            <div style="display:inline-block;width:80%">
                                                <span style="color:#666">
                                                    ${NICK}
                                                </span>
                                                <div style="background-color:#3274ff;color:#fff;border-radius:10px;border-top-left-radius:0;padding:5% 8%">
                                                    ${COMMENT}
                                                </div>
                                            </div>
                                        </div>
                                        <div style="border-top:1px dashed #ddd;text-align:center">
                                            <a target="_blank" href="${POST_URL}" style="background-color:#3274ff;border:none;color:#fff!important;margin:8% auto 0;padding:3% 10%;display:inline-block;text-decoration:none;border-radius: 6px" rel="noopener">
                                                立即回复
                                            </a>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
    <table width="100%" align="center" style="border-collapse:separate;border-spacing:0;padding:5% 0;table-layout:fixed;text-align:center">
        <tbody>
            <tr>
                <td style="font-size:12px;padding:0">
                    <table cellspacing="0" border="0" cellpadding="0" align="center" width="100%" bgcolor="transparent" style="border-collapse:separate;border-spacing:0;letter-spacing:0;max-width:580px">
                        <tbody>
                            <tr>
                                <td valign="top" align="center" style="font-size:12px;color:#aaa">
                                    <div>
                                        <p>这是由系统自动发送的电子邮件，请勿在此直接回复！</p>
                                        <p>
                                            © 2021 - 2023 
                                            <a href="${SITE_URL}" style="color:#aaa" target="_blank" rel="noopener">
                                                ${SITE_NAME}
                                            </a>
                                        </p>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
</div>

样式七

效果预览

访客端PE样式
访客端PC样式
博主端PE样式
博主端PC样式

样式代码

访客模版 MAIL_TEMPLATE

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
<div>
    <table bgcolor="#ffffff" width="100%" style="background-color:#ffffff" border="0" cellpadding="0" cellspacing="0">
        <tbody>
            <tr>
                <td>
                    <table width="700" align="center" border="0" cellpadding="0" cellspacing="0">
                        <tbody>
                            <tr>
                                <td>
                                    <table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#F5F8FC" style="background-color:#F5F8FC;font-family: 'Microsoft Yahei','PingFang SC', 'Source Han Sans CN'">
                                        <tbody>
                                            <tr>
                                                <td align="center" style="font-size:0;padding-left: 28px;padding-right:28px;padding-top: 28px;">
                                                    <img width="644" src="https://s11.ax1x.com/2023/08/28/pPaY9L4.jpg">
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    <table border="0" cellpadding="0" bgcolor="#f5f8fc" cellspacing="0" width="100%">
                                        <tbody>
                                            <tr>
                                                <td style="padding-left:28px;padding-right:28px;padding-bottom:28px;">
                                                    <table border="0" cellpadding="0" bgcolor="#ffffff" cellspacing="0" width="100%" style="border-spacing: 0;font-family: 'PingFang SC','Microsoft Yahei','Source Han Sans CN'">
                                                        <tbody>
                                                            <tr>
                                                                <td style="padding-top:46px;padding-right:28px;padding-bottom:40px;padding-left:28px;">
                                                                    <table border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;line-height: 1;font-weight: bold;">
                                                                        <tbody>
                                                                            <tr>
                                                                                <td valign="top" style="width: 100%;">
                                                                                    <table border="0" cellpadding="0" cellspacing="0" style="font-weight: bold;display: flex;justify-content: center;">
                                                                                        <tbody>
                                                                                            <tr>
                                                                                                <td valign="top" style="text-align: left;color:#282B2D;font-size:26px;">
                                                                                                    <a style="text-decoration: none;color:#282B2D;" target="_blank" href="${POST_URL}" rel="noopener">
                                                                                                        《${SITE_NAME}》
                                                                                                    </a>
                                                                                                    中您曾评论：
                                                                                                </td>
                                                                                            </tr>
                                                                                        </tbody>
                                                                                    </table>
                                                                                </td>
                                                                            </tr>
                                                                        </tbody>
                                                                    </table>
                                                                    <table border="0" cellpadding="0" cellspacing="0" style="line-height:1;display: flex;justify-content: center;">
                                                                        <tbody>
                                                                            <tr>
                                                                                <td style="padding-top:22px;padding-bottom:40px;">
                                                                                    <table border="0" cellpadding="0" cellspacing="0" style="table-layout: fixed;color:#666666;">
                                                                                        <tbody>
                                                                                            <tr>
                                                                                                <td style="font-size:26px;">
                                                                                                    <span style="text-decoration: none;font-size:18px;color:#666666;">
                                                                                                        ${PARENT_COMMENT}
                                                                                                    </span>
                                                                                                </td>
                                                                                            </tr>
                                                                                        </tbody>
                                                                                    </table>
                                                                                </td>
                                                                            </tr>
                                                                        </tbody>
                                                                    </table>
                                                                    <table width="100%" style="line-height: 1;border-spacing: 0;">
                                                                        <tbody>
                                                                            <tr>
                                                                                <td style="padding:24px 20px 24px 20px;background: #F5F8FC;border: 1px solid #F0F0F0;">
                                                                                    <table width="100%" cellspacing="0" cellpadding="0">
                                                                                        <tbody>
                                                                                            <tr>
                                                                                                <td width="76" height="76">
                                                                                                    <img width="76" style="display: block; max-width: 100%; max-height:100%;" src="https://s11.ax1x.com/2023/08/28/pPaYpyF.png">
                                                                                                </td>
                                                                                                <td>
                                                                                                    <table cellspacing="0" cellpadding="0" style="line-height: 38px;border-spacing: 0;">
                                                                                                        <tbody>
                                                                                                            <tr>
                                                                                                                <td align="left" style="padding-left: 16px;color:#666666;font-size:20px;width: 450px;display:block;">
                                                                                                                    <span style="color:#666666;">
                                                                                                                        ${NICK} 回复说：
                                                                                                            </span>
                                                                                                                </td>
                                                                                                            </tr>
                                                                                                            <tr>
                                                                                                                <td align="left" style="padding-left: 16px;color:#282B2D;font-size:22px;width: 450px;display:block;">
                                                                                                                    <span style="text-decoration: none;color:#282B2D;">
                                                                                                                        ${COMMENT}
                                                                                                                    </span>
                                                                                                                </td>
                                                                                                            </tr>
                                                                                                        </tbody>
                                                                                                    </table>
                                                                                                </td>
                                                                                            </tr>
                                                                                        </tbody>
                                                                                    </table>
                                                                                </td>
                                                                            </tr>
                                                                        </tbody>
                                                                    </table>
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                    <table width="100%" style="line-height: 1;border-spacing: 0;">
                                                        <tbody>
                                                            <tr>
                                                                <td>
                                                                    <table width="100%" style="border-spacing: 0;">
                                                                        <tbody>
                                                                            <tr>
                                                                                <td
                                                                                    style="background:#2475E7;height:88px;color:white;font-size:30px;text-align:center;">
                                                                                    <a style="text-decoration: none;color:white;" target="_blank" href="${POST_URL}" rel="noopener">
                                                                                        <span width="642" height="90">查看详情</span>
                                                                                    </a>
                                                                                </td>
                                                                            </tr>
                                                                        </tbody>
                                                                    </table>
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
    <div style="text-align:center;margin: 1.25rem 0;">
        这是由系统自动发送的电子邮件，请勿在此直接回复！
    </div>
</div>

博主模版 MAIL_TEMPLATE_ADMIN

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
<div>
    <table bgcolor="#ffffff" width="100%" style="background-color:#ffffff" border="0" cellpadding="0" cellspacing="0">
        <tbody>
            <tr>
                <td>
                    <table width="700" align="center" border="0" cellpadding="0" cellspacing="0">
                        <tbody>
                            <tr>
                                <td>
                                    <table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#F5F8FC" style="background-color:#F5F8FC;font-family: 'Microsoft Yahei','PingFang SC', 'Source Han Sans CN'">
                                        <tbody>
                                            <tr>
                                                <td align="center" style="font-size:0;padding-left: 28px;padding-right:28px;padding-top: 28px;">
                                                    <img width="644" src="https://s11.ax1x.com/2023/08/28/pPaY9L4.jpg">
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    <table border="0" cellpadding="0" bgcolor="#f5f8fc" cellspacing="0" width="100%">
                                        <tbody>
                                            <tr>
                                                <td style="padding-left:28px;padding-right:28px;padding-bottom:28px;">
                                                    <table border="0" cellpadding="0" bgcolor="#ffffff" cellspacing="0" width="100%" style="border-spacing: 0;font-family: 'PingFang SC','Microsoft Yahei','Source Han Sans CN'">
                                                        <tbody>
                                                            <tr>
                                                                <td style="padding-top:46px;padding-right:28px;padding-bottom:40px;padding-left:28px;">
                                                                    <table border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;line-height: 1;font-weight: bold;">
                                                                        <tbody>
                                                                            <tr>
                                                                                <td valign="top" style="width: 100%;">
                                                                                    <table border="0" cellpadding="0" cellspacing="0" style="font-weight: bold;display: flex;justify-content: center;">
                                                                                        <tbody>
                                                                                            <tr>
                                                                                                <td valign="top" style="text-align: left;color:#282B2D;font-size:26px;">
                                                                                                    您的博客有了新的回复！
                                                                                                </td>
                                                                                            </tr>
                                                                                        </tbody>
                                                                                    </table>
                                                                                </td>
                                                                            </tr>
                                                                        </tbody>
                                                                    </table>
                                                                    <table border="0" cellpadding="0" cellspacing="0" style="line-height:1;display: flex;justify-content: center;">
                                                                        <tbody>
                                                                            <tr>
                                                                                <td style="padding-top:22px;padding-bottom:40px;">
                                                                                    <table border="0" cellpadding="0" cellspacing="0" style="table-layout: fixed;color:#666666;">
                                                                                        <tbody>
                                                                                            <tr>
                                                                                                <td style="display: grid;justify-items: center;">
                                                                                                    <span style="font-size:18px;color:#666666;">
                                                                                                        ${IP} · ${MAIL}
                                                                                                    </span>
                                                                                                    <span style="font-size:18px;color:#666666;">
                                                                                                        ${POST_URL}
                                                                                                    </span>
                                                                                                </td>
                                                                                            </tr>
                                                                                        </tbody>
                                                                                    </table>
                                                                                </td>
                                                                            </tr>
                                                                        </tbody>
                                                                    </table>
                                                                    <table width="100%" style="line-height: 1;border-spacing: 0;">
                                                                        <tbody>
                                                                            <tr>
                                                                                <td style="padding:24px 20px 24px 20px;background: #F5F8FC;border: 1px solid #F0F0F0;">
                                                                                    <table width="100%" cellspacing="0" cellpadding="0">
                                                                                        <tbody>
                                                                                            <tr>
                                                                                                <td width="76" height="76">
                                                                                                    <img width="76" style="display: block; max-width: 100%; max-height:100%;" src="https://s11.ax1x.com/2023/08/28/pPaYpyF.png">
                                                                                                </td>
                                                                                                <td>
                                                                                                    <table cellspacing="0" cellpadding="0" style="line-height: 38px;border-spacing: 0;">
                                                                                                        <tbody>
                                                                                                            <tr>
                                                                                                                <td align="left" style="padding-left: 16px;color:#666666;font-size:20px;width: 450px;display:block;">
                                                                                                                    <span style="color:#666666;">
                                                                                                                        ${NICK} 回复说：
                                                                                                            </span>
                                                                                                                </td>
                                                                                                            </tr>
                                                                                                            <tr>
                                                                                                                <td align="left" style="padding-left: 16px;color:#282B2D;font-size:22px;width: 450px;display:block;">
                                                                                                                    <span style="text-decoration: none;color:#282B2D;">
                                                                                                                        ${COMMENT}
                                                                                                                    </span>
                                                                                                                </td>
                                                                                                            </tr>
                                                                                                        </tbody>
                                                                                                    </table>
                                                                                                </td>
                                                                                            </tr>
                                                                                        </tbody>
                                                                                    </table>
                                                                                </td>
                                                                            </tr>
                                                                        </tbody>
                                                                    </table>
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                    <table width="100%" style="line-height: 1;border-spacing: 0;">
                                                        <tbody>
                                                            <tr>
                                                                <td>
                                                                    <table width="100%" style="border-spacing: 0;">
                                                                        <tbody>
                                                                            <tr>
                                                                                <td
                                                                                    style="background:#2475E7;height:88px;color:white;font-size:30px;text-align:center;">
                                                                                    <a style="text-decoration: none;color:white;" target="_blank" href="${POST_URL}" rel="noopener">
                                                                                        <span width="642" height="90">查看详情</span>
                                                                                    </a>
                                                                                </td>
                                                                            </tr>
                                                                        </tbody>
                                                                    </table>
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
    <div style="text-align:center;margin: 1.25rem 0;">
        这是由系统自动发送的电子邮件，请勿在此直接回复！
    </div>
</div>
]]> 经验分享 Twikoo 邮件 https://meuicat.com/posts/2df5e8be.html#disqus_thread 过一个很特别的七夕 https://meuicat.com/posts/49f974f7.html https://meuicat.com/posts/49f974f7.html Thu, 24 Aug 2023 12:20:10 GMT 七夕 青尘 海边 烧烤 露营 还有日落 首先要说明的是（听我狡辩），我只是一个菜鸟摄影师，并不是什么大佬
其次青尘真的是一个很有活力且温暖的一个大家庭，不论是人文、人影、彩摄，亦或是记实、抽象、蒙太奇，不分性别年龄，在这都会有受众的人群
青尘尘子摄影社团（华南区）欢迎每一个热爱摄影的宝子加入，互勉共勉


特别感谢两位老师，木木老师和鸠尼尔老师，这两位一位是我的长辈级别的尊老，一位是一直在给予我帮助的好朋友
说实话，从没想过会那么快晋升为带队主摄，以前一直羡慕主摄老师们，带队超酷的，但真到了自己的时候，还是很慌的，毕竟进队的时间才几个月，很多方面都不懂，也不熟悉
不管怎么说，小封会继续努力朝着更高的目标前进，朝着现阶段的下个目标指导出发~

今年，倒霉事特别多，但如果说让我说一件今年最幸运的事情，那我想莫过于此了
二零二三年四月，遇到了一群人，她们青春洋溢，活力四射，用相机记录着爱与世间的一切美好，有幸成为记录者，感受光，捕捉光，成为光

红白玫瑰YYDS
尘宝们送的花，猛男感动

本来起初原定七夕是和朋友去海边玩个两天的，但突然升主摄，没几天就七夕，为了庆祝，便打算再邀请一些宝子们一起过七夕，反正一个人过是过，大家一起过也是过，庆祝嘛，当然是要疯一次啦~
先肉疼下我的钱包..缩水四位数了…这个月得靠我爹救济了估计。除去烧烤是三位宝子支援的，其余的像三天名宿、摩托艇、剧本杀吃喝玩等消费近七千五（苦笑..）

当时选海滩的时候特地选了一片小沙滩（官湖沙滩），想着可能人会少些，没成想还是人潮汹涌，直到傍晚时人们才渐渐离去，少了许多
这片沙滩在两年前就想来着，当时在半路突然有事就没去成，同时这也是我最后探索完的深圳沙滩，算是某种特别的意义吧

我尊滴很喜欢看海，但仅限于在海边走走遥看日落。纯旱鸭子，就算平时洗澡，大夏天我都是用热水洗。小到大一次都没下过海，而这次却被悦儿和思琪两个捣蛋鬼把我“丢”下了水里，直接一头栽到水里，喝了一大口海水（绝了🙃），那一刻真的感觉到什么叫恐惧，死亡的恐惧
嗯，怨种就是我，花了钱被丢下水，还要兼烧烤师傅，都光顾着去玩，就全留给我一个人烤，得亏我拥有多年烧烤经验，不然都得生吃！当然了还有琳老师帮忙（给琳老师一百昏好评）

众所周知，中耳炎不建议下水，碰到水可能会导致中耳炎复发，加上我之前掏耳朵的时候还划破过，一直没痊愈，而从昨天晚上开始，就渐渐感到有些头晕眼花。最担心的事情还是来了，今早起床感觉整个脑袋都沉重无比，体温计一测38.6度，好家伙，新冠、流感都拿我没办法，这小小的中耳炎却直接玩完..
本来今天最后一天，还计划着去看电影的，这下好了，直接打道回府。神奇的是下午一到家，症状就减轻了许多，现在都能码字记录了，真特喵的无语

在最后这专门插放几张雲宝的“艳色云动”（封面女神 💖）


最后的最后：

小封，以后七夕我想和你去海边看日出

这段时间真的一刻都闲不下来，而这是在一起的那段时间最答应的最后一个要求，现在已经实现完了，魔女娜也要回去好好上课了 👏
而许多要好的朋友都陆陆续续了深圳，这个城感觉一下空了许多，回老家养病，回上海读书，去中山工作，一个接一个，以后想聚在一起就更难了

题外话：
大家来深圳的海边玩，后排一定要记得带安全带，血的教训被罚了三百块..
提前查看导航，并预约通行，遵法守法，做一个好公民


七夕party

[{"url":"https://img.meuicat.com/posts/2023/8/74.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/75.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/76.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/77.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/78.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/79.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/80.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/81.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/82.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/83.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/84.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/85.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/86.webp","alt":""}]
]]> 生活随笔 封の唠叨 https://meuicat.com/posts/49f974f7.html#disqus_thread The Young Boy and the Sea https://meuicat.com/posts/3fc01cb1.html https://meuicat.com/posts/3fc01cb1.html Sun, 20 Aug 2023 16:56:47 GMT 海水清澈，海风温柔，打捞遗失繁星，尘世喧嚣随风飘散 “有人相爱，有人释怀，有人夜里看海
相信现在大多数同龄年轻人都是如此。当然，有因为迷恋海的壮阔景色而去的，也有因为缓解压力、放松身心而去的

年过至今，已然八月末，而我对大海的“执着”已是数十次，单单这个八月就去了五次
开车到远处的一片海，找到一个安静的地方。坐在海的对面，静静地听着海浪的声音。看向远处的地平线，内心感到无比的平静
浩瀚无边的湛蓝的海洋，一道道波浪不断涌来，撞击在岩石上，发出了天崩地裂的吼声，喷溅着雪白的泡沫
海风轻轻拂来，似乎想告诉我些什么

为什么那么多人喜欢海？身边的人说，看海的时候很安静，有种很舒服惬意的孤独感，所有东西似乎一下子消散。只剩下一个什么都不用想的躯壳，这个躯壳只会沉浸于眼前的海洋，而不再带有片刻的思绪

以前没觉得有什么问题，后来发现自己也会想念去过的海边
傍晚伴随着咸咸的海风，找到一处礁石，静静坐着。看着远处游玩的人，和无边无际的海洋，身心感到前所未有的放松

有时觉得很奇怪，为什么当初的自己没意识到的感觉，反而在回忆中爱上了。于是不断地想再去一次，再去体验一次，再去看一次..

原来喜欢的是海的宽阔，这能承载我所有的思绪，无论是思念、迷茫、焦虑还是欢乐，这总能使我存放片刻
喜欢看海，喜欢看地平线，我能感受到自己是多么渺小，我会不自觉的把这一切东西都抛开，进入到一个“空灵”的状态。这种状态似乎让我逃离了地球，去到了一个只有我一个人的地方
我喜欢哪种暂时不用思考的感觉，我喜欢那种暂时脱离“尘世”的感觉，我喜欢这种莫名的孤独感

眼睛所捕获到的海，是远比相机所能摄录的，更令人心神荡漾的存在
看苍蓝色渐渐变藏青色的海水，看交叠的浪潮和随之跃动闪耀的粼粼波光。或许没有比海更具现化的自由吧
没有人能够为大海规定方向，亦不会有谁螳臂当车地妄想规束住大海，它不曾有过被期望的形状，期望的光泽，期望的流向

它只是纯粹的以本来的面目存在着，全然恣意地流动着，与秦时的明月交映过，被汉代的劲风吹送过，千百年间的舟楫桨橹摇动过水面千百次，于是每一处细碎摇曳的水波里，都暗藏着一个时代的剪影
千载而下的时光中,英俊的脸庞次第朽败，壮烈的肝胆再三而竭，艳艳惊才合于寂寥，丹心碧血残褪山林
而千帆过尽处，碧水独青

它存在着，始终存在着，比始皇梦想中壮烈的千秋万代，还要绵延得更久更远一些
无边无际，无穷无限，它是永恒的存在，亦是永恒的自由

原来，我也不过是那么渺小的一个人


今年看的海

[{"url":"https://img.meuicat.com/posts/2023/8/11.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/12.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/13.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/14.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/15.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/16.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/17.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/18.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/19.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/20.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/21.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/22.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/23.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/24.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/25.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/26.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/27.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/28.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/29.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/30.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/31.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/32.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/33.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/34.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/35.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/36.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/37.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/38.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/39.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/40.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/41.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/42.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/43.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/44.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/45.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/46.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/47.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/48.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/49.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/50.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/51.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/52.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/53.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/54.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/55.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/56.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/57.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/58.webp","alt":""},{"url":"https://img.meuicat.com/posts/2023/8/59.webp","alt":""}]
]]> 生活随笔 封の唠叨 https://meuicat.com/posts/3fc01cb1.html#disqus_thread Butterfly的魔改教程：文章订阅页 https://meuicat.com/posts/4b1ada04.html https://meuicat.com/posts/4b1ada04.html Tue, 15 Aug 2023 12:39:41 GMT 基于Follow文章更新通知的订阅服务

📚 更多文档目录

🚀 搭建教程 | 1 - 📑 前置教程 | 2 - 🎈 主题调整 | 3 - ✨ 魔改教程 | 4 - 🐈 重构自用数据记录

本篇教程基于 Hexo 6.3.0 & Butterfly 4.8.5 为博主的魔改教程记录，以防自己日后因魔改迷失所记录 📝

样式参考@张洪Heo，邮件订阅功能实现：follow

效果预览

订阅本站
更多订阅iCat方式等你来~

创建数据

  • 创建并修改 [blogRoot]/source/subscribe/index.md 页面
1
2
3
4
5
6
7
8
9
10
---
title: 订阅本站
date: 2023-07-28 13:01:46
type: subscribe
top_img: false
aside: false
comments: false
---

<!-- 页面内容 -->
  • 创建 [blogRoot]/themes/butterfly/layout/includes/page/subscribe.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
35
36
37
38
.rss-plan-list
    a.rss-plan-item.rss-plan-wechat(href="/wechatOA/" title="公众号" target="_blank")
        .rss-plan-description 推送精选文章<br>推送全文
        .rss-plan-info-group
            .rss-plan-title 公众号订阅
            .rss-plan-info 推荐的订阅方式
            img.rss-plan-icon.no-lightbox(src="https://img.meuicat.com/blog/11.webp")
    a.rss-plan-item.rss-plan-mail(onclick="icat.submitInfo()" title="follow")
        .rss-plan-description 推送全部文章<br>更新推送简介
        .rss-plan-info-group
            .rss-plan-title 邮件订阅
            .rss-plan-info 推荐的订阅方式
            img.rss-plan-icon.no-lightbox(src="https://img.meuicat.com/blog/12.webp")
    a.rss-plan-item.rss-plan-rss(href="/rss2.xml" title="rss" target="_blank")
        .rss-plan-description 推送全部文章<br>推送简介
        .rss-plan-info-group
            .rss-plan-title RSS
            .rss-plan-info 备用订阅方式
            img.rss-plan-icon.no-lightbox(src="https://img.meuicat.com/blog/13.webp")

hr

.submit-box
    include follow.pug

!= page.content

script
  var icat = {
    submitInfo: function() {
      var submitBox = document.querySelector('.submit-box')
      
      if (submitBox.classList.contains('display')) {
        submitBox.classList.remove('display')
      } else {
        submitBox.classList.add('display')
      } // 订阅页点击
  }
  • 新增 [blogRoot]/themes/butterfly/layout/page.pug 页面内容项使其匹配
    （ + 号直接删除 即是正常缩进）
1
2
3
4
5
6
7
8
9
    ···
    case page.type
+      when 'subscribe'
+        include includes/page/subscribe.pug
      when 'photo'
        include includes/page/photo.pug
      when 'tags'
        include includes/page/tags.pug
    ···
  • 新建 [blogRoot]/source/css/subscribe.css 样式文件，并新增以下内容
    （也可以在自建的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
#post .tag_share + #follow {
  margin-top: 40px;
}
.rss-plan-list {
  display: flex;
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 -4px;
  position: relative;
  justify-content: space-between;
}
.rss-plan-item:visited {
  color: var(--icat-white);
}
.rss-plan-item.rss-plan-wechat {
  background: #27c125;
}
.rss-plan-item.rss-plan-mail {
  background: var(--icat-blue);
}
.rss-plan-item.rss-plan-rss {
  background: var(--icat-orange);
}
.rss-plan-item {
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 240px;
  height: 240px;
  margin: 6px 0;
  overflow: hidden;
  text-decoration: none;
  width: calc(100% / 3 - 8px);
  filter: brightness(1);
  transition: .3s;
  border: var(--style-border);
  box-shadow: var(--icat-shadow-border);
}
.rss-plan-item:hover {
  filter: brightness(1.1)
}
@media screen and (max-width: 1024px) {
  .rss-plan-item {
      width:calc(100% / 2 - 4px)
  }
  .rss-plan-item:first-child {
      width: 100%
  }
}
@media screen and (max-width: 768px) {
  .rss-plan-item {
      width:100%
  }
}
/* 卡片大小 */

.rss-plan-description {
  font-size: 16px;
  color: var(--icat-white);
  margin: 26px 0 0 30px;
  line-height: 20px;
}
.rss-plan-info-group {
  position: relative;
  margin: 0 0 26px 30px;
  color: var(--icat-white);
}
.rss-plan-title {
  font-size: 36px;
  font-weight: 700;
  width: fit-content;
  line-height: 1;
}
.rss-plan-info {
  width: fit-content;
  opacity: .6;
}
img.rss-plan-icon {
  position: absolute;
  bottom: -50px;
  right: -20px;
  height: 140px;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-transition: all 1.2s cubic-bezier(.39,.575,.565,1) !important;
  -moz-transition: all 1.2s cubic-bezier(.39,.575,.565,1) !important;
  -o-transition: all 1.2s cubic-bezier(.39,.575,.565,1) !important;
  -ms-transition: all 1.2s cubic-bezier(.39,.575,.565,1) !important;
  transition: all 1.2s cubic-bezier(.39,.575,.565,1) !important;
  transform-origin: bottom right;
  filter: blur(8px);
  opacity: .6;
}
.rss-plan-item:hover img.rss-plan-icon {
  bottom: -40px;
  right: -10px;
  filter: blur(0);
  opacity: 1
}
.rss-plan-item:hover {
  text-decoration: none !important;
}
/* 卡片订阅样式 */

.follow-it-form-subscribe {
  position: relative;
  display: block;
  padding: 26px;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: var(--style-border);
  box-shadow: var(--icat-shadow-border);
  background-color: var(--icat-background);
}
@media screen and (min-width: 768px) and (max-width: 1920px) {
  .follow-it-form-subscribe::before {
    content: '';
    background: url(https://img.meuicat.com/blog/follow.svg);
    position: absolute;
    top: 30px;
    right: 26px;
    width: 122px;
    height: 25px;
    filter: blur(2px);
  }
}
.follow-it-form-subscribe .heading {
  width: 100%;
  margin-bottom: 0.5rem;
}
.follow-it-form-subscribe .heading h5 {
  margin: 0 0 0.2rem 0;
  color: var(--icat-fontcolor);
  font-size: 18px;
}
.follow-it-form-subscribe .input-field {
  margin-top: 20px;
  width: 100%;
}
.follow-it-form-subscribe .input-field input {
  width: 100%;
  height: 48px;
  border-radius: 6px;
  border: 2px solid var(--icat-card-border);
  outline: none;
}
.follow-it-form-subscribe .input-field input::placeholder,
.follow-it-form-subscribe .input-field input {
  opacity: .6;
  background: var(--icat-secondbg);
  color: var(--icat-fontcolor);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
}
.follow-it-form-subscribe .submit-button {
  margin-top: 16px;
  width: 100%;
}
.follow-it-form-subscribe .submit-button button {
  width: 100%;
  height: 42px;
  border: 0;
  border-radius: 6px;
  line-height: 0;
  color: var(--icat-white);
  background: var(--icat-black);
  box-shadow: var(--icat-shadow-border);
  transition: .3s;
}
.follow-it-form-subscribe .submit-button button:hover {
  cursor: pointer;
  background: var(--icat-blue);
}
.submit-box {
  opacity: 0;
  height: 0;
  transition: all .3s ease 0s;
}
.submit-box.display {
  opacity: 1;
  height: auto;
}
/* follow样式 */

/* 订阅样式 */
  • 在 _config.butterfly.yml 主题配置文件中 inject 下的 head 引入 subscribe.css 样式
1
2
3
4
5
6
7
8
9
10
  ···

inject:
  head:
    - <link rel="stylesheet" href="/css/subscribe.css"> # 订阅页样式
    - ···
  bottom:
    - ···

  ···
  • 新增 [blogRoot]/source/subscribe/index.md 页面内容
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
# 订阅本站

首先，对每一位来到这里的iCat喵友们说声 "有幸遇见 很高兴认识你" 👋
创立iCat的初衷也是想着每一个人都可以像猫咪那样过的有仪式感；傲娇性随时放射；有位猫主子宠着
也是想能够有一个让自己积累知识、积累兴趣的地方；是属于自己的温暖小窝；也是偌大的社会里的属于自己的内心避风港
和他人分享，会让这些成为积累和沉淀。如果能够帮助到更多的人，帮助更多人解决问题，那一定是非常棒的事情

与大多数垂直类的技术博客不同，这里的种类会非常的繁杂，有技能的教程干货、有生活上的吐槽和想法；所以一般我研究什么、发现了什么都会分享在这里
这些就是创造 MueiCat 的本意，也是我分享生活的方式。有幸能和你相遇在这里，相信我们能共同留下一段美好记忆


## 微信公众号

iCat的微信公众号原本有五个账号，但现在属于我个人的就剩一个[「小王爱吃糖」](/wechatOA/)
等工作不是那么繁忙后，会将公众号处理一番。暂定为一些我觉得有价值，很重要，比较精彩的文章。后面也会同步将博客文章同步至公众号内，但并不是所有。建议所有用户订阅


## 邮件通知

邮件通知采用follow的rss更新采集通知功能，能在本博客更新后发一封邮件通知到您。当然了，这需要你留下你的邮件地址

点击上方 `邮件订阅` ，填入你的邮件地址订阅即可

## RSS订阅

你可以使用第三方RSS客户端接收到博客的文章摘要通知

https://meuicat.com/rss2.xml
  • 创建 [blogRoot]/themes/butterfly/layout/includes/page/follow.pug 页面文件，并新增以下内容
1
2
3
4
5
6
7
8
9
10
form#follow(action="https://api.follow.it/subscribe?pub=YDgVmI6K0mm9l1_CRzUY_g" method="post" target="_blank")
    .follow-it-form-subscribe(style="position: relative;")
        .heading
            h5(style="font-weight: bold; text-align: center;") 订阅本站文章：
        .input-field
            input(type="email" name="email" placeholder="填入您的邮箱地址" spellcheck="false")
        .submit-button
            button(type="submit" onclick="ga('send','event', 'Form','Submit','Affiliate');" style="font-weight: bold; font-size: 14px; text-align: center;") 确认订阅
    if is_page()
        hr

follow

  • {follow的订阅id}的获取：Settings - Affiliate program - For theme creators - Set-up guide - 2.Add a subscription form

  • 列如：https://api.follow.it/subscribe?pub=YDgVmI6K0mm9l1_CRzUY_g，就是 {follow的订阅id} 了

follow.it
follow.it：适合所有人的内容订阅工具（rss，newsletter等方式齐全）

更多订阅

本站已在文章页底部植入次模块功能

  • 新增 [blogRoot]/themes/butterfly/layout/post.pug 页面内容
    （**+** 号直接删除 即是正常缩进）
1
2
3
4
5
6
7
8
9
10
      ···

      if (theme.post_meta.post.tags)
        .post-meta__tag-list
          each item, index in page.tags.data
            a(href=url_for(item.path)).post-meta__tags #[=item.name]
      include includes/third-party/share/index.pug
+    include includes/page/follow.pug

      ···
]]> 经验分享 Butterfly主题 魔改记录 https://meuicat.com/posts/4b1ada04.html#disqus_thread 思考题目：混乱是阶梯 https://meuicat.com/posts/f098e03a.html https://meuicat.com/posts/f098e03a.html Tue, 08 Aug 2023 17:12:06 GMT 阶梯的入口我虽然也未找到，但是我想聊聊我思考这么久的想法，阶梯的入口的发现起因大约是一次小小的想法降临…

思考题目：混乱是阶梯

关于这个题目我思考了很久，却始终想不明白，就连题目我都看不懂，但我觉得这很有意思，重要的过程而不是目的

​我的理解是，混乱意味着重新洗牌，打乱原有的步调，重新建立起新的规章制度，而混乱之中是一个隐蔽的阶梯的，有人发现它，开始一步一步地往上走，眼界越来越开阔，机会也越来越多，最终脱颖而出

有人会问，你说的这个道路我明白了，但是有什么用呢，对我生活有什么帮助吗？
​
​你知道吗，混乱并没有在远处，就在你的身边，就在你的指尖，中国是容器，里面盛满了混乱，互联网是容器，里面也盛满混乱，微博B站直播他们是平台但也都是容器，里面催生出了一个个网红或者学霸，或好或坏，中国 的社会 打破了封建 虽然建国这么久但它至今还未阶级固化， 你发现了吗？那些一个个超人气的IP与网红就是证明。如果你看过巫师财经的网红简史我想你会更明白一点，超一线网红能掀起巨大的风波能改变资本的步调与方向，更甚者有的能跨越阶级坐上资本的牌桌
​
​你说还是太遥远，是啊虽然我们可以隔着网线隔着屏幕很近距离地与那些登上阶梯站的很高的人去互动去交流，可是无形的差距还是如此地遥远，我们看到了神坛看到了神坛上的人却看不到那个阶梯。虽然我们知道阶梯就在那儿
​
阶梯的入口我虽然也未找到，但是我想聊聊我思考这么久的想法，阶梯的入口的发现起因大约是一次小小的想法降临，它出现在你的脑海但却没有停留在脑海，你行动了，目标不甚明朗，也没有什么意义，你就那么自嗨自乐地做了，渐渐地你感染到了身边人，你是石子落入了湖中…
​
最后补充：
​微博B站直播他们是平台但也都是容器，你看到那些头条与热搜了吗？那些都是混乱，那些离奇的 不道德 不公布 声讨的 宣泄的 娱乐的 炫耀的 就连那些伸张正义的都处于混乱之中，更甚者还有人会制造混乱，因为混乱意味人气与流量 意味着利益与垄断
有时候你会看到傻子一样的评论，弱智一样的发言，你有时会忍不住下水吐槽，可以一旦你开始打字发送，那么你就中招了，这是饵，你咬了上去，你以为别人弱智，别人却反过来笑你是傻子，正中他的下怀，一个接一个的中招催生了无限的混乱，而制造混乱的人坐收渔翁之利。你会问，这样不道德的事难道不会翻车吗？当然会，但是重要吗？，混乱已经产生，利益的链条已经开始出现，这利益可能不是单纯地指钱，也饱含人气 关注（粉丝） 曝光率以及机会，可能制造混乱的人受益也可能一个普通人一批人受益。如果你明白了这一点你还会下场吗？我想你要真的明白了，那么你应该做的是通过现象看本质，去问为什么然后去思考为什么会这样 去找到那个原因，我想这个原因大抵都是简单的，无非都来源于人性的幽暗与软弱
至于找到原因之后还要怎么做？我就不知道了，我站的还不够高

突然好奇GPT这一工具对这思考会做出什么样的回答，特地在最后去尝试了一下 ChatGPT-4 以及 文心一言，以下是“它们”给出的解答

Q：思考题目：混乱是阶梯

A：
思考题目：
混乱是阶梯：
这句话可以理解为在混乱的环境中，人们有机会通过解决问题和应对挑战来获得进步和成长。

Q：展开聊聊

A：
混乱可以被视为一种阶梯，因为它为我们提供了机会和挑战，促使我们不断学习和成长。在混乱的状态下，我们可能会感到困惑、不安或无力应对，但正是在这种状态下，我们才能够展开思考、寻找解决问题的方法和机会。

混乱可以激发我们的创造力和创新能力。在面对困境时，我们被迫寻找新的方法和策略来应对挑战，这可能带来全新的解决方案和机会。混乱也能够帮助我们发现自己的潜力和优势，因为在这种状态下，我们需要调整自己的思维和行为方式，培养适应和应对变化的能力。

另外，混乱还能够帮助我们认识到事物的本质和真相。在混乱中，表面上的秩序和稳定可能被打破，暴露出事物的本质和真实状态。这种认识有助于我们更好地了解自己和周围的环境，并帮助我们做出明智的决策和行动。

然而，要充分利用混乱带来的机会，我们需要拥有积极的心态和解决问题的能力。我们需要培养灵活性、适应性和创造性思维，以便能够应对不确定性和变化。同时，我们也需要保持冷静和有条理的思维，避免陷入混乱的情绪和行为中。

总的来说，混乱是一个挑战和契机并存的阶梯。在混乱的状态下，我们可以展开思考，寻找解决问题的方法和机会，发掘自己的潜力和优势，认识事物的本质和真相。然而，要充分利用混乱带来的机会，我们需要拥有积极的心态和解决问题的能力。

Q：继续，扩充下，展开更层次的解答

A：
“混乱是阶梯”这句话出自美剧《权力的游戏》中的一个角色，意味着在混乱和动荡的环境中，个人或组织可以找到机会并实现成功。下面是根据这个观点展开的更层次的解答：

1.創造机会：混乱的环境常常伴随着新的机会。在社会、政治或经济的动荡时期，传统的规则和结构被打破，新的机会和资源的分配方式可能会出现。那些能够适应并抓住机会的人、组织或国家，有可能获得成功。

2.测验个人能力：混乱的环境要求人们具备更高的适应能力和创新能力。在混乱和竞争激烈的环境中，只有那些具备决策能力、执行能力、应变能力和迎接挑战的能力，才能在竞争中脱颖而出。

3.推动变革与创新：混乱常常是现有体系和结构无法再维持的结果。在混乱中，人们可能会开始重新思考和重新评估现有的理念、价值观和权力结构，以寻求新的途径和解决方案。因此，混乱也是推动社会变革和创新的契机。

4.启发个人成长：面对混乱和不确定性，人们往往被迫超越自己的舒适区并寻找新的解决方案。在这个过程中，个人可能会面对各种挑战和困难，但也会因此获得宝贵的经验和成长。如同一句名言所说：“在混乱中成长，在不确定中蜕变。”

总之，“混乱是阶梯”传达了一个重要的信息，即在复杂多变的世界中，混乱的环境不仅存在机会，更促使个人和组织进行反思、创新和成长。对于那些能够应对、适应并善用混乱的人或组织来说，混乱不仅是一种挑战，更是一种机遇。

Q：思考题目：混乱是阶梯

A：
以下是该题目的详细解释：

“混乱是阶梯”：这个说法可能会让人感到困惑，但其实它是在强调混乱可以作为一个成长和提升的机会。阶梯可以理解为通向更高处的手段，混乱在此可以视为一种挑战和困难，它能够激发我们寻找解决问题的方法，进而实现个人或团队的进步。
以上解释仅供参考，问题的真正含义可能会因上下文、语言和理解的差异而有所不同。

Q：展开聊聊

A：
“混乱是阶梯”这个说法意味着混乱可以作为一个机会，让人或团队在困难中寻找解决问题的方法，从而实现个人或团队的进步。

具体来说，当面临混乱的挑战时，人们可以通过采取措施来解决问题，并在这个过程中学习和成长。这些措施可能包括寻找新的解决方案、改进流程、重新组织资源或改变思维方式。通过应对混乱，人们可以提高自己的能力，增强自信心，并获得新的机会。

此外，混乱也可能激发人们的创造力和创新思维。当面临问题时，人们可能会寻求新的想法和方法来解决问题，从而创造更加出色的解决方案。

因此，虽然混乱可能会带来许多困难和挑战，但它也可以作为一个阶梯，为个人和团队提供成长和提升的机会。

Q：继续，扩充下，展开更层次的解答

A：
当面临混乱时，人们可能会感到沮丧、困惑和无助。然而，如果能够把混乱视为一种机会，那么就可以从中获得许多好处。

首先，应对混乱可以培养人们的适应能力和应变能力。在面对混乱时，人们需要快速反应、灵活思考，并寻找新的解决方案。这种应对方式可以帮助人们在不断变化的环境中生存和发展。

其次，混乱可以激发人们的创造力和创新思维。当面临问题时，人们可能会寻求新的想法和方法来解决问题，从而创造更加出色的解决方案。这种创新思维不仅可以解决当前的问题，还可以为未来的发展打下基础。

此外，混乱可以促进人们的成长和发展。通过应对混乱，人们可以提高自己的能力，增强自信心，并获得新的机会。这些成长和发展可以带来更多的机会和挑战，从而不断提升自己的能力和价值。

最后，混乱也可以促进人们的团结和合作。在面对混乱时，人们需要相互支持、协作和合作，共同应对挑战。这种团结和合作可以增强人们之间的联系和信任，为未来的合作和发展打下基础。

因此，混乱作为阶梯可以为个人和团队带来许多好处。通过正确应对混乱，人们可以不断提高自己的能力和价值，实现个人和团队的进步。

]]> 生活随笔 封の唠叨 思考 近况记事 - 7 https://meuicat.com/posts/af514a15.html https://meuicat.com/posts/af514a15.html Fri, 04 Aug 2023 18:03:04 GMT 请务必保持真诚善良的本心，温暖纯良；记事碎碎念~ 晚上好，现在是凌晨的两点整，这一篇碎碎念本来好几天前就想要要写了，奈不住工作太过忙碌了
就在今晚，系在我心里最深处的一个结，已然松动尤而解。那就将沉积月事逐字所述吧

年初以来，养成了一个习惯，写东西的时候喜欢听歌。不管是工作时、还是码代码时，都喜欢放着歌；记碎碎念也不例外
现在刚好听到的歌曲是《悬溺》，这首歌最吸引我的是它独特的前奏，如果在慢倍数下播放，更像是自由意志沉溺于偌大枯海

搬家后的生活，感觉心情变得特别压抑，即使吃了药也缓解不大。我是喜欢习惯的一个人，喜欢去同一家店吃东西，进了店门就朝着老板喊一句：老样子，但很多时候也不喜欢因为习惯而习惯，因为我深知若习以为常之后的抽离之难，会使心里茫茫然
深知老父亲的不容易，更多的是理解，发生这种事谁都不想，只能说是人灾天难，来了就受着吧
一直以来，我对住的地方并没有什么要求，能休息就行，但我以为的和现实发生的，不然。坪山这地方真的很贫瘠，这附近都只有十几年前的平民房不说，方圆几公里甚至连公园都没有（好像之前就说过了emmm不管了就这样写吧~）。所以在这边真的住的很憋屈，目前为止，唯一的下班娱乐，就是开车去十二公里外的惠阳以及六十四公里的公明

于是乎，这段时间我经常在深圳、惠州、东莞出没，去惠阳是因为只有那个地方才有感觉得到的人间烟火气，而东莞纯属是因为回公明要经过而已（幸好不是一年前疫情时期，不然直接红码警告..）
光明是我生活了21年的地方，口味、习惯都在那，以至于即使凌晨了，我也会开六十多公里回公明，只为吃宵夜（真的很爱吃上村竹林的炒粉）

一下子扯到了吃喝上，都忘了说新家的事情了，在这就不得不提一句，我爹置办家用物品真的..泰裤辣（bushi）。就拿遮光帘来说，真的绿..而我爹直呼，高山流水多好的意境，看了还能缓解眼睛疲劳！我：…
还有床架，原来的床太难拆了，也不好装车，当时搬家就没带过来，而我爸新买的床，短斤少两的，买一张发两张床不说，两张床的零件居然还拼不完整一张..至于买的置物柜也是千奇百样
而我的选择困难症是遗传我爹的，我爹选个东西比我还墨迹，这一点我至少比他强（以前买东西都是让朋友来挑来买的，即使吃饭也是，所以这也能解释上面我说我总喜欢去一家店吃东西了..）

未开发的老旧地区，三大运营商的宽带覆盖并不到位，正式搬到坪山一个多星期，都还没办理好宽带，移动联通都在线上预约过，而给出的回复却是不支持、还没覆盖到该小区（我的内心：😅）
越想越气，越想越觉得不对劲，难道就我这一户办不了吗，附近的居民咋办的，手搓宽带吗。于是抱着最后的希望找了一下附近的移动营业厅，一下午就搞定了，效率真的很高
不过就是套餐是59的，就只有200M的宽带，理论就只能到25-30兆的样子..emm就只能说刚好够用吧..

现在的生活时而忙碌，时而清闲。忙的只是公司新地址的审核和变迁，新场地装修都已经动工两个月，至今还在调整整改，当然啦，装修这方面我又不懂，劳累的当然是我的老父亲啦
但不得不说的是，公司政审真的是很鸡婆，很麻烦，真的很难想像以前老爹是怎么一个人应对这些的..
而闲的就是看似苦活，实则休假的好差事啦（其实还是因为老爹年龄大了，折腾奔波的吃不消）就如同我刚过完生日的第二天，就被老爹丢去厦门出差修模交流，几乎全程都在游玩
对了对了，再次谢谢@杜老师的小礼物啦~

差旅游记
感谢杜老师邮寄的手礼；记事碎碎念~
再见，不惑之年：二十又一
祝我 亦小封 生日快乐

二十又一，而今年折腾事也特别多，有时候也会很羡慕身边的朋友们，一些老同学该成家的成家，打拼的已然有所成绩
前段时间偶然碰到一位读书时期的好友，初中毕业后，他则选择步入社会，开了一家烧烤店，可能赶在短视频风口，使他不到三年的时间开了多家分店；现如今已然当起了甩手掌柜，四处游玩
依稀记得，这小子虽然读书不咋地，但是人情世故还蛮厉害的。虽然后面蝙班后就没再联系过，但一起偷摸着上课solo的时光却是挥之不去

后面跟旭再提起时，更多是感叹，选择和他当初一样，或许也能获得一些成就。毕竟，他的成功给了我一种启发，即使表面上我没有取得太多成绩，但仍然可以通过其他途径找到自己的价值和快乐
而在年初时，我就已决定迎接新的挑战。我开始重新追逐并审视自己的兴趣和特长，思考如何将它们转化为可行事业的机会。我深知，并非每个人都需要按照传统的路线走，我可以探索自己的独特之处，找到适合我的道路

一直以来，只要是我想做、想学的都能迅速上手，所以也积攒了很多兴趣爱好，就好比敲代码也是闲暇时间的消遣，以及玩板子（小时候感觉会很帅才学的）、羽毛球、足球（小时候被迫才学的）、吉他（上学时感觉弹吉他会很屌才加入的社团）和摄影
前几天，@理随问了我一个很值得我深思的话题：那你怎么现在不做数控行业呢
我和理随所读的专业都是《模具设计与制造》，这里简称数控。而我实习的第一份工作却是电商设计，我本就不喜欢跟冰冷的危险机器打交道，令人寒颤。专业的不对口，要让我投入大量时间学习与我兴趣相关的内容，通过自己的努力和学习，逐渐积累起了一些技能和经验。尽管在开始的时候我遇到了很多困难和挫折，但我并没有被打败，而是选择从中学习，不断调整自己的方向
要相信，只要保持对未来的热情和坚持不懈的努力，定能得你所想

买菜日常

在七月初的时候，我奶奶给我打了一通电话，得知了我的表弟因为多年前年少轻狂干的蠢事，现在被拘留待审了。我第一时间就是想到了我姑姑，这个家本来就够不幸了，现在她的孩子又出这么一个事情
我姑和我姐还有我妹，女孩子第一次遇到这种事情，难免会手足无措，听说我姑姑这段时间常以泪洗面，我爹虽然很帮着我姑，但奈何忙着公司的事情又抽不开身。
而后庭审时，我便陪着我姑她们前往湖南湘潭旁听，最重要的是能让我姑姑见一见他（已认罪后，是给见面的，这是唯一的探视机会）
别为了一时之快，误入歧途啊..

前面几天，也空闲下来了，稍微有点时间处理下iCat的事情啦
博客优化和功能的完善，包括但不限于加载页的新样式、即刻短文的适配等；以及布柒糖FM的规划施展，都在缓慢的进行着

在最后的最后：
给我的四年画上一个句号，给自己一个交代。这本不算什么，如果可以我更希望这一切从刚开始就没有发生过，那样我们都不会受伤
很事情的发生就是为了教会我们一些道理，而既然发生了，就要去承认，去面对，至少努力过，那就以此为界，好好生活

谢谢 杨帆楚同学 和 王小糖同学 教会我如何认真健康恋爱地去对待一段感情，最后真诚致歉地向 陈娜同学 说一句对不起，真的谢谢在我最低谷的时候陪伴着的时光

“请务必保持真诚善良的本心 温暖纯良

]]> 生活随笔 封の唠叨 https://meuicat.com/posts/af514a15.html#disqus_thread Butterfly的魔改教程：即刻短文页 https://meuicat.com/posts/1cdf15f7.html https://meuicat.com/posts/1cdf15f7.html Mon, 31 Jul 2023 07:13:26 GMT 属于私人的叨叨池，畅所欲言；多种部署方式的iCat版动静态即刻短文

📚 更多文档目录

🚀 搭建教程 | 1 - 📑 前置教程 | 2 - 🎈 主题调整 | 3 - ✨ 魔改教程 | 4 - 🐈 重构自用数据记录

本篇教程基于 Hexo 6.3.0 & Butterfly 4.9.0 为博主的魔改教程记录，以防自己日后因魔改迷失所记录 📝

本小节魔改内容不包括 顶部banner栏，如有需要请移步至 ✨ 第二章 - 三小节 | 魔改页前置

240423 更新：三端功能全适配；优化使用体验，异步化处理；修复一些已知问题

240411 更新：新增置顶功能；修复Memos版本时区错误、多余转义符等问题

231002 更新：Memos的id获取方式教程

230808 更新：新增适配Memos动态部署功能
（注：此版本230808的Memos数据处理暂时有些小问题，但能满足基本使用。此问题在下个版本会进行优化，现推荐选其他两种部署方式使用）

230804 更新：新增显示短文数量的设置功能

230803 更新：新增开启pjax时JSON加载的音乐功能

230802 更新：修复JSON加载导致的音乐功能错误；修复JSON载入导致时间戳混乱

230801 更新：新增适配JSON动态部署功能

230731 更新：新增静态部署版的视频说，适配bilibili以及video链接

240828 更新：meting说明更新

todolist本地yml动态JSON动态Memos
瀑布流✔️支持支持✔️支持✔️支持
图片灯箱✔️支持支持✔️支持✔️支持
多图显示✔️支持支持✔️支持✔️支持
外部链接✔️支持支持✔️支持✔️支持
自定标识✔️支持✔️支持✔️支持
快速评论✔️支持✔️支持✔️支持
音乐模块✔️支持✔️支持✔️支持
视频模块✔️支持✔️支持✔️支持
说说置顶✔️支持✔️支持✔️支持

如果没有服务器可以搭建memos，可以使用iCat自用的memos服务

iCat - Memos
Memos畅所欲言

效果预览

即刻短文
关于 封の碎碎念

创建数据

  • 创建 [blogRoot]/source/essay/index.md 页面，配置以下内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
---
title: 即刻短文
date: 2023-01-17 13:38:17
type: essay
top_img: false
aside: false
top_page: true
top_bg: https://img.meuicat.com/banner
top_item: 即刻短文
top_title: 封の碎碎念
top_tips: 使用 即刻短文动态部署版 构建
top_link: /about/
top_text: 关于博主
---

<!-- 页面内容 -->
  • 创建 [blogRoot]/themes/butterfly/layout/includes/page/essay.pug 页面文件，并新增以下内容
1
2
3
4
5
6
7
8
9
#icat-bber
    section.icat-page
        case theme.essay.mode
            when 'local'
                include ./essay/local.pug
            when 'json'
                include ./essay/json.pug
            when 'memos'
                include ./essay/memos.pug
  • 创建 [blogRoot]/themes/butterfly/layout/includes/page/essay/local.pug 页面文件，并新增以下内容
    （注意该页面中可能存在部分 fontawesome 图标 需要自行替换）
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
mixin renderArticle(item)
    .icat-bber-item
        .icat-bber-content
            if item.content
                p.datacont=item.content
            if item.image
                .icat-bber-image
                    each iten, indey in item.image
                        .imgbox
                            - let image = item.image[indey].split('||')
                            img(src=image[0] alt=image[1] ? image[1] : '' title=image[1] ? '' : '即刻短文配图' )
            if item.video
                .icat-bber-video
                    if item.video.bilibili
                        - let autoplay = item.video.autoplay ? '&autoplay=1' : '&autoplay=0'
                        - let biliurl = '//player.bilibili.com/player.html?bvid=' + item.video.bilibili.match(/(BV\w+)/)[1] + autoplay
                        iframe(src=biliurl scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true")
                    else if item.video.player
                        video(src=item.video.player controls="controls" style="object-fit: cover;")
            if item.aplayer
                .icat-bber-music
                    meting-js(id=item.aplayer.id server=item.aplayer.server type="song" preload="none" autoplay="false" mutex="true" theme='var(--icat-blue)')
        hr
        .icat-bber-bottom
            .icat-bber-info
                .icat-bber-info-time
                    i.iconfont.icat-time-fill
                    time.datatime(datetime=item.date)= 'Loading'
                if item.from
                    .icat-bber-info-from
                        span=item.from
                if item.link
                    - let link = item.link.split('||')
                    a.icat-bber-content-link(target="_blank" href=link[0] title=link[1] ? link[1] : '跳转到短文指引的链接')
                        i.iconfont.icat-jump-link
                        | 链接
                if item.top
                    .icat-bber-info-top
                        i.iconfont.icat-thumbtack
                        | 置顶
            if item.content
                .icat-bber-reply(onclick="commentText(" + `'${item.content}'` + ")")
                    i.iconfont.icat-message

#waterfall.list
    if theme.essay.strip === -1
        - var limitedList = site.data.essay.essay_list
    else
        - var limitedList = site.data.essay.essay_list.slice(0, theme.essay.strip)

    - var topArticles = site.data.essay.essay_list.filter(item => item.top === true)
    each item in topArticles
        +renderArticle(item)

    each item in limitedList.filter(item => !item.top)
        +renderArticle(item)

#icat-bber-tips
    if theme.essay.strip === -1 || Math.abs(theme.essay.strip) >= site.data.essay.essay_list.length
        | - 已展开所有短文 -
    else
        | - 只展示最近 #{theme.essay.strip} 条短文 -
  • 创建 [blogRoot]/themes/butterfly/layout/includes/page/essay/json.pug 页面文件，并新增以下内容
    （注意该页面中可能存在部分 fontawesome 图标 需要自行替换）
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
#waterfall.list
    .icat-bber-loading
        img(src="https://img.meuicat.com/blog/loading.svg")
    script.
        (async function () {
            const response = await fetch('!{url_for(theme.essay.mode_link)}');
            const data = await response.json();
            const strip = !{theme.essay.strip};
            let items = [],
                topitem = [],
                essayTips = '';

            const processedData = await Promise.all(data[0].essay_list.map(async (item) => {
                const formatdata = await essayFormat(item);
                if (!formatdata) return null;
                if (item.top) {
                    topitem.push(formatdata);
                } else {
                    items.push(formatdata);
                }
                return formatdata;
            }));

            essayTips = strip === -1 || strip >= items.length ? `<div id="icat-bber-tips">- 已展开所有短文 -</div>` : (items = items.slice(0, strip), `<div id="icat-bber-tips">- 只展示最近 ${strip} 条短文 -</div>`);

            document.getElementsByClassName('list')[0].innerHTML = topitem.concat(items).filter(item => item !== null).join('');
            document.querySelector(".icat-page").insertAdjacentHTML("beforeend", essayTips);
        })();
        async function essayFormat(item) {
            let image = '',
                video = '',
                type = '';

            if (item.image) item.image.map(e => image += `<div class="imgbox"><img src="${e.split(' || ')[0]}" ${e.split(' || ').length > 1 ? `alt='${e.split(' || ')[1]}'` : `title="即刻短文配图"`} /></div>`).join('');
            let aplayer = item.aplayer ? `<div class="icat-bber-music"><meting-js server="${item.aplayer.server}" type="song" id="${item.aplayer.id}" mutex="true" preload="none" theme="var(--icat-blue)" data-lrctype="0"></meting-js></div>` : '';
            if (item.video) video = item.video.player ? `<div class="icat-bber-video"><video src="${item.video.player}" controls="controls" style="object-fit: cover;"></video></div>` : item.video.bilibili ? `<div class="icat-bber-video"><iframe src="//player.bilibili.com/player.html?bvid=${item.video.bilibili.match(/(BV\w+)/)[1]}${item.video.autoplay ? '&autoplay=1' : '&autoplay=0'}" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe></div>` : '';
            let link = item.link ? ((type = item.link.split(' || ')), `<a class="icat-bber-content-link" href='${type[0].startsWith('/') ? type[0] : (type[0].startsWith('http') ? type[0] : 'https://' + type[0])}' title="${type.length > 1 ? type[1] : '跳转到短文指引的链接' }" target="_blank"><i class="iconfont icat-jump-link"></i>链接</a>`) : '';
            
            return `
                <div class="icat-bber-item">
                    <div class="icat-bber-content">
                        ${item.content ? `<p class="datacont">${item.content}</p>` : ''}
                        ${image ? `<div class="icat-bber-image">${image}</div>` : ''}
                        ${aplayer}
                        ${video}
                    </div>
                    <hr>
                    <div class="icat-bber-bottom">
                        <div class="icat-bber-info">
                            <div class="icat-bber-info-time">
                                <i class="iconfont icat-time-fill"></i>
                                <time class="datatime" datetime="${item.date}"></time>
                            </div>
                            ${link}
                            ${item.from ? `<div class="icat-bber-info-from"><span>${item.from}</span></div>` : ''}
                            ${item.top ? `<div class="icat-bber-info-top"><i class="iconfont icat-thumbtack"></i>置顶</div>` : ''}
                        </div>
                        ${item.content ? `<div class="icat-bber-reply" onclick="commentText('${item.content}')"><i class="iconfont icat-message"></i></div>` : ''}
                    </div>
                </div>`;
        }
  • 创建 [blogRoot]/themes/butterfly/layout/includes/page/essay/memos.pug 页面文件，并新增以下内容
    （注意该页面中可能存在部分 fontawesome 图标 需要自行替换）
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
#waterfall.list
    .icat-bber-loading
        img(src="https://img.meuicat.com/blog/loading.svg")
    script.
        (async function () {
            let url = '!{url_for(theme.essay.mode_link)}';
            const baseUrl = url.substring(0, url.indexOf("/", url.indexOf("//") + 2));
            const response = await fetch(url);
            const data = await response.json();
            const strip = !{theme.essay.strip};
            let items = [],
                topitem = [],
                essayTips = '';

            const processedData = await Promise.all(data.map(async (item) => {
                const formatdata = await essayFormat(item,baseUrl);
                if (!formatdata) return null;
                if (item.content.includes('#top')) {
                    topitem.push(formatdata);
                } else {
                    items.push(formatdata);
                }
                return formatdata;
            }));

            essayTips = strip === -1 || strip >= items.length ? `<div id="icat-bber-tips">- 已展开所有短文 -</div>` : (items = items.slice(0, strip), `<div id="icat-bber-tips">- 只展示最近 ${strip} 条短文 -</div>`);

            document.getElementsByClassName('list')[0].innerHTML = topitem.concat(items).filter(item => item !== null).join('');
            document.querySelector(".icat-page").insertAdjacentHTML("beforeend", essayTips);
        })();
        async function essayFormat(item,baseUrl) {
            const contentRegex = /#(.*?)\s|\n/g,
                imageRegex = /\!\[(.*?)\]\((.*?)\)/g,
                playerRegex = /{\s*player\s*(.*)\s*}/g,
                linkRegex = /(?<!\!)\[(.*?)\]\((.*?)\)/g,
                topRegex = /#top/g,
                fromRegex = /(?<![\w\/])(?<!\{)\{([^{}\s]+)\}(?!\})(?![\w\/])/g;
            let time = new Date((item.createdTs - (new Date().getTimezoneOffset() * 60)) * 1000).toISOString(),
                content = item.content,
                image = '',
                img = content.match(imageRegex);
                aplayer = content.match(/{\s*music\s*(.*?)\s*(.*?)\s*}/g),
                video = content.match(playerRegex),
                link = content.match(linkRegex),
                type = '',
                from = content.match(fromRegex);
            
            if (item.resourceList.length) {
                if (!img) img = [];  
                item.resourceList.forEach(e => {
                    if (e.externalLink) img.push(e.externalLink);
                    else img.push(`${baseUrl}/o/r/${e.uid}`);
                });
            }
            if (img) image += img.map(e => `<div class="imgbox"><img src="${e.replace(imageRegex, '$2')}" ${e.replace(imageRegex, '$1') ? `alt="${e.replace(imageRegex, '$1')}"` : `title="即刻短文配图"`} /></div>`).join('');
            aplayer = aplayer ? `<div class="icat-bber-music"><meting-js server="${aplayer[0].match(/\{\s*music\s*(.*?)\s*\d+\s*\}/)[1]}" type="song" id="${aplayer[0].match(/\d+/)[0]}" mutex="true" preload="none" theme="var(--icat-blue)" data-lrctype="0"></meting-js></div>` : '';
            video = video ? `<div class="icat-bber-video"><video src="${video[0].replace(playerRegex, '$1').trim()}" controls="controls" style="object-fit: cover;"></video></div>` : content.match(/{\s*bilibili\s*(.*?)\s*}/g);
            video = Array.isArray(video) ? `<div class="icat-bber-video"><iframe src="//player.bilibili.com/player.html?bvid=${video[0].match(/(BV\w+)/)[1]}${video[0].match(/{\s*bilibili\s*(.*?)\s*true\s*}/g) ? '&autoplay=1' : '&autoplay=0'}" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe></div>` : '';
            link = link ? ((type = link[0].replace(linkRegex, '$2')), `<a class="icat-bber-content-link" href='${type.startsWith('/') ? type : (type.startsWith('http') ? type : 'https://' + type)}' title="${link[0].replace(linkRegex, '$1') ? link[0].replace(linkRegex, '$1') : '跳转到短文指引的链接' }" target="_blank"><i class="iconfont icat-jump-link"></i>链接</a>`) : '';
            from = from ? `<div class="icat-bber-info-from"><span>${from[0].replace(fromRegex, '$1')}</span></div>` : '';
            content = content.replace(contentRegex, '').replace(imageRegex, '').replace(/\{(.*?)\}/g, '').replace(linkRegex, '').trim();

            return `
                <div class="icat-bber-item">
                    <div class="icat-bber-content">
                        ${content ? `<p class="datacont">${content}</p>` : ''}
                        ${image ? `<div class="icat-bber-image">${image}</div>` : ''}
                        ${aplayer}
                        ${video}
                    </div>
                    <hr>
                    <div class="icat-bber-bottom">
                        <div class="icat-bber-info">
                            <div class="icat-bber-info-time">
                                <i class="iconfont icat-time-fill"></i>
                                <time class="datatime" datetime="${time}"></time>
                            </div>
                            ${link}
                            ${from}
                            ${item.content.includes('#top') ? `<div class="icat-bber-info-top"><i class="iconfont icat-thumbtack"></i>置顶</div>` : ''}
                        </div>
                        ${content ? `<div class="icat-bber-reply" onclick="commentText('${content}')"><i class="iconfont icat-message"></i></div>` : ''}
                    </div>
                </div>`;
        }
  • 修改 [blogRoot]/themes/butterfly/layout/page.pug 来使页面匹配
    （ + 号直接删除 即是正常缩进）
1
2
3
4
5
6
      when 'categories'
        include includes/page/categories.pug
+      when 'essay'
+        include includes/page/essay.pug
      default
        include includes/page/default-page.pug
  • 【可选】在 _config.butterfly.yml 主题配置文件中开启站点的 pjax
1
2
3
4
5
6
7
8
9
10
# Pjax
# https://github.com/MoOx/pjax
# 当用户点击链接，通过ajax更新页面需要变化的部分，然后使用HTML5的pushState修改浏览器的URL地址；这样可以不用重复加载相同的资源（css/js）， 从而提升网页的加载速度
# 使用pjax后，一些自己DIY的js可能会无效，跳转页面时需要重新调用；使用pjax后，一些个别页面加载的js/css，将会改为所有页面都加载
# --------------------------------------
pjax:
  enable: true
  exclude:
    # - xxxx
    # - xxxx
  • 新建 [blogRoot]/themes/butterfly/source/css/_page/essay.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
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
280
281
282
283
284
285
286
287
288
289
290
#icat-bber
    margin-top: 1.5rem
    width: 100%

    .icat-page
        #waterfall
            opacity: 0
            transition: .3s

            &.list
                display: flex
                flex-flow: row wrap
                justify-content: space-between

            &.show
                opacity: 1

            .icat-bber-item
                position: relative
                width: 32%
                border: var(--style-border)
                border-radius: 12px
                padding: 1rem 1rem 0.9rem
                transition: all 0.3s ease 0s
                display: flex
                flex-flow: column nowrap
                justify-content: space-between
                align-items: flex-start
                background: var(--icat-card-bg)
                box-shadow: var(--icat-shadow-border)
                margin-right: 2%
                margin-bottom: 1rem
                animation: slide-in .6s .4s backwards

                +maxWidth1024()
                    width: 49%
                    margin-right: 1%

                +maxWidth768()
                    width: 100%
                    margin-right: 0px
                    
                &:hover
                    border-color: var(--icat-blue)

                .icat-bber-content
                    display: flex
                    flex-flow: wrap
                    border-radius: 12px
                    width: 100%
                    height: 100%

                    p
                        margin: 0px

                    .datacont
                        order: 0
                        font-size: 0.8rem
                        font-weight: 700
                        color: var(--icat-fontcolor)
                        width: 100%
                        line-height: 1.38
                        border-radius: 12px
                        margin-bottom: 0.8rem
                        display: flex
                        flex-direction: column
                        text-align: justify
                        padding: 0px 8px

                    .icat-bber-image
                        display: flex
                        gap: 8px
                        width: 100%
                        flex-wrap: wrap
                        margin-bottom: 10px
                        padding-left: 8px

                        .imgbox
                            width: calc(100% / 4 - 8px)
                            aspect-ratio: 1 / 1
                            overflow: hidden
                            border-radius: 6px

                            a
                                height: 100px
                                display: flex
                                position: relative

                                img
                                    object-fit: cover
                                    width: 100%
                                    max-height: 100%
                                    border-radius: 6px
                                    animation: slide-in .6s .4s backwards

                    .icat-bber-video
                        position: relative
                        padding: 30% 50%
                        margin-bottom: 10px

                        video,
                        iframe
                            position: absolute
                            width: 100%
                            height: 100%
                            left: 0
                            top: 0
                            margin: 0
                            border-radius: 6px
                            border: var(--style-border)

                    .icat-bber-music
                        width: 100%
                        height: 90px
                        margin: 0 0 0.5rem
                        border-radius: 8px
                        overflow: hidden
                        border: var(--style-border)
                        background: var(--icat-secondbg)

                hr
                    display: flex
                    position: relative
                    margin: 8px 0px
                    border: 1px dashed var(--icat-blue)
                    width: 100%
                    opacity: 0.4

                .icat-bber-bottom
                    display: flex
                    justify-content: space-between
                    width: 100%
                    margin-top: 10px
                    user-select: none

                    .icat-bber-info
                        display: flex

                        .icat-bber-info-time
                            color: var(--icat-fontcolor)
                            font-size: 0.7rem
                            background-color: var(--icat-gray-op)
                            padding: 8px
                            border-radius: 20px
                            cursor: default
                            display: flex
                            align-items: center
                            padding-right: 12px
                            line-height: 1

                            i
                                padding-right: 4px

                        .icat-bber-info-from
                            @extend .icat-bber-info-time
                            margin-left: 0.5rem

                            span
                                margin-left: 0.35rem

                        .icat-bber-content-link
                            display: flex
                            margin-left: 0.5rem
                            font-size: 0.7rem
                            align-items: center
                            background-color: rgba(103, 194, 58, 0.13)
                            color: rgb(103, 194, 58)
                            padding: 0px 8px
                            border-radius: 20px
                            padding-right: 10px
                            line-height: 1

                            i
                                margin-right: 4px

                            &:hover
                                background-color: var(--icat-blue)
                                color: var(--icat-white)

                        .icat-bber-info-top
                            background-color: rgba(245, 108, 108, 0.13)
                            color: rgb(245, 108, 108)
                            display: flex
                            margin-left: 0.5rem
                            font-size: 0.7rem
                            align-items: center
                            padding: 0px 8px
                            border-radius: 20px
                            padding-right: 10px
                            line-height: 1

                            i
                                margin-right: 4px
                                font-size: 14px
                                transform: rotateZ(35deg)

                    .icat-bber-reply
                        cursor: pointer
                        transition: .6s

                        &:hover
                            color: var(--icat-blue)

        #icat-bber-tips
            font-size: 14px
            display: flex
            justify-content: center
            margin-bottom: 2rem
            color: var(--icat-secondtext)
    
    .icat-bber-loading
        position: revert !important
        margin: 0 auto

    .aplayer
        margin: 0

        &.aplayer-withlrc
            .aplayer-pic
                height: 82px
                width: 82px
                margin: 3px
                border-radius: 4px

            .aplayer-info
                margin-left: 84px
                padding: 5px 7px 0

                .aplayer-music
                    height: 23px
                    text-align: center

                    .aplayer-title
                        font-size: 0.8rem
                        font-weight: 700
                        margin: 0
                        color: var(--icat-fontcolor)

                .aplayer-controller
                    align-items: center

                    .aplayer-bar-wrap
                        padding: 0

                        .aplayer-bar
                            background: var(--icat-gray)
                            height: 8px
                            border-radius: 12px
                            transition: 0.3s
                            overflow: hidden

                            .aplayer-loaded
                                height: 100%
                                border-radius: 12px

                            .aplayer-played
                                height: 100%
                                border-radius: 12px

                                .aplayer-thumb
                                    display: none

                    .aplayer-time
                        position: initial

        .aplayer-lrc
            height: 36px
            margin: -12px 0 3px

            &::after
                height: 20%
            &::before
                height: 4%

            p
                color: var(--icat-fontcolor)

[data-theme='dark']
    #icat-bber
        .icat-page
            #waterfall
                .icat-bber-item
                    hr
                        opacity: 0.2
            
            .icat-bber-music .aplayer,
            .aplayer .aplayer-lrc:before,
            .aplayer .aplayer-lrc:after
                background: var(--icat-card-bg)
                color: var(--icat-fontcolor)
可选CSS样式
  • 新建 [blogRoot]/source/css/essay.css 样式文件，并新增以下内容
    （也可以在自建的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
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
#icat-bber {
  margin-top: 1.5rem;
  width: 100%;
}
#icat-bber .icat-page #waterfall {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}
#icat-bber .icat-page #waterfall.list {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -o-box-orient: horizontal;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -o-box-lines: multiple;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -o-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
#icat-bber .icat-page #waterfall.show {
  opacity: 1;
  -ms-filter: none;
  filter: none;
}
#icat-bber .icat-page #waterfall .icat-bber-item {
  position: relative;
  width: 32%;
  border: var(--style-border);
  border-radius: 12px;
  padding: 1rem 1rem 0.9rem;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  -ms-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -o-box-orient: vertical;
  -webkit-box-lines: single;
  -moz-box-lines: single;
  -o-box-lines: single;
  -webkit-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -o-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-box-align: start;
  -moz-box-align: start;
  -o-box-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  background: var(--icat-card-bg);
  -webkit-box-shadow: var(--icat-shadow-border);
  box-shadow: var(--icat-shadow-border);
  margin-right: 2%;
  margin-bottom: 1rem;
  -webkit-animation: slide-in 0.6s 0.4s backwards;
  -moz-animation: slide-in 0.6s 0.4s backwards;
  -o-animation: slide-in 0.6s 0.4s backwards;
  -ms-animation: slide-in 0.6s 0.4s backwards;
  animation: slide-in 0.6s 0.4s backwards;
}
@media screen and (max-width: 1024px) {
  #icat-bber .icat-page #waterfall .icat-bber-item {
    width: 49%;
    margin-right: 1%;
  }
}
@media screen and (max-width: 768px) {
  #icat-bber .icat-page #waterfall .icat-bber-item {
    width: 100%;
    margin-right: 0px;
  }
}
#icat-bber .icat-page #waterfall .icat-bber-item:hover {
  border-color: var(--icat-blue);
}
#icat-bber .icat-page #waterfall .icat-bber-item .icat-bber-content {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -o-box-lines: multiple;
  -webkit-flex-flow: wrap;
  -ms-flex-flow: wrap;
  flex-flow: wrap;
  border-radius: 12px;
  width: 100%;
  height: 100%;
}
#icat-bber .icat-page #waterfall .icat-bber-item .icat-bber-content p {
  margin: 0px;
}
#icat-bber .icat-page #waterfall .icat-bber-item .icat-bber-content .datacont {
  -webkit-box-ordinal-group: 0;
  -moz-box-ordinal-group: 0;
  -o-box-ordinal-group: 0;
  -ms-flex-order: 0;
  -webkit-order: 0;
  order: 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--icat-fontcolor);
  width: 100%;
  line-height: 1.38;
  border-radius: 12px;
  margin-bottom: 0.8rem;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -o-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  text-align: justify;
  padding: 0px 8px;
}
#icat-bber .icat-page #waterfall .icat-bber-item .icat-bber-content .icat-bber-image {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  gap: 8px;
  width: 100%;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -o-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-bottom: 10px;
  padding-left: 8px;
}
#icat-bber .icat-page #waterfall .icat-bber-item .icat-bber-content .icat-bber-image .imgbox {
  width: calc(100% / 4 - 8px);
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: 6px;
}
#icat-bber .icat-page #waterfall .icat-bber-item .icat-bber-content .icat-bber-image .imgbox a {
  height: 100px;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  position: relative;
}
#icat-bber .icat-page #waterfall .icat-bber-item .icat-bber-content .icat-bber-image .imgbox a img {
  object-fit: cover;
  width: 100%;
  max-height: 100%;
  border-radius: 6px;
  -webkit-animation: slide-in 0.6s 0.4s backwards;
  -moz-animation: slide-in 0.6s 0.4s backwards;
  -o-animation: slide-in 0.6s 0.4s backwards;
  -ms-animation: slide-in 0.6s 0.4s backwards;
  animation: slide-in 0.6s 0.4s backwards;
}
#icat-bber .icat-page #waterfall .icat-bber-item .icat-bber-content .icat-bber-video {
  position: relative;
  padding: 30% 50%;
  margin-bottom: 10px;
}
#icat-bber .icat-page #waterfall .icat-bber-item .icat-bber-content .icat-bber-video video,
#icat-bber .icat-page #waterfall .icat-bber-item .icat-bber-content .icat-bber-video iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  margin: 0;
  border-radius: 6px;
  border: var(--style-border);
}
#icat-bber .icat-page #waterfall .icat-bber-item .icat-bber-content .icat-bber-music {
  width: 100%;
  height: 90px;
  margin: 0 0 0.5rem;
  border-radius: 8px;
  overflow: hidden;
  border: var(--style-border);
  background: var(--icat-secondbg);
}
#icat-bber .icat-page #waterfall .icat-bber-item hr {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  position: relative;
  margin: 8px 0px;
  border: 1px dashed var(--icat-blue);
  width: 100%;
  opacity: 0.4;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
  filter: alpha(opacity=40);
}
#icat-bber .icat-page #waterfall .icat-bber-item .icat-bber-bottom {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -o-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  width: 100%;
  margin-top: 10px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#icat-bber .icat-page #waterfall .icat-bber-item .icat-bber-bottom .icat-bber-info {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
}
#icat-bber .icat-page #waterfall .icat-bber-item .icat-bber-bottom .icat-bber-info .icat-bber-info-time,
#icat-bber .icat-page #waterfall .icat-bber-item .icat-bber-bottom .icat-bber-info .icat-bber-info-from {
  color: var(--icat-fontcolor);
  font-size: 0.7rem;
  background-color: var(--icat-gray-op);
  padding: 8px;
  border-radius: 20px;
  cursor: default;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  padding-right: 12px;
  line-height: 1;
}
#icat-bber .icat-page #waterfall .icat-bber-item .icat-bber-bottom .icat-bber-info .icat-bber-info-time i,
#icat-bber .icat-page #waterfall .icat-bber-item .icat-bber-bottom .icat-bber-info .icat-bber-info-from i {
  padding-right: 4px;
}
#icat-bber .icat-page #waterfall .icat-bber-item .icat-bber-bottom .icat-bber-info .icat-bber-info-from {
  margin-left: 0.5rem;
}
#icat-bber .icat-page #waterfall .icat-bber-item .icat-bber-bottom .icat-bber-info .icat-bber-info-from span {
  margin-left: 0.35rem;
}
#icat-bber .icat-page #waterfall .icat-bber-item .icat-bber-bottom .icat-bber-info .icat-bber-content-link {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  margin-left: 0.5rem;
  font-size: 0.7rem;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  background-color: rgba(103,194,58,0.13);
  color: #67c23a;
  padding: 0px 8px;
  border-radius: 20px;
  padding-right: 10px;
  line-height: 1;
}
#icat-bber .icat-page #waterfall .icat-bber-item .icat-bber-bottom .icat-bber-info .icat-bber-content-link i {
  margin-right: 4px;
}
#icat-bber .icat-page #waterfall .icat-bber-item .icat-bber-bottom .icat-bber-info .icat-bber-content-link:hover {
  background-color: var(--icat-blue);
  color: var(--icat-white);
}
#icat-bber .icat-page #waterfall .icat-bber-item .icat-bber-bottom .icat-bber-info .icat-bber-info-top {
  background-color: rgba(245,108,108,0.13);
  color: #f56c6c;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  margin-left: 0.5rem;
  font-size: 0.7rem;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  padding: 0px 8px;
  border-radius: 20px;
  padding-right: 10px;
  line-height: 1;
}
#icat-bber .icat-page #waterfall .icat-bber-item .icat-bber-bottom .icat-bber-info .icat-bber-info-top i {
  margin-right: 4px;
  font-size: 14px;
  -webkit-transform: rotateZ(35deg);
  -moz-transform: rotateZ(35deg);
  -o-transform: rotateZ(35deg);
  -ms-transform: rotateZ(35deg);
  transform: rotateZ(35deg);
}
#icat-bber .icat-page #waterfall .icat-bber-item .icat-bber-bottom .icat-bber-reply {
  cursor: pointer;
  -webkit-transition: 0.6s;
  -moz-transition: 0.6s;
  -o-transition: 0.6s;
  -ms-transition: 0.6s;
  transition: 0.6s;
}
#icat-bber .icat-page #waterfall .icat-bber-item .icat-bber-bottom .icat-bber-reply:hover {
  color: var(--icat-blue);
}
#icat-bber .icat-page #icat-bber-tips {
  font-size: 14px;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -o-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  margin-bottom: 2rem;
  color: var(--icat-secondtext);
}
#icat-bber .icat-bber-loading {
  position: revert !important;
  margin: 0 auto;
}
#icat-bber .aplayer {
  margin: 0;
}
#icat-bber .aplayer.aplayer-withlrc .aplayer-pic {
  height: 82px;
  width: 82px;
  margin: 3px;
  border-radius: 4px;
}
#icat-bber .aplayer.aplayer-withlrc .aplayer-info {
  margin-left: 84px;
  padding: 5px 7px 0;
}
#icat-bber .aplayer.aplayer-withlrc .aplayer-info .aplayer-music {
  height: 23px;
  text-align: center;
}
#icat-bber .aplayer.aplayer-withlrc .aplayer-info .aplayer-music .aplayer-title {
  font-size: 0.8rem;
  font-weight: 700;
  margin: 0;
  color: var(--icat-fontcolor);
}
#icat-bber .aplayer.aplayer-withlrc .aplayer-info .aplayer-controller {
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
#icat-bber .aplayer.aplayer-withlrc .aplayer-info .aplayer-controller .aplayer-bar-wrap {
  padding: 0;
}
#icat-bber .aplayer.aplayer-withlrc .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {
  background: var(--icat-gray);
  height: 8px;
  border-radius: 12px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
  overflow: hidden;
}
#icat-bber .aplayer.aplayer-withlrc .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded {
  height: 100%;
  border-radius: 12px;
}
#icat-bber .aplayer.aplayer-withlrc .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played {
  height: 100%;
  border-radius: 12px;
}
#icat-bber .aplayer.aplayer-withlrc .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb {
  display: none;
}
#icat-bber .aplayer.aplayer-withlrc .aplayer-info .aplayer-controller .aplayer-time {
  position: initial;
}
#icat-bber .aplayer .aplayer-lrc {
  height: 36px;
  margin: -12px 0 3px;
}
#icat-bber .aplayer .aplayer-lrc::after {
  height: 20%;
}
#icat-bber .aplayer .aplayer-lrc::before {
  height: 4%;
}
#icat-bber .aplayer .aplayer-lrc p {
  color: var(--icat-fontcolor);
}
[data-theme='dark'] #icat-bber .icat-page #waterfall .icat-bber-item hr {
  opacity: 0.2;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  filter: alpha(opacity=20);
}
[data-theme='dark'] #icat-bber .icat-page .icat-bber-music .aplayer,
[data-theme='dark'] #icat-bber .icat-page .aplayer .aplayer-lrc:before,
[data-theme='dark'] #icat-bber .icat-page .aplayer .aplayer-lrc:after {
  background: var(--icat-card-bg);
  color: var(--icat-fontcolor);
}

/* 即刻短文样式 */
  • 在 _config.butterfly.yml 主题配置文件中 inject 下的 head 引入 essay.css 样式文件
1
2
3
4
5
6
7
8
9
  ···

inject:
  head:
    - <link rel="stylesheet" href="/css/essay.css"> # 即刻短文样式
  bottom:
    - ···

  ···
  • 创建 [blogRoot]/source/js/essay.js 文件，并新增以下内容，用来处理即刻短文的逻辑
    （或写在自建的公共 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
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
function whenDOMReady() {
  if (location.pathname == '/essay/') document.addEventListener('DOMContentLoaded', function () {setTimeout(() => { changeTime(), btf.loadLightbox(document.querySelectorAll('#icat-bber img')), window.lazyLoadInstance && window.lazyLoadInstance.update(), reflashWaterFall();}, 300)})
}
whenDOMReady()
document.addEventListener("pjax:complete", whenDOMReady)

// 适配pjax

window.onresize = () => {
  waterfall('#waterfall');
};

// 自适应

function timeDiff(timeObj, today) => {
  const timeObjUTC = Date.UTC(timeObj.getFullYear(), timeObj.getMonth(), timeObj.getDate());
  const todayUTC = Date.UTC(today.getFullYear(), today.getMonth(), today.getDate());

  const timeDiff = todayUTC - timeObjUTC;
  return Math.floor(timeDiff / (1000 * 3600 * 24));
}
function changeTime() {
  const timeElements = Array.from(document.getElementsByTagName("time"));
  const currentDate = new Date();

  timeElements.forEach(timeElement => {
    const datetime = timeElement.getAttribute("datetime");
    const timeObj = new Date(datetime);
    const daysDiff = timeDiff(timeObj, currentDate);

    let timeString;
    if (daysDiff === 0) {
      timeString = `最近`;
    } else if (daysDiff === 1) {
      timeString = `昨天`;
    } else if (daysDiff === 2) {
      timeString = `前天`;
    } else if (daysDiff <= 7) {
      timeString = `${daysDiff}天前`;
    } else {
      if (timeObj.getFullYear() !== currentDate.getFullYear()) {
        timeString = `${timeObj.getFullYear()}/${timeObj.getMonth() + 1}/${timeObj.getDate()}`;
      } else {
        timeString = `${timeObj.getMonth() + 1}/${timeObj.getDate()}`;
      }
    }
    timeElement.textContent = timeString;
  });
}
function reflashWaterFall() {
  document.querySelector("#waterfall") &&
    setTimeout(function() {
      waterfall("#waterfall");
      document.getElementById("waterfall")
        .classList.add("show");
    }, 500);
} // 加载显示 - 即刻短文
function commentText(txt) {
  const inputs = ["#wl-edit", ".el-textarea__inner"];
  for (let i = 0; i < inputs.length; i++) {
    let el = document.querySelector(inputs[i]);
    if (el != null) {
      el.dispatchEvent(new Event('input', { bubble: true, cancelable: true }));
      el.value = '> ' + txt.replace(/\n/g, '\n> ') + '\n\n';
      el.focus();
      el.setSelectionRange(-1, -1);
    }
  }
} // 引用评论跳转 - 即刻短文
  • 创建 [blogRoot]/source/js/waterfall.js 文件，并新增以下内容，用于处理瀑布流
    （或写在公共 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
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
function waterfall(a) {
  function b(a, b) {
    var c = window.getComputedStyle(b);
    return parseFloat(c["margin" + a]) || 0;
  }
  function c(a) {
    return a + "px";
  }
  function d(a) {
    return parseFloat(a.style.top);
  }
  function e(a) {
    return parseFloat(a.style.left);
  }
  function f(a) {
    return a.clientWidth;
  }
  function g(a) {
    return a.clientHeight;
  }
  function h(a) {
    return d(a) + g(a) + b("Bottom", a);
  }
  function i(a) {
    return e(a) + f(a) + b("Right", a);
  }
  function j(a) {
    a = a.sort(function (a, b) {
      return h(a) === h(b) ? e(b) - e(a) : h(b) - h(a);
    });
  }
  function k(b) {
    f(a) != t && (b.target.removeEventListener(b.type, arguments.callee), waterfall(a));
  }
  "string" == typeof a && (a = document.querySelector(a));
  var l = [].map.call(a.children, function (a) {
    return (a.style.position = "absolute"), a;
  });
  a.style.position = "relative";
  var m = [];
  l.length && ((l[0].style.top = "0px"), (l[0].style.left = c(b("Left", l[0]))), m.push(l[0]));
  for (var n = 1; n < l.length; n++) {
    var o = l[n - 1],
      p = l[n],
      q = i(o) + f(p) <= f(a);
    if (!q) break;
    (p.style.top = o.style.top), (p.style.left = c(i(o) + b("Left", p))), m.push(p);
  }
  for (; n < l.length; n++) {
    j(m);
    var p = l[n],
      r = m.pop();
    (p.style.top = c(h(r) + b("Top", p))), (p.style.left = c(e(r))), m.push(p);
  }
  j(m);
  var s = m[0];
  a.style.height = c(h(s) + b("Bottom", s));
  var t = f(a);
  window.addEventListener ? window.addEventListener("resize", k) : (document.body.onresize = k);
}
  • 在 _config.butterfly.yml 主题配置文件中 inject 下的 bottom 引入 essay.js 和 waterfall.js
1
2
3
4
5
6
7
8
9
10
  ···

inject:
  head:
    - ···
  bottom:
    - <script async src="/js/waterfall.js"></script> # 瀑布流JS
    - <script defer src="/js/essay.js"></script> # 即刻逻辑文件

  ···
  • 在 _config.butterfly.yml 主题配置文件中，新增以下配置项
1
2
3
4
5
6
7
8
9
10
11
12
# essay 即刻短文
# MeuiCat设计
# https://meuicat.com/blog/67/
# --------------------------------------

essay:
  enable: true
  # 即刻短文仅展示前n条
  # Jike short text only shows the first n
  strip: 50
  mode: memos # local：本地静态 / json：动态json / memos：动态Memos
  mode_link: https://memos.meuicat.com/api/v1/memo?creatorId=1&tag=说说 #动态模式地址

部署数据文件

  • 创建 [blogRoot]/source/_data/essay.yml 文件，并新增以下内容
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
essay_list:
  - content: 即刻短文测试
    date: 2023/07/31 15:30:50
    from: iPhone XR
    video: 
      player: /video/1.mp4

  - content: 测试bilibili视频
    date: 2023/07/31 15:30:50
    video: 
      bilibili: //player.bilibili.com/player.html?aid=913951276&bvid=BV1RM4y1p75T&cid=1211165267&page=1

  - content: bilibili网页链接
    date: 2023/07/31 15:30:50
    video: 
      bilibili: https://www.bilibili.com/video/BV17T4y1A7eW/?spm_id_from=333.1007.tianma.1-3-3.click

  - content: bilibili单bv号
    date: 2023/07/31 15:30:50
    video: 
      bilibili: BV17T4y1A7eW
      autoplay: true

  - content: 完噜 还剩一天让我咋准备 😭
    date: 2023/05/11 20:35:42
    from: iPhone XR
    image: 
      - https://s11.ax1x.com/2023/05/11/p9sKEh8.jpg

  - content: 如果要定义 那就是下班后的日落和在家等我下班的她~
    date: 2023/05/10 16:16:15
    aplayer:
      server: netease
      id: 1949516216
    top: true

  - content: Melancholia - 欭 | 一款纯记录写作类Hexo主题 ✍️
    date: 2023/04/23 22:27:22
    from: Macbook Pro
    link: https://github.com/yife68/Hexo-Theme-Melancholia || Melancholia

  - content: 爱看 但还是得吃我一拳
    date: 2023/04/22 15:10:30
    from: iPhone XR
    image: 
      - https://s11.ax1x.com/2023/05/03/p9JqGXd.jpg
      - https://s11.ax1x.com/2023/05/03/p9Jq86H.jpg

  - content: iCat 新启程
    date: 2023/03/24 16:54:25
    from: iPhone XR
    link: https://meuicat.com/blog/14/
    image: 
      - https://s11.ax1x.com/2023/05/02/p9GosYQ.jpg

  - content: 各种观影史集于一体！人生足迹页诞生咯~
    date: 2023/02/19 14:50:17
    from: Macbook Pro
    link: /collect/ || 链接描述
  • JSON文件可参照以下格式
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
[
   {
      "class_name": "即刻短文",
      "essay_list": [
          {
            "content": "园长新造型！爱死",
            "date": "2023/08/01 17:12:30",
            "video": {
                "bilibili": "//player.bilibili.com/player.html?aid=701381935&bvid=BV1dm4y1L7vj&cid=1212026428&page=1",
                "autoplay": true
            }
         },
         {
            "content": "这辈子都不想完善项目了 😭 两点了 一看才搓完三分之一..",
            "date": "2023/08/01 02:02:44",
            "video": {
                "player": "https://meuicat.com/video/1.mp4"
            }
         },
         {
            "content": "让我看看是谁在路上都还在敲键盘 噢 原来是我自己啊..",
            "date": "2023/07/31 15:54:26",
            "from": "iPhone XR"
         },
         {
            "content": "落班 烧个排骨778~",
            "date": "2023/07/26 17:55:36",
            "from": "iPhone XR",
            "image": [
               "https://s11.ax1x.com/2023/07/26/pCjWbY4.jpg || 图片描述",
               "https://s11.ax1x.com/2023/07/26/pCjWqfJ.jpg"
            ]
         },
         {
            "content": "嘘..听歌..睡觉...",
            "date": "2023/07/20 00:38:41",
            "aplayer": {
               "server": "netease",
               "id": "1430702919"
            },
            "top": true
         },
         {
            "content": "人生应该是一个轴对称的形状，最后失去的，也就是最开始拥有的。现在没人记得你的生日，有好处也有坏处，至少我是这么理解的。但无论是好还是坏，忍一忍，都会很快过去的",
            "date": "2023/07/19 01:48:36",
            "from": "iPhone XR",
            "link": "/blog/64 || 链接描述"
         },
         {
            "content": "用堆AI重绘一下我最爱的头像（图一 👉 图二）",
            "date": "2023/07/06 16:30:32",
            "from": "iPhone XR",
            "link": "/blog/61",
            "image": [
               "https://img.meuicat.com/posts/2023/7/10.webp",
               "https://img.meuicat.com/posts/2023/7/11.webp"
            ]
         },
         {
            "content": "",
            "date": "2023/06/30 08:26:22",
            "aplayer": {
               "server": "netease",
               "id": "2009974513"
            }
         }
      ]
   }
]
参数释义注意事项
content【选填】说说内容/
date【必填】说说发布的时间/
image【可选】说说图片图片的描述可在链接后以“||”分割开。如：”https://img.meuicat.com/posts/2023/7/11.webp || 亦小封”
aplayer【可选】音乐播放器/
aplayer.server【必填】音乐播放器的服务器目前仅支持填写：netease、tencent
aplayer.id【必填】音乐ID只能填写单曲id
video【可选】视频/
video.player【选填】video视频播放器/
video.bilibili【选填】bilibili视频必须是b站带BV号的视频链接
video.autoplay【选填】bilibili视频是否自动播放如需自动播放，请填写true
from【可选】标识符，无实际意义/
link【可选】外部链接链接描述可在链接后以“||”分割开。如：”https://meuicat.com/ || MeuiCat”

memos api地址格式如下所示：
https://memos地址/api/v1/memo?creatorId=用户UID&tag=标签名

memos地址就是首页地址，如：memos.meuicat.com

Memos 0.20.1以下版本UID的获取方式：

  • 点击个人头像，然后点击 RSS

  • 根据浏览器链接获取ID

如url是：https://memos.meuicat.com/u/1/rss.xml
则creatorId就是1
最后完整链接如下：
https://memos.meuicat.com/api/v1/memo?creatorId=1&tag=说说
能看到数据则为正确链接

Memos 0.21.0版本UID获取方式：

  • 点击设置 - 我的账号 - 编辑

  • 用户名上显示的数字即是你的UID

  • Memos用法：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#说说 {标识符} 我是内容 [我是链接](https://meuicat.com) ![](https://img.meuicat.cn/blog/8.png)
<!-- 常规写法 -->

#说说 网易云音乐 {music netease 29947420 }
#说说 腾讯音乐 {music tencent 330977131 }
<!-- 音乐写法 -->

#说说 普通视频 { player https://v.meuicat.com/video/1.mp4 }
#说说 哔哩哔哩手机视频 { bilibili https://m.bilibili.com/video/BV17T4y1A7eW }
#说说 哔哩哔哩网页视频 { bilibili https://www.bilibili.com/video/BV17T4y1A7eW/?spm_id_from=333.1007.tianma.1-3-3.click }
<!-- 视频写法 -->

#说说 #top
我是内容 ![我是图片描述](https://img.meuicat.cn/blog/8.png)![](https://img.meuicat.cn/blog/8.png)
<!-- 置顶写法 -->
参数释义注意事项
#标签【必填】标签，用于区分说说标签内前缀为#，至少需要有一个
#top【可选】置顶，用于置顶说说。置顶的说说会排在最前面，不受数量显示限制/
{自定义标识符}【可选】标识符，无实际意义，选填{}内容前后不能有空格和换行
music【可选】音乐，写法注意规范，以空格隔开每个项。/
music.service【必选】music第一项数据，音乐服务商目前仅支持填写：netease、tencent
music.id【必选】music第二项数据，音乐id仅可以是封面id/单曲id/歌单id
bilibili【可选】bilibili，写法注意规范，以空格隔开每个项。/
bilibili.link【必选】bilibili第一项数据，bilibili视频链接必须是b站带BV号的视频链接
bilibili.autoplay【可选】bilibili第二项布尔值，bilibili视频是否自动播放。默认不自动播放如需自动播放，请填写true

关于更多写法问题可以访问iCat - Memos查看

即刻Mini

  • 新增 [blogRoot]/themes/butterfly/layout/includes/mixins/post-ui.pug 页面内容
    （ + 号直接删除 即是正常缩进）
1
2
3
4
5
6
7
8
mixin postUI(posts)
  - let newTitle= newPost()
+  if theme.essay.enable && theme.essay.home_mini
+    include ./essay_mini.pug
  each article , index in page.posts.data
    .recent-post-item
  
  ···
  • 创建 [blogRoot]/themes/butterfly/layout/includes/mixins/essay_mini.pug 页面，并新增以下内容
    （注意该内容中 fontawesome 图标 需要自行替换）
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
.essay-mini
    i.iconfont.icat-essay-mini(onclick=`pjax.loadUrl('${theme.essay.home_mini_link}')` title="即刻短文" style="font-size: 2.25rem; margin-right: 1rem")
    .swiper-container.swiper-no-swiping#Essay(tabindex="-1" onclick=`pjax.loadUrl('${theme.essay.home_mini_link}')`)
        .swiper-wrapper#essay-mini
.essay-mini.wow.animation-slide-in(data-wow-duration="1s" data-wow-delay="200ms" data-wow-offset="100" data-wow-iteration="1")
    i.iconfont.icat-essay-mini(onclick=`pjax.loadUrl('${theme.essay.home_mini_link}')` title="即刻短文" style="font-size: 2.25rem; margin-right: 1rem")
    .swiper-container.swiper-no-swiping#Essay(tabindex="-1" onclick=`pjax.loadUrl('${theme.essay.home_mini_link}')`)
        .swiper-wrapper#essay-mini
            case theme.essay.mode
                when 'local'
                    each item, i in site.data.essay.essay_list.slice(0, 10)
                        .li-style.swiper-slide
                            | #{item.content}
                            if item.image
                                | 【图片】
                            else if item.aplayer
                                | 【音乐】
                            else if item.video || item.bilibili
                                | 【视频】
                when 'json'
                    .li-style.essay-loading(style="text-align: center") 正在加载...
                    script.
                        (async function () {
                            const response = await fetch('!{url_for(theme.essay.mode_link)}');
                            const data = await response.json();
                            const list = data[0].essay_list.slice(0, 10).map(item => {
                                let type = item.image ? '【图片】' : item.aplayer ? '【音乐】' : item.video ? '【视频】' : '';
                                return `<div class="li-style swiper-slide">${item.content + type}</div>`
                            });
                            document.querySelector('#essay-mini').innerHTML = list.join(' ');
                        })()
                when 'memos'
                    .li-style.essay-loading(style="text-align: center") 正在加载...
                    script.
                        (async function () {
                            const response = await fetch('!{url_for(theme.essay.mode_link)}');
                            const data = await response.json();
                            const list = data.slice(0, 10).map(item => {
                                let data = item.content,
                                    content = data.replace(/#(.*?)\s|\n/g, '').replace(/\!\[(.*?)\]\((.*?)\)/g, '').replace(/\{(.*?)\}/g, '').replace(/(?<!\!)\[(.*?)\]\((.*?)\)/g, '').trim();
                                    type = data.match(/\!\[(.*?)\]\((.*?)\)/g) ? '【图片】' : data.match(/{\s*music\s*(.*?)\s*(.*?)\s*}/g) ? '【音乐】' : data.match(/{\s*player\s*(.*)\s*}/g) || data.match(/{\s*bilibili\s*(.*?)\s*}/g) ? '【视频】' : '';
                                return `<div class="li-style swiper-slide">${content + type}</div>`
                            });
                            document.querySelector('#essay-mini').innerHTML = list.join(' ');
                        })()
    i.iconfont.icat-right-btn(title="查看全文" onclick=`pjax.loadUrl('${theme.essay.home_mini_link}')` style="margin-left: 1rem")
  • 新建 [blogRoot]/themes/butterfly/source/css/_page/homepage.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
+if hexo-config('essay.enable') && hexo-config('essay.home_mini')
+  .essay-mini
+    background: var(--card-bg)
+    color: var(--font-color)
+    padding: 0.5rem 1rem
+    border-radius: 8px
+    box-shadow: var(--icat-shadow-border)
+    display: flex
+    border: var(--style-border)
+    align-items: center
+    height: 50px
+    animation: slide-in 0.6s 0.4s backwards
+    will-change: transform
+    transition: .6s
+
+    &:hover
+      border: var(--style-border-hover-always)
+
+    #Essay
+      overflow: hidden
+      width: 100%
+      overflow: hidden
+      text-overflow: ellipsis
+      white-space: nowrap
+
+      #essay-mini
+        width: 100%
+        height: 25px
+        line-height: 25px
+        display: flex
+        flex-direction: column
+
+      .li-style
+        width: auto
+        max-width: 100%
+        height: 25px
+        text-align: center
+        overflow: hidden
+        text-overflow: ellipsis
+        font-weight: 700
+        margin: auto
+        cursor: pointer
+        white-space: nowrap
+        user-select: none
+
+    i, .li-style
+      transition: .6s
+      cursor: pointer
+
+      &:hover
+        color: var(--icat-blue)

#recent-posts
  & > .recent-post-item:not(:first-child)

  ···
可选CSS样式
  • 新增 [blogRoot]/source/css/essay.css 样式文件内容
    （也可以在自建的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
.essay-mini {
  background: var(--card-bg);
  color: var(--font-color);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  -webkit-box-shadow: var(--icat-shadow-border);
  box-shadow: var(--icat-shadow-border);
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  border: var(--style-border);
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  height: 50px;
  -webkit-animation: slide-in 0.6s 0.4s backwards;
  -moz-animation: slide-in 0.6s 0.4s backwards;
  -o-animation: slide-in 0.6s 0.4s backwards;
  -ms-animation: slide-in 0.6s 0.4s backwards;
  animation: slide-in 0.6s 0.4s backwards;
  will-change: transform;
  -webkit-transition: 0.6s;
  -moz-transition: 0.6s;
  -o-transition: 0.6s;
  -ms-transition: 0.6s;
  transition: 0.6s;
}
.essay-mini:hover {
  border: var(--style-border-hover-always);
}
.essay-mini #Essay {
  overflow: hidden;
  width: 100%;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.essay-mini #Essay #essay-mini {
  width: 100%;
  height: 25px;
  line-height: 25px;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -o-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
.essay-mini #Essay .li-style {
  width: auto;
  max-width: 100%;
  height: 25px;
  text-align: center;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  font-weight: 700;
  margin: auto;
  cursor: pointer;
  white-space: nowrap;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.essay-mini i,
.essay-mini .li-style {
  -webkit-transition: 0.6s;
  -moz-transition: 0.6s;
  -o-transition: 0.6s;
  -ms-transition: 0.6s;
  transition: 0.6s;
  cursor: pointer;
}
.essay-mini i:hover,
.essay-mini .li-style:hover {
  color: var(--icat-blue);
}

/* 即刻mini样式 */
  • 新增 [blogRoot]/source/js/essay.js 文件内容
    （或写在自建的公共 js 中也可以）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function whenDOMReady() {
initEssay();
};

whenDOMReady()
document.addEventListener("pjax:complete", whenDOMReady)

function initEssay() {
  if (document.querySelector('#essay-mini')) {
    let swiper = new Swiper('.swiper-container', {
        direction: 'vertical',
        loop: true,
        autoplay: {
            delay: 3000,
            pauseOnMouseEnter: true
        },
    });
  }
} // Swiper轮播 - 即刻mini
  • 在 _config.butterfly.yml 主题配置文件中 inject 下的 bottom 引入 essay.js 和 waterfall.js
1
2
3
4
5
6
7
8
9
  ···

inject:
  head:
    - ···
  bottom:
    - <script src="https://cdn.staticfile.net/Swiper/10.3.1/swiper-bundle.min.js"></script> # Swiper - 轮播动画库

  ···

Meting说明

如遇到音乐模块无法显示，请将查看meting的js资源文件链接是否为butterfly资源。

如果为butterfly，请将链接改为第三方meting最新资源链接。

譬如：

魔改适配

已适配Solitude主题，具体魔改教程可前往下方文章查看

Solitude魔改教程：动态即刻短文
属于私人的叨叨池，畅所欲言；多种部署方式的iCat版动态即刻短文
]]> 经验分享 Butterfly主题 魔改记录 https://meuicat.com/posts/1cdf15f7.html#disqus_thread Butterfly的魔改教程：loading加载动画 https://meuicat.com/posts/a826427.html https://meuicat.com/posts/a826427.html Thu, 27 Jul 2023 14:45:45 GMT iCat版Logo加载动画；内附旧版Heo样式魔改教程，以及胶囊加载

📚 更多文档目录

🚀 搭建教程 | 1 - 📑 前置教程 | 2 - 🎈 主题调整 | 3 - ✨ 魔改教程 | 4 - 🐈 重构自用数据记录

本篇教程基于 Hexo 6.3.0 & Butterfly 4.8.5 为博主的魔改教程记录，以防自己日后因魔改迷失所记录 📝

最后更新于 2023 年 07 月 28 日

230728 更新：将样式整合为loading.styl，省去link引用

iCat版Logo加载

临时写的一个loading，可能会有些bug样式，第一版先这样，后面会继续修

效果预览

正常模式
暗黑模式

创建数据

  • 修改 [blogRoot]/themes/butterfly/layout/includes/loading/fullpage-loading.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
35
36
37
38
39
40
41
42
-#loading-box
-  .loading-left-bg
-  .loading-right-bg
-  .spinner-box
-    .configure-border-1
-      .configure-core
-    .configure-border-2
-      .configure-core
-    .loading-word= _p('loading')
+#loading-box(onclick='document.getElementById("loading-box").classList.add("loaded")')
+  #icat-splash
+    .icat-loading
+      img(src=url_for(theme.preloader.logo) data-src=url_for(theme.preloader.logo_dark))

script.
+  var htmlElement = document.querySelector('html');
+  if (htmlElement.getAttribute('data-theme') === 'dark') {
+    var imgElement = document.querySelector('.icat-loading img');
+    var dataSrc = imgElement.getAttribute('data-src');
+    imgElement.src = dataSrc;
+  }
+  
  const preloader = {
    endLoading: () => {
-     document.body.style.overflow = '';
+      document.body.style.overflow = 'auto';
      document.getElementById('loading-box').classList.add("loaded")
    },
    initLoading: () => {
-     document.body.style.overflow = '';
+      document.body.style.overflow = 'hidden';
      document.getElementById('loading-box').classList.remove("loaded")
    }
  }
+
+  preloader.initLoading()
  window.addEventListener('load',()=> { preloader.endLoading() })

  if (!{theme.pjax && theme.pjax.enable}) {
    document.addEventListener('pjax:send', () => { preloader.initLoading() })
    document.addEventListener('pjax:complete', () => { preloader.endLoading() })
  }
  • 替换 [blogRoot]/themes/butterfly/source/css/_layout/loading.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
if hexo-config('preloader')
  #loading-box.loaded
    #icat-splash
      opacity: 0
      z-index: -1000

  #icat-splash
    display: -webkit-box
    display: -moz-box
    display: -webkit-flex
    display: -ms-flexbox
    display: box
    display: flex
    justify-content: center
    align-items: center
    width: 100%
    height: 100%
    position: fixed
    background: var(--icat-card-bg)
    z-index: 1999
    opacity: 1
    -ms-filter: none
    filter: none
    -webkit-transition: .3s
    -moz-transition: .3s
    -o-transition: .3s
    -ms-transition: .3s
    transition: .3s

    .icat-loading
      width: 30%
      height: auto
      overflow: hidden
      display: flex
      justify-content: center
      position: relative

      @media screen and (max-width: 768px)
        width: 50%
      
      img
        width: 100%
        height: auto
        -webkit-filter: brightness(1)
        -moz-filter: brightness(1)
        -o-filter: brightness(1)
        -ms-filter: brightness(1)
        filter: brightness(1)

      &::before
        content: ""
        display: inline-block
        width: 100%
        height: 400%
        background-image: linear-gradient(to bottom, #FCFCFC, #FCFCFC 25%, #E8FF00 25%, #E8FF00 50%, #34BE89 50%, #34BE89 75%, #FCFCFC 75%, #FCFCFC)
        background-position: center top
        position: absolute
        top: 0
        animation-name: loading
        animation-delay: 0.5s
        animation-duration: 4s
        animation-iteration-count: infinite
        animation-timing-function: linear

        [data-theme="dark"]
          background-image: linear-gradient(to bottom, #1d1e22, #1d1e22 25%, #E8FF00 25%, #E8FF00 50%, #34BE89 50%, #34BE89 75%, #1d1e22 75%, #1d1e22)

  @keyframes loading
    from
      top: 0
    to
      top: -300%
  • 新增 _config.butterfly.yml 主题配置文件的 preloader 里的子配置项 logo 和 logo_dark
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  ···

# 页面加载动画 preloader
# --------------------------------------

preloader:
  enable: true
  source: 1
  # source；1. 开屏加载；2. 顶部进度
  # pace theme (see https://codebyzach.github.io/pace/)
  pace_css_url:
+  logo: https://s11.ax1x.com/2023/07/28/pCxGRfg.png
+  logo_dark: https://s11.ax1x.com/2023/07/28/pCxG2tS.png
  # 日月Logo图片

  ···

Heo版Avatar加载

本小节仅适用 Butterfly 4.5 以上版本

  • 修改 [blogRoot]/themes/butterfly/layout/includes/loading/fullpage-loading.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
35
-#loading-box
-  .loading-left-bg
-  .loading-right-bg
-  .spinner-box
-    .configure-border-1
-      .configure-core
-    .configure-border-2
-      .configure-core
-    .loading-word= _p('loading')
+#loading-box(onclick='document.getElementById("loading-box").classList.add("loaded")')
+  .loading-bg
+    div.loading-img(style=`background-image:url(${theme.preloader.avatar});background-repeat: no-repeat;background-position:center;`)
+    .loading-image-dot

script.
  const preloader = {
    endLoading: () => {
-     document.body.style.overflow = '';
+      document.body.style.overflow = 'auto';
      document.getElementById('loading-box').classList.add("loaded")
    },
    initLoading: () => {
-     document.body.style.overflow = '';
+      document.body.style.overflow = 'hidden';
      document.getElementById('loading-box').classList.remove("loaded")
    }
  }
+
+  preloader.initLoading()
  window.addEventListener('load',()=> { preloader.endLoading() })

  if (!{theme.pjax && theme.pjax.enable}) {
    document.addEventListener('pjax:send', () => { preloader.initLoading() })
    document.addEventListener('pjax:complete', () => { preloader.endLoading() })
  }
个人调整的Loading页面

将头像下方的绿色小点给删除了

1
2
3
4
5
    ···

-   .loading-image-dot

    ···
  • 修改 [blogRoot]/themes/butterfly/layout/includes/loading/index.pug 页面内容
    （ + 号直接删除 即是正常缩进）
1
2
3
4
5
6
7
if theme.preloader.source === 1
  include ./fullpage-loading.pug
+else if theme.preloader.source === 2
+  include ./pace.pug
else
+  include ./fullpage-loading.pug
  include ./pace.pug
  • 在自建的CSS文件 [blogRoot]/source/css/icat_change.css 里新增以下内容

这一步是修改 pace 加载的胶囊 💊 样式用的
可以单独新建个css文件，将下面的样式放进去，也可以不做这一步，那么在主题配置文件 pace_css_url 这一项就要留空

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
.pace {
    -webkit-pointer-events: none;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    z-index: 2000;
    position: fixed;
    margin: auto;
    top: 10px;
    left: 0;
    right: 0;
    height: 8px;
    border-radius: 8px;
    width: 4rem;
    background: #eaecf2;
    border: 1px #e3e8f7;
    overflow: hidden;
}
.pace-inactive .pace-progress {
    opacity: 0;
    transition: 0.3s ease-in;
}
.pace .pace-progress {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    max-width: 200px;
    position: absolute;
    z-index: 2000;
    display: block;
    top: 0;
    right: 100%;
    height: 100%;
    width: 100%;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    animation: gradient 1.5s ease infinite;
    background-size: 200%;
}
.pace.pace-inactive {
    opacity: 0;
    transition: 0.3s;
    top: -8px;
}
@keyframes gradient {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
}

/* pace 加载的胶囊样式 */
  • 替换 [blogRoot]/themes/butterfly/source/css/_layout/loading.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
if hexo-config('preloader')
  .loading-bg
    display: flex;
    width: 100%;
    height: 100%;
    position: fixed;
    background: var(--icat-card-bg);
    z-index: 1001;
    opacity: 1;
    transition: .3s;

  #loading-box
    .loading-img
      width: 100px;
      height: 100px;
      border-radius: 50%;
      margin: auto;
      border: 4px solid #f0f0f2;
      animation-duration: .3s;
      animation-name: loadingAction;
      animation-iteration-count: infinite;
      animation-direction: alternate;
      background-size: cover;
    .loading-image-dot
      width: 30px;
      height: 30px;
      background: #6bdf8f;
      position: absolute;
      border-radius: 50%;
      border: 6px solid #fff;
      top: 50%;
      left: 50%;
      transform: translate(18px, 24px);
    &.loaded
      .loading-bg
        opacity: 0;
        z-index: -1000;

  @keyframes loadingAction
    0% {
        opacity: 1;
    }

    100% {
        opacity: .4;
    }
个人调整的Loading样式

去掉头像的边框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    ···

  #loading-box
    .loading-img
      ···
-     border: 4px solid #f0f0f2;

    ···

-   .loading-image-dot
-     width: 30px;
-     height: 30px;
-     background: #6bdf8f;
-     position: absolute;
-     border-radius: 50%;
-     border: 6px solid #fff;
-     top: 50%;
-     left: 50%;
-     transform: translate(18px, 24px);

    ···
  • 新增 _config.butterfly.yml 主题配置文件的 preloader 里的子配置项 avatar
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  ···

# 页面加载动画 preloader
# --------------------------------------

preloader:
  enable: true
  source: 3
  # source；1. 开屏加载；2. 顶部进度
  # pace theme (see https://codebyzach.github.io/pace/)
  pace_css_url: /css/icat_change.css
+  avatar: https://s11.ax1x.com/2023/07/07/pCc1TSO.jpg
  # 自定义头像 （魔改 - 满屏loader）

  ···

source: 1 为 满屏加载 无pace胶囊
source: 2 为 pace胶囊 无满屏动画
source: 3 是两者都启用

]]> 经验分享 Butterfly主题 魔改记录 https://meuicat.com/posts/a826427.html#disqus_thread 差旅游记 https://meuicat.com/posts/b8fd1de5.html https://meuicat.com/posts/b8fd1de5.html Sat, 22 Jul 2023 16:39:31 GMT 感谢杜老师邮寄的手礼；记事碎碎念~ 参加工作那么多年，到目前为止就出过两次差
回想第一次出差，深圳 - 广州，还被委以重任。当时团队就几个人，一人负责一个版块，而我刚实习，真的经验不足，看似稳如老狗，实际焦头烂额（搞不来，真的搞不来..）
那是时时刻刻都在查缺补漏，就这么说吧，整个会谈签约流程，哪哪都能看到我的身影

而此次，广东深圳 - 福建厦门，我本人纯属是在玩乐之中度过的 😝
我本就对开模修模啥的一窍不通，只是接触模具这行也快半年了，还是学了一丝皮毛的。正好公司的三个冲模师傅要去厦门那边修模，我爹拿公司有要紧事情处理的幌子，就把我丢过去了
（生日那天跟几个好友过的，我也没想到我爹给我在家也准备了礼物和蛋糕，估摸着我爹不爽了，第二天直接对我重拳出击）
其实刚开始我还以为，是让我去涨涨知识的。后面说让我先垫钱，回去再给我报销，我就感觉不对劲了 🙂

CU1fm
锣背角（机角度不够）

厦门真的是很舒服的一个城市，生活节奏相对于深圳那些地方，慢上许多，很惬意。这里吸引人的，不仅仅是美丽的海滩和著名的景点
狠下心，出出血，住在了思明的一家名宿里，这里每天都可以看到渔民在海边捕鱼。这里的房屋虽然不比城市的高楼大厦，但是每一砖每一瓦都似乎在述说着这座城市的故事。在夜晚，沿着海滩漫步，看到远处的灯塔在夜色中闪烁，给人一种独特的美感

而在这，我喜欢上了这种生活。正如我朋友圈发的随笔：一天忙碌之后，坐在露台，喝茶亦或是喝着冰镇饮料，看着夕阳西下，感觉时间都静止了
所以，无论何时何地，总要去拥抱生活，去享受，去品味。毕竟日出日落，最好看的总是在明天

很难不爱看日落
质检实习小姐姐

最后的最后：
感谢杜老师寄来的小礼品！
好几天前就到快递丰巢柜了，我一直在想到底是什么东西。毕竟搬到坪山后，我就没买过东西，一度认为是谁给我寄的的生日礼物…
一回到家就立马去取了回来，拆开发现是之前杜老师说的小礼品。谢谢杜老师啦~ （这个颜色真的挺好看的）

]]> 生活随笔 封の唠叨 https://meuicat.com/posts/b8fd1de5.html#disqus_thread 再见，不惑之年：二十又一 https://meuicat.com/posts/adde0774.html https://meuicat.com/posts/adde0774.html Tue, 18 Jul 2023 16:27:07 GMT 祝我 亦小封 生日快乐 我是一个记性很差的人，就连自己的生日都会忘记。随着成长、经历，需要被铭记的日子也渐渐多了起来，但生日却是人这一生中最大的日子

本以为今年将会是一个人平平静静的度过这一天，但奈何有一群要好且超级懂我的朋友们。是他们使这一天回轨原本的色彩
前天晚上好友M突然对我说，喝了酒不方便开车，让我送他回去，没成想是一个意想不到的惊喜生日派对
那一刻，才意识到，原来还有人记得我的生日啊
从小就觉得过生日要有仪式感，能让所有人都开心，所以我很喜欢过生日。谁过都好，重点是所有人一起高高兴兴的吹蜡烛切蛋糕
但我个人对过生日无所谓的，除了我家人，谁记得谁不记得我都无所谓。其实真要较真，家人不记得我也不会太过介意
但是，能被记得肯定是开心的。因为知道自己被人记挂着，好好对待着..

今年
2022年
2021年
2020年
2019年

Guxi的星手链，我收到的第一份生日礼物，也是我最喜欢的一条手链。而今年的生日，让我最心动的就是碎蓝玫瑰了，这也是我第一次收到这束花
有朋友问：手链很重要吗。重要，当然重要，如果一样东西不重要，我怎么会还要继续找呢？他又接着问：重要为什么不放好。是啊，如果这个东西对我很重要，为什么我当时不保管好呢，人总是在失去后才追悔莫及吧..
即使是这一束花，我很喜欢，但花总会有凋落的时候。即使我呵护的再好，该凋零的总要学会告别
所以，要学会再见，要知道什么真正属于自己，什么时候要放手。属于你的终究会属于你，而不属于你的，终是未曾拥有

记得，要开心，要快乐

]]> 生活随笔 封の唠叨 https://meuicat.com/posts/adde0774.html#disqus_thread 近况记事 - 6 https://meuicat.com/posts/d8567a83.html https://meuicat.com/posts/d8567a83.html Sun, 16 Jul 2023 10:23:45 GMT 月更记事碎碎念~ Hey！又到了一月一次的碎碎念，正好有一丢丢的时间来记述一下
此处承接上篇碎碎念结尾，那时候碰巧出了个小车祸，腿受伤，被迫在光明呆了一星期 🤕
之前就顺手考的D证，好不容易可以试试朋友的帅机车，没成想第一次上路就摔了..几乎一星期都没怎么出门，后面结痂了后才敢出去轻微的活动活动
我是正常道路直行，旁边有个骑电动车的阿姨，突然左转，机车本来就重，加上紧急躲闪，我倒摔倒了..（交警能不能管管，严抓电动车走机动车道）

刚摔时
留的疤

当时布柒糖的群里刚好有个喵友问：有没有会做html网页的，我想着在家闲着也是闲着，就自告奋勇了，还可以给自己积累下经验（对于一些不是主攻此专业的同学碰上这门课程时，那肯定是得找外援啦）
写完了后还是意犹未尽，兴致起来了，真的手痒痒，想着小红书上面应该也会有大学生找来的吧，就发了一条小红书 🍠
没成想多到写不完，整整写了两个星期，我腿伤都好的差不多了，排期都排到了七月一号。（纯手敲，定制化样式，当时都没想到套模版或是借鉴模版样式）但也属好景不长，那个红薯笔记在达到1W浏览量的时候就被人举报封掉了..
本来还想接着重新发一条新的，但想了想，手上还有那么多排期的，加上腿也好的差不多了，就放弃了

部分红薯截图

接下来的就是拖着我病号身体，回一趟上海，收拾我的破铜烂铁彻底逃离上海，奔赴美好的大深圳。但还得过最后一道坎，履行对娜子的承诺 “过最后一个节日”
想着过完这最后一个节日，我就彻底解放了，我亦小封，大发慈悲一次去买菜做饭，给她做了最后一次饭（想了想，好像那么多个月以来就没做过几次饭，这是第三次做）
娜子也不知道是不是在报复我，两天的时间，硬是拉着我走了一天，不开车，就走路，也不让打车。亏我还带着她去做戒指、做美甲、去电玩城疯、玩麻将还有各种吃，但好好的一个端午，我连粽子都没吃到 😑
既然已经分开了，那就要考虑两小只的去留归属了。虽然很舍不得小耶加，但毕竟它还是姓陈，在法律的角度来说，我带不走小耶加，那就只能让小耶加陪着娜子了；至于梁摩卡，虽然很黏娜子，但我也想要有个小家伙，能在我下班后拖着满身疲倦时安抚下心灵..
摩卡有时候真的神似我以前养过的叫鬼鬼的一只猫，所以之前很多时候我会更偏向摩卡，即使我喜欢的是小耶加那类的猫咪 🐈

在前妈家干的最后一顿饭（埋头苦干）

题外话：
怎么说呢，帮大家试过了，新欢代替不了、忘不了旧爱；工作和感情只能选其一，鱼和熊掌不可兼得
朋友来问我，好好的怎么就分了呢？我好像说不出什么理由，只能摇头苦笑。就好像说的：爱和忙不冲突，可真的太累太累了，相处变得疏离，沟通变得日渐稀少。我转身投入工作的洪流，可以说一天二十四小时，有十八个小时都在置身事业。而娜儿在这短短的几个月以来，几乎舍弃了学业，可一切的基础是要以自己为中心啊，学业是未来的基石，我始终坚信一句话：爱人先爱己
所以这种结局对彼此都好，工作好好工作，学习好好学习。愿千帆过尽归来仍是少年

我这个人吧，闲不下来，喜欢找点事干。刚好有天大晚上凌晨两点出门觅食，看到路边有很多摆摊了，我和朋友当场一锤定音，也想搞一个玩玩
我是啥都想做一做，体验体验，我朋友纯粹是因为时间多，随便我折腾。正好我新搬的家就在坪山和惠州的交界边缘，离惠阳就两公里
预调酒和横幅布那些刚好朋友也认识人做过，准备这些东西一天就搞定了。我做鸡尾酒，我朋友就手敲渣男茶，虽然没赚到什么钱，但是有乐趣呀。没摆摊前，下了班开着车到处逛，到处玩，吃东西的钱车快充的钱，都是支出没有收入，摆摊后，下班后的时间都不会感到迷茫，摆摆摊，即使赚不到钱，也能充实充实生活

摆摊历险记

出摊一周，晚上八点半到凌晨一点半，茶摊营业额共计：1423，酒摊营业额共计：1982 除去成本共盈利：1344（两人平分672）
因为有车后备箱，其他的物料成本花不了多少钱，一般来说第一个星期能收回成本就不错了。主要的是购置了五六张配套茶桌凳子，剩下的就是胶杯和鲜花了
刚好前段时间在小红书帮写代码认识了一位云南那边的红薯，他的爸爸在深圳做鲜花批发，这就得以让我们低于一般批发价拿到了一批不错的鲜花。至于各类调酒，直接就丢给我朋友（小摊合伙人）帮我搞定

周五周六的人流量比平常高，营业额也相应较高，可以达到300-400，平时就200左右。八点半摆摊，九点就坐满了人，十点都没停过手，茶桶冰桶两个小时秒空…

手打柠檬茶
恋人玫瑰酒

最后就是搬家了，一个月前公司和厂房都已全部搬到了坪山，但因为我弟还在上学，所以要等他放暑假后再搬家。那段时间我几乎是每天都在两地跑，早上六点起床七点出门开车去坪山，晚上六点再回光明，真的要了半条命
别问为什么，问就是住不惯，真的住不惯，在坪山仿佛回到了农村，五楼平民房，还没有电梯。这方圆三公里根本没有娱乐场所，连个公园都没有，最最最要命的是房间n小（唯一庆幸的是，我爹也不知道是不是嫌我烦还是怎么着，给我单独弄了个单间）如果要去玩就得开车去惠阳，毕竟是深圳惠州交界，只有在那里，才有点年轻人生活的气息
就在前几天，我爹一大早的来找到我，让我别回公司先，并且给我放了两天假，让我滚回光明收拾好东西，帮我妈搬家。13号一大早，还没到五点就把我揪起来装车搬家，此时我的内心（🙂）。不得不说，家里的东西是真的多，两台中型货车，塞得满满当当。虽然大家电星行李什么的，搬家公司会搬，但个人物品我还是不太放心，毕竟只有自己知道那些东西需要注意放置的，就亲力亲为了，足足上下了五趟楼。经历过两次搬家，都几乎要把我干费
还有就是买菜的问题了，这附近的菜和肉都不新鲜卖的价格的还贵很多，如果想吃海鲜根本没有，只能去市场。而最近的市场却是在惠阳内，我妈并没考驾照，所以这个活就自然而然的落到了我的身上。现在每隔一天就要陪我妈去买菜，买完再回去干活（我妈已经抱怨我爹无数次搬到这个鸟不拉屎的鬼地方）

老夫的少女心
五公里的市场

最后的最后：
在好几个月前，小封我心血来潮，在小红书里当了一段时间情感博主，慢慢的有许多感情不和的情侣找来。我很疑惑，好像现在的情侣一出现问题会更偏向于星座，去看两人是不是不合，以星座说揣测对方的心理
慢慢的，看了许多的爱情故事，有意难平，也有毁三观的。现在的恋爱观，随便拿出一条，放在古时，最低都得浸猪笼
于是我在尝试把这些一个个故事，写下来，做成一个新的栏目放在Capucino故事集。第一次尝试叙记故事，可能词不达意。愿世间有情人终成眷属

Skelter - Chapter 1
记一段射手与金牛的感情历程，第一视角是红薯上私信的一位女生，金牛座
]]> 生活随笔 封の唠叨 https://meuicat.com/posts/d8567a83.html#disqus_thread Butterfly的魔改教程：自定页数跳转 https://meuicat.com/posts/a3f4aab4.html https://meuicat.com/posts/a3f4aab4.html Thu, 13 Jul 2023 15:41:03 GMT 基于 蝴蝶主题 的原生自定页数跳转版，再也不用频繁跳转页咯

📚 更多文档目录

🚀 搭建教程 | 1 - 📑 前置教程 | 2 - 🎈 主题调整 | 3 - ✨ 魔改教程 | 4 - 🐈 重构自用数据记录

本篇教程基于 Hexo 6.3.0 & Butterfly 4.8.5 为博主的魔改教程记录，以防自己日后因魔改迷失所记录 📝

最后更新于 2023 年 07 月 13 日

230713 更新：修复去除主页以外的自定页数跳转功能

本小节魔改教程基于 Butterfly 原生自定页数跳转版
更多参考 - Shine

  • 修改 [blogRoot]/themes/butterfly/layout/includes/pagination.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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
  ···

  var options = {
    prev_text: '<i class="fas fa-chevron-left fa-fw"></i>',
    next_text: '<i class="fas fa-chevron-right fa-fw"></i>',
    mid_size: 1,
    escape: false
  }
+  var icat_options = {
+    prev_text: '<i class="iconfont icat-chevron-left fa-fw"></i><div class="pagination_tips_prev">上页</div>',
+    next_text: '<div class="pagination_tips_next">下页</div><i class="iconfont icat-chevron-right fa-fw"></i>',
+    mid_size: 1,
+    escape: false
+  }

if is_post()
  - let prev = theme.post_pagination === 1 ? page.prev : page.next
  - let next = theme.post_pagination === 1 ? page.next : page.prev
  nav#pagination.pagination-post
    if(prev)
      - var hasPageNext = next ? 'pull-left' : 'pull-full'
      .prev-post(class=hasPageNext)
        a(href=url_for(prev.path) title=prev.title)
          if prev.cover_type === 'img'
            img.cover(src=url_for(prev.cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` alt='cover of previous post')
          else
            .cover(style=`background: ${prev.cover || 'var(--default-bg-color)'}`)
          .pagination-info
            .label=_p('pagination.prev')
            .prev_info=prev.title
          
    if(next)
      - var hasPagePrev = prev ? 'pull-right' : 'pull-full'
      .next-post(class=hasPagePrev)
        a(href=url_for(next.path) title=next.title)
          if next.cover_type === 'img'
            img.cover(src=url_for(next.cover) onerror=`onerror=null;src='${url_for(theme.error_img.post_page)}'` alt='cover of next post')
          else
            .cover(style=`background: ${next.cover || 'var(--default-bg-color)'}`)
          .pagination-info
            .label=_p('pagination.next')
            .next_info=next.title
else
  nav#pagination
    .pagination
      if is_home()
        - options.format = 'page/%d/#content-inner'
-     !=paginator(options)
+        !=paginator(icat_options)
+      else
+        !=paginator(options)
+      if is_home()
+        .toPageGroup
+          input#toPageText(maxlength="3" oninput="value=value.replace(/[^0-9]/g,'')" onkeyup="if (this.value === '0') this.value = ''" title="跳转到指定页面")
+          a#toPageButton(data-pjax-state="" onclick="icattoPage.toPage()")
+            i.fa-solid.fa-angles-right
  • 新建 [blogRoot]/source/css/pagination.css 样式文件，并新增以下内容
    （也可以在自建的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
.page .layout > .recent-posts .pagination > a:hover {
    background: #00c4b6;
}
/* 翻页按钮悬停颜色 */
.layout > .recent-posts .pagination > a {
  border: var(--style-border);
}
/* 调整添加原生边框 */
#pagination .pagination {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.page .layout .recent-posts #pagination .pagination .prev {
  left: 0;
}
.page .layout .recent-posts #pagination .pagination .next {
  right: 0;
}
.page .layout .recent-posts #pagination .pagination .prev,
.page .layout .recent-posts #pagination .pagination .next {
  position: absolute;
  margin: 0 0;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 5.25em;
  overflow: hidden;
}
.page .layout .recent-posts #pagination .pagination .prev:hover .pagination_tips_prev {
  margin-right: 2.5px;
  opacity: 1;
}
.page .layout .recent-posts #pagination .pagination .prev .pagination_tips_prev {
  margin-right: -28px;
  transition: margin-right .3s;
  opacity: 0;
}
.page .layout .recent-posts #pagination .pagination .next:hover .pagination_tips_next {
  margin-left: 2.5px;
  opacity: 1;
}
.page .layout .recent-posts #pagination .pagination .next .pagination_tips_next {
  margin-left: -28px;
  transition: margin-left .3s;
  opacity: 0;
}
@media screen and (max-width: 768px) {
  .page .layout .recent-posts #pagination .pagination .prev,
  .page .layout .recent-posts #pagination .pagination .next {
    position: sticky;
    margin: 0 6px;
    display: inline-block;
    width: 2.5em;
  }
  .page .layout .recent-posts #pagination .pagination .prev .pagination_tips_prev,
  .page .layout .recent-posts #pagination .pagination .next .pagination_tips_next {
    display: none;
  }
}
/* 上下页按钮魔改 */
.pagination input {
  width: 2.5em;
  height: 2.5em;
  border-radius: 8px;
  border: var(--style-border-always);
  transition: all 0.3s;
  outline-style: none;
  padding-left: 12px;
  background: var(--icat-secondbg);
  color: var(--icat-fontcolor);
}

.pagination .toPageGroup:hover input,.pagination .toPageGroup input:focus {
  border: 1px solid #00c4b6;
  outline-style: none;
  width: 100px;
}

.toPageGroup {
  display: inline-flex !important;
  position: relative;
  margin: 0 6px !important;
}

a#toPageButton {
  display: flex;
  position: absolute;
  width: 2.5em;
  height: 2.5em;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
  background: var(--card-bg);
  border: var(--style-border-always);
  cursor: text !important;
  pointer-events: none;
}

.toPageGroup:hover a#toPageButton, .toPageGroup:focus-within a#toPageButton {
  margin-top: 4px;
  width: 27px;
  height: 27px;
  margin-left: 70px;
  background: var(--icat-card-bg);
  border: 1px solid var(--icat-none);
  border-radius: 4px;
  opacity: 0.2;
  transition: all 0.3s !important;
}

.toPageGroup:focus-within a#toPageButton.haveValue {
  opacity: 1;
  cursor: pointer;
}

a#toPageButton.haveValue {
  opacity: 1!important;
  cursor: pointer!important;
  pointer-events: all;
}

a#toPageButton.haveValue:hover {
  background: var(--icat-theme);
  color: var(--icat-white);
}

@media screen and (max-width: 768px) {
  .toPageGroup {
    display: none !important;
  }
}

/* 页数跳转按钮 */
  • 创建 [blogRoot]/source/js/pagination.js 文件，并新增以下内容
    （也可以在自建的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
27
28
29
30
31
32
var icattoPage = {
  toPage: function() {
      console.log("执行跳转");
      var e = document.querySelectorAll(".page-number")
        , t = parseInt(e[e.length - 1].innerHTML)
        , n = document.getElementById("toPageText")
        , a = parseInt(n.value);
      if (!isNaN(a) && a > 0 && "0" !== ("" + a)[0] && a <= t) {
          var s = 1 == a ? "/" : "/page/" + a + "/#content-inner";
          document.getElementById("toPageButton").href = s
      }
  },
  listenToPageInputPress() {
      var e = document.getElementById("toPageText")
        , t = document.getElementById("toPageButton");
      e && (e.addEventListener("keydown", (e=>{
          13 === e.keyCode && (icattoPage.toPage(),
          pjax.loadUrl(t.href))
      }
      )),
      e.addEventListener("input", (function() {
          "" === e.value || "0" === e.value ? t.classList.remove("haveValue") : t.classList.add("haveValue");
          var n = document.querySelectorAll(".page-number")
            , a = +n[n.length - 1].innerHTML;
          +document.getElementById("toPageText").value > a && (e.value = a)
      }
      )))
  }
}
icattoPage.listenToPageInputPress();

// 自定页数跳转
]]> 经验分享 Butterfly主题 魔改记录 https://meuicat.com/posts/a3f4aab4.html#disqus_thread 堆友AI作图：3D资源设计平台，堆出你的未来 https://meuicat.com/posts/ba1a396a.html https://meuicat.com/posts/ba1a396a.html Thu, 06 Jul 2023 06:14:17 GMT 时代在变，创意不息，堆友正在打造一片属于设计师们的惊喜家园
参考图
AI作图

堆友 AI作图 - 日漫模型 参照生成

参考图：三年前，朋友给我素描漫改的作品。初学初作，有些地方仔细看会显得很怪，但总体来说还是挺满意的（毕竟真的花心思 画了很久）

AI作图：最近看到阿里旗下的堆友AI公测了，就想着试试水，随手丢了图一进去，效果还不错，唯一的一点就是还没上线二次改动的功能…
堆友的可玩度也挺高的，Q版编辑器、商用素材，还有许多不错的3D素材，对于一些纯插画师来说，以后可能也会是一个非常好的绘图灵感平台


最后的最后：
在一些细节的处理上，比如：耳机，堆AI的处理就显得很呆；又或是在一些地方会莫名的出现脏点；在使用堆AI时，画面描述 建议为英文输入
对比Midjourney，还是有很多不足；毕竟M佬的位置摆在那里，功能上线的也多

对于有瑕疵的地方，后面自己用PS来修整的（每一张都有点问题，堆友还不能进行二改，只能如此）

原图
修改后
堆友
Alibaba Design打造的设计师全成长周期服务平台，围绕品质、效率、技能、成就、收入五大用户价值布局平台能力，全力服务设计师，旨在成为设计师的好朋友。
]]> 闲聊杂谈 封の唠叨 AI https://meuicat.com/posts/ba1a396a.html#disqus_thread 【QD-Today】自建私有自动签到服务 https://meuicat.com/posts/ec32e0c0.html https://meuicat.com/posts/ec32e0c0.html Sun, 02 Jul 2023 17:06:22 GMT 一个HTTP请求定时任务自动执行框架 前言

闲着无事，逛GitHub时刚好看到了 QD for Python3 项目，该项目由 a76yyyy 长期维护，可用的公共脚本也在逐日新增，当然了也可以自行编写脚本，总之可玩性还是很高的
正好我这手上的服务器性能还没拉满，也可以顺便给一些个平台签个到，何不乐乎

快速一览

首页
任务页
公共脚本页
自编页
iCat - 自动签到任务
一个HTTP请求定时任务自动执行框架 base on HAR Editor and Tornado Server

部署须知

本节教程为使用 Linux + Docker 部署方式
关于更多部署方式请前往作者GitHub或使用手册查看

QD for Python3 - 项目仓库
QD [v20230626] —— HTTP请求定时任务自动执行框架 base on HAR Editor and Tornado Server
QD for Python3 - 使用指南
HTTP定时任务自动执行Web框架

Docker部署

  • 在 FinalShell 的命令行输入一下命令，并回车
    （该命令里的 “{放行端口}” 改成你需要的端口号，其挂载路径看着需求来改，但并不建议去改动）
1
docker run -d -p {放行端口}:80 --name qiandao --restart=always -v /var/lib/docker/qiandao/config:/usr/src/app/config a76yyyy/qiandao

  • 将对于的端口正确的加入安全组放行后，即可使用公网IP加放行端口访问该容器内容；列如：47.888.888.47:9006

  • 将该容器项目建立反代，通过域名访问【此步骤可选】

QD使用

  • 首次使用先输入你需要的邮箱地址和密码，先点击 注册 再点击 登录

  • 而后点击 公共模版，进去后等待数据加载
    （最好是挂个梯子，以免加载出错；毕竟是GitHub的库…）

  • 加载完后即可查找你需要的脚本，点击 订阅 后，直接选择 保存 即可

  • 回到主页，在我的任务旁边有个 +号按钮，在弹出的页面里根据提示填写 Cookies 或 username 和 password 后保存即可

Cookies
username & password

Cookies获取

方式一

Get-Cookies - 插件
一键获取 Cookies 的 Chrome 扩展

  • 前往 Releases 下载安装打包好的 .crx 文件

  • 在 Chrome浏览器 - 扩展 - 加载已解压的扩展程序 将插件包拉进安装即可

  • 在 Cookies获取助手 插件里，找到 选项 将ip地址或域名地址填入即可

"该扩展程序未列在 Chrome 应用商店中,并可能是在您不知情的情况下添加的。"

解决方法：

  • 将下载好的 .crx 文件，更改后缀名为 .rar 并将rar直接解压

  • 再到 Chrome浏览器 - 扩展 - 加载已解压的扩展程序 选择解压后的文件夹进行安装即可

方式二

  • 在需要获取Cookies的网页按下 F12 后，接着在 控制台 里输入下面的这行命令并回车，就会将当前页面的Cookies弹窗出来
1
javascript:alert(document.cookie)

更多设置

邮件通知

当然，QD提供了多种通知推送方式，可自行选择适合自己的

  • 修改 [docker]/usr/src/app/config.py 文件里第一百七十一 至 一百七十八行的内容
1
2
3
4
5
6
7
8
9
# 邮件发送相关配置
mail_smtp = os.getenv('MAIL_SMTP',"smtp.163.com")                                       # 邮箱 SMTP 服务器
mail_port = int(os.getenv('MAIL_PORT', 465))                                # 邮箱 SMTP 服务器端口
mail_ssl = bool(strtobool(os.getenv('MAIL_SSL','True')))                    # 是否使用 SSL 加密方式收发邮件
mail_user = os.getenv('MAIL_USER', 'meuicat_718@163.com')                                      # 邮箱用户名
mail_password = os.getenv('MAIL_PASSWORD', '授权码')                              # 邮箱密码
mail_from = os.getenv('MAIL_FROM', '2714344056@qq.com')                               # 发送时使用的邮箱，默认与 MAIL_USER 相同
mail_domain_https = bool(strtobool(os.getenv('ENABLE_HTTPS', None) or
                                   os.getenv('MAIL_DOMAIN_HTTPS', 'False')))# 发送的邮件链接启用 HTTPS, 非框架自身 HTTPS 开关, 需要 HTTPS 请使用外部反向代理

icon修改

  • 修改替换 [docker]/usr/src/app/web/static/img 文件夹内的图片素材即可

  • 可使用 图标制作大师 快速生成对应的尺寸大小来替换

图标制作大师
轻松制作ICO，JPG，PNG等格式图标，多种尺寸可选，一键制作网站Favicon图标

标题修改

  • 修改 [docker]/usr/src/app/web/tpl 文件夹内的各个HTML文件即可
]]> 经验分享 Docker 自动签到 https://meuicat.com/posts/ec32e0c0.html#disqus_thread Long time no see https://meuicat.com/posts/3c7e3781.html https://meuicat.com/posts/3c7e3781.html Tue, 27 Jun 2023 08:05:46 GMT 突然听到前度阔别已久的声音是什么样的反应和心情 很早之前网络上流传着这么一个视频 “再次听到前任的消息是什么样的感受”
起初并不能感同身受的去体会到这段视频的含义是什么
都传言，复合，只会是重蹈覆辙的开始
如果说两个人分开了，那肯定就是都对彼此没有好感了。分开是对彼此的解脱，也会遇到新的事；新的人；开始新的生活

而这种事情，我前不久也经历了一次…

其实那一整天就隐隐约约感觉有什么事情会发生，蛮坐立不安的
起初以为吃点药能缓解缓解，但又尝试静下来看看书又或是做做饭，也都无济于事（算是习惯了吧，以前时不时也会突然这样，之前娜儿简称我这叫 “发病了”）
直到那天晚上，状态才缓解了许多，娜儿便提议去小吃街逛逛，我想着走走缓解下心情，毕竟我有时候还是挺喜欢热闹的地方

“你的不打扰是对我最后的尊重” 以及 “对现任最大的尊重就是跟前任断绝所有联系”
在这的前提下，早早的就把欭的电话拉黑了，并且我也不会想到她还会给我打电话

身处闹市，手机常年静音的情况下，并没有及时的注意到手机来电
于半小时后，查看手机时发现一个陌生来电，当我拨过去时，并没第一时间听出欭的同事的声音（之前和欭分手的时候，我跟他的这个同事发生过口角，一直没来的道歉，也不知怎么去道歉吧当时..毕竟当时挺无脑的），后来是欭接过了电话，并说道：我是W
这一刻，我愣住了，但心里却并没有像往常一样，也不会心跳加速变得异常紧张，但脑子还是很快的一下变得空白..

分别了半年，再次听到这个即熟悉又陌生的声音，确实让我不知所措
原以为，任何关系到最后只会是相识一场罢了，那有什么那么多意难平朱砂痣。那些你放不下的人和事，到最后时间会抚平一切
即使是当初分别时的恶语相向也好，没来的急跟对方说一句告别也罢，这都将会结束
只要结束了就是永远，定格在那一刻的结局就叫永远，那一刻将不会被改变，直到永远

唔 最后的最后 电话里的大概内容就是询问当初房子的租赁合同的事情
估计是半年租期到了，她也该搬离那个一直折磨着她的地方了吧；而且我下次再去那块地方找T聚会时，也不至于担心会和欭碰到什么的
（很久之前偷偷和好友开车闲逛的时候，经过大浪，便也顺便去过几次，但是几乎都是谎称去找T见个面唠会嗑，T倒很清楚我的小心思，见个面不到五分钟就把我打发走了，知道我只是想去原来的楼下转转，是啊，仅仅只是转转，远远高瞻一眼那个熟悉的窗台而已..）

最后的最后：
愿各余生安好，各有未来，还有 生日快乐

]]> 生活随笔 封の唠叨 https://meuicat.com/posts/3c7e3781.html#disqus_thread Butterfly的魔改教程：聊天记录页 https://meuicat.com/posts/bf57cf47.html https://meuicat.com/posts/bf57cf47.html Sat, 24 Jun 2023 07:15:50 GMT 硬盘存储不了记录，聊天记录页，一个突发奇想的产物，可二改，自定性强

📚 更多文档目录

🚀 搭建教程 | 1 - 📑 前置教程 | 2 - 🎈 主题调整 | 3 - ✨ 魔改教程 | 4 - 🐈 重构自用数据记录

本篇教程基于 Hexo 6.3.0 & Butterfly 4.8.5 为博主的魔改教程记录，以防自己日后因魔改迷失所记录 📝

本小节魔改内容不包括 顶部banner栏，如有需要请移步至 ✨ 第二章 - 三小节 | 魔改页前置

本小节最后更新于 2023 年 06 月 24 日

效果预览

记录集
我の文字瞬间

创建数据

  • 创建 [blogRoot]/source/records/index.md 页面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
---
title: 文字瞬间
date: 2023-04-07 21:07:54
type: records
top_img: false
aside: false
top_page: true
top_bg: https://s11.ax1x.com/2023/04/08/ppHKgpR.jpg
top_item: WeChet
top_title: 每刻の感动瞬间
top_tips: 记录 文字的力量
comments: false
---

<!-- 页面内容 -->
  • 修改 [blogRoot]/themes/butterfly/layout/page.pug 来使页面匹配
    （ + 号直接删除 即是正常缩进）
1
2
3
4
5
6
      when 'categories'
        include includes/page/categories.pug
+      when 'records'
+        include includes/page/records.pug
      default
        include includes/page/default-page.pug
  • 创建 [blogRoot]/themes/butterfly/layout/includes/page/records.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
- var result = ''
each i in site.data.records
  each j in i.records_list
    - var listResult = ''
    - var listContents = ''
    -
      listResult += `
        <div id="icat-records">
            <details>
                <summary>${j.title}</summary>
                <div class="icat-records-tab-content">
                    <div class="icat-records-container">
                        <div class="icat-records-chat-time">
                            <span>${j.time}</span>
                        </div>`
    - var j_avatar = j.avatar || url_for(theme.avatar.img)
    each l in j.contents_list
      -
        if (l.avatar && l.avatar.trim())
          listContents += `<div class="icat-records-the-other-side"><img src="${l.avatar}"><div class="icat-records-left-arrowhead"></div><div class="icat-records-the-other-side-content"><p>${l.content}</p></div></div>`
        else
          listContents += `<div class="icat-records-self"><div class="icat-records-self-content"><p>${l.content}</p></div><div class="icat-records-right-arrowhead"></div><img src="${j_avatar}"></div>`
      -
    -
    - listResult += listContents + `</div></div></details></div>`
    - result += listResult
!= result
  • 新建 [blogRoot]/source/css/records.css 样式文件，并新增以下内容
    （也可以在自建的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
#icat-records {
  padding-top: 12px;
}
.icat-records-self,
.icat-records-the-other-side {
  padding: 12px 2rem;
  display: flex;
  clear: both;
}
.icat-records-self {
  float: right;
}
.icat-records-self img,
.icat-records-the-other-side img {
  width: 50px;
  height: 50px;
  border-radius: 6px;
}
/* 头像 */

.icat-records-self-content {
  background: var(--icat-self-content-background-color);
  border-radius: 6px;
  margin-right: -4px;
  padding: 0px 16px;
  margin-left: 66px;
}
.icat-records-the-other-side-content {
  background: var(--icat-the-other-side-content-background-color);
  border-radius: 6px;
  margin-left: 1em;
  padding: 0px 16px;
  margin-right: 66px;
}
.icat-records-self-content p {
  color: #000;
}
.icat-records-the-other-side-content p {
  color: var(--icat-the-other-side-content-text-color);
}
/* 文字内容 */

.icat-records-left-arrowhead {
  position: absolute;
  transform: rotate(90deg);
  margin-left: 48px;
  border-color: transparent;
  border-style: solid;
  border-width: 10px;
  border-top: 8px solid var(--icat-the-other-side-content-background-color);
}
.icat-records-right-arrowhead {
  transform: rotate(-90deg);
  margin-right: -2px;
  border-color: transparent;
  border-style: solid;
  border-width: 10px;
  border-top: 8px solid var(--icat-self-content-background-color);
}
.icat-records-left-arrowhead,
.icat-records-right-arrowhead {
  width: 0;
  height: 0;
  margin-top: 16px;
}
/* 左右箭头 */

.icat-records-chat-time {
  display: flex;
  padding-top: 10px;
}
.icat-records-chat-time span {
  color: var(--icat-chat-time-text-color);
  margin: 0 auto;
  padding: 0 6px;
  background-color: var(--icat-chat-time-background-color);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
}
/* 时间戳 */

summary {
  font-size: 1rem;
  font-weight: 600;
  background-color: #f3f3f3;
  color: #000;
  padding: 1rem;
  margin-bottom: 4px;
  outline: none;
  border-radius: 0.25rem;
  cursor: pointer;
  position: relative;
}
details {
  clear: both;
}
details[open] summary~* {
  animation: sweep .5s ease-in-out;
}
@keyframes sweep {
  0% {
      opacity: 0;
      margin-top: -10px
  }
  100% {
      opacity: 1;
      margin-top: 0px
  }
}
details>summary::after {
  position: absolute;
  content: "+";
  right: 20px;
}

details[open]>summary::after {
  position: absolute;
  content: "-";
  right: 20px;
}
details>summary::-webkit-details-marker {
  display: none;
}
/* 折叠栏 */

@media screen and (max-width: 768px) {
  .icat-records-self, .icat-records-the-other-side {
      padding: 12px 4px;
  }
  .icat-records-self img, .icat-records-the-other-side img {
      width: 45px;
      height: 45px;
  }
  .icat-records-self-content p, .icat-records-the-other-side-content p {
      font-size: 12px;
  }
  .icat-records-left-arrowhead {
      margin-left: 43px;
  }
  .icat-records-self-content {
      margin-left: 60px;
  }
  .icat-records-the-other-side-content {
      margin-right: 60px;
  }
}
/* 响应式 */

[data-theme="light"] {
  --icat-self-content-background-color: #95EC69;
  --icat-the-other-side-content-background-color: rgba(237,237,237,0.2);
  --icat-the-other-side-content-text-color: #000;
  --icat-chat-time-background-color: rgba(44,44,44,0.02);
  --icat-chat-time-text-color: #000;
}
[data-theme="dark"] {
  --icat-self-content-background-color: #28B561;
  --icat-the-other-side-content-background-color: #2C2C2C;
  --icat-the-other-side-content-text-color: #FFF;
  --icat-chat-time-background-color: rgba(255,255,255,0.12);
  --icat-chat-time-text-color: #FFF;
}
/* 颜色变量 */

/* 文字瞬间 - 聊天记录页 */
  • 在 _config.butterfly.yml 主题配置文件中 inject 下的 head 引入 records.css
1
2
3
4
5
6
7
8
9
  ···

inject:
  head:
    - <link rel="stylesheet" href="/css/records.css"> # 聊天记录页样式
  bottom:
    - ···

  ···
  • 创建 [blogRoot]/source/_data/records.yml 文件，并新增以下内容
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
- class_name: 文字瞬间
  records_list:
    - title: KKKi_安琪姐
      time: 2023-4-9 16:40
      avatar: https://s11.ax1x.com/2023/04/08/ppHp6W4.jpg
      contents_list:
        - content: 她现在这阵仗估计就安居上海了
        - content: 毕竟让你找房子
          avatar: https://s11.ax1x.com/2023/04/09/ppbFj4P.jpg
        - content: 但我还是喜欢深圳
        - content: 喵的

    - title: 魔女娜儿
      time: 2023-4-7 09:53
      avatar: https://s11.ax1x.com/2023/04/08/ppHp6W4.jpg
      contents_list:
        - content: 小封，答应我一件事好不好嘛
          avatar: https://s11.ax1x.com/2023/04/08/ppHEpbd.jpg
        - content: 咋啦
        - content: 啥事先说
        - content: 给你买了个手刮剃须刀，记得每天洗漱的时候都要刮胡子！
          avatar: https://s11.ax1x.com/2023/04/08/ppHEpbd.jpg
        - content: 我 三天 刮一次
        - content: 长的又不快..
        - content: 不要，不然我就每天给你刮
          avatar: https://s11.ax1x.com/2023/04/08/ppHEpbd.jpg
        - content: 没有胡子的你才超帅的！！！
          avatar: https://s11.ax1x.com/2023/04/08/ppHEpbd.jpg
数据参数释义
参数类型/释义
class_name【可选】标识符，无实际意义，选填
records_list【必选】记录页数据列表
records_list.title【必选】标题内容
records_list.time【必选】显示的时间 格式必须为 2023-4-9 16:40 样式
records_list.avatar【可选】右边（本人）头像
records_list.contents_list聊天数据
records_list.contents_list.content【必填】文字内容，如有特殊符号请用””包括
records_list.contents_list.avatar【选填】对方的头像
]]> 经验分享 Butterfly主题 魔改记录 https://meuicat.com/posts/bf57cf47.html#disqus_thread Butterfly的魔改教程：个性定位信息 https://meuicat.com/posts/af19e490.html https://meuicat.com/posts/af19e490.html Fri, 23 Jun 2023 22:29:07 GMT 来给你的侧边栏添加个性定位信息吧

📚 更多文档目录

🚀 搭建教程 | 1 - 📑 前置教程 | 2 - 🎈 主题调整 | 3 - ✨ 魔改教程 | 4 - 🐈 重构自用数据记录

本篇教程基于 Hexo 6.3.0 & Butterfly 4.8.5 为博主的魔改教程记录，以防自己日后因魔改迷失所记录 📝

本小节最后更新于 2023 年 11 月 07 日

231107 更新：移除JQ依赖库，轻微减少key的消耗，解决Pjax、ajax请求等问题；升级优化请求方案！

231006 更新：修复异步导致无法正常ajax请求的问题；无法正常获取定位的问题

230707 更新：删除新版内的旧版遗留CSS部分样式

240828 更新：腾讯位置白名单说明更新

2.0优化版 231107

本着性能缘由，以及某些封面，JQ却是存在某些问题，当然JQ还是较为能打的
但也不是说不可代替的，优化了下个性定位欢迎这个功能，为了更好的性能，还是决定剔除掉JQ

重要消息！重要消息！重要消息！
作为开发者之一，Solitude主题也已完美集成本功能，只需一步配置好key即可使用！感兴趣的喵友可以去看看喔~

Hexo-Theme-Solitude
一个优雅的Heo风格的Hexo主题，接近Heo，完整度高。

数据支持

  • 进入 腾讯位置服务 应用管理界面

  • 点击 创建应用 ，应用名称和类型随便填

  • 在新创建的应用中点击添加 key ，产品选择 WebServiceAPI ，域名白名单填自己的域名或不填

  • 把得到的 key 记下; 如果开启白名单记得把localhost也加上

注意：
如创建了多个应用，需在配额管理 - Key额度里的 坐标转换 行政区划列表 行政区划子级查询 逆地址解析 IP定位 地点搜索 关键词输入提示 静态地图 进行分配额度

创建数据

  • 创建 [blogRoot]/source/js/txmap.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
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
function welcometxmap() {
    //请求数据
    ipLoacation = window.saveToLocal.get('ipLocation');
    if (ipLoacation) {
        // 使用 ipLocation
    } else {
        // 数据已过期或不存在
        var script = document.createElement('script');
        var url = `https://apis.map.qq.com/ws/location/v1/ip?key=${txkey}&output=jsonp`;
        script.src = url;
        window.QQmap = function (data) {
            ipLoacation = data;
            // 将数据保存到 localStorage，过期时间设置为 1 天
            window.saveToLocal.set('ipLocation', ipLoacation, 1);
            document.body.removeChild(script);
            delete window.QQmap;
        };
        document.body.appendChild(script);
    }
    showWelcome();
}
function getDistance(e1, n1, e2, n2) {
    const R = 6371
    const { sin, cos, asin, PI, hypot } = Math
    let getPoint = (e, n) => {
        e *= PI / 180
        n *= PI / 180
        return { x: cos(n) * cos(e), y: cos(n) * sin(e), z: sin(n) }
    }

    let a = getPoint(e1, n1)
    let b = getPoint(e2, n2)
    let c = hypot(a.x - b.x, a.y - b.y, a.z - b.z)
    let r = asin(c / 2) * 2 * R
    return Math.round(r);
}

function showWelcome() {

    let dist = getDistance(longitude, Latitude, ipLoacation.result.location.lng, ipLoacation.result.location.lat);
    let pos = ipLoacation.result.ad_info.nation;
    let ip;
    let posdesc;
    //根据国家、省份、城市信息自定义欢迎语
    switch (ipLoacation.result.ad_info.nation) {
        case "日本":
            posdesc = "よろしく，一起去看樱花吗";
            break;
        case "美国":
            posdesc = "Let us live in peace!";
            break;
        case "英国":
            posdesc = "想同你一起夜乘伦敦眼";
            break;
        case "俄罗斯":
            posdesc = "干了这瓶伏特加！";
            break;
        case "法国":
            posdesc = "C'est La Vie";
            break;
        case "德国":
            posdesc = "Die Zeit verging im Fluge.";
            break;
        case "澳大利亚":
            posdesc = "一起去大堡礁吧！";
            break;
        case "加拿大":
            posdesc = "拾起一片枫叶赠予你";
            break;
        case "中国":
            pos = ipLoacation.result.ad_info.province + " " + ipLoacation.result.ad_info.city + " " + ipLoacation.result.ad_info.district;
            ip = ipLoacation.result.ip;
            switch (ipLoacation.result.ad_info.province) {
                case "北京市":
                    posdesc = "北——京——欢迎你~~~";
                    break;
                case "天津市":
                    posdesc = "讲段相声吧";
                    break;
                case "河北省":
                    posdesc = "山势巍巍成壁垒，天下雄关铁马金戈由此向，无限江山";
                    break;
                case "山西省":
                    posdesc = "展开坐具长三尺，已占山河五百余";
                    break;
                case "内蒙古自治区":
                    posdesc = "天苍苍，野茫茫，风吹草低见牛羊";
                    break;
                case "辽宁省":
                    posdesc = "我想吃烤鸡架！";
                    break;
                case "吉林省":
                    posdesc = "状元阁就是东北烧烤之王";
                    break;
                case "黑龙江省":
                    posdesc = "很喜欢哈尔滨大剧院";
                    break;
                case "上海市":
                    posdesc = "众所周知，中国只有两个城市";
                    break;
                case "江苏省":
                    switch (ipLoacation.result.ad_info.city) {
                        case "南京市":
                            posdesc = "这是我挺想去的城市啦";
                            break;
                        case "苏州市":
                            posdesc = "上有天堂，下有苏杭";
                            break;
                        default:
                            posdesc = "散装是必须要散装的";
                            break;
                    }
                    break;
                case "浙江省":
                    posdesc = "东风渐绿西湖柳，雁已还人未南归";
                    break;
                case "河南省":
                    switch (ipLoacation.result.ad_info.city) {
                        case "郑州市":
                            posdesc = "豫州之域，天地之中";
                            break;
                        case "南阳市":
                            posdesc = "臣本布衣，躬耕于南阳此南阳非彼南阳！";
                            break;
                        case "驻马店市":
                            posdesc = "峰峰有奇石，石石挟仙气嵖岈山的花很美哦！";
                            break;
                        case "开封市":
                            posdesc = "刚正不阿包青天";
                            break;
                        case "洛阳市":
                            posdesc = "洛阳牡丹甲天下";
                            break;
                        default:
                            posdesc = "可否带我品尝河南烩面啦？";
                            break;
                    }
                    break;
                case "安徽省":
                    posdesc = "蚌埠住了，芜湖起飞";
                    break;
                case "福建省":
                    posdesc = "井邑白云间，岩城远带山";
                    break;
                case "江西省":
                    posdesc = "落霞与孤鹜齐飞，秋水共长天一色";
                    break;
                case "山东省":
                    posdesc = "遥望齐州九点烟，一泓海水杯中泻";
                    break;
                case "湖北省":
                    switch (ipLoacation.result.ad_info.city) {
                        case "黄冈市":
                            posdesc = "红安将军县！辈出将才！";
                            break;
                        default:
                            posdesc = "来碗热干面~";
                            break;
                    }
                    break;
                case "湖南省":
                    posdesc = "74751，长沙斯塔克";
                    break;
                case "广东省":
                    switch (ipLoacation.result.ad_info.city) {
                        case "广州市":
                            posdesc = "看小蛮腰，喝早茶了嘛~";
                            break;
                        case "深圳市":
                            switch (ipLoacation.result.ad_info.district) {
                                case "坪山区":
                                    posdesc = "好巧！博主也在坪山区生活喔~";
                                    break;
                                default:
                                    posdesc = "今天你996了嘛~";
                                    break;
                            }
                            break;
                        case "阳江市":
                            posdesc = "阳春合水！博主家乡~ 欢迎来玩~";
                            break;
                        default:
                            posdesc = "来两斤福建人~";
                            break;
                    }
                    break;
                case "广西壮族自治区":
                    posdesc = "桂林山水甲天下";
                    break;
                case "海南省":
                    posdesc = "朝观日出逐白浪，夕看云起收霞光";
                    break;
                case "四川省":
                    posdesc = "康康川妹子";
                    break;
                case "贵州省":
                    posdesc = "茅台，学生，再塞200";
                    break;
                case "云南省":
                    posdesc = "玉龙飞舞云缠绕，万仞冰川直耸天";
                    break;
                case "西藏自治区":
                    posdesc = "躺在茫茫草原上，仰望蓝天";
                    break;
                case "陕西省":
                    posdesc = "来份臊子面加馍";
                    break;
                case "甘肃省":
                    posdesc = "羌笛何须怨杨柳，春风不度玉门关";
                    break;
                case "青海省":
                    posdesc = "牛肉干和老酸奶都好好吃";
                    break;
                case "宁夏回族自治区":
                    posdesc = "大漠孤烟直，长河落日圆";
                    break;
                case "新疆维吾尔自治区":
                    posdesc = "驼铃古道丝绸路，胡马犹闻唐汉风";
                    break;
                case "台湾省":
                    posdesc = "我在这头，大陆在那头";
                    break;
                case "香港特别行政区":
                    posdesc = "永定贼有残留地鬼嚎，迎击光非岁玉";
                    break;
                case "澳门特别行政区":
                    posdesc = "性感荷官，在线发牌";
                    break;
                default:
                    posdesc = "带我去你的城市逛逛吧！";
                    break;
            }
            break;
        default:
            posdesc = "带我去你的国家逛逛吧";
            break;
    }

    //根据本地时间切换欢迎语
    let timeChange;
    let date = new Date();
    if (date.getHours() >= 5 && date.getHours() < 11) timeChange = "<span class='welcome-time'>🌤️ 早上好，一日之计在于晨</span>";
    else if (date.getHours() >= 11 && date.getHours() < 13) timeChange = "<span class='welcome-time'>☀️ 中午好，记得午休喔~</span>";
    else if (date.getHours() >= 13 && date.getHours() < 17) timeChange = "<span class='welcome-time'>🕞 下午好，饮茶先啦！</span>";
    else if (date.getHours() >= 17 && date.getHours() < 19) timeChange = "<span class='welcome-time'>🚶‍♂️ 即将下班，记得按时吃饭~</span>";
    else if (date.getHours() >= 19 && date.getHours() < 24) timeChange = "<span class='welcome-time'>🌙 晚上好，夜生活嗨起来！</span>";
    else timeChange = "<span class='welcome-time'>夜深了，早点休息，少熬夜</span>";

    try {
        //自定义文本和需要放的位置
        document.getElementById("welcome-info").innerHTML =
            `<span>热烈欢迎来自~</span><br><span><span style="color: var(--icat-card-welcome);font-weight: bold;">${pos}</span> 的喵友</span><br><span class="welcome-message">${posdesc}</span><br>您当前位置距博主约 <b><span style="color: var(--icat-card-welcome);font-weight: bold;">${dist}</span></b> 公里！<br><span>您的IP地址为：${ip}</span><br>${timeChange}`;
    } catch (err) {
        // console.log("Pjax无法获取#welcome-info元素🙄🙄🙄")
    }
}
  • 在 _config.butterfly.yml 主题配置文件中 inject 下的 bottom 引入 txmap.js
1
2
3
4
5
6
7
8
9
  ···

inject:
  head:
    - ···
  bottom:
    - <script src="/js/txmap.js"></script> # 个性定位欢迎语 - 请求逻辑

  ···
  • 在自建的CSS文件 [blogRoot]/source/css/icat.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
#welcome-info {
  overflow: hidden;
  --icat-card-welcome: #49b1f5;
}
#welcome-info .welcome-time {
  width: 100%;
  margin: 12px 0 0;
  display: inline-flex;
}
#welcome-info .welcome-message {
  width: 100%;
  margin-bottom: 8px;
  display: inline-flex;
}
#welcome-info .welcome-region {
  background: var(--icat-background);
  border: var(--style-border);
  color: var(--icat-fontcolor);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  margin: 6px 0;
}

/* 欢迎信息栏样式 */

使用方式

  • 修改 [blogRoot]/source/_data/widget.yml 文件，新增 name icon html 项的内容

我这使用的是自定义侧边栏功能，相关问题请看 Butterfly - 自定义侧边栏

1
2
3
4
5
6
7
8
top:
  - class_name:
    id_name:
    name: 来访者
    icon: iconfont icat-visitor
    html: <div id="welcome-info"></div><script data-pjax>var longitude="经度";var Latitude="纬度";var txkey="腾讯定位Key";var ipLoacation;window.onload = () => {welcometxmap()};document.addEventListener("pjax:complete", welcometxmap())</script>

  ···
  • 将上方的 经度、纬度 以及 腾讯定位Key 替换成你自己的
  • 修改 [blogRoot]/theme/butterfly/latout/includes/widget/card_announcement.pug 页面内容
    （ + 号直接删除 即是正常缩进）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
if theme.aside.card_announcement.enable
  .card-widget.card-announcement
+    #welcome-info
+    script(data-pjax).
+      var longitude = '#{config.welcome.longitude}';
+      var Latitude = '#{config.welcome.Latitude}';
+      var txkey = '#{config.welcome.key}'
+      var ipLoacation;
+      window.onload = () => {
+        welcometxmap()
+      };
+      document.addEventListener("pjax:complete", welcometxmap())
    .item-headline
      i.fas.fa-bullhorn.fa-shake
      span= _p('aside.card_announcement')
    .announcement_content!= theme.aside.card_announcement.content
  • 在你的Hexo配置文件 _config.yml 中新增以下内容，并填写 key 以及你对应的经纬度
1
2
3
4
welcome:
  key: # 腾讯key
  longitude: # 经度
  Latitude: # 纬度

腾讯位置授权

如遇到无法显示位置内容，优先检查腾讯位置服务内的 应用管理 - 我的应用 - 编辑 - 域名白名单 下的输入框填入你的域名，如：meuicat.com，若无法显示，请检查是否填写正确。（不需要带协议头）

上一步操作还是无法显示，则需要前往腾讯位置服务内的 配额管理 - 账户额度 里面，将 坐标转换、行政区划列表、行政区划子级查询、逆地址解析、IP定位、地点搜索、关键词输入提示、静态地图 的配额分配，操作到你的应用上即可。

1.0旧版 231006

JQ依赖版本【自定义侧边栏】

数据支持

  • 进入 腾讯位置服务 应用管理界面

  • 点击 创建应用 ，应用名称和类型随便填

  • 在新创建的应用中点击添加 key ，产品选择 WebServiceAPI ，域名白名单填自己的域名或不填

  • 把得到的 key 记下; 如果开启白名单记得把localhost也加上

注意：
如创建了多个应用，需在配额管理 - Key额度里的 坐标转换 行政区划列表 行政区划子级查询 逆地址解析 IP定位 地点搜索 关键词输入提示 静态地图 进行分配额度

  • 在 _config.butterfly.yml 主题配置文件中 inject 下的 bottom 引入 jquery.min.js
1
2
3
4
5
6
7
8
9
  ···

inject:
  head:
    - ···
  bottom:
    - <script type="text/javascript" src="https://unpkg.zhimg.com/jquery@latest/dist/jquery.min.js"></script> # 腾讯地图定位 - 定制化JS

  ···

创建数据

  • 创建 [blogRoot]/source/js/txmap.js 文件，并新增以下内容
    注意： 在第 6行 和第 32行 需分别填入自己对应的Key和经纬度
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
//get请求
$.ajax({
    type: 'get',
    url: 'https://apis.map.qq.com/ws/location/v1/ip',
    data: {
        key: '你获取的key',
        output: 'jsonp',
    },
    dataType: 'jsonp',
    success: function (res) {
        ipLoacation = res;
    }
})
function getDistance(e1, n1, e2, n2) {
    const R = 6371
    const { sin, cos, asin, PI, hypot } = Math
    let getPoint = (e, n) => {
        e *= PI / 180
        n *= PI / 180
        return { x: cos(n) * cos(e), y: cos(n) * sin(e), z: sin(n) }
    }

    let a = getPoint(e1, n1)
    let b = getPoint(e2, n2)
    let c = hypot(a.x - b.x, a.y - b.y, a.z - b.z)
    let r = asin(c / 2) * 2 * R
    return Math.round(r);
}

function showWelcome() {

    let dist = getDistance(经度, 纬度, ipLoacation.result.location.lng, ipLoacation.result.location.lat); //这里换成自己的经纬度
    let pos = ipLoacation.result.ad_info.nation;
    let ip;
    let posdesc;
    //根据国家、省份、城市信息自定义欢迎语
    switch (ipLoacation.result.ad_info.nation) {
        case "日本":
            posdesc = "よろしく，一起去看樱花吗";
            break;
        case "美国":
            posdesc = "Let us live in peace!";
            break;
        case "英国":
            posdesc = "想同你一起夜乘伦敦眼";
            break;
        case "俄罗斯":
            posdesc = "干了这瓶伏特加！";
            break;
        case "法国":
            posdesc = "C'est La Vie";
            break;
        case "德国":
            posdesc = "Die Zeit verging im Fluge.";
            break;
        case "澳大利亚":
            posdesc = "一起去大堡礁吧！";
            break;
        case "加拿大":
            posdesc = "拾起一片枫叶赠予你";
            break;
        case "中国":
            pos = ipLoacation.result.ad_info.province + " " + ipLoacation.result.ad_info.city + " " + ipLoacation.result.ad_info.district;
            ip = ipLoacation.result.ip;
            switch (ipLoacation.result.ad_info.province) {
                case "北京市":
                    posdesc = "北——京——欢迎你~~~";
                    break;
                case "天津市":
                    posdesc = "讲段相声吧";
                    break;
                case "河北省":
                    posdesc = "山势巍巍成壁垒，天下雄关铁马金戈由此向，无限江山";
                    break;
                case "山西省":
                    posdesc = "展开坐具长三尺，已占山河五百余";
                    break;
                case "内蒙古自治区":
                    posdesc = "天苍苍，野茫茫，风吹草低见牛羊";
                    break;
                case "辽宁省":
                    posdesc = "我想吃烤鸡架！";
                    break;
                case "吉林省":
                    posdesc = "状元阁就是东北烧烤之王";
                    break;
                case "黑龙江省":
                    posdesc = "很喜欢哈尔滨大剧院";
                    break;
                case "上海市":
                    posdesc = "众所周知，中国只有两个城市";
                    break;
                case "江苏省":
                    switch (ipLoacation.result.ad_info.city) {
                        case "南京市":
                            posdesc = "这是我挺想去的城市啦";
                            break;
                        case "苏州市":
                            posdesc = "上有天堂，下有苏杭";
                            break;
                        default:
                            posdesc = "散装是必须要散装的";
                            break;
                    }
                    break;
                case "浙江省":
                    posdesc = "东风渐绿西湖柳，雁已还人未南归";
                    break;
                case "河南省":
                    switch (ipLoacation.result.ad_info.city) {
                        case "郑州市":
                            posdesc = "豫州之域，天地之中";
                            break;
                        case "南阳市":
                            posdesc = "臣本布衣，躬耕于南阳此南阳非彼南阳！";
                            break;
                        case "驻马店市":
                            posdesc = "峰峰有奇石，石石挟仙气嵖岈山的花很美哦！";
                            break;
                        case "开封市":
                            posdesc = "刚正不阿包青天";
                            break;
                        case "洛阳市":
                            posdesc = "洛阳牡丹甲天下";
                            break;
                        default:
                            posdesc = "可否带我品尝河南烩面啦？";
                            break;
                    }
                    break;
                case "安徽省":
                    posdesc = "蚌埠住了，芜湖起飞";
                    break;
                case "福建省":
                    posdesc = "井邑白云间，岩城远带山";
                    break;
                case "江西省":
                    posdesc = "落霞与孤鹜齐飞，秋水共长天一色";
                    break;
                case "山东省":
                    posdesc = "遥望齐州九点烟，一泓海水杯中泻";
                    break;
                case "湖北省":
                    switch (ipLoacation.result.ad_info.city) {
                        case "黄冈市":
                            posdesc = "红安将军县！辈出将才！";
                            break;
                        default:
                            posdesc = "来碗热干面~";
                            break;
                    }
                    break;
                case "湖南省":
                    posdesc = "74751，长沙斯塔克";
                    break;
                case "广东省":
                    switch (ipLoacation.result.ad_info.city) {
                        case "广州市":
                            posdesc = "看小蛮腰，喝早茶了嘛~";
                            break;
                        case "深圳市":
                            switch (ipLoacation.result.ad_info.district) {
                                case "坪山区":
                                    posdesc = "好巧！博主也在坪山区生活喔~";
                                    break;
                                default:
                                    posdesc = "今天你996了嘛~";
                                    break;
                            }
                            break;
                        case "阳江市":
                            posdesc = "阳春合水！博主家乡~ 欢迎来玩~";
                            break;
                        default:
                            posdesc = "来两斤福建人~";
                            break;
                    }
                    break;
                case "广西壮族自治区":
                    posdesc = "桂林山水甲天下";
                    break;
                case "海南省":
                    posdesc = "朝观日出逐白浪，夕看云起收霞光";
                    break;
                case "四川省":
                    posdesc = "康康川妹子";
                    break;
                case "贵州省":
                    posdesc = "茅台，学生，再塞200";
                    break;
                case "云南省":
                    posdesc = "玉龙飞舞云缠绕，万仞冰川直耸天";
                    break;
                case "西藏自治区":
                    posdesc = "躺在茫茫草原上，仰望蓝天";
                    break;
                case "陕西省":
                    posdesc = "来份臊子面加馍";
                    break;
                case "甘肃省":
                    posdesc = "羌笛何须怨杨柳，春风不度玉门关";
                    break;
                case "青海省":
                    posdesc = "牛肉干和老酸奶都好好吃";
                    break;
                case "宁夏回族自治区":
                    posdesc = "大漠孤烟直，长河落日圆";
                    break;
                case "新疆维吾尔自治区":
                    posdesc = "驼铃古道丝绸路，胡马犹闻唐汉风";
                    break;
                case "台湾省":
                    posdesc = "我在这头，大陆在那头";
                    break;
                case "香港特别行政区":
                    posdesc = "永定贼有残留地鬼嚎，迎击光非岁玉";
                    break;
                case "澳门特别行政区":
                    posdesc = "性感荷官，在线发牌";
                    break;
                default:
                    posdesc = "带我去你的城市逛逛吧！";
                    break;
            }
            break;
        default:
            posdesc = "带我去你的国家逛逛吧";
            break;
    }

    //根据本地时间切换欢迎语
    let timeChange;
    let date = new Date();
    if (date.getHours() >= 5 && date.getHours() < 11) timeChange = "<span class='welcome-time'>🌤️ 早上好，一日之计在于晨</span>";
    else if (date.getHours() >= 11 && date.getHours() < 13) timeChange = "<span class='welcome-time'>☀️ 中午好，记得午休喔~</span>";
    else if (date.getHours() >= 13 && date.getHours() < 17) timeChange = "<span class='welcome-time'>🕞 下午好，饮茶先啦！</span>";
    else if (date.getHours() >= 17 && date.getHours() < 19) timeChange = "<span class='welcome-time'>🚶‍♂️ 即将下班，记得按时吃饭~</span>";
    else if (date.getHours() >= 19 && date.getHours() < 24) timeChange = "<span class='welcome-time'>🌙 晚上好，夜生活嗨起来！</span>";
    else timeChange = "<span class='welcome-time'>夜深了，早点休息，少熬夜</span>";

    try {
        //自定义文本和需要放的位置
        document.getElementById("welcome-info").innerHTML =
            `<span>热烈欢迎来自~</span><br><span><span style="color: var(--icat-card-welcome);font-weight: bold;">${pos}</span> 的喵友</span><br><span class="welcome-message">${posdesc}</span><br>您当前位置距博主约 <b><span style="color: var(--icat-card-welcome);font-weight: bold;">${dist}</span></b> 公里！<br><span>您的IP地址为：${ip}</span><br>${timeChange}`;
    } catch (err) {
        // console.log("Pjax无法获取#welcome-info元素🙄🙄🙄")
    }
}
window.onload = showWelcome;
// 如果使用了pjax在加上下面这行代码
document.addEventListener('pjax:complete', showWelcome);
  • 在 _config.butterfly.yml 主题配置文件中 inject 下的 bottom 引入 txmap.js
1
2
3
4
5
6
7
8
9
  ···

inject:
  head:
    - ···
  bottom:
    - <script defer data-pjax src="/js/txmap.js"></script> # 腾讯地图定位 - API

  ···
  • 修改 [blogRoot]/source/_data/widget.yml 文件，新增 name icon html 项的内容

我这使用的是自定义侧边栏功能，相关问题请看 Butterfly - 自定义侧边栏

1
2
3
4
5
6
7
8
top:
  - class_name:
    id_name:
    name: 来访者
    icon: iconfont icat-visitor
    html: <div id="welcome-info"></div>

  ···
  • 在自建的CSS文件 [blogRoot]/source/css/icat.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
#welcome-info {
  overflow: hidden;
  --icat-card-welcome: #49b1f5;
}
#welcome-info .welcome-time {
  width: 100%;
  margin: 12px 0 0;
  display: inline-flex;
}
#welcome-info .welcome-message {
  width: 100%;
  margin-bottom: 8px;
  display: inline-flex;
}
#welcome-info .welcome-region {
  background: var(--icat-background);
  border: var(--style-border);
  color: var(--icat-fontcolor);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  margin: 6px 0;
}

/* 欢迎信息栏样式 */
]]> 经验分享 Butterfly主题 魔改记录 https://meuicat.com/posts/af19e490.html#disqus_thread 近况记事 - 5 https://meuicat.com/posts/415f2b39.html https://meuicat.com/posts/415f2b39.html Fri, 16 Jun 2023 17:54:24 GMT 周更变月更；记事碎碎念~ 上一篇的碎碎念是在上个月的16号，到今天恰好一个月
这一个月里，其实发生的事情挺多的，就挑几件重要的事情来唠吧（说实话，一下子就想不起来要说些啥了..）

前些时间去了阿里的杭州总部蹭了顿饭（实则就是回老东家的会议室打瞌睡），回看三年前的122亿减至1亿，时间过得真快啊，再过半年就又可以收到第三封阿里家书了
而杭州这个地方，由于几家头部互联网企业，聚焦了大批奋斗的年轻人，使得更朝气蓬勃了
处理完公事倒是在这逗留了两天，毕竟来都来了，抱着不玩白不白的心态，体验了一把在杭州奋斗的感觉！

时光飞逝，转眼已经过了半年
看着仍未偿还的欠款和失业状态，总是感到焦虑和担忧。高消费，低收入，还要还款，这种憋屈的日子一过就是大半年，付出与收获完全不成正比
感情上的差距无力感，更使得我身心疲惫。鱼和熊掌不可兼得，工作和爱情视乎真的只能选其一，天秤始终会倾斜
如果说在生活里，我们双方都算得上是个称职的伴侣，但在感情方面却说她一个人在付出；顾及不到她的感受，不知她的喜怒哀乐，分身乏术的相处等等都在说明我并没有认真对待这段感情
两个人想法和追求不一致，反复感情内耗，甚至我每天都在想要不要去说，怎么去说，毕竟长痛不如短痛

噢！对了，再介绍一个成员：摩卡，美短妹妹（跟我姓的）
不得不说，小摩卡超粘人，经常会跳到我的怀里踩奶，我养过那么多只猫，小摩卡是最粘我的，简直是爱撒娇的小公主
可怜这孩子了，到家没一个月，就得被迫跟着前妈生活，我也好久没见小摩卡了，怪想这小家伙的..

而另一边，我从小到大生活的地方，深圳光明，要挥手说再见啦。公明新围再到公明将石，每一处都透露着岁月的变迁，见证了光明的发展和变化
从破瓦平房到高楼大厦，黄凝泥路到地铁高速，商业楼、安居楼拔地而起
在这打响光明首要发展的同时，老爹的公司也在被各种审查盯上，二月炉房不过关，办证重盖（隔壁新建社康中心），但到了四月却被勒令立刻搬离，并只给不到一个月的时间来缓冲
是的没错，坪山，仿佛又回到了十几年前的深圳，我从没想过，深圳这个经济特区居然还有如此贫瘠落后的地方

完全搬离的前一个星期，虽然以后还会再见，但还是想着再去重新看一看那些熟悉的地方，那可是我的年少青春啊
博华九三班的每一张桌子上依旧堆满了书；公明广场的十二点还是有很多板仔；红花山的粉黛却不见了踪影；大仟里B2的何记花甲依旧能打，我愿高呼YYDS；友谊书城来看书的人好像少了许多；上村的那家螺蛳粉也已换了一个老板，味道也不似从前了（列为此生最大的遗憾）；西柚里的猫犬将军也在合水口开了分店，也不知道卡布奇诺两个小家伙过得怎么样了，那就喵生幸福吧；还有云景海伦司，我那征战过的地方，以及那半打存酒，等我下次有机会再战

这一个月里，生活一直在快速地变化着，也有许多值得我铭记的时刻，有时候我甚至觉得自己无法把握住这一切，时而坚定时而彷徨
也不知道从什么时候开始，我慢慢的习惯了”间断式相处”，就比如和一朋友突然性的聊天、玩乐一段时间，接着突然消失不联系了，我也不会觉得少了些什么，就好像自己已经习以为常了

写在文末随笔：

当你发现，认真去做某件事，扪心自问也很努力，可是却并未达到预期的结果。就像王阳明，格竹七日，病倒之后也并未格物而致知。我就知道，生活并不像想象的那么简单。还是会有很多力所不及和科学无法解释事件的发生，提醒你，这才是有血有肉的生活
我是一个容易感伤的人，但矛盾的是，我又是一个善于发现快乐的人。当个人命运的悲剧浩大沉重地降临，总能在其他地方找到无数散碎而具体的快乐把它化于无形。说是柳暗花明也好，说是自欺欺人也罢！人总是卑微的，但总有人不愿因这卑微而放弃尊严，即使自然或命运向他提出苛刻的条件，他仍不愿以妥协来进行交易
现在有一个很大的误区就是，坐办公室的总以为自己的表现优于父母，其实这不过是因为经济结构转型造成的误会而已。现在在办公室里面哼哧哼哧敲着键盘，在文档、表格、PPT上写出一朵花的那群人，和当年踩着缝纫机的女工们，其实没有本质区别。同理，现在每天刷微博刷朋友圈的人，跟当年蹲墙根晒太阳磕瓜子的，也没多大差异
很多人应该都梦想这样的生活：喜欢的人在枕边，知心的朋友住对面，谁家的饭香就拿着碗去蹭饭，几家的孩子从小就是最好的玩伴。可我们一直都在遇见，也不停的经历分别。可能告别和离开，我们已经默认具有悲情色彩。提到它，总会有些伤感。小时候，我们词不达意；长大后，我们言不由衷。我们都说离别苦，可是真正的离别，根本没有桃花潭水，也没有长亭古道，更没有灞桥折柳
马尔克斯在《霍乱时期的爱情》中写过“弗洛伦蒂诺·阿里萨想起了从小听家庭医生，也就是他的教父，就他的长期便秘发表的一句言论：世上的人分两种，大便通畅和大便不通畅的。”就我来讲，世上的人分两种，能聊到一起的和聊不到一起的。无论友情还是爱情亦或是同事之间的感情，所有的人际关系对我而言，便只有简单的非黑即白。我也从未因此觉得自己情商太低，也可能是真的情商太低！
我身上具有典型的关中人生冷硬倔的特性，身在异地，当我兴冲冲的走进一家挂着正宗陕西XX的小店，往往遇到一份加了白糖的擀面皮，一个加着青椒的肉夹馍，又或者是一碗永远不正宗的正宗油泼面，尝一筷子后每每选择停杯投箸不能食。这也不影响我再次看到正宗陕西XX的招牌，依旧会冲进去的行为
我喜欢的影视剧有日本的《永远的三丁目的夕阳》和韩国的《请回答1988》，究其原因，便是它们讲述的是普通人的生活和一代人的成长。尽管不完美，尽管有缺陷，但很真实，正如穆旦所说，我冷眼向过去稍稍回顾，只见它曲折灌溉的悲喜，都消失在一片亘古的荒漠，这才知道我全部的努力，不过是完成了普通的生活。
这是一个被正能量统治的时代。书店里，畅销书都在教你如何内心强大，刀枪不入；如何提高情商，不动声色；手机里，公众号告诉你爱笑的人运气不会太差，你是什么样的人，就会遇到什么样的人。谨言慎行，每句话思考了再思考，才能说出口。不敢随意表现出自己的不开心，也不能随便去宣泄负面情绪
我希望自己可以在生活里，真真切切地去体验、纠正、进步我所经历的各种感情，慢点动心、慢点付出、保持清醒，同时有及时止损的勇气

癸卯年四月二十
落笔 | 亦封

]]> 生活随笔 封の唠叨 https://meuicat.com/posts/415f2b39.html#disqus_thread Butterfly的魔改教程：好物推荐页 https://meuicat.com/posts/34ccdb7.html https://meuicat.com/posts/34ccdb7.html Wed, 14 Jun 2023 15:17:18 GMT 灵感来源林木木的好物页面，Hexo也来整一个，来定制一个你的好物分享吧

📚 更多文档目录

🚀 搭建教程 | 1 - 📑 前置教程 | 2 - 🎈 主题调整 | 3 - ✨ 魔改教程 | 4 - 🐈 重构自用数据记录

本篇教程基于 Hexo 6.3.0 & Butterfly 4.8.5 为博主的魔改教程记录，以防自己日后因魔改迷失所记录 📝

本小节魔改内容不包括 顶部banner栏，如有需要请移步至 ✨ 第二章 - 三小节 | 魔改页前置

本小节最后更新于 2023 年 11 月 07 日

231107更新：@林子书提醒，补充一个缺失的replaceAll函数

230607更新：现采用yml数据结构，预计适配json以及memos

效果预览

封の生活好物
靠谱的日常伙伴 让工作与生活充满期待

创建数据

  • 创建 [blogRoot]/source/equipment/index.md 页面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
---
title: 我的装备
date: 2023-06-06 17:09:42
type: equipment
top_img: false
aside: false
top_page: true
top_bg: https://s11.ax1x.com/2023/06/07/pCiOBKU.jpg
top_item: 我的装备
top_title: 封の生活好物
top_tips: 靠谱的日常伙伴 让工作与生活充满期待
top_link: /blog/42#好物推荐页
top_text: 关于本页
---


<!-- 页面内容 -->
  • 修改 [blogRoot]/themes/butterfly/layout/page.pug 来使页面匹配
    （ + 号直接删除 即是正常缩进）
1
2
3
4
5
6
      when 'categories'
        include includes/page/categories.pug
+      when 'equipment'
+        include includes/page/equipment.pug
      default
        include includes/page/default-page.pug
  • 创建 [blogRoot]/themes/butterfly/layout/includes/page/equipment.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
35
#icat-equipment
  - var result = ''
  each i in site.data.equipment
    - let className = i.class_name ? markdown(`## ${i.class_name}`) : ""
    - let classDesc = i.class_desc ? `<div class="equipment-desc">${i.class_desc}</div>` : ""

    - let listResult = `${className}${classDesc} `
    - let listContent = ''
    each j in i.equipment_list
      - let details = ''
      -
        if (j.details_link) {
          details = `<a href="${j.details_link}" title="本站关于 ${j.name} 的产品体验报告" target="_blank" rel="external nofollow">查看文章</a>`
        } else if (j.details_flink) {
          details = `<a href="${j.details_flink}" title="跳转到 ${j.name} 的产品详情" target="_blank" rel="external nofollow">详情</a>`
        }
        listContent += `
          <div class="icat-equipment-box">
            <img src="${j.image}">
            <div class="icat-equipment-content">
              <div class="icat-equipment-name">${j.name}</div>
              <div class="icat-equipment-custom">${j.custom}</div>
              <div class="icat-equipment-opinion">${j.opinion}</div>
              <div class="icat-equipment-box-more">
                ${details}
                <div class="icat-bber-reply" onclick="icatequipment.commentText('${j.name} (${j.custom})')">
                  <i class="iconfont icat-message"></i>
                </div>
              </div>
            </div>
          </div>`
      -
    - listResult += `<div class="equipment">${listContent}</div>`
    - result += listResult
  != result + page.content
  • 如若没有添加过即刻短文页的js，那么就需要在equipment.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
+script.
+    var icatequipment = {
+      replaceAll: function (e, n, t) {
+        return e.split(n).join(t);
+      },
+      commentText: function(e) {
+        if (e == "undefined" || e == "null") e = "好棒！";
+        var n = document.getElementsByClassName("el-textarea__inner")[0],
+          t = document.createEvent("HTMLEvents");
+        if (!n) return;
+        t.initEvent("input", !0, !0);
+        var o = icatequipment.replaceAll(e, "\n", "\n> ");
+        (n.value = "> " + o + "\n\n"), n.dispatchEvent(t);
+        var i = document.querySelector("#post-comment")
+          .offsetTop;
+        window.scrollTo(0, i - 80),
+          n.focus(),
+          n.setSelectionRange(-1, -1),
+          document.getElementById("comment-tips") && document.getElementById("comment-tips")
+          .classList.add("show");
+      }
+    }

#icat-equipment
  - var result = ''
  each i in site.data.equipment

  ···
  • 新建 [blogRoot]/source/css/equipment.css 样式文件，并新增以下内容
    （也可以在自建的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
#icat-equipment > h2 {
  margin: 20px 7px 0;
}
#icat-equipment .equipment-desc {
  margin: 0 7px;
  color: var(--icat-secondtext);
}
#icat-equipment {
  padding-bottom: 12px;
}
#icat-equipment .equipment {
  display: flex;
  flex-wrap: wrap;
  padding: 10px 0 0;
  gap: 16px;
}
/* 初始化 */

#icat-equipment .equipment > .icat-equipment-box {
  border: 1px solid var(--icat-secondbg);
  background: var(--icat-card-bg);
  width: calc(100% / 4 - 12px);
  border-radius: 12px;
  overflow: hidden;
}
#icat-equipment .equipment .icat-equipment-box img {
  min-width: 100%;
  max-width: 100%;
  height: 200px;
  object-fit: cover;
  animation:fadeIn 1s;
  cursor:pointer;
  transition:all .4s ease-in-out;
}
#icat-equipment .equipment .icat-equipment-box img:hover {
transform:scale(1.03);
}
#icat-equipment .equipment .icat-equipment-box .icat-equipment-content {
  padding: 16px;
}
#icat-equipment .equipment .icat-equipment-box .icat-equipment-content .icat-equipment-name {
  color: var(--icat-fontcolor);
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#icat-equipment .equipment .icat-equipment-box .icat-equipment-content .icat-equipment-custom {
  font-size: 12px;
  color: var(--icat-secondtext);
  line-height: 1;
  margin-bottom: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#icat-equipment .equipment .icat-equipment-box .icat-equipment-content .icat-equipment-opinion {
  line-height: 20px;
  color: var(--icat-secondtext);
  height: 60px;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin-bottom: 16px;
}
#icat-equipment .equipment .icat-equipment-box .icat-equipment-content .icat-equipment-box-more {
  display: flex;
  justify-content: space-between;
}

#icat-equipment .equipment .icat-equipment-box .icat-equipment-content .icat-equipment-box-more a {
  font-size: 12px;
  background: var(--icat-gray-op);
  color: var(--icat-fontcolor);
  padding: 4px 12px;
  border-radius: 6px;
  letter-spacing: 1px;
}
#icat-equipment .equipment .icat-equipment-box .icat-equipment-content .icat-equipment-box-more a:hover {
  color: var(--icat-white);
  background: var(--icat-blue);
  box-shadow: 0 8px 16px -4px var(--icat-black-op);
}
/* 好物页基础样式 */

@media screen and (max-width: 900px) {
  #icat-equipment .equipment {
    gap: 10px;
  }
  #icat-equipment .equipment > .icat-equipment-box {
    width: calc(100% / 3 - 7px);
  }
}
@media screen and (max-width: 768px) {
  #icat-equipment .equipment {
    gap: 8px;
  }
  #icat-equipment .equipment > .icat-equipment-box {
    width: 100%;
  }
  #icat-equipment .equipment .icat-equipment-box img {
    height: 220px;
  }
}
/* 响应式 */

/* 我的好物样式 */
  • 在 _config.butterfly.yml 主题配置文件中 inject 下的 head 引入 equipment.css
1
2
3
4
5
6
7
8
9
  ···

inject:
  head:
    - <link rel="stylesheet" href="/css/equipment.css"> # 我的好物推荐 - 样式
  bottom:
    - ···

  ···
  • 创建 [blogRoot]/source/_data/equipment.yml 文件，并新增以下内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
- class_name: 日常生产力
  class_desc: 平常生活、工作增添效率的产品
  equipment_list:
    - name: iPhone XR
      custom: 主力 | 128G
      opinion: 吸引我的第一点就是珊瑚橙，其次就是当初的性价比，算是跨越性机型吧；特别喜欢裸机的手感，尺寸厚薄等方面也刚刚好，习惯性选手。
      details_flink: https://www.apple.com.cn/
      image: https://s11.ax1x.com/2023/06/07/pCiB3vD.jpg

    - name: iPhone 7
      custom: 备用 | 128G
      opinion: 学生时代的独宠，在当时性能方面也是能轻易吊打新生代们的；修修换换许多次，现在依然顽强的战斗着。
      details_link: https://www.apple.com.cn/
      image: https://s11.ax1x.com/2023/06/07/pCiBYbd.jpg

使用参数

参数描述优先级默认值
name产品名称必填/
custom产品注释 可自定义内容必填/
opinion产品评价必填/
details_flink产品详情链接 站外选填与 details_link 二选一，必须填其中一个
details_link产品详情链接 站内选填暂未适配pjax
image产品图片必填/
]]> 经验分享 Butterfly主题 魔改记录 https://meuicat.com/posts/34ccdb7.html#disqus_thread CDN加速 https://meuicat.com/posts/b5412fe9.html https://meuicat.com/posts/b5412fe9.html Fri, 02 Jun 2023 05:09:28 GMT 不仅可以提升网站的访问速度，还能提升seo，最重要的就是浏览体验

前段时间就想着出一篇文来对比下各家的CDN加速业务了 奈何我这健忘的脑子…

在一些离服务器源站较远的地区，网站的体验感就会大大降低，并且在网站后期流量大了也会非常吃力。
而cdn不仅可以提升网站的访问速度，还可以保护你的网站隐藏源站ip，从而杜绝不友好的人对网站造成伤害，并且还可以缓解服务器压力。

网站做到后期如果你的服务器不升配的话网站会变得像蜗牛一样，但是升配一点点都会增加我们的预算，所以应用cdn是个人站长最划算的方案（流畅性不仅能提升seo，最重要的就是浏览体验了

CDN整站加速

对于一些CDN加速的平台，除了多吉云和又拍云会提供免费的流量额度，其余的都需要购买付费套餐（流量包）
本章，只提供 多吉云 又拍云 的部署教程（因为其他的没用过…）

多吉云

✅ 博主正在使用的服务

多吉云
每月20GB免费流量，20GB免费空间，20元免费转码
流量包时长费用
20GB一个月免费
200GB十二个月21元
1TB十二个月105元
多吉云使用教程
  • 注册并登录你的账号，前往 用户中心 - 实名认证 进行认证

  • 融合CDN - 域名管理 - 添加域名 添加加速域名

参数选项
加速域名你需要加速的域名
业务类型网页小文件
服务地域中国境内
源站类型源站 IP
源站域名服务器IP地址（可带端口）
回源协议源站支持 HTTPS，使用与用户访问相同的协议回源
回源 Host同加速域名
  • 前往你的域名服务商，添加指向多吉云提供的CNAME
多吉云高级设置

  • 基本配置 - IPv6 访问 开启

  • 缓存与响应 - 源站响应头 开启

  • 访问控制 - IP 黑白名单 设置为黑名单，并添加以下IP

1
2
3
4
5
6
7
8
9
10
117.136.14.181
117.183.0.241
171.106.203.19
220.173.125.83
222.217.145.185
113.14.130.128
222.83.150.92
113.14.130.19
113.14.130.73
113.57.53.37
  • 访问控制 - UA 黑白名单 设置为黑名单，并添加 *Uptime-Kuma*
    （主要为了禁止 Uptime Kuma 监控网站，当然可以选择不开启此功能）

  • 访问控制 - QPS 限制 设置为 50 次 / 秒

  • 访问控制 - 封顶限制 设置为 5 分钟内流量 触发值 3.00 GB ，触发后 停用域名（返回 404）

  • 性能优化 - 智能压缩 设置为开启，压缩方法为 gzip

  • 性能优化 - 搜索引擎回源 设置为开启

又拍云

✅ 博主正在使用的服务

又拍云
开通即送61元代金券；开启全网加速、享受强大的多媒体云处理服务
流量包时长费用
15GB一个月免费
100GB三个月20元
500GB三个月100元
1TB三个月270元
又拍云使用教程
  • 注册并登录你的账号，前往 账户管理 - 用户资料 - 实名认证 进行认证

  • 前往 又拍云联盟 参考并设置好页脚内容，申请加入，通过即可获得免费额度


  • 云产品 - CDN - 创建服务 添加加速域名

参数选项
服务名称英文开头，随意输入
加速域名你需要加速的域名
应用场景全站加速
回源协议协议跟随
源站证书校验ON开启
线路配置服务器IP地址（可带端口）
地区选择国内加速
  • 前往你的域名服务商，添加指向又拍云提供的CNAME
又拍云高级设置

  • 缓存控制 - 分段缓存 开启

  • 缓存控制 - 浏览器缓存 开启

  • 缓存控制 - 离线模式 开启

  • 性能优化 - 智能压缩 开启，并设置为 Gzip 压缩，压缩等级为 3

  • 访问控制 - IP 黑白名单 设置为黑名单，并添加以下IP
1
2
3
4
5
6
7
8
9
10
117.136.14.181
117.183.0.241
171.106.203.19
220.173.125.83
222.217.145.185
113.14.130.128
222.83.150.92
113.14.130.19
113.14.130.73
113.57.53.37
  • 访问控制 - User-Agent 防盗链 设置为黑名单，并添加 *Uptime-Kuma*
    （主要为了禁止 Uptime Kuma 监控网站，当然可以选择不开启此功能）

  • 成本控制 - WebP 自适应 开启

  • 图片处理 - 间隔标识符 开启，并设置为 使用感叹号（!）

无畏云

✅ 博主正在使用的服务

无畏云加速-免费CDN加速-全球海量节点资源
一站式CDN加速平台融合超多大厂为您网站提供极致的加速体验
流量包时长费用
30GB一个月免费
200GB十二个月20元
1TB十二个月99元
10TB十二个月1020元

腾讯云

腾讯云 - 内容分发网络 CDN
内容分发网络（CDN）通过将站点内容分发至遍布全球的海量加速节点，使其用户可就近获取所需内容，避免因网络拥堵、跨运营商、跨地域、跨境等因素带来的网络不稳定、访问延迟高等问题，有效提升下载速度、降低响应时间，提供流畅的用户体验。
流量包时长费用
100GB十二个月19元
500GB十二个月94元
1TB十二个月184元

百度智能云

百度云CDN在今年5月份就已经不支持创建免费域名，通过百度智能云正式加入付费队列

百度智能云 - 内容分发网络 CDN
百度智能云内容分发网络CDN就近内容分发至用户最近的CDN加速节点、CDN加速帮助用户提高访问的响应速度和成功率，并能够实现全球范围内CDN加速。
流量包时长费用
100GB三个月20元
500GB三个月100元
1TB三个月200元

七牛云

七牛云 - 全站加速
全站加速 DCDN 在 CDN 静态加速的基础上融合了动态加速的能力，通过资源动静态分离、智能缓存、路由优化等核心技术一站式解决动静态资源混合站点内容分发慢的问题。适用于动态资源或动静态资源混合的加速场景。
流量包时长费用
100GB十二月22元
500GB十二个月102元
1TB十二个月202元

Cloudflare

Cloudflare
Cloudflare集成化云服务平台，专注网站应用和SaaS访问加速、安全防护、稳定在线。提供免费CDN、无限制服务器ddos防御，防cc攻击、sql注入、僵尸网络攻击

CDN资源

以下为我使用的 Butterfly CDN链接，替换jsdelivr提升访问速度 - 参考来源 张洪Heo

pjax

1
pjax: https://lib.baomitu.com/pjax/0.2.8/pjax.min.js

twikoo

1
twikoo: https://cdn.staticfile.org/twikoo/1.6.16/twikoo.all.min.js

sharejs

1
2
sharejs: https://lib.baomitu.com/social-share.js/1.0.16/js/social-share.min.js
sharejs_css: https://lib.baomitu.com/social-share.js/1.0.16/css/share.min.css

lazyload

1
lazyload: https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vanilla-lazyload/17.3.1/lazyload.iife.min.js

instantpage

1
instantpage: https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/instant.page/5.1.0/instantpage.min.js

typed

1
typed: https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/typed.js/2.0.12/typed.min.js

medium_zoom

1
medium_zoom: https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/medium-zoom/1.0.6/medium-zoom.min.js

snackbar

1
2
snackbar_css: https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/node-snackbar/0.1.16/snackbar.min.css
snackbar: https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/node-snackbar/0.1.16/snackbar.min.js

fontawesome

1
fontawesome: https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/6.0.0/css/all.min.css

aplayer

1
2
aplayer_css: https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.css
aplayer_js: https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.js

meting

1
meting_js: https://cdn1.tianli0.top/npm/js-heo@1.0.12/metingjs/Meting.min.js

prismjs

1
2
3
prismjs_js: https://cdn1.tianli0.top/npm/prismjs@1.1.0/prism.js
prismjs_lineNumber_js: https://cdn1.tianli0.top/npm/prismjs/plugins/line-numbers/prism-line-numbers.min.js
prismjs_autoloader: https://cdn1.tianli0.top/npm/prismjs/plugins/autoloader/prism-autoloader.min.js

CDN公共库

]]> 经验分享 CDN 优化 https://meuicat.com/posts/b5412fe9.html#disqus_thread 二刷《想见你》 https://meuicat.com/posts/faf0c6c3.html https://meuicat.com/posts/faf0c6c3.html Sun, 28 May 2023 11:21:44 GMT 改变未来，才能改变过去 前言

今年初 一上映就和娜子去刷了这部剧 但当时的心情挺差的 就没咋看进去 一度以为故事的结局只是黄雨萱做的一场梦…
（问娜儿 也是一问三不知 她那脑袋 就只适合看花园宝宝 🙃

这几天 没啥事干 娜儿不赶课时 我也没啥工作要处理的（已经在家躺一天了） 闲着也是闲着 两人一合计 就想着再刷一遍影版的《想见你》
所幸 这部电影和剧版的《想见你》是独立的两个故事 不需要再去提前看剧版的内容 也能看懂 就有那么微微的烧脑 但还是很容易理清的

解析

其实按照平行世界的悖论来说 倒是很容易理解是怎么回事

  • 第一点：穿越的关键是王诠胜男友送的那卷《LastDance》磁带 （只有李子维、陈韵如、黄雨萱三人才可以用磁带穿越）

  • 第二点：时空莫比乌斯环缔造者是 陈韵如 （2017年杨皓给在病床上的陈韵如听磁带 导致陈韵如灵魂穿越）

  • 第三点：时空莫比乌斯环的穿越节点为 2014年7月8日 （所有时空的穿越 都只会在主世界时间线的7月8日）

  • 第四点：坠楼现场的人员为：李子维、王诠胜（17年的李子维）、黄雨萱（17年的陈韵如）、陈韵如（17年的黄雨萱）

  • 第五点：可以理解成 主世界 平行世界 和 新主世界 （改变未来 才能改变过去）

2009年 李子维和黄雨萱在奶茶店以《LastDance》相遇相识 「在梦里 我好像认识他很久很久」28岁的李子维遇见17岁的黄雨萱 彼此初识却有着好像相识已久的既视感
接着 2010年 跨年李子维黄雨萱确定恋爱关系 并和好友莫俊杰确认了黄雨萱和陈韵如是两个人 （再次引出陈韵如消失在台湾 没有出现过）
一直到黄雨萱做了个噩梦 「你原本把我抱的好紧 可是突然就不见了」 并且在第二天黄雨萱和李子维二人洗漱时 黄雨萱说心情不好时 这其实都是李子维已经死亡的隐晦暗示（此时已经发生坠楼事件后）

2017年11月13日 黄雨萱工作原因调到上海担任开发部产品经理 而杨皓是公司老板；在一次公司聚会后 杨皓隐晦的表明 很多年前因为工作需要前往台湾生活一段时间 从而认识了他的妻子（就是陈韵如）；而后 聚会结束 黄雨萱躺在床上翻看视频和聊天记录 画面里显示的聊天记录只有单方面的内容 最终聊天时间定格在 2014年7月9日
杨皓看到黄雨萱的那一刻起 就知道日记里的内容是真实的 便给病床上的陈韵如听磁带 陈韵如穿越；而后 在 2014年7月10日 坠楼的变成了 陈韵如 黄雨萱 这将导致2017年在病床上的陈韵如生命体征消失 接着杨皓把希望放在黄雨萱身上 将磁带给了她
紧接着 黄雨萱就收到了一份礼盒 里面正装着可以使人穿越的《LastDance》磁带 黄雨萱穿越

而从黄雨萱和陈韵如的穿越 可以看成 创造了个平行时空；黄雨萱和陈韵如坠楼身亡后 14年的李子维便从14年恢复意识后的王诠胜话里得知 穿越的关键是磁带；2017年李子维在一家音像店买到了可以穿越的磁带 李子维穿越（不知道那个磁带怎么跑到音像店里的…）

必须前提：
1、陈韵如怀孕流产是建立在黄雨萱活着的时空的（主世界） 因为黄雨萱死掉的时空里陈韵如和黄雨萱的本体都死了 她也就不会遇到杨皓了
2、演唱会之后莫俊杰和陈韵如没有了联系 所以陈韵如不知道后来李子维死的事情 所以才会询问黄雨萱未来发生的事 并且笃定只有自己（身体）死了才不会碰到杨皓 并且李子维也不会因为自己穿越而死 但是黄雨萱和李子维都穿越了 所以在7月10日那晚会导致两个时空

故事时间线

「我和雨萱都无法接受失去对方 我想救的是她 但她希望 活着的是我」 在主世界的李子维坠楼后 王诠胜和陈韵如的意识恢复 陈韵如通过日记企图拼凑找出破解的办法
坠楼事件一个月后 2014年8月 陈韵如醒悟了 知道自己的死不能阻止这场悲剧的发生 并且不小心打翻的箱子里面看到导致穿越的磁带 两人销毁磁带 从而衍生出新的主世界时间线 「改变未来 才能改变过去」
因为新的主世界时间线 陈韵如没有磁带 也就没有穿越 也就等于没有2014年的时空莫比乌斯环 新的主世界时间线将覆盖原来的主世界时间线

新时间线

最后

「没有开始就不会结束 改变未来才是改变过去」
既然选择开始 那就全身心投入 去爱 去失去 要不负相遇 – 致你我

有爱之人常伴 风吹爱意 盛而不离
年年有风 风有年年 慢慢即漫漫 漫漫亦灿灿.

]]> 闲聊杂谈 观感笔记 https://meuicat.com/posts/faf0c6c3.html#disqus_thread 网络言论不是法外之地 https://meuicat.com/posts/ccf841ca.html https://meuicat.com/posts/ccf841ca.html Mon, 22 May 2023 05:07:21 GMT 别当键盘侠，好好做个人，理智恋爱观 现如今是一个言论自由的时代 但也总有一些极个别的 抱着 “走自己的路 让别人走不了” 的观念 信誓旦旦地发表着自己的 “花式言论”
有人会说 退一步海阔天空 忍一忍就好了 不必去管它 可如果你不进行反击 施暴者将会越发恶劣

再次说明一遍 如果对我有意见 或者有着不一样的观点 可以选择不看 又或者把我拉黑 对彼此都好
但在发布一些讽刺性、不良、带有歧视性的言论 那么将不会无动于衷 高低都得怼回几句

“同居过的女人跟二婚没区别”

首先 还是要说一句 三观不同不相为谋
我不知道说这句话的人 都是些什么样的观念想法 并且还天天把这句话挂在嘴边 就跟全世界同居过的人和他有仇一样
在这些人里的刻板印象是觉得 反正天天在一起 该做的不该做的 一样不落 女生就掉价了 对此真就是老太太钻被窝 给爷整笑了
一个人的思想是龌龊的 那么这个人看什么都是龌龊的 就好比一个女生和一个男生谈了一场恋爱 都会被说不三不四的闲话

情侣之间的相处方式有很多 现如今情侣们同居已是家常便饭 但如果你是以歧视的态度去看待同居过的女性 请停止你即将诋毁的话语 每一位女生需要被尊重 同时同居是一种自由的选择 没有哪条法律法规规定不允许情侣同居 也不该受到外人的指责和评判 每个人都有选择的权利 选择自己喜欢的生活方式 而同居也不该被视为不道德、不正当的行为
同居是不好的行为吗 不 我个人的观点是认为是健康的、有益处的 两个人住在一起 可以更好的、快速的了解彼此 增强、稳定彼此感情 （当然了 这是建立在两人真心相爱的前提下）

我的一位好友 也曾是这番言论的受害者 在这就暂称她为K
K和她的前男友Z恋爱四年 而后面的两年在同居 在这段生活里 Z的真实面目逐渐展露了出来 但Z并没有发现什么不对劲 也没发现K饱受严重的心理折磨 最后K坚持不下去了 提出了分手
自我救赎的半年后 K和一位追求者G在一起了 期间并没有什么不愉快的事情发生 但很快的两人就聊到了一个话题：同居
K很真诚直白的告诉了G 她同居过一段时间 但G立马就不对劲起来 沉默了 并觉得同居和结婚没有区别 并为此独自生气冷落了三天之久 紧接在后面的一段时间里 G经常提起这件事情 并字里行间的在暗讽K

可既然选择了在一起 难道不是要接受对方全部的好与坏吗 很多事情发生了 那只能坦然接受 把握当下 如果这都不能接受 那当初为什么要开始呢
如若他人愿意敞开心扉 袒露不堪的伤疤 你却频繁揭露伤口 甚至还不忘往上撒把盐 难以想象这样的人到底是什么样的存在 才会有如此恶魔的行为

K的原话：
会让女生很膈应 并且会觉得自己很不好 变得自责、自卑起来
虽然自己在这件事情上处理欠妥 也觉得自己很不好 但还是不希望听到别人提起

“才分手几个月就和别的女生在一起 死渣男”

对此 我想说：关你屁事
难道分手了我就得守寡似的 单身个几年？说话能不能过过脑子 又不是在守孝 老子愿意什么时候谈就什么时候谈
在结束上一段感情后 并没有立刻开始和别人交往 也在调整自己的状态 开始一段新的感情 那么说明我已经做好了准备去迎接新的情感
更有甚者说的 脚踏多船 并没有这回事 是 我在上一段感情里 是有不忠 但也以此为戒 可不意味着 每一段都会如此

我和我的女朋友娜儿的感情很好 极个别的友友不用过度操心
我和娜儿认识七年 今天是交往的第二个月零八天 过往的种种好与坏 我女朋友娜儿比任何人都知道的一清二楚 所以请不要多加评断
而现在我们也是在同居 也请不要带着有色眼镜去看我们

经济方面 已是属于共享状态 我的所有工资都是她在掌管（我的计划消费观较差）日常生活里 她负责我的所有的消费
倒不是我这人男权女权啥的 单纯的是因为 我不太喜欢网购、定电影票、计划旅游等这些繁琐的小事 这些基本上都是她在弄（还有给车充电 因为我经常不充电用到续航不足） 包括出去吃饭 只要桌子上有个扫码点单 都是她扫码给我点餐 点了什么我吃什么（一直都有很强烈的选择困难症）

日常方面 在家里 我很少做家务 虽然我时不时做 但也仅仅是整理电脑桌、床上用品这些 如果是做饭 那么就得看有没有空做了 我本身就是一个比较喜欢做东西吃的人 会感觉超放松 超解压 一般来说 早上起得早并且女朋友还没醒的时候 我就会去做个早餐 emm怎么说呢 因为她就是个厨房杀手 并且名堂也很多 要求很高的那种
包括铲屎换猫砂 喂粮 换水基本都是娜儿在做 用娜儿的话来说：作为Dirty的妈妈这些都要亲力亲为的 还有一些不好的生活习惯 譬如多喝水、刮胡子什么的她也会想着法来纠正 所以这些事情基本都不需要我操心

社交方面 虽然娜儿不怎么主动查我手机 但每隔一段时间 我也会提出要交换查手机的理由 让她安心 我的很多朋友娜儿也认识 包括前段时间一起玩摄影的一些女性朋友 娜儿也会很快和她们玩到一块
不管是异性的相处或是独处 娜儿都能很好地处理每一段关系 等晚上到家就会一起聊谁谁谁怎么样怎么样的

你说什么是健康的同居 我想现在所经历的就是了 互相成长依偎 做彼此的心理港湾 精神寄托

与娜儿的约法十章

恋爱条约协议书

    本着对爱情坦诚，对未来负责的态度，以及履行好双方在本次恋爱中作为男/女朋友的义务
    双方商议决定后，列出并签订下列协议：

    条约1：涉及恋爱双方的事情，一定要一起商量，不得擅作作主
    恋爱关系是一种双方共同经营的关系，需要彼此尊重和信任。列如在涉及到恋爱双方的事情时，比如说约会的时间、地点、方式，或者是彼此的感情问题，一定要一起商量，不得擅作主
    需要双方的相互理解、尊重和合作。在涉及到恋爱双方的事情时，一定要坐下来一起商量，并共同承担责任。这样才能建立一个稳定、健康和长久的恋爱关系

    条约2：互相督促、监督对方进步（小封努力工作、娜娜认真学习）
    互相督促和监督对方进步是一种非常积极和有益的行为，可以帮助彼此持续地成长和进步。例如，小封在工作中遇到了一些困难，可能会感到沮丧和无助，这时候娜娜就可以及时给他鼓励和支持，让他重新振作起来
    同样地，如果娜娜在学习上遇到了问题，小封也可以给予她一些帮助和建议，帮助她更好地理解和掌握知识。这种互相帮助和相互监督的关系，不仅能够提高双方的工作和学习效率，还能够增强双方之间的信任和友谊
    要实现这种互相督促和相互监督的关系，需要双方都具备一定的自觉性和责任感。双方应该尽力做到及时沟通，分享彼此的进展和困难，以达到共同进步的目标
    互相督促、监督对方进步是一种非常有益和可贵的行为，它能够帮助我们在工作和学习中更加高效和成功地前进

    条约3：不许吵架，在没有了解原因前不轻易责备对方（即使吵架了也不能冷战）
    不许吵架，是为了在没有了解原因前不轻易责备对方，这是一种非常重要的沟通技巧。在人际交往中，难免会出现意见不同甚至产生争执的情况，如果双方都不能控制自己的情绪，就容易陷入互相指责、冷战甚至破裂关系的境地
    需要明确的是，吵架并不能真正解决问题，只会让情况变得更加糟糕。当处于情绪激动的状态时，思考和表达能力都会受到限制，很可能说出伤人的话或者做出过激的行为
    一个人单方面责备对方也是不公平的，因为他只看到了问题的一面，而没有考虑到对方的感受和立场。如果我们想要真正解决问题，就必须先认真倾听对方的意见，并且尝试站在对方的角度去看待问题

    条约4：跟异性相处时，非必要时候不许进行接触
    在跟异性相处时，尤其是陌生人或不熟悉的人，应该注意保持适当的距离，非必要时刻不要进行过于亲密的接触
    在实际生活中，这个条约也需要根据具体情况进行调整。例如，如果某一方需要出差或参加重要的社交活动，可能不可避免地需要接触其他异性。这种情况下，可以通过沟通和理解来协商，并在保证适度的前提下进行处理

    条约5：晚上23点前到家（必要应酬除外-小封专属）
    在情侣关系中，时间管理往往是一个非常重要的问题。特别是对于那些在工作或学习中非常忙碌的人来说，怎样合理地分配时间以兼顾感情和责任成为了一种挑战
    这个约定的目的是为了确保情侣间有充足的相处时间。如果一个人总是在深夜才回家，那么会影响彼此的交流和互动。有时候即使只有几分钟的时间也能让情侣们更好地沟通和分享彼此的想法和感受。因此，尽量在晚上早些时候回家，给彼此留出更多的共同时间是很有意义的
    当然，在必要应酬的情况下可以豁免这个条款。例如，如果有一些重要的社交活动需要参加，那么可以酌情调整回家时间。但是这种情况应该是例外而非常态，避免频繁出现
    更好地管理自己的时间，充分利用空余时间来提高彼此之间的情感交流和理解。当然，在实际生活中，具体的约定需要基于双方的具体情况制定，确保达到最佳的效果

    条约6：每个月只过一次纪念日
    双方应该尊重彼此的节日和纪念日，但是有时候一年中的纪念日太多了，每个月都有好几个，这会让人感到压力和负担。因此，每个月只过一次纪念日，不管本月里有多少个节日或者纪念日，可以帮助情侣们减轻压力，更好地享受彼此的陪伴
    特殊情况下，需要根据情侣双方的具体情况来考虑。比如，如果两人的生日在同一个月，那么需要额外安排一个特殊的纪念日来庆祝这个特殊的日子。此外还有周年纪念日，也需要单独安排一个纪念日来庆祝

    条约7：兴趣玩乐时间需自由，期间不打扰到对方
    作为情侣，我们都希望彼此能够拥有自己的兴趣爱好和玩乐时间。因此，在这条条约中，我们将确立一个原则：兴趣玩乐时间需自由，期间不打扰到对方打游戏/追剧/写代码等
    应该尊重彼此的兴趣爱好并理解对方需要独立的时间来进行这些活动。如果我正在写代码，那么你可以自由地做自己想做的事情，不需要打扰我。同样，如果你正在看电视剧或是打游戏，我也会在旁边保持安静，不会干扰你
    其次，我们也需要考虑到对方的情况。比如说，如果你工作压力很大，需要更多的私人时间来放松自己，我会尊重你的需求，并给予你更多的空间。同样，如果我特别想玩某个游戏，需要一段时间专注于游戏，你也可以理解我的需要，不会干扰我
    我们可以在兴趣爱好上互相支持。比如说，你可能喜欢打游戏，而我对此并不感兴趣，但是我可以陪你聊天或者做其他的事情，不会打扰到你。同样，如果我对某个电视剧非常着迷，你也可以和我一起看，或者在旁边做自己的事情，不会打扰到我的观影体验

    条约8：每隔一段时间，双方需要坐下来倾听对方生活点滴
    每天都要面对各种各样的压力和挑战，我们可能会有不同的工作、学习和生活节奏，但是我们之间的信任和沟通是维持关系的关键。因此，建议我们定期坐下来倾听对方的生活点滴，以加强我们之间的联系
    具体来说，我建议我们每隔一段时间约定一个特定的时间，例如一周或两周一次。在约定的时间，双方必须放下工作、学习和其他事情，还有手机也需调为静音，在家里客厅或安静的场所坐下来，分享最近发生的事情
    我希望我们能够保持开放的心态和诚实的沟通，不断改进和调整这个条约，以确保它适合我们的个人需求和关系状态

    条约9：例假期间，除了吃喝方面小封有决定权外，娜娜不必遵守"情侣条约协议"，并且可以提出任何理由，小封必须无条件满足（特殊期间-娜娜的专属条约）
    在该期间，娜娜可能会经历生理和心理上的不适，需要更多的关注和照顾。因此，小封必须无条件地满足她的要求，包括但不限于：
        1. 娜娜可以选择不参加社交活动或者约会，小封不能对此表示不满或者强迫她去参加
        2. 如果娜娜需要帮助做家务或者购物等事情，小封必须及时提供帮助
        3. 如果娜娜需要安静休息，小封必须保持安静，不打扰她的休息
        4. 如果娜娜需要特殊的食物或者药品，小封必须及时购买并提供给她
    在例假期间，娜娜的身体和心理状态可能会发生变化，她需要更多的关注和照顾。因此，小封必须尊重娜娜的意愿，无条件地满足她的要求，在这段时间里给予她足够的支持和关爱

    条约10：永远不强迫对方做超越自己原则的事情
    此条协议原则的核心在于尊重彼此的边界和舒适区。每个人都有自己的价值观、兴趣爱好和信念，这些东西构成了他们的个性和特点。如果一个人试图强迫另一个人做一些他们本来不想做的事情，那么这个人就会感到不舒服和被迫
    当然，这个原则并不意味着“你爱干嘛干嘛”，而是要在双方之间建立良好的沟通和协调。如果想让对方参加某个活动或者做某件事情，他应该尊重另一个人的意愿，询问对方是否有兴趣和时间，而不是直接强求


此协议一式两份，双方各持一份，分印至客厅公示一份，并进行电子存档
    本协议于签署即日起生效


承诺人（男方）：小封
承诺人（女方）：娜娜

2023 年 3 月 29 日

]]> 生活随笔 封の唠叨 https://meuicat.com/posts/ccf841ca.html#disqus_thread 近况记事 - 4 https://meuicat.com/posts/36581baf.html https://meuicat.com/posts/36581baf.html Tue, 16 May 2023 13:36:31 GMT 小站重构记录；记事碎碎念~ 十几天没写文了 都在各种忙 就像哈批似的 给自己找了一堆事情做
就如你现在看到的 这几天抽空博客做了优化 全面改版（因为之前都是直接魔改过来的 导致很多东西都冲突有bug）
也将整改的内容做了教程 分了四章内容 详情教程见 - 重构记录 - 4
（还未真正的完善 弄了好几天 一下班就开始优化 现在是第五天 已经不耐烦了 往后慢慢改吧…

好 回归正题 现从工作方面聊起吧 最近逐渐感觉真的要力不从心了 一天十多个小时工作着 日复一日
有人说：工作的意义是什么呢 是让人们找到人生的方向 还是为了那一点薪资
人生很短暂 在这段人生中 至少有一半的时间都在工作上 所以是为了那一点薪资吗 我想 应该是的 至少目前为止 我想不出任何理由来
也可能是为了心里的那一点安全感 是物欲的幸福感 但这种物质感觉好像是具有短暂性的 不能长期持续

但 钱呢？ 好像忙忙碌碌间 也没看到自己有多少存款 换句话来说 就是月光族

今年 21 嗯 已经有职业病了 现在一坐在电脑前 不出半个小时 左后背靠上的位置就开始疼的厉害
百度一查 什么肩膜炎 什么病什么病的 更有甚者还说严重的话可能会导致脊椎错位什么的 把我吓的 立马把浏览器关了（眼不见心不慌..）
其实这个症状一两年前有出现过 但当时并没现在的严重 就没重视起来 也可能是这段时间的工作性质 使用电脑比较多 才导致严重复发的吧

最严重的一次 是在前几天 侧着休息的时候 突然整个后背就疼了起来 满头大汗 我直接人傻 并把娜儿吓得不轻 连夜送我去医院看医生
当时真的是整个后背都在疼 一动都不敢动 一动就更疼了 这辈子都没这样疼过 感觉后背都要被疼散架了

一查 还是逃不了被下中度肩颈筋膜炎的确诊书 真的欲哭无泪
最后 医生的建议是 开些止痛药和活血化瘀的药物 尽量换一份工作 避免长时间搭在键盘的姿势 对肩不好 对眼睛也不好 还特别嘱咐要多运动
运动 好一个多运动啊.. 我这才想起来 我三月底办的卡 到现在 就去了三四次 血亏 完全就是钱没赚到 身体先出毛病
所以各位友友还是要注重身体啊 避免长期劳累 留下暗病

身体出现隐疾 也让我意识到该缓缓了 像之前一直在维护的 布柒糖FM、Melancholia主题、越狱源（付费）、Capucino故事集 这四个项目都将适当性的停止维护
布柒糖FM 还是不舍当初粉丝在我最低谷的时候 一直支持 鼓励着 所以暂时不做出变动；Melancholia 当初是想着把生活写进书 才开发了这个主题 但没什么时间继续去完善 算是半成品吧 暂时不维护了 以后再看吧；Capucino 起初是想把我看过的小故事收集起来 也算当做睡前故事集吧 里面有不少的小故事 挺适合情侣间的哄睡故事；越狱源 难取难舍 之前是分享一些好用的越狱插件 完全免费的 后面没精力维护就关了 前一段时间iOS15越狱出来 就开发了个小插件 付费用户也还行 但现在也不太想维护了 就关闭了吧 毕竟还占用着服务器
往后该下班就下班 吃饭 逛gai 运动 时不时倒腾倒腾博客 也是挺不错的 至少会很安逸

噢对了 忘了介绍我的猫了 加了我微信的友友们应该知道 我又养猫啦~ （耶加 小名：Dirty）
一直都想养一只布偶 但因为以前不上进啊啥的 哎 悔不当初 但时光不能逆流 以前没有 现在去弥补遗憾就好 只要是喜欢 什么时候都不算晚
这小毛孩是偶然间在逛一家宠物店的时候 一眼看到的 超有眼缘
当时还正愁纪念日送什么礼物好 刚好看到了耶加 可能这就是缘分 因此 我再次晋升成为一名铲屎官 虽然都是娜儿在铲 嘿嘿 我这不负责任的爸爸就只会抱着这种吸猫
（主要还是因为娜儿在家里无聊 正好猫猫可以陪着她

还有很多事情没记录下来 但一时半会会想不出来了 往后想到再写吧 现在得出去散散步了 各位晚安~

]]> 生活随笔 封の唠叨 https://meuicat.com/posts/36581baf.html#disqus_thread 深夜训斥 https://meuicat.com/posts/1bfe75d3.html https://meuicat.com/posts/1bfe75d3.html Mon, 08 May 2023 18:03:06 GMT 控诉！坚决抵制.. 现在是5月9日凌晨2点整 刚溜达到家 必须要好好控诉下娜子 这段时间差点没把我气死
好不容易今天准点下班 吃了饭想着出去遛遛弯 吹吹风玩玩板子 好家伙 她也领上个板子屁颠屁颠说也要玩 哪成想 摔了一跤抱怨起我来了 板子也不玩了 抓着我衣角就去各种吃
脂肪没消耗 反倒增量了 这一顿操作直接把我CPU干冒烟了 说好的出来出出汗呢 合着原来是觅食啊（此时距离吃完饭才三个多小时）
期间我拿着两个板子 她就在前头各种炫 女生都有两个胃吗 还是说个别女生比较彪悍 我手也会酸的好吧 😅
两个人 两张板 四条腿 六公里 八千步 四个小时 神经病啊 还不让开车 合着就她明天可以睡到自然醒 完全不考虑我的感受 我真的 想 锤 死 这 批 🙃
越写越气 现在娜儿还在我旁边嘻嘻哈哈 还在说我是不是气昏头了 用词都不规范 喵的 🙃 想爆粗口

让我想起昨天还跟我闹的无厘头 大半个月前就跟我说想搬家 现在还没找到房子怪我不陪她去看 闹个脾气居然还直呼我名字 喵的 翻天了
娜：亦小封！怎么还不找房子 我不想住这破公寓了 听到没有
我：？前段时间你又不是不知道 天天加班到深夜 五一不是回深圳了吗 现在我哪有空哎 女魔头大人
娜：我不听不听不听 你再不找我就找你爸去
我：大小姐 你那么多时间 又不用上班 天天在家追你的欧巴
我：你就辛苦辛苦去看看 再拍给我看不就好了 对吧~
娜：不听 我要跟伯父告状 说你欺负我 要我一个娇弱的小女子在这人生地不熟的地方干苦力！
我：？（直接给我干沉默了 这？苦力？ 我特喵的…真的服了 气出内伤直接
···（不平等条约式对话 略过）
娜：小封呀 记得按照我的要求去找哦 别忘了还有你答应我的修勾勾

这河狸吗 一点都不河狸 简直离谱！气上加气的是 昨晚半夜三点半 哐哐哐砸房门 泡面非要煮 还得加两蛋 我寻思泡着吃会死一样 成 最后还要吃蛋挞（此处是娜儿强迫我加的内容：饭后甜品）
我收回前几天里博文说的话 我再也不做东西吃了 打死我都不要 手都给剁掉
五点睡七点醒阎王说我好身体 迟早逃离这鬼地方 逃离这魔女的魔掌

得 现在在催我写快点 准备拉着我去追剧了
爱情而已 到 去有风的地方 再到现在的半是蜜糖半是伤 全特喵的是言情剧 我这脑子真进不去这些玩意啊 救命啊谁能救救我 😭
就吐槽 骂到这了 该去看那该死的破剧了（提一句：乔娜为什么不是女主啊 敲）

]]> 生活随笔 封の唠叨 https://meuicat.com/posts/1bfe75d3.html#disqus_thread 近况记事 - 3 https://meuicat.com/posts/a83c8e0c.html https://meuicat.com/posts/a83c8e0c.html Sun, 07 May 2023 12:55:38 GMT 五一假期结束；记事碎碎念~ 叮~ 五一假期结束倒计时：3小时
就用这剩下的一点时间就来记录下我那九天假期的五一吧
可能会使那些没放假又或是五一只放一天的友友们妒忌
没办法 谁让我摊上好老板了~ 要是不平衡 可以跳来我们公司~ 热烈欢迎~

原本计划的是和娜先回一趟深圳 再计划性去打卡旅个小游
哪成想放假第一天就在床上躺了一天 次日才返深
本想在家好好陪陪父母几天 却难抵好朋友们的盛情邀请 各种嗨 在家两天 就只吃了一顿饭
那次吃饭老妈突然说起 老爸这段时间身体不好 高血压 老爸的公司被下通知要强行搬迁 但估摸着老爸的想法 应该不会再做那些无用功了 本就摇摇欲坠了 关了就关了吧 所属 世事无常..

旭也从中山回来了 就更不着家了 不过这小子 居然还在取保期间交了个女朋友 喵的 还跟我说：雅我是真的喜欢 收心了 哥们现在纯爱 我表示：？你猜我信不信 我宁愿相信世界上没有奥特曼都不信这小子纯爱 hetui
不过看到旭对雅 真的挺在意的（至少目前来说） 精心挑花 一朵朵的挑 写小卡片都能写十分钟 再看到两人一起在做对戒 不免会在想 这小子不会真的认真了吧 欣慰 但又气愤 照这样下去 今后难以重现我倆玉林双雄的日子了 他奶奶的 背着我偷偷幸福..
不过回来这一趟 也不完全没有收获 旭呢 也想清楚了 不捞偏门了 我想估计是真的收心了吧 也遇到了喜欢的人 有人要守护了 挺好的 一次聊天里 和旭说起在纠结回深后工作打算 旭表示说这个月底就拿证回深圳了 可以考虑和他一起合伙试试 毕竟对我来说接触新的行业 是一个跨越式的挑战

杰 芙 洛和我四人一拍即合 带上板子奔去海边
好在我的板子多 但面对三位初学者 我招架不来 也生怕我的板子陨落在他们脚下
这不 没十分钟 杰就摔个四脚朝天 背部狠狠地 “拍” 到地上 那声响 厚实！都在惊呼幸好是杰穿的衣服厚 不然内伤都给拍出来 但也在地上足足两分钟才缓过来 再一会后 杰：我手链断了 这是他女朋友送他的情侣手链 我们四个举着收手机打光找了十几分钟都不见踪影 也没配件卖 这下可不好交差了
洛就更让人佩服了 上板十分钟就会滑了 一整晚就摔了一次 并且还想进阶oille 可能这就是天赋 绝对平衡感 洛：本小姐驾到 通通闪开
不过得吐槽一下说句题外话 蚊子是真多 一腿包…

在深圳待了三天 娜天天都在哔哔我 说啥时候去玩 我就纳闷了 深圳没地方玩还是这么着 天天跑去和她好姐妹摆条 这还无聊 喵的
没放假前本商量说去南京转转 现在娜儿突然改变主意说去长沙 后面才发现 这 是这有目的的阴谋
一到 长沙 娜就开始了大吃特吃 丝毫没记起她前段时间信誓旦旦的跟我说：本魔女要胖了！不行我要减肥！ 我..汗颜…

论娜儿对茶颜悦色的喜欢能达到什么程度
绝对是两天七杯 这还是极力批评下的成果

但到底是多少杯我也不清楚 因为
娜：啊 来长沙了 来 点一杯茶颜悦色
娜：哇 这有一间茶颜悦色 我去买杯喝
娜：我点了茶颜悦色 一会吃饭能到
娜：我点茶颜悦色 等会就能送来
娜：等下喝杯茶颜悦色再洗澡
娜：公寓送的茶颜悦色我叫他们下单送过来
娜：高铁站有三间茶颜悦色 我们上车前去排队拿
…我表示..泰酷辣..

这一估摸 合着是奔着茶颜悦色去的..
极力反驳下 还是没能取胜 长沙哎 各种辣辣辣的 好在 还能接受 都还行 温度适宜 空气清新 东西好吃 菊花也安然无恙 不至于捂着pp回上海

好久没做饭了 想着就剩两天假期了 那就在家好好休息休息 给娜儿改善下伙食 毕竟这可怜虫天天在家吃外卖 还时不时闹着我让我做饭给她吃
原本是挺抗拒的 不是很想进厨房 毕竟还是有道坎 但之前娜的一句话点醒了我
“其实这是隔阂不是嘛 在你亲眼看到另一个男的拉着她的手 回去你们一起住过的地方的时候就已经死心了 不是嘛
那就举杯向过往敬一杯酒 骂一句 去你的 随后丢进垃圾桶 就从尝试新的菜系开始
但不得不提一句 娜儿是真的厨房白痴 连空气炸锅和烤炉的用处都能搞混 让她烤个牛肉 硬生生的丢进空气炸锅给我风干 喵的喵的喵的
emmm 也写的差不多了 得出去运动运动了（都怪娜儿大晚上强迫我喝蛋白粉 神经病啊 喵的） 不然今晚是个不眠夜…

]]> 生活随笔 封の唠叨 https://meuicat.com/posts/a83c8e0c.html#disqus_thread 近况记事 - 2 https://meuicat.com/posts/df3bbe9a.html https://meuicat.com/posts/df3bbe9a.html Fri, 28 Apr 2023 09:31:58 GMT 孙和吴的订婚；记事碎碎念~ 嗯.. 这段时间少了跟朋友们分享日常的生活 更偏向于写在博客上了 也有一部分原因是怕过于打扰别人的生活
遇到能给朋友们带来快乐并值得的事 才会思虑三分后再发送 毕竟 谁都不该是我那糟糕生活的垃圾桶

博客更像是我那遁名匿迹的小空间 属于自己的一个世界 可以记录那些属于自己的人生事迹
就如同网络上撸流传的那句 “微博里的才是最真实的自己” 朋友圈只会分享有趣的事情 是好的一面 微博里承载的是那些不好的情绪以及满满的负能量 也不用担心有人会嫌自己烦

个人博客 可承载的东西可以有很多 就算一天写十篇博文都不会打扰到现实中的朋友们
即使有陌生人的来访浏览 也不会给现实的我带来些什么 顶多就抱有不一样的意见 那又如何呢？毕竟我连评论都关了 如果喜欢就欢迎来访 不喜欢并且还想过过嘴瘾的 请关闭不要来访 我会觉得很晦气 当然了 这只是一小部分人~

说回近期 工作项目临近尾声 虽然工作量已小了许多 但还没到最后一刻 都不可松懈下来 反倒要更加细心
说实话 行政管理工作并没有想象中的轻松 这段时间已不知是多少个白加黑
生活压力越来越大 节奏越来越快 看到每个同事都在有条不紊的工作着 效率 指标蹭蹭向上靠
逐渐感觉到已跟不上他们的节奏 即使已经加倍投入了 却还是会怕耽误到大家伙

我刚到三组不久 在一次吃宵夜时 总工头老徐就问过我：小封，你在深圳不好好呆着，非跑来上海这破地方作甚，这地方可吃人哦。
起初 不以为然 毕竟 一直以来 我向往的就是这座城市 还记得在学生时代的一愿就是 我要去上海 我要去上海生活 我要离开深圳 我不想困在深圳一辈子 我喜欢上海的风 我喜欢上海的生活 我要在上海发展 这里憧憬着我的美好世界
现实给了我一巴掌 狠狠的一巴掌 对比起深圳 如果说在深圳打拼是在玩命 那么上海就是不要命干活 我该庆幸深圳对我的包容
可面对现实的残酷 这不成熟的愿望终究是给我自己上了一课 不要去憧憬那些本就不属于自己的东西 就比如 我不属于这个城市 也好像适应不了这个城市

上个星期 一同吃饭时 老徐不知道咋的突然就又问起了我：小封啊，这段时间感觉怎么样啊，想深圳，想回家了吧？我抬起头 见老徐正看着我 四目相对 我茫然的笑了笑 也没说话
是自嘲还是茫然呢？我也说不准 但我想 更多的是自嘲吧 我以为离开那座城市去自己喜欢的地方 就不会有那些烦心事了 可现实并不然 反而会一件又一件接踵而来 就如 一份文件能因各种问题改了又改 如物流延误而毫无应对之策 如件改考察不足导致全组返工的自责感 如时常因健忘反复思索有什么还没完成感到烦躁 甚至有时做梦都会在想…

大前天 我的好朋友老孙 和 我另一位好友雪晴姐 订婚了 作为一个九年的好友 好兄弟 还肩并着一个好老弟的我 这种场合可不能少了我 提前冲到了丽水 陪好友去置办（也就是当苦力..

订婚并没有想象中的复杂 但也不是说就出席一下那么简单
首先是喜饼 孙和晴的想法非常多 阿姨想要那种传统的喜饼 但是孙缺觉得一次就定一次婚 要选自己喜欢吃的饼才行；孙喜欢云南鲜花饼 为此 他买了一大袋子 时不时吃一个 我严重怀疑他就是想吃零食以试吃为借口…
最后还是败给了现实 因为之前定的喜饼袋子不够合适，最终还是选了澳联西饼和西式喜饼

对我来说 最想知道的还是订婚戒指了 但却发现孙这小子一直在纠结还没选好 晴那边却以为孙早就已经准备好了 孙这时候还是表示一辈子就定一次婚 得仔细想想 好好挑挑 我当时就惊了 打趣说道：那到时候日子你还没准备好戒指难不成用易拉环啊 或者你用我的DR 反正戒指上没刻字(✿◡‿◡)
后面这小子在阿姨和我的压迫下 还是选择了里昂的半素圈（加急定做 孙的钱包因为他自己的犹豫不决又缩水了不少 噗哈哈哈哈） 阿姨表示很赞~
至于其他的 晴姐的姐妹们都张罗的差不多了 像什么化妆师 定三金 纪贴啥的都已早已安排妥当 就属孙这边最慌缪…
（题外话：司仪小姐姐感觉不错 都在我的点上 不过就是年龄比我大那么一… 🙃）

茫茫人海中 两个人遇在一起是有缘 若有幸步入婚姻殿堂是有福 两个人一起慢慢变老是天长地久的福源！衷心祝福两位订婚快乐！

其实突然得知 以前的好友 订婚了 在不久的将来就要携手步入婚姻教堂 自己心里..
不知不觉 我们都到了开始人生新阶段的年级 同龄的都已经在准备婚嫁或是已结婚生子 甚至个别比自己小的也已经结婚 再看回自己 连生活都不像样..
我看过老孙的青涩年华 走过一同的路 也一同睡过一张床铺 他现成为了晴姐的未婚夫
晴姐 虽然不常联系 但你还是我的好姐姐（虽然我到处叫别人姐 但感情不同！） 原本想把你订婚的事情LMS 不是炫耀也不是看他不爽 就是想告诉她你迎来了幸福
但后来想想 有些东西既然已经告别了 就应该更彻底的消失在生命里 现在的你已经有了可以为你撑腰的那个人 你也不用再逞强啦 有事没事就撒个娇（男生很吃撒娇这套的！孙也不例外~）做个任性的小女生
我们仨 相遇相识相知 也足够对得起存在于十七区二号楼的那个拐角了 最后 再祝你们早日成婚 白头偕老！

吴小姐写给孙先生的订婚情书

致孙先生的订婚情书

亲爱的孙先生:

    今天是我们在一起的第1200天，今天也是你陪我过的第四个生日。
    你曾对我说过无数次：吴老师，嫁给我吧！是的，今天我们终于跨越700多公里的距离、九个小时的车程、近20度的温差真正地成为一家人了。我成绩问过你喜欢我什么，你一时说，喜欢我的可爱；一时又肤浅地说，你喜欢我的美色，但这还有后半句，你说你还喜欢我的冒险和有趣，想要跟我一起去探索这个新奇的世界。于是我想，我喜欢你什么呢？喜欢你身上的傻气，喜欢你为了让我拍到好看的照片，去擦干净玻璃窗，喜欢你愿意在近40度的夏天正午带我去马兰的那片向日葵地为我拍照，只因为下班之后的向日葵会垂头丧气。
    谢谢你对我的包容与宠爱，让我永远像个公主。即使今天过后，我们也会面对生活中的柴米油盐、一地鸡毛，但一想到今后的人生伴侣是你，我对未来充满了向往。即使以后我们正式结为夫妻了，要远嫁到你家里，如果婚后会因为糟糕的情绪而抱怨抱怨，但请你放心，那都不是真话。余生瑶瑶，我想和你慢慢相爱。


2023 . 04 . 26
永远爱你的吴女士

这段时间各种忙 除了去参加朋友的婚礼那两天算的上休息了一会
早八 有时还工作到凌晨才下班回家 下班后的空闲时间几乎都拿来敲主题 更新布柒糖 有时倦了或是没思路了 就看看书 甚至连游戏都没打了
这好像很充实 忙碌起来就好像不会再有别的心思了 并且也会觉得时间过得飞快

前段时间因为作息 脸上一直长痘 好不容易调整过来了 痘消下去了 现在左下颚的最后的那个智齿长出来顶到肉了 导致现在吃啥都没胃口 主要是一直痛到烦
并且今天更严重了 左半边的脸都在隐隐作痛 看起来都像肿起来了似的
再加上最近身体上不适感越来越重 又老忘吃药（多亏娜儿时不时提醒我吃药 不然就说再见了） 导致情绪经常错乱反扑..
真是难过的事一件接一件 本以为雨过天晴 没想到一下子乌云密布下起了雷暴

最后..写到这 就提下娜儿吧 （杵在电脑前不知从何写起..）
说起来算是她把我从鬼门关拉回来 称得上是我的救命恩人了 好几次送我去医院的都是她 彻夜陪伴不离 有感动却又无可奈何
我心里的独白就是：这么好的女孩 我..不想耽误她 自己本就是烂人一个 我何德何能

三月初 因为工作问题需要在上海一段时间 当时有犹豫过要不要告诉她 并询问她会不会和我一起前往上海生活几个月
一方面是考虑到自己第一次要去那么远的地方工作 还不知什么时候才能结束回来 还有一方面的原因是害怕孤单 独孤 毕竟在上海没有朋友在附近 想找个人聊聊天 吃吃饭都没有
拿不定主意的我和朋友聊了一翻 还是决定告诉她 但其实内心还是想她愿意陪我去的 好在就是她知道后还是没有拒绝

一同生活的这段时间 有意见不合不愉快 也有大吵小闹过 但还是很快的化解和好了（这里不得不提一句 最懂狮子的还得是狮子）
狮子嘛 免不了喜欢各种吃 这不 就这两个月 快胖个小十斤了 两吃货…
慢慢的在习惯这边的生活 反倒不想回去了 并且这个想法还不约而同的一致了 当时还在计划着找新房子 搬到新家里去
这四个月以来 她啊 以朋友的身份陪我度过了一个又一个难熬的夜晚 每天都想着法让我过得开心起来
陪着我去看山 看海 看世界 去我想去的地方 但却委屈了她自己 每天在家里等着我下班 带她去玩去吃东西 哪怕是不知道干啥去也要让我开车带她兜风 其实我知道 只是为了不让我自己一个人独处 会感到孤独

上个星期 我突然就想放弃留在上海的想法了 我纠结了很久 朋友也说 如果不喜欢 感觉到压抑就回来 事在人为 但也提醒我说 要跟娜好好商量 好好说
考虑了好几天 都不知如何开口去提这件事情 结果 前几天的一个晚上 娜：我们聊会天吧！聊到天亮的那种，我有很多事想跟你说；娜好像看出了我有事要跟她说 也猜到了我的心思

“我不回去了，但是等你工作结束了，回深圳了，就没人管着你了，要照顾好自己，少喝酒！我可是会回去突击检查的！跟你说！”
这晚我们彻夜未眠 长谈 互相袒露这两个月以来的情绪 相互理解 相互包容 就如同前端时间网上里的那个视频一样 这种方式的交流 确实会让双方都舒坦 理解

]]> 生活随笔 封の唠叨 https://meuicat.com/posts/df3bbe9a.html#disqus_thread 日常打理的那些事 https://meuicat.com/posts/13ed02fa.html https://meuicat.com/posts/13ed02fa.html Fri, 21 Apr 2023 11:07:51 GMT 男生也得精致些；记事碎碎念~ 前言

本文不是恰饭文！是在记录！也分享给有需要的友友们
主要是因为上一两年根本没注意自己的皮肤状态，最近突然猛的爆豆，烦得很
加上以前用的护肤品那些，老早之前就丢了，搞得现在一个一个漫无目的的重新找，就更烦了
所以，仅是在记录一下，防止以后又忘了…（脑子不够用，经常健忘..）

在学生时代时，算是有容貌焦虑吧，各种方面打理自己
尝试过改变穿衣风格，以前穿的都是修身类的衣服，就换了换，尝试了休闲、宽松类的；
也在各平台看一些美妆博主的视频，学习学习日常护肤；
还自己尝试摸索着改变下发型，买了个小夹板、发蜡发胶，熟能生巧

亲身证明，一个人被嫌弃外貌，不可怕，可怕的是不行动反而一直陷入容貌焦虑里自我自我放弃
做啥都不能懒惰、自我怀疑，就如日常护肤，就算不是天天护肤，也得隔一段时间护一下肤
对比图就不放了，以前是真的low..看不下去..（要脸..）☹️

👔 穿搭

个人偏向于休闲，一般以素色为主，低饱和色系；
如米色、白色、灰色、蓝色等偏纯色系，整体干净舒服，不易出错，很少会选有条纹、多花色的

从年龄来说，轻熟风比韩系风格会更适合年纪大一点的，韩系风格更加适合年轻人，从穿着频率来说，喜欢轻熟风的人会更多一些，应为门槛比较低，不挑身型，适用上班通勤这样子
轻熟风有点综合商务感与休闲时尚感，会基础很多，适合普遍大众，年轻一点的哥们或者成熟大哥都合适，不挑人
韩系风格的话，在叠穿上显得更加有设计感；女生较多喜欢韩风
总结一下，轻熟风包含韩系，有韩系元素，所以说有些效果，只要上下搭配得当，穿起来没多大差别

我关注の那些淘宝店铺

已经超久没买过衣服，淘宝仿佛都被丢进冷宫了，好在以前买过的店都还没倒闭

方少男装 - 86FANG DEPT
首推！！！17年关注到现在，质量嘎嘎棒！已经在他们家买了不下十余次
兔先森的小铺
还不错，可以入手几件
蒙恰恰
这家的嘻哈宽松衫还挺不错的，回购一两次了，店铺其他的就一般
暴躁小沈
男女装都有，关注可以冲冲
第四十九天
关注收藏老久了，可以冲
ARTANNIE
这家店码死，超喜欢他们家的风格，以前经常在这买的衣服，还推荐给了我好几个朋友
蒙马特
关注收藏直接冲，闭着眼买都OMG，情侣的嘎嘎起飞
港仔文艺男
他们家的裤子真的挺不错！挺不错！！挺不错！！！
OOTD
最近的新宠，可以尝试的冲，感觉还行~
猪zhu02
上一年中旬买过几件，挺便宜的，适合一次性穿，像去容易弄脏衣服的场合
入手的一些上衣
打底外套单穿
入手的一些裤子
长裤宽裤

Tips：
搭配的小细节，就是小配饰了，配饰是整套搭配中占比最小但却容易出彩的单品
可选帽子、发带、眼镜、项链、手表、戒指、服饰挂件，择其二进行搭配

👦 发型

前段时间网上还流传着一句话：被爱的前提是颜值，漂亮是爱情的入场卷
首先，第一眼看的是外观，如果外观都入不了眼，何必再进展下一步呢？就算长得一般，那也是靠个人气质，男女都一样

头可断发型不能乱！做发型前后,大概就是 黄渤 和 胡歌 的区别了
所以说是可以直接影响到颜值的，是否丧失优先择偶权就在这上面了

坍塌的发型和有纹理感的发型，给人的感觉真的是天差地别
日常打理发型也不难，刚开始耗费的时间是会久一些，可熟能生巧嘛
我现在每天早晨出门前，花个三到五分钟，用夹板烫一烫，给人的感觉就是精神一整天
当然了，要出席一些重要的场合，做发型、发蜡、定型、发胶持久定型，打理头发的时间会多十几二十分钟

夹板发蜡发胶
日常预热两分钟，160度，一小撮一小撮的抓起头发，夹板按照波浪形烫//
赴约预热三分钟，180度，抓起小撮头发，夹板按照波浪形烫，发根处需要定型，烫的时间多个五六秒，在发尾处向外翻定型少量发蜡用指尖抹开抹匀，再均匀的抓在发根、发中段处少量多次喷在头发表面，再用手抓出些许纹理
在用的产品
夹板发蜡发胶洗发水

买夹板最好是选温度可调节的，温度太低的不易定型，温度太高会损伤发质 ⚠️

题外话：
今年年初的时候，想着换个发型，会有个好心情，就倒腾了个后侧分
现在很痛苦的是，我发质是属于那种粗硬的，现在想弄回以前的微分刘海，却回不去了…

🧴 护肤

男生护肤不丢脸！重要的是自己怎么想，想要精致的自己，还是想一直按照别人的看法去活着
想做让人嫌弃的 油腻中年男 亦或是 精致小帅哥，都取决于自己怎么去想，去不去行动

男士护肤品不是智商税，真正的智商税是把男生护肤妖魔化！！！
男生不需要走 贵妇路线，不需要把洗面奶-肌底液-保湿水-乳液-精华-面霜-眼霜-贴片面膜全用上；一整套kuakua上脸，男生皮肤吃不吃得消都是一回事 😅
用我的亲身经验来说，男生护肤没那么复杂，就简简单单三加一：日常清洁 加 洁面控油 - 爽肤水补水 - 乳液保湿 就完事了

日常清洁

可以不用天天护肤，但日常清洁还是要的；至少一日一次使用洗面奶洗漱
根据自己的目前肤质选一款适合自己的洗面奶，有善改变后，在选一款适合的洗面奶维持状态即可

我在用的洗面奶
洗面奶
日常
改善期
爆痘期

精致小Tips：
每日刮胡子必不可少，也可隔日刮一次；总之这是个小细节
个人比较喜欢手刮，刮得干净；一般用洗面奶洗脸的时候，就着泡沫刮

我新入手的刮胡刀：

手刮YYDS

护肤指南

我个人是隔日护一次肤，晚上洗澡时，用洗面奶洗脸，洗完澡后再上护肤二重曲 爽肤水 和 乳液，拍完爽肤水再上乳液，就完事~

对比一下了五年前、一年前以及现在的皮肤状态，完全就是U形走向，现在基本是被打回原形了，回炉重造算是..
更要命就是以前好用的那些护肤品要么忘了是什么，要么就是找不到产品了.. 😭
（没有对比图..因为没眼看…）

护肤关注の淘宝店铺

如风美妆
18年关注到现在！是在学校时一位女同学推荐给我的！这家店上的一些产品都挺不错~
御泥坊旗舰店
买过好几次他们家的精华和面膜，嗯！不错！推荐一波~
uno吾诺旗舰店
吾诺家洗面奶忠实用户，冬天他们家的面霜巨好用
无印良品MUJI
用过无印的水和乳，都还不错，可以考虑入手试试
用过的护肤产品
爽肤水乳液精华
面霜眼霜面膜

战痘神器：

题外话：
像面霜和眼霜还有面膜是可选的，日常护理的好，不用也是可以的
眼霜是针对熬夜，黑眼圈重的哥们，睡前用一用还是可以的，又不碍事；面霜呢，在冬天就尤为重要，我反正只在冬天用面霜，首推UNO家的
最后是关于面膜！别再听 男生用面膜很娘 、 男生不需要美白 这种鬼话了，说这些话的人都是你变帅路上的 绊脚石 ！！！
真正的事实是：皮肤白的男生更容易吸引女孩们的注意，更能被女生记住！
又不是天天敷面膜，偶尔敷一敷也挺不错~

]]> 闲聊杂谈 封の唠叨 https://meuicat.com/posts/13ed02fa.html#disqus_thread 随笔 · 封 https://meuicat.com/posts/78f637a0.html https://meuicat.com/posts/78f637a0.html Wed, 12 Apr 2023 17:53:00 GMT 记事碎碎念 相爱的两个人 始终无法走到最后吗

他们 相识 十一年 相恋 八年
校园 再到 职场 郎才女貌 天作之合
互勉鼓励打气 都有着属于自己的事业
她 创业 事业刚起步
她说 其实是希望另一半能支持 能陪伴着的
她说 我永远相信天道酬勤 除了爱情

他们 相识 六年
校园恋情 并给结尾画上圆满的句号
他说 有内疚 也有遗憾
他说 单亲的阻碍 能克服
他说 再谈希望是能携她之手步入婚姻 偕老
他说 后面的路变得迷茫了 好像很累 好像不会走了

她说 是有遗憾 但岁月变迁 也就没什么了
她说 现在做不到 没关系 我会陪着
她说 不喜欢异地 但如是他 我可以
她说 不要一个人死脑筋 转牛角尖 想那些有的没的
她说 是我向他反复确认 他反复给予我肯定的选择 但他现在却….

习惯 的定义是什么呢
是习惯了到某一时间就和对方着打电话 听着对方那头的声音入睡
还是习惯着每天睡醒第一件事还有睡前最后一件事 就是给对方发送一句 早安和晚安
又或者是 平日里互相分享的那些点点滴滴的习惯
习惯了委屈了会有对方哄着 习惯了可以随时跟对方撒娇卖萌 习惯了有对方宠着可以肆无忌惮的作弄

可为什么偏偏已经习惯这些小习惯后 对方突然说 累了 要走了 没有以后了 要把一切都推回去了

所以爱情的本质到底是什么呢
陪着走过了最难熬的时候 即将迎来正午的阳光 你却悄然离去
难道一个人的出现 只是为了陪着走过一段短暂而又美好的时光吗

自以为看透了爱情 其并不然
好像我所作下的孽又重了一番

]]> 生活随笔 封の唠叨 https://meuicat.com/posts/78f637a0.html#disqus_thread 布柒糖FM项目进展报告 https://meuicat.com/posts/f7a0daf0.html https://meuicat.com/posts/f7a0daf0.html Tue, 11 Apr 2023 11:16:06 GMT 关于'布柒糖'的最新阶段性报告 前言

我呢 在学生时代喜欢瞎捣鼓 啥吸引到我就日以继夜的去研究
吃过亏也赶上过红利期 譬如14、15年红极一时的火星WAP自助建站 也有幸参与其中

21年在机缘巧合下 布柒糖的前身iCat诞生了

起初是因为一朋友迷上了广播剧叫《偷偷藏不住》 让我帮忙看看能不能下载爬到电脑里方便上班摸鱼
可别说 幸好以前迷恋研究过Python 还真能行 按照我朋友提供的广播剧清单全给爬了下来
随着硬盘里的各种广播剧多了起来 想着物尽其用 就随手放在了微信公众号（吃肉的猫）上 想着能帮助到有需要的友友们

2021年05月16日 我们见面了
但好景不长 第一次接触广播剧 还有这些自媒体平台 也没有完善、长远的运营策略
最关键的是没有版权意识 和并没真正搞懂平台的规则 接连的被某耳官方举报
第一个微信公众号卒于2022年1月19日

对于一个刚破万粉大关的公众号却被封禁 并且当时并没有任何的备用联系方式
很受挫 且无力 虽然凭着新的微信公众号（爱吃肉的猫）账号名 回流的粉丝少之又少
在新账号的运营模式下 改变了挺多的策略方式
有新建QQ群、QQ频道和微信群以防再次失联 也有采用在线听的方式防止公众号再次被封禁（在线听已弃用 暂不维护）

22年底 对于个人状态不佳 并且布柒糖FM项目源代码的丢失 萌生过全面关站的想法
但看到群里许多友友们的鼓励 还是没狠下心
于公于私 都在告诫自己 会值得的 会被需要的

启航

2023年03月24日 携手重新启航
iCat并不是我个人的 是属于每一位一直支持iCat的友友

iCat - 布柒糖FM
广播剧 | 漫画 | 韩BL | 小说 | 知乎盐选 等

24日 提起了布柒糖FM整站重构计划 iCat 布柒糖FM 1️⃣
一番提议后 确定了布柒糖今后的主要方向和大致版块

布柒糖 一览

版块划分

暂未实行 待补充
最后更新时间：2023-04-11 22:31

]]> 我的项目 封の唠叨 https://meuicat.com/posts/f7a0daf0.html#disqus_thread 清明路雨纷纷 https://meuicat.com/posts/70a617f.html https://meuicat.com/posts/70a617f.html Wed, 05 Apr 2023 07:18:24 GMT 扫个墓却遇上"甲流" 四月一 老天也算作美 全程并没下过一滴雨
二话不说变成烧香小能手 一把一把的烧 咵咵的插上去
足足四个小时 三座山 十一捆香 一万五千步 酣畅淋漓 但也疲惫不堪

也不知道到底是有两年没回去祭祖 导致老祖见到不悦 亦或是近期作息问题导致身体素质逐渐变差
出汗又受了凉 再加上晚上吃饭时喝了一杯不知道是什么果子酿的白酒
不时就感觉全身超级累 上眼皮似厚重的卷帘 我醉欲眠

七个小时 被渴醒 突然发现全身酸痛 犹如有人在用锤子无时无刻的敲打着每一寸肌肉 并且还时不时来晃几下脑子 让我头昏欲裂
没办法 强撑着下楼喝水 找点东西填填肚 毕竟谁能保证一辈子不会生病呢
可谁成想后半段的睡眠 简直让我痛不欲生 根本睡不好觉 全身酸痛使得不管什么姿势躺着都不舒服 即使满身大汗 也不敢有掀开被子的想法
更离谱的是 好不容易睡着了 意识还能感受到身体传来的不适感 真的是要了我这条老命了

次日一早 依然是被”累”醒 人嘛 刚睡醒时 身体上不适的感觉会被放大数倍 我睁着个眼 盯着天花板一个多钟才缓过来
好不容易可以吃点好吃的 却又发现嘴里蹦出许久不见的口腔溃疡 我的内心真的崩溃了 三个多月不见 一来来三处
真的在想在怀疑是不是做了什么孽 报应来了 睡不好又吃不香 喵的..

四天了 虽然已快痊愈 但喉咙一直隐隐作痒 这搁好几个月前新冠时期 免不了被拉去做核酸…

寒食百 四又六 深礼 欢喜信受 作礼而去

]]> 生活随笔 封の唠叨 https://meuicat.com/posts/70a617f.html#disqus_thread TA - 仲夏夜的荒原 https://meuicat.com/posts/1f1f09d7.html https://meuicat.com/posts/1f1f09d7.html Thu, 23 Mar 2023 03:51:20 GMT 记事碎碎念 凌晨两点 辗转反侧
想着刷刷博友的文章 酝酿下睡意 却使陷入沉思

时格'Blog - 她
记录一下我们的故事吧，我怕再不记录就永远错过并忘记了。

我留言道：
不提遺憾卻處處都是遺憾的隱晦..
已經一年多啦 還遺憾嗎

我的情窦初开是在小学
我 四年级 乐美和 美画班的小徒弟
在美画班的隔壁 便是书法班 而她正是其一员
偶然的一次机会 认识到了我此生的 白月光

说来也那么巧 其实比这更早我们就已经见过面了
在一次聊天的过程中 才得知 在督委会上 给我颁队徽的年级长就是她

此后 我们便一起探讨 作画 学习 进步
在五年级初 年级重新编班 很凑巧的我们成为了同一个班级的同学 并且还是同桌
但也有坎坷 是年少的羞涩 也是小时的内向
那时 黄林旭 胡森成 是我为数不多的挚友
却让我怎么都没想到是的 小胡向我求援 说喜欢上了她
说实在的 我已经忘记当时的心情是怎样的了
但确确实实 这是我的那份遗憾

这么多年过去 也有试图在那零碎的信息里找寻她的消息
但都石沉大海似 并没有半点可用信息

曾经一朋友问过我 她又不是我的初恋 那么执着干嘛
那段时光幼稚又美好 单纯且珍贵的我们 不该被遗忘
是我心里的好女孩 是年少的心动 是仲夏夜的荒原 割不完烧不尽 长风一吹 野草就连了天

]]> 生活随笔 封の唠叨 https://meuicat.com/posts/1f1f09d7.html#disqus_thread 重构记录 - 4 https://meuicat.com/posts/edc13bd6.html https://meuicat.com/posts/edc13bd6.html Sat, 18 Mar 2023 16:37:07 GMT 从零重构本站所有内容；自用魔改记录~

📚 文档目录

🚀 搭建教程 | 1 - 📑 前置教程 | 2 - 🎈 主题调整 | 3 - ✨ 魔改教程 | 4 - 🐈 重构自用数据记录

本篇教程基于 Hexo 6.3.0 & Butterfly 4.9.0
为博主的重构魔改日记，以防自己日后因魔改迷失所做记录 📝

导航栏魔改美化

Butterfly的魔改教程：导航栏魔改美化
魔改一下博客导航栏居中显示，以及PE端的菜单栏样式

loading加载动画

Butterfly的魔改教程：loading加载动画
iCat版Logo加载动画；内附旧版Heo样式魔改教程，以及胶囊加载

语雀同款链接卡片

效果预览

爱吃肉的猫
有肉有猫有生活.

创建数据

  • 创建 [blogRoot]/themes/butterfly/scripts/tag/link.js 文件，并新增以下内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/*
 * link
 * {% link url,title,favicon,desc %}
 * {% link 链接,标题,图标,介绍 %}
 */

'use strict'

let defaultIcon = '<svg t="1670307855063" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19066" width="200" height="200"><path d="M504.064 516.608m-384.256 0a384.256 384.256 0 1 0 768.512 0 384.256 384.256 0 1 0-768.512 0Z" fill="#009CF5" p-id="19068"></path><path d="M746.112 270.464L472.448 485.12l63.104 63.104L750.08 274.56c2.304-2.688-1.28-6.144-3.968-4.096z" fill="#FF4C3A" p-id="19069"></path><path d="M262.016 762.752l273.664-214.528-63.104-63.104-214.656 273.536c-2.176 2.688 1.28 6.144 4.096 4.096z" fill="#FFFFFF" p-id="19070"></path><path d="M505.216 155.136c-3.2 0-5.888 2.56-5.888 5.888v53.504c0 3.2 2.56 5.888 5.888 5.888s5.888-2.56 5.888-5.888v-53.504c-0.128-3.2-2.688-5.888-5.888-5.888zM442.368 160.512c-3.2 0.512-5.376 3.584-4.736 6.784l9.344 52.736c0.512 3.2 3.584 5.376 6.784 4.736 3.2-0.512 5.376-3.584 4.736-6.784l-9.344-52.736c-0.512-3.2-3.584-5.376-6.784-4.736zM396.288 234.368c1.152 3.072 4.48 4.608 7.552 3.456 3.072-1.152 4.608-4.48 3.456-7.552l-18.304-50.304c-1.152-3.072-4.48-4.608-7.552-3.456-3.072 1.152-4.608 4.48-3.456 7.552l18.304 50.304zM348.928 257.408c1.664 2.816 5.248 3.712 7.936 2.176s3.712-5.248 2.176-7.936l-26.752-46.336c-1.664-2.816-5.248-3.712-7.936-2.176-2.816 1.664-3.712 5.248-2.176 7.936l26.752 46.336zM306.304 288.256c2.048 2.432 5.76 2.816 8.192 0.768 2.432-2.048 2.816-5.76 0.768-8.192l-34.432-40.96c-2.048-2.432-5.76-2.816-8.192-0.768-2.432 2.048-2.816 5.76-0.768 8.192l34.432 40.96zM269.696 326.144c2.432 2.048 6.144 1.792 8.192-0.768 2.048-2.432 1.792-6.144-0.768-8.192l-40.96-34.432c-2.432-2.048-6.144-1.792-8.192 0.768-2.048 2.432-1.792 6.144 0.768 8.192l40.96 34.432zM193.792 342.912l46.336 26.752c2.816 1.664 6.4 0.64 7.936-2.176 1.664-2.816 0.64-6.4-2.176-8.064L199.552 332.8c-2.816-1.664-6.4-0.64-7.936 2.176-1.664 2.688-0.64 6.272 2.176 7.936zM168.32 399.488l50.304 18.304c3.072 1.152 6.4-0.512 7.552-3.456 1.152-3.072-0.512-6.4-3.456-7.552l-50.304-18.304c-3.072-1.152-6.4 0.512-7.552 3.456-1.152 3.072 0.384 6.4 3.456 7.552zM207.872 457.344l-52.736-9.344c-3.2-0.512-6.272 1.536-6.784 4.736-0.512 3.2 1.536 6.272 4.736 6.784l52.736 9.344c3.2 0.512 6.272-1.536 6.784-4.736 0.512-3.2-1.536-6.272-4.736-6.784zM201.984 509.568H148.48c-3.2 0-5.888 2.56-5.888 5.888 0 3.2 2.56 5.888 5.888 5.888h53.504c3.2 0 5.888-2.56 5.888-5.888 0-3.2-2.56-5.888-5.888-5.888zM205.44 562.176l-52.736 9.344c-3.2 0.512-5.376 3.584-4.736 6.784 0.512 3.2 3.584 5.376 6.784 4.736l52.736-9.344c3.2-0.512 5.376-3.584 4.736-6.784s-3.584-5.248-6.784-4.736zM217.856 613.376l-50.304 18.304c-3.072 1.152-4.608 4.48-3.456 7.552 1.152 3.072 4.48 4.608 7.552 3.456l50.304-18.304c3.072-1.152 4.608-4.48 3.456-7.552-1.152-3.072-4.48-4.608-7.552-3.456zM238.976 661.504l-46.336 26.752c-2.816 1.664-3.712 5.248-2.176 8.064 1.664 2.816 5.248 3.712 8.064 2.176l46.336-26.752c2.816-1.664 3.712-5.248 2.176-8.064-1.664-2.816-5.248-3.712-8.064-2.176zM268.16 705.408l-40.96 34.432c-2.432 2.048-2.816 5.76-0.768 8.192 2.048 2.432 5.76 2.816 8.192 0.768l40.96-34.432c2.432-2.048 2.816-5.76 0.768-8.192-1.92-2.56-5.632-2.816-8.192-0.768zM304.512 743.424l-34.432 40.96c-2.048 2.432-1.792 6.144 0.768 8.192 2.432 2.048 6.144 1.792 8.192-0.768l34.432-40.96c2.048-2.432 1.792-6.144-0.768-8.192-2.304-1.92-6.016-1.664-8.192 0.768zM347.008 774.656l-26.752 46.336c-1.664 2.816-0.64 6.4 2.176 7.936 2.816 1.664 6.4 0.64 8.064-2.176l26.752-46.336c1.664-2.816 0.64-6.4-2.176-7.936-2.816-1.536-6.4-0.64-8.064 2.176zM394.24 798.08l-18.304 50.304c-1.152 3.072 0.512 6.4 3.456 7.552 3.072 1.152 6.4-0.512 7.552-3.456l18.304-50.304c1.152-3.072-0.512-6.4-3.456-7.552-3.072-1.152-6.528 0.384-7.552 3.456zM440.192 872.32c3.2 0.512 6.272-1.536 6.784-4.736l9.344-52.736c0.512-3.2-1.536-6.272-4.736-6.784-3.2-0.512-6.272 1.536-6.784 4.736l-9.344 52.736c-0.64 3.2 1.536 6.272 4.736 6.784zM502.912 878.08c3.2 0 5.888-2.56 5.888-5.888v-53.504c0-3.2-2.56-5.888-5.888-5.888-3.2 0-5.888 2.56-5.888 5.888v53.504c0 3.2 2.688 5.888 5.888 5.888zM549.632 815.232l9.344 52.736c0.512 3.2 3.584 5.376 6.784 4.736 3.2-0.512 5.376-3.584 4.736-6.784l-9.344-52.736c-0.512-3.2-3.584-5.376-6.784-4.736-3.2 0.512-5.248 3.584-4.736 6.784zM600.832 802.816l18.304 50.304c1.152 3.072 4.48 4.608 7.552 3.456 3.072-1.152 4.608-4.48 3.456-7.552L611.84 798.72c-1.152-3.072-4.48-4.608-7.552-3.456-3.072 1.152-4.608 4.48-3.456 7.552zM649.088 781.696l26.752 46.336c1.664 2.816 5.248 3.712 8.064 2.176 2.816-1.664 3.712-5.248 2.176-8.064l-26.88-46.336c-1.664-2.816-5.248-3.712-8.064-2.176-2.816 1.664-3.712 5.248-2.048 8.064zM692.864 752.384l34.432 40.96c2.048 2.432 5.76 2.816 8.192 0.768 2.432-2.048 2.816-5.76 0.768-8.192l-34.432-40.96c-2.048-2.432-5.76-2.816-8.192-0.768-2.56 2.048-2.816 5.76-0.768 8.192zM730.88 716.032l40.96 34.432c2.432 2.048 6.144 1.792 8.192-0.768 2.048-2.432 1.792-6.144-0.768-8.192l-40.96-34.432c-2.432-2.048-6.144-1.792-8.192 0.768-1.92 2.432-1.664 6.144 0.768 8.192zM762.112 673.664l46.336 26.752c2.816 1.664 6.4 0.64 8.064-2.176 1.664-2.816 0.64-6.4-2.176-7.936L768 663.552c-2.816-1.664-6.4-0.64-8.064 2.176-1.536 2.688-0.64 6.272 2.176 7.936zM785.536 626.432l50.304 18.304c3.072 1.152 6.4-0.512 7.552-3.456 1.152-3.072-0.512-6.4-3.456-7.552l-50.304-18.304c-3.072-1.152-6.4 0.512-7.552 3.456-1.152 3.072 0.384 6.4 3.456 7.552zM800.256 575.872l52.736 9.344c3.2 0.512 6.272-1.536 6.784-4.736 0.512-3.2-1.536-6.272-4.736-6.784l-52.736-9.344c-3.2-0.512-6.272 1.536-6.784 4.736-0.512 3.2 1.536 6.272 4.736 6.784zM800.256 517.76c0 3.2 2.56 5.888 5.888 5.888h53.504c3.2 0 5.888-2.56 5.888-5.888 0-3.2-2.56-5.888-5.888-5.888h-53.504c-3.328 0-5.888 2.56-5.888 5.888zM802.688 471.04l52.736-9.344c3.2-0.512 5.376-3.584 4.736-6.784-0.512-3.2-3.584-5.376-6.784-4.736l-52.736 9.344c-3.2 0.512-5.376 3.584-4.736 6.784 0.512 3.2 3.584 5.248 6.784 4.736zM790.272 419.84l50.304-18.304c3.072-1.152 4.608-4.48 3.456-7.552-1.152-3.072-4.48-4.608-7.552-3.456l-50.304 18.304c-3.072 1.152-4.608 4.48-3.456 7.552 1.152 2.944 4.48 4.608 7.552 3.456zM769.152 371.584l46.336-26.752c2.816-1.664 3.712-5.248 2.176-7.936-1.664-2.816-5.248-3.712-8.064-2.176l-46.336 26.752c-2.816 1.664-3.712 5.248-2.176 8.064 1.664 2.688 5.248 3.712 8.064 2.048zM739.84 327.808l40.96-34.432c2.432-2.048 2.816-5.76 0.768-8.192-2.048-2.432-5.76-2.816-8.192-0.768l-40.96 34.432c-2.432 2.048-2.816 5.76-0.768 8.192 2.048 2.56 5.76 2.816 8.192 0.768zM703.488 289.664l34.432-40.96c2.048-2.432 1.792-6.144-0.768-8.192-2.432-2.048-6.144-1.792-8.192 0.768l-34.432 40.96c-2.048 2.432-1.792 6.144 0.768 8.192 2.432 2.048 6.144 1.792 8.192-0.768zM661.12 258.56l26.752-46.336c1.664-2.816 0.64-6.4-2.176-7.936-2.816-1.664-6.4-0.64-8.064 2.176l-26.752 46.336c-1.664 2.816-0.64 6.4 2.176 7.936 2.816 1.536 6.4 0.64 8.064-2.176zM613.888 235.136l18.304-50.304c1.152-3.072-0.512-6.4-3.456-7.552-3.072-1.152-6.4 0.512-7.552 3.456L602.88 231.168c-1.152 3.072 0.512 6.4 3.456 7.552 3.072 1.024 6.4-0.512 7.552-3.584zM556.544 225.152c3.2 0.512 6.272-1.536 6.784-4.736l9.344-52.736c0.512-3.2-1.536-6.272-4.736-6.784-3.2-0.512-6.272 1.536-6.784 4.736l-9.344 52.736c-0.512 3.2 1.536 6.144 4.736 6.784zM273.536 290.432c2.432 2.432 6.528 2.432 8.96 0 2.432-2.432 2.432-6.528 0-8.96l-21.12-21.12c-2.432-2.432-6.528-2.432-8.96 0-2.432 2.432-2.432 6.528 0 8.96l21.12 21.12zM237.824 333.824c2.944 2.048 6.912 1.28 8.832-1.536 2.048-2.944 1.28-6.912-1.536-8.832l-24.448-17.152c-2.944-2.048-6.912-1.28-8.832 1.536s-1.28 6.912 1.536 8.832l24.448 17.152zM183.04 370.176l27.136 12.672c3.2 1.536 7.04 0.128 8.448-3.072 1.536-3.2 0.128-7.04-3.072-8.448l-27.136-12.672c-3.2-1.536-7.04-0.128-8.448 3.072-1.536 3.2-0.128 7.04 3.072 8.448zM194.688 423.68l-28.928-7.68c-3.456-0.896-6.912 1.152-7.808 4.48-0.896 3.456 1.152 6.912 4.48 7.808l28.928 7.68c3.456 0.896 6.912-1.152 7.808-4.48 0.896-3.456-1.152-6.912-4.48-7.808zM183.168 478.72l-29.824-2.56c-3.456-0.256-6.656 2.304-6.912 5.76-0.256 3.456 2.304 6.656 5.76 6.912l29.824 2.56c3.456 0.256 6.656-2.304 6.912-5.76 0.384-3.456-2.176-6.528-5.76-6.912zM181.504 535.04l-29.824 2.56c-3.456 0.256-6.144 3.456-5.76 6.912 0.256 3.456 3.456 6.144 6.912 5.76l29.824-2.56c3.456-0.256 6.144-3.456 5.76-6.912-0.256-3.456-3.328-6.016-6.912-5.76zM191.36 590.72l-28.928 7.68c-3.456 0.896-5.376 4.352-4.48 7.808 0.896 3.456 4.352 5.376 7.808 4.48l28.928-7.68c3.456-0.896 5.376-4.352 4.48-7.808-0.896-3.328-4.352-5.376-7.808-4.48zM207.232 644.224l-27.136 12.672c-3.2 1.536-4.608 5.248-3.072 8.448 1.536 3.2 5.248 4.608 8.448 3.072l27.136-12.672c3.2-1.536 4.608-5.248 3.072-8.448-1.408-3.2-5.248-4.48-8.448-3.072zM233.984 693.888l-24.448 17.152c-2.944 2.048-3.584 6.016-1.536 8.832 2.048 2.944 6.016 3.584 8.832 1.536l24.448-17.152c2.944-2.048 3.584-6.016 1.536-8.832-2.048-2.944-6.016-3.584-8.832-1.536zM310.912 775.552L293.76 800c-2.048 2.944-1.28 6.912 1.536 8.832 2.944 2.048 6.912 1.28 8.832-1.536l17.152-24.448c2.048-2.944 1.28-6.912-1.536-8.832-2.816-2.048-6.912-1.408-8.832 1.536zM349.184 840.704c3.2 1.536 7.04 0.128 8.448-3.072l12.672-27.136c1.536-3.2 0.128-7.04-3.072-8.448-3.2-1.536-7.04-0.128-8.448 3.072l-12.672 27.136c-1.408 3.2-0.128 6.912 3.072 8.448zM407.808 862.72c3.456 0.896 6.912-1.152 7.808-4.48l7.68-28.928c0.896-3.456-1.152-6.912-4.48-7.808-3.456-0.896-6.912 1.152-7.808 4.48l-7.68 28.928c-0.896 3.328 1.152 6.912 4.48 7.808zM469.376 874.112c3.456 0.256 6.656-2.304 6.912-5.76l2.56-29.824c0.256-3.456-2.304-6.656-5.76-6.912-3.456-0.256-6.656 2.304-6.912 5.76l-2.56 29.824c-0.256 3.584 2.304 6.656 5.76 6.912zM522.496 839.168l2.56 29.824c0.256 3.456 3.456 6.144 6.912 5.76 3.456-0.256 6.144-3.456 5.76-6.912l-2.56-29.824c-0.256-3.456-3.456-6.144-6.912-5.76-3.456 0.256-6.016 3.328-5.76 6.912zM578.176 830.976l7.68 28.928c0.896 3.456 4.352 5.376 7.808 4.48 3.456-0.896 5.376-4.352 4.48-7.808l-7.68-28.928c-0.896-3.456-4.352-5.376-7.808-4.48-3.328 0.896-5.376 4.48-4.48 7.808zM631.68 813.312l12.672 27.136c1.536 3.2 5.248 4.608 8.448 3.072 3.2-1.536 4.608-5.248 3.072-8.448l-12.672-27.136c-1.536-3.2-5.248-4.608-8.448-3.072-3.2 1.536-4.48 5.248-3.072 8.448zM681.344 786.688l17.152 24.448c2.048 2.944 6.016 3.584 8.832 1.536 2.944-2.048 3.584-6.016 1.536-8.832l-17.152-24.448c-2.048-2.944-6.016-3.584-8.832-1.536-2.944 1.92-3.584 5.888-1.536 8.832zM725.504 751.744l21.12 21.12c2.432 2.432 6.528 2.432 8.96 0 2.432-2.432 2.432-6.528 0-8.96l-21.12-21.12c-2.432-2.432-6.528-2.432-8.96 0-2.432 2.432-2.432 6.528 0 8.96zM763.008 709.76l24.448 17.152c2.944 2.048 6.912 1.28 8.832-1.536 2.048-2.944 1.28-6.912-1.536-8.832l-24.448-17.152c-2.944-2.048-6.912-1.28-8.832 1.536-2.048 2.816-1.408 6.784 1.536 8.832zM792.576 661.888l27.136 12.672c3.2 1.536 7.04 0.128 8.448-3.072 1.536-3.2 0.128-7.04-3.072-8.448l-27.136-12.672c-3.2-1.536-7.04-0.128-8.448 3.072-1.536 3.2-0.128 6.912 3.072 8.448zM813.44 609.536l28.928 7.68c3.456 0.896 6.912-1.152 7.808-4.48 0.896-3.456-1.152-6.912-4.48-7.808l-28.928-7.68c-3.456-0.896-6.912 1.152-7.808 4.48-0.896 3.456 1.024 6.912 4.48 7.808zM824.832 554.368l29.824 2.56c3.456 0.256 6.656-2.304 6.912-5.76 0.256-3.456-2.304-6.656-5.76-6.912l-29.824-2.56c-3.456-0.256-6.656 2.304-6.912 5.76-0.256 3.584 2.304 6.656 5.76 6.912zM826.624 498.176l29.824-2.56c3.456-0.256 6.144-3.456 5.76-6.912-0.256-3.456-3.456-6.144-6.912-5.76l-29.824 2.56c-3.456 0.256-6.144 3.456-5.76 6.912 0.256 3.456 3.328 6.016 6.912 5.76zM818.432 442.368l28.928-7.68c3.456-0.896 5.376-4.352 4.48-7.808-0.896-3.456-4.352-5.376-7.808-4.48l-28.928 7.68c-3.456 0.896-5.376 4.352-4.48 7.808 0.896 3.456 4.48 5.376 7.808 4.48zM800.768 388.992l27.136-12.672c3.2-1.536 4.608-5.248 3.072-8.448-1.536-3.2-5.248-4.608-8.448-3.072l-27.136 12.672c-3.2 1.536-4.608 5.248-3.072 8.448 1.536 3.072 5.248 4.48 8.448 3.072zM774.144 339.328l24.448-17.152c2.944-2.048 3.584-6.016 1.536-8.832-2.048-2.944-6.016-3.584-8.832-1.536L766.848 328.96c-2.944 2.048-3.584 6.016-1.536 8.832 1.92 2.816 5.888 3.584 8.832 1.536zM697.216 257.664l17.152-24.448c2.048-2.944 1.28-6.912-1.536-8.832-2.944-2.048-6.912-1.28-8.832 1.536l-17.152 24.448c-2.048 2.944-1.28 6.912 1.536 8.832 2.816 2.048 6.784 1.408 8.832-1.536zM658.944 192.512c-3.2-1.536-7.04-0.128-8.448 3.072l-12.672 27.136c-1.536 3.2-0.128 7.04 3.072 8.448 3.2 1.536 7.04 0.128 8.448-3.072l12.672-27.136c1.408-3.2 0-7.04-3.072-8.448zM600.192 170.496c-3.456-0.896-6.912 1.152-7.808 4.48l-7.68 28.928c-0.896 3.456 1.152 6.912 4.48 7.808 3.456 0.896 6.912-1.152 7.808-4.48l7.68-28.928c1.024-3.328-1.024-6.912-4.48-7.808zM534.912 201.6c3.456 0.256 6.656-2.304 6.912-5.76l2.56-29.824c0.256-3.456-2.304-6.656-5.76-6.912-3.456-0.256-6.656 2.304-6.912 5.76l-2.56 29.824c-0.256 3.456 2.304 6.528 5.76 6.912zM476.032 158.464c-3.456 0.256-6.144 3.456-5.76 6.912l2.56 29.824c0.256 3.456 3.456 6.144 6.912 5.76 3.456-0.256 6.144-3.456 5.76-6.912l-2.56-29.824c-0.256-3.456-3.328-6.016-6.912-5.76zM422.144 173.312c-0.896-3.456-4.352-5.376-7.808-4.48-3.456 0.896-5.376 4.352-4.48 7.808l7.68 28.928c0.896 3.456 4.352 5.376 7.808 4.48 3.456-0.896 5.376-4.352 4.48-7.808l-7.68-28.928zM376.448 219.776l-12.672-27.136c-1.536-3.2-5.248-4.608-8.448-3.072-3.2 1.536-4.608 5.248-3.072 8.448L364.8 225.28c1.536 3.2 5.248 4.608 8.448 3.072 3.2-1.536 4.608-5.376 3.2-8.576zM316.416 253.824c2.048 2.944 6.016 3.584 8.832 1.536 2.944-2.048 3.584-6.016 1.536-8.832l-17.152-24.448c-2.048-2.944-6.016-3.584-8.832-1.536-2.944 2.048-3.584 6.016-1.536 8.832l17.152 24.448z" fill="#FFFFFF" p-id="19071"></path></svg>'

function link(args) {
    args = args.join(' ').split(',');
    // 获取参数
    let url = (args[0] || '').trim(),
        title = (args[1] || '点击直达链接').trim(),
        favicon = (args[2] ? `<img src="${args[2]}" class="no-lightbox">` : defaultIcon).trim(),
        desc = (args[3] || '').trim()

    return `<a href="${url}" ${url.includes('http')?'target="_blank"':''} title="${title}" referrerPolicy="no-referrer" class="link_card"><div class="link_icon">${favicon}</div><div class="link_content"><div class="link_title">${title}</div>${desc?`<div class="link_desc">${desc}</div>`:''}</div></a>`
}

hexo.extend.tag.register('link', link, { ends: false })
  • 创建 [blogRoot]/themes/butterfly/source/css/_tags/link.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
.link_card
  display: flex
  margin: 10px 0
  color: var(--font-color) !important
  text-decoration: none !important
  background: var(--icat-background)
  border-radius: 8px
  border: var(--style-border)
  padding: 12px
  &:hover
    background: var(--icat-theme)
    color: white !important
  .link_icon,.link_content
    height: 4rem
  .link_icon
    img,svg
      height: 4rem
      width: 4rem
      border-radius: 6px !important
  .link_content
    margin-left: 1rem
    width: calc(100% - 6rem)
    overflow: hidden
    line-height: 1.5
    display: flex
    flex-direction: column
    justify-content: center
    .link_title
      font-weight: bold
      font-size: 1.2rem
    .link_title,.link_desc
      word-break: break-all
      overflow:hidden
      text-overflow: ellipsis
    &:not(:has(.link_desc)) .link_title
      display:-webkit-box
      -webkit-box-orient:vertical
      -webkit-line-clamp:2
    .link_desc
      opacity: .6
    .link_desc,&:has(.link_desc) .link_title
      white-space: nowrap

使用参数

1
2
3
4
5
6
7
8
9
10
11
<!-- 使用html是为了高亮代码，不必在意 -->
<!-- 参数如下： -->
{% link 链接,标题,图标,介绍 %}
<!-- 示例如下： -->
{% link https://meuicat.com/,MeuiCat,https://meuicat.com/media/favicon.ico,有肉有猫有生活. %}
<!-- 你也可以什么都不填，将会全部使用默认值，如下： -->
{% card %}
<!-- 你也可以省略部分内容，如下： -->
{% link https://meuicat.com/ %}
<!-- 位置在后面的参数不填的话可以直接省略，但是如果中间的不想填必须留空，如下： -->
{% link https://meuicat.com/,,,有肉有猫有生活. %}
参数描述默认值
链接如果连接中包含http则新标签打开，否则本标签页打开无
标题网站的标题点击直达链接
图标网站favicon链接
介绍网站的description无

个性定位欢迎语

Butterfly的魔改教程：个性定位信息
来给你的侧边栏添加个性定位信息吧

Ai文章摘要

让你的博客网站接入 TianliGPT ，使用基于 GPT-3.5 的文字摘要生成工具自动生成文章摘要
你只需要在博客中引入TianliGPT的服务支持，同时填写相应的参数即可

什么是TianliGPT

TianliGPT 是一个基于 GPT-3.5 的文字摘要生成工具
你可以将需要提取摘要的文本内容发送给TianliGPT，稍等一会他就可以给你发送一个基于这段文本内容的摘要

部署TianliGPT

  • 在 _config.butterfly.yml 主题配置文件中 inject 下的 head 和 bottom 分别引入 tianli_gpt.css 和 Key tianli_gpt.js
1
2
3
4
5
6
7
8
9
10
  ···

inject:
  head:
  - <link rel="stylesheet" href="https://cdn1.tianli0.top/gh/zhheo/Post-Abstract-AI@0.9/tianli_gpt.css"> # Ai摘要 - 样式
  bottom:
  - <script>let tianliGPT_postSelector = '\#post \#article-container';let tianliGPT_key = '你购买的Key';</script> # Ai摘要 - Key验证
  - <script src="https://cdn1.tianli0.top/gh/zhheo/Post-Abstract-AI@0.9/tianli_gpt.js"></script>  # Ai摘要 - 逻辑JS

 ···

Key购买

前往 张洪Heo 的 爱发电主页中购买，原价10元5万字符（Heo限量限时折扣9元）
请求过的内容再次请求不会消耗Key，可以无限期使用

购买完成后，添加机器人客服：2102916311，回复 /chat 你的key 你的博客地址注意保留最后的斜杠

1
2
3
例如：

/chat SICx6u******P64118hI https://meuicat.com/
直接请求openai：GPT-3.5部署时本地构建请求：HeoGPT使用专业的文章摘要生成AI：TianliGPT
扣费方式每次请求均需要费用，发送请求扣费，收到GPT发来的内容扣费在构建时支付费用，发送请求扣费，收到GPT发来的内容扣费✓ 部署后，在首次请求时支付费用，重复访问不扣费，key无余额后已生成的内容仍可用。发送请求扣费，收到的内容不扣费
请求速度要求中转服务器符合严苛的网络环境要求本地符合严苛的网络环境✓ 适用于全球任何国家
合规无无（需要额外人工审核）✓ 适用于中国大陆法规
防止恶意扣费容易被恶意盗刷，会扣除信用卡✓ 安全✓ 安全，key与网站绑定保证安全性，余额使用完后，已生成过的文章仍然可用，新文章业务停止
构建时间✓ 即时因为请求速度限制，首次部署需要消耗大量的时间✓ 即时，将生成时间分摊到用户访问网站中，全程无感知。让博客文章很多的博主也能轻松接入
文章更新✓ 可同步文章更新每次更新文章内容需要手动标记✓ 可同步文章更新
费用需要绑定国外信用卡，成本不可控，按照tocken双向计费需要绑定国外信用卡，成本不可控，按照tocken双向计费✓ 爱发电购买key，成本可控，按照字符单向计费
  • 查询余额 - 向机器人客服再次发送绑定时的内容，会返回你剩余的tocken额度
1
2
3
例如：

/chat SICx6u******P64118hI https://meuicat.com/

高级技巧

指定文章页面使用Ai

当主题存在其他页面和文章页面结构相同时，可以通过通配符url域名来实现只在指定域名中执行

例如：let tianliGPT_postURL = '*/blog/*';

只会在地址含有 /blog/ 的域名中执行（如：https://meuicat.com/blog/6/），避免非文章页面添加

  • 在 _config.butterfly.yml 主题配置文件中 inject 下的 bottom 引入的 Key 进行修改
1
2
3
4
5
6
inject:
  head:
    - ···
  bottom:
    - ···
    - <script>let tianliGPT_postURL = '*/blog/*'; let tianliGPT_postSelector = '\#post \#article-container';let tianliGPT_key = '你购买的Key';</script> # Ai摘要 - Key验证

提交字数限制

⚠️危险：更改此变量损失已消耗过的key，因为你提交的内容发生了变化

可以设置提交的字数限制，默认为1000字
这意味着每个文章最多消耗你1000字符 （因为只有提交扣费，生成文本不扣费）
你可以降低字符数来让扣费变得更少，也可以增加字符数让文章变得更准确
上限为5000，超过5000字符将被截断

例如：let tianliGPT_wordLimit = 1000;

  • 在 _config.butterfly.yml 主题配置文件中 inject 下的 bottom 引入的 Key 进行修改
1
2
3
4
5
6
inject:
  head:
    - ···
  bottom:
    - ···
    - <script>let tianliGPT_wordLimit = 1000; let tianliGPT_postSelector = '\#post \#article-container';let tianliGPT_key = '你购买的Key';</script> # Ai摘要 - Key验证

指定特定的文章使用Ai

如若只想在特定的文章只用Ai摘要，即不需要在 _config.butterfly.yml 主题配置文件中引入 CSS 和 JS
只需在文章页内容前加入以下内容即可

1
2
3
4
5
6
<link rel="stylesheet" href="https://cdn1.tianli0.top/gh/zhheo/Post-Abstract-AI@0.7/tianli_gpt.css">
<script>
let tianliGPT_postSelector = '\#post \#article-container';
let tianliGPT_key = '你购买的Key';
</script>
<script src="https://cdn1.tianli0.top/gh/zhheo/Post-Abstract-AI@0.7/tianli_gpt.js"></script>

本节技术支持

张洪Heo
如何让博客支持AI摘要，使用TianliGPT自动生成文章的AI摘要
GitHub
Post-Abstract-AI - 项目仓库

文章meta显示位置

给文章添加一个位置显示

创建数据

  • 新增 [blogRoot]/themes/butterfly/layout/includes/header/post-info.pug 页面内容
    （ + 号直接删除 即是正常缩进）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
          ···
          else
            - let data_type_update = theme.post_meta.post.date_type === 'updated'
            - let date_type = data_type_update ? 'updated' : 'date'
            - let date_icon = data_type_update ? 'fas fa-history' :'iconfont icat-calendar'
            - let date_title = data_type_update ? _p('post.updated') : _p('post.created')
            i.fa-fw.post-meta-icon(class=date_icon)
            span.post-meta-label= date_title
            time(datetime=date_xml(page[date_type]) title=date_title + ' ' + full_date(page[date_type]))=date(page[date_type], config.date_format)
+        span.post-meta-Publish-Location
+          span.post-meta-separator |
+          i.iconfont.icat-publish-location
+          span= page.publish_location || _p('未知')
      if (theme.post_meta.post.categories && page.categories.data.length > 0)
        span.post-meta-categories
          if (theme.post_meta.post.date_type)
        ···

使用方式

  • Post Front-matter 内加 publish_location 项
1
2
3
4
5
6
7
---
···

publish_location: 上海
---

<!-- 文章内容 -->

文章meta显示调整

PE端顶部文章meta居中显示，并调整添加位置后meta重新排序

  • 修改 [blogRoot]/themes/butterfly/layout/includes/header/post-info.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
        ···
        span.post-meta-Publish-Location
          span.post-meta-separator |
          i.iconfont.icat-publish-location
          span= page.publish_location || _p('未知')
-     if (theme.post_meta.post.categories && page.categories.data.length > 0)
-       span.post-meta-categories
-         if (theme.post_meta.post.date_type)
-           span.post-meta-separator |
-
-         each item, index in page.categories.data
-           i.iconfont.icat-categories.fa-fw.post-meta-icon
-           a(href=url_for(item.path)).post-meta-categories #[=item.name]
-           if (index < page.categories.data.length - 1)
-             i.fas.fa-angle-right.post-meta-separator

    .meta-secondline
+      if (theme.post_meta.post.categories && page.categories.data.length > 0)
+        span.post-meta-categories
+          if (theme.post_meta.post.date_type)
+
+          each item, index in page.categories.data
+            i.iconfont.icat-categories.fa-fw.post-meta-icon
+            a(href=url_for(item.path)).post-meta-categories #[=item.name]
+            if (index < page.categories.data.length - 1)
+              i.fas.fa-angle-right.post-meta-separator
      - let postWordcount = theme.wordcount.enable && (theme.wordcount.post_wordcount || theme.wordcount.min2read)
      if (postWordcount)
        span.post-meta-separator |
        span.post-meta-wordcount
          if theme.wordcount.post_wordcount
          ···
  • 修改 [blogRoot]/themes/butterfly/source/css/_layout/head.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
  ···
  #post-info
    position: absolute
    bottom: 100px
    padding: 0 8%
    width: 100%
    text-align: center

    +maxWidth900()
      bottom: 30px
-     text-align: left

  ···

  #post-meta
    color: var(--light-grey)
    font-size: 95%

-   +minWidth768()
-     > .meta-secondline
-       > span:first-child
-         display: none

    +maxWidth768()
      font-size: 90%

      > .meta-firstline,
      > .meta-secondline
-       display: inline
+        display: -webkit-inline-box

    .post-meta
      &-separator
-       margin: 0 5px
+        margin: 0 3px
+        padding-left: 5px
  ···

meta去除类文字

只想显示图标和数值，多余的文字就删了，看起来简洁

  • 修改 [blogRoot]/themes/butterfly/layout/includes/header/post-info.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
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
- let comments = theme.comments
#post-info
  h1.post-title= page.title || _p('no_title')
    if theme.post_edit.enable
      a.post-edit-link(href=theme.post_edit.url + page.source title=_p('post.edit') target="_blank")
        i.fas.fa-pencil-alt
        
  #post-meta
    .meta-firstline
      if (theme.post_meta.post.date_type)
        span.post-meta-date
          if (theme.post_meta.post.date_type === 'both')
            i.iconfont.icat-calendar.fa-fw.post-meta-icon
-            span.post-meta-label= _p('post.created')
            time.post-meta-date-created(datetime=date_xml(page.date) title=_p('post.created') + ' ' + full_date(page.date))=date(page.date, config.date_format)
            span.post-meta-separator |
            i.fas.fa-history.fa-fw.post-meta-icon
            span.post-meta-label= _p('post.updated')
            time.post-meta-date-updated(datetime=date_xml(page.updated) title=_p('post.updated') + ' ' + full_date(page.updated))=date(page.updated, config.date_format)
          else
            - let data_type_update = theme.post_meta.post.date_type === 'updated'
            - let date_type = data_type_update ? 'updated' : 'date'
            - let date_icon = data_type_update ? 'fas fa-history' :'iconfont icat-calendar'
            - let date_title = data_type_update ? _p('post.updated') : _p('post.created')
            i.fa-fw.post-meta-icon(class=date_icon)
-            span.post-meta-label= date_title
            time(datetime=date_xml(page[date_type]) title=date_title + ' ' + full_date(page[date_type]))=date(page[date_type], config.date_format)
        span.post-meta-Publish-Location
          span.post-meta-separator |
          i.iconfont.icat-publish-location
          span= page.publish_location || _p('未知')

    .meta-secondline
      if (theme.post_meta.post.categories && page.categories.data.length > 0)
        span.post-meta-categories
          if (theme.post_meta.post.date_type)

          each item, index in page.categories.data
            i.iconfont.icat-categories.fa-fw.post-meta-icon
            a(href=url_for(item.path)).post-meta-categories #[=item.name]
            if (index < page.categories.data.length - 1)
              i.fas.fa-angle-right.post-meta-separator
      - let postWordcount = theme.wordcount.enable && (theme.wordcount.post_wordcount || theme.wordcount.min2read)
      if (postWordcount)
        span.post-meta-separator |
        span.post-meta-wordcount
          if theme.wordcount.post_wordcount
            i.far.fa-file-word.fa-fw.post-meta-icon
-            span.post-meta-label= _p('post.wordcount') + ':'
            span.word-count= wordcount(page.content)
            if theme.wordcount.min2read
              span.post-meta-separator |
          if theme.wordcount.min2read
            i.far.fa-clock.fa-fw.post-meta-icon
-            span.post-meta-label= _p('post.min2read') + ':'
            span= min2read(page.content, {cn: 350, en: 160}) + _p('post.min2read_unit')
    
      //- for pv and count
      mixin pvBlock(parent_id,parent_class,parent_title)
        span.post-meta-separator |
        span(class=parent_class id=parent_id data-flag-title=page.title)
          i.far.fa-eye.fa-fw.post-meta-icon
          span.post-meta-label=_p('post.page_pv') + ':'
          if block
            block

      - const commentUse = comments.use
      if page.comments !== false && commentUse && !comments.lazyload
        if commentUse[0] === 'Valine' && theme.valine.visitor
          +pvBlock(url_for(page.path),'leancloud_visitors',page.title)
            span.leancloud-visitors-count
              i.fa-solid.fa-spinner.fa-spin
        else if commentUse[0] === 'Waline' && theme.waline.pageview
          +pvBlock('','','')
            span.waline-pageview-count(data-path=url_for(page.path))
              i.fa-solid.fa-spinner.fa-spin
        else if commentUse[0] === 'Twikoo' && theme.twikoo.visitor
          +pvBlock('','','')
            span#twikoo_visitors
              i.fa-solid.fa-spinner.fa-spin
        else if commentUse[0] === 'Artalk' && theme.artalk.visitor
          +pvBlock('','','')
            span#ArtalkPV
              i.fa-solid.fa-spinner.fa-spin
        else if theme.busuanzi.page_pv
          +pvBlock('','post-meta-pv-cv','')
            span#busuanzi_value_page_pv
              i.fa-solid.fa-spinner.fa-spin
      else if theme.busuanzi.page_pv
        +pvBlock('','post-meta-pv-cv','')
          span#busuanzi_value_page_pv
            i.fa-solid.fa-spinner.fa-spin

      if comments.count && !comments.lazyload && page.comments !== false && comments.use
        - var whichCount = comments.use[0]

        mixin countBlock
          span.post-meta-separator |
          span.post-meta-commentcount
            i.iconfont.icat-message.fa-fw.post-meta-icon
            span.post-meta-label= _p('post.comments') + ':'
            if block
              block
        
        case whichCount
          when 'Disqus'
            +countBlock
              span.disqus-comment-count
                a(href=full_url_for(page.path) + '#disqus_thread')
                  i.fa-solid.fa-spinner.fa-spin
          when 'Disqusjs'
            +countBlock
              a(href=full_url_for(page.path) + '#disqusjs')
                span.disqus-comment-count(data-disqus-url=full_url_for(page.path))
                  i.fa-solid.fa-spinner.fa-spin
          when 'Valine'
            +countBlock
              a(href=url_for(page.path) + '#post-comment' itemprop="discussionUrl")
                span.valine-comment-count(data-xid=url_for(page.path) itemprop="commentCount")
                  i.fa-solid.fa-spinner.fa-spin
          when 'Waline'
            +countBlock
              a(href=url_for(page.path) + '#post-comment')
                span.waline-comment-count(data-path=url_for(page.path))
                  i.fa-solid.fa-spinner.fa-spin
          when 'Gitalk'
            +countBlock
              a(href=url_for(page.path) + '#post-comment')
                span.gitalk-comment-count
                  i.fa-solid.fa-spinner.fa-spin
          when 'Twikoo'
            +countBlock
              a(href=url_for(page.path) + '#post-comment')
                span#twikoo-count
                  i.fa-solid.fa-spinner.fa-spin
          when 'Facebook Comments'
            +countBlock
              a(href=url_for(page.path) + '#post-comment')
                span.fb-comments-count(data-href=urlNoIndex())
          when 'Remark42'
            +countBlock
              a(href=url_for(page.path) + '#post-comment')
                span.remark42__counter(data-url=urlNoIndex())
                  i.fa-solid.fa-spinner.fa-spin
          when 'Artalk'
            +countBlock
              a(href=url_for(page.path) + '#post-comment')
                span.artalk-count
                  i.fa-solid.fa-spinner.fa-spin
  • 在自建的CSS文件 [blogRoot]/source/css/icat.css 里新增以下内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#post-info #post-meta .post-meta-separator {
  margin: 0 6px;
  padding-left: 0;
}
#post-meta .meta-firstline * > i,
#post-meta .meta-secondline * > i{
  margin-right: 6px !important;
}
@media screen and (max-width: 768px) {
  #page-header #post-info {
      bottom: 100px;
  }
}

/* meta样式调整 */

右键菜单

Butterfly的魔改教程：右键菜单
轻量级自定义右键菜单，小白也能直接上手~

最新文章标志

原理：通过 hexo 的 api 获取所有文章，然后比较时间得到最新文章的名字，返回给pug文件比较并添加元素

  • 新增 [blogRoot]/themes/butterfly/scripts/helpers/page.js 页面内容
    （ + 号直接删除 即是正常缩进）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
  ···

  return loop(menu) || defaultTitle
})

hexo.extend.helper.register('isImgOrUrl', function (path) {
  const imgTestReg = /\.(png|jpe?g|gif|svg|webp)(\?.*)?$/
  if (path.indexOf('//') !== -1 || imgTestReg.test(path)) {
    return true
  }
  return false
})

+hexo.extend.helper.register('newPost', function() {
+  let name, time;
+  hexo.locals.get('posts').map((item, index) => {
+      if (index == 0) name = item.title, time = item.date
+      else if (item.date > time) { name = item.title, time = item.date }
+  });
+  return name
+})
+// 最新文章
  • 新增 [blogRoot]/themes/butterfly/layout/includes/mixins/post-ui.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
mixin postUI(posts)
+  - let newTitle= newPost()
  each article , index in page.posts.data
    .recent-post-item
      -
        let link = article.link || article.path
        let title = article.title || _p('no_title')
        const position = theme.cover.position
        let leftOrRight = position === 'both'
          ? index%2 == 0 ? 'left' : 'right'
          : position === 'left' ? 'left' : 'right'
        let post_cover = article.cover
        let no_cover = article.cover === false || !theme.cover.index_enable ? 'no-cover' : ''
      -
      if post_cover && theme.cover.index_enable
        .post_cover(class=leftOrRight)
          a(href=url_for(link) title=title)
            if article.cover_type === 'img'
              img.post-bg(src=url_for(post_cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title)
            else
              div.post-bg(style=`background: ${post_cover}`)
      .recent-post-info(class=no_cover)
+        if newTitle == title
+          span(class=`newPost-${leftOrRight=='left'?'left':'right'}`) 最新文章
          p(class=`p-icat-${leftOrRight=='left'?'right':'left'}`)
        a.article-title(href=url_for(link) title=title)= title

  ···
  • 在自建的CSS文件 [blogRoot]/source/css/icat.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
#recent-posts>.recent-post-item {
  position: relative;
}
.newPost-left,
.newPost-right {
  position: absolute;
  top: 12px;
  color: white;
  padding: 0 12px;
  background-color: #49b1f5;
  box-shadow: 0 8px 12px -3px rgba(73,177,245, .20);
  border-radius: 6px;
  border: var(--style-border);
  letter-spacing: 1px;
}
.newPost-left {
  left: 12px;
}
.newPost-right {
  right: 12px;
}
/* PC端样式 */
@media screen and (max-width: 768px) {
  .newPost-left,
  .newPost-right {
      top: -4px;
      padding: 0 18px;
      border-radius: 0 0 8px 8px;
  }
  .newPost-left {
    left: calc(100% / 2 - 50px);
  }
  .newPost-right {
    right: calc(100% / 2 - 50px);
  }
}
/* PE端样式 */

/* 最新文章图标样式 */
旧版本 - 已弃用

此方法是在文章标题上方显示最新文章标识

  • 新增 [blogRoot]/themes/butterfly/layout/includes/mixins/post-ui.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
mixin postUI(posts)
+  - let newTitle= newPost()
  each article , index in page.posts.data
    .recent-post-item
      -
        let link = article.link || article.path
        let title = article.title || _p('no_title')
        const position = theme.cover.position
        let leftOrRight = position === 'both'
          ? index%2 == 0 ? 'left' : 'right'
          : position === 'left' ? 'left' : 'right'
        let post_cover = article.cover
        let no_cover = article.cover === false || !theme.cover.index_enable ? 'no-cover' : ''
      -
      if post_cover && theme.cover.index_enable
        .post_cover(class=leftOrRight)
          a(href=url_for(link) title=title)
            if article.cover_type === 'img'
              img.post-bg(src=url_for(post_cover) onerror=`this.onerror=null;this.src='${url_for(theme.error_img.post_page)}'` alt=title)
            else
              div.post-bg(style=`background: ${post_cover}`)
      .recent-post-info(class=no_cover)
+        if newTitle == title
+          span(class=`newPost-${leftOrRight=='left'?'right':'left'}`) 最新文章
          p(class=`p-icat-${leftOrRight=='left'?'right':'left'}`)
        a.article-title(href=url_for(link) title=title)= title

  ···
  • 在自建的CSS文件 [blogRoot]/source/css/icat.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
#recent-posts>.recent-post-item {
  position: relative;
}

.newPost-left,
.newPost-right {
  color: white;
  padding: 4px 10px;
  background-color: #E60012;
  border-radius: 9px 9px 9px 9px;
  letter-spacing: 2px;
  padding-left: 13px;
}

.newPost-left {
  left: 15px;
}

.newPost-right {
  right: 15px;
}

.p-icat-left,
.p-icat-right {
margin: 8px;
}

/* 最新文章图标 */

即刻短文

Butterfly的魔改教程：即刻短文页
属于私人的叨叨池，说你想说的；多种部署方式的iCat版动静态即刻短文

友联页调整

本小节魔改内容不包括 顶部banner栏，如有需要请移步至 ✨ 第二章 - 三小节 | 魔改页前置

效果预览

我的网上邻居们
与 数百名博主 无限进步

创建数据

  • 新增 [blogRoot]/themes/butterfly/layout/includes/page/flink.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
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
#article-container
  .flink
    - let pageContent = page.content
    if page.flink_url
      script.
        (()=>{
          const replaceSymbol = (str) => {
            return str.replace(/[\p{P}\p{S}]/gu, "-")
          }

          let result = ""
          fetch("!{url_for(page.flink_url)}")
            .then(response => response.json())
            .then(str => {
              for(let i = 0; i < str.length; i++){
                const replaceClassName = replaceSymbol(str[i].class_name)
                const className = str[i].class_name ? `<h2 id="${replaceClassName}"><a href="#${replaceClassName}" class="headerlink" title="${str[i].class_name}"></a>${str[i].class_name}</h2>` : ""
                const classDesc = str[i].class_desc ? `<div class="flink-desc">${str[i].class_desc}</div>` : ""
                
                let listResult = ""
                const lists = str[i].link_list
                for(let j = 0; j < lists.length; j++){
+                  const hexToRgb = (hex) => {
+                    const r = parseInt(hex.slice(1, 3), 16);
+                    const g = parseInt(hex.slice(3, 5), 16);
+                    const b = parseInt(hex.slice(5, 7), 16);
+                    return `${r},${g},${b}`;
+                  };
+                  let rgbColor = hexToRgb(label_color);
+                  let label = ""
+                  if (lists[j].label) {
+                    label = `<span class="flink-item-tag" style="background-color: ${label_color}; box-shadow: 0 8px 12px -3px rgba(${rgbColor}, .20)">${lists[j].label}</span>`;
+                  }
                  listResult += `
                    <div class="flink-list-item">
+                      ${label}
                      <a href="${lists[j].link}" title="${lists[j].name}" target="_blank">
                        <div class="flink-item-icon">
                          <img class="no-lightbox" src="${lists[j].avatar}" onerror='this.onerror=null;this.src="!{url_for(theme.error_img.flink)}"' alt="${lists[j].name}" />
                        </div>
                        <div class="flink-item-name">${lists[j].name}</div> 
                        <div class="flink-item-desc" title="${lists[j].descr}">${lists[j].descr}</div>
                      </a>
                    </div>`
                }

                result += `${className}${classDesc} <div class="flink-list">${listResult}</div>`
              }

              document.querySelector(".flink").insertAdjacentHTML("afterbegin", result)
              window.lazyLoadInstance && window.lazyLoadInstance.update()
            })
        })()

    else
      if site.data.link
        - let result = ""
        each i in site.data.link
          - let className = i.class_name ? markdown(`## ${i.class_name}`) : ""
          - let classDesc = i.class_desc ? `<div class="flink-desc">${i.class_desc}</div>` : ""

          - let listResult = ""

          each j in i.link_list
+            - let label_color = j.label_color || '#0084FF'
            - 
+              const hexToRgb = (hex) => {
+                const r = parseInt(hex.slice(1, 3), 16);
+                const g = parseInt(hex.slice(3, 5), 16);
+                const b = parseInt(hex.slice(5, 7), 16);
+                return `${r},${g},${b}`;
+              };
+              const rgbColor = hexToRgb(label_color);
+              let label = ""
+              if (j.label) {
+                label = `<span class="flink-item-tag" style="background-color: ${label_color}; box-shadow: 0 8px 12px -3px rgba(${rgbColor}, .20)">${j.label}</span>`
+              }
              listResult += `
                <div class="flink-list-item">
+                  ${label}
                  <a href="${j.link}" title="${j.name}" target="_blank">
                    <div class="flink-item-icon">
                      <img class="no-lightbox" src="${j.avatar}" onerror='this.onerror=null;this.src="${url_for(theme.error_img.flink)}"' alt="${j.name}" />
                    </div>
                    <div class="flink-item-name">${j.name}</div> 
                    <div class="flink-item-desc" title="${j.descr}">${j.descr}</div>
                  </a>
                </div>`
            -

          - result += `${className}${classDesc} <div class="flink-list">${listResult}</div>`

        - pageContent = result + pageContent
    != pageContent
  • 修改 [blogRoot]/source/about/index.md 页面内容
    （ + 号直接删除 即是正常缩进）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
---
title: 友情链接
date: 2021-10-16 14:44:55
type: "link"
top_img: false
aside: false
top_page: true
top_bg: https://img.meuicat.com/banner
top_item: 友情链接
top_title: 我的网上邻居们
top_tips: 与 数百名博主 无限进步
---

<!-- 页面内容 -->
  • 在自建的CSS文件 [blogRoot]/source/css/icat.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
.flink-item-icon {
  margin-right: 0 !important;
  transition: .5s !important;
}
/* 头像微调 */

#article-container .flink .flink-list>.flink-list-item::before {
  content: none;
}
/* 去掉原来自带的before */

#article-container .flink .flink-list>.flink-list-item:hover {
  background-color: #49B1F5;
  box-shadow: 0 0 20px rgba(0, 0, 0, .3);
  transition: 0.5s;
}
/* 鼠标经过改变背景 */

#article-container .flink .flink-list>.flink-list-item:hover a {
  color: white !important;
}
/* 鼠标经过改变文字颜色 */

#article-container .flink .flink-list>.flink-list-item:hover .flink-item-icon {
  width: 60px;
  margin-left: -70px;
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  transform: rotate(-180deg);
}
@media screen and (max-width: 900px){
  #article-container .flink .flink-list>.flink-list-item:hover .flink-item-icon {
    width: 90px;
    height: 90px;
    border-radius: 20px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  #article-container .flink .flink-list>.flink-list-item:hover .flink-item-tag {
    display: none;
  }
}
/* 鼠标经过头像滚动 */

#article-container .flink .flink-list > .flink-list-item a .flink-item-icon {
  margin: 26px 21px;
  width: 66px;
  height: 66px;
  border-radius: 33px;
}
#article-container .flink .flink-list > .flink-list-item a {
  display: block;
  height: 100%;
}
#article-container .flink .flink-item-name {
  text-align: start;
  padding: 40px 12px 0;
  height: auto;
}
#article-container .flink .flink-item-desc {
  text-align: start;
  padding: 10px 12px 0;
  height: auto;
}
.flink-item-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 2px 6px;
  color: var(--icat-white);
  z-index: 1;
  border-radius: 6px;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -o-transition: .3s;
  -ms-transition: .3s;
  transition: 0.3s;
  font-size: 0.6rem;
  opacity: .8;
}
/* 友联推荐Tag */

/* PC端友联页样式 */

#article-container .flink > h2 {
  margin: 20px 7px 0;
}
#article-container .flink .flink-desc {
  margin: 0 7px;
  color: var(--icat-secondtext);
}
#article-container .flink .flink-list {
  padding: 10px 0 0;
}
#article-container .flink .flink-list > .flink-list-item {
  border: 1px solid var(--icat-secondbg) !important;
  background: var(--icat-card-bg);
  height: 120px;
  margin: 8px 8px;
  width: calc(100% / 4 - 16px);
}
@media screen and (max-width: 900px){
  #article-container .flink .flink-list > .flink-list-item {
    height: 110px;
  }
  #article-container .flink .flink-list > .flink-list-item {
    border: 2px solid var(--icat-secondbg) !important;
  }
  #article-container .flink .flink-list {
    padding: 10px 0 0;
  }
  #article-container .flink .flink-list > .flink-list-item {
    margin: 6px 6px;
    width: calc(50% - 12px) !important;
  }
  #article-container .flink > h2 {
    margin: 20px 12px 0;
  }
  #article-container .flink .flink-desc {
    margin: 0 12px;
  }
  #article-container .flink .flink-item-name {
    font-size: 1.1rem;
    padding: 30px 12px 0;
  }
  #article-container .flink .flink-list > .flink-list-item a .flink-item-icon {
    position: absolute;
    bottom: -30%;
    right: 0;
    float: right;
    width: 100px;
    height: 100px;
    -webkit-transform: translate(35%,30%); 
    -moz-transform: translate(35%,30%);
    -o-transform: translate(35%,30%);
    -ms-transform: translate(35%,30%);
    transform: translate(35%,30%);
    margin-top: -12px;
    margin-left: -12px;
    border-radius: 26px;
    opacity: .2;
  }
  .flink-item-tag {
    top: 8px;
    right: 8px;
  }
}
/* PE端友联页样式 */

/* iCat新友链样式 */

友联Tag标签使用

  • 在 [blogRoot]/source/_data/likn.yml 页面配置文件的 link_list 内加 label label_color 即可
1
2
3
4
5
6
7
8
9
10
11
12
13
  ···

- class_name: 旗下网站
  class_desc: 博主搭建的那些小玩意
  link_list:
    - name: Melancholia
      link: https://github.com/yife68/Hexo-Theme-Melancholia
      avatar: https://meuicat.com/media/favicon.png
      descr: 一款纯记录写作类Hexo主题 ✍️
      label: 新品
      label_color: '#FF3842'

  ···
参数描述优先级默认值
labelTag名称选填默认关闭；如不配置此项就不显示（不需要新增配置为false，默认是关闭的），如需启用请新增配置并将 top_page 配置为 你想要的名称内容
label_colorTag背景色选填默认显示色值为：#0084FF；可新增配置项设置你需要的内容（优先级最高，但必须是 # 开头的Hex标注颜色代码）

mini友联栏

  • 新增 [blogRoot]/themes/butterfly/layout/includes/page/flink.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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
          ···

          - result += `${className}${classDesc} <div class="flink-list">${listResult}</div>`
+
+        - let fresult = ""
+        each l in site.data.flink
+          - let className = l.class_name ? markdown(`## ${l.class_name}`) : ""
+          - let classDesc = l.class_desc ? `<div class="flink-desc">${l.class_desc}</div>` : ""
+
+          - let flistResult = ""
+
+          each k in l.flink_list
+            -
+              flistResult += `
+                <div class="flink-list-item mini">
+                  <a href="${k.link}" title="${k.name}" target="_blank">
+                    <div class="flink-item-icon">
+                      <img class="no-lightbox" src="${k.avatar}" onerror='this.onerror=null;this.src="${url_for(theme.error_img.flink)}"' alt="${k.name}" />
+                    </div>
+                    <div class="flink-item-name">${k.name}</div>
+                  </a>
+                </div>`
+            -
+
+          - fresult += `${className}${classDesc} <div class="flink-list">${flistResult}</div>`
+
+        - let nresult = ""
+        each p in site.data.nlink
+          - let className = p.class_name ? markdown(`## ${p.class_name}`) : ""
+          - let classDesc = p.class_desc ? `<div class="flink-desc">${p.class_desc}</div>` : ""
+
+          - let nlistResult = ""
+
+          each o in p.nlink_list
+            -
+              nlistResult += `
+                <div class="flink-list-item fnull">
+                  <a href="${o.link}" title="${o.name}" target="_blank">
+                    <div class="flink-item-name">${o.name}</div>
+                  </a>
+                </div>`
+            -
+
+          - nresult += `${className}${classDesc} <div class="flink-list">${nlistResult}</div>`

-       - pageContent = result +pageContent
+        - pageContent = result + fresult + nresult +pageContent
    != pageContent
  • 创建 [blogroot]/source/_data/flink.yml 添加mini友联数据
1
2
3
- class_name: 友情链接
  class_desc: 一起玩耍的小伙伴们 ~
  flink_list:
  • 创建 [blogroot]/source/_data/nlink.yml 添加fnull友联数据
1
2
3
- class_name: 友情链接
  class_desc: 一起玩耍的小伙伴们 ~
  nlink_list:
  • 在自建的CSS文件 [blogRoot]/source/css/icat.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
#article-container .flink .flink-list > .flink-list-item.mini {
  height: 60px;
  width: calc(100% / 6 - 16px);
}
#article-container .flink .flink-list > .flink-list-item.fnull {
  height: 40px;
  width: auto !important;
}
#article-container .flink .flink-list > .flink-list-item.mini a .flink-item-icon {
  margin: 9px 9px;
  width: 40px;
  height: 40px;
}
#article-container .flink .flink-list>.flink-list-item.mini:hover .flink-item-icon {
  width: 40px;
  margin-left: -70px;
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  transform: rotate(-180deg);
}
#article-container .flink .flink-list>.flink-list-item.mini .flink-item-name {
  padding: 21px 12px;
  font-size: 1.23em;
}
#article-container .flink .flink-list>.flink-list-item.fnull .flink-item-name {
  padding: 10px 16px;
  font-size: 1.13em;
}
@media screen and (max-width: 900px) {
  #article-container .flink .flink-list > .flink-list-item.mini {
    width: calc(100% / 3 - 12px) !important;
  }
  #article-container .flink .flink-list > .flink-list-item.mini a .flink-item-icon {
    bottom: 0;
    width: 60px;
    height: 60px;
    -webkit-transform: translate(35%,50%);
    -moz-transform: translate(35%,50%);
    -o-transform: translate(35%,50%);
    -ms-transform: translate(35%,50%);
    transform: translate(35%,50%);
    border-radius: 50%;
  }
  #article-container .flink .flink-list>.flink-list-item.mini:hover .flink-item-icon {
    bottom: -2px;
    right: 6px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  #article-container .flink .flink-list>.flink-list-item.mini .flink-item-name {
    font-size: 1.13em;
  }
  #article-container .flink .flink-list>.flink-list-item.fnull .flink-item-name {
    font-size: 1em;
  }
}
/* mini友联栏样式 */

足迹页

本小节魔改内容不包括 顶部banner栏，如有需要请移步至 ✨ 第二章 - 三小节 | 魔改页前置

效果预览

足迹阁
人生足迹 - 那些我观赏过的艺术

创建数据

  • 修改 [blogRoot]/themes/butterfly/layout/page.pug 来使页面匹配
    （ + 号直接删除 即是正常缩进）
1
2
3
4
5
6
      when 'categories'
        include includes/page/categories.pug
+      when 'collect'
+        include includes/page/collect.pug
      default
        include includes/page/default-page.pug
  • 新建 [blogRoot]/themes/butterfly/layout/includes/page/collect.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
#article-icat-collect
  .icat-collect
    - let collectPageContent = page.content
    if site.data.collect
      - let result = ""
      each i in site.data.collect
        - let className = i.class_name ? `<h2 ${i.class_desc?'':'style="margin-bottom:12px"'}>${i.class_name} (${i.link_list.length})</h2>` : ""
        - let classDesc = i.class_desc ? `<div class="icat-collect-desc">${i.class_desc}</div>` : ""
        - let listResult = ""
        each j in i.link_list
          - 
            listResult += `
              <div title="${j.name}" referrerPolicy="no-referrer" class="icat-collect_box" style="${j.img?`background-image: url(${j.img})`:'background-color: var(--icat-card-bg);'}">
                  <div class="icat-collect_top">
                    <i class="${j.icon?j.icon:'fa-solid fa-film'}"></i>
                    <span>${j.premiere?j.premiere:'看过?'}</span>
                  </div>
                  <div class="icat-collect_content">
                    <span>${j.name?j.name:'未知'}</span>
                    <div>${j.score?toStar(j.score):toStar(0)}</div>
                    <p>${j.time?j.time:'时间'}</p>
                  </div>
                  <div class="icat-collect-div"><a class="icat-collect-a" href="${j.link?j.link:'链接'}"></a></div>
                </div>
              `
          -
        - result += `${className}${classDesc} <div class="icat-collect-list">${listResult}</div>`
      - collectPageContent = collectPageContent + result
    != collectPageContent
  • 新建 [blogRoot]/themes/butterfly/source/css/_page/collect.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
.icat-collect
  h2
    margin-bottom: 0
  .icat-collect-desc
    margin-bottom: 10px
  .icat-collect-list
    display: flex
    gap: 18px
    flex-wrap: wrap
    .icat-collect_box
      --w: calc(100% / 6 - 15px)
      width: var(--w)
      aspect-ratio: 3/4
      display: flex
      justify-content: space-between
      flex-direction: column
      background-position: center
      background-size: cover
      border-radius: 12px
      border: var(--style-border-always)
      box-shadow: var(--icat-shadow-border)
      position: relative
      overflow: hidden
      padding: 10px
      color: #fff
      transition: .5s
      &::after
        content: ''
        position: absolute
        height: 100%
        width: 100%
        left: 0
        top: 0
        background: rgba(0,0,0,0.3)
        z-index: 0
        transition: .5s
      &:hover
        transform: translateY(-10px)
        &::after
          background: rgba(0,0,0,0.1)
      .icat-collect_top
        display: flex
        z-index: 1
        align-items: center
        justify-content: space-between
      .icat-collect_content
        z-index: 1
        margin-top: 53%
        span
          display: block
          font-size: 18px
          font-weight: bold
          white-space: nowrap
          overflow: hidden
          text-overflow: ellipsis
        p
          font-size: 12px
          margin-top: -6px
          margin-bottom: 2px
          --font-color: rgba(0,0,0,0.3)

[data-theme='dark']
  .icat-collect .icat-collect-list .icat-collect_box
    color: #ddd !important
    &:hover
      transform: translateY(-10px)
      &::after
        background: rgba(0,0,0,0.2)
    &::after
      background: rgba(0,0,0,0.5)
.icat-collect .icat-collect-list
  @media screen and (max-width: 1100px)
    gap: 15px
    .icat-collect_box
      --w: calc(20% - 12px)
  @media screen and (max-width: 900px)
    gap: 16px
    .icat-collect_box
      --w: calc(25% - 12px)
  @media screen and (max-width: 768px)
    gap: 15px
    .icat-collect_box
      --w: calc(100% / 3 - 10px)
  @media screen and (max-width: 500px)
    gap: 16px
    .icat-collect_box
      --w: calc(50% - 8px)


.icat-collect-div
  position: absolute
  z-index: 1
  width: 85%
  height: 90%
.icat-collect-a
  height: 100%
  display: flex
  • 新增 [blogRoot]/themes/butterfly/scripts/helpers/page.js 页面内容，将以下内容加到最后一行处即可
    （注意该内容中部分 fontawesome 图标 需要自行替换）
1
2
3
4
5
6
7
8
9
10
  ···

hexo.extend.helper.register('toStar', function(num) {
  let tmp = ''
  for (let i = 0; i < Math.floor(num); i++) { tmp += '<i class="iconfont icat-star"></i>' } // 整数部分加 实心星星
  if (num - Math.floor(num) != 0) tmp += '<i class="iconfont icat-star-half"></i>' // 小数部分转成 半星
  for (let i = 0; i < 5 - Math.ceil(num); i++) { tmp += '<i class="iconfont icat-star-empty"></i>' } // 不够5个补 空心星星
  return tmp
})
// 足迹藏宝阁星星
  • 新建 [blogRoot]/source/_data/collect.yml 数据文件，参照以下内容进行添加
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
- class_name: 📽️ 荧幕电影 # 电影图标
  class_desc: # 分类描述
  link_list:
    - name: 流浪地球2 # 片名
      score: 5 # 1-5星
      premiere: 三刷 # N刷
      icon: fa-solid fa-film # 左上角图标
      time: 2023/02/13 # 观影时间
      img: https://img.meuicat.com/collect/film/1.webp #图片链接
      link: https://movie.douban.com/subject/35267208/ # 影片地址

    - name: 盛夏未来
      score: 5
      premiere: 已看
      icon: fa-solid fa-film
      time: 2021/08/22
      img: https://img.meuicat.com/collect/film/39.webp
      link: https://movie.douban.com/subject/35158124/
  • 创建并修改 [blogRoot]/source/collect/index.md 页面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
---
title: 人生足迹
date: 2023-02-20 00:28:12
type: collect
top_img: false
aside: false
top_page: true
top_bg: https://img.meuicat.com/banner
top_item: 阅历
top_title: 人生足迹
top_tips: 正在持续体验人生...
---

<!-- 页面内容 -->

使用参数

  • 在 [blogRoot]/source/_data/collect.yml 页面配置文件的 link_list 内配置即可
1
2
3
4
5
6
7
8
9
10
11
12
13
14
  ···

- class_name: 📽️ 荧幕电影 # 电影图标
  class_desc: # 分类描述
  link_list:
    - name: 流浪地球2 # 片名
      score: 5 # 1-5星
      premiere: 三刷 # N刷
      icon: fa-solid fa-film # 左上角图标
      time: 2023/02/13 # 观影时间
      img: https://img.meuicat.com/collect/film/1.webp #图片链接
      link: https://movie.douban.com/subject/35267208/ # 影片地址

  ···
参数描述
name名称
score评分/打分
premiere右上角文字，随意填写
icon卡片左上角图标
time底部显示观看的时间
img卡片图片
link卡片跳转的链接

动态相册

Butterfly的魔改教程：动态相册页
用照片来定格住最好的自己；是时光流逝的见证者，亦是记录者

待办清单页

Butterfly的魔改教程：待办清单页
给你的博客记录一个生活清单页

聊天记录页面

Butterfly的魔改教程：聊天记录页
硬盘存储不了记录，聊天记录页，一个突发奇想的产物，可二改，自定性强

关于本站页

Butterfly的魔改教程：关于本站
一款轻简约的博主&站点介绍页面，聚合展示

文章顶部波浪

  • 新增 [blogRoot]/themes/butterfly/layout/includes/header/index.pug 页面内容
    （ + 号直接删除 即是正常缩进）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  !=partial('includes/header/nav', {}, {cache: true})
  if top_img !== false
    if is_post()
      include ./post-info.pug
+      section.main-hero-waves-area.waves-area
+        svg.waves-svg(xmlns='http://www.w3.org/2000/svg', xlink='http://www.w3.org/1999/xlink', viewBox='0 24 150 28', preserveAspectRatio='none', shape-rendering='auto')
+          defs
+            path#gentle-wave(d='M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z')
+          g.parallax
+            use(href='#gentle-wave', x='48', y='0')
+            use(href='#gentle-wave', x='48', y='3')
+            use(href='#gentle-wave', x='48', y='5')
+            use(href='#gentle-wave', x='48', y='7')
    else if is_home() 
      #site-info
        h1#site-title=site_title
  • 在自建的CSS文件 [blogRoot]/source/css/icat_change.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
.main-hero-waves-area {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: -11px;
  z-index: 5;
}
.waves-area .waves-svg {
  width: 100%;
  height: 5rem;
}

.parallax > use {
  animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
  fill: #f7f9febd;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
  fill: #f7f9fe82;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
  fill: #f7f9fe36;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
  fill: #f7f9fe;
}

[data-theme="dark"] .parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
  fill: #070709c8;
}
[data-theme="dark"] .parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
  fill: #07070980;
}
[data-theme="dark"] .parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
  fill: #0707093e;
}
[data-theme="dark"] .parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
  fill: #070709;
}
/* 黑色模式背景 */

@keyframes move-forever {
  0% {
    transform: translate3d(-90px, 0, 0);
  }
  100% {
    transform: translate3d(85px, 0, 0);
  }
}
@media (max-width: 768px) {
  .waves-area .waves-svg {
    height: 40px;
    min-height: 40px;
  }
}

/* 波浪样式 */
  • CSS 中 fill 属性可以控制波浪颜色，最好使其中一个颜色与背景颜色一致，否则会显的有点奇怪

友联鱼塘

本小节魔改内容不包括 顶部banner栏，如有需要请移步至 ✨ 第二章 - 三小节 | 魔改页前置

前端样式参考 洪佬的 可自行移步张洪Heo

效果预览

封の好友鱼塘
使用 HEXO_CIRCLE_OF_FRIENDS 构建

创建数据【前端】

  • 创建 [blogRoot]/source/fcircle/index.md 页面
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
---
title: 鱼塘录
date: 2023-05-23 21:14:06
top_img: false
aside: false
top_page: true
top_bg: https://img.meuicat.com/banner
top_item: 友联朋友圈
top_title: 封の好友鱼塘
top_tips: 使用 HEXO_CIRCLE_OF_FRIENDS 构建
top_link: /link/
top_text: 关于友联
comments: false
---


<div id="hexo-circle-of-friends-root"></div>
<script>
    let UserConfig = {
        private_api_url: 'https://moments.meuicat.com/',
        // 填写你的api地址
        page_turning_number: 12,
        // 点击加载更多时，一次最多加载几篇文章，默认10
        error_img: 'https://s11.ax1x.com/2023/05/26/p9qChjI.jpg',
        // 头像加载失败时，默认头像地址 #https://sdn.geekzu.org/avatar/57d8260dfb55501c37dde588e7c3852c
        sort_rule: 'created'
        // 进入页面时第一次的排序规则
    }
</script>
<script type="text/javascript" src="https://cdn.meuicat.com/gh/yife/fcircle@0.0.1/app.min.js"></script>
<script type="text/javascript" src="https://cdn.meuicat.com/gh/yife/fcircle@0.0.1/bundle.js"></script>

  • 如若缺少样式的颜色变量 请移步 🐈 第五章 - 三小节四段 | CSS颜色变量 自取

  • 创建 [blogRoot]/source/js/app.min.js 文件，并新增以下内容，用来处理鱼塘的样式逻辑
    （即上方 https://cdn.meuicat.com/gh/yife/fcircle@0.0.1/app.min.js ，替换即可）

1
(function(e){function t(t){for(var c,n,r=t[0],i=t[1],s=t[2],p=0,b=[];p<r.length;p++)n=r[p],Object.prototype.hasOwnProperty.call(o,n)&&o[n]&&b.push(o[n][0]),o[n]=0;for(c in i)Object.prototype.hasOwnProperty.call(i,c)&&(e[c]=i[c]);d&&d(t);while(b.length)b.shift()();return l.push.apply(l,s||[]),a()}function a(){for(var e,t=0;t<l.length;t++){for(var a=l[t],c=!0,r=1;r<a.length;r++){var i=a[r];0!==o[i]&&(c=!1)}c&&(l.splice(t--,1),e=n(n.s=a[0]))}return e}var c={},o={app:0},l=[];function n(t){if(c[t])return c[t].exports;var a=c[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,n),a.l=!0,a.exports}n.m=e,n.c=c,n.d=function(e,t,a){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},n.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(n.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var c in e)n.d(a,c,function(t){return e[t]}.bind(null,c));return a},n.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="";var r=window["webpackJsonp"]=window["webpackJsonp"]||[],i=r.push.bind(r);r.push=t,r=r.slice();for(var s=0;s<r.length;s++)t(r[s]);var d=i;l.push([0,"chunk-vendors"]),a()})({0:function(e,t,a){e.exports=a("56d7")},1799:function(e,t,a){var c=a("4ec8");c.__esModule&&(c=c.default),"string"===typeof c&&(c=[[e.i,c,""]]),c.locals&&(e.exports=c.locals);var o=a("499e").default;o("4b3a8dae",c,!0,{sourceMap:!1,shadowMode:!1})},"1b92":function(e,t,a){var c=a("2313");c.__esModule&&(c=c.default),"string"===typeof c&&(c=[[e.i,c,""]]),c.locals&&(e.exports=c.locals);var o=a("499e").default;o("220edc25",c,!0,{sourceMap:!1,shadowMode:!1})},"1feb":function(e,t,a){var c=a("24fb");t=c(!1),t.push([e.i,"#cf-change{font-size:14px;display:block;padding:12px 0 4px;width:100%;text-align:center}#cf-container{width:100%}#cf-container a{text-decoration:none!important;line-height:1.3;color:var(--icat-fontcolor);transition:.3s}#cf-container a:hover{color:var(--icat-blue);}.cf-time-created,.cf-time-updated{display:inline-block;text-align:left;white-space:nowrap}.cf-time-created i.far,.cf-time-updated i.fas{padding-right:8px}#cf-footer{margin-right:8px;margin-bottom:8px;text-align:right;font-size:13px}.cf-data-lastupdated{font-size:13px;text-align:right;display:block}#cf-footer-info{display:flex}#cf-footer-info div{margin-left:.5rem}.cf-article .cf-article-title:hover{color:var(--icat-blue)!important}#cf-more,#cf-state{background:var(--icat-card-bg)}.img-alt{display:none!important}#cf-change,#cf-more,#cf-state,.cf-article-author,.cf-article-floor,.cf-article:hover .cf-article-floor,.cf-article a.cf-article-title,.cf-time-created,.cf-time-updated{color:var(--icat-fontcolor)}.cf-article{background:var(--icat-card-bg)}#cf-change span:hover{color:var(--icat-blue);cursor:pointer}.cf-overshow p a:hover{color:var(--icat-blue)!important}.cf-overshow p span{color:var(--icat-secondtext)}.cf-setting-btn{color:var(--icat-fontcolor);cursor:pointer;transition:.3s}.cf-setting-btn:hover{color:var(--icat-blue)}.dark-theme #cf-overlay,.theme-dark #cf-overlay{background-color:rgba(59,61,66,.42)}.dark-theme .cf-overshow,.theme-dark .cf-overshow{background:#292a2d}.dark-theme .cf-overshow p a,.theme-dark .cf-overshow p a{color:var(--icat-fontcolor)}.dark-theme .cf-overshow .cf-overshow-content,.theme-dark .cf-overshow .cf-overshow-content{background:#eaeaea}.dark-theme #cf-more,.dark-theme #cf-state,.theme-dark #cf-more,.theme-dark #cf-state{background:var(--lmm-dack-background);color:var(--lmm-dark-fontcolor)}.dark-theme #cf-change,.dark-theme .cf-article-floor,.dark-theme .cf-time-created,.dark-theme .cf-time-updated,.theme-dark #cf-change,.theme-dark .cf-article-floor,.theme-dark .cf-time-created,.theme-dark .cf-time-updated{color:var(--lmm-dark-floorcolor)}.dark-theme .cf-article-author,.dark-theme .cf-article a.cf-article-title,.theme-dark .cf-article-author,.theme-dark .cf-article a.cf-article-title{color:var(--lmm-dark-fontcolor)}.dark-theme .cf-article,.theme-dark .cf-article{background:var(--lmm-dack-background)}.dark-theme .cf-article:hover .cf-article-floor,.dark-theme .cf-article:hover .cf-time-created,.dark-theme .cf-article:hover .cf-time-updated,.dark-theme .cf-overshow p span,.theme-dark .cf-article:hover .cf-article-floor,.theme-dark .cf-article:hover .cf-time-created,.theme-dark .cf-article:hover .cf-time-updated,.theme-dark .cf-overshow p span{color:var(--lmm-dark-fontcolor)}@media screen and (max-width:400px){#cf-state{font-size:14px}.cf-article-time i{display:none}}@media screen and (max-width:300px){#cf-state,.cf-article-time{display:none}}",""]),e.exports=t},2313:function(e,t,a){var c=a("24fb");t=c(!1),t.push([e.i,".ManagePanelMain[data-v-668b627c]{padding:0 10px}.ManagePanelMain .cf-manage-top[data-v-668b627c]{display:flex;align-items:center;justify-content:space-between;width:100%}.cf-manage-title[data-v-668b627c]{overflow-wrap:break-word;color:#fff;font-size:24px;font-family:PingFangSC-Regular;text-align:center;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none}.cf-manage-exit-btn[data-v-668b627c]{font-size:16px}.cf-manage-tabs-area[data-v-668b627c]{position:relative;margin:10px 0}[data-v-668b627c] .el-tabs__nav-next,[data-v-668b627c] .el-tabs__nav-prev{color:#fff!important}",""]),e.exports=t},2375:function(e,t,a){var c=a("4a06");c.__esModule&&(c=c.default),"string"===typeof c&&(c=[[e.i,c,""]]),c.locals&&(e.exports=c.locals);var o=a("499e").default;o("58d813eb",c,!0,{sourceMap:!1,shadowMode:!1})},"2ac5":function(e,t,a){var c=a("be21");c.__esModule&&(c=c.default),"string"===typeof c&&(c=[[e.i,c,""]]),c.locals&&(e.exports=c.locals);var o=a("499e").default;o("5be240ce",c,!0,{sourceMap:!1,shadowMode:!1})},"4a06":function(e,t,a){var c=a("24fb");t=c(!1),t.push([e.i,"@media screen and (max-width:1200px){.el-container.cf-manage-pannel[data-v-34921c7c]{width:90%;padding:45px 0 0}}#cf-manage-overlay[data-v-34921c7c]{top:0;left:0;background-color:hsla(0,0%,100%,.42);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow-y:auto;pointer-events:all;transition:all .1s ease;z-index:998}#cf-manage-overlay[data-v-34921c7c],.cf-manage-pannel[data-v-34921c7c]{position:fixed;width:100%;height:100%}.cf-manage-pannel[data-v-34921c7c]{text-align:center;background-color:#8c8788;border-radius:10px;max-width:1200px;max-height:800px;z-index:999;transform:translate(-50%,-50%);left:50%;top:50%;padding:45px}.cf-manage-close-btn[data-v-34921c7c]{position:absolute;max-width:30px;color:#fff;cursor:pointer;right:2%;top:5px}.cf-manage-close-btn[data-v-34921c7c]:hover{color:#49b1f5}.cf-pannel-area[data-v-34921c7c]{width:100%;height:100%;overflow-y:scroll;overflow-x:hidden}[data-v-34921c7c]::-webkit-scrollbar-thumb{background-color:rgba(52,218,177,.85);background-image:-webkit-linear-gradient(45deg,hsla(0,7%,86%,.4) 25%,transparent 0,transparent 50%,hsla(0,8%,64%,.4) 0,rgba(66,220,5,.4) 75%,transparent 0,transparent)!important;border-radius:2em!important}[data-v-34921c7c]::-webkit-scrollbar{width:8px;height:8px}[data-v-34921c7c]::-webkit-scrollbar-track{background-color:#b6b2b4;border-radius:2em}[data-v-34921c7c]::-webkit-scrollbar-corner{background-color:transparent}",""]),e.exports=t},"4ae4":function(e,t,a){var c=a("24fb");t=c(!1),t.push([e.i,'.cf-article-group[data-v-56cae500]{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;margin-top:12px}.cf-article-item[data-v-56cae500]{width:24.2%}@media screen and (max-width:1200px){.cf-article-item[data-v-56cae500]{width:48.4%}.cf-article-title[data-v-56cae500]{-webkit-line-clamp:2!important}}@media screen and (max-width:768px){.cf-article-item[data-v-56cae500]{width:100%}}.cf-article[data-v-56cae500]{margin:8px 0;border-radius:8px;font-weight:bolder;overflow:hidden;transition:all .3s ease-out;position:relative;padding:1rem;border:var(--style-border-always);height:160px;display:flex;align-content:space-between;flex-direction:column;justify-content:space-between;box-shadow:var(--icat-shadow-border)}.cf-article[data-v-56cae500]:hover{transition:transform .3s}.cf-article-avatar[data-v-56cae500]{line-height:1;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;position:relative;z-index:1}.cf-img-avatar[data-v-56cae500]{display:inline-block!important;position:absolute;width:40%;border-radius:50%;margin:0 0 -4px!important;background:#fff;opacity:.1;z-index:0;right:-20px;bottom:-20px;filter:blur(4px)}.cf-article-author[data-v-56cae500],.cf-img-avatar[data-v-56cae500]{align-self:center;text-align:center;transition:.3s}.cf-article-author[data-v-56cae500]{line-height:1;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;overflow:hidden;z-index:1;color:var(--icat-fontcolor);font-size:.7rem;background-color:var(--icat-gray-op);padding:8px;border-radius:20px;display:flex;align-items:center}.cf-article-author[data-v-56cae500]:hover{background:var(--icat-blue);color:var(--icat-white)}.cf-article-floor[data-v-56cae500]{position:absolute;top:0;right:.5rem;font-style:italic;font-size:3rem;line-height:1.5rem;z-index:1;font-weight:400;transition:.3s}.cf-article-title[data-v-56cae500]{font-weight:500;position:relative;z-index:2;width:100%;display:block;letter-spacing:1.5px;font-size:18px;align-self:start;text-align:left;line-height:40px;padding:0;margin-bottom:10px;transition:.3s;-webkit-line-clamp:3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box!important;-webkit-box-orient:vertical}.cf-article-time[data-v-56cae500]{font-size:12px;text-align:right;float:right;font-weight:400;transition:.3s;margin-left:auto;z-index:1}#cf-footer[data-v-56cae500]{width:100%;margin-top:.5rem;align-items:flex-end;color:var(--icat-secondtext)}#cf-footer[data-v-56cae500],#cf-more[data-v-56cae500]{display:flex;flex-direction:column}#cf-more[data-v-56cae500]{width:40%;max-width:810px;height:30px;margin:auto;border-radius:12px;font-weight:bolder;text-align:center;justify-content:space-around;cursor:pointer;transition:.3s;border:var(--style-border-always);box-shadow:var(--icat-shadow-border)}#cf-more[data-v-56cae500]:hover{width:60%;background:var(--icat-blue);color:var(--icat-white)}#cf-more i.fas[data-v-56cae500]:before{content:"∞"}',""]),e.exports=t},"4ec8":function(e,t,a){var c=a("24fb");t=c(!1),t.push([e.i,"@media screen and (max-width:1200px){.settings-item[data-v-75620860]{flex-direction:column}}.settings-item[data-v-75620860],.settings-item .item-col[data-v-75620860]{display:flex}.cf-manage-main-add-btn[data-v-75620860]{margin-left:30px}",""]),e.exports=t},"4ee4":function(e,t,a){var c=a("24fb");t=c(!1),t.push([e.i,"#cf-state[data-v-0ed50aaf]{position:relative;font-size:16px;border-radius:8px;box-shadow:none;overflow:hidden;display:flex;flex-direction:row;flex-wrap:wrap;padding:8px 0;width:100%}#cf-change .cf-change-now[data-v-0ed50aaf]{color:var(--icat-blue);font-weight:800}.cf-state-data[data-v-0ed50aaf]{width:100%;display:flex}.cf-data-active[data-v-0ed50aaf],.cf-data-article[data-v-0ed50aaf],.cf-data-friends[data-v-0ed50aaf]{height:60px;background:transparent;display:flex;flex-direction:column;width:33%;cursor:pointer}.cf-label[data-v-0ed50aaf]{font-size:16px;width:100%;height:30px}.cf-label[data-v-0ed50aaf],.cf-message[data-v-0ed50aaf]{padding:0 3%;align-self:center;text-align:center}.cf-message[data-v-0ed50aaf]{width:50%;font-size:20px}#panel-btn[data-v-0ed50aaf]{position:absolute;right:0;bottom:0}#cf-state-box[data-v-0ed50aaf]{display:none}",""]),e.exports=t},5145:function(e,t,a){var c=a("4ee4");c.__esModule&&(c=c.default),"string"===typeof c&&(c=[[e.i,c,""]]),c.locals&&(e.exports=c.locals);var o=a("499e").default;o("69d28853",c,!0,{sourceMap:!1,shadowMode:!1})},"56d7":function(e,t,a){"use strict";a.r(t);var c=a("f2bf");const o={key:2},l={id:"cf-container"},n={key:3};function r(e,t,a,r,i,s){const d=Object(c["resolveComponent"])("ManagePanel"),p=Object(c["resolveComponent"])("ArticleCard"),b=Object(c["resolveComponent"])("Header"),m=Object(c["resolveComponent"])("ArticleBody");return Object(c["openBlock"])(),Object(c["createElementBlock"])("div",null,[i.manage_panel_open?(Object(c["openBlock"])(),Object(c["createBlock"])(d,{key:0,Config:i.Config,onClose_manage_panel:s.close_manage_panel},null,8,["Config","onClose_manage_panel"])):Object(c["createCommentVNode"])("",!0),i.article_card_data.open?(Object(c["openBlock"])(),Object(c["createBlock"])(p,{key:1,article_card_data:i.article_card_data.data,Config:i.Config,onClose_article_card:s.close_article_card},null,8,["article_card_data","Config","onClose_article_card"])):Object(c["createCommentVNode"])("",!0),i.change_map[i.Config.sort_rule]?(Object(c["openBlock"])(),Object(c["createElementBlock"])("div",o,[Object(c["createElementVNode"])("div",l,[Object(c["createVNode"])(b,{Config:i.Config,all_data:i.change_map[i.Config.sort_rule],onWatch_sort_rule:s.change_sort_rule,onShow_article_card:s.open_article_card,onToggle_api_url:s.toggle_api_url,onOpen_manage_panel:s.open_manage_panel},null,8,["Config","all_data","onWatch_sort_rule","onShow_article_card","onToggle_api_url","onOpen_manage_panel"]),Object(c["createVNode"])(m,{Config:i.Config,all_data:i.change_map[i.Config.sort_rule],onShow_article_card:s.open_article_card,onOpen_manage_panel:s.open_manage_panel},null,8,["Config","all_data","onShow_article_card","onOpen_manage_panel"])])])):(Object(c["openBlock"])(),Object(c["createElementBlock"])("span",n,"与主机通讯中……"))])}const i=e=>(Object(c["pushScopeId"])("data-v-0ed50aaf"),e=e(),Object(c["popScopeId"])(),e),s={id:"cf-state-box"},d={id:"cf-state",class:"cf-new-add"},p={class:"cf-state-data"},b=i(()=>Object(c["createElementVNode"])("span",{class:"cf-label"},"订阅",-1)),m={class:"cf-message"},f=i(()=>Object(c["createElementVNode"])("span",{class:"cf-label"},"活跃",-1)),u={class:"cf-message"},h=i(()=>Object(c["createElementVNode"])("span",{class:"cf-label"},"日志",-1)),g={class:"cf-message"};function O(e,t,a,o,l,n){const r=Object(c["resolveComponent"])("Setting"),i=Object(c["resolveComponent"])("el-icon"),O=Object(c["resolveComponent"])("el-button"),C=Object(c["resolveComponent"])("el-tooltip");return Object(c["openBlock"])(),Object(c["createElementBlock"])("div",s,[Object(c["createElementVNode"])("div",d,[Object(c["createVNode"])(O,{id:"panel-btn",circle:"",onClick:n.open_manage_panel},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(i,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(r)]),_:1})]),_:1},8,["onClick"]),Object(c["createElementVNode"])("div",p,[Object(c["createVNode"])(C,{content:"点击获取一篇随机文章",placement:"bottom",effect:"light"},{default:Object(c["withCtx"])(()=>[Object(c["createElementVNode"])("div",{class:"cf-data-friends",onClick:t[0]||(t[0]=(...e)=>n.open_article_card&&n.open_article_card(...e))},[b,Object(c["createElementVNode"])("span",m,Object(c["toDisplayString"])(a.all_data.statistical_data.friends_num),1)])]),_:1}),Object(c["createVNode"])(C,{content:"点击切换公共库/私有库",placement:"top",effect:"light"},{default:Object(c["withCtx"])(()=>[Object(c["createElementVNode"])("div",{class:"cf-data-active",onClick:t[1]||(t[1]=(...e)=>n.toggle_api_url&&n.toggle_api_url(...e))},[f,Object(c["createElementVNode"])("span",u,Object(c["toDisplayString"])(a.all_data.statistical_data.active_num),1)])]),_:1}),Object(c["createVNode"])(C,{content:"点击清空缓存",placement:"bottom",effect:"light"},{default:Object(c["withCtx"])(()=>[Object(c["createElementVNode"])("div",{class:"cf-data-article",onClick:t[2]||(t[2]=(...e)=>n.clear_session_storage&&n.clear_session_storage(...e))},[h,Object(c["createElementVNode"])("span",g,Object(c["toDisplayString"])(a.all_data.statistical_data.article_num),1)])]),_:1})])])])}var C={name:"Header",emits:["watch_sort_rule","show_article_card","toggle_api_url","open_manage_panel"],methods:{change_sort_rule(){let e="created"===this.Config.sort_rule?"updated":"created";this.$emit("watch_sort_rule",e)},open_article_card(){this.$emit("show_article_card","")},toggle_api_url(){this.$emit("toggle_api_url")},clear_session_storage(){sessionStorage.clear(),location.reload()},open_manage_panel(){this.$emit("open_manage_panel")}},props:{all_data:{type:Object,default:()=>({statistical_data:{friends_num:0,active_num:0,article_num:0}})},Config:Object}},j=(a("ea03"),a("6b0d")),v=a.n(j);const _=v()(C,[["render",O],["__scopeId","data-v-0ed50aaf"]]);var x=_;const w=e=>(Object(c["pushScopeId"])("data-v-56cae500"),e=e(),Object(c["popScopeId"])(),e),k={class:"cf-article-group"},V={class:"cf-article"},A=["href","data-title"],N={class:"cf-article-avatar no-lightbox flink-item-icon"},E=["src"],y=["onClick"],B={class:"cf-article-time"},L={key:0,class:"cf-time-created"},I=w(()=>Object(c["createElementVNode"])("i",{class:"far fa-calendar-alt"},null,-1)),M={key:1,class:"cf-time-updated"},S=w(()=>Object(c["createElementVNode"])("i",{class:"fas fa-history"},"更新于",-1)),T={id:"cf-footer"},D={key:0},F={key:1,class:"fas fa-angle-double-down"},P={id:"cf-footer",class:"cf-new-add"},R=w(()=>Object(c["createElementVNode"])("span",{id:"cf-version-up",onclick:"checkVersion()"},null,-1)),Y=w(()=>Object(c["createElementVNode"])("div",null,[Object(c["createTextVNode"])("Powered by "),Object(c["createElementVNode"])("a",{href:"https://github.com/Rock-Candy-Tea/hexo-circle-of-friends",target:"_blank"},"FriendCircle")],-1)),Q=w(()=>Object(c["createElementVNode"])("div",null,[Object(c["createTextVNode"])("Design by "),Object(c["createElementVNode"])("a",{href:"https://meuicat.com/",target:"_blank"},"iCat")],-1)),K={id:"cf-footer-info"},z={class:"cf-data-friends"},U=w(()=>Object(c["createElementVNode"])("span",{class:"cf-label"},"订阅",-1)),Z={class:"cf-message"},G={class:"cf-data-active"},J=w(()=>Object(c["createElementVNode"])("span",{class:"cf-label"},"活跃",-1)),H={class:"cf-message"},q={class:"cf-data-article"},X=w(()=>Object(c["createElementVNode"])("span",{class:"cf-label"},"日志",-1)),W={class:"cf-message"},$={style:{display:"flex"}},ee={class:"cf-data-lastupdated"},te=w(()=>Object(c["createElementVNode"])("div",{id:"cf-overlay",class:"cf-new-add",onclick:"closeShow()"},null,-1)),ae=w(()=>Object(c["createElementVNode"])("div",{id:"cf-overshow",class:"cf-new-add"},null,-1));function ce(e,t,a,o,l,n){return Object(c["openBlock"])(),Object(c["createElementBlock"])("div",k,[(Object(c["openBlock"])(!0),Object(c["createElementBlock"])(c["Fragment"],null,Object(c["renderList"])(a.all_data["article_data"].slice(0,l.current_arcitle_num),(e,o)=>(Object(c["openBlock"])(),Object(c["createElementBlock"])("div",{key:o,class:"cf-article-item"},[Object(c["createElementVNode"])("div",V,[Object(c["createElementVNode"])("a",{class:"cf-article-title",href:e.link,target:"_blank",rel:"noopener nofollow","data-title":e.title},Object(c["toDisplayString"])(e.title),9,A),Object(c["createElementVNode"])("div",N,[Object(c["createElementVNode"])("img",{class:"cf-img-avatar avatar no-lightbox",src:e.avatar,alt:"avatar",onError:t[0]||(t[0]=e=>n.loadDefaultImg(e))},null,40,E),Object(c["createElementVNode"])("span",{class:"cf-article-author",onClick:t=>n.open_article_card(e.link)},Object(c["toDisplayString"])(e.author),9,y),Object(c["createElementVNode"])("span",B,["created"===a.Config.sort_rule?(Object(c["openBlock"])(),Object(c["createElementBlock"])("span",L,[I,Object(c["createTextVNode"])(Object(c["toDisplayString"])(e.created),1)])):Object(c["createCommentVNode"])("",!0),"updated"===a.Config.sort_rule?(Object(c["openBlock"])(),Object(c["createElementBlock"])("span",M,[S,Object(c["createTextVNode"])(Object(c["toDisplayString"])(e.updated),1)])):Object(c["createCommentVNode"])("",!0)])])])]))),128)),Object(c["createElementVNode"])("div",T,[Object(c["createElementVNode"])("div",{id:"cf-more",class:"cf-new-add",onClick:t[1]||(t[1]=e=>n.loadMoreArticle())},[l.is_ended?(Object(c["openBlock"])(),Object(c["createElementBlock"])("small",D,"一切皆有尽头！")):(Object(c["openBlock"])(),Object(c["createElementBlock"])("i",F))]),Object(c["createElementVNode"])("div",P,[R,Y,Q,Object(c["createElementVNode"])("div",K,[Object(c["createElementVNode"])("div",z,[U,Object(c["createElementVNode"])("span",Z,Object(c["toDisplayString"])(a.all_data.statistical_data.friends_num),1)]),Object(c["createElementVNode"])("div",G,[J,Object(c["createElementVNode"])("span",H,Object(c["toDisplayString"])(a.all_data.statistical_data.active_num),1)]),Object(c["createElementVNode"])("div",q,[X,Object(c["createElementVNode"])("span",W,Object(c["toDisplayString"])(a.all_data.statistical_data.article_num),1)])]),Object(c["createElementVNode"])("div",$,[Object(c["createElementVNode"])("span",ee,"更新于："+Object(c["toDisplayString"])(a.all_data["statistical_data"]["last_updated_time"]),1),Object(c["createElementVNode"])("span",{class:"cf-setting-btn",style:{"margin-left":"8px"},onClick:t[2]||(t[2]=e=>n.open_manage_panel())},"设置")])]),te,ae])])}var oe={name:"ArticleBody",emits:["show_article_card","open_manage_panel"],data(){return{current_arcitle_num:this.all_data["statistical_data"]["article_num"]>20?20:this.all_data["statistical_data"]["article_num"],is_ended:this.all_data["statistical_data"]["article_num"]<=20}},methods:{loadMoreArticle(){this.current_arcitle_num+=this.Config.page_turning_number,this.current_arcitle_num>=this.all_data["statistical_data"]["article_num"]&&(this.is_ended=!0),console.log(this.is_ended)},loadDefaultImg(e){e.target.setAttribute("src",this.Config.error_img)},open_article_card(e){this.$emit("show_article_card",e)},open_manage_panel(){this.$emit("open_manage_panel")}},props:["Config","all_data"]};a("ff61");const le=v()(oe,[["render",ce],["__scopeId","data-v-56cae500"]]);var ne=le;const re=e=>(Object(c["pushScopeId"])("data-v-31c20c7f"),e=e(),Object(c["popScopeId"])(),e),ie={id:"cf-overlay-group"},se={key:0,class:"cf-overshow"},de={class:"cf-overshow-head"},pe=["src"],be=["href"],me={key:0},fe=re(()=>Object(c["createElementVNode"])("div",{class:"cf-overshow-content-tail"},[Object(c["createElementVNode"])("span",{style:{"font-style":"italic","font-size":"16px",color:"gray"}},"该作者最近暂无文章喵=^ω^=")],-1)),ue=[fe],he={key:1},ge=["href","data-title"];function Oe(e,t,a,o,l,n){return Object(c["openBlock"])(),Object(c["createElementBlock"])("div",ie,[Object(c["createElementVNode"])("div",{id:"cf-overlay",onClick:t[0]||(t[0]=(...e)=>n.close_article_card&&n.close_article_card(...e))}),Object(c["createVNode"])(c["Transition"],{name:"fade"},{default:Object(c["withCtx"])(()=>[l.show?(Object(c["openBlock"])(),Object(c["createElementBlock"])("div",se,[Object(c["createElementVNode"])("div",de,[Object(c["createElementVNode"])("img",{class:"cf-img-avatar avatar",src:a.article_card_data.statistical_data.avatar,onError:t[1]||(t[1]=e=>n.loadDefaultImg(e)),alt:"avatar"},null,40,pe),Object(c["createElementVNode"])("a",{class:"",target:"_blank",rel:"noopener nofollow",href:a.article_card_data.statistical_data.link},Object(c["toDisplayString"])(a.article_card_data.statistical_data.name),9,be)]),0===a.article_card_data.article_data.length?(Object(c["openBlock"])(),Object(c["createElementBlock"])("div",me,ue)):(Object(c["openBlock"])(),Object(c["createElementBlock"])("div",he,[(Object(c["openBlock"])(!0),Object(c["createElementBlock"])(c["Fragment"],null,Object(c["renderList"])(a.article_card_data.article_data,(e,t)=>(Object(c["openBlock"])(),Object(c["createElementBlock"])("div",{key:t,class:Object(c["normalizeClass"])(a.article_card_data.article_data.length-1===t?"cf-overshow-content-tail":"cf-overshow-content")},[Object(c["createElementVNode"])("p",null,[Object(c["createElementVNode"])("a",{class:"cf-article-title",href:e.link,target:"_blank",rel:"noopener nofollow","data-title":e.title},Object(c["toDisplayString"])(e.title),9,ge),Object(c["createElementVNode"])("span",null,Object(c["toDisplayString"])(e.created),1)])],2))),128))]))])):Object(c["createCommentVNode"])("",!0)]),_:1})])}var Ce={name:"ArticleCard",emits:["close_article_card"],data(){return{show:!1}},methods:{close_article_card(){this.show=!1,setTimeout(()=>this.$emit("close_article_card"),0)},loadDefaultImg(e){e.target.setAttribute("src",this.Config.error_img)}},mounted(){setTimeout(()=>this.show=!0,100)},props:["Config","article_card_data"]};a("7d5b");const je=v()(Ce,[["render",Oe],["__scopeId","data-v-31c20c7f"]]);var ve=je;const _e=e=>(Object(c["pushScopeId"])("data-v-34921c7c"),e=e(),Object(c["popScopeId"])(),e),xe=_e(()=>Object(c["createElementVNode"])("div",{id:"cf-manage-overlay"},null,-1)),we={class:"cf-pannel-area"},ke=_e(()=>Object(c["createElementVNode"])("path",{fill:"currentColor",d:"M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"},null,-1)),Ve=[ke];function Ae(e,t,a,o,l,n){const r=Object(c["resolveComponent"])("ManagePanelLogin"),i=Object(c["resolveComponent"])("ManagePanelMain"),s=Object(c["resolveComponent"])("el-container");return Object(c["openBlock"])(),Object(c["createElementBlock"])("div",null,[xe,Object(c["createVNode"])(s,{class:"cf-manage-pannel"},{default:Object(c["withCtx"])(()=>[Object(c["createElementVNode"])("div",we,[(Object(c["openBlock"])(),Object(c["createElementBlock"])("svg",{class:"cf-manage-close-btn",onClick:t[0]||(t[0]=(...e)=>n.close_manage_panel&&n.close_manage_panel(...e)),viewBox:"0 0 1024 1024",xmlns:"http://www.w3.org/2000/svg","data-v-029747aa":""},Ve)),l.show_login_page?(Object(c["openBlock"])(),Object(c["createBlock"])(r,{key:0,Config:a.Config,onLogin_success:n.login_success},null,8,["Config","onLogin_success"])):(Object(c["openBlock"])(),Object(c["createBlock"])(i,{key:1,Config:a.Config,onLogout:n.logout},null,8,["Config","onLogout"]))])]),_:1})])}const Ne=e=>(Object(c["pushScopeId"])("data-v-735984d8"),e=e(),Object(c["popScopeId"])(),e),Ee=Ne(()=>Object(c["createElementVNode"])("svg",{class:"cf-manage-logo",version:"1.1",width:"49px",height:"53px",viewBox:"0 0 49.0 53.0",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"},[Object(c["createElementVNode"])("defs",null,[Object(c["createElementVNode"])("clipPath",{id:"10910911211111355521089995"},[Object(c["createElementVNode"])("path",{d:"M1000,0 L1000,1235 L0,1235 L0,0 L1000,0 Z"})]),Object(c["createElementVNode"])("filter",{id:"104106489998559712197112",x:"-10.4038184%",y:"-8.78844516%",filterUnits:"userSpaceOnUse",width:"126.009546%",height:"121.971113%"},[Object(c["createElementVNode"])("feGaussianBlur",{stdDeviation:"1",in:"SourceAlpha",result:"103112104511175211312010049"}),Object(c["createElementVNode"])("feOffset",{dx:"1",dy:"1",in:"103112104511175211312010049",result:"1001171155611757555056104"}),Object(c["createElementVNode"])("feColorMatrix",{values:"0 0 0 0.0 0 0 0 0 0.4855076886605525 0 0 0 0 0.39303003367759 0 0 0 0 0.618950263603584 0",type:"matrix",in:"1001171155611757555056104"})]),Object(c["createElementVNode"])("clipPath",{id:"12251106104121101109106107109"},[Object(c["createElementVNode"])("path",{d:"M35.5554004,0 C37.1526201,-4.54925271e-15 38.4474225,1.2948024 38.4474225,2.8920221 L38.4474225,42.6222859 C38.4474225,44.2195056 37.1526201,45.514308 35.5554004,45.514308 L2.8920221,45.514308 C1.2948024,45.514308 2.41604905e-15,44.2195056 0,42.6222859 L0,2.8920221 C-1.95603e-16,1.2948024 1.2948024,2.95793976e-15 2.8920221,0 L35.5554004,0 Z"})]),Object(c["createElementVNode"])("clipPath",{id:"109114106101120501221195451"},[Object(c["createElementVNode"])("path",{d:"M32.2238978,39.012264 C32.4393566,39.012264 32.6140205,39.1869279 32.6140205,39.4023867 C32.6140205,39.6178454 32.4393566,39.7925093 32.2238978,39.7925093 L0.39012264,39.7925093 C0.174663855,39.7925093 2.63860911e-17,39.6178454 0,39.4023867 C-2.63860911e-17,39.1869279 0.174663855,39.012264 0.39012264,39.012264 L32.2238978,39.012264 Z M32.2238978,35.761242 C32.4393566,35.761242 32.6140205,35.9359059 32.6140205,36.1513647 C32.6140205,36.3668234 32.4393566,36.5414873 32.2238978,36.5414873 L0.39012264,36.5414873 C0.174663855,36.5414873 2.63860911e-17,36.3668234 0,36.1513647 C-2.63860911e-17,35.9359059 0.174663855,35.761242 0.39012264,35.761242 L32.2238978,35.761242 Z M32.2238978,32.51022 C32.4393566,32.51022 32.6140205,32.6848839 32.6140205,32.9003427 C32.6140205,33.1158014 32.4393566,33.2904653 32.2238978,33.2904653 L0.39012264,33.2904653 C0.174663855,33.2904653 4.58326451e-13,33.1158014 4.58300065e-13,32.9003427 C4.58273678e-13,32.6848839 0.174663855,32.51022 0.39012264,32.51022 L32.2238978,32.51022 Z M32.2238978,29.259198 C32.4393566,29.259198 32.6140205,29.4338619 32.6140205,29.6493207 C32.6140205,29.8647794 32.4393566,30.0394433 32.2238978,30.0394433 L0.39012264,30.0394433 C0.174663855,30.0394433 2.63860911e-17,29.8647794 0,29.6493207 C-2.63860911e-17,29.4338619 0.174663855,29.259198 0.39012264,29.259198 L32.2238978,29.259198 Z M32.2238978,26.008176 C32.4393566,26.008176 32.6140205,26.1828399 32.6140205,26.3982987 C32.6140205,26.6137574 32.4393566,26.7884213 32.2238978,26.7884213 L0.39012264,26.7884213 C0.174663855,26.7884213 4.58326451e-13,26.6137574 4.58300065e-13,26.3982987 C4.58273678e-13,26.1828399 0.174663855,26.008176 0.39012264,26.008176 L32.2238978,26.008176 Z M32.2238978,22.757154 C32.4393566,22.757154 32.6140205,22.9318179 32.6140205,23.1472767 C32.6140205,23.3627354 32.4393566,23.5373993 32.2238978,23.5373993 L0.39012264,23.5373993 C0.174663855,23.5373993 2.63860911e-17,23.3627354 0,23.1472767 C-2.63860911e-17,22.9318179 0.174663855,22.757154 0.39012264,22.757154 L32.2238978,22.757154 Z M32.2238978,19.506132 C32.4393566,19.506132 32.6140205,19.6807959 32.6140205,19.8962547 C32.6140205,20.1117134 32.4393566,20.2863773 32.2238978,20.2863773 L0.39012264,20.2863773 C0.174663855,20.2863773 4.58326451e-13,20.1117134 4.58300065e-13,19.8962547 C4.58273678e-13,19.6807959 0.174663855,19.506132 0.39012264,19.506132 L32.2238978,19.506132 Z M32.2238978,16.25511 C32.4393566,16.25511 32.6140205,16.4297739 32.6140205,16.6452326 C32.6140205,16.8606914 32.4393566,17.0353553 32.2238978,17.0353553 L0.39012264,17.0353553 C0.174663855,17.0353553 2.63860911e-17,16.8606914 0,16.6452326 C-2.63860911e-17,16.4297739 0.174663855,16.25511 0.39012264,16.25511 L32.2238978,16.25511 Z M32.2238978,13.004088 C32.4393566,13.004088 32.6140205,13.1787519 32.6140205,13.3942106 C32.6140205,13.6096694 32.4393566,13.7843333 32.2238978,13.7843333 L0.39012264,13.7843333 C0.174663855,13.7843333 4.58326451e-13,13.6096694 4.58300065e-13,13.3942106 C4.58273678e-13,13.1787519 0.174663855,13.004088 0.39012264,13.004088 L32.2238978,13.004088 Z M32.2238978,9.753066 C32.4393566,9.753066 32.6140205,9.92772986 32.6140205,10.1431886 C32.6140205,10.3586474 32.4393566,10.5333113 32.2238978,10.5333113 L0.39012264,10.5333113 C0.174663855,10.5333113 4.58326451e-13,10.3586474 4.58300065e-13,10.1431886 C4.58273678e-13,9.92772986 0.174663855,9.753066 0.39012264,9.753066 L32.2238978,9.753066 Z M32.2238978,6.502044 C32.4393566,6.502044 32.6140205,6.67670786 32.6140205,6.89216664 C32.6140205,7.10762543 32.4393566,7.28228928 32.2238978,7.28228928 L0.39012264,7.28228928 C0.174663855,7.28228928 2.63860911e-17,7.10762543 0,6.89216664 C-2.63860911e-17,6.67670786 0.174663855,6.502044 0.39012264,6.502044 L32.2238978,6.502044 Z M32.2238978,3.251022 C32.4393566,3.251022 32.6140205,3.42568586 32.6140205,3.64114464 C32.6140205,3.85660343 32.4393566,4.03126728 32.2238978,4.03126728 L0.39012264,4.03126728 C0.174663855,4.03126728 4.58326451e-13,3.85660343 4.58300065e-13,3.64114464 C4.58273678e-13,3.42568586 0.174663855,3.251022 0.39012264,3.251022 L32.2238978,3.251022 Z M32.2238978,0 C32.4393566,2.90251188e-15 32.6140205,0.174663855 32.6140205,0.39012264 C32.6140205,0.605581425 32.4393566,0.78024528 32.2238978,0.78024528 L0.39012264,0.78024528 C0.174663855,0.78024528 2.63860911e-17,0.605581425 0,0.39012264 C-2.63860911e-17,0.174663855 0.174663855,3.95791367e-17 0.39012264,0 L32.2238978,0 Z"})]),Object(c["createElementVNode"])("clipPath",{id:"5399112495657099106120"},[Object(c["createElementVNode"])("path",{d:"M18.5516738,7.75655388 C19.2710242,7.75655388 19.9040525,7.84647267 20.4507588,8.02631026 C20.997465,8.20614785 21.5441713,8.46151723 22.0908776,8.79241839 C22.3786177,8.99383649 22.5224878,9.25280262 22.5224878,9.56931678 C22.5224878,9.78512189 22.4361658,9.98653999 22.2635217,10.1735711 C22.0908776,10.3606022 21.896653,10.4541177 21.6808479,10.4541177 C21.5369778,10.4541177 21.3787207,10.4109567 21.2060766,10.3246347 C20.7025314,10.0656685 20.2853082,9.88583094 19.954407,9.78512189 C19.6235059,9.68441284 19.2134762,9.63405831 18.7243179,9.63405831 C17.5158093,9.63405831 16.5554766,9.98294324 15.8433197,10.6807131 C15.1311629,11.3784829 14.7750844,12.3172352 14.7750844,13.4969697 C14.7750844,14.6767043 15.1311629,15.6154566 15.8433197,16.3132264 C16.5554766,17.0109963 17.5158093,17.3598812 18.7243179,17.3598812 C19.2134762,17.3598812 19.6235059,17.3095267 19.954407,17.2088176 C20.2853082,17.1081086 20.7025314,16.928271 21.2060766,16.6693048 C21.3787207,16.5829828 21.5369778,16.5398218 21.6808479,16.5398218 C21.896653,16.5398218 22.0908776,16.6333373 22.2635217,16.8203684 C22.4361658,17.0073995 22.5224878,17.2088176 22.5224878,17.4246227 C22.5224878,17.7411369 22.3786177,18.000103 22.0908776,18.2015211 C21.5441713,18.5324223 20.997465,18.7877916 20.4507588,18.9676292 C19.9040525,19.1474668 19.2710242,19.2373856 18.5516738,19.2373856 C17.5301963,19.2373856 16.5734603,19.0071935 15.6814659,18.5468093 C14.7750844,18.072038 14.0629276,17.3958487 13.5449953,16.5182413 C13.0270631,15.6406338 12.7680969,14.6335433 12.7680969,13.4969697 C12.7680969,12.3316222 13.0342566,11.3101447 13.5665758,10.4325372 C14.0845081,9.58370379 14.7786812,8.92549821 15.6490951,8.45792048 C16.5195091,7.99034274 17.4870353,7.75655388 18.5516738,7.75655388 Z M11.4592512,3.91522295 C11.7182174,3.91522295 11.941216,4.0087385 12.1282471,4.19576959 C12.3152782,4.38280069 12.4087937,4.6057993 12.4087937,4.86476543 C12.4087937,5.12373156 12.3152782,5.34313342 12.1282471,5.52297101 C11.941216,5.7028086 11.7182174,5.79272739 11.4592512,5.79272739 L4.33768267,5.79272739 C4.16503858,5.79272739 4.07871654,5.87904944 4.07871654,6.05169352 L4.07871654,10.5188593 L10.7039334,10.5188593 C10.9628995,10.5188593 11.1858981,10.6123748 11.3729292,10.7994059 C11.5599603,10.986437 11.6534758,11.2094356 11.6534758,11.4684017 C11.6534758,11.7273679 11.5599603,11.9467697 11.3729292,12.1266073 C11.1858981,12.3064449 10.9628995,12.3963637 10.7039334,12.3963637 L4.07871654,12.3963637 L4.07871654,18.1367796 C4.07871654,18.4101327 3.97800749,18.6439216 3.77658939,18.8381462 C3.57517129,19.0323708 3.33778567,19.1294831 3.06443253,19.1294831 C2.7910794,19.1294831 2.55729053,19.0323708 2.36306593,18.8381462 C2.16884133,18.6439216 2.07172904,18.4101327 2.07172904,18.1367796 L2.07172904,4.92950696 C2.07172904,4.65615382 2.16884133,4.41876821 2.36306593,4.21735011 C2.55729053,4.015932 2.7910794,3.91522295 3.06443253,3.91522295 L11.4592512,3.91522295 Z"})]),Object(c["createElementVNode"])("clipPath",{id:"1024511854541210110121103"},[Object(c["createElementVNode"])("path",{d:"M24.9684989,1.4692119 L24.9684989,21.6833967 L-0.374282015,21.6833967 L-0.374282015,1.4692119 L24.9684989,1.4692119 Z M18.5516738,7.75655388 C17.4870353,7.75655388 16.5195091,7.99034274 15.6490951,8.45792048 C14.7786812,8.92549821 14.0845081,9.58370379 13.5665758,10.4325372 C13.0342566,11.3101447 12.7680969,12.3316222 12.7680969,13.4969697 C12.7680969,14.6335433 13.0270631,15.6406338 13.5449953,16.5182413 C14.0629276,17.3958487 14.7750844,18.072038 15.6814659,18.5468093 C16.5734603,19.0071935 17.5301963,19.2373856 18.5516738,19.2373856 C19.2710242,19.2373856 19.9040525,19.1474668 20.4507588,18.9676292 C20.997465,18.7877916 21.5441713,18.5324223 22.0908776,18.2015211 C22.3786177,18.000103 22.5224878,17.7411369 22.5224878,17.4246227 C22.5224878,17.2088176 22.4361658,17.0073995 22.2635217,16.8203684 C22.0908776,16.6333373 21.896653,16.5398218 21.6808479,16.5398218 C21.5369778,16.5398218 21.3787207,16.5829828 21.2060766,16.6693048 C20.7025314,16.928271 20.2853082,17.1081086 19.954407,17.2088176 C19.6235059,17.3095267 19.2134762,17.3598812 18.7243179,17.3598812 C17.5158093,17.3598812 16.5554766,17.0109963 15.8433197,16.3132264 C15.1311629,15.6154566 14.7750844,14.6767043 14.7750844,13.4969697 C14.7750844,12.3172352 15.1311629,11.3784829 15.8433197,10.6807131 C16.5554766,9.98294324 17.5158093,9.63405831 18.7243179,9.63405831 C19.2134762,9.63405831 19.6235059,9.68441284 19.954407,9.78512189 C20.2853082,9.88583094 20.7025314,10.0656685 21.2060766,10.3246347 C21.3787207,10.4109567 21.5369778,10.4541177 21.6808479,10.4541177 C21.896653,10.4541177 22.0908776,10.3606022 22.2635217,10.1735711 C22.4361658,9.98653999 22.5224878,9.78512189 22.5224878,9.56931678 C22.5224878,9.25280262 22.3786177,8.99383649 22.0908776,8.79241839 C21.5441713,8.46151723 20.997465,8.20614785 20.4507588,8.02631026 C19.9040525,7.84647267 19.2710242,7.75655388 18.5516738,7.75655388 Z M11.4592512,3.91522295 L3.06443253,3.91522295 C2.7910794,3.91522295 2.55729053,4.015932 2.36306593,4.21735011 C2.16884133,4.41876821 2.07172904,4.65615382 2.07172904,4.92950696 L2.07172904,18.1367796 C2.07172904,18.4101327 2.16884133,18.6439216 2.36306593,18.8381462 C2.55729053,19.0323708 2.7910794,19.1294831 3.06443253,19.1294831 C3.33778567,19.1294831 3.57517129,19.0323708 3.77658939,18.8381462 C3.97800749,18.6439216 4.07871654,18.4101327 4.07871654,18.1367796 L4.07871654,12.3963637 L10.7039334,12.3963637 C10.9628995,12.3963637 11.1858981,12.3064449 11.3729292,12.1266073 C11.5599603,11.9467697 11.6534758,11.7273679 11.6534758,11.4684017 C11.6534758,11.2094356 11.5599603,10.986437 11.3729292,10.7994059 C11.1858981,10.6123748 10.9628995,10.5188593 10.7039334,10.5188593 L4.07871654,10.5188593 L4.07871654,6.05169352 C4.07871654,5.87904944 4.16503858,5.79272739 4.33768267,5.79272739 L11.4592512,5.79272739 C11.7182174,5.79272739 11.941216,5.7028086 12.1282471,5.52297101 C12.3152782,5.34313342 12.4087937,5.12373156 12.4087937,4.86476543 C12.4087937,4.6057993 12.3152782,4.38280069 12.1282471,4.19576959 C11.941216,4.0087385 11.7182174,3.91522295 11.4592512,3.91522295 Z"})]),Object(c["createElementVNode"])("filter",{id:"48109491091221001025211656",x:"-10.0570244%",y:"-8.78844516%",filterUnits:"userSpaceOnUse",width:"125.142561%",height:"121.971113%"},[Object(c["createElementVNode"])("feGaussianBlur",{stdDeviation:"1",in:"SourceAlpha",result:"1201031101179748101455153"}),Object(c["createElementVNode"])("feOffset",{dx:"1",dy:"1",in:"1201031101179748101455153",result:"113110975101124950122114"}),Object(c["createElementVNode"])("feColorMatrix",{values:"0 0 0 0.09411764705882353 0 0 0 0 0.6 0 0 0 0 0.9098039215686274 0 0 0 0 1.0 0",type:"matrix",in:"113110975101124950122114"})]),Object(c["createElementVNode"])("clipPath",{id:"116995310511811611411712249"},[Object(c["createElementVNode"])("path",{d:"M36.8811736,0 C38.4783933,3.51835451e-15 39.7731957,1.2948024 39.7731957,2.8920221 L39.7731957,42.6222859 C39.7731957,44.2195056 38.4783933,45.514308 36.8811736,45.514308 L2.8920221,45.514308 C1.2948024,45.514308 6.67189726e-15,44.2195056 0,42.6222859 L0,2.8920221 C-6.3969221e-16,1.2948024 1.2948024,-1.03886313e-15 2.8920221,0 L36.8811736,0 Z"})]),Object(c["createElementVNode"])("linearGradient",{id:"1135410501015012010910899",x1:"5.53187308px",y1:"45.514308px",x2:"38.862465px",y2:"0px",gradientUnits:"userSpaceOnUse"},[Object(c["createElementVNode"])("stop",{"stop-color":"#1599D9",offset:"0%"}),Object(c["createElementVNode"])("stop",{"stop-color":"#1C96FF",offset:"100%"})]),Object(c["createElementVNode"])("clipPath",{id:"11211055514954565695104"},[Object(c["createElementVNode"])("path",{d:"M10.4058698,0 C10.6929283,0 10.9401176,0.101676806 11.1474376,0.305030419 C11.3547576,0.508384032 11.4584176,0.750844109 11.4584176,1.03241065 C11.4584176,1.31397719 11.3547576,1.55252662 11.1474376,1.74805894 C10.9401176,1.94359126 10.6929283,2.04135742 10.4058698,2.04135742 L2.51176168,2.04135742 C2.32038936,2.04135742 2.22470321,2.13521294 2.22470321,2.32292396 L2.22470321,7.17994679 L9.56861594,7.17994679 C9.85567441,7.17994679 10.1028637,7.2816236 10.3101837,7.48497721 C10.5175037,7.68833083 10.6211637,7.9307909 10.6211637,8.21235744 C10.6211637,8.49392398 10.5175037,8.73247342 10.3101837,8.92800574 C10.1028637,9.12353806 9.85567441,9.22130422 9.56861594,9.22130422 L2.22470321,9.22130422 L2.22470321,15.4626959 C2.22470321,15.759905 2.11306935,16.014097 1.88980165,16.2252719 C1.66653394,16.4364468 1.403397,16.5420343 1.10039083,16.5420343 C0.797384661,16.5420343 0.538234646,16.4364468 0.322940788,16.2252719 C0.107646929,16.014097 0,15.759905 0,15.4626959 L0,1.10280229 C0,0.805593159 0.107646929,0.547490496 0.322940788,0.328494298 C0.538234646,0.109498099 0.797384661,0 1.10039083,0 L10.4058698,0 Z"})]),Object(c["createElementVNode"])("clipPath",{id:"99971031031051041175097104"},[Object(c["createElementVNode"])("path",{d:"M6.41097268,0 C7.20835734,0 7.91005584,0.09776616 8.51606818,0.29329848 C9.12208053,0.4888308 9.72809287,0.766486695 10.3341052,1.12626616 C10.6530591,1.34526236 10.812536,1.6268289 10.812536,1.97096579 C10.812536,2.20560457 10.7168498,2.42460077 10.5254775,2.62795438 C10.3341052,2.83130799 10.1188114,2.9329848 9.87959595,2.9329848 C9.72011902,2.9329848 9.5446944,2.88605704 9.35332208,2.79220153 C8.79515281,2.51063499 8.33266971,2.31510267 7.96587277,2.20560457 C7.59907582,2.09610647 7.14456657,2.04135742 6.602345,2.04135742 C5.26273876,2.04135742 4.19823024,2.42069012 3.40881943,3.17935552 C2.61940861,3.93802093 2.22470321,4.95869964 2.22470321,6.24139166 C2.22470321,7.52408368 2.61940861,8.54476239 3.40881943,9.30342779 C4.19823024,10.0620932 5.26273876,10.4414259 6.602345,10.4414259 C7.14456657,10.4414259 7.59907582,10.3866768 7.96587277,10.2771787 C8.33266971,10.1676806 8.79515281,9.97214832 9.35332208,9.69058178 C9.5446944,9.59672627 9.72011902,9.54979851 9.87959595,9.54979851 C10.1188114,9.54979851 10.3341052,9.65147532 10.5254775,9.85482893 C10.7168498,10.0581825 10.812536,10.2771787 10.812536,10.5118175 C10.812536,10.8559544 10.6530591,11.137521 10.3341052,11.3565172 C9.72809287,11.7162966 9.12208053,11.9939525 8.51606818,12.1894848 C7.91005584,12.3850172 7.20835734,12.4827833 6.41097268,12.4827833 C5.27868646,12.4827833 4.21816486,12.2325019 3.22940788,11.7319392 C2.22470321,11.2157339 1.43529239,10.4805324 0.861175434,9.52633463 C0.287058478,8.57213691 0,7.47715592 0,6.24139166 C0,4.97434222 0.295032325,3.86371865 0.885096974,2.90952092 C1.45921393,1.98660837 2.22869013,1.27096008 3.19352557,0.762576048 C4.15836101,0.254192016 5.23084338,0 6.41097268,0 Z"})]),Object(c["createElementVNode"])("clipPath",{id:"1071161211041001135511749100"},[Object(c["createElementVNode"])("path",{d:"M33.4170937,39.012264 C33.6325525,39.012264 33.8072163,39.1869279 33.8072163,39.4023867 C33.8072163,39.6178454 33.6325525,39.7925093 33.4170937,39.7925093 L0.39012264,39.7925093 C0.174663855,39.7925093 1.43329237e-14,39.6178454 1.42108547e-14,39.4023867 C1.40887857e-14,39.1869279 0.174663855,39.012264 0.39012264,39.012264 L33.4170937,39.012264 Z M33.4170937,35.761242 C33.6325525,35.761242 33.8072163,35.9359059 33.8072163,36.1513647 C33.8072163,36.3668234 33.6325525,36.5414873 33.4170937,36.5414873 L0.39012264,36.5414873 C0.174663855,36.5414873 1.43329237e-14,36.3668234 1.42108547e-14,36.1513647 C1.40887857e-14,35.9359059 0.174663855,35.761242 0.39012264,35.761242 L33.4170937,35.761242 Z M33.4170937,32.51022 C33.6325525,32.51022 33.8072163,32.6848839 33.8072163,32.9003427 C33.8072163,33.1158014 33.6325525,33.2904653 33.4170937,33.2904653 L0.39012264,33.2904653 C0.174663855,33.2904653 1.43329237e-14,33.1158014 1.42108547e-14,32.9003427 C1.40887857e-14,32.6848839 0.174663855,32.51022 0.39012264,32.51022 L33.4170937,32.51022 Z M9.018,29.259 L20.4403818,29.2613708 C21.2278252,29.6485228 22.0507902,29.9083432 22.9059208,30.0410822 L0.39012264,30.0394433 C0.174663855,30.0394433 1.43329237e-14,29.8647794 1.42108547e-14,29.6493207 C1.40887857e-14,29.4338619 0.174663855,29.259198 0.39012264,29.259198 L5.20389429,29.2600463 C5.718023,29.7595623 6.38089349,30.0277851 7.10500243,30.0277851 C7.82576573,30.0277851 8.48693174,29.7624828 9.00702418,29.27056 L9.018,29.259 Z M33.4170937,29.259198 C33.6325525,29.259198 33.8072163,29.4338619 33.8072163,29.6493207 C33.8072163,29.8647794 33.6325525,30.0394433 33.4170937,30.0394433 L25.7302627,30.0403828 C26.1327193,29.9789465 26.5154259,29.8901411 26.8782359,29.773079 C27.3056312,29.6351781 27.7300823,29.4644485 28.1515269,29.2613979 L33.4170937,29.259198 Z M9.832,26.008 L17.1147613,26.0092683 C17.1860601,26.14672 17.2618302,26.2821536 17.3420787,26.4155287 C17.4188676,26.5431539 17.4988339,26.6678036 17.5819479,26.7894511 L9.832,26.788 L9.832,26.008 Z M4.401,26.008 L4.401,26.788 L0.39012264,26.7884213 C0.174663855,26.7884213 7.13181345e-15,26.6137574 7.10542736e-15,26.3982987 C7.07904127e-15,26.1828399 0.174663855,26.008176 0.39012264,26.008176 L4.401,26.008 Z M33.4170937,26.008176 C33.6325525,26.008176 33.8072163,26.1828399 33.8072163,26.3982987 C33.8072163,26.6137574 33.6325525,26.7884213 33.4170937,26.7884213 L30.2701508,26.7883211 C30.2745141,26.7268404 30.2767178,26.6646946 30.2767178,26.6019318 C30.2767178,26.3978062 30.2511397,26.1993099 30.201982,26.0081116 L33.4170937,26.008176 Z M33.4170937,22.757154 C33.6325525,22.757154 33.8072163,22.9318179 33.8072163,23.1472767 C33.8072163,23.3627354 33.6325525,23.5373993 33.4170937,23.5373993 L21.8952011,23.5385629 C21.8012501,23.308749 21.7391891,23.0499954 21.7094227,22.7572055 L33.4170937,22.757154 Z M4.401,22.757 L4.401,23.537 L0.39012264,23.5373993 C0.174663855,23.5373993 1.43329237e-14,23.3627354 1.42108547e-14,23.1472767 C1.40887857e-14,22.9318179 0.174663855,22.757154 0.39012264,22.757154 L4.401,22.757 Z M9.832,22.757 L16.2681945,22.758323 C16.2803928,23.0226669 16.3040329,23.2825346 16.3391444,23.5377581 L9.832,23.537 L9.832,22.757 Z M33.4170937,19.506132 C33.6325525,19.506132 33.8072163,19.6807959 33.8072163,19.8962547 C33.8072163,20.1117134 33.6325525,20.2863773 33.4170937,20.2863773 L28.9244679,20.2878786 C29.1584801,20.1572036 29.3733991,19.9876187 29.564583,19.7844653 C29.6481809,19.6956336 29.7251644,19.603038 29.79513,19.5070154 L33.4170937,19.506132 Z M4.401,19.506 L4.401,20.286 L0.39012264,20.2863773 C0.174663855,20.2863773 2.63860911e-17,20.1117134 0,19.8962547 C-2.63860911e-17,19.6807959 0.174663855,19.506132 0.39012264,19.506132 L4.401,19.506 Z M24.4636541,19.7036786 C24.8586715,19.7036786 25.1601018,19.7399881 25.3604869,19.7998081 C25.6107291,19.8745117 25.9689129,20.0245955 26.4195399,20.2493492 L26.493,20.286 L22.5108335,20.2861368 C22.9312832,19.9367822 23.487479,19.7411743 24.2343844,19.7085629 L24.4636541,19.7036786 Z M4.401,16.255 L4.401,17.035 L0.39012264,17.0353553 C0.174663855,17.0353553 1.43329237e-14,16.8606914 1.42108547e-14,16.6452326 C1.40887857e-14,16.4297739 0.174663855,16.25511 0.39012264,16.25511 L4.401,16.255 Z M19.0877089,16.2543923 C18.7876916,16.4929014 18.5077773,16.7530896 18.248466,17.0344686 L9.832,17.035 L9.832,16.255 L19.0877089,16.2543923 Z M29.5123785,16.254847 L33.4170937,16.25511 C33.6325525,16.25511 33.8072163,16.4297739 33.8072163,16.6452326 C33.8072163,16.8606914 33.6325525,17.0353553 33.4170937,17.0353553 L30.0605773,17.0353624 C29.9311928,16.7470709 29.7462051,16.484445 29.5123785,16.254847 Z M19.0659018,12.9459546 L19.063,13.004 L33.4170937,13.004088 C33.6325525,13.004088 33.8072163,13.1787519 33.8072163,13.3942106 C33.8072163,13.6096694 33.6325525,13.7843333 33.4170937,13.7843333 L18.9253501,13.7851804 C19.0180834,13.5203286 19.0659018,13.2383895 19.0659018,12.9459546 Z M4.401,13.004 L4.401,13.784 L0.39012264,13.7843333 C0.174663855,13.7843333 1.43329237e-14,13.6096694 1.42108547e-14,13.3942106 C1.40887857e-14,13.1787519 0.174663855,13.004088 0.39012264,13.004088 L4.401,13.004 Z M33.4170937,9.753066 C33.6325525,9.753066 33.8072163,9.92772986 33.8072163,10.1431886 C33.8072163,10.3586474 33.6325525,10.5333113 33.4170937,10.5333113 L17.4153587,10.5335234 C17.1022423,10.4070754 16.7637674,10.341337 16.4104814,10.341337 L7.10500243,10.341337 C6.75033818,10.341337 6.41088073,10.406625 6.09681056,10.532172 L0.39012264,10.5333113 C0.174663855,10.5333113 7.13181345e-15,10.3586474 7.10542736e-15,10.1431886 C7.07904127e-15,9.92772986 0.174663855,9.753066 0.39012264,9.753066 L33.4170937,9.753066 Z M33.4170937,6.502044 C33.6325525,6.502044 33.8072163,6.67670786 33.8072163,6.89216664 C33.8072163,7.10762543 33.6325525,7.28228928 33.4170937,7.28228928 L0.39012264,7.28228928 C0.174663855,7.28228928 1.42372408e-14,7.10762543 1.42108547e-14,6.89216664 C1.41844686e-14,6.67670786 0.174663855,6.502044 0.39012264,6.502044 L33.4170937,6.502044 Z M33.4170937,3.251022 C33.6325525,3.251022 33.8072163,3.42568586 33.8072163,3.64114464 C33.8072163,3.85660343 33.6325525,4.03126728 33.4170937,4.03126728 L0.39012264,4.03126728 C0.174663855,4.03126728 1.42372408e-14,3.85660343 1.42108547e-14,3.64114464 C1.41844686e-14,3.42568586 0.174663855,3.251022 0.39012264,3.251022 L33.4170937,3.251022 Z M33.4170937,0 C33.6325525,2.73597842e-15 33.8072163,0.174663855 33.8072163,0.39012264 C33.8072163,0.605581425 33.6325525,0.78024528 33.4170937,0.78024528 L0.39012264,0.78024528 C0.174663855,0.78024528 1.42372408e-14,0.605581425 1.42108547e-14,0.39012264 C1.41844686e-14,0.174663855 0.174663855,3.95791367e-17 0.39012264,0 L33.4170937,0 Z"})])]),Object(c["createElementVNode"])("g",{transform:"translate(-69.0 -70.0)"},[Object(c["createElementVNode"])("g",{"clip-path":"url(#10910911211111355521089995)"},[Object(c["createElementVNode"])("g",{transform:"translate(70.88649839612333 70.21254090036508) rotate(2.0)"},[Object(c["createElementVNode"])("g",{transform:"translate(7.552577486285102 0.0)"},[Object(c["createElementVNode"])("g",{transform:"translate(8.505264770349575 11.774721389520693)"},[Object(c["createElementVNode"])("g",{transform:"translate(0.08497514808244233 0.0)"},[Object(c["createElementVNode"])("text",{transform:"translate(0.0 19.0)","font-family":"MaoKenTangYuan-beta, MaoKenTangYuan (beta)","font-size":"22.09844305416875","font-weight":"normal",fill:"#FFFFFF","text-anchor":"left"},"Fc")])]),Object(c["createElementVNode"])("path",{d:"M35.5554004,2 C35.8017255,2 36.024731,2.09984297 36.1861553,2.26126722 C36.3475795,2.42269147 36.4474225,2.645697 36.4474225,2.8920221 L36.4474225,42.6222859 C36.4474225,42.868611 36.3475795,43.0916165 36.1861553,43.2530408 C36.024731,43.414465 35.8017255,43.514308 35.5554004,43.514308 L2.8920221,43.514308 C2.645697,43.514308 2.42269147,43.414465 2.26126722,43.2530408 C2.09984297,43.0916165 2,42.868611 2,42.6222859 L2,2.8920221 C2,2.645697 2.09984297,2.42269147 2.26126722,2.26126722 C2.42269147,2.09984297 2.645697,2 2.8920221,2 Z",stroke:"none",fill:"#000000",filter:"url(#104106489998559712197112)"}),Object(c["createElementVNode"])("g",{"clip-path":"url(#12251106104121101109106107109)"},[Object(c["createElementVNode"])("polygon",{points:"4.54747351e-13,0 38.4474225,0 38.4474225,45.514308 4.54747351e-13,45.514308 4.54747351e-13,0",stroke:"none",fill:"#15D9B4"}),Object(c["createElementVNode"])("g",{transform:"translate(-6.628588771465857 11.10450350534563)"},[Object(c["createElementVNode"])("image",{x:"-14px",y:"-54px",width:"64px",height:"68px",transform:"scale(1.0 -1.0)","xlink:href":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEEAAABFCAYAAAAVZotTAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAQaADAAQAAAABAAAARQAAAAAJFwaDAAAVf0lEQVR4Ae2b2W4dx3aGV1X3HjiJpm3KsY+DCAJyEMiXvg1gv4TyCHkNHj6PXkK5TSCcK+viIBDsY9mCxGNr4LCn7qp8/6puklsiZW5KuWNRtau6u6b115pqkNlNuEHgBoEbBG4QuEHgBoEbBC5GIFz8+ppvs51rLy81svy09OkPH84a7XLBPqS5d/o7a/+dT1d84YSXMel33/bPtbnnjfxgD869W273/vLj6dOD05zZN3afpvdP3+zZnndYGuX3A0G5dHCnPV6W6Yg/I3zPemK/sV1v91f7G+m3/Jk9syfX6utLu0sXj6j/Zyf8nh14+vgcMAKlNM7vNQC51sAslz7/4rNeiBfhIvor2wm/2WY4tOfhjt2x13YQtm3ttJ8jG57mv7gMYHtut2wnP+P7LZs40Tt2nA/ti/xPdpRfngLzLN+ze/mxPfYyBQyaXxGI0wFdOp63PwCAehTb/2D3QiF+K4zsRfwMYl/bKFR2GDch9jebxHU7CjMbhE/sE5vasfc3tpOu31td62+WehnZuhM1tkVet808I90gTm2WT2yaKxunN4ByzzbSS3sJWH8mf+BgnHJF8GEutXvZw2ogdCIgDugBMDuIP9puHNpRrG0zVhDeWKo+sXk8snEcWRWCNXFg09BYHdYZycKi97t24agmNrCRgzC0Ji+she3qNCIfSRcW2spGqbKjVNtaGto/0k+A8Z3tpoNrArEiCDm8DYABwJHNq5m11QbEH1usx5YrATE0ELA6mrUea4hviZU13u/oLRAobzVE63VrKdfEYFUyiynaAoKt5aFtiQ1xo0tnpEwAQP2cdmwnSTxWEY2rgwAXZCzTviTOHkLUQXwNkQwAYgd1ZTXUxrq1xUBpsNDFpk6AAnlwCUxhCa6gkrXka/760MABel8BwoJcZLYT+chPgMg5SNZNtNzAHc3YqgXAN7UtmpFtNo3FdmZVex0gzsbQj+XSVAAUMdixu2HO6D6H5Yd2AuGjAaw+YBaH0QZMWB4uiLWFQTASawBJQATAC7EFgADJkdSnnT5rAM4WMxzE+5gHFph0xQYwYCxitAA6aTG2tfnMmgXv54jOPNsMvTNHL23bzP7ZXtrPhsJMjFetwk3g/Z6wAghqZQ+b/RCF98LZG+ThgroWAIjAqLF2nIyxWBzT7SgYEwMY4gqogVMERIYjkBIHwtmqGx4wkQMMmZ5Mef7BNswuhDDjYb6A8Brma2w+oxwxwokZzqpitHWAQC3bsSESKEmZ6eJP0LBw6PHu+jtLrgaCi4LZf+D0dFwgBYcinImwWhwgABj7GgNeR+7XIEn5MT2PmEFEJDm3gx5A+NTABUFTLY7wEeoD5QUCxAuEkBg7HIBCsDynnRnP02RpStEJeqOi0ZhsETYQo9aG1N3KT7EiiCvc8CDv22PafD83XA0EepQoGM1+hdPzq61hASZVZZvMhLiggf3bMWwMNmGDgaKzZOfiOlMAV6CzLCIamAcGzrfIwKCtnxy+EHInCtRPEI32T+hAzAJiwLsZFSA+TyqLx6TSQWoDGRsAY8jZ6jzHj/jcPk//hg792X6OEgtv+j3ccEUQNNh9RGFXtj/cgp2PXbYzWmwxmCMCyLhYH68oA4JtQcQm1AJGXic/hjPQFRGxkMKUSMhMZmnKLqgP+KrMGgMXEJgcB8BQQQi+xQkgHkPPAKWJLmolWkDnMw1oJyA8gIvaFgCyxEKNawLfxw1XBEFN7REf2iEO0bG9iWu2wTTMXdaziSvRVxbWIHKD6dmEiFvkN2FhniUaNoJ9hwAj9S+7h6l0iyNtKfnwASvNmElmGfOBRS2mYkbZKYQAQkDHpAFcBgD0YAnCM2KTWvkQ6yjQqR1hQnfSsR3HO3YnyVzSzqVhBRDMfrUtdMITnJ5NxjpHFnMFkbSRhswORIoTAjrBuWCLQQOECuP4ObcY3KDy0gsZkRAIfC30iw945XwrXcCMBhwK/CVLWIAw4fsJddEvws/LiTi6EGAtumOI2ZxgQtcwqQ1+xEaLAxUfoBvwHVRFaOt3KVwZBC2OUIroXq0DBmHNTiBiLO8Q9pa5z8xyhVi4MpQ+kG6AI9BURU/AKShvZJkUIqCZIRUuoIVuhOQEBFFcgK4DBIBFFGRtxAWyMIl6wtC/y/NCXKo5hM9bGyyGNlvAnXDEdnyFbvi9rF1o1IGjr+VwZRBU7SVcsGNrto5+O0Hpj5BJRoKClAkMAzhD5hBCce7hiqIo04a4gXJYjDDkfW8lqCvrkFwvaIA8i3qlVJGVFJFFKfIebhOApTh55xLKAkBCaYbZ3CJpnFGpppPqlR1UW/Yn7PTfwn+6OIuKd8NKIKj6hIVRxUIIk8hoInohQEyFnCsmmUyxPGAY5jG7noAYiQn6QrNpyDOLAFeOWoyJP0V6ScnpHzF0ipGVk4uAdImvimRW5D7DIXFOrakUJvoG68Tw0Bf4DfUEnbqF3sJaxGfoB0Qi3Pfl90cAQU3M4YQhml3rAPw71LzrBtg01JotIhMhb1E6II34IH2BhfCVERyDd4M4wD2+kuIZCEqgLRAIzucdsQAbXJEKJgIAyHOUtcgQzSrKYzihvERycIL/gvWpcOFR4OvhU6zZY/vv4GZeTXQNkfOwIid8Q6WnXdV1bPMcbgiSa8AQQYmOI+6gzJfJVQaIoDzKDNtFpDL5LPHhlZtIp18/RGTAH5lt5waqugJ1sNQNlToATDrGI6DjkFXyVRC3RJ9DQIu45xVcMI0T+51Gv6P4fxHfDbR59XBkP/kIVaNhIuiI2AoAYqZTsasGLRHB32UGcfrhDM1k4FlioOjAAM5laR5031iThC4aXmmAUMM9t5FSluSKQ4DnmykdYCbrGf7IHO5845wwwK/ZCF/6LtceIxcrLIcVOUEu22tmX+KgSVDQ0senTwChK5LcOGaOYgBC6oDwDhHQpyQ/wYFitpUWF4kUIMmzeEYcqKwG3HrQrp7lN5wTMylhKUttVWlhmtE1FQAnX6xhJfAjTuIJlgyZJHzbbf9pv3I5rAxCX13CKN7GsZFy03j1iZ/CXHohcJQqilukNMQ9lCAmABInFcLhEgdDtRFZvmc5TGpTokFViZlSmWNmge5p38WLGtI/zmFMENzXYLFaLaxQHkdhiol8g2XzxvjxjB66cE0QtC02RycsRFRHdt+4L4og3CeTb+pS8w0POHE+83wvfxDvsy1dpbIqV4DwvD/yvnstHLUElbsepVzFVf4OMdTS1PMLmG5IxLOi7QruHIRNGY5LwjVBKK3JoVcDmkUN3efNmboAIjKk+RUKGHpfCC2pFKNAOf9egIlm1SlAdoDyUs8qLtwkZrJKkTQBgKfoJXenIVwcJ31aO3LeID+l5f6ppNcC4ZC62itU0H4Q22VOrIRNsXTUd1dIElAld/a1z4kLlktT2Ms7IC5W/kgTlPMIAJ6lTUytmEDgRL7J94ge2XtQXV99/cTyz9AKF4VrgVAa0jYpK1pCAwzqTKHMK0N0wjTHyokPlBYgLgJKdd8Oouys3bM8rztiBav+tAhXKHnVU9QedmZnG3c6HKG75MNfFK4NgiSsJ6abhlPWV0civAR9Vehh0LfyridQ6UXvVKp8K0SV8vqNYgMcCeVVShAUALAQvMRD4A1mky/r7nxt29e8/+icQA9aDxHUmTothEvf94PvZ6kQrYFquPquUPICpy+v9OxZT7TZfZbz5B4UK0xxuTxLJIFmeCbVWkOmVQBpDaJ8jesq3+r94dqc0DerLjTnPhrSMuKeC/QsogoX9ASqrIL0hN7p+Sw9A0evS1kRVUDwohDNc98lIAgIedYtqXan9a0FgDE7TcP8xk7sFyreI14UPggEWQeRW5Se9IL+9KaX0dKlRqv3JT0DTM/4Dx2AfervfCZLewUA2LwnXHv1dBm07SYm1B5kg5PE+5pteXGF78uxAEuZlS5gfMZa5GJRoKxbOKVXDgeU3CFKJ3BqwBZ5A4EFDBIRpVlTliDCCnsXgs9mXMCdBwE3uXv2Nvp6AkPnDkQdQvhOUweATnDovkgjgPiWPGkGjAaO0GnVILEHCjfM8xd2Nz+wb/uBaXCn4VqcIK0rV5SDF9cFsKJWfZBRCJNsQqB3KEKVeRsM7Dnv8Dc74s+l1FX9IvPkaSIBQPStd5piae2rSFItpdOcMtqIJVZIZwtXRO0sse1WFGhtXzKE36h6cTgT3ou/L73dtH9hs2CbnQ0Ad16Q11gA0KDpXFwAIEUxFWIkoAUUgHKwRLBAU7ku9WcWSN2z19FWMzEnHB9OmIwYFiyQFqRzIucPmbOIyG5S1jP5zPYa+2qstdhgaSc2T698rD/aIztkzPtL9PQP1+IEVZ6xNTB0YjM8Ce2AgSboTJdrJr08jeKMEgWIg9KxvwjvRaGA1ZVFpoMOJplZp0T7jERnQB0sEKO24NlUCeQzHKGNlswZhfRF1c4RBzaE2YX+heL98a/4dTmsxAnLVTUaDsOcA8QFDQQHZk47QiWKhUsefnYQRKTKOjgq54Awwu6dRMAPIFUPAIIA0M6SiFdkx9k4fLFJH/VMn7wPMxSh7zFyBICyrNmuHxIX+X85i+AwhrhHsVOFdUrOipwgDbuNQtxg0Lo8sY7ymbG0ixCv7QJxdYYAcXKEgOyESFlR2CPvlWLoNRpyp6GIEG+kBNWWlJwsMEYo+nY77+k0nPCeaIoOBmZR7wEjzQauG2IzYTwj8PpVh1coRZbSxIvDSiCwaW13mZBDbC8dQnximSvT5YNm4AkA5DsFzR5EeKo80fPaVIH7fDrEOZ0nVJ5pXgMVAIoAwPFimX0ZI0UWhhlfPRBLikk8YSyIxWDKoQt6gWNqJmDgXKDNLInCEto8LoeVQBiD6D8AYYNbIhzFY4ZappyFWzdzKEZgT8ilyy7smzs2jshsOTDReBiZBkbiq8F+RDzL6dHmiYD0rXY/dmM1CaF2RHli7mI84v0xYqO9RQ5lWvposRbr6IbYsKHSPncpvE27Tzog3tUH6vzKOqHcIFOVp6wbt9jhbCXPYnddmEAju0KCaG15Sz4lu0FsCssmyaxmUimEuQyj0Pxs0WebvKcQyXeuu5zNNkRz/6fENyyPieUZkI8FECm7zRFxWOekaoo+mKILJCm7RFmFbjfpAn1A21cHQYW3aHBku7ihDZZhiOmS3iqzxuAAAN8EwugLggMXk3yADFLsGzhDLLIMoWJrKRUvRx09e3mGdAQn+WyLWOwG0d7w7nWJmbwWiPmIbTjKxWPWLRzStgCQ5lM4kSN7Lm6wwe269Hu62aeLywPtXSH4lYH98L19xxb2BA34p/rQnrHDG8cDG3Dg2nDKVHHkVm3D0Tsgg1OZOQ2Nn6ActwFhi+cNOEQ3skZwiLbGtAGLLPnZg6yDLEhnDiU+WYco4iTAc/X+hjwxv6bN17QNKLosY4fsMh9xOHsytLXJ3Gazsd2aP7d1GPQpTXyviaIJSP0wTihY7WJm/s54frO/oxd0eWKDjiQKlbw2Bt7o7oC0NjMU4EPNGhfazBi4p6/4xnP2KIL4zjs9h1cqp2e+K/8SkdBe+Uu4gWivoEFRxMtppX2dUC8mXOCYIqKzKSLJDReUIqrC/kpX57jgEgBo54prBzWQ9yj+IEg5IhaJO2Y4IpP2BK0/sBqPLUkM2PCM3FzRot53ltF+CSsQZe4QlyDHRlfTnBMgHI6Xf+VLY2YtSCmi3IpPQIe664eoRAx9AtgK3cAVSQAgPeIUDMCH6AObcXtu0dqsGdpO+9ReAIL0gTgA30Bc8J6wknWQcjywhxni0QnzxDIVk9jizjZwQuLGSiVnwbfceebPbT8cIwAynAKGHJQIBMaEOPgplIZHVsfrp86RzhbhKtcbgCCdwjk7hGMOuQwpXdCe0AjiMsM01uiCdjGy2826cSjulkcWYZ/snjAgf3l4P0Tn63V64T4XOJ/YXXZzn3A89hV2P3Jhq/HT6BnnjVzd0aUMDmGrDQj3CBhsSeqOgo7vy1Ec3AG3ZO2K+I4IzwJLniLOkVxg+Qi58wy1cSwzGQCgIr9AoQ75NsMi1IhB4iS6WXAjpPnRtuji244LRDwk/gEIK3CC8MpZ25WFGzbTC3vJam2X3dw2smzlZGTK8k7rS7nQC2Z2gKLTSq+Vq+tcwIh0YAIXaNtcR3facaa460W5uwZbu0igGDPnjZU0/5R9TMym+wMQL59A7nI9HwEAihkA7gDA/5wjvpv9PwBA83x1TlDpt7jhNuf/v8ARXMYDTN1dGug8kAPYpKOyMcTopFjH9IhAxV5c4qisPyg55QQajlgHLZfLggmu8JUhz3CDFG7S/QR8jIr8AnAadNBgPkYEkBM3h9u23f7guuD7Hgiq+mazRv7esCIIAo05oPn7xCf2KKIkq9+50doDgfJCVCUiJ5jCmlmviJGoG249AOKEck6gxmRiUKiYyBaRqOEerZwjIiF3uyWt0CmVrwuSDX3JzHXh5hhOW7PfuZFykH5wRahF0mMiyvCKAKj/FcTBRwoXO/d0YnHIOmKr/ZSbTADBYnWiozPEYAtiKm6Y+uYHV+9Yzfp5ofdHXueRC5hERwjYFpYJcA0g6IpOg4WQgsxYlIHuLcLumX0EXeVLrAtmzSbfD2kfANJn9PXIZ0YcsM8g/9gaiPDzYTVO6Gt2YvEXNO9DrvgCRLjNBc8XfjFiU8+cBb7CWqxVE47hobaGTB2boUgrHKRU6Z4zS96uf3LIGsdn2g3iAlbDpccxd4/muOSy+zggLI3HmNrXuMPyBsf2Km3b7fRoSQlqgDR5BT3Qk9LVOP94xbxzg4uFt3Ef/+EJvs3U/j3sAgYgxLFNqylLgKltcOu1Yd9ryAHpG0zoAIugi97Sgf3JNnwCCJg5FmbaFhtgfiv8/znLw7rl7nR7RvwuIPw1n7G/rwvKYFYQgfOUriYOfU1HGsSdI4wNTP4fCpcmD+wFnswWxKwlOVRTLkgw+RAxwXe4zcyvYUVmbhY3sCZl8YnnQ7ssg9kVXgeEljXyDLGY4UWtsRg5Rky2mPWvIX6ed+1pelgWRBC+rxF9EABqgIF8YLiAKw4wmxKRKcfhM27wfc3R+CF3h+AGOGDop8TqtdW6iFDZLScE3QAIn+rAJD+HYK4NEydZbK/F20N3gx9Qo1N+qnwN9vdq534+HIS+scIV3dM+7d6TBcGnKIDog+4JzPy2y79iEZ6+07cIVrkR65POPYdwBWl9sf0+eSk+BaqvKPul3ru/7wzk3SIrvlniDIGhsEfU7bECit5cFnaZbW6adZ/fJlyvPx7x/Rg+Pgh9y0qXAOk/9MD0zxel/Wz33z4+4X3LSv9/QTjfU593YM4e+tzpUD4Si5+1e5O7QeAGgRUQ+D9/ylovbi364QAAAABJRU5ErkJggg=="})]),Object(c["createElementVNode"])("g",{transform:"translate(9.674135661700834 -5.831263514332488)"},[Object(c["createElementVNode"])("image",{x:"-13px",y:"-35px",width:"63px",height:"48px",transform:"scale(1.0 -1.0)","xlink:href":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAAA0CAYAAAAzMZ5zAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAARKADAAQAAAABAAAANAAAAAA5CyNwAAASP0lEQVRoBe2ayXIcxxGGs7p7VgAEV1FByw6FHfaBPPLkG14Ceh0AryO+BPwAOpIHh8IhhxmUTQoCsc3SW/n7s7uJwcyAAkkpQgcWWeju6loy/8qtssfsc/mMwGcEPiPw8QiEjx/6OxkZDR7iNcS07IVrO6yMy1Zafs8NS8x3MBzYwdqN3bMY/YWPE2M8/QI4ayf6ZEyWCF+cr2Nise2m9w3je979uT1rad99z/Bn9sR2WfLA9myvAUe9Q7iWjE8DZInxbpVFwjtqLxnoWtYx8qx7uXBt+j2xw5bWHXtl3/n9sY3Ck4We3e1zbu7YND6yp5B0aM9tJ9LPgdkHGO93DSgfDsgCCJq5Y/6S4V12RcRfEi4CHkG8E/IRf47s34z9q488syzcsR95/qNd2P+4PrKpvfG5R/YAkl7Zhj2Mx1bGLep/LY8C5592Fh/YG4DZjfud0VkDik90IxpbIJZBeGIPmKNhXjv2ZUv8MuGPfJFHdt4Sf6M1204TQNDtzI7DfbsPAGmY20kYczW7bXM7CwPbgrS3NrFbcWB1rCyvzwDkvl3UpT2o6V8/ApTnDsoLQJGkMHzJpvhC7yVuQSL23XjtIYKGqB6GV7YVtPM/2Ovkjg3ChfXDLesFMbAJsSJ8bAnEn1LTsN0upHvdds+L658sPizc58wzpOZ2EQrGD7gvqE2XMZeJ9QBiTq1tWFdW1qkNq8xmVWnTemDblUCRpOzYTr2HlPjgJSl5PyBXpMJCB8Rz+yL5EuYze5P8ZBvJFgCk1k9SO4fCfnJh0wQCIDo40X2bcg2h3zLQs1m77miB5enCfXM78cvISvr3GFtRS+bpUXVFCgBpiOSozDASPRivkYasSqysRpaVE5sDRL/M7LzqQDm2p7Vsyr5U58aAtGB0UnFoh8nfkAgmTQREChCJDZLcpmlhwxTi0sSypLaCawowqkXSc9tRMCaHgcD4gYmRvjOx/k++1KxxTU3YBPP7wqqkL5mwMrAuKhJjBIxgVVVbWgYLBeuUdC90L1C2bYN6Wpm9rlHz+gMBie6bDqRlgCH1EBiIXVraZnrLBunEjrKR3QWAIsutyhJqbVnaszKtrUYvEkABNysBMCBFAeJDEBM9mFlfCm9u/uq2YRoOGKexvRCsBnjR1ZQKQMzBQFNaAAAwT02IhBzpylHdvLLz8if7uerbVnVs/6q/tV0AZJoFO7I+MCOeYQU8iIVOMnI7A4Qea2ynG5bD+HlvYL1eZWe90vpwF6l9rF9OW52llqbRkjSzIOIBxw0jq1fscsYul9rtNQV2LY16B3cuAYzVE8AGwCgdGMl6N5g1a9SlBLCSTjmSMucltGaoVB0nVtWZxapngxpbV790qd2FvwO6IViX2PpK3bxXrur83PZCpyZTwDhFEtj97MICCKR9mO4XVgxSi312nlr1YaYfAYeVxAWSUqUpqiSGIJSqXY6SFv6xQQsFaUL0RR6j/Kp7PdVw30iXqNe93jeF6SxhorrgXc5mz5hfm4HdKmJiCYa1wrAOywvu2bQ2djlk7TYm6abiurpJbjvUY6+NJ77Am5ykt5EMRB1AImCEQWnFsLR0iOgPo1VDDN6QFQZw3oIinWBjLDAuAkqU+qAyYgguHQwuFLbSC3bAeA8AIizBW+i+ZgxQ+xgNlep4m7YWAGsBUrAhSIbASJFGva/wIqGirUCN0cAcGqpkA5U7ApR7TLSurAICUfutdNzBbuQ2TnBqyQQ1GaDQM0sGEAvz6SixOEZM9XrMzozAcsgiQ4ECK30AQE+iamtPBIaAEcENhx1RMAnbCFBb9KwH5uAaHQk4dyybNhNgsgEY0Ih9iKhJQFVr1F2uN8Ogug1hEwskpkimhAaaoNuAbq3F6xpA9HpROo4SZk7HSEhlM4xIggSUME2TlZvszAaLbECcrgBjSEzkfQCQ2OMefYmiASCQYAgSURDPv8vjhaSA4oDwXpzTor+w53fRQWQ+2jQw1LwveZL9ndM01XxIkrdja2hLsXV1mrvHqzyO0Wxn9hIJ2dE8K+UaQNRvx47sexk+tm0T73IB+rGHccJGhCELjaOlgFBtQdgWAzYhlueA5CSAUkt9sCU4FNeKACDiurEHWkF8ieWrpZGSBgrBodL9FRxBKGJEpUVRLnXOWj0mliOoeHbVYWmkopT64OF6AKWYh237hbIWEJ1L7tifiULvEXVW4a29SfEo2IJ+hmjKgIpZMQ0otskyWxBJDYDCUcJqHVwGkI+UBLkXJITAEcFgLBw3u827BSlxxwbDnRFzxoXgOzaYR3aD5dymAoahKrJT6hWlIorRWC9jDblmeSXtx9WyZV8xzSGNO1df8LQCCD3tG+/21E4QrdIDnx6T94g3akSQcBAbgRTAcJAhFfRSF6SE8xQqxBXVIVgFFMRYa6hCNdLsoEhluLsiIQIiuCHllQNDj1anmneMkVvCUEIUYHCFpgSQImojYY5sGtNIULigqoyP0le/ThEsEXVZDrjdu3zkbgWQ5u2uHdsLJkUt7U4Yof4Q6/4N0hwYPAuGMwJKgr2IkgiACbIhgCM77G30kcrU7FqjMrznv2rL6wI5kg4VAdNc3XB6Z57h1auDIcbprzapSMOzRgKQkEelUSvho2u/znHBfbA8A6C/sHiTEvgHw0XOZWHsQtFGLJUxBzNpgc4OCpdZQOKIfspYB3Q0KkzEeJriD5cKpnBvI1AaYAKARUCyK5WJBeBKZZ4NFvK+sIj3cilEGgMSh8/EZnDV+nSTHRKAwaWHdQjdFc7UFbEOgVqCRE3qEcFZhe0fAYzyJWbPkA3iEAb4Y/vnqoTo5RIob+m4TeYBnqEgY0u0KU2BEIjxnYY+eRGF6XKz0mOXPikwUuL3MCAm3JBKZVQpq5IiBhWTtC8lDDAbpSryKHrugGD3FWvI9XLKJx7htfr4+QUpxgv1ypLD3sDmHPzexHv2kPFHJI92VxdmIBOvK8+8UYkWidncRlis6JUhTJhCiMQ1cu1EWRqlA1bLCVQzSVflYQSGdlWbQA0uWdy7JwIEwOuq4TWafswHuD6OKTppiB5/MBYQ5GnQCHe9cr84RCrE0KYDXln2OexNbFBVtlUfkSNRXoT+a8sKIOJARVkms/9wNt3mkHKqpAsWMcNa1exIJT1ud8KIBHUvwmTckEksPgxCrHsDLS6g2qKNkZqraqebynuXIMaJJt3rnchxkjSIW22AglYP02mC+YBnCRCr6mE7uYVIW5zTMR/RN7UC9Rl6XkQZNNkPs4OWnqsXLb5SmsSsYVjniG6OgRp5jkFHaxEDMJwZCGLZFcBQcsOJYBW/8g6CfNfop51yl9gBpDnEmLyDr938pYGnpsrbeCt/XBrYBNkFn0vzEZWKaZJnFiesQSVCoOpK0DiLls2xIbjlXCpDLSDoHoc7bfQz23f70RhvJ6L9c9WGLLyRWB3hr0nKoXe3IGiCdJD6sAKJEBgJzAdFh4pJ5IIxdu9shYDmUUz5os4YD+CHIeLKS6mPYhL6XgZoAkmdeae+gIiME5pzRRq8ShrEvAzbeVPDOYb+Ao9HjVPsD4DEOWcuPFCChMyqwh5Wj+yYOc/cfjRGgdFL5RpADkgTYoHtRfzK7mKtZtSMrFPuxCEhM3Qcz1IraiUu0ek24Hl0TlHqAHZxf6iXbI12FkCdORlY2QqtS/8GFPgHmKY0VwdDY1kP5+ZAuGo4CMx+jnE/x4PIGJzB5bnaoOGCeySknuEV55y7ACMrOanjeeb1K6TjGMP6LQvuN5rYrnp5WQNIsH2kebeJVpH1PtZ5C/17DWNpMUAUC48O3d06YxAmV4zyAwfBD3+RgKS1I7ItOpbr4Ke4RcmyCIjBzzgdKB2QPLu1BjSBLzVTnEF4TtLUIoCEM+opLFDjKfMBCuGFRYE04d4lZGjj+dzOi8I22chjpANMWunQdjmplzi8u1sFRDyxiuzIcxfxF+Ersktbdpd8QuSgF/CtikMyrhJ3Qc0AKkVA+M7SJsMnQwtDAVvjMclQh0PapV6KeFlfsUxNBNV6YU3mNkZuVsZThlMheYTZBCmIkooTAD4BAAeGjUBKMtSnmJB8mhYc7KY2RzpuF8qlThCiV0xwKR0idX1ZBaTtt8cE3yAlAIOr+h6F3UBCXpVkuwEhxff6MRvZ58jHGIjFN0b3QjALENpZRZFB2SsFWTCVkDfRSVg5Ez8TsX7kOCBQmuiKMZpO2+lGlAcZbuwGuWtXFZcIJMNOkExACSRJI2BUFzxPCA+wHwPsR50n9iPJoT9Ub9ioC3tMYvlpE3ssJZaZ911ZDwgDAseAfWwIUoILPsFCv+SbyF2sdY0v5YsI7VhwqKcnakL2DCZKAAklUpCT84Ig3FSzu3iDJuKEcQ6FeHNUB0bdnrDrirElbQ4sf5EyP9oLVMUVUgUqaX0AIB3gkgEQXMMZcwJImNDOOiVgJDmZd9TtT9QLgFBS+XHcY+J9LfKewlzXFJ2LKPusBCicflnFfiAJMsn6JIsq24SZCYwlAwjxhBHJGU6/ccxOIREl4XcyRmoIzVUlJQGVibIlCu11EpZhdoPMOwCR1Mkde/xCjtQPcIDaAZLAeDxDdNxucFY5Y76zHGNK0goJqgBE+dTNeWanxWJC+Qmbe52rFZ9duR4Q9VhKNj/ge8wGGbT7NiLz/iPJonE2R/TpqR3nnFGOkA6YrcmJ1ACQ+BkGojmPRN7pdOwnZIxrrXMJoHqk6oEYfeShZFT53xnUhLRgJXWD4XBRoRoCgrHn2n7mvOBEjvRk08yGs9zOMeBpMbExEerXZNft2m8wYnG5vB8Q9V4AhRwCnyN2CEJ+SO/baZt03iCuqHtwJhfshztyl9gJSY08i3Ij7mG41n5AQxTUz40r99gQpQgUkyh5pON8JyFKHCdISFTMA9Pv4g+AqSd8alAQht2oPe5At1CxtNi2n8uXfKlrVGWnlqo4o++xHR0wvwzIEiiHCx+s9I3mNt9ozlAhiO6NbNgrbEY2foDUFOReA+pUoSaBzHzGfaHUop9YG0ASVKbi3EJSCxHoJIR7bIhyHjqLNJl0MZ1YD9db40WkGumU4yYutp4RqOQgnJ84GFc/Rn0IGGJ1vVHVm8XSGlnpt9lO3diU79jm1xxictDfjrf4nnpOAgvRJVFSKIaAzsjHomQOI8rDAkQq9XLJACiAUyyTCUy8jCSkQmWUbS8x0gq3a//OQiadOXRgq2cY7xlAK2wn8JIBlVREwLj6Za75qH1AOAAkN5CMjt2bAaLeLSjcuaV+TmzCl3+80HbcsNco/FaNtOCNxniaHE9Tsrs1YX7E28yRBBL2VrhngVkMqYIzD+OVU8EmycvwX36LEEUfqwGJZjB3F17J4+hLHIe2kq9xAnsDe5Hh4id8ovy52vaz1ms2TD97WPjCzyQ3LTcHRDMKaXfHAuUFDQrvZVX145QR/A04CJ5yEJwS6o+rsQ0cGKQ/Y1dZK1MWvKfPnugqbU34zqdIQv6K2Kb7TqtIX663j9rMyEqlRJw9DpU5zBfcZwW/BuCalLdsVN7GvSC19TbudQUM0BbpNy03syHrZlswtkpK63ci3fff5Y/h2BZOhfoYXhEc9NCbjE8aJbVCOppAD3CwpIpWsRAIDgbW0w1IEwezkmN2Xg5RI31v0Rf9LcB6SxTKJ9a6bzuE5odI65JkfCAYYvPjAdFoQPELfw6YaxmYe54402H4mIhpCvN9Ulo51x4SIakAI5uT0cn4dYACWoUnyBMTE9MASh8p0XfZPla04NvsEGD+x9lqxPXyhzDdzxv2oKhhiL8fAYbWltJ+fJEKybYwwz7ESG9ldPVl/Z69rF7ZEU7iuOQHNWVuD9F/6f2MQ9cYz5BTK4xkn/ghm3C+p/aoM51HiPgyPEo5nVs5O7W38w3siIKtDLvEeM5Vfy+1htZ6wtrvwHCaPkxNFgFoAF1s+ZT7NRKza7uyNqjTd+/9tdHysueeMTD7wu7UJ9x3vxlrfhr1VEeKG/+Qbnnu9z1/moQsz7wkMfr9xQs7kFFzqXlsj6uv2XZ+elVihMtNjCMSUvDTq/y1DQqMcKGrqtpVJWEX9hVR51HVSMRTjLeiz4P2bCLDLhVBWn+F8utKyDJB8qCt9Ira7heL6iZ7Y0jP5c8t1bqjP2059GuT/+x+b4pfY8JLorn7SFvRrbJ8vZx7+c1v8dyqlKbutrMBSS2wulKaH9yq+Qqhv5I0rCy3vM66Dr9524IUra7160vA6hqfWz4j8BmBT0Dg/3seSfw+jhGiAAAAAElFTkSuQmCC",opacity:"23.4808059%"})])]),Object(c["createElementVNode"])("g",{transform:"translate(3.0491975747738422 2.8563610001774755)"},[Object(c["createElementVNode"])("g",{"clip-path":"url(#109114106101120501221195451)"},[Object(c["createElementVNode"])("polygon",{points:"4.54747351e-13,0 32.6140205,0 32.6140205,39.7925093 4.54747351e-13,39.7925093 4.54747351e-13,0",stroke:"none",fill:"rgba(255, 255, 255, 0.323907)"})])]),Object(c["createElementVNode"])("g",{transform:"translate(8.313637900593676 11.7130532738862)"},[Object(c["createElementVNode"])("g",{"clip-path":"url(#5399112495657099106120)"},[Object(c["createElementVNode"])("polygon",{points:"2.07172904,3.91522295 22.5224878,3.91522295 22.5224878,19.2373856 2.07172904,19.2373856 2.07172904,3.91522295",stroke:"none",fill:"#FFFFFF"})]),Object(c["createElementVNode"])("g",{"clip-path":"url(#1024511854541210110121103)"},[Object(c["createElementVNode"])("path",{d:"M3.06443253,19.1294831 C2.7910794,19.1294831 2.55729053,19.0323708 2.36306593,18.8381462 C2.16884133,18.6439216 2.07172904,18.4101327 2.07172904,18.1367796 L2.07172904,4.92950696 C2.07172904,4.65615382 2.16884133,4.41876821 2.36306593,4.21735011 C2.55729053,4.015932 2.7910794,3.91522295 3.06443253,3.91522295 L11.4592512,3.91522295 C11.7182174,3.91522295 11.941216,4.0087385 12.1282471,4.19576959 C12.3152782,4.38280069 12.4087937,4.6057993 12.4087937,4.86476543 C12.4087937,5.12373156 12.3152782,5.34313342 12.1282471,5.52297101 C11.941216,5.7028086 11.7182174,5.79272739 11.4592512,5.79272739 L4.33768267,5.79272739 C4.16503858,5.79272739 4.07871654,5.87904944 4.07871654,6.05169352 L4.07871654,10.5188593 L10.7039334,10.5188593 C10.9628995,10.5188593 11.1858981,10.6123748 11.3729292,10.7994059 C11.5599603,10.986437 11.6534758,11.2094356 11.6534758,11.4684017 C11.6534758,11.7273679 11.5599603,11.9467697 11.3729292,12.1266073 C11.1858981,12.3064449 10.9628995,12.3963637 10.7039334,12.3963637 L4.07871654,12.3963637 L4.07871654,18.1367796 C4.07871654,18.4101327 3.97800749,18.6439216 3.77658939,18.8381462 C3.57517129,19.0323708 3.33778567,19.1294831 3.06443253,19.1294831 Z M15.6814659,18.5468093 C14.7750844,18.072038 14.0629276,17.3958487 13.5449953,16.5182413 C13.0270631,15.6406338 12.7680969,14.6335433 12.7680969,13.4969697 C12.7680969,12.3316222 13.0342566,11.3101447 13.5665758,10.4325372 C14.0845081,9.58370379 14.7786812,8.92549821 15.6490951,8.45792048 C16.5195091,7.99034274 17.4870353,7.75655388 18.5516738,7.75655388 C19.2710242,7.75655388 19.9040525,7.84647267 20.4507588,8.02631026 C20.997465,8.20614785 21.5441713,8.46151723 22.0908776,8.79241839 C22.3786177,8.99383649 22.5224878,9.25280262 22.5224878,9.56931678 C22.5224878,9.78512189 22.4361658,9.98653999 22.2635217,10.1735711 C22.0908776,10.3606022 21.896653,10.4541177 21.6808479,10.4541177 C21.5369778,10.4541177 21.3787207,10.4109567 21.2060766,10.3246347 C20.7025314,10.0656685 20.2853082,9.88583094 19.954407,9.78512189 C19.6235059,9.68441284 19.2134762,9.63405831 18.7243179,9.63405831 C17.5158093,9.63405831 16.5554766,9.98294324 15.8433197,10.6807131 C15.1311629,11.3784829 14.7750844,12.3172352 14.7750844,13.4969697 C14.7750844,14.6767043 15.1311629,15.6154566 15.8433197,16.3132264 C16.5554766,17.0109963 17.5158093,17.3598812 18.7243179,17.3598812 C19.2134762,17.3598812 19.6235059,17.3095267 19.954407,17.2088176 C20.2853082,17.1081086 20.7025314,16.928271 21.2060766,16.6693048 C21.3787207,16.5829828 21.5369778,16.5398218 21.6808479,16.5398218 C21.896653,16.5398218 22.0908776,16.6333373 22.2635217,16.8203684 C22.4361658,17.0073995 22.5224878,17.2088176 22.5224878,17.4246227 C22.5224878,17.7411369 22.3786177,18.000103 22.0908776,18.2015211 C21.5441713,18.5324223 20.997465,18.7877916 20.4507588,18.9676292 C19.9040525,19.1474668 19.2710242,19.2373856 18.5516738,19.2373856 C17.5301963,19.2373856 16.5734603,19.0071935 15.6814659,18.5468093 Z",stroke:"#3CFBCF","stroke-width":"2.8920221",fill:"none","stroke-miterlimit":"5"})])])]),Object(c["createElementVNode"])("g",{transform:"translate(0.02473429089858925 4.617845277710796) rotate(-4.0)"},[Object(c["createElementVNode"])("g",{transform:"translate(8.77528857764526 11.74914203594166)"},[Object(c["createElementVNode"])("g",{transform:""},[Object(c["createElementVNode"])("g",{transform:"translate(0.08497514808244588 -2.842170943040401e-14)"},[Object(c["createElementVNode"])("text",{transform:"translate(0.0 19.0)","font-family":"MaoKenTangYuan-beta, MaoKenTangYuan (beta)","font-size":"22.09844305416875","font-weight":"normal",fill:"#FFFFFF","text-anchor":"left"},"Fc")])])]),Object(c["createElementVNode"])("g",{transform:""},[Object(c["createElementVNode"])("path",{d:"M36.8811736,2 C37.1274987,2 37.3505042,2.09984297 37.5119285,2.26126722 C37.6733527,2.42269147 37.7731957,2.645697 37.7731957,2.8920221 L37.7731957,42.6222859 C37.7731957,42.868611 37.6733527,43.0916165 37.5119285,43.2530408 C37.3505042,43.414465 37.1274987,43.514308 36.8811736,43.514308 L2.8920221,43.514308 C2.645697,43.514308 2.42269147,43.414465 2.26126722,43.2530408 C2.09984297,43.0916165 2,42.868611 2,42.6222859 L2,2.8920221 C2,2.645697 2.09984297,2.42269147 2.26126722,2.26126722 C2.42269147,2.09984297 2.645697,2 2.8920221,2 Z",stroke:"none",fill:"#000000",filter:"url(#48109491091221001025211656)"}),Object(c["createElementVNode"])("g",{"clip-path":"url(#116995310511811611411712249)"},[Object(c["createElementVNode"])("polygon",{points:"-4.54747351e-13,0 39.7731957,0 39.7731957,45.514308 -4.54747351e-13,45.514308 -4.54747351e-13,0",stroke:"none",fill:"url(#1135410501015012010910899)"})])]),Object(c["createElementVNode"])("g",{transform:"translate(9.190972988500762 14.65128915858139)"},[Object(c["createElementVNode"])("g",{"clip-path":"url(#11211055514954565695104)"},[Object(c["createElementVNode"])("polygon",{points:"0,-1.42108547e-14 11.4584176,-1.42108547e-14 11.4584176,16.5420343 0,16.5420343 0,-1.42108547e-14",stroke:"none",fill:"#FFFFFF"})]),Object(c["createElementVNode"])("g",{transform:"translate(11.85669755051606 4.176570357211289)"},[Object(c["createElementVNode"])("g",{"clip-path":"url(#99971031031051041175097104)"},[Object(c["createElementVNode"])("polygon",{points:"0,0 10.812536,0 10.812536,12.4827833 0,12.4827833 0,0",stroke:"none",fill:"#FFFFFF"})])])]),Object(c["createElementVNode"])("g",{transform:"translate(3.186361394234229 2.7377452406648572)"},[Object(c["createElementVNode"])("g",{"clip-path":"url(#1071161211041001135511749100)"},[Object(c["createElementVNode"])("polygon",{points:"0,0 33.8072163,0 33.8072163,39.7925093 0,39.7925093 0,0",stroke:"none",fill:"rgba(255, 255, 255, 0.323907)"})])])])])])])],-1)),ye=Ne(()=>Object(c["createElementVNode"])("span",{class:"cf-manage-title"},"友链朋友圈管理面板",-1));function Be(e,t,a,o,l,n){const r=Object(c["resolveComponent"])("el-input"),i=Object(c["resolveComponent"])("el-button");return Object(c["openBlock"])(),Object(c["createElementBlock"])("div",null,[Ee,ye,Object(c["createVNode"])(r,{class:"cf-manage-input",size:"large",onKeyup:Object(c["withKeys"])(n.login,["enter"]),modelValue:l.password,"onUpdate:modelValue":t[0]||(t[0]=e=>l.password=e),type:"password",clearable:"","show-password":"",placeholder:"请输入密码"},null,8,["onKeyup","modelValue"]),Object(c["createVNode"])(i,{onClick:n.login,class:"cf-manage-login-btn",round:""},{default:Object(c["withCtx"])(()=>[Object(c["createTextVNode"])("立即登录")]),_:1},8,["onClick"])])}function Le(e){return{headers:{Authorization:e}}}function Ie(){return localStorage.getItem("fcircle-token")?"Bearer "+localStorage.getItem("fcircle-token"):""}var Me=a("3ef4"),Se={name:"ManagePanelLogin",emits:["login_success"],data(){return{password:""}},methods:{login(){let e={password:this.password};this.$axios.post(this.Config.private_api_url+"login",e).then(e=>{let t=e.data;200===t.code?(localStorage.setItem("fcircle-token",t.token),this.$emit("login_success"),this.$message.success({title:"成功",message:"登录成功"})):this.$message.error({title:"错误",message:"密码错误"})}).catch(e=>{Object(Me["a"])({message:e.message,type:"error"})})}},created(){let e=Ie();if(e){let t=Le(e);this.$axios.get(this.Config.private_api_url+"login_with_token",t).then(e=>{let t=e.data;200===t.code&&this.$emit("login_success")}).catch(e=>{})}},props:["Config"]};a("5974");const Te=v()(Se,[["render",Be],["__scopeId","data-v-735984d8"]]);var De=Te;const Fe=e=>(Object(c["pushScopeId"])("data-v-668b627c"),e=e(),Object(c["popScopeId"])(),e),Pe={class:"ManagePanelMain"},Re={class:"cf-manage-top"},Ye=Fe(()=>Object(c["createElementVNode"])("span",{class:"cf-manage-title"},"友链朋友圈管理面板",-1));function Qe(e,t,a,o,l,n){const r=Object(c["resolveComponent"])("el-button"),i=Object(c["resolveComponent"])("ManagePanelMain_settings"),s=Object(c["resolveComponent"])("el-tab-pane"),d=Object(c["resolveComponent"])("ManagePanelMain_envs"),p=Object(c["resolveComponent"])("ManagePanelMain_links"),b=Object(c["resolveComponent"])("ManagePanelMain_switchdb"),m=Object(c["resolveComponent"])("ManagePanelMain_status"),f=Object(c["resolveComponent"])("ManagePanelMain_about"),u=Object(c["resolveComponent"])("el-tabs");return Object(c["openBlock"])(),Object(c["createElementBlock"])("div",Pe,[Object(c["createElementVNode"])("div",Re,[Ye,Object(c["createVNode"])(r,{onClick:n.logout,class:"cf-manage-exit-btn",round:""},{default:Object(c["withCtx"])(()=>[Object(c["createTextVNode"])("退出登录")]),_:1},8,["onClick"])]),Object(c["createVNode"])(u,{modelValue:l.current_tab,"onUpdate:modelValue":t[0]||(t[0]=e=>l.current_tab=e),type:"card",class:"cf-manage-tabs-area"},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(s,{label:"配置管理",name:"settings"},{default:Object(c["withCtx"])(()=>[null!==l.current_settings?(Object(c["openBlock"])(),Object(c["createBlock"])(i,{Config:a.Config,current_settings:l.current_settings,key:l.component_keys.settings,onRefresh:n.refresh_component},null,8,["Config","current_settings","onRefresh"])):Object(c["createCommentVNode"])("",!0)]),_:1}),Object(c["createVNode"])(s,{label:"环境变量管理",name:"envs"},{default:Object(c["withCtx"])(()=>[null!==l.current_settings?(Object(c["openBlock"])(),Object(c["createBlock"])(d,{Config:a.Config,current_settings:l.current_settings,key:l.component_keys.envs,onRefresh:n.refresh_component},null,8,["Config","current_settings","onRefresh"])):Object(c["createCommentVNode"])("",!0)]),_:1}),Object(c["createVNode"])(s,{label:"自定义友链管理",name:"links"},{default:Object(c["withCtx"])(()=>[null!==l.current_settings?(Object(c["openBlock"])(),Object(c["createBlock"])(p,{Config:a.Config,current_settings:l.current_settings,key:l.component_keys.links,onRefresh:n.refresh_component},null,8,["Config","current_settings","onRefresh"])):Object(c["createCommentVNode"])("",!0)]),_:1}),Object(c["createVNode"])(s,{label:"数据库管理",name:"switchsb"},{default:Object(c["withCtx"])(()=>[null!==l.current_settings?(Object(c["openBlock"])(),Object(c["createBlock"])(b,{Config:a.Config,current_settings:l.current_settings,key:l.component_keys.switchdb,onRefresh:n.refresh_component},null,8,["Config","current_settings","onRefresh"])):Object(c["createCommentVNode"])("",!0)]),_:1}),Object(c["createVNode"])(s,{label:"状态监控",name:"status"},{default:Object(c["withCtx"])(()=>[(Object(c["openBlock"])(),Object(c["createBlock"])(m,{Config:a.Config,key:l.component_keys.status},null,8,["Config"]))]),_:1}),Object(c["createVNode"])(s,{label:"关于",name:"about"},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(f)]),_:1})]),_:1},8,["modelValue"])])}const Ke={class:"item-col"},ze={class:"item-col"};function Ue(e,t,a,o,l,n){const r=Object(c["resolveComponent"])("el-input"),i=Object(c["resolveComponent"])("el-tooltip"),s=Object(c["resolveComponent"])("el-form-item"),d=Object(c["resolveComponent"])("el-option"),p=Object(c["resolveComponent"])("el-option-group"),b=Object(c["resolveComponent"])("el-select"),m=Object(c["resolveComponent"])("Plus"),f=Object(c["resolveComponent"])("el-icon"),u=Object(c["resolveComponent"])("el-button"),h=Object(c["resolveComponent"])("Minus"),g=Object(c["resolveComponent"])("el-col"),O=Object(c["resolveComponent"])("el-row"),C=Object(c["resolveComponent"])("el-switch"),j=Object(c["resolveComponent"])("el-form");return Object(c["openBlock"])(),Object(c["createBlock"])(j,{model:l.form,"label-width":"120px"},{default:Object(c["withCtx"])(()=>[(Object(c["openBlock"])(!0),Object(c["createElementBlock"])(c["Fragment"],null,Object(c["renderList"])(l.form.LINK,(e,t)=>(Object(c["openBlock"])(),Object(c["createElementBlock"])("div",{key:t,class:"settings-item"},[Object(c["createElementVNode"])("div",Ke,[Object(c["createVNode"])(s,{label:"link"},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(i,{content:"爬取起始页面，填写你的友链页地址",placement:"left","hide-after":50,effect:"light"},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(r,{modelValue:l.form.LINK[t].link,"onUpdate:modelValue":e=>l.form.LINK[t].link=e,placeholder:"示例：https://example.com/link/"},null,8,["modelValue","onUpdate:modelValue"])]),_:2},1024)]),_:2},1024)]),Object(c["createElementVNode"])("div",ze,[Object(c["createVNode"])(s,{label:"theme"},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(i,{content:"爬取起始页面的主题",placement:"left","hide-after":50,effect:"light"},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(b,{modelValue:l.form.LINK[t].theme,"onUpdate:modelValue":e=>l.form.LINK[t].theme=e,placeholder:"Select"},{default:Object(c["withCtx"])(()=>[(Object(c["openBlock"])(!0),Object(c["createElementBlock"])(c["Fragment"],null,Object(c["renderList"])(l.theme_options,e=>(Object(c["openBlock"])(),Object(c["createBlock"])(p,{key:e.label,label:e.label},{default:Object(c["withCtx"])(()=>[(Object(c["openBlock"])(!0),Object(c["createElementBlock"])(c["Fragment"],null,Object(c["renderList"])(e.options,e=>(Object(c["openBlock"])(),Object(c["createBlock"])(d,{key:e.value,value:e.value},null,8,["value"]))),128))]),_:2},1032,["label"]))),128))]),_:2},1032,["modelValue","onUpdate:modelValue"])]),_:2},1024)]),_:2},1024),0===t?(Object(c["openBlock"])(),Object(c["createBlock"])(u,{key:0,circle:"",class:"cf-manage-main-add-btn",onClick:n.add_link},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(f,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(m)]),_:1})]),_:1},8,["onClick"])):Object(c["createCommentVNode"])("",!0),0!==t?(Object(c["openBlock"])(),Object(c["createBlock"])(u,{key:1,circle:"",class:"cf-manage-main-add-btn",onClick:e=>n.del_link(t)},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(f,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(h)]),_:1})]),_:2},1032,["onClick"])):Object(c["createCommentVNode"])("",!0)])]))),128)),(Object(c["openBlock"])(!0),Object(c["createElementBlock"])(c["Fragment"],null,Object(c["renderList"])(l.form.BLOCK_SITE,(e,t)=>(Object(c["openBlock"])(),Object(c["createBlock"])(O,{key:t},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(g,{span:22,xs:15,sm:17,md:17,lg:12,xl:12},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(s,{label:"BLOCK_SITE"},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(i,{content:"屏蔽站点，支持正则表达式",placement:"left",effect:"light"},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(r,{placeholder:"非必填，示例：https://example.com/",modelValue:l.form.BLOCK_SITE[t],"onUpdate:modelValue":e=>l.form.BLOCK_SITE[t]=e},null,8,["modelValue","onUpdate:modelValue"])]),_:2},1024)]),_:2},1024)]),_:2},1024),Object(c["createVNode"])(g,{span:2},{default:Object(c["withCtx"])(()=>[0===t?(Object(c["openBlock"])(),Object(c["createBlock"])(u,{key:0,circle:"",class:"cf-manage-main-add-btn",onClick:n.add_blocksite},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(f,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(m)]),_:1})]),_:1},8,["onClick"])):Object(c["createCommentVNode"])("",!0),0!==t?(Object(c["openBlock"])(),Object(c["createBlock"])(u,{key:1,circle:"",class:"cf-manage-main-add-btn",onClick:e=>n.del_blocksite(t)},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(f,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(h)]),_:1})]),_:2},1032,["onClick"])):Object(c["createCommentVNode"])("",!0)]),_:2},1024)]),_:2},1024))),128)),Object(c["createVNode"])(O,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(g,{span:24},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(s,{label:"OUTDATE_CLEAN","label-width":"auto"},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(i,{content:"数据库文章过期清除时间",placement:"left",effect:"light"},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(r,{placeholder:"示例：60",modelValue:l.form.OUTDATE_CLEAN,"onUpdate:modelValue":t[0]||(t[0]=e=>l.form.OUTDATE_CLEAN=e)},null,8,["modelValue"])]),_:1})]),_:1})]),_:1})]),_:1}),Object(c["createVNode"])(O,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(g,{span:24},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(s,{label:"HTTP_PROXY"},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(i,{content:"是否开启http代理，如需开启，打开此选项同时还要在环境变量配置一个代理地址",placement:"left",effect:"light"},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(C,{modelValue:l.form.HTTP_PROXY,"onUpdate:modelValue":t[1]||(t[1]=e=>l.form.HTTP_PROXY=e)},null,8,["modelValue"])]),_:1})]),_:1})]),_:1})]),_:1}),Object(c["createVNode"])(O,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(g,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(s,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(u,{type:"primary",onClick:n.submit_form},{default:Object(c["withCtx"])(()=>[Object(c["createTextVNode"])("保存")]),_:1},8,["onClick"]),Object(c["createVNode"])(u,{type:"info",onClick:n.refresh},{default:Object(c["withCtx"])(()=>[Object(c["createTextVNode"])("刷新")]),_:1},8,["onClick"])]),_:1})]),_:1})]),_:1})]),_:1},8,["model"])}a("14d9");var Ze=a("c9a1"),Ge={name:"ManagePanelMain_settings",emits:["refresh"],data(){return{theme_options:[{label:"普通主题",options:[{value:"butterfly"},{value:"fluid"},{value:"matery"},{value:"nexmoe"},{value:"stun"},{value:"Yun"},{value:"sakura"},{value:"volantis"},{value:"stellar"}]},{label:"通用主题",options:[{value:"common1"},{value:"common2"}]}],form:{LINK:this.current_settings.LINK,BLOCK_SITE:this.current_settings.BLOCK_SITE===[]?this.current_settings.BLOCK_SITE:[""],OUTDATE_CLEAN:this.current_settings.OUTDATE_CLEAN,HTTP_PROXY:this.current_settings.HTTP_PROXY}}},methods:{add_link(){this.form.LINK.push({link:"",theme:""})},del_link(e){this.form.LINK.splice(e,1)},add_blocksite(){this.form.BLOCK_SITE.push("")},del_blocksite(e){this.form.BLOCK_SITE.splice(e,1)},submit_form(){let e=Ie(),t=[];for(let c=0;c<this.form.BLOCK_SITE.length;c++)""!==this.form.BLOCK_SITE[c]&&t.push(this.form.BLOCK_SITE[c]);this.form.BLOCK_SITE=t;let a=this.form;if(e){let t=Le(e);this.$axios.put(this.Config.private_api_url+"update_settings",a,t).then(e=>{let a=e.data;200===a.code?(Object(Me["a"])({message:a.message,type:"success"}),Ze["a"].confirm("更新成功，下次运行爬虫生效，是否立即运行？","提示",{confirmButtonText:"确定",cancelButtonText:"取消",type:"warning"}).then(()=>{this.$axios.get(this.Config.private_api_url+"restart_api",t),Object(Me["a"])({type:"success",message:"重启成功"})}).catch(e=>{Object(Me["a"])({type:"info",message:"已取消"})}),this.refresh()):Object(Me["a"])({message:a.message,type:"error"})}).catch(e=>{Object(Me["a"])({message:e.message,type:"error"})})}},refresh(){this.$emit("refresh","settings")}},props:["Config","current_settings"]};a("5e0e");const Je=v()(Ge,[["render",Ue],["__scopeId","data-v-75620860"]]);var He=Je;function qe(e,t,a,o,l,n){const r=Object(c["resolveComponent"])("el-alert"),i=Object(c["resolveComponent"])("el-divider"),s=Object(c["resolveComponent"])("el-input"),d=Object(c["resolveComponent"])("el-form-item"),p=Object(c["resolveComponent"])("el-col"),b=Object(c["resolveComponent"])("el-row"),m=Object(c["resolveComponent"])("el-button"),f=Object(c["resolveComponent"])("el-form");return Object(c["openBlock"])(),Object(c["createElementBlock"])(c["Fragment"],null,[Object(c["createVNode"])(r,{title:"当前部署方式",type:"success",description:a.current_settings.DEPLOY_TYPE,"show-icon":"",center:"",closable:!1},null,8,["description"]),Object(c["createVNode"])(i),Object(c["createVNode"])(f,{model:l.all_env,"label-width":"120px"},{default:Object(c["withCtx"])(()=>[(Object(c["openBlock"])(!0),Object(c["createElementBlock"])(c["Fragment"],null,Object(c["renderList"])(l.all_env,(e,t)=>(Object(c["openBlock"])(),Object(c["createBlock"])(b,{key:t},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(p,{span:22,offset:2},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(d,{label:t},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(s,{placeholder:e.placeholder,modelValue:e.value,"onUpdate:modelValue":t=>e.value=t},null,8,["placeholder","modelValue","onUpdate:modelValue"])]),_:2},1032,["label"])]),_:2},1024)]),_:2},1024))),128)),Object(c["createVNode"])(b,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(p,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(d,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(m,{type:"primary",onClick:n.submit_form},{default:Object(c["withCtx"])(()=>[Object(c["createTextVNode"])("保存")]),_:1},8,["onClick"]),Object(c["createVNode"])(m,{type:"info",onClick:n.refresh},{default:Object(c["withCtx"])(()=>[Object(c["createTextVNode"])("刷新")]),_:1},8,["onClick"])]),_:1})]),_:1})]),_:1})]),_:1},8,["model"])],64)}var Xe={name:"ManagePanelMain_envs",emits:["refresh"],data(){return{all_env:{PROXY:{value:"",placeholder:"http代理"},APPKEY:{value:"",placeholder:"leancloud的APPKEY"},APPID:{value:"",placeholder:"leancloud的APPID"},MYSQL_USERNAME:{value:"",placeholder:"mysql用户名"},MYSQL_PASSWORD:{value:"",placeholder:"mysql密码"},MYSQL_IP:{value:"",placeholder:"mysql ip地址"},MYSQL_PORT:{value:"",placeholder:"mysql端口"},MYSQL_DB:{value:"",placeholder:"mysql 数据库名称"},GH_NAME:{value:"",placeholder:"github name"},GH_EMAIL:{value:"",placeholder:"github email"},GH_TOKEN:{value:"",placeholder:"github access token"},MONGODB_URI:{value:"",placeholder:"mongodb连接URI"}}}},methods:{submit_form(){let e=Ie(),t={};for(let c in this.all_env)""!==this.all_env[c].value&&(t[c]=this.all_env[c].value);let a=!0;if(e){let c=Le(e);"github"===this.current_settings.DEPLOY_TYPE?(this.$axios.put(this.Config.private_api_url+"update_github_env",t,c).then(e=>{let t=e.data;200!==t.code&&(Object(Me["a"])({message:t.message,type:"error"}),a=!1)}).catch(e=>{Object(Me["a"])({message:e.message,type:"error"}),a=!1}),this.$axios.put(this.Config.private_api_url+"update_vercel_env",t,c).then(e=>{let t=e.data;200!==t.code&&(Object(Me["a"])({message:t.message,type:"error"}),a=!1)}).catch(e=>{Object(Me["a"])({message:e.message,type:"error"}),a=!1})):this.$axios.put(this.Config.private_api_url+"update_server_env",t,c).then(e=>{let t=e.data;200!==t.code&&(Object(Me["a"])({message:t.message,type:"error"}),a=!1)}).catch(e=>{Object(Me["a"])({message:e.message,type:"error"}),a=!1}),a&&Ze["a"].confirm("更新环境变量成功，重启程序后生效，是否立即重启？","提示",{confirmButtonText:"确定",cancelButtonText:"取消",type:"warning"}).then(()=>{this.$axios.get(this.Config.private_api_url+"restart_api",c),Object(Me["a"])({type:"success",message:"重启成功"})}).catch(e=>{Object(Me["a"])({type:"info",message:"已取消"})})}else Object(Me["a"])({message:"认证失败，未获取到fcircle token",type:"error"})},refresh(){this.$emit("refresh","envs")}},created(){"github"===this.current_settings.DEPLOY_TYPE?(this.all_env["STORAGE_TYPE"]={value:"",placeholder:"存储方式"},this.all_env["VERCEL_ACCESS_TOKEN"]={value:"",placeholder:"vercel访问令牌"}):"server"===this.current_settings.DEPLOY_TYPE?(this.all_env["EXPOSE_PORT"]={value:"",placeholder:"api端口，默认：8000"},this.all_env["RUN_PER_HOURS"]={value:"",placeholder:"爬虫运行小时间隔，默认：6"}):this.all_env["RUN_PER_HOURS"]={value:"",placeholder:"爬虫运行小时间隔，默认：6"};let e=Ie();if(e){let t=Le(e);this.$axios.get(this.Config.private_api_url+"read_envs",t).then(e=>{let t=e.data;if(200===t.code)for(let a in t.current_envs)this.all_env[a]&&null!==t.current_envs[a]&&(this.all_env[a].value=t.current_envs[a]);else Object(Me["a"])({message:t.message,type:"error"})}).catch(e=>{Object(Me["a"])({message:e.message,type:"error"})})}else Object(Me["a"])({message:"认证失败，未获取到fcircle token",type:"error"})},props:["Config","current_settings"]};const We=v()(Xe,[["render",qe]]);var $e=We;const et={key:0};function tt(e,t,a,o,l,n){const r=Object(c["resolveComponent"])("el-switch"),i=Object(c["resolveComponent"])("el-form-item"),s=Object(c["resolveComponent"])("el-input"),d=Object(c["resolveComponent"])("el-col"),p=Object(c["resolveComponent"])("Plus"),b=Object(c["resolveComponent"])("el-icon"),m=Object(c["resolveComponent"])("el-button"),f=Object(c["resolveComponent"])("el-row"),u=Object(c["resolveComponent"])("Minus"),h=Object(c["resolveComponent"])("el-form");return Object(c["openBlock"])(),Object(c["createElementBlock"])(c["Fragment"],null,[Object(c["createVNode"])(i,{label:"当前自定义友链状态"},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(r,{modelValue:l.enable,"onUpdate:modelValue":t[0]||(t[0]=e=>l.enable=e)},null,8,["modelValue"])]),_:1}),Object(c["createVNode"])(h,{"label-width":"120px"},{default:Object(c["withCtx"])(()=>[l.enable?(Object(c["openBlock"])(),Object(c["createElementBlock"])("div",et,[Object(c["createVNode"])(d,{span:24},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(i,{label:"json友链地址","label-width":"auto"},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(s,{placeholder:"可以是网络地址，也可以是路径（私有部署），示例：https://blogroll.ccknbc.cc/fcircle.json 或 /home/data/fcircle/friends.json",modelValue:l.json_api,"onUpdate:modelValue":t[1]||(t[1]=e=>l.json_api=e)},null,8,["modelValue"])]),_:1})]),_:1}),Object(c["createVNode"])(f,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(i,{label:"点击添加一条友链","label-width":"auto"}),Object(c["createVNode"])(d,{span:2},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(m,{circle:"",onClick:n.add_link},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(b,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(p)]),_:1})]),_:1},8,["onClick"])]),_:1})]),_:1}),(Object(c["openBlock"])(!0),Object(c["createElementBlock"])(c["Fragment"],null,Object(c["renderList"])(l.list,(e,t)=>(Object(c["openBlock"])(),Object(c["createBlock"])(f,{key:t},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(d,{span:6},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(i,{label:"名称","label-width":"50px"},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(s,{modelValue:e[0],"onUpdate:modelValue":t=>e[0]=t},null,8,["modelValue","onUpdate:modelValue"])]),_:2},1024)]),_:2},1024),Object(c["createVNode"])(d,{span:6},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(i,{label:"主页","label-width":"50px"},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(s,{modelValue:e[1],"onUpdate:modelValue":t=>e[1]=t},null,8,["modelValue","onUpdate:modelValue"])]),_:2},1024)]),_:2},1024),Object(c["createVNode"])(d,{span:6},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(i,{label:"头像","label-width":"50px"},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(s,{modelValue:e[2],"onUpdate:modelValue":t=>e[2]=t},null,8,["modelValue","onUpdate:modelValue"])]),_:2},1024)]),_:2},1024),Object(c["createVNode"])(d,{span:5},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(i,{label:"后缀","label-width":"50px"},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(s,{modelValue:e[3],"onUpdate:modelValue":t=>e[3]=t},null,8,["modelValue","onUpdate:modelValue"])]),_:2},1024)]),_:2},1024),Object(c["createVNode"])(d,{span:1},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(m,{circle:"",onClick:e=>n.del_link(t)},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(b,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(u)]),_:1})]),_:2},1032,["onClick"])]),_:2},1024)]),_:2},1024))),128))])):Object(c["createCommentVNode"])("",!0),Object(c["createVNode"])(f,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(d,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(i,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(m,{type:"primary",onClick:n.submit_form},{default:Object(c["withCtx"])(()=>[Object(c["createTextVNode"])("保存")]),_:1},8,["onClick"]),Object(c["createVNode"])(m,{type:"info",onClick:n.refresh},{default:Object(c["withCtx"])(()=>[Object(c["createTextVNode"])("刷新")]),_:1},8,["onClick"])]),_:1})]),_:1})]),_:1})]),_:1})],64)}var at={name:"ManagePanelMain_links",emits:["refresh"],data(){return{enable:this.current_settings.SETTINGS_FRIENDS_LINKS.enable,list:[],json_api:""}},methods:{add_link(){this.list.push(["","",""])},del_link(e){this.list.splice(e,1)},submit_form(){let e=Ie(),t={};t["enable"]=this.enable,t["json_api"]=this.json_api;let a=[];for(let o=0;o<this.list.length;o++)this.list[o][0]===this.list[o][1]===this.list[o][2]!==""&&a.push(this.list[o]);t["list"]=a;let c={SETTINGS_FRIENDS_LINKS:t};if(e){let t=Le(e);this.$axios.put(this.Config.private_api_url+"update_settings",c,t).then(e=>{let t=e.data;200===t.code?(Object(Me["a"])({message:t.message,type:"success"}),this.refresh()):Object(Me["a"])({message:t.message,type:"error"})}).catch(e=>{Object(Me["a"])({message:e.message,type:"error"})})}},refresh(){this.$emit("refresh","links")}},created(){for(let e=0;e<this.current_settings.SETTINGS_FRIENDS_LINKS.list.length;e++){let t=this.current_settings.SETTINGS_FRIENDS_LINKS.list[e];3===t.length?this.list.push([t[0],t[1],t[2]]):4===t.length&&this.list.push([t[0],t[1],t[2],t[3]])}this.json_api=this.current_settings.SETTINGS_FRIENDS_LINKS.json_api},props:["Config","current_settings"]};const ct=v()(at,[["render",tt]]);var ot=ct;const lt=e=>(Object(c["pushScopeId"])("data-v-30fd6fc6"),e=e(),Object(c["popScopeId"])(),e),nt=lt(()=>Object(c["createElementVNode"])("div",{class:"cf-manage-tip"},"如需切换数据库，请配置对应环境变量，然后点击保存：",-1));function rt(e,t,a,o,l,n){const r=Object(c["resolveComponent"])("el-alert"),i=Object(c["resolveComponent"])("el-radio"),s=Object(c["resolveComponent"])("el-radio-group"),d=Object(c["resolveComponent"])("el-input"),p=Object(c["resolveComponent"])("el-form-item"),b=Object(c["resolveComponent"])("el-col"),m=Object(c["resolveComponent"])("el-row"),f=Object(c["resolveComponent"])("el-button"),u=Object(c["resolveComponent"])("el-form");return Object(c["openBlock"])(),Object(c["createElementBlock"])(c["Fragment"],null,[Object(c["createVNode"])(r,{title:"当前使用数据库",type:"success",description:a.current_settings.DATABASE,"show-icon":"",center:"",closable:!1},null,8,["description"]),nt,Object(c["createVNode"])(s,{modelValue:l.current_db,"onUpdate:modelValue":t[0]||(t[0]=e=>l.current_db=e)},{default:Object(c["withCtx"])(()=>["sqlite"!==this.current_settings.DATABASE?(Object(c["openBlock"])(),Object(c["createBlock"])(i,{key:0,label:"sqlite"},{default:Object(c["withCtx"])(()=>[Object(c["createTextVNode"])("sqlite")]),_:1})):Object(c["createCommentVNode"])("",!0),"leancloud"!==this.current_settings.DATABASE?(Object(c["openBlock"])(),Object(c["createBlock"])(i,{key:1,label:"leancloud"},{default:Object(c["withCtx"])(()=>[Object(c["createTextVNode"])("leancloud")]),_:1})):Object(c["createCommentVNode"])("",!0),"mysql"!==this.current_settings.DATABASE?(Object(c["openBlock"])(),Object(c["createBlock"])(i,{key:2,label:"mysql"},{default:Object(c["withCtx"])(()=>[Object(c["createTextVNode"])("mysql")]),_:1})):Object(c["createCommentVNode"])("",!0),"mongodb"!==this.current_settings.DATABASE?(Object(c["openBlock"])(),Object(c["createBlock"])(i,{key:3,label:"mongodb"},{default:Object(c["withCtx"])(()=>[Object(c["createTextVNode"])("mongodb")]),_:1})):Object(c["createCommentVNode"])("",!0)]),_:1},8,["modelValue"]),"sqlite"===l.current_db?(Object(c["openBlock"])(),Object(c["createBlock"])(u,{key:0,model:l.sqlite_env,"label-width":"120px"},{default:Object(c["withCtx"])(()=>[(Object(c["openBlock"])(!0),Object(c["createElementBlock"])(c["Fragment"],null,Object(c["renderList"])(l.sqlite_env,(e,t)=>(Object(c["openBlock"])(),Object(c["createBlock"])(m,{key:t},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(b,{span:22,offset:2},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(p,{label:t},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(d,{placeholder:e.placeholder,modelValue:e.value,"onUpdate:modelValue":t=>e.value=t},null,8,["placeholder","modelValue","onUpdate:modelValue"])]),_:2},1032,["label"])]),_:2},1024)]),_:2},1024))),128)),Object(c["createVNode"])(m,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(b,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(p,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(f,{type:"primary",onClick:n.submit_form},{default:Object(c["withCtx"])(()=>[Object(c["createTextVNode"])("保存")]),_:1},8,["onClick"]),Object(c["createVNode"])(f,{type:"info",onClick:n.refresh},{default:Object(c["withCtx"])(()=>[Object(c["createTextVNode"])("刷新")]),_:1},8,["onClick"])]),_:1})]),_:1})]),_:1})]),_:1},8,["model"])):Object(c["createCommentVNode"])("",!0),"leancloud"===l.current_db?(Object(c["openBlock"])(),Object(c["createBlock"])(u,{key:1,model:l.leancloud_env,"label-width":"120px"},{default:Object(c["withCtx"])(()=>[(Object(c["openBlock"])(!0),Object(c["createElementBlock"])(c["Fragment"],null,Object(c["renderList"])(l.leancloud_env,(e,t)=>(Object(c["openBlock"])(),Object(c["createBlock"])(m,{key:t},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(b,{span:22,offset:2},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(p,{label:t},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(d,{placeholder:e.placeholder,modelValue:e.value,"onUpdate:modelValue":t=>e.value=t},null,8,["placeholder","modelValue","onUpdate:modelValue"])]),_:2},1032,["label"])]),_:2},1024)]),_:2},1024))),128)),Object(c["createVNode"])(m,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(b,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(p,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(f,{type:"primary",onClick:n.submit_form},{default:Object(c["withCtx"])(()=>[Object(c["createTextVNode"])("保存")]),_:1},8,["onClick"]),Object(c["createVNode"])(f,{type:"info",onClick:n.refresh},{default:Object(c["withCtx"])(()=>[Object(c["createTextVNode"])("刷新")]),_:1},8,["onClick"])]),_:1})]),_:1})]),_:1})]),_:1},8,["model"])):Object(c["createCommentVNode"])("",!0),"mysql"===l.current_db?(Object(c["openBlock"])(),Object(c["createBlock"])(u,{key:2,model:l.mysql_env,"label-width":"120px"},{default:Object(c["withCtx"])(()=>[(Object(c["openBlock"])(!0),Object(c["createElementBlock"])(c["Fragment"],null,Object(c["renderList"])(l.mysql_env,(e,t)=>(Object(c["openBlock"])(),Object(c["createBlock"])(m,{key:t},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(b,{span:22,offset:2},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(p,{label:t},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(d,{placeholder:e.placeholder,modelValue:e.value,"onUpdate:modelValue":t=>e.value=t},null,8,["placeholder","modelValue","onUpdate:modelValue"])]),_:2},1032,["label"])]),_:2},1024)]),_:2},1024))),128)),Object(c["createVNode"])(m,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(b,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(p,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(f,{type:"primary",onClick:n.submit_form},{default:Object(c["withCtx"])(()=>[Object(c["createTextVNode"])("保存")]),_:1},8,["onClick"]),Object(c["createVNode"])(f,{type:"info",onClick:n.refresh},{default:Object(c["withCtx"])(()=>[Object(c["createTextVNode"])("刷新")]),_:1},8,["onClick"])]),_:1})]),_:1})]),_:1})]),_:1},8,["model"])):Object(c["createCommentVNode"])("",!0),"mongodb"===l.current_db?(Object(c["openBlock"])(),Object(c["createBlock"])(u,{key:3,model:l.mongodb_env,"label-width":"120px"},{default:Object(c["withCtx"])(()=>[(Object(c["openBlock"])(!0),Object(c["createElementBlock"])(c["Fragment"],null,Object(c["renderList"])(l.mongodb_env,(e,t)=>(Object(c["openBlock"])(),Object(c["createBlock"])(m,{key:t},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(b,{span:22,offset:2},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(p,{label:t},{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(d,{placeholder:e.placeholder,modelValue:e.value,"onUpdate:modelValue":t=>e.value=t},null,8,["placeholder","modelValue","onUpdate:modelValue"])]),_:2},1032,["label"])]),_:2},1024)]),_:2},1024))),128)),Object(c["createVNode"])(m,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(b,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(p,null,{default:Object(c["withCtx"])(()=>[Object(c["createVNode"])(f,{type:"primary",onClick:n.submit_form},{default:Object(c["withCtx"])(()=>[Object(c["createTextVNode"])("保存")]),_:1},8,["onClick"]),Object(c["createVNode"])(f,{type:"info",onClick:n.refresh},{default:Object(c["withCtx"])(()=>[Object(c["createTextVNode"])("刷新")]),_:1},8,["onClick"])]),_:1})]),_:1})]),_:1})]),_:1},8,["model"])):Object(c["createCommentVNode"])("",!0)],64)}var it={name:"ManagePanelMain_switchdb",emits:["refresh"],data(){return{current_db:null,sqlite_env:{GH_NAME:{value:"",placeholder:"github name"},GH_EMAIL:{value:"",placeholder:"github email"},GH_TOKEN:{value:"",placeholder:"github access token"}},leancloud_env:{APPKEY:{value:"",placeholder:"leancloud的APPKEY"},APPID:{value:"",placeholder:"leancloud的APPID"}},mysql_env:{MYSQL_USERNAME:{value:"",placeholder:"mysql用户名"},MYSQL_PASSWORD:{value:"",placeholder:"mysql密码"},MYSQL_IP:{value:"",placeholder:"mysql ip地址"},MYSQL_PORT:{value:"",placeholder:"mysql端口"},MYSQL_DB:{value:"",placeholder:"mysql 数据库名称"}},mongodb_env:{MONGODB_URI:{value:"",placeholder:"mongodb连接URI"}}}},methods:{submit_form(){let e=Ie(),t=!0;if(e){let a={};if("sqlite"===this.current_db){for(let e in this.sqlite_env){if(""===this.sqlite_env[e].value)return void Object(Me["a"])({message:"请确保环境变量已添加",type:"error"});a[e]=this.sqlite_env[e].value}a["STORAGE_TYPE"]="sqlite"}if("leancloud"===this.current_db){for(let e in this.leancloud_env){if(""===this.leancloud_env[e].value)return void Object(Me["a"])({message:"请确保环境变量已添加",type:"error"});a[e]=this.leancloud_env[e].value}a["STORAGE_TYPE"]="leancloud"}if("mysql"===this.current_db){for(let e in this.mysql_env){if(""===this.mysql_env[e].value)return void Object(Me["a"])({message:"请确保环境变量已添加",type:"error"});a[e]=this.mysql_env[e].value}a["STORAGE_TYPE"]="mysql"}if("mongodb"===this.current_db){for(let e in this.mongodb_env){if(""===this.mongodb_env[e].value)return void Object(Me["a"])({message:"请确保环境变量已添加",type:"error"});a[e]=this.mongodb_env[e].value}a["STORAGE_TYPE"]="mongodb"}let c=Le(e);"github"===this.current_settings.DEPLOY_TYPE?(this.$axios.put(this.Config.private_api_url+"update_github_env",a,c).then(e=>{let a=e.data;200!==a.code&&(Object(Me["a"])({message:a.message,type:"error"}),t=!1)}).catch(e=>{Object(Me["a"])({message:e.message,type:"error"}),t=!1}),this.$axios.put(this.Config.private_api_url+"update_vercel_env",a,c).then(e=>{let a=e.data;200!==a.code&&(Object(Me["a"])({message:a.message,type:"error"}),t=!1)}).catch(e=>{Object(Me["a"])({message:e.message,type:"error"}),t=!1})):this.$axios.put(this.Config.private_api_url+"update_server_env",a,c).then(e=>{let a=e.data;200!==a.code&&(Object(Me["a"])({message:a.message,type:"error"}),t=!1)}).catch(e=>{Object(Me["a"])({message:e.message,type:"error"}),t=!1}),a={DATABASE:this.current_db},this.$axios.put(this.Config.private_api_url+"update_settings",a,c).then(e=>{let a=e.data;200===a.code?Object(Me["a"])({message:a.message,type:"success"}):Object(Me["a"])({message:a.message,type:"error"}),t=!1}).catch(e=>{Object(Me["a"])({message:e.message,type:"error"}),t=!1}),t&&Ze["a"].confirm("更新环境变量成功，重启程序后生效，是否立即重启？","提示",{confirmButtonText:"确定",cancelButtonText:"取消",type:"warning"}).then(()=>{this.$axios.get(this.Config.private_api_url+"restart_api",c),Object(Me["a"])({type:"success",message:"重启成功"})}).catch(e=>{Object(Me["a"])({type:"info",message:"已取消"})})}else Object(Me["a"])({message:"认证失败，未获取到fcircle token",type:"error"});this.refresh()},refresh(){this.$emit("refresh","switchdb")}},created(){this.current_db=this.current_settings.DATABASE},props:["Config","current_settings"]};a("7232");const st=v()(it,[["render",rt],["__scopeId","data-v-30fd6fc6"]]);var dt=st;function pt(e,t,a,o,l,n){const r=Object(c["resolveComponent"])("el-alert"),i=Object(c["resolveComponent"])("el-button");return Object(c["openBlock"])(),Object(c["createElementBlock"])(c["Fragment"],null,[Object(c["createVNode"])(r,{title:"程序运行状态：",type:"success",description:l.status,"show-icon":"",center:"",closable:!1},null,8,["description"]),Object(c["createVNode"])(i,{class:"cf-manage-center-btn",type:"primary",disabled:"运行中"===l.status,onClick:n.run_crawler},{default:Object(c["withCtx"])(()=>[Object(c["createTextVNode"])("立即运行爬虫 ")]),_:1},8,["disabled","onClick"]),Object(c["createVNode"])(i,{class:"cf-manage-center-btn",type:"primary",onClick:n.check_crawler_status},{default:Object(c["withCtx"])(()=>[Object(c["createTextVNode"])("检测运行状态 ")]),_:1},8,["onClick"])],64)}var bt={name:"ManagePanelMain_status",data(){return{status:"未知",timer:null}},methods:{run_crawler(){let e=Ie();if(e){let t=Le(e);this.$axios.get(this.Config.private_api_url+"run_crawl_now",t).then(e=>{let t=e.data;200===t.code?(Object(Me["a"])({message:t.message,type:"success"}),this.status="运行中",setTimeout(this.check_crawler_status,5e3),this.check_crawler_status()):Object(Me["a"])({message:t.message,type:"error"})}).catch(e=>{Object(Me["a"])({message:e.message,type:"error"})})}},check_crawler_status(){let e=Ie();if(e){let t=Le(e);this.$axios.get(this.Config.private_api_url+"crawler_status",t).then(e=>{let t=e.data;"运行中"!==t.status&&"未运行"!==t.status&&"未知"!==t.status?this.status="未知":this.status=t.status}).catch(()=>{this.status="未知"})}null!==this.timer&&clearTimeout(this.timer),"运行中"===this.status?this.timer=setTimeout(this.check_crawler_status,1e4):this.timer=setTimeout(this.check_crawler_status,6e4)}},created(){this.check_crawler_status()},unmounted(){null!==this.timer&&clearTimeout(this.timer)},unmounted(){null!==this.timer&&clearTimeout(this.timer)},props:["Config"]};a("e9a4");const mt=v()(bt,[["render",pt],["__scopeId","data-v-593a2f92"]]);var ft=mt;const ut=Object(c["createElementVNode"])("p",null,"适配友链朋友圈5.0",-1),ht=Object(c["createElementVNode"])("p",null,[Object(c["createTextVNode"])("Powered By："),Object(c["createElementVNode"])("a",{href:"https://www.yyyzyyyz.cn/",target:"_blank"},"yyyz")],-1),gt=Object(c["createElementVNode"])("p",null,[Object(c["createTextVNode"])("朋友圈logo、样式设计："),Object(c["createElementVNode"])("a",{href:"https://blog.zhicat.com/",target:"_blank"},"icat")],-1),Ot=Object(c["createElementVNode"])("p",null,[Object(c["createTextVNode"])("原版样式基于："),Object(c["createElementVNode"])("a",{href:"https://immmmm.com/",target:"_blank"},"林木木")],-1),Ct=Object(c["createElementVNode"])("p",null,[Object(c["createTextVNode"])("前端疑难杂症解决："),Object(c["createElementVNode"])("a",{href:"https://anzhiy.cn/",target:"_blank"},"安知鱼")],-1),jt=Object(c["createElementVNode"])("p",null,[Object(c["createTextVNode"])("组件库："),Object(c["createElementVNode"])("a",{href:"https://element-plus.gitee.io/zh-CN/",target:"_blank"},"Element Plus")],-1);function vt(e,t,a,o,l,n){const r=Object(c["resolveComponent"])("el-divider");return Object(c["openBlock"])(),Object(c["createElementBlock"])(c["Fragment"],null,[ut,ht,Object(c["createVNode"])(r),Object(c["createTextVNode"])(" 鸣谢： "),gt,Ot,Ct,jt],64)}var _t={name:"ManagePanelMain_settings"};const xt=v()(_t,[["render",vt]]);var wt=xt,kt=a("2295"),Vt={name:"ManagePanelMain",emits:["logout"],data(){return{current_tab:"settings",current_settings:null,component_keys:{settings:0,envs:0,links:0,switchdb:0,status:0}}},methods:{logout(){localStorage.removeItem("fcircle-token"),this.$emit("logout")},change_current_component(e){this.show_login_page=!1,this.current_component!==e&&(this.current_component=e)},read_current_settings(){let e=Ie();if(e){let t=Le(e);this.$axios.get(this.Config.private_api_url+"read_settings",t).then(e=>{let t=e.data;200===t.code?this.current_settings=t.current_settings:Object(Me["a"])({message:t.message,type:"error"})}).catch(e=>{Object(Me["a"])({message:e.message,type:"error"})})}},refresh_component(e){this.read_current_settings(),this.component_keys[e]+=1}},created(){this.read_current_settings(),this.$axios.get(this.Config.private_api_url+"version").then(e=>{1===e.data.status&&Object(kt["a"])({title:"版本更新提示",message:"检测到后端新版本："+e.data.latest_version+"，然而当前版本为："+e.data.current_version+"，请及时更新后端版本",type:"warning"})}),this.$axios.get("https://fcircle-doc.yyyzyyyz.cn/front_version.txt").then(e=>{e.data!==this.$fcircle_front_version&&Object(kt["a"])({title:"版本更新提示",message:"检测到前端新版本："+e.data+"，然而当前版本为："+this.$fcircle_front_version+"，请及时更新前端版本",type:"warning"})})},props:["Config"],components:{ManagePanelMain_settings:He,ManagePanelMain_envs:$e,ManagePanelMain_links:ot,ManagePanelMain_switchdb:dt,ManagePanelMain_status:ft,ManagePanelMain_about:wt}};a("fe56");const At=v()(Vt,[["render",Qe],["__scopeId","data-v-668b627c"]]);var Nt=At,Et={name:"ManagePanel",emits:["close_manage_panel"],data(){return{show_login_page:!0}},methods:{close_manage_panel(){this.$emit("close_manage_panel")},login_success(){this.show_login_page=!1},logout(){this.show_login_page=!0}},props:["Config"],components:{ManagePanelLogin:De,ManagePanelMain:Nt}};a("fd9b");const yt=v()(Et,[["render",Ae],["__scopeId","data-v-34921c7c"]]);var Bt=yt;let Lt={private_api_url:"https://moments.zhicat.com/",public_api_url:"https://fcircle-pub.rct.cool/",page_turning_number:12,error_img:"https://sdn.geekzu.org/avatar/57d8260dfb55501c37dde588e7c3852c",sort_rule:"created"};var It=Lt;function Mt(e){if("undefined"!==typeof UserConfig)for(let t in UserConfig)e[t]&&(e[t]=UserConfig[t]);return e}var St={name:"App",data(){return{Config:It,current_api:null,change_map:{updated:null,created:null},article_card_data:{open:!1,data:null},manage_panel_open:!1}},methods:{get_data(e){let t=JSON.parse(sessionStorage.getItem(e+"CreatedData")),a=JSON.parse(sessionStorage.getItem(e+"UpdatedData"));this.change_map["created"]=t,this.change_map["updated"]=a,null===t&&this.$axios.get(e+"all?rule=created").then(t=>{sessionStorage.setItem(e+"CreatedData",JSON.stringify(t.data)),this.change_map["created"]=t.data}).catch(e=>{Object(Me["a"])({message:e.message,type:"error"})}),null===a&&this.$axios.get(e+"all?rule=updated").then(t=>{sessionStorage.setItem(e+"UpdatedData",JSON.stringify(t.data)),this.change_map["updated"]=t.data}).catch(e=>{Object(Me["a"])({message:e.message,type:"error"})})},change_sort_rule(e){this.Config.sort_rule=e},open_article_card(e){let t,a="private"===this.current_api?this.Config.private_api_url:this.Config.public_api_url;t=""!==e?a+"post?num=5&link="+e:a+"post?num=5",this.$axios.get(t).then(e=>{"statistical_data"in e.data?(this.article_card_data.data=e.data,this.article_card_data.open=!0):Object(Me["a"])({message:"未获取到文章卡片òᆺó\n如果持续出现此错误，检查数据库是否正常",type:"error"})})},close_article_card(){this.article_card_data.open=!1},toggle_api_url(){"private"===this.current_api?(this.current_api="public",this.get_data(this.Config.public_api_url)):(this.current_api="private",this.get_data(this.Config.private_api_url))},open_manage_panel(){this.manage_panel_open=!0},close_manage_panel(){this.manage_panel_open=!1}},created(){this.Config=Mt(this.Config),this.current_api="private",this.get_data(this.Config.private_api_url)},components:{Header:x,ArticleBody:ne,ArticleCard:ve,ManagePanel:Bt}};a("d18f");const Tt=v()(St,[["render",r]]);var Dt=Tt,Ft=a("bc3a"),Pt=a.n(Ft),Rt=a("c3a1"),Yt=(a("7437"),a("a2f0"),a("9224")),Qt=a("f6f2");const Kt=Object(c["createApp"])(Dt);Kt.use(Rt["a"]);for(const[zt,Ut]of Object.entries(Qt))Kt.component(zt,Ut);Kt.config.globalProperties.$axios=Pt.a,Kt.config.globalProperties.$fcircle_front_version=Yt.version,Kt.mount("#hexo-circle-of-friends-root")},"594a":function(e,t,a){var c=a("4ae4");c.__esModule&&(c=c.default),"string"===typeof c&&(c=[[e.i,c,""]]),c.locals&&(e.exports=c.locals);var o=a("499e").default;o("5d03b462",c,!0,{sourceMap:!1,shadowMode:!1})},5974:function(e,t,a){"use strict";a("2ac5")},"5c8d":function(e,t,a){var c=a("bd0b");c.__esModule&&(c=c.default),"string"===typeof c&&(c=[[e.i,c,""]]),c.locals&&(e.exports=c.locals);var o=a("499e").default;o("003822fc",c,!0,{sourceMap:!1,shadowMode:!1})},"5e0e":function(e,t,a){"use strict";a("1799")},7232:function(e,t,a){"use strict";a("991d")},"7d5b":function(e,t,a){"use strict";a("5c8d")},"8e53":function(e,t,a){var c=a("1feb");c.__esModule&&(c=c.default),"string"===typeof c&&(c=[[e.i,c,""]]),c.locals&&(e.exports=c.locals);var o=a("499e").default;o("312900a6",c,!0,{sourceMap:!1,shadowMode:!1})},"8fd2":function(e,t,a){var c=a("24fb");t=c(!1),t.push([e.i,"#page:has(#hexo-circle-of-friends-root){-webkit-backdrop-filter:none!important;backdrop-filter:none!important;transform:none!important;transition:none!important}.el-button:focus,.el-button:hover{color:var(--icat-blue)!important}.el-form-item__label{color:#fff!important}",""]),e.exports=t},"91a2":function(e,t,a){var c=a("24fb");t=c(!1),t.push([e.i,".cf-manage-main-add-btn[data-v-30fd6fc6]{margin-left:30px}.cf-manage-tip[data-v-30fd6fc6]{color:#fff}",""]),e.exports=t},9224:function(e){e.exports=JSON.parse('{"name":"fcircle-theme-yyyz","version":"1.0.3","private":false,"scripts":{"serve":"vue-cli-service serve","build":"vue-cli-service build","lint":"vue-cli-service lint"},"dependencies":{"@element-plus/icons-vue":"^2.0.9","axios":"^0.27.2","core-js":"^3.6.5","element-plus":"^2.2.17","vue":"^3.0.0"},"devDependencies":{"@vue/cli-plugin-babel":"~4.5.15","@vue/cli-plugin-eslint":"~4.5.15","@vue/cli-service":"~4.5.15","@vue/compiler-sfc":"^3.0.0","@vue/eslint-config-standard":"^5.1.2","babel-eslint":"^10.1.0","eslint":"^6.7.2","eslint-plugin-import":"^2.20.2","eslint-plugin-node":"^11.1.0","eslint-plugin-promise":"^4.2.1","eslint-plugin-standard":"^4.0.0","eslint-plugin-vue":"^7.0.0"},"description":"```\\r npm install\\r ```","files":["dist/app.min.js","dist/bundle.js"],"main":".eslintrc.js","repository":{"type":"git","url":"git+https://github.com/hiltay/hexo-circle-of-friends-front.git"},"keywords":["yyyz","5.x","友链朋友圈前端插件"],"author":"yyyz","license":"ISC","bugs":{"url":"https://github.com/hiltay/hexo-circle-of-friends-front/issues"},"homepage":"https://github.com/hiltay/hexo-circle-of-friends-front#readme"}')},"991d":function(e,t,a){var c=a("91a2");c.__esModule&&(c=c.default),"string"===typeof c&&(c=[[e.i,c,""]]),c.locals&&(e.exports=c.locals);var o=a("499e").default;o("665ae4a5",c,!0,{sourceMap:!1,shadowMode:!1})},a2f0:function(e,t,a){var c=a("8fd2");c.__esModule&&(c=c.default),"string"===typeof c&&(c=[[e.i,c,""]]),c.locals&&(e.exports=c.locals);var o=a("499e").default;o("6abc6200",c,!0,{sourceMap:!1,shadowMode:!1})},bd0b:function(e,t,a){var c=a("24fb");t=c(!1),t.push([e.i,".fade-enter-active[data-v-31c20c7f],.fade-leave-active[data-v-31c20c7f]{transition:opacity .1s}.fade-enter[data-v-31c20c7f],.fade-leave-to[data-v-31c20c7f]{opacity:0}#cf-overlay-group[data-v-31c20c7f]{display:flex;position:fixed;align-items:center;justify-content:center;width:100vw;height:100vh;z-index:100;top:0;left:0}#cf-overlay[data-v-31c20c7f]{position:absolute;width:100%;height:100%;top:0;left:0;background-color:var(--icat-maskbgdeep);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow-y:auto;pointer-events:all;transition:all .1s ease;z-index:998;animation:cf-show-31c20c7f .3s ease-in-out}@keyframes cf-show-31c20c7f{0%{opacity:0}to{opacity:1}}@keyframes cf-show-move-31c20c7f{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.cf-overshow[data-v-31c20c7f]{text-align:center;border-radius:12px;width:320px;transform:translateY(0);box-shadow:0 12px 40px rgba(0,0,0,.093);background:var(--icat-background);transition:all .1s ease;z-index:999;padding:16px;border:var(--style-border-always);animation:cf-show-move-31c20c7f .3s ease-in-out;margin:auto}.cf-overshow-head[data-v-31c20c7f]{display:flex;flex-direction:column;align-items:center;padding-bottom:.5rem;margin-bottom:.5rem;border-bottom:1px dashed var(--icat-secondtext)}.cf-overshow-head img.cf-img-avatar[data-v-31c20c7f]:hover{transform:rotate(1turn);transition:.8s}.cf-overshow .cf-overshow-head a[data-v-31c20c7f]{color:var(--icat-fontcolor);display:block;text-align:center;font-weight:700;margin-top:-5px;padding:5px 8px 5px;text-decoration:none;width:-moz-fit-content;width:fit-content}.cf-overshow img.cf-img-avatar[data-v-31c20c7f]{background:#fff;width:80px;height:80px;border-radius:50%;margin:-45px auto 8px;transform:rotate(-1turn);transition:.8s}.cf-overshow p[data-v-31c20c7f]{margin:.3rem 5px;width:100%;position:relative;display:flex;flex-direction:column;align-items:flex-start}.cf-overshow p a.cf-article-title[data-v-31c20c7f]{text-decoration:none;display:block;text-align:left;position:relative;z-index:2;font-size:15px;line-height:1.2;letter-spacing:normal;max-height:50px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;color:var(--icat-fontcolor);width:-moz-fit-content;width:fit-content;font-weight:700}.cf-overshow p span[data-v-31c20c7f]{position:relative;z-index:1;font-size:12px;margin-top:8px}@media screen and (max-width:768px){.cf-overshow[data-v-31c20c7f]{width:90%}.cf-overshow img.cf-img-avatar[data-v-31c20c7f]{margin:0}}.cf-overshow .cf-overshow-content[data-v-31c20c7f]{padding:2px 3px 7px}.cf-overshow .cf-overshow-content-tail[data-v-31c20c7f]{padding:2px 3px 7px;border-bottom-left-radius:20px;border-bottom-right-radius:20px}",""]),e.exports=t},be21:function(e,t,a){var c=a("24fb");t=c(!1),t.push([e.i,".cf-manage-logo[data-v-735984d8]{top:25%}.cf-manage-logo[data-v-735984d8],.cf-manage-title[data-v-735984d8]{position:absolute;transform:translate(-50%,-50%);left:50%}.cf-manage-title[data-v-735984d8]{top:35%;color:#fff;font-size:24px;font-family:PingFangSC-Regular;text-align:center;white-space:nowrap;line-height:33px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.cf-manage-input[data-v-735984d8]{top:45%}.cf-manage-input[data-v-735984d8],.cf-manage-login-btn[data-v-735984d8]{position:absolute;transform:translate(-50%,-50%);max-width:50%;left:50%}.cf-manage-login-btn[data-v-735984d8]{top:60%}",""]),e.exports=t},d18f:function(e,t,a){"use strict";a("8e53")},e9a4:function(e,t,a){"use strict";a("f61c")},ea03:function(e,t,a){"use strict";a("5145")},f2b1:function(e,t,a){var c=a("24fb");t=c(!1),t.push([e.i,".cf-manage-center-btn[data-v-593a2f92]{margin-top:30px}",""]),e.exports=t},f61c:function(e,t,a){var c=a("f2b1");c.__esModule&&(c=c.default),"string"===typeof c&&(c=[[e.i,c,""]]),c.locals&&(e.exports=c.locals);var o=a("499e").default;o("c21bbef8",c,!0,{sourceMap:!1,shadowMode:!1})},fd9b:function(e,t,a){"use strict";a("2375")},fe56:function(e,t,a){"use strict";a("1b92")},ff61:function(e,t,a){"use strict";a("594a")}});

创建数据【后端】

截本节教程前 后端采用的是 github + sqlite 部署 - 参考教程 友链朋友圈 - github+sqlite部署

友链朋友圈 - 教程官网
你是否经常烦恼于友链过多但没有时间浏览？那么友链朋友圈将解决这一痛点。你可以随时获取友链网站的更新内容，并了解友链的活跃情况！

热评弹窗

Butterfly的魔改教程：最新评论页
显示全站最新评论内容，快速预览；内附评论总数显示、热评弹窗教程

好物推荐页

Butterfly的魔改教程：好物推荐页
灵感来源林木木的好物页面，Hexo也来整一个，来定制一个你的好物分享吧

自定页数跳转

Butterfly的魔改教程：自定页数跳转
基于 Butterfly主题 的原生自定页数跳转版，再也不用频繁跳转页咯

最新评论页

Butterfly的魔改教程：最新评论页
显示全站最新评论内容，快速预览；内附评论总数显示、热评弹窗教程

文章版权

本小节是将文章底部版权进行魔改，如只需调整请移步 主题调整 | 3

  • 修改 [blogRoot]/themes/butterfly/layout/includes/post/post-copyright.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
35
36
if theme.post_copyright.enable && page.copyright !== false
+  - let title  = page.title || _p('no_title')
+  - let updated = date(page.updated) || _p("search.load_data")
  - let author = page.copyright_author || config.author
  - let authorHref = page.copyright_author_href || theme.post_copyright.author_href || config.url
  - let url = page.copyright_url || page.permalink
  - let info = page.copyright_info || _p('post.copyright.copyright_content', theme.post_copyright.license_url, theme.post_copyright.license, config.url, config.title)
-  .post-copyright
-    .post-copyright__author
-      span.post-copyright-meta= _p('post.copyright.author') + ": "
-      span.post-copyright-info
-        a(href=authorHref)=author
-    .post-copyright__type
-      span.post-copyright-meta= _p('post.copyright.link') + ": "
-      span.post-copyright-info
-        a(href=url_for(url))= theme.post_copyright.decode ? decodeURI(url) : url
-    .post-copyright__notice
-      span.post-copyright-meta= _p('post.copyright.copyright_notice') + ": "
-      span.post-copyright-info!= info
+  .icat-license
+    .icat-license-title=title
+    .icat-license-link
+      a(href=url_for(url))= theme.post_copyright.decode ? decodeURI(url) : url
+    .icat-license-meta
+      .icat-license-meta-item
+        .icat-license-meta-title 本文作者
+        .icat-license-meta-text
+          a(href=authorHref)=author
+      .icat-license-meta-item
+        .icat-license-meta-title 最后更新
+        .icat-license-meta-text=updated
+      .icat-license-meta-item
+        .icat-license-meta-title 许可协议
+        .icat-license-meta-text
+          a(href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" rel="nofollow noopener noreferrer" target="_blank") CC BY-NC-SA 4.0
+    .icat-license-tips=info
  • 新建 [blogRoot]/source/css/license.css 样式文件，并新增以下内容
    （也可以在自建的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
.icat-license {
  position: relative;
  line-height: 1.2;
  font-size: 1rem;
  background: var(--icat-card-bg);
  color: var(--icat-fontcolor);
  overflow: hidden;
  border: var(--style-border);
  display: block;
  padding: 1rem 1.3rem;
  margin: 1.5rem 0 0.5rem;
  border-radius: 12px
}
.icat-license:after {
  position: absolute;
  content: "\e039";
  font-size: 210px;
  font-family: "iconfont";
  color: var(--icat-fontcolor);
  opacity: 0.1;
  filter: blur(6px);
  height: 210px;
  width: 210px;
  right: -40px;
  top: -80px;
}
@media screen and (max-width: 768px) {
  .icat-license:after {
    top: auto;
    bottom: -40px;
  }
}

.icat-license a {
  color: var(--icat-fontcolor);
  border-radius: 6px;
  transition: .5s;
}
.icat-license a:hover {
  color: var(--icat-white);
  background: var(--icat-blue);
  padding: 0 4px;
}
.icat-license .icat-license-link a {
  opacity: .6;
}
.icat-license .icat-license-link a:hover {
  opacity: 1;
}
.icat-license-title {
  font-size: 18px;
  font-weight: 600;
}
.icat-license-meta-title,.icat-license-title {
  margin: 0 0 .25rem
}
.icat-license-link,.icat-license-meta-title {
  font-size: .8rem
}
.icat-license-link {
  color: #7a7a7a;
  font-size: .9rem
}
.icat-license-meta {
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap
}
.icat-license-meta-item {
  margin: 0 2rem 1em 0
}
.icat-license-meta-text {
  margin: 0
}
.icat-license-tips {
  font-size: .95rem;
}

/* 版权样式 */
  • 在 _config.butterfly.yml 主题配置文件中 inject 下的 head 引入 license.css 样式
1
2
3
4
5
6
7
8
9
10
  ···

inject:
  head:
    - <link rel="stylesheet" href="/css/license.css"> # 魔改版权样式
    - ···
  bottom:
    - ···

  ···

订阅页

Butterfly的魔改教程：文章订阅页
基于Follow文章更新通知的订阅服务

文章推荐

  • 在 [blogRoot]/themes/butterfly/layout/includes/header/index.pug 页面合适处新增以下内容
1
2
3
4
5
6
7
8
9
10
11
.banner-random
  .random-title
    P.title 随机文章
    .botton-box
      a.refresh(href="javascript:meuicat.RandomPosts()")
        i.iconfont.icat-refresh
        span 换一批
      .slide
        i.iconfont.icat-angle-down-new(style="transform: rotate(90deg)" onclick="meuicat.RandomBar('prev')")
        i.iconfont.icat-angle-down-new(style="transform: rotate(-90deg)" onclick="meuicat.RandomBar('next')")
  .random-list
  • 新建 [blogRoot]/themes/butterfly/source/css/_page/banner-random.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
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
.banner-random
    margin-top: 15px

    .random-title
        display: flex
        justify-content: space-between
        align-items: center

        .title
            font-size: 1.25rem
            font-weight: 600
            margin: 0
            min-width: 80px

        .botton-box
            display: flex
            font-weight: 600

            +maxWidth768()
                width: 100%
                justify-content: space-between
                align-items: center

            .refresh
                opacity: .5
                transition: .6s

                +maxWidth768()
                    margin-left: 8px

                &:hover
                    color: var(--icat-blue)
                    opacity: 1

                i
                    margin-right: 6px

                    +maxWidth768()
                        font-size: 18px

                span
                    +maxWidth768()
                        display: none

            .slide
                display: none

                +maxWidth768()
                    display: flex

                i
                    margin-left: 4px
                    font-size: 14px
                    width: 28px
                    height: 28px
                    display: flex
                    align-items: center
                    justify-content: center

    .random-list
        margin-top: 15px
        display: flex

        +maxWidth768()
            overflow-x: scroll
            overflow-y: hidden
            scroll-behavior: smooth
        
        &::-webkit-scrollbar
            display: none

        .post_item
            width: calc(100% / 4 - 8px)
            margin-right: 15px
            border-radius: 8px
            background: var(--card-bg)
            box-shadow: var(--icat-shadow-border)
            transition: .6s
            border: var(--style-border)
            height: 110px
            animation: barrageIn .6s .4s backwards

            +maxWidth768()
                width: 240px
                min-width: 240px

            &:last-child
                margin-right: 0

            &:hover
                background: var(--icat-blue)
                box-shadow: var(--icat-shadow-blue)

                .post_box
                    .post-info
                        opacity: 0

                    .post_description
                        opacity: 1

            a:hover
                color: var(--font-color)

            .post_box
                width: 100%
                height: 100%
                display: flex
                position: relative
                align-items: center
                justify-content: center

                .post-info
                    display: flex
                    align-items: center
                    justify-content: center
                    flex-direction: column
                    padding: 0 15px
                    transition: .6s
                    opacity: 1

                    +maxWidth768()
                        padding: 0 8px

                    .post-title
                        margin: 0
                        font-size: 1rem
                        font-weight: 600
                        line-height: 1.5
                        -webkit-line-clamp: 1
                        overflow: hidden
                        -webkit-box-orient: vertical
                        display: -webkit-box

                    .info-box
                        font-size: 13px
                        color: #858585
                        display: flex

                .post_description
                    position: absolute
                    opacity: 0
                    color: var(--icat-white)
                    transition: .6s
                    text-align: center
                    padding: 0 15px
                    line-height: 1.6
                    -webkit-line-clamp: 2
                    overflow: hidden
                    -webkit-box-orient: vertical
                    display: -webkit-box
                    margin: 0

                    +maxWidth768()
                        padding: 0 8px
  • 创建 [blogRoot]/themes/butterfly/scripts/helpers/random-articles.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
27
28
29
/**
 * MeuiCat
 * generate json - random_articles
 * developer：meuciat.com
 */

'use strict'

hexo.extend.generator.register('thePosts', function(locals) {
const jsonData = locals.posts
.filter(post => post.random !== false)
.map(post => {
const date = new Date(post.date);
const categories = post.categories.map(category => category.name);
            const formattedDate = date.toISOString().split('T')[0];
return {
title: post.title || "暂无标题",
time: formattedDate,
categories: categories[0],
description: post.description || "暂无简介",
                link: post.permalink.replace(/^(?:\/\/|[^/]+)*\//, '/')
};
});

return {
path: 'articles-random.json',
data: JSON.stringify(jsonData)
};
});
  • 创建 [blogRoot]/source/js/random-articles.js 文件，并新增以下内容
    （或写在自建的公共 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
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
const meuicat = {
getRandomElementsFromArray: function(arr, num) {
const totalElements = arr.length;
const selectedElements = new Set();
while (selectedElements.size < num) {
const randomIndex = Math.floor(Math.random() * totalElements);
selectedElements.add(arr[randomIndex]);
}
return Array.from(selectedElements);
},
renderingPosts: function(data) {
const randomElements = meuicat.getRandomElementsFromArray(data, 4);
const postsHtml = randomElements.map((i) => `
<div class="post_item">
<a class="post_box" title="${i.title}" href="javascript:void(0)" onclick="pjax.loadUrl('${i.link}')">
<div class="post-info">
<p class="post-title">
${i.title}
</p>
<div class="info-box">
<span>${i.time}</span>
<span style="margin: 0 6px">|</span>
<span>${i.categories}</span>
</div>
</div>
<p class="post_description">
${i.description}
</p>
</a>
</div>`)
.join('');
document.querySelector(".banner-random>.random-list")
.innerHTML = postsHtml
},
RandomPosts: function() {
var cachedData = sessionStorage.getItem("postsInfo");
var cachedTimestamp = sessionStorage.getItem("postsInfoTimestamp");

if (cachedData && cachedTimestamp && (Date.now() - cachedTimestamp < CACHE_EXPIRATION_TIME)) {
meuicat.renderingPosts(JSON.parse(cachedData));
} else {
fetch("/articles-random.json")
.then(res => res.json())
.then(data => {
sessionStorage.setItem("postsInfo", JSON.stringify(data));
sessionStorage.setItem("postsInfoTimestamp", Date.now());

meuicat.renderingPosts(data);
});
}
}, // 主页banner随机推荐
RandomBar: function(text) {
const randomList = document.querySelector('.random-list');
const slideAmount = 210;

if (text === 'prev') {
randomList.scrollLeft -= slideAmount;
} else if (text === 'next') {
randomList.scrollLeft += slideAmount;
}
} // 主页推荐banner滑块
}

window.DOMReady = function () {
if (location.pathname == '/' || location.pathname.startsWith('/page/')) meuicat.RandomPosts();
};

document.addEventListener("DOMContentLoaded", DOMReady)
document.addEventListener("pjax:complete", DOMReady)
]]> 经验分享 Butterfly主题 魔改记录 https://meuicat.com/posts/edc13bd6.html#disqus_thread 近况记事 https://meuicat.com/posts/a2376071.html https://meuicat.com/posts/a2376071.html Sun, 12 Mar 2023 14:03:40 GMT 记事碎碎念 加班到深夜 周末上班到夜深 这在我以往的观点里 第一个想法是 立马跑路
才几个钱 还要给你无偿加班 一加就是七八个小时
用那句玩笑话来说就是 一会就立刻提桶跑路

但段时间 公司的投标 连续好几个晚上熬夜赶材料
对比 调研 审查 还有材料的规范
说实话这些真的很累 身心疲倦 对于我这个并没有接触过 也没有太多机械行业相关的知识储备的人来说 真的是临考抱佛脚了
同事们的帮助和鼓励 老爸的用心和支持照料 朋友的开导和陪伴
所以我一定把最好的结果 带给他们
也让我逐渐找回最真实的自己 那个为了结果而冲在前沿岸的自己

就在今天下午 中标结果出来了 也代表着我们这段时间 是值得的 是快乐的 是幸福的
我们中标了 我怀着万语千言写不尽的感谢之情 分享给了每一位值得高兴的人

此次竞比即使准备充足 但本就没报任何希望
即使对稿无数遍 代表大会上代表发言时依旧胆怯
但得到消息的那一刻 我的大脑却是一片空白
没有任何情绪 也不知道说些什么 我宕机了两三分钟才缓过来

突然最近看到一句话：
如果让你面对以前那个发光的自己 会胆怯吗

我承认 换做好几个月前 问我这个问题
我会胆怯 会自卑 会没自信
我会觉得那是我最巅峰的自己 没有更好的我了 我会胆怯

我依稀记得以前一直刻在我内心深处的一句话是
“我想要的 想要达成的 想做到的事和物 没有任何人阻止到我”

现在 这句话又回到我内心深处了

我最要好的朋友 也是我唯一的兄弟 小谭
还是要说说这小子 对咱姐好点 别学我 不然我让你吃不了兜着走
老大不小了 你爸妈也在催着你成家啦 好好和咱姐在一起 也要好好努力过上好生活
虽然哥们老跟你说 “事业比女人重要 不要老围着别人转” 但心里还是希望你能好好的对咱姐 把咱姐放第一位

还是那句话 有烦心事了 想喝酒了
一个电话 不管哥们在哪在干嘛 都立马到
知道你最近烦心事多 哥们也让着你点 但可别觉得我怕你哈

这段时间最让我感到感动的 就是iCat的喵友们
虽然只是简单的安慰 却能让我真切的感觉到 其实我并不孤单 原来我也会被值得的
最不负责的博主 别人日更我各种鸽 但蓝屿的一句 “虽迟但到” 说到我心里去了
为了一直支持鼓励的她们 真的很难不去继续坚持下来

（但有些需要开会员还是买单本的资源 一次两次的倒是问题不大 多了还是伤钱包的.. 所以说真的很努力在学爬虫了..）

项目中标 粉丝们都在朝着热爱前行 撮合着身边的朋友一对又一对 属于自己的深飘小家也定下来了
事物都在慢慢变好 我的生活也该步入正轨啦 ~

说回来 要不是因为这个项目 要去上海工作
都要忘了 以前的梦想是希望在上海生活发展啊
兜兜转转 终究是要实现了

其实 一个人挺好的 会认识新的朋友 开始新的生活
终于不用再靠父母靠朋友的了
我 要离开浪浪山 这 就是我最期待的开始

]]> 生活随笔 封の唠叨 https://meuicat.com/posts/a2376071.html#disqus_thread 酸辣柠檬鸡爪 https://meuicat.com/posts/f3d69673.html https://meuicat.com/posts/f3d69673.html Mon, 06 Mar 2023 10:04:53 GMT 记录下以前经常做的家常柠檬鸡爪~ 前言

听说女孩子的快乐是在夏日炎炎的时候
一碟柠檬鸡爪 配上半个西瓜 一杯奶茶
再来一部正在追的剧 人生简直了~

但..鸡爪真的有那么好吃嘛？！..
我真的下不去嘴..
奈何即使不吃我也得会做呀~

还记得的之前前任说过这么一句话

在一起那几年她可没少吃我做的酸辣鸡爪呢！！！😊

记录下熟能生巧的 柠檬酸辣鸡爪 ~

准备食材

食材量准注释
新鲜鸡爪适量看你要吃多少而已，于我以前而言一个人一般五六只就好了 🐔
耗油适量或 2 勺
食盐适量或 2 勺
食用油2 勺也可以不放油，更清爽
花椒3~6 粒
生抽3 勺
米醋1 勺米醋为佳，不会太酸；陈醋也行；或可使用 2 个柠檬挤汁，就不用放醋
小红米椒4~7 个看个人口味
生蒜2~4 瓣剁末备用
生姜2~3 片切片切条皆可
柠檬2~4 片看情况而定，多出来的泡水喝 🤪
料酒适量煮鸡爪时用
香菜2~5 根可选，搁以前我不放香菜

处理步骤

焯水

  • 新鲜鸡爪 用清水清洗 2~3 遍，洗去血水，剁掉指甲
    （也可以对半剁开或去骨，看个人喜欢）

  • 冷水上锅，清水淹没鸡爪，放入生姜片，料酒一圈，盖上盖子中火煮沸

  • 锅开后，转小火，盖子稍稍空起一点缝隙，继续煮

  • 这个时候开始计时，10 分钟后停止。期间可多次撇掉上层浮沫

  • 煮好后，关火，用清水冲洗 2~3 次，洗掉油花，洗去残留的血沫，然后控水准备料汁

焯水

焯熟夹出放凉

料汁

  • 取一小碗抹干水分，放入花椒备用

  • 热锅冷油，油温 **180℃**，倒入盛放花椒的碗内

  • 加入蒜末 辣椒 食盐 生抽 香油 香醋 耗油，稍稍搅拌
    （不清楚调料份量的，可筷子沾一下汁儿尝尝味；也可以放香菜）

  • 控水晾凉的鸡爪，用筷子扒拉入料盆中

  • 柠檬切片，去籽，挤出汁淋在鸡爪上，再将柠檬片整个放到盆中

  • 此时，可用筷子蘸汁儿尝尝盐味儿、酸味儿；一般咸淡适中，微微酸即可
    （醋不宜过量，会遮盖其他味道）

冷藏

  • 筷子搅拌均匀，以保鲜膜封口，放入冰箱冷藏 3~4 小时；若想尽快食用，也可每隔 30 分钟搅拌一次，1~2 小时后即可食用
    （于我而言一般次日才开吃，味道会比较好，但冷藏时也得翻几次）

  • 至此，酸辣爽口的柠檬鸡爪就大功告成咯~

封保鲜膜

小结

  1. 调料不知道份量，可少量多次添加，多尝尝味儿

  2. 煮鸡爪时，第一次煮开后，再煮 10 分钟，刚刚好

  3. 若一次吃不完，一定在晚上，记得筷子挑去柠檬片，只留 2~3 片即可
    （切记！柠檬放久了会苦）

  4. 能吃辣的喵友，可以加上一些辣椒油，颜色会更漂亮

生活很俗 享受创造美食还有享用美食的过程吧~

]]> 生活随笔 封の唠叨 烧菜典籍 https://meuicat.com/posts/f3d69673.html#disqus_thread 2021款 Model Y 近两年用车总结 https://meuicat.com/posts/a1f22c0c.html https://meuicat.com/posts/a1f22c0c.html Thu, 02 Mar 2023 05:32:46 GMT 一年半特斯拉购车 + 用车成本总结 定金：2021.7.18
提车：2021.11.26
截止：2023.3.2（提车461天）
总行驶里程：80000公里（已做完出保检修）

各项费用

基本费用

类目费用备注
Model Y 高性双电全驱387900 元裸车价
FSD56000 元完全自动驾驶
充电桩8000 元/
车管所工本费230 元/
第一年保险6600 元/
第二年保险5500 元/
第三年保险5000 元/

💰上述综合总费用约为：469230 元

保养费用

类目费用备注
轮胎2700 元更换2条原厂轮胎
空调滤芯540 元4s店 + 上门更换服务空调滤芯
四轮定位240 元前后轮胎换位
车内用品700 元前期脚垫等大小用品

💰上述综合总费用约为：4180 元

最重要的日常充电费用

充电分为 家冲 + 快冲 + 超冲

类目费用备注
家冲3801 元国网可查总共费用
快冲1174.56 元e充电 + 特来电
超冲900.58 元tslAPP可查

💰上述综合总电费：5876.14 元

🔋电池衰减情况：
充满电初始表现 615km，至今 601km

优缺点

🤮缺点：
1、皮不糙肉不厚，碰到就是刮花
2、内饰简约，其实也没什么内饰
3、舒适感一般，比不上国产新能源
4、刹车灵敏度较高容易紧急制动
5、车机设置不好，换车道车子抢方向盘
6、下雨天无框车门车窗会给你放交响乐
7、如果习惯下车不锁车门，有时候它会给你惊喜

😎优点：
便宜 + 省钱 + 续航较实 + 好开

♾️Ps：轮毂盖别拆 拆了就是二愣子

基本讲完了 后面想到什么我再增加吧

]]> 生活随笔 特斯拉 封の唠叨 https://meuicat.com/posts/a1f22c0c.html#disqus_thread 重构记录 - 3 https://meuicat.com/posts/73a5ae75.html https://meuicat.com/posts/73a5ae75.html Sat, 18 Feb 2023 15:18:47 GMT 从零重构本站所有内容；自用的主题调整记录~

📖 本教程更新于 2023 年 06 月 12 日

📚 文档目录

🚀 搭建教程 | 1 - 📑 前置教程 | 2 - 🎈 主题调整 | 3 - ✨ 魔改教程 | 4 - 🐈 重构自用数据记录

主题调整美化

本篇教程基于 Hexo 6.3.0 & Butterfly 4.8.5

⚠️ 友情提示

本节内容大部分需要在自建CSS文件内操作，如是新手小白，请先移步至 📑 第二章 | 前置教程

宽屏适配

  • 在自建的CSS文件 [blogRoot]/source/css/icat.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
.layout{
    width: 100%;
    max-width:1400px;
}
/* 重新定义宽度 */

.layout > div:first-child {
    width: 100%;
}
#post {
    width: 78%;
}
.aside-content {
    max-width: 312px;
    min-width: 300px;
}
.layout.hide-aside {
    max-width: 1400px;
}
/* 定义是否侧边栏的宽度 */

#recent-posts > .recent-post-item {
    height: 19em;
    border: var(--style-border);
}
#recent-posts > .recent-post-item >.recent-post-info {
    padding: 0 56px;
    width: 64%;
}
@media screen and (max-width: 768px) {
    #recent-posts > .recent-post-item {
        height: auto;
    }
    #recent-posts > .recent-post-item >.recent-post-info {
        padding: 20px 20px 30px;
        width: 100%;
        text-align: center;
    }
}
/* 主页文章列表图片宽度 */

页脚透明

  • 在自建的CSS文件 [blogRoot]/source/css/icat.css 里新增以下内容
1
2
3
4
5
6
7
8
9
10
11
12
13
#footer {
    background: var(--icat-footer-background);
}
  
#footer #footer-wrap {
    color: var(--font-color)
}
  
#footer #footer-wrap a {
    color: var(--font-color)
}
  
/* 页脚透明 */

文章外挂标签美化

Butterfly的调整教程：文章外挂标签美化
感觉Butterfly的外挂标签有点不太符合自己的审美，强迫症犯了，按照自己的感觉改改

祭奠日自动变灰

  • 在自建的JS文件 [blogRoot]/source/js/icat.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
27
28
29
30
31
32
if(PublicSacrificeDay()){
    document.getElementsByTagName("html")[0].setAttribute("style","filter:gray !important;filter:grayscale(100%);-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);");
  }
  
  function PublicSacrificeDay(){
      var PSFarr=new Array("0707","0909","0918","1109","1213");
      var currentdate = new Date();
      var str = "";
      var mm = currentdate.getMonth()+1;
      if(currentdate.getMonth()>9){
        str += mm;
      }else{
        str += "0" + mm;
      }
      if(currentdate.getDate()>9){
        str += currentdate.getDate();
      }else{
        str += "0" + currentdate.getDate();
      }
      if(PSFarr.indexOf(str)>-1){
          return 1;
      }else{
          return 0;
      }
  }

// 自动网站变灰
// 0707 - 七七事变
// 0909 - 毛主席忌辰
// 0918 - 九一八事变
// 1109 - 娣外公忌辰
// 1213 - 南京公祭日

个人卡片背景

  • 在自建的CSS文件 [blogRoot]/source/css/icat.css 里新增以下内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
[data-theme="light"] #aside-content > .card-widget.card-info {
    background-image: url(https://s11.ax1x.com/2023/05/02/p9GWEin.jpg);
    background-repeat: no-repeat;
    background-attachment: inherit;
    background-size: 100%;
}
[data-theme="dark"] #aside-content > .card-widget.card-info {
    background-image: url(https://s11.ax1x.com/2023/05/02/p9GWVGq.jpg);
    background-repeat: no-repeat;
    background-attachment: inherit;
    background-size: 100%;
}

/* 个人信息卡片背景图 */

标签增加上下标

  • 修改 [blogRoot]/themes/butterfly/scripts/helpers/page.js 里第四十九行的内容
    （上标：${tag.length} 或 下标：${tag.length}； + 号直接删除 即是正常缩进）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    ···

  const length = sizes.length - 1
  source.sort(orderby, order).forEach(tag => {
    const ratio = length ? sizes.indexOf(tag.length) / length : 0
    const size = minfontsize + ((maxfontsize - minfontsize) * ratio)
    let style = `font-size: ${parseFloat(size.toFixed(2))}${unit};`
    const color = 'rgb(' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ')' // 0,0,0 -> 200,200,200
    style += ` color: ${color}`
-   result += `<a href="${env.url_for(tag.path)}" style="${style}">${tag.name}</a>`
+    result += `<a href="${env.url_for(tag.path)}" style="${style}">${tag.name}<sup>${tag.length}</sup></a>`
  })
  return result
})

    ···

分享平台获取图片参数

很早之前就发现博客文章分享到微信里，图标显示的是 个人头像 而不是 站点图片
本人强迫症，这忍不了，还是喜欢用站点的LOGO来显示

  • 修改 [blogRoot]/themes/butterfly/layout/includes/head/Open_Graph.pug 里第三行的 page.cover 和 theme.favicon 项
    （ + 号直接删除 即是正常缩进）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
if theme.Open_Graph_meta.enable
  -
-   const coverVal = page.cover_type === 'img' ? page.cover : theme.avatar.img
+   const coverVal = page.cover_type === 'img' ? theme.favicon : theme.favicon
    let ogOption = Object.assign({
      type: is_post() ? 'article' : 'website',
      image: coverVal ? full_url_for(coverVal) : '',
      fb_admins: theme.facebook_comments.user_id || '',
      fb_app_id: theme.facebook_comments.app_id || '',
    }, theme.Open_Graph_meta.option)
  -
  != open_graph(ogOption)
else
  meta(name="description" content=page_description())

⚠️ 友情提示

因本站的文章封面用的是Webp格式，所以在一些平台截取的图片是不支持Webp的，会显示空白，所以我才将 page.cover 修改 theme.favicon
如若你的文章封面不是Webp就不需要修改page.cover

随机网页跳转（Heo无缝版）

  • 创建 [blogRoot]/themes/butterfly/scripts/helpers/random.js JS文件，将以下内容写入
1
2
3
4
5
6
7
8
9
10
11
hexo.extend.generator.register('random', function (locals) {
    const config = hexo.config.random || {}
    const posts = []
    for (const post of locals.posts.data) {
        if (post.random !== false) posts.push(post.path)
    }
    return {
        path: config.path || 'icat/random.js',
        data: `var posts=${JSON.stringify(posts)};function toRandomPost(){pjax.loadUrl('/'+posts[Math.floor(Math.random() * posts.length)]);};`
    }
})
若没有开启 pjax 用这个js
1
2
3
4
5
6
7
8
9
10
11
hexo.extend.generator.register('random', function (locals) {
    const config = hexo.config.random || {}
    const posts = []
    for (const post of locals.posts.data) {
        if (post.random !== false) posts.push(post.path)
    }
    return {
        path: config.path || 'icat/random.js',
        data: `var posts=${JSON.stringify(posts)};function toRandomPost(){window.open('/'+posts[Math.floor(Math.random() * posts.length)],"_self");};`
    }
})
  • 在 _config.butterfly.yml 中的 inject 下的 bottom 引入 random.js
1
2
3
4
5
inject:
  head:
    - ···
  bottom:
    - <script src="/icat/random.js"></script> # 随机网页跳转

侧边栏分类栏调整

  • 在自建的CSS文件 [blogRoot]/source/css/icat.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
#aside-content .card-archives ul.card-archive-list, #aside-content .card-categories ul.card-category-list {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -o-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -o-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-pack: justify;
}
#aside-content .card-archives ul.card-archive-list > .card-archive-list-item, #aside-content .card-categories ul.card-category-list > .card-category-list-item {
    width: 48%;
    margin: 3px 0;
}
#aside-content .card-archives ul.card-archive-list > .card-archive-list-item a, #aside-content .card-categories ul.card-category-list > .card-category-list-item a {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    padding: 3px 10px;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -o-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    color: var(--font-color);
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    -ms-transition: all 0.4s;
    transition: all 0.4s;
    border: 1px solid #cbcbcb;
    border-radius: 6px;
    -webkit-box-orient: vertical;
}

/* 侧边栏分类（标签）样式调整 */

侧边栏分类

  • 修改 [blogRoot]/themes/butterfly/scripts/helpers/aside_categories.js 里第五十八行的内容
    （**+** 号直接删除 即是正常缩进）
1
2
3
4
5
6
7
8
9
10
11
12
    ···

          if (showCount) {
-           result += `<span class="card-category-list-count">${cat.length}</span>`
+            result += `<span class="card-category-list-count">${cat.length} 篇</span>`
          }

          if (isExpand && isTopParent && child) {
            result += `<i class="fas fa-caret-left ${expandClass}"></i>`
          }

    ···

侧边栏归档

  • 修改 [blogRoot]/themes/butterfly/scripts/helpers/aside_archives.js 里第九十二行的内容
    （**+** 号直接删除 即是正常缩进）
1
2
3
4
5
6
7
8
9
10
11
    ···

    if (showCount) {
-     result += `<span class="card-archive-list-count">${item.count}</span>`
+      result += `<span class="card-archive-list-count">${item.count} 篇</span>`
    }
    result += '</a>'
    result += '</li>'
  }

    ···

网站资讯调整

不太喜欢显示最后更新的时间，主题作者也没做开关配置，直接在PUG里删除就好

  • 删除 [blogRoot]/themes/butterfly/layout/includes/widget/card_webinfo.pug 里第二十七 至 三十四行的内容
1
2
3
4
5
6
7
8
9
10
    ···

          .item-name= _p('aside.card_webinfo.site_pv_name') + " :"
          .item-count#busuanzi_value_site_pv
            i.fa-solid.fa-spinner.fa-spin
-      if theme.aside.card_webinfo.last_push_date
-        .webinfo-item
-          .item-name= _p('aside.card_webinfo.last_push_date.name') + " :"
-          .item-count#last-push-date(data-lastPushDate=date_xml(Date.now()))
-            i.fa-solid.fa-spinner.fa-spin

资讯-文章数目

这个和作者卡片上的重复了，删掉简洁些

  • 删除 [blogRoot]/themes/butterfly/layout/includes/widget/card_webinfo.pug 里第七 至 十行的内容
1
2
3
4
5
6
7
8
9
10
11
12
    ···

      span= _p('aside.card_webinfo.headline')
    .webinfo
-      if theme.aside.card_webinfo.post_count
-        .webinfo-item
-          .item-name= _p('aside.card_webinfo.article_name') + " :"
-          .item-count= site.posts.length
      if theme.runtimeshow.enable
        .webinfo-item

    ···

文章页调整

版权样式调整

  • 在自建的CSS文件 [blogRoot]/source/css/icat.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
#post .post-copyright {
    background: var(--icat-card-bg);
    padding: 1rem 1.3rem;
    overflow: hidden;
    border: var(--style-border);
    border-width: 1px;
    transition: 0.3s;
    position: relative;
    margin: 1.5rem 0px 0.5rem;
    border-radius: 8px;
}
#post .post-copyright:before {
    position: absolute;
    right: 22px;
    top: -77px;
    content: "\e039";
    font-size: 180px;
    font-family: "iconfont";
    color: var(--icat-fontcolor);
    opacity: 0.1;
    filter: blur(7px);
}

/* 版权样式调整 */

打赏/标签/分享 调整

  • 修改 [blogRoot]/themes/butterfly/layout/post.pug 里第十一 至 十八行的内容
    （**+** 号直接删除 即是正常缩进）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    ···

    include includes/post/post-copyright.pug
    .tag_share
+      if theme.reward.enable && theme.reward.QR_code
+        !=partial('includes/post/reward', {}, {cache: true})
      if (theme.post_meta.post.tags)
        .post-meta__tag-list
          each item, index in page.tags.data
            a(href=url_for(item.path)).post-meta__tags #[=item.name]
      include includes/third-party/share/index.pug
-
-   if theme.reward.enable && theme.reward.QR_code
-     !=partial('includes/post/reward', {}, {cache: true})

    //- ad
    if theme.ad && theme.ad.post
      .ads-wrap!=theme.ad.post

    ···
  • 新增 [blogRoot]/themes/butterfly/layout/includes/post/reward.pug 页面内容
    （**+** 号直接删除 即是正常缩进）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.post-reward
  .reward-button
    i.fas.fa-qrcode
    = ' ' + _p('donate')
  .reward-main
    ul.reward-all
-     each item in theme.reward.QR_code
-       - var clickTo = item.link ? item.link : item.img
-       li.reward-item
-         a(href=url_for(clickTo) target='_blank')
-           img.post-qr-code-img(src=url_for(item.img) alt=item.text)
-         .post-qr-code-desc=item.text
+      span.reward-title 感谢你赐予我前进的力量
+      ul.reward-group
+        each item in theme.reward.QR_code
+          - var clickTo = item.link ? item.link : item.img
+          li.reward-item
+            a(href=url_for(clickTo) target='_blank')
+              img.post-qr-code-img(src=url_for(item.img) alt=item.text)
+            .post-qr-code-desc=item.text
  • 在自建的CSS文件 [blogRoot]/source/css/icat.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
#post .tag_share {
    display: flex;
    align-items: center;
    position: relative;
    margin-top: 40px
}
#post .post-reward {
    margin-top: 0;
    width: auto;
}
#post .tag_share .post_share {
    position: absolute;
    right: 0;
}

#post .post-reward .reward-button {
    background: var(--icat-red);
    color: var(--icat-white);
    padding: 0;
    width: 126px;
    height: 40px;
    line-height: 39px;
    box-shadow: var(--icat-shadow-red);
    display: inline-block;
    cursor: pointer;
    transition: all 0.4s ease 0s;
    border-radius: 8px;
    margin-right: 0.5rem;
}
#post .post-reward .reward-button:hover {
    background: #49b1f5;
    box-shadow: var(--icat-shadow-blue);
}
#post .post-reward .reward-main {
    z-index: 1003;
    min-width: 100%;
}
#post .post-reward .reward-main {
    width: auto;
}
#post .post-reward .reward-main .reward-all {
    border-radius: 12px;
    background: var(--icat-background);
    border: var(--style-border-always);
    padding: 0.8rem;
    display: flex;
    box-shadow: var(--icat-shadow-border);
    flex-direction: column;
    align-items: center;
}
#post .post-reward .reward-main .reward-all:after {
    right: auto;
    left: 50px;
    border-top: 14px solid var(--icat-background);
}
#post .reward-title {
    font-weight: bold;
    color: var(--icat-red);
}
#post .reward-group {
    display: flex;
    margin-top: 0.5rem;
    margin-left: -40px;
}
/* 打赏样式调整 */

#post .tag_share .post-meta__tags {
    background: var(--icat-card-bg);
    border: var(--style-border-always);
    color: var(--icat-fontcolor);
    border-radius: 8px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    height: 40px;
    margin-right: 0.5rem;
}
@media screen and (max-width: 768px) {
    #post .tag_share {
        display: grid;
        justify-items: start;
        align-items: start;
    }
    #post .tag_share .post-meta__tag-list {
        display: flex;
        width: 100%;
        margin-top: 0.5rem
    }
    #post .tag_share .post-meta__tags {
        height: 34px;
    }
}
a.post-meta__tags::before {
    content: "\e038";
    font-family: "iconfont" !important;
    font-size: 12px;
    opacity: 0.4;
    padding-top: 2px;
    padding-right: 2px;
}
/* 标签调整 */

评论区域

  • 新增 [blogRoot]/themes/butterfly/layout/includes/third-party/comments/index.pug 页面内容
    （**+** 号直接删除 即是正常缩进）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
- let defaultComment = theme.comments.use[0]
hr
#post-comment
  .comment-head
    .comment-headline
      i.iconfont.icat-message.fa-fw
      span= ' ' + _p('comment')
+    .comment-privacy
+      a(href="/privacy/" data-pjax-state) 隐私政策

    if theme.comments.use.length > 1
      #comment-switch

    ···
  • 在自建的CSS文件 [blogRoot]/source/css/icat.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
#post-comment .comment-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#post-comment .comment-privacy a {
    color: var(--font-color);
}
#post-comment .comment-privacy a:hover {
    color: #409eff;
}
#post-comment .comment-headline {
    display: flex;
    align-items: center;
}
#post-comment .comment-headline > i {
    padding: 0 0 0 6px;
    font-size: 1em;
}
blockquote > :last-child {
    margin: auto !important;
}

.el-input--small .el-input__inner {
    height: 40px !important;
}
.el-input-group__prepend {
    border-radius: 8px 0 0 8px !important;
}
.el-input__inner {
    border-radius: 0 8px 8px 0 !important;
}
.el-textarea__inner {
    border-radius: 8px !important;
}
.el-textarea > textarea {
    height: 120px !important;
}
.el-button--small {
    border-radius: 4px !important;
}
/* 评论编辑块调整 */

.tk-submit-action-icon.__markdown {
    display: none;
}
/* markdown编辑快隐藏 */

.tk-avatar {
    border-radius: 4px !important;
}
.tk-comment .tk-submit .tk-avatar, .tk-replies .tk-avatar {
    height: 2.5rem !important;
    width: 2.5rem !important;
}
.tk-comment .tk-submit .tk-avatar .tk-avatar-img, .tk-replies .tk-avatar .tk-avatar-img {
    height: 2.5rem !important;
}
.tk-ruser {
    color: #409eff;
    opacity: .8;
}
@media screen and (max-width: 768px) {
    .tk-comment .tk-submit .tk-avatar, .tk-replies .tk-avatar {
        height: 2rem !important;
        width: 2rem !important;
    }
    .tk-comment .tk-submit .tk-avatar .tk-avatar-img, .tk-replies .tk-avatar .tk-avatar-img {
        height: 2rem !important;
    }
}
.tk-nick,
.tk-meta a strong {
    font-size: 18px;
    color: #409eff;
}
.tk-tag-green {
    border: var(--style-border) !important;
    border-radius: 4px !important;
    margin-left: 0.2rem;
}
.tk-time {
    margin-left: 0.4rem;
}

.tk-extras {
    padding-bottom: 15px;
    border-bottom: 1px dashed var(--hr-border);
}
.tk-extra {
    border: var(--style-border-always);
    padding: 4px 6px 4px 6px;
    border-radius: 8px;
    margin-right: 4px !important;
}
.tk-expand {
    margin-top: 8px;
    background-color: var(--icat-background);
    color: var(--icat-fontcolor);
    border-radius: 8px;
    border: var(--style-border);
}
.tk-footer {
    padding-bottom: 1em;
}
.tk-footer a {
    color: #999999;
}
.tk-footer a:hover {
    color: #409eff;
}

.tk-admin-comment-item {
    padding: 1em;
    background: var(--global-bg);
    border-radius: 12px;
    border: var(--style-border-always);
    margin-bottom: 12px;
}
.tk-admin-comment-meta,
.tk-content {
    color: var(--icat-fontcolor);
}
.tk-admin-actions {
    margin-bottom: 0 !important;
    border-bottom: 0 !important;
}
/* 评论管理 */

.tk-panel {
    border: var(--style-border-always);
}
.tk-admin-config-groups {
    padding: 0.5em;
    background: var(--global-bg);
    border-radius: 12px;
    border: var(--style-border-always);
}
.tk-admin-config-groups .tk-admin-config-group-title {
    background: var(--icat-background) !important;
    border-radius: 6px;
    border: var(--style-border-always);
    color: var(--icat-fontcolor);
}
.tk-admin-config-item {
    color: var(--icat-fontcolor);
}
/* 配置管理 */

/* 评论区样式 */

分类/标签页美化

本小节魔改内容不包括 顶部banner栏，如有需要请移步至 ✨ 第二章 - 三小节 | 魔改页前置

效果预览

文章分类
有肉有猫有生活.
文章标签
有肉有猫有生活.

分类页

  • 创建 [blogRoot]/source/categories/index.md 页面，配置以下内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
---
title: 文章分类
date: 2021-10-26 14:57:42
type: "categories"
top_img: false
aside: false
top_page: true
top_bg: https://s11.ax1x.com/2023/04/20/p9ACZeH.jpg
top_item: Categories
top_title: 文章分类
top_tips: 去听 去看 去感受 每一刻生命
top_link: /charts/
top_text: 更多统计
comments: false
---

<!-- 页面内容 -->
  • 在自建的CSS文件 [blogRoot]/source/css/icat.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
.category-lists .category-list {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: row;
    margin: 5em 0 3em;
}
.category-lists ul {
    padding: 0;
}
.category-lists ul li {
    display: flex;
    width: fit-content;
    font-size: 1.2em !important;
    padding: 0.2em 0.5em;
    background: var(--icat-card-bg);
    margin: 0.5em 0.5em;
    border-radius: 12px;
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    border: var(--style-border-always);
    box-shadow: var(--icat-shadow-border);
    align-items: center;
}
.category-lists .category-list a {
    color: var(--icat-fontcolor) !important;
}
.category-lists .category-list a:hover {
    color: var(--icat-blue) !important;
}
.category-lists ul li:before {
    position: unset;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    background: 0;
    color: var(--icat-fontcolor) !important;
    cursor: pointer;
    content: "\e038" !important;
    font-family: "iconfont" !important;
    opacity: 0.4;
    padding-top: 2px;
    padding-right: 2px;
}
.category-lists .category-list .category-list-count {
    background: var(--icat-secondbg);
    padding: 4px 4px;
    border-radius: 6px;
    color: var(--icat-secondtext);
    line-height: 1;
    text-align: center;
    min-width: 35px;
    display: inline-block;
    font-size: 1rem;
    box-shadow: var(--icat-shadow-border);
}
.category-lists .category-list .category-list-count:before,
.category-lists .category-list .category-list-count:after {
    content: '';
}

/* 分类页样式 */

标签页

  • 创建 [blogRoot]/source/tags/index.md 页面，配置以下内容
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
---
title: 文章标签
date: 2021-10-26 14:43:25
type: "tags"
top_img: false
orderby: random
order: 1
aside: false
top_page: true
top_bg: https://s11.ax1x.com/2023/04/20/p9ACZeH.jpg
top_item: Tags
top_title: 文章标签
top_tips: 山野皆有雾灯 漂泊亦能归舟
top_link: /charts/
top_text: 更多统计
comments: false
---


<!-- 
orderby【可选】排序方式 ：random-随机/name-名称/length-长度
order【可选】排序次序： 1, 升序; -1, 降序
 -->

<!-- 页面内容 -->
  • 在自建的CSS文件 [blogRoot]/source/css/icat.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
#page .tag-cloud-list {
    margin: 5em 0 3em;
}
#page .tag-cloud-list a {
    display: inline-flex;
    color: var(--icat-fontcolor) !important;
    font-size: 1.2em !important;
    padding: 0.2em 0.5em;
    background: var(--icat-card-bg);
    margin: 0.5em 0.5em;
    border-radius: 12px;
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    border: var(--style-border-always);
    box-shadow: var(--icat-shadow-border);
    align-items: center;
}
#page .tag-cloud-list a:before {
    color: var(--icat-fontcolor) !important;
    cursor: pointer;
    content: "\e038" !important;
    font-family: "iconfont" !important;
    opacity: 0.4;
    padding-top: 2px;
    padding-right: 2px;
}
#page .tag-cloud-list a:hover {
    background: var(--icat-blue);
}
#page .tag-cloud-list a > sup{
    top: auto;
    background: var(--icat-secondbg);
    padding: 4px 4px;
    margin-left: 8px;
    border-radius: 6px;
    color: var(--icat-secondtext);
    line-height: 1;
    text-align: center;
    min-width: 35px;
    display: inline-block;
    font-size: 1rem;
    box-shadow: var(--icat-shadow-border);
}

/* 标签页样式 */

主页文章卡片擦亮动画

  • 在自建的CSS文件 [blogRoot]/source/css/icat.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
#recent-posts > .recent-post-item .post_cover {
    position: relative;
}
#recent-posts>.recent-post-item .post_cover::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,.5);
    content: '';
    -webkit-transition: -webkit-transform .3s;
    -moz-transition: -moz-transform .3s;
    -o-transition: -o-transform .3s;
    -ms-transition: -ms-transform .3s;
    transition: transform .3s;
    -webkit-transform: scale3d(2,1,1) rotate(60deg) translate3d(15%,-150%,0);
    -moz-transform: scale3d(2,1,1) rotate(60deg) translate3d(15%,-150%,0);
    -o-transform: scale3d(2,1,1) rotate(60deg) translate3d(15%,-150%,0);
    -ms-transform: scale3d(2,1,1) rotate(60deg) translate3d(15%,-150%,0);
    transform: scale3d(2,1,1) rotate(60deg) translate3d(15%,-150%,0);
}
#recent-posts>.recent-post-item .post_cover:hover::after {
    -webkit-transform: scale3d(2,1,1) rotate(60deg) translate3d(0,130%,0);
    -moz-transform: scale3d(2,1,1) rotate(60deg) translate3d(0,130%,0);
    -o-transform: scale3d(2,1,1) rotate(60deg) translate3d(0,130%,0);
    -ms-transform: scale3d(2,1,1) rotate(60deg) translate3d(0,130%,0);
    transform: scale3d(2,1,1) rotate(60deg) translate3d(0,130%,0);
}

/* 文章卡片擦亮动画 */
]]> 经验分享 Butterfly主题 魔改记录 https://meuicat.com/posts/73a5ae75.html#disqus_thread 百日祭 https://meuicat.com/posts/f6efd8df.html https://meuicat.com/posts/f6efd8df.html Fri, 17 Feb 2023 14:05:17 GMT 记 癸卯兔年 正月廿七 百日祭.
]]> 生活随笔 封の唠叨 https://meuicat.com/posts/f6efd8df.html#disqus_thread 重构记录 - 2 https://meuicat.com/posts/4a29ee3.html https://meuicat.com/posts/4a29ee3.html Fri, 10 Feb 2023 02:02:57 GMT 从零重构本站所有内容；自用的主题调整和魔改的前置内容记录~

📖 本教程更新于 2023 年 06 月 12 日

📚 文档目录

🚀 搭建教程 | 1 - 📑 前置教程 | 2 - 🎈 主题调整 | 3 - ✨ 魔改教程 | 4 - 🐈 重构自用数据记录

引用CSS

  • 首先你需要在 [blogRoot]/source/css 里面添加一个css 名字随意
    （需要注意的是不能放在 [blogRoot]/themes/butterfly/source/css 里面 否则可能出现bug）

  • 列如：[blogRoot]/source/css/icat.css

  • 再修改主题配置文件，按照下面引入 （一定是head，否则可能出现短暂无CSS）

1
2
3
4
5
6
inject:
  head:
    - <link rel="stylesheet" href="/css/icat.css">
    - ... 
  bottom:
    - ...

引用JS

  • 首先你需要在 [blogRoot]/source/js 里面添加一个js 名字随意
    （需要注意的是不能放在 [blogRoot]/themes/butterfly/source/js 里面 否则可能出现bug）

  • 列如：[blogRoot]/source/js/icat.js

  • 再修改主题配置文件，按照下面引入 （一定是bottom 否则可能出现dom不完全导致js报错）

1
2
3
4
5
6
inject:
  head:
    - ... 
  bottom:
    - <script async data-pjax src="/js/icat.js"></script>
    - ...

魔改页前置

本小节为 ✨ 第四章 | 魔改教程 的页面魔改顶部banner教程内容

创建数据

  • 创建 [blogRoot]/themes/butterfly/layout/includes/page/icat_change.pug 文件，并新增以下内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
- var pageBackground = 'background: url(' + page.top_bg + ') left 28% / cover no-repeat;'

#icat_page
  .icat-content.icat-content-item.icatPage.single(style=pageBackground)
    .icat-card-content
      .icat-content-item-tips= page.top_item || _p('Hallo iCat！')
      span.icat-content-item-title= page.top_title || page.title || _p('MeuiCat')
      .icat-content-bottom
        .icat-tips= page.top_tips || page.description || _p('有肉有猫有生活.')

        - if (typeof page.top_link !== 'undefined' && page.top_link && page.top_link.trim().length > 0)
          if (page.top_link.startsWith('/'))
            - var pageLink = '' + page.top_link + ''
          else if (!page.top_link.startsWith('http') && !page.top_link.startsWith('https'))
            - var pageLink = 'https://' + page.top_link + ''
          else
            - var pageLink = '' + page.top_link + ''
          .icat-change-button-group
            a.icat-change-button(href=pageLink)
              i.iconfont.icat-go-right(style='font-size: .9rem')
              span.icat-change-button-text= page.top_text || _p('关于本页')
  • 修改 [blogRoot]/themes/butterfly/layout/page.pug 页面里的内容
    （ + 号直接删除 即是正常缩进）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
extends includes/layout.pug

block content
  #page
-   if top_img === false
-     h1.page-title= page.title
+    if page.top_page && page.top_page === true
+      include includes/page/icat_change.pug
+    else
+      if top_img === false
+        h1.page-title= page.title

    case page.type
      when 'tags'
  • 在自建的CSS文件 [blogRoot]/source/css/icat.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
#page:has(#icat_page) {
  border: 0;
  box-shadow: none !important;
  padding: 0 !important;
  background: transparent !important;
}
#web_bg ~ .page:has(#icat_page) {
  background: var(--card-bg);
}
/* page背景调整 */

.icat-content.icat-content-item.icatPage {
  height: 19rem;
  color: var(--icat-white);
  overflow: hidden;
  margin-top: 0;
  border-radius: 12px;
  border: var(--style-border-always);
  box-shadow: var(--icat-shadow-border);
}
.icat-content-item .icat-card-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1rem 2rem;
}
.icat-content-item .icat-content-item-tips {
  opacity: .8;
  font-size: .6rem;
  margin-bottom: .5rem;
}
.icat-content-item .icat-card-content .icat-content-item-title {
  margin-bottom: .5rem;
}
.icat-content-item .icat-content-item-title {
  font-size: 36px;
  font-weight: bold;
  line-height: 1;
}
.icat-content-item .icat-content-bottom {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.icat-content-item .icat-content-bottom .icat-tips {
  font-weight: bold;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.icat-content-item .icat-card-content .icat-change-button-group .icat-change-button {
  height: 40px;
  width: auto;
  padding: 0 22px;
  border-radius: 20px;
  justify-content: center;
  background: var(--icat-white);
  color: var(--icat-black);
  display: flex;
  align-items: center;
  transition: .3s;
  cursor: pointer;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transform: translateZ(0);
  box-shadow: 0 8px 16px -4px var(--icat-black-op);
}
.icat-content-item .icat-card-content .icat-change-button-group .icat-change-button i {
  margin-right: 4px;
  font-weight: bold;
}
#page:has(#icat_page) .icat-content-item .icat-card-content .icat-change-button-group .icat-change-button:hover {
  background: var(--icat-blue);
  color: var(--icat-white);
}

@media screen and (max-width: 768px) {
  .icat-content-item .icat-card-content {
    padding: 1rem 1rem;
  }
  .icat-content-item .icat-card-content .icat-change-button-group .icat-change-button {
    width: 60px;
  }
  .icat-content-item .icat-card-content .icat-change-button-group .icat-change-button i {
    margin-right: -3px;
  }
  .icat-content-item .icat-card-content .icat-change-button-group .icat-change-button-text {
    display: none;
  }
}
/* 响应式 */

/* icat-page顶部样式 */

使用参数

  • Page Front-matter 内加 top_page 并配置为 true 即可
1
2
3
4
5
6
7
8
9
10
11
12
13
---
···

top_page: true
top_bg: https://s11.ax1x.com/2023/05/02/p9GRHqe.jpg
top_item: 测试
top_title: 测试页面
top_tips: 热烈 且自由
top_link: meuicat.com
top_text: 关于本页
---

<!-- 页面内容 -->
参数描述优先级默认值
top_pagebanner栏 开关选填默认关闭；此项为是否显示 banner顶部栏 的开关，如不配置此项就不显示（不需要新增配置为false，默认是关闭的），如需启用请新增配置并将 top_page 配置为 true
top_bgbanner栏 背景图必填此项为 banner顶部栏 的背景图，没有优先级，所以如果使用banner顶部栏就必填；链接形式即可
top_itembanner栏 类名选填默认显示为：Hallo iCat！；可新增配置项设置你需要的内容（优先级最高）
top_titlebanner栏 标题选填按优先级默认显示顺序为：你所创建的页面标题 - MeuiCat； 可新增配置项设置你需要的内容（优先级最高）
top_tipsbanner栏 描述选填按优先级默认显示顺序为：你所创建的页面description描述 - 有肉有猫有生活.；可新增配置项设置你需要的内容（优先级最高）
top_linkbanner栏 按钮链接选填默认关闭；此项为是否显示 banner顶部栏 右下角的按钮块，如不配置此项就不显示（不需要新增配置为false，默认是关闭的），如需启用请新增配置并将 top_link 配置为你想要的链接内容，如 /essay/ meuicat.com https://meuicat.com/ 的链接即可
top_textbanner栏 按钮文本选填右下角按钮上的文字；默认显示为：关于本页；可新增配置项设置你需要的内容（优先级最高）
]]> 经验分享 Butterfly主题 Hexo https://meuicat.com/posts/4a29ee3.html#disqus_thread 避风的港湾 https://meuicat.com/posts/ab357140.html https://meuicat.com/posts/ab357140.html Fri, 20 Jan 2023 05:40:29 GMT 让花成花，让树成树. 两年前 我对你说
“这以后就是你的家了

你缺乏安全感 我便时刻陪伴着你
从小不被父母理解爱护
只有看着你长大的外公外婆宠溺着你
但外公的离去 让本就不圆满的家 一下子就空了
在一起的那段时间里你把我当做家人
我也在向每一位家里人介绍起你
很多次都想提起勇气跟你说 我的父母就是你的父母
他们也挺喜欢你的 爸爸前几个月还问我们什么时候确定下来呢
我也想跟你有一个家 不过这些都不重要了

年后就要动工装修了
我记得你跟我说过
以后的家 想要有一个衣帽间
还要有很多地方可以放很多很多衣服
房间想要弄成一起床就能挑衣服的样子
还说好要给我弄一个不错的厨房 我们一起去挑好多好多好看的餐具
我想 我会的

楼下的秋千也拆了 这个家也就剩我一个人了

]]> 生活随笔 封の唠叨 https://meuicat.com/posts/ab357140.html#disqus_thread Emoji表情大全 https://meuicat.com/posts/39279693.html https://meuicat.com/posts/39279693.html Thu, 19 Jan 2023 10:05:44 GMT 自用记录~ 表情与情感
表情名称表情名称表情名称
😀嘿嘿😃哈哈😄大笑
😁嘻嘻😆斜眼笑😅苦笑
🤣笑得满地打滚😂笑哭了🙂呵呵
🙃倒脸😉眨眼😊羞涩微笑
😇微笑天使🥰喜笑颜开😍花痴
🤩好崇拜哦😘飞吻😗亲亲
☺️微笑😚羞涩亲亲😙微笑亲亲
😋好吃😛吐舌😜单眼吐舌
🤪滑稽😝眯眼吐舌🤑发财
🤗抱抱🤭不说🤫安静的脸
🤔想一想🤐闭嘴🤨挑眉
😐冷漠😑无语😶沉默
😏得意😒不高兴🙄翻白眼
😬龇牙咧嘴🤥说谎😌松了口气
😔沉思😪困🤤流口水
😴睡着了😷感冒🤒发烧
🤕受伤🤢恶心🤮呕吐
🤧打喷嚏🥵脸发烧🥶冷脸
🥴头昏眼花😵晕头转向🤯爆炸头
🤠牛仔帽脸🥳聚会笑脸😎墨镜笑脸
🤓书呆子脸🧐带单片眼镜的脸😕困扰
😟担心🙁微微不满☹️不满
😮吃惊😯缄默😲震惊
😳脸红🥺恳求的脸😦啊
😧极度痛苦😨害怕😰冷汗
😥失望但如释重负😢哭😭放声大哭
😱吓死了😖困惑😣痛苦
😞失望😓汗😩累死了
😫累🥱打呵欠😤傲慢
😡怒火中烧😠生气🤬嘴上有符号的脸
😈恶魔微笑👿生气的恶魔💀头骨
☠️骷髅💩大便🤡小丑脸
👹食人魔👺小妖精👻鬼
👽外星人👾外星怪物🤖机器人
😺大笑的猫😸微笑的猫😹笑出眼泪的猫
😻花痴的猫😼奸笑的猫😽亲亲猫
🙀疲倦的猫😿哭泣的猫😾生气的猫
🙈非礼勿视🙉非礼勿听🙊非礼勿言
💋唇印💌情书💘心中箭了
💝系有缎带的心💖闪亮的心💗搏动的心
💓心跳💞舞动的心💕两颗心
💟心型装饰❣️心叹号💔心碎
❤️红心🧡橙心💛黄心
💚绿心💙蓝心💜紫心
🤎棕心🖤黑心🤍白心
💯一百分💢怒💥爆炸
💫头晕💦汗滴💨尾气
🕳️洞💣炸弹💬话语气泡
👁️‍🗨️眼睛对话框🗨️朝左的话语气泡🗯️愤怒话语气泡
💭内心活动气泡💤睡着

人类和身体

表情名称表情名称表情名称
👋挥手🤚立起的手背🖐️手掌
✋举起手🖖瓦肯举手礼👌OK
🤏捏合的手势✌️胜利手势🤞交叉的手指
🤟爱你的手势🤘摇滚🤙给我打电话
👈反手食指向左指👉反手食指向右指👆反手食指向上指
🖕竖中指👇反手食指向下指☝️食指向上指
👍拇指向上👎拇指向下✊举起拳头
👊出拳🤛朝左的拳头🤜朝右的拳头
👏鼓掌🙌举双手👐张开双手
🤲掌心向上托起🤝握手🙏双手合十
✍️写字💅涂指甲油🤳自拍
💪肌肉🦾机械手臂🦿机械腿
🦵腿🦶脚👂耳朵
🦻戴助听器的耳朵👃鼻子🧠脑
🦷牙齿🦴骨头👀双眼
👁️眼睛👅舌头👄嘴
👶小宝贝🧒儿童👦男孩
👧女孩🧑成人👱金色头发的人
👨男人🧔有胡子的人👱‍♂️金发男
👨‍🦰男人: 红发👨‍🦱男人: 卷发👨‍🦳男人: 白发
👨‍🦲男人: 秃顶👩女人👱‍♀️金发女
👩‍🦰女人: 红发👩‍🦱女人: 卷发👩‍🦳女人: 白发
👩‍🦲女人: 秃顶🧓老年人👴老爷爷
👵老奶奶🙍皱眉🙍‍♂️皱眉男
🙍‍♀️皱眉女🙎撅嘴🙎‍♂️撅嘴男
🙎‍♀️撅嘴女🙅禁止手势🙅‍♂️禁止手势男
🙅‍♀️禁止手势女🙆OK手势🙆‍♂️OK手势男
🙆‍♀️OK手势女💁前台💁‍♂️前台男
💁‍♀️前台女🙋举手🙋‍♂️男生举手
🙋‍♀️女生举手🧏失聪者🧏‍♂️失聪的男人
🧏‍♀️失聪的女人🙇鞠躬🙇‍♂️男生鞠躬
🙇‍♀️女生鞠躬🤦捂脸🤦‍♂️男生捂脸
🤦‍♀️女生捂脸🤷耸肩🤷‍♂️男生耸肩
🤷‍♀️女生耸肩👨‍⚕️男医生👩‍⚕️女医生
👨‍🎓男学生👩‍🎓女学生👨‍🏫男老师
👩‍🏫女老师👨‍⚖️男法官👩‍⚖️女法官
👨‍🌾农夫👩‍🌾农妇👨‍🍳男厨师
👩‍🍳女厨师👨‍🔧男技工👩‍🔧女技工
👨‍🏭男工人👩‍🏭女工人👨‍💼男白领
👩‍💼女白领👨‍🔬男科学家👩‍🔬女科学家
👨‍💻男程序员👩‍💻女程序员👨‍🎤男歌手
👩‍🎤女歌手👨‍🎨男艺术家👩‍🎨女艺术家
👨‍✈️男飞行员👩‍✈️女飞行员👨‍🚀男宇航员
👩‍🚀女宇航员👨‍🚒男消防员👩‍🚒女消防员
👮警察👮‍♂️男警察👮‍♀️女警察
🕵️侦探🕵️‍♂️男侦探🕵️‍♀️女侦探
💂卫兵💂‍♂️男卫兵💂‍♀️女卫兵
👷建筑工人👷‍♂️男建筑工人👷‍♀️女建筑工人
🤴王子👸公主👳戴头巾的人
👳‍♂️戴头巾的男人👳‍♀️戴头巾的女人👲戴瓜皮帽的人
🧕带头饰的女人🤵穿燕尾服的男人👰戴头纱的新娘
🤰孕妇🤱母乳喂养👼小天使
🎅圣诞老人🤶圣诞奶奶🦸超级英雄
🦸‍♂️男超级英雄🦸‍♀️女超级英雄🦹超级大坏蛋
🦹‍♂️男超级大坏蛋🦹‍♀️女超级大坏蛋🧙法师
🧙‍♂️男法师🧙‍♀️女法师🧚精灵
🧚‍♂️仙人🧚‍♀️仙女🧛吸血鬼
🧛‍♂️男吸血鬼🧛‍♀️女吸血鬼🧜人鱼
🧜‍♂️男人鱼🧜‍♀️美人鱼🧝小精灵
🧝‍♂️男小精灵🧝‍♀️女小精灵🧞妖怪
🧞‍♂️男妖怪🧞‍♀️女妖怪🧟僵尸
🧟‍♂️男僵尸🧟‍♀️女僵尸💆按摩
💆‍♂️男生按摩💆‍♀️女生按摩💇理发
💇‍♂️男生理发💇‍♀️女生理发🚶行人
🚶‍♂️男行人🚶‍♀️女行人🧍站立者
🧍‍♂️站立的男人🧍‍♀️站立的女人🧎下跪者
🧎‍♂️跪下的男人🧎‍♀️跪下的女人👨‍🦯拄盲杖的男人
👩‍🦯拄盲杖的女人👨‍🦼坐电动轮椅的男人👩‍🦼坐电动轮椅的女人
👨‍🦽坐手动轮椅的男人👩‍🦽坐手动轮椅的女人🏃跑步者
🏃‍♂️男生跑步🏃‍♀️女生跑步💃跳舞的女人
🕺跳舞的男人🕴️西装革履的人👯戴兔耳朵的人
👯‍♂️兔先生👯‍♀️兔女郎🧖蒸房里的人
🧖‍♂️蒸房里的男人🧖‍♀️蒸房里的女人🧗攀爬的人
🧗‍♂️攀爬的男人🧗‍♀️攀爬的女人🤺击剑选手
🏇赛马⛷️滑雪的人🏂滑雪板
🏌️打高尔夫的人🏌️‍♂️男生打高尔夫🏌️‍♀️女生打高尔夫
🏄冲浪🏄‍♂️男生冲浪🏄‍♀️女生冲浪
🚣划艇🚣‍♂️男生划船🚣‍♀️女生划船
🏊游泳🏊‍♂️男生游泳🏊‍♀️女生游泳
⛹️玩球⛹️‍♂️男生玩球⛹️‍♀️女生玩球
🏋️举重🏋️‍♂️男生举重🏋️‍♀️女生举重
🚴骑自行车🚴‍♂️男生骑自行车🚴‍♀️女生骑自行车
🚵骑山地车🚵‍♂️男生骑山地车🚵‍♀️女生骑山地车
🤸侧手翻🤸‍♂️男生侧手翻🤸‍♀️女生侧手翻
🤼摔跤选手🤼‍♂️男生摔跤🤼‍♀️女生摔跤
🤽水球🤽‍♂️男生玩水球🤽‍♀️女生玩水球
🤾手球🤾‍♂️男生玩手球🤾‍♀️女生玩手球
🤹抛接杂耍🤹‍♂️男生抛接杂耍🤹‍♀️女生抛接杂耍
🧘盘腿的人🧘‍♂️盘腿的男人🧘‍♀️盘腿的女人
🛀洗澡的人🛌躺在床上的人🧑‍🤝‍🧑手拉手的两个人
🧑🏻‍🤝‍🧑🏻手拉手的两个人
较浅肤色		🧑🏼‍🤝‍🧑🏻手拉手的两个人
中等-浅肤色较浅肤色		🧑🏼‍🤝‍🧑🏼手拉手的两个人
中等-浅肤色
🧑🏽‍🤝‍🧑🏻手拉手的两个人
中等肤色较浅肤色		🧑🏽‍🤝‍🧑🏼手拉手的两个人
中等肤色中等-浅肤色		🧑🏽‍🤝‍🧑🏽手拉手的两个人
中等肤色
🧑🏾‍🤝‍🧑🏻手拉手的两个人
中等-深肤色较浅肤色		🧑🏾‍🤝‍🧑🏼手拉手的两个人
中等-深肤色中等-浅肤色		🧑🏾‍🤝‍🧑🏽手拉手的两个人
中等-深肤色中等肤色
🧑🏾‍🤝‍🧑🏾手拉手的两个人
中等-深肤色		🧑🏿‍🤝‍🧑🏻手拉手的两个人
较深肤色较浅肤色		🧑🏿‍🤝‍🧑🏼手拉手的两个人
较深肤色中等-浅肤色
🧑🏿‍🤝‍🧑🏽手拉手的两个人
较深肤色中等肤色		🧑🏿‍🤝‍🧑🏾手拉手的两个人
较深肤色中等-深肤色		🧑🏿‍🤝‍🧑🏿手拉手的两个人
较深肤色
👭手拉手的两个女人👭🏻手拉手的两个女人
较浅肤色		👩🏼‍🤝‍👩🏻手拉手的两个女人
中等-浅肤色较浅肤色
👭🏼手拉手的两个女人
中等-浅肤色		👩🏽‍🤝‍👩🏻手拉手的两个女人
中等肤色较浅肤色		👩🏽‍🤝‍👩🏼手拉手的两个女人
中等肤色中等-浅肤色
👭🏽手拉手的两个女人
中等肤色		👩🏾‍🤝‍👩🏻手拉手的两个女人
中等-深肤色较浅肤色		👩🏾‍🤝‍👩🏼手拉手的两个女人
中等-深肤色中等-浅肤色
👩🏾‍🤝‍👩🏽手拉手的两个女人
中等-深肤色中等肤色		👭🏾手拉手的两个女人
中等-深肤色		👩🏿‍🤝‍👩🏻手拉手的两个女人
较深肤色较浅肤色
👩🏿‍🤝‍👩🏼手拉手的两个女人
较深肤色中等-浅肤色		👩🏿‍🤝‍👩🏽手拉手的两个女人
较深肤色中等肤色		👩🏿‍🤝‍👩🏾手拉手的两个女人
较深肤色中等-深肤色
👭🏿手拉手的两个女人
较深肤色		👫手拉手的一男一女👫🏻手拉手的一男一女
较浅肤色
👩🏻‍🤝‍👨🏼手拉手的一男一女
较浅肤色中等-浅肤色		👩🏻‍🤝‍👨🏽手拉手的一男一女
较浅肤色中等肤色		👩🏻‍🤝‍👨🏾手拉手的一男一女
较浅肤色中等-深肤色
👩🏻‍🤝‍👨🏿手拉手的一男一女
较浅肤色较深肤色		👩🏼‍🤝‍👨🏻手拉手的一男一女
中等-浅肤色较浅肤色		👫🏼手拉手的一男一女
中等-浅肤色
👩🏼‍🤝‍👨🏽手拉手的一男一女
中等-浅肤色中等肤色		👩🏼‍🤝‍👨🏾手拉手的一男一女
中等-浅肤色中等-深肤色		👩🏼‍🤝‍👨🏿手拉手的一男一女
中等-浅肤色较深肤色
👩🏽‍🤝‍👨🏻手拉手的一男一女
中等肤色较浅肤色		👩🏽‍🤝‍👨🏼手拉手的一男一女
中等肤色中等-浅肤色		👫🏽手拉手的一男一女
中等肤色
👩🏽‍🤝‍👨🏾手拉手的一男一女
中等肤色中等-深肤色		👩🏽‍🤝‍👨🏿手拉手的一男一女
中等肤色较深肤色		👩🏾‍🤝‍👨🏻手拉手的一男一女
中等-深肤色较浅肤色
👩🏾‍🤝‍👨🏼手拉手的一男一女
中等-深肤色中等-浅肤色		👩🏾‍🤝‍👨🏽手拉手的一男一女
中等-深肤色中等肤色		👫🏾手拉手的一男一女
中等-深肤色
👩🏾‍🤝‍👨🏿手拉手的一男一女
中等-深肤色较深肤色		👩🏿‍🤝‍👨🏻手拉手的一男一女
较深肤色较浅肤色		👩🏿‍🤝‍👨🏼手拉手的一男一女
较深肤色中等-浅肤色
👩🏿‍🤝‍👨🏽手拉手的一男一女
较深肤色中等肤色		👩🏿‍🤝‍👨🏾手拉手的一男一女
较深肤色中等-深肤色		👫🏿手拉手的一男一女
较深肤色
👬手拉手的两个男人👬🏻手拉手的两个男人
较浅肤色		👨🏼‍🤝‍👨🏻手拉手的两个男人
中等-浅肤色较浅肤色
👬🏼手拉手的两个男人
中等-浅肤色		👨🏽‍🤝‍👨🏻手拉手的两个男人
中等肤色较浅肤色		👨🏽‍🤝‍👨🏼手拉手的两个男人
中等肤色中等-浅肤色
👬🏽手拉手的两个男人
中等肤色		👨🏾‍🤝‍👨🏻手拉手的两个男人
中等-深肤色较浅肤色		👨🏾‍🤝‍👨🏼手拉手的两个男人
中等-深肤色中等-浅肤色
👨🏾‍🤝‍👨🏽手拉手的两个男人
中等-深肤色中等肤色		👬🏾手拉手的两个男人
中等-深肤色		👨🏿‍🤝‍👨🏻手拉手的两个男人
较深肤色较浅肤色
👨🏿‍🤝‍👨🏼手拉手的两个男人
较深肤色中等-浅肤色		👨🏿‍🤝‍👨🏽手拉手的两个男人
较深肤色中等肤色		👨🏿‍🤝‍👨🏾手拉手的两个男人
较深肤色中等-深肤色
👬🏿手拉手的两个男人
较深肤色		💏亲吻👩‍❤️‍💋‍👨亲吻
女人男人
👨‍❤️‍💋‍👨亲吻
男人男人		👩‍❤️‍💋‍👩亲吻
女人女人		💑情侣
👩‍❤️‍👨情侣
女人男人		👨‍❤️‍👨情侣
男人男人		👩‍❤️‍👩情侣
女人女人
👪家庭👨‍👩‍👦家庭
男人女人男孩		👨‍👩‍👧家庭
男人女人女孩
👨‍👩‍👧‍👦家庭
男人女人女孩男孩		👨‍👩‍👦‍👦家庭
男人女人男孩男孩		👨‍👩‍👧‍👧家庭
男人女人女孩女孩
👨‍👨‍👦家庭
男人男人男孩		👨‍👨‍👧家庭
男人男人女孩		👨‍👨‍👧‍👦家庭
男人男人女孩男孩
👨‍👨‍👦‍👦家庭
男人男人男孩男孩		👨‍👨‍👧‍👧家庭
男人男人女孩女孩		👩‍👩‍👦家庭
女人女人男孩
👩‍👩‍👧家庭
女人女人女孩		👩‍👩‍👧‍👦家庭
女人女人女孩男孩		👩‍👩‍👦‍👦家庭
女人女人男孩男孩
👩‍👩‍👧‍👧家庭
女人女人女孩女孩		👨‍👦家庭
男人男孩		👨‍👦‍👦家庭
男人男孩男孩
👨‍👧家庭
男人女孩		👨‍👧‍👦家庭
男人女孩男孩		👨‍👧‍👧家庭
男人女孩女孩
👩‍👦家庭
女人男孩		👩‍👦‍👦家庭
女人男孩男孩		👩‍👧家庭
女人女孩
👩‍👧‍👦家庭
女人女孩男孩		👩‍👧‍👧家庭
女人女孩女孩		🗣️说话
👤人像👥双人像👣脚印

动物和自然

表情名称表情名称表情名称
🐵猴头🐒猴子🦍大猩猩
🦧红毛猩猩🐶狗脸🐕狗
🦮导盲犬🐕‍🦺服务犬🐩贵宾犬
🐺狼🦊狐狸🦝浣熊
🐱猫脸🐈猫🦁狮子
🐯老虎头🐅老虎🐆豹子
🐴马头🐎马🦄独角兽
🦓斑马🦌鹿🐮奶牛头
🐂公牛🐃水牛🐄奶牛
🐷猪头🐖猪🐗野猪
🐽猪鼻子🐏公羊🐑母羊
🐐山羊🐪骆驼🐫双峰骆驼
🦙美洲鸵🦒长颈鹿🐘大象
🦏犀牛🦛河马🐭老鼠头
🐁老鼠🐀耗子🐹仓鼠
🐰兔子头🐇兔子🐿️松鼠
🦔刺猬🦇蝙蝠🐻熊
🐨考拉🐼熊猫🦥树懒
🦦水獭🦨臭鼬🦘袋鼠
🦡獾🐾爪印🦃火鸡
🐔鸡🐓公鸡🐣小鸡破壳
🐤小鸡🐥正面朝向的小鸡🐦鸟
🐧企鹅🕊️鸽🦅鹰
🦆鸭子🦢天鹅🦉猫头鹰
🦩火烈鸟🦚孔雀🦜鹦鹉
🐸青蛙🐊鳄鱼🐢龟
🦎蜥蜴🐍蛇🐲龙头
🐉龙🦕蜥蜴类🦖霸王龙
🐳喷水的鲸🐋鲸鱼🐬海豚
🐟鱼🐠热带鱼🐡河豚
🦈鲨鱼🐙章鱼🐚海螺
🐌蜗牛🦋蝴蝶🐛毛毛虫
🐜蚂蚁🐝蜜蜂🐞瓢虫
🦗蟋蟀🕷️蜘蛛🕸️蜘蛛网
🦂蝎子🦟蚊子🦠细菌
💐花束🌸樱花💮白花
🏵️圆形花饰🌹玫瑰🥀枯萎的花
🌺芙蓉🌻向日葵🌼开花
🌷郁金香🌱幼苗🌲松树
🌳落叶树🌴棕榈树🌵仙人掌
🌾稻子🌿药草☘️三叶草
🍀四叶草🍁枫叶🍂落叶
🍃风吹叶落

食物和饮料

表情名称表情名称表情名称
🍇葡萄🍈甜瓜🍉西瓜
🍊橘子🍋柠檬🍌香蕉
🍍菠萝🥭芒果🍎红苹果
🍏青苹果🍐梨🍑桃
🍒樱桃🍓草莓🥝猕猴桃
🍅西红柿🥥椰子🥑鳄梨
🍆茄子🥔土豆🥕胡萝卜
🌽玉米🌶️红辣椒🥒黄瓜
🥬绿叶蔬菜🥦西兰花🧄蒜
🧅洋葱🍄蘑菇🥜花生
🌰栗子🍞面包🥐羊角面包
🥖法式长棍面包🥨椒盐卷饼🥯面包圈
🥞烙饼🧇华夫饼🧀芝士
🍖排骨🍗家禽的腿🥩肉块
🥓培根🍔汉堡🍟薯条
🍕披萨🌭热狗🥪三明治
🌮墨西哥卷饼🌯墨西哥玉米煎饼🥙夹心饼
🧆炸豆丸子🥚蛋🍳煎蛋
🥘装有食物的浅底锅🍲一锅食物🥣碗勺
🥗绿色沙拉🍿爆米花🧈黄油
🧂盐🥫罐头食品🍱盒饭
🍘米饼🍙饭团🍚米饭
🍛咖喱饭🍜面条🍝意粉
🍠烤红薯🍢关东煮🍣寿司
🍤天妇罗🍥鱼板🥮月饼
🍡团子🥟饺子🥠幸运饼干
🥡外卖盒🦀蟹🦞龙虾
🦐虾🦑乌贼🦪牡蛎
🍦圆筒冰激凌🍧刨冰🍨冰淇淋
🍩甜甜圈🍪饼干🎂生日蛋糕
🍰水果蛋糕🧁纸杯蛋糕🥧派
🍫巧克力🍬糖🍭棒棒糖
🍮奶黄🍯蜂蜜🍼奶瓶
🥛一杯奶☕热饮🍵热茶
🍶清酒🍾开香槟🍷葡萄酒
🍸鸡尾酒🍹热带水果饮料🍺啤酒
🍻干杯🥂碰杯🥃平底杯
🥤带吸管杯🧃饮料盒🧉马黛茶
🧊冰块🥢筷子🍽️餐具
🍴刀叉🥄匙🔪菜刀
🏺双耳瓶

旅行和地点

表情名称表情名称表情名称
🌍地球上的欧洲非洲🌎地球上的美洲🌏地球上的亚洲澳洲
🌐带经纬线的地球🗺️世界地图🗾日本地图
🧭指南针🏔️雪山⛰️山
🌋火山🗻富士山🏕️露营
🏖️沙滩伞🏜️沙漠🏝️无人荒岛
🏞️国家公园🏟️体育馆🏛️古典建筑
🏗️施工🧱砖🏘️房屋建筑
🏚️废墟🏠房子🏡别墅
🏢办公楼🏣日本邮局🏤邮局
🏥医院🏦银行🏨酒店
🏩情人酒店🏪便利店🏫学校
🏬商场🏭工厂🏯日本城堡
🏰欧洲城堡💒婚礼🗼东京塔
🗽自由女神像⛪教堂🕌清真寺
🛕印度寺庙🕍犹太教堂⛩️神社
🕋克尔白⛲喷泉⛺帐篷
🌁有雾🌃夜晚🏙️城市风光
🌄山顶日出🌅日出🌆城市黄昏
🌇日落🌉夜幕下的桥♨️温泉
🎠旋转木马🎡摩天轮🎢过山车
💈理发店🎪马戏团帐篷🚂蒸汽火车
🚃轨道车🚄高速列车🚅子弹头高速列车
🚆火车🚇地铁🚈轻轨
🚉车站🚊路面电车🚝单轨
🚞山区铁路🚋有轨电车🚌公交车
🚍迎面驶来的公交车🚎无轨电车🚐小巴
🚑救护车🚒消防车🚓警车
🚔迎面驶来的警车🚕出租车🚖迎面驶来的出租车
🚗汽车🚘迎面驶来的汽车🚙运动型多用途车
🚚货车🚛铰接式货车🚜拖拉机
🏎️赛车🏍️摩托车🛵小型摩托车
🦽手动轮椅🦼电动轮椅🛺三轮摩托车
🚲自行车🛴滑板车🛹滑板
🚏公交车站🛣️高速公路🛤️铁轨
🛢️石油桶⛽油泵🚨警车灯
🚥横向的红绿灯🚦纵向的红绿灯🛑停止标志
🚧路障⚓锚⛵帆船
🛶独木舟🚤快艇🛳️客轮
⛴️渡轮🛥️摩托艇🚢船
✈️飞机🛩️小型飞机🛫航班起飞
🛬航班降落🪂降落伞💺座位
🚁直升机🚟空轨🚠缆车
🚡索道🛰️卫星🚀火箭
🛸飞碟🛎️服务铃🧳行李箱
⌛沙漏⏳沙正往下流的沙漏⌚手表
⏰闹钟⏱️秒表⏲️定时器
🕰️座钟🕛十二点🕧十二点半
🕐一点🕜一点半🕑两点
🕝两点半🕒三点🕞三点半
🕓四点🕟四点半🕔五点
🕠五点半🕕六点🕡六点半
🕖七点🕢七点半🕗八点
🕣八点半🕘九点🕤九点半
🕙十点🕥十点半🕚十一点
🕦十一点半🌑朔月🌒娥眉月
🌓上弦月🌔盈凸月🌕满月
🌖亏凸月🌗下弦月🌘残月
🌙弯月🌚微笑的朔月🌛微笑的上弦月
🌜微笑的下弦月🌡️温度计☀️太阳
🌝微笑的月亮🌞微笑的太阳🪐有环行星
⭐星星🌟闪亮的星星🌠流星
🌌银河☁️云⛅阴
⛈️雷阵雨🌤️晴偶有云🌥️多云
🌦️晴转雨🌧️下雨🌨️下雪
🌩️打雷🌪️龙卷风🌫️雾
🌬️大风🌀台风🌈彩虹
🌂收起的伞☂️伞☔雨伞
⛱️阳伞⚡高压❄️雪花
☃️雪与雪人⛄雪人☄️彗星
🔥火焰💧水滴🌊浪花

活动

表情名称表情名称表情名称
🎃南瓜灯🎄圣诞树🎆焰火
🎇烟花🧨爆竹✨闪亮
🎈气球🎉拉炮彩带🎊五彩纸屑球
🎋七夕树🎍门松🎎日本人形
🎏鲤鱼旗🎐风铃🎑赏月
🧧红包🎀蝴蝶结🎁礼物
🎗️提示丝带🎟️入场券🎫票
🎖️军功章🏆奖杯🏅奖牌
🥇金牌🥈银牌🥉铜牌
⚽足球⚾棒球🥎垒球
🏀篮球🏐排球🏈美式橄榄球
🏉英式橄榄球🎾网球🥏飞盘
🎳保龄球🏏板球🏑曲棍球
🏒冰球🥍袋棍球🏓乒乓球
🏸羽毛球🥊拳击手套🥋练武服
🥅球门⛳高尔夫球洞⛸️滑冰
🎣钓鱼竿🤿潜水面罩🎽运动背心
🎿滑雪🛷雪橇🥌冰壶
🎯正中靶心的飞镖🪀悠悠球🪁风筝
🎱台球🔮水晶球🧿纳扎尔护身符
🎮游戏手柄🕹️游戏操控杆🎰老虎机
🎲骰子🧩拼图🧸泰迪熊
♠️黑桃♥️红桃♦️方片
♣️梅花♟️兵🃏大小王
🀄红中🎴花札🎭面具
🖼️带框的画🎨调色盘🧵线
🧶毛线

物品

表情名称表情名称表情名称
👓眼镜🕶️墨镜🥽护目镜
🥼白大褂🦺救生衣👔领带
👕T恤👖牛仔裤🧣围巾
🧤手套🧥外套🧦袜子
👗连衣裙👘和服🥻纱丽
🩱连体泳衣🩲三角裤🩳短裤
👙比基尼👚女装👛钱包
👜手提包👝手袋🛍️购物袋
🎒书包👞男鞋👟跑鞋
🥾登山鞋🥿平底鞋👠高跟鞋
👡女式凉鞋🩰芭蕾舞鞋👢女靴
👑皇冠👒女帽🎩礼帽
🎓毕业帽🧢鸭舌帽⛑️白十字头盔
📿念珠💄唇膏💍戒指
💎宝石🔇已静音的扬声器🔈低音量的扬声器
🔉中等音量的扬声器🔊高音量的扬声器📢喇叭
📣扩音器📯邮号🔔铃铛
🔕禁止响铃🎼乐谱🎵音符
🎶多个音符🎙️录音室麦克风🎚️电平滑块
🎛️控制旋钮🎤麦克风🎧耳机
📻收音机🎷萨克斯管🎸吉他
🎹音乐键盘🎺小号🎻小提琴
🪕班卓琴🥁鼓📱手机
📲带有箭头的手机☎️电话📞电话听筒
📟寻呼机📠传真机🔋电池
🔌电源插头💻笔记本电脑🖥️台式电脑
🖨️打印机⌨️键盘🖱️电脑鼠标
🖲️轨迹球💽电脑光盘💾软盘
💿光盘📀DVD🧮算盘
🎥电影摄影机🎞️影片帧📽️电影放映机
🎬场记板📺电视机📷相机
📸开闪光灯的相机📹摄像机📼录像带
🔍左斜的放大镜🔎右斜的放大镜🕯️蜡烛
💡灯泡🔦手电筒🏮红灯笼
🪔印度油灯📔精装笔记本📕合上的书本
📖打开的书本📗绿色书本📘蓝色书本
📙橙色书本📚书📓笔记本
📒账本📃带卷边的页面📜卷轴
📄文件📰报纸🗞️报纸卷
📑标签页🔖书签🏷️标签
💰钱袋💴日元💵美元
💶欧元💷英镑💸长翅膀的钱
💳信用卡🧾收据💹趋势向上且带有日元符号的图表
💱货币兑换💲美元符号✉️信封
📧电子邮件📨来信📩收邮件
📤发件箱📥收件箱📦包裹
📫有待收信件📪无待收信件📬有新信件
📭无新信件📮邮筒🗳️投票箱
✏️铅笔✒️钢笔尖🖋️钢笔
🖊️笔🖌️画笔🖍️蜡笔
📝备忘录💼公文包📁文件夹
📂打开的文件夹🗂️索引分隔文件夹📅日历
📆手撕日历🗒️线圈本🗓️线圈日历
📇卡片索引📈趋势向上的图表📉趋势向下的图表
📊条形图📋剪贴板📌图钉
📍圆图钉📎回形针🖇️连起来的两个回形针
📏直尺📐三角尺✂️剪刀
🗃️卡片盒🗄️文件柜🗑️垃圾桶
🔒合上的锁🔓打开的锁🔏墨水笔和锁
🔐钥匙和锁🔑钥匙🗝️老式钥匙
🔨锤子🪓斧头⛏️铁镐
⚒️锤子与镐🛠️锤子与扳手🗡️匕首
⚔️交叉放置的剑🔫手枪🏹弓和箭
🛡️盾牌🔧扳手🔩螺母与螺栓
⚙️齿轮🗜️夹钳⚖️天平
🦯盲杖🔗链接⛓️链条
🧰工具箱🧲磁铁⚗️蒸馏器
🧪试管🧫培养皿🧬DNA
🔬显微镜🔭望远镜📡卫星天线
💉注射器🩸血滴💊药丸
🩹创可贴🩺听诊器🚪门
🛏️床🛋️沙发和灯🪑椅子
🚽马桶🚿淋浴🛁浴缸
🪒剃须刀🧴乳液瓶🧷安全别针
🧹扫帚🧺筐🧻卷纸
🧼皂🧽海绵🧯灭火器
🛒购物车🚬香烟⚰️棺材
⚱️骨灰缸🗿摩埃

符号标志

表情名称表情名称表情名称
🏧取款机🚮倒垃圾🚰饮用水
♿轮椅标识🚹男厕🚺女厕
🚻卫生间🚼宝宝🚾厕所
🛂护照检查🛃海关🛄提取行李
🛅寄存行李⚠️警告🚸儿童过街
⛔禁止通行🚫禁止🚳禁止自行车
🚭禁止吸烟🚯禁止乱扔垃圾🚱非饮用水
🚷禁止行人通行📵禁止使用手机🔞18禁
☢️辐射☣️生物危害⬆️向上箭头
↗️右上箭头➡️向右箭头↘️右下箭头
⬇️向下箭头↙️左下箭头⬅️向左箭头
↖️左上箭头↕️上下箭头↔️左右箭头
↩️右转弯箭头↪️左转弯箭头⤴️右上弯箭头
⤵️右下弯箭头🔃顺时针垂直箭头🔄逆时针箭头按钮
🔙返回箭头🔚结束箭头🔛ON! 箭头
🔜SOON 箭头🔝置顶🛐宗教场所
⚛️原子符号🕉️奥姆✡️六芒星
☸️法轮☯️阴阳✝️十字架
☦️东正教十字架☪️星月☮️和平符号
🕎烛台🔯带中间点的六芒星♈白羊座
♉金牛座♊双子座♋巨蟹座
♌狮子座♍处女座♎天秤座
♏天蝎座♐射手座♑摩羯座
♒水瓶座♓双鱼座⛎蛇夫座
🔀随机播放音轨按钮🔁重复按钮🔂重复一次按钮
▶️播放按钮⏩快进按钮⏭️下一个音轨按钮
⏯️播放或暂停按钮◀️倒退按钮⏪快退按钮
⏮️上一个音轨按钮🔼向上三角形按钮⏫快速上升按钮
🔽向下三角形按钮⏬快速下降按钮⏸️暂停按钮
⏹️停止按钮⏺️录制按钮⏏️推出按钮
🎦电影院🔅低亮度按钮🔆高亮度按钮
📶信号强度条📳振动模式📴手机关机
♀️女性符号♂️男性符号⚕️医疗标志
♾️无限♻️回收标志⚜️百合花饰
🔱三叉戟徽章📛姓名牌🔰日本新手驾驶标志
⭕红色空心圆圈✅勾号按钮☑️勾选框
✔️勾号✖️乘号❌叉号
❎叉号按钮➕加号➖减号
➗除号➰卷曲环➿双卷曲环
〽️庵点✳️八轮辐星号✴️八角星
❇️火花‼️双感叹号⁉️感叹疑问号
❓问号❔白色问号❕白色感叹号
❗感叹号〰️波浪型破折号©️版权
®️注册™️商标#️⃣按键: #
*️⃣按键: *0️⃣按键: 01️⃣按键: 1
2️⃣按键: 23️⃣按键: 34️⃣按键: 4
5️⃣按键: 56️⃣按键: 67️⃣按键: 7
8️⃣按键: 89️⃣按键: 9🔟按键: 10
🔠输入大写拉丁字母🔡输入小写拉丁字母🔢输入数字
🔣输入符号🔤输入拉丁字母🅰️A 型血
🆎AB 型血🅱️B 型血🆑CL按钮
🆒cool按钮🆓免费按钮ℹ️信息
🆔ID按钮Ⓜ️圆圈包围的M🆕new按钮
🆖NG按钮🅾️O 型血🆗OK按钮
🅿️停车按钮🆘SOS按钮🆙up按钮
🆚VS按钮🈁日文的“这里”按钮🈂️日文的“服务费”按钮
🈷️日文的“月总量”按钮🈶日文的“收费”按钮🈯日文的“预留”按钮
🉐日文的“议价”按钮🈹日文的“打折”按钮🈚日文的“免费”按钮
🈲日文的“禁止”按钮🉑日文的“可接受”按钮🈸日文的“申请”按钮
🈴日文的“合格”按钮🈳日文的“有空位”按钮㊗️日文的“祝贺”按钮
㊙️日文的“秘密”按钮🈺日文的“开始营业”按钮🈵日文的“没有空位”按钮
🔴红色圆🟠橙色圆🟡黄色圆
🟢绿色圆🔵蓝色圆🟣紫色圆
🟤棕色圆⚫黑色圆⚪白色圆
🟥红色方块🟧橙色方块🟨黄色方块
🟩绿色方块🟦蓝色方块🟪紫色方块
🟫棕色方块⬛黑线大方框⬜白线大方框
◼️黑色中方块◻️白色中方块◾黑色中小方块
◽白色中小方块▪️黑色小方块▫️白色小方块
🔶橙色大菱形🔷蓝色大菱形🔸橙色小菱形
🔹蓝色小菱形🔺红色正三角🔻红色倒三角
💠带圆点的菱形🔘单选按钮🔳白色方形按钮
🔲黑色方形按钮

旗帜

表情名称表情名称表情名称
🏁终点旗🚩三角旗🎌交叉旗
🏴举黑旗🏳️举白旗🏳️‍🌈彩虹旗
🏴‍☠️海盗旗🇦🇨旗: 阿森松岛🇦🇩旗: 安道尔
🇦🇪旗: 阿拉伯联合酋长国🇦🇫旗: 阿富汗🇦🇬旗: 安提瓜和巴布达
🇦🇮旗: 安圭拉🇦🇱旗: 阿尔巴尼亚🇦🇲旗: 亚美尼亚
🇦🇴旗: 安哥拉🇦🇶旗: 南极洲🇦🇷旗: 阿根廷
🇦🇸旗: 美属萨摩亚🇦🇹旗: 奥地利🇦🇺旗: 澳大利亚
🇦🇼旗: 阿鲁巴🇦🇽旗: 奥兰群岛🇦🇿旗: 阿塞拜疆
🇧🇦旗: 波斯尼亚和黑塞哥维那🇧🇧旗: 巴巴多斯🇧🇩旗: 孟加拉国
🇧🇪旗: 比利时🇧🇫旗: 布基纳法索🇧🇬旗: 保加利亚
🇧🇭旗: 巴林🇧🇮旗: 布隆迪🇧🇯旗: 贝宁
🇧🇱旗: 圣巴泰勒米🇧🇲旗: 百慕大🇧🇳旗: 文莱
🇧🇴旗: 玻利维亚🇧🇶旗: 荷属加勒比区🇧🇷旗: 巴西
🇧🇸旗: 巴哈马🇧🇹旗: 不丹🇧🇻旗: 布韦岛
🇧🇼旗: 博茨瓦纳🇧🇾旗: 白俄罗斯🇧🇿旗: 伯利兹
🇨🇦旗: 加拿大🇨🇨旗: 科科斯（基林）群岛🇨🇩旗: 刚果（金）
🇨🇫旗: 中非共和国🇨🇬旗: 刚果（布）🇨🇭旗: 瑞士
🇨🇮旗: 科特迪瓦🇨🇰旗: 库克群岛🇨🇱旗: 智利
🇨🇲旗: 喀麦隆🇨🇳旗: 中国🇨🇴旗: 哥伦比亚
🇨🇵旗: 克利珀顿岛🇨🇷旗: 哥斯达黎加🇨🇺旗: 古巴
🇨🇻旗: 佛得角🇨🇼旗: 库拉索🇨🇽旗: 圣诞岛
🇨🇾旗: 塞浦路斯🇨🇿旗: 捷克🇩🇪旗: 德国
🇩🇬旗: 迪戈加西亚岛🇩🇯旗: 吉布提🇩🇰旗: 丹麦
🇩🇲旗: 多米尼克🇩🇴旗: 多米尼加共和国🇩🇿旗: 阿尔及利亚
🇪🇦旗: 休达及梅利利亚🇪🇨旗: 厄瓜多尔🇪🇪旗: 爱沙尼亚
🇪🇬旗: 埃及🇪🇭旗: 西撒哈拉🇪🇷旗: 厄立特里亚
🇪🇸旗: 西班牙🇪🇹旗: 埃塞俄比亚🇪🇺旗: 欧盟
🇫🇮旗: 芬兰🇫🇯旗: 斐济🇫🇰旗: 福克兰群岛
🇫🇲旗: 密克罗尼西亚🇫🇴旗: 法罗群岛🇫🇷旗: 法国
🇬🇦旗: 加蓬🇬🇧旗: 英国🇬🇩旗: 格林纳达
🇬🇪旗: 格鲁吉亚🇬🇫旗: 法属圭亚那🇬🇬旗: 根西岛
🇬🇭旗: 加纳🇬🇮旗: 直布罗陀🇬🇱旗: 格陵兰
🇬🇲旗: 冈比亚🇬🇳旗: 几内亚🇬🇵旗: 瓜德罗普
🇬🇶旗: 赤道几内亚🇬🇷旗: 希腊🇬🇸旗: 南乔治亚和南桑威奇群岛
🇬🇹旗: 危地马拉🇬🇺旗: 关岛🇬🇼旗: 几内亚比绍
🇬🇾旗: 圭亚那🇭🇰旗: 中国香港特别行政区🇭🇲旗: 赫德岛和麦克唐纳群岛
🇭🇳旗: 洪都拉斯🇭🇷旗: 克罗地亚🇭🇹旗: 海地
🇭🇺旗: 匈牙利🇮🇨旗: 加纳利群岛🇮🇩旗: 印度尼西亚
🇮🇪旗: 爱尔兰🇮🇱旗: 以色列🇮🇲旗: 马恩岛
🇮🇳旗: 印度🇮🇴旗: 英属印度洋领地🇮🇶旗: 伊拉克
🇮🇷旗: 伊朗🇮🇸旗: 冰岛🇮🇹旗: 意大利
🇯🇪旗: 泽西岛🇯🇲旗: 牙买加🇯🇴旗: 约旦
🇯🇵旗: 日本🇰🇪旗: 肯尼亚🇰🇬旗: 吉尔吉斯斯坦
🇰🇭旗: 柬埔寨🇰🇮旗: 基里巴斯🇰🇲旗: 科摩罗
🇰🇳旗: 圣基茨和尼维斯🇰🇵旗: 朝鲜🇰🇷旗: 韩国
🇰🇼旗: 科威特🇰🇾旗: 开曼群岛🇰🇿旗: 哈萨克斯坦
🇱🇦旗: 老挝🇱🇧旗: 黎巴嫩🇱🇨旗: 圣卢西亚
🇱🇮旗: 列支敦士登🇱🇰旗: 斯里兰卡🇱🇷旗: 利比里亚
🇱🇸旗: 莱索托🇱🇹旗: 立陶宛🇱🇺旗: 卢森堡
🇱🇻旗: 拉脱维亚🇱🇾旗: 利比亚🇲🇦旗: 摩洛哥
🇲🇨旗: 摩纳哥🇲🇩旗: 摩尔多瓦🇲🇪旗: 黑山
🇲🇫旗: 法属圣马丁🇲🇬旗: 马达加斯加🇲🇭旗: 马绍尔群岛
🇲🇰旗: 北马其顿🇲🇱旗: 马里🇲🇲旗: 缅甸
🇲🇳旗: 蒙古🇲🇴旗: 中国澳门特别行政区🇲🇵旗: 北马里亚纳群岛
🇲🇶旗: 马提尼克🇲🇷旗: 毛里塔尼亚🇲🇸旗: 蒙特塞拉特
🇲🇹旗: 马耳他🇲🇺旗: 毛里求斯🇲🇻旗: 马尔代夫
🇲🇼旗: 马拉维🇲🇽旗: 墨西哥🇲🇾旗: 马来西亚
🇲🇿旗: 莫桑比克🇳🇦旗: 纳米比亚🇳🇨旗: 新喀里多尼亚
🇳🇪旗: 尼日尔🇳🇫旗: 诺福克岛🇳🇬旗: 尼日利亚
🇳🇮旗: 尼加拉瓜🇳🇱旗: 荷兰🇳🇴旗: 挪威
🇳🇵旗: 尼泊尔🇳🇷旗: 瑙鲁🇳🇺旗: 纽埃
🇳🇿旗: 新西兰🇴🇲旗: 阿曼🇵🇦旗: 巴拿马
🇵🇪旗: 秘鲁🇵🇫旗: 法属波利尼西亚🇵🇬旗: 巴布亚新几内亚
🇵🇭旗: 菲律宾🇵🇰旗: 巴基斯坦🇵🇱旗: 波兰
🇵🇲旗: 圣皮埃尔和密克隆群岛🇵🇳旗: 皮特凯恩群岛🇵🇷旗: 波多黎各
🇵🇸旗: 巴勒斯坦领土🇵🇹旗: 葡萄牙🇵🇼旗: 帕劳
🇵🇾旗: 巴拉圭🇶🇦旗: 卡塔尔🇷🇪旗: 留尼汪
🇷🇴旗: 罗马尼亚🇷🇸旗: 塞尔维亚🇷🇺旗: 俄罗斯
🇷🇼旗: 卢旺达🇸🇦旗: 沙特阿拉伯🇸🇧旗: 所罗门群岛
🇸🇨旗: 塞舌尔🇸🇩旗: 苏丹🇸🇪旗: 瑞典
🇸🇬旗: 新加坡🇸🇭旗: 圣赫勒拿🇸🇮旗: 斯洛文尼亚
🇸🇯旗: 斯瓦尔巴和扬马延🇸🇰旗: 斯洛伐克🇸🇱旗: 塞拉利昂
🇸🇲旗: 圣马力诺🇸🇳旗: 塞内加尔🇸🇴旗: 索马里
🇸🇷旗: 苏里南🇸🇸旗: 南苏丹🇸🇹旗: 圣多美和普林西比
🇸🇻旗: 萨尔瓦多🇸🇽旗: 荷属圣马丁🇸🇾旗: 叙利亚
🇸🇿旗: 斯威士兰🇹🇦旗: 特里斯坦-达库尼亚群岛🇹🇨旗: 特克斯和凯科斯群岛
🇹🇩旗: 乍得🇹🇫旗: 法属南部领地🇹🇬旗: 多哥
🇹🇭旗: 泰国🇹🇯旗: 塔吉克斯坦🇹🇰旗: 托克劳
🇹🇱旗: 东帝汶🇹🇲旗: 土库曼斯坦🇹🇳旗: 突尼斯
🇹🇴旗: 汤加🇹🇷旗: 土耳其🇹🇹旗: 特立尼达和多巴哥
🇹🇻旗: 图瓦卢🇹🇼旗: 台湾🇹🇿旗: 坦桑尼亚
🇺🇦旗: 乌克兰🇺🇬旗: 乌干达🇺🇲旗: 美国本土外小岛屿
🇺🇳旗: 联合国🇺🇸旗: 美国🇺🇾旗: 乌拉圭
🇺🇿旗: 乌兹别克斯坦🇻🇦旗: 梵蒂冈🇻🇨旗: 圣文森特和格林纳丁斯
🇻🇪旗: 委内瑞拉🇻🇬旗: 英属维尔京群岛🇻🇮旗: 美属维尔京群岛
🇻🇳旗: 越南🇻🇺旗: 瓦努阿图🇼🇫旗: 瓦利斯和富图纳
🇼🇸旗: 萨摩亚🇽🇰旗: 科索沃🇾🇪旗: 也门
🇾🇹旗: 马约特🇿🇦旗: 南非🇿🇲旗: 赞比亚
🇿🇼旗: 津巴布韦🏴󠁧󠁢󠁥󠁮󠁧󠁿旗: 英格兰🏴󠁧󠁢󠁳󠁣󠁴󠁿旗: 苏格兰
🏴󠁧󠁢󠁷󠁬󠁳󠁿旗: 威尔士
]]> 知识笔记 Butterfly主题 Markdown https://meuicat.com/posts/39279693.html#disqus_thread iCat-APP 开源记录 https://meuicat.com/posts/e38871d.html https://meuicat.com/posts/e38871d.html Sat, 27 Aug 2022 15:30:34 GMT 关于APP的迭代更新，以及开源记录 前言

这是一款适用于安卓用户的APP
可第一时间便捷的获取广播剧、小说和漫画等内容的更新

APP下载地址：
app.meuicat.com

软件历史

正式版

V1.1

发布时间：
2022.9.13

更新内容：
- 调整主页UI细节

- 修复主页内容显示Bug
- 修复更新版号错误的问题

- 重构主页面，使软件更稳定

- 移除已遗弃的素材残留等

- 调整系统支持，最低要求系统为：Android 7.0

V1.0

发布时间：
2022.9.10

更新内容：
- 全新UI上线！！
- 调整主页面滑动动画，实施全加载模式（不会在出现内容缺失等问题）

- 修复并优化各页面已知Bug

- 重构启动页UI和跳转逻辑
- 重构切换页面的方式以及逻辑问题

- 新增更新页UI等功能
- 新增‘关于页’的文章统计以及软件访问统计

各位喵友们中秋快乐~

内测版

V0.03

发布时间：
2022.8.19

更新内容：
- 调整主页面UI细节
- 调整启动页Bug

- 新增主页面列表内容跳转提示（再也不会误触了~）

V0.02

发布时间：
2022.8.18

更新内容：
- 修复不同系统版本下状态栏颜色错误
- 修复载入主页面内容丢失

- 更新APP内软件更新方式

- 重构home主页面UI

- 新建主页列表最后一条内容提示

V0.01

发布时间：
2022.8.17

更新内容：
- 第一版iCat-APP上线测试
- 支持实时显示布柒糖小站的最新50篇内容

软件开源

开发工具：iApp
开发语言：俗语言 V3
开发机型：OPPO A83

内测版开源

新增界面名称界面用途
a1_to_update.iyu列表跳转弹窗UI

a1_list.iyu - 相对布局1 - 单机触屏事件

1
2
3
4
5
6
7
8
9
10
11
ulag(st_vW,3,llqbt)
ulag(st_vW,6,sss.llqlj)
utw(null,"","a1_to_update.iyu","",true,sss.v)
{
}
gvs(sss.v,8,bt1)
us(bt1,"text",llqbt)
gvs(sss.v,9,lj1)
us(lj1,"text",sss.llqlj)

PS：新增主页面列表内容跳转提示（再也不会误触了~）

源码下载：蓝奏云

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
fn ztl()
java(cs, activity, "android.app.Activity.getWindow")
java(cs2, cs, "android.view.Window.getDecorView")
java(null, cs2, "android.view.View.setSystemUiVisibility", "int", "8192")
//设置状态栏透明(沉浸式)
java(null, cs, "android.view.Window.addFlags", "int", "67108864")
end fn

👇👇👇

fn ztl()
uycl("#ffffff",true,0)
end fn

PS：修复不同系统版本下状态栏颜色错误
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
f(st_vT==0)
 {
  endcode
 }
//列表可见项目为0时停止执行

f(ss.gd=="true")
 {
  endcode
 }
//判断是否以提醒过

s(st_bT-st_vT,kj)
f(st_fM==kj)
 {
//以滚动到底部执行的事件

  ss gd="true"
  tw("已经到底了，没有更多啦！",0)
 }

PS：新建主页列表最后一条内容提示

源码下载：蓝奏云

软件展示：

主界面
侧边栏
关于页
打赏页

源码框架：

界面名称界面用途
mian.iyu启动页
to_update.iyu更新弹窗UI
about_reward.iyu打赏页
a1_list.iyu布柒糖内容列表UI
menu_list.iyu侧边栏列表UI
about.iyu关于页
menu.iyu侧边页
home.iyu主页面
icat_fn.myu状态栏透明、防抓包线程、更新线程
home_fn.myu获取并设置布柒糖的主页列表内容、启动统计线程

源码下载：蓝奏云

正式版开源

启动页
主页面
软件页
更新页

源码框架：

界面名称界面用途
software_update.iyu更新页
a3.iyu软件页UI
to_update.iyu更新弹窗UI
about.iyu关于页
a1_to_update.iyu列表跳转弹窗UI
a1_list.iyu布柒糖内容列表UI
mian221.iyu主页面（残缺）
mian22.iyu主页面
a1.iyu布柒糖列表UI
a2.iyu待开发页UI
mian.iyu启动页
icat_fn.myu主副色状态栏、更新线程
home_fn.myu获取并设置布柒糖的主页列表内容、启动统计线程、软件页数据加载线程
]]> 我的项目 iApp 源码 https://meuicat.com/posts/e38871d.html#disqus_thread Butterfly的调整教程：文章外挂标签美化 https://meuicat.com/posts/3a52547f.html https://meuicat.com/posts/3a52547f.html Wed, 27 Jul 2022 06:27:15 GMT 感觉Butterfly的外挂标签有点不太符合自己的审美，强迫症犯了，按照自己的感觉改改

📚 更多文档目录

🚀 搭建教程 | 1 - 📑 前置教程 | 2 - 🎈 主题调整 | 3 - ✨ 魔改教程 | 4 - 🐈 重构自用数据记录

本篇教程基于 Hexo 6.3.0 & Butterfly 4.8.5 为博主的主题调整记录，以防自己日后遗忘所记录 📝

感觉Butterfly的外挂标签有点不太符合自己的审美，强迫症犯了，按照自己的感觉改改

Table栏调整（Heo）

  • 在自建的CSS文件 [blogRoot]/source/css/icat.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
#article-container .tabs {
    border: 3px solid var(--icat-secondbg) !important;
}
#article-container .tabs {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--icat-shadow-border);
    padding: 8px;
    background: var(--icat-card-bg);
    border: var(--style-border);
    margin: 1rem 0px !important;
}
#article-container .tabs .nav-tabs {
    background: var(--icat-background);
    border: 2px solid var(--icat-secondbg) !important;
    border-radius: 6px;
    padding: 12px 16px;
    display: flex;
    justify-content: center;
}
#article-container .tabs > .nav-tabs > .tab button {
    background: var(--icat-background);
    border-radius: 6px;
    border: 1px solid var(--icat-secondbg) !important;
}
#article-container .tabs > .nav-tabs > .tab {
    padding: 3px 3px;
}
#article-container .tabs > .nav-tabs > .tab.active button {
    background: var(--icat-tabs-background);
    color: var(--tab-button-active-bg);
    font-weight: 700;
}

/* Table分栏美化 */

hr分割栏美化

  • 修改 [blogRoot]/themes/butterfly/source/css/_global/index.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
    ···

hr
  position: relative
- margin: 40px auto
- border: 2px dashed var(--hr-border)
+  margin: 26px auto
+  border: 1px dashed var(--hr-border)

  if hexo-config('hr_icon.enable')
    width: calc(100% - 4px)

    &:hover
      &:before
        left: calc(95% - 20px)

-   &:before
-     position: absolute
-     top: $hr-icon-top
-     left: 5%
-     z-index: 1
-     color: var(--hr-before-color)
-     content: $hr-icon
-     font-size: 20px
-     line-height: 1
-     transition: all 1s ease-in-out
-     @extend .fontawesomeIcon

    ···

折叠栏调整

  • 在自建的CSS文件 [blogRoot]/source/css/icat.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
.toggle > .toggle-button::after {
    position: absolute;
    content: "+";
    right: 20px;
}
.toggle[open] > .toggle-button::after {
    position: absolute;
    content: "-";
    right: 20px;
}
/* 右侧展开显示 + - */
  
.toggle {
    border-radius: 12px;
    margin-top: 20px;
    border: var(--style-border) !important;
}
.toggle > .toggle-button {
    position: relative;
    padding: 10px 18px;
    background-color: var(--icat-background) !important;
    color:var(--icat-fontcolor);
    border-radius: 12px;
    font-weight: 900;
}
.toggle[open] > .toggle-button {
    border-bottom: var(--style-border);
}

/* 折叠栏调整美化 */

引用块美化（Heo）

  • 在自建的CSS文件 [blogRoot]/source/css/icat.css 里新增以下内容
1
2
3
4
5
6
7
8
9
10
blockquote {
    border-left: 2px solid #49b1f5;
    background-color: var(--icat-secondbg);
    color: var(--icat-secondtext);
    border-radius: 8px;
    margin: 1rem 0;
    padding: 0.9rem 1.2rem;
}

/* 引用块美化 */

note块调整

  • 在自建的CSS文件 [blogRoot]/source/css/icat.css 里新增以下内容
1
2
3
4
5
6
7
8
.note {
    border-radius: 8px;
}
.note.flat {
    border-left: 3px solid #eee;
}

/* note块圆角调整 */

代码块调整

  • 在自建的CSS文件 [blogRoot]/source/css/icat.css 里新增以下内容
1
2
3
4
5
#article-container figure.highlight {
    border-radius: 8px;
}

/* 代码块圆角调整 */
]]> 经验分享 Butterfly主题 调整记录 https://meuicat.com/posts/3a52547f.html#disqus_thread iOS修改 - 万铲铲的致富之路 https://meuicat.com/posts/5bf2fdc6.html https://meuicat.com/posts/5bf2fdc6.html Mon, 11 Jul 2022 17:33:04 GMT 修改游戏内钞票、紫珍珠等游戏数据 前言

此教程为 iOS 系统，并且手机已 越狱
安卓系统可到其他平台寻找修改教程

本教程使用到的游戏版本为：1.0.7

准备工具

  • 已越狱设备（iPhone或iPad都可）

本教程使用到的系统版本为：14.4

跳过游戏内的广告

  • 激励视频跳过助手

修改游戏内的钞票、紫珍珠等数值

  • Filza File Manager文件管理器

修改教程

  • 点开 Filza 工具，找到游戏的应用数据目录

  • 游戏数据路径为 Library / Preferences 内 com.mojike.digearth.plist 文件

  • 按照下方的对应表改相对的数值即可

代码对应表

名称意思
MainDigTopDepth层数/米
MyCharacters人物等级
Mysterium紫珍珠
GameCoin钞票
CompassAccRecovery罗盘 - 加速恢复
CompassAccUp罗盘 - 加速效果
CompassBargainTime罗盘 - 议价时间
CompassHallPublicity罗盘 - 展馆宣传
CompassHammerRecovery罗盘 - 锤子恢复
CompassHoleEnergy罗盘 - 体力上限
CompassMerchantBuyTime罗盘 - 神秘访客
CompassSuperAcc罗盘 - 超级加速

罗盘上限：150
人物上线：630

效果展示

]]> 经验分享 iOS14 越狱 https://meuicat.com/posts/5bf2fdc6.html#disqus_thread Markdown 基础教程 https://meuicat.com/posts/8513d0f8.html https://meuicat.com/posts/8513d0f8.html Sat, 09 Jul 2022 09:33:25 GMT 自用记录~ 基础功能

什么是Markdown

Markdown 语言在 2004 由约翰·格鲁伯（英语：John Gruber）创建
Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档
Markdown 是一种轻量标记语言，通过简单的语法，使普通文本具有一定的格式。文件后缀名一般为 .md 、 .markdown



插入标题

Markdown标题有两种写法

在文字下方输入 - 或 = 构成的线；

1
2
3
4
5
我展示的是一级标题
=================

我展示的是二级标题
-----------------

效果预览：

在文字前面插入 # 号，内容前面要有空格与 # 隔开：

1
2
3
4
5
6
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

效果预览：



段落格式

Markdown 换行挺讲究，会发现在编写的时候直接回车换行发现不生效，那怎么办呢？

在段落最后使用加入 <br> 标签实现换行

1
2
段落1<br> 
段落2

段落最后 按两次回车 ，直接隔一行写

1
2
3
段落1

段落2


字体效果

改变字体形态的相关写法

粗体和斜体使用的是 * (星) 号和 _ (下划线) 符号，符号数量不同效果不同
下划线可以通过 HTML 的 <u></u> 标签来实现
删除线只需要在文字的两端加上两个波浪线 ~~ 即可

1
2
3
4
5
6
7
8
*斜体文本*
_斜体文本_
**粗体文本**
__粗体文本__
***粗斜体文本***
___粗斜体文本___
~~带删除线文本~~
<u>带下划线文本</u>

效果预览：

斜体文本
斜体文本
粗体文本
粗体文本
粗斜体文本
粗斜体文本
带删除线文本
带下划线文本



分隔线

在一行中使用三个及以上的星号 * 或 - 或 _ 即可生成分隔线
生成的分隔线样式根据主题而定

1
2
3
4
5
6
7
8
9
10
11
***

---

******

----------

__________

<hr>

效果预览：



列表

Markdown 支持有序列表和无序列表

无序列表：使用 * 或 + 或 - 都可以，符号与内容要有空格隔开
有序列表：直接 数字 + . 即可,符号与内容要有空格隔开

1
2
3
4
5
6
7
8
9
10
11
12
* 无序列表项1
* 无序列表项2

+ 无序列表项1
+ 无序列表项2

- 无序列表项1
- 无序列表项2

1. 有序列表1
2. 有序列表2
3. 有序列表3

效果预览：

列表嵌套写法：

直接在第二行按 Tab 键或按四下空格缩进一下即可

1
2
3
4
5
6
1. 第一项：
    - 第一项第一个
    - 第一项第二个
2. 第二项：
    - 第二项第一个
    - 第二项第二个

效果预览：



引用区块

在文本前面添加 > 符号即可将文本变为引用区块

1
> 文本内容

效果预览：



代码

如果是段落上的一个函数或片段的代码可以用反引号 ` 把它包起来

1
`printf()` 函数

效果预览：

printf() 函数

代码区块

可使用三个 ` 符号包裹住代码块，并指定一种语言即可生成代码预览区域
此符号一定要在英文状态下才能打出

效果预览：

1
2
3
4
5
function monkeyPatch () {
  Object.defineProperty(Array.prototype, 'abbrev', {
    value: function () { return abbrev(this) },
    enumerable: false, configurable: true, writable: true
  })

你也可以在 ``` 后面指定一种语言（也可以不指定）：

效果预览：

1
2
3
$(document).ready(function () {
    alert('RUNOOB');
});


网址链接

可直接在文章粘贴你的链接,如果网址太长可以使用格式链接名称

1
2
链接写法1：https://meuicat.com/
链接写法2：[广播剧小站](https://radio.meuicat.com/)

效果预览：

链接写法1：https://meuicat.com/
链接写法2：广播剧小站



插入图片

图片和链接插入方式都差不多，就是在前面多了个叹号： ![图片描述](图片地址) ，图片描述可写可不写
图片地址可以是网址，也可以是本地文件名（文件需要存在，且路径正确）

在Hexo文章内如何引用本地图片文件：
进入 hexo 的 source/_posts 目录后，会发现一个写文章内容的 .md 文件和一个同名的文件夹，把图片丢进文件夹里面就行
然后直接 ![图片描述](图片文件名) 引用即可

注：如若没有同名文件夹，移步至 hexo 目录里的 _config.yml 内 post_asset_folder 选项设置成 true 即可

1
2
图片写法1：![](baidu.webp)
图片写法2：![百度](https://www.baidu.comhttps://img.meuicat.com/posts/2022/7/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.webp)

效果预览：

图片写法1：

图片写法2：
百度


Markdown 还没有办法指定图片的高度与宽度，如果你需要的话，你可以使用普通的 <img> 标签

1
<img src="https://www.baidu.comhttps://img.meuicat.com/posts/2022/7/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.webp" width="50%">

效果预览：



表格

Markdown 制作表格使用 | 来分隔不同的单元格，使用 - 来分隔表头和其他行

-: 设置右对齐
:- 设置左对齐
:-: 设置居中对齐

1
2
3
4
| 左对齐 | 右对齐 | 居中对齐 | 默认对齐 |
| :-----| ----:  | :----:  | ------  |
|  |  |   |    |
|  |  |   |    |

效果预览：

左对齐右对齐居中对齐默认对齐


高级技巧

支持 HTML 代码

Markdown是支持HTML且正常识别。因此，可以解锁更多自定义写法

不在 Markdown 涵盖范围之内的标签，都可以直接在文档里面用 HTML 撰写
目前支持的 HTML 元素有： <kbd> <b> <i> <em> <sup> <sub> <br> 等

列如：
kbd - 显示为键盘的按键样式

1
使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重启电脑

效果预览：

使用 Ctrl+Alt+Del 重启电脑



转义字符

如果在输出以下字符无法正常输出,可在字符前面加上反斜杠 \ 符号
例如我想正常输出 * 号，且不会被识别成格式控制符号，可以写为 \*

名称字符写法
反斜杠\\\
星号*\*
反引号`\`
下划线_\_
花括号{ }\{ }
中括号[ ]\[ ]
括号( )\( )
井号#\#
加号+\+
减号-\-
点.\.
感叹号!\!
竖线||


数学公式

输出数学公式需要对应的插件支持。只需要用 $ 符号把公式包裹起来就行。如果是复杂的公式则可以用两个 $$ 符号

使用 KaTeX 或者 MathJax 来渲染数学表达式
KaTeX 拥有比 MathJax 更快的性能，但是它却少了很多 MathJax 拥有的特性
你可以查看 KaTeX supported functions/symbols 来了解 KaTeX 支持那些符号和函数

1
2
3
4
5
6
行内公式（适用于简单公式）：$ x^2 + \sqrt{y} = z $

单独占一行(适用于复杂的公式)：
$$
\frac{d}{dx}e^{ax}=ae^{ax}\quad \sum_{i=1}^{n}{(X_i - \overline{X})^2}
$$

效果预览：

行内公式（适用于简单公式）：$ x^2 + \sqrt{y} = z $

单独占一行(适用于复杂的公式)：
$$
\frac{d}{dx}e^{ax}=ae^{ax}\quad \sum_{i=1}^{n}{(X_i - \overline{X})^2}
$$

本主题（Butterfly）是安装了 MathJax 数学插件的，只需要在含有数学公式内容文章或页面的 Front-matter 部分添加 mathjax: true 即可开启公式渲染

]]> 知识笔记 Butterfly主题 https://meuicat.com/posts/8513d0f8.html#disqus_thread 从你的全世界路过 https://meuicat.com/posts/5d356fa3.html https://meuicat.com/posts/5d356fa3.html Tue, 14 Jun 2022 04:57:28 GMT 我希望有个如你一般的人，如山间清爽的风，如古城温暖的光，从清晨到夜晚由山野到书房，只要最后是你就好

我希望有个如你一般的人，如山间清爽的风，如古城温暖的光，从清晨到夜晚由山野到书房，只要最后是你就好

这是《从你的全世界路过》里出现最多的一段词，也是我感触最深的一段词

很多人为美好的文字而感动，对其中所写的爱情感到神往，可对于陈末来说呢？

谁是他清爽的风，谁又是他温暖的光？
对于过去，小蓉是他的风，可现在，幺鸡才是他的光

陈末和小蓉是大学同学，都在学校电台担任DJ，朝昔相处
从大学到毕业，因为爱，陈末与小蓉都很默契无论是工作还是生活
直到电影的开头，在播音室里，小蓉对陈末说：我们分手吧。陈末不明所以，为什么？

小蓉说：你要的是爱情，可我觉得适合更重要

小蓉个女强人，对事业有很大的企图心，而陈末却对现在的生活非常满足
她觉得他幼稚，不思进取，两人的价值观不在一个层次，所以分手是最好的结局吧

荔枝，你走路永远看天空，出门不记方向
你说你不敢出远门，怕回不来
以后不怕了，不用背路名，不用买地图
我会在这个导航仪里面，一直陪着你

在每日的追逐打闹中，荔枝和茅十八最后走到了一起
茅十八承诺会爱荔枝一生一世，只可惜最后茅十八为了保护荔枝受伤去世了

因为爱，茅十八才会舍命保护荔枝。

荔枝的职业是警察，所以茅十八总是特别担心荔枝的人身安全
于是他为荔枝做了个便携的报警器
如果荔枝遇到了危险按动这个报警器，无论茅十八在哪里，他都能够及时地赶过去保护她

猪头，你和燕子在一起居然有八年啊
八年吗，我只记得两千九百二十三天

如果说荔枝与茅十八是大胆的爱
那么猪头与燕子应该就是 舔狗 与 女神 的真实写照了吧

与其说是燕子离不开猪头，倒不如说是猪头的世界里不能少了燕子
是猪头不能想象没有了燕子的世界还剩下什么，每天都是为了能让燕子过的更好而活

燕子不断地向高处走，而猪头却停留在原地拼命赚钱扮演好垫脚石的角色
燕子估计仅仅只是要他在就好了，在她最低谷的时候，帮助并信任她
从大学一直到分手，猪头很清楚的记得 两千九百二十九天
但现在，猪头什么都没有了..

很佩服猪头对爱情的执着和那种奉献的精神，这样的人值得一段更加美好而不被辜负的爱情

有一个地方 叫做稻城
我要和我最心爱的人，一起去到那里
看白色的雪山，看一场秋天的童话
只要最后是你就好

幺鸡出现在陈末最失意的时候，她看到了他最落魄的模样，最消极的状态
她没有，也不可能放弃他，因为是他在自己最失落的时候通过电波给了自己希望，是他告诉她有个地方叫做稻城

作为实习生，她陪着他做节目，当听众骂陈末的时候她奋力反驳、妙语连珠，口若悬河
因为幺鸡的反驳和一连串出于维护陈末的责问，那个听众哑口无言
她把想对陈末说的话，都说给了听众
对于陈末，幺鸡向来说的很少

就像罗伯特•勃莱说的：我用笨拙、缓慢的方式爱你；几乎从不说话，仅有片言只语

其实总感觉，猪头和燕子，小容和陈末，荔枝和十八，再到陈末和幺鸡，映射出我们生活中相似的情感经历
猪头把所有都给了燕子，但燕子只是对猪头有好感而已
小荣和陈末从大学一直到步入工作，两人都没有错，错的只是到了相对的年龄所做出的方式不同罢了
在一日日的追逐中，十八和荔枝相爱了，十八用自己的发明保护着危险职业的警察荔枝，也用生命保护了荔枝

电影的最后，茅十八和荔枝天人永隔；猪头和燕子没有再见；适逢其会的开头，天各一方的结局

唯有陈末与幺鸡，在一片空旷的草地上，四目相对，不说话，嘴角的淡淡的笑，彼此皆已会意
此时的她眼神中多了一份淡然，此时的他眼神中多了一份成熟

]]> 生活随笔 观感笔记 https://meuicat.com/posts/5d356fa3.html#disqus_thread 小米摄像头！避！雷！ https://meuicat.com/posts/9a3b9173.html https://meuicat.com/posts/9a3b9173.html Mon, 30 May 2022 02:19:46 GMT 关于小米摄像头登上推荐榜单的各种雷点各种坑，包括云存储！ 21年10月，刚养猫不久，女朋友想买一个摄像头放家里看猫
当时她也不懂，看到推荐榜单有推荐小米的
就抱着试试的心态，下单了【小米智能摄像机 云台版2K】

SD卡无法录制

当时选的时候加了一张32G的内存卡，想着可以进行录制监控
刚到货的那几天还能用一用卡来存储视频
但过了几天后，就频繁出现 储存卡状态异常 或 状态良好但存储不了视频
再或者就是给你反复横跳，一会异常一会良好，就是不给你录制

画面变动录制

小米家的摄像头其他的款式是不是只会录制画面变动的视频我不知道
但这款摄像头不管是 卡储存 还是 云存储 ！都只会录制画面变动时候的视频
（个人只是想不断点录制而已，但我并没有找到设置方面有全时段录制的功能开关

断点画面缺失

当时卡有问题后，就把摄像头丢在了一边一直没用它
直到今年五月初，我和女朋友都在上班
为了能查看三只猫的情况，又把这个摄像头拿出来，并开通了 云存储服务

有一天下班回来后看到被子上有呕吐物，就想着去查看下监控
不查不要紧，一查火就上来了，录制的内容就跟上面说的一样

猫咪有反应即将要吐的时候是上一段视频末，下一段视频开始却是已经吐完的视频
在中间的一分钟左右的视频却缺失了

而小米客服给我的答复就是：
摄像机处于网络环境波动，导致视频没有传上去

我直接当场疑惑？？？

云存储下载慢

由于当时买的是【7天滚动云存储套餐】，每7天就会删除7天前的监控视频内容
所以我就想着下载到手机存到移动硬盘或者别的储存空间
但是！没有PC端下载就算了，用手机米家APP 下载还特别的慢 ，并且需要 屏幕长亮，不能切后台下载

小米客服答复：




NAS储存

这个就不用说了吧
SD卡都存储不了东西，怎么把SD卡的内容上传到NAS里呢

最后的最后

出现这些问题后，我才去相关论坛或一些评价平台查看了一下
发现大多都是SD卡用没多久就一堆问题
很容易烧坏SD卡，导致存储不了视频

对于那些上了推荐清单的，和好评不断的
只能说，仁者见仁智者见智吧

]]> 闲聊杂谈 封の唠叨 https://meuicat.com/posts/9a3b9173.html#disqus_thread VuePress 搭建教程 https://meuicat.com/posts/1816d029.html https://meuicat.com/posts/1816d029.html Thu, 19 May 2022 08:01:34 GMT 一个基于 Vue 的轻量级静态网站生成器，以及为编写技术文档而优化的默认主题 前言

本教程围绕 Win10 进行
对于其他系统，可百度或者自行找教程

本教程仅仅是作为个人纪录
如若有兴趣可动手按照本教程搭建自己的博客或文档

搭建前，请提前浏览一遍本教程，和重要要点！

VuePress概述

VuePress 是 Vuejs 官方提供的一个是Vue驱动的静态网站生成器，基于 Markdown 语法生成网页
简单的说它就是一个快速建设文档站点的工具，在简单配置好功能
需要做的事情就剩下写好一个个 Markdown 文档，并且可以将其发布到 GitHub 等静态托管平台

VuePress官网：https://www.vuepress.cn/

前期准备

安装Git

官网链接：https://git-scm.com/
阿里镜像源（下载速度快）：https://registry.npmmirror.com/binary.html?path=git-for-windows/

安装时，建议不要修改安装路径

安装cmder

官网链接：https://cmder.net/

可选的命令行工具，安装教程在这就跳过了，请自行下载尝试（此工具为非必要工具）

安装Node.js

官网链接：https://nodejs.org/zh-cn/

Node.js 版本决定了可搭建VuePress的版本

2.0 以上最低要求为Node.js v14+
1.0 以上最低要求为Node.js >= v8.6
0.0 以上最低要求为Node.js >= v8

安装Yarn

下载链接：https://classic.yarnpkg.com/en/docs/install#windows-stable

两种安装方式：
可使用 npm 命令安装 或 通过下载链接下载安装

1
2
cnpm i yarn -g
# 全局安装

VuePress搭建教程

安装依赖

  • 在你想存放的地方新建一个空文件夹，作为文档的源文件部署地
  • 在此文件夹内右键选择 Git Bash Here 输入下面的命令 安装依赖
1
2
3
4
5
yarn add -D vuepress

或

npm install -D vuepress

注：
如果你的现有项目依赖了 webpack 3.x
推荐使用 Yarn (opens new window)而不是 npm 来安装 VuePress
因为在这种情形下，npm 会生成错误的依赖树

  • 接下来就会在此目录下自动下载一些依赖文件，等待下载完成

注：往后所有的操作都基于此文件夹
如果出现了什么问题无法解决，就只能删除
所以修改东西前注意做好备份

初始化

  • 在 VuePress 根目录内右键选择 Git Bash Here 输入下面的命令
1
2
3
4
5
6
yarn init -y

或

npm init -y
(-y免去确认)
  • npm init -y 后会生成一个 package.json 文件
  • 在 package.json 中添加下面的内容
1
2
3
4
"scripts": {
  "docs:dev": "vuepress dev docs",
  "docs:build": "vuepress build docs"
}

本地调试

  • 在 VuePress 根目录内右键选择 Git Bash Here 输入下面的命令
1
2
3
4
5
yarn docs:dev

或

npm run docs:dev
  • 即可通过本地的 8080端口 访问进行本地预览调试

更多教程

更多详细教程可到 VuePress 查看

个人记录

表情emoji

表情id表情id表情id
💯100😦frowning💜purple_heart
🔢1234😧anguished🖤black_heart
😀grinning😨fearful💢anger
😃smiley😰cold_sweat💥boom
😄smile😥disappointed_relieved💥collision
😁grin😢cry💫dizzy
😆laughing😭sob💦sweat_drops
😆satisfied😱scream💨dash
😅sweat_smile😖confounded🕳️hole
🤣rofl😣persevere💣bomb
😂joy😞disappointed💬speech_balloon
🙂slightly_smiling_face😓sweat👁️‍🗨️eye_speech_bubble
🙃upside_down_face😩weary🗯️right_anger_bubble
😉wink😫tired_face💭thought_balloon
😊blush😤triumph💤zzz
😇innocent😡rage👋wave
😍heart_eyes😡pout🤚raised_back_of_hand
😘kissing_heart😠angry🖐️raised_hand_with_fingers_splayed
😗kissing😈smiling_imp✋hand
☺️relaxed👿imp✋raised_hand
😚kissing_closed_eyes💀skull🖖vulcan_salute
😙kissing_smiling_eyes☠️skull_and_crossbones👌ok_hand
😋yum💩hankey✌️v
😛stuck_out_tongue💩poop🤞crossed_fingers
😜stuck_out_tongue_winking_eye💩shit🤘metal
😝stuck_out_tongue_closed_eyes🤡clown_face🤙call_me_hand
🤑money_mouth_face👹japanese_ogre👈point_left
🤗hugs👺japanese_goblin👉point_right
🤔thinking👻ghost👆point_up_2
🤐zipper_mouth_face👽alien🖕middle_finger
😐neutral_face👾space_invader🖕fu
😑expressionless🤖robot👇point_down
😶no_mouth😺smiley_cat☝️point_up
😏smirk😸smile_cat👍thumbsup
😒unamused😹joy_cat👎-1
🙄roll_eyes😻heart_eyes_cat👎thumbsdown
😬grimacing😼smirk_cat✊fist_raised
🤥lying_face😽kissing_cat✊fist
😌relieved🙀scream_cat👊fist_oncoming
😔pensive😿crying_cat_face👊facepunch
😪sleepy😾pouting_cat👊punch
🤤drooling_face🙈see_no_evil🤛fist_left
😴sleeping🙉hear_no_evil🤜fist_right
😷mask🙊speak_no_evil👏clap
🤒face_with_thermometer💋kiss🙌raised_hands
🤕face_with_head_bandage💌love_letter👐open_hands
🤢nauseated_face💘cupid🤝handshake
🤧sneezing_face💝gift_heart🙏pray
😵dizzy_face💖sparkling_heart✍️writing_hand
🤠cowboy_hat_face💗heartpulse💅nail_care
😎sunglasses💓heartbeat🤳selfie
🤓nerd_face💞revolving_hearts💪muscle
😕confused💕two_hearts👂ear
😟worried💟heart_decoration👃nose
🙁slightly_frowning_face❣️heavy_heart_exclamation👀eyes
☹️frowning_face💔broken_heart👁️eye
😮open_mouth❤️heart👅tongue
😯hushed💛yellow_heart👄lips
😲astonished💚green_heart
😳flushed💙blue_heart
表情id表情id表情id
👶baby👨‍👦family_man_boy🍘rice_cracker
👦boy👨‍👦‍👦family_man_boy_boy🍙rice_ball
👧girl👨‍👧family_man_girl🍚rice
👨man👨‍👧‍👦family_man_girl_boy🍛curry
👩woman👨‍👧‍👧family_man_girl_girl🍜ramen
👱‍♀️blonde_woman👩‍👦family_woman_boy🍝spaghetti
👴older_man👩‍👦‍👦family_woman_boy_boy🍠sweet_potato
👵older_woman👩‍👧family_woman_girl🍢oden
🙍‍♂️frowning_man👩‍👧‍👦family_woman_girl_boy🍣sushi
🙍‍♀️frowning_woman👩‍👧‍👧family_woman_girl_girl🍤fried_shrimp
🙎‍♂️pouting_man🗣️speaking_head🍥fish_cake
🙎‍♀️pouting_woman👤bust_in_silhouette🍡dango
🙅no_good👥busts_in_silhouette🦀crab
🙅‍♂️no_good_man👣footprints🦐shrimp
🙅‍♂️ng_man🐵monkey_face🦑squid
🙅‍♀️no_good_woman🐒monkey🍦icecream
🙅‍♀️ng_woman🦍gorilla🍧shaved_ice
🙆‍♂️ok_man🐶dog🍨ice_cream
🙆‍♀️ok_woman🐕dog2🍩doughnut
💁information_desk_person🐩poodle🍪cookie
💁‍♂️tipping_hand_man🐺wolf🎂birthday
💁‍♂️sassy_man🦊fox_face🍰cake
💁‍♀️tipping_hand_woman🐱cat🍫chocolate_bar
💁‍♀️sassy_woman🐈cat2🍬candy
🙋raising_hand🦁lion🍭lollipop
🙋‍♂️raising_hand_man🐯tiger🍮custard
🙋‍♀️raising_hand_woman🐅tiger2🍯honey_pot
🙇bow🐆leopard🍼baby_bottle
🙇‍♂️bowing_man🐴horse🥛milk_glass
🙇‍♀️bowing_woman🐎racehorse☕coffee
🤦‍♂️man_facepalming🦄unicorn🍵tea
🤦‍♀️woman_facepalming🦌deer🍶sake
🤷‍♂️man_shrugging🐮cow🍾champagne
🤷‍♀️woman_shrugging🐂ox🍷wine_glass
👨‍⚕️man_health_worker🐃water_buffalo🍸cocktail
👩‍⚕️woman_health_worker🐄cow2🍹tropical_drink
👨‍🎓man_student🐷pig🍺beer
👩‍🎓woman_student🐖pig2🍻beers
👨‍🏫man_teacher🐗boar🥂clinking_glasses
👩‍🏫woman_teacher🐽pig_nose🥃tumbler_glass
👨‍⚖️man_judge🐏ram🍽️plate_with_cutlery
👩‍⚖️woman_judge🐑sheep🍴fork_and_knife
👨‍🌾man_farmer🐐goat🥄spoon
👩‍🌾woman_farmer🐪dromedary_camel🔪hocho
👨‍🍳man_cook🐫camel🔪knife
👩‍🍳woman_cook🐘elephant🏺amphora
👨‍🔧man_mechanic🦏rhinoceros🌍earth_africa
👩‍🔧woman_mechanic🐭mouse🌎earth_americas
👨‍🏭man_factory_worker🐁mouse2🌏earth_asia
👩‍🏭woman_factory_worker🐀rat🌐globe_with_meridians
👨‍💼man_office_worker🐹hamster🗺️world_map
👩‍💼woman_office_worker🐰rabbit🗾japan
👨‍🔬man_scientist🐇rabbit2🏔️mountain_snow
👩‍🔬woman_scientist🐿️chipmunk⛰️mountain
👨‍💻man_technologist🦇bat🌋volcano
👩‍💻woman_technologist🐻bear🗻mount_fuji
👨‍🎤man_singer🐨koala🏕️camping
👩‍🎤woman_singer🐼panda_face🏖️beach_umbrella
👨‍🎨man_artist🐾feet🏜️desert
👩‍🎨woman_artist🐾paw_prints🏝️desert_island
👨‍✈️man_pilot🦃turkey🏞️national_park
👩‍✈️woman_pilot🐔chicken🏟️stadium
👨‍🚀man_astronaut🐓rooster🏛️classical_building
👩‍🚀woman_astronaut🐣hatching_chick🏗️building_construction
👨‍🚒man_firefighter🐤baby_chick🏘️houses
👩‍🚒woman_firefighter🐥hatched_chick🏚️derelict_house
👮cop🐦bird🏠house
👮‍♂️policeman🐧penguin🏡house_with_garden
👮‍♀️policewoman🕊️dove🏢office
🕵️detective🦅eagle🏣post_office
🕵️‍♂️male_detective🦆duck🏤european_post_office
🕵️‍♀️female_detective🦉owl🏥hospital
💂‍♂️guardsman🐸frog🏦bank
💂‍♀️guardswoman🐊crocodile🏨hotel
👷construction_worker🐢turtle🏩love_hotel
👷‍♂️construction_worker_man🦎lizard🏪convenience_store
👷‍♀️construction_worker_woman🐍snake🏫school
🤴prince🐲dragon_face🏬department_store
👸princess🐉dragon🏭factory
👳‍♂️man_with_turban🐳whale🏯japanese_castle
👳‍♀️woman_with_turban🐋whale2🏰european_castle
👲man_with_gua_pi_mao🐬dolphin💒wedding
🤵‍♂️man_in_tuxedo🐬flipper🗼tokyo_tower
👰‍♀️bride_with_veil🐟fish🗽statue_of_liberty
🤰pregnant_woman🐠tropical_fish⛪church
👼angel🐡blowfish🕌mosque
🎅santa🦈shark🕍synagogue
🤶mrs_claus🐙octopus⛩️shinto_shrine
💆massage🐚shell🕋kaaba
💆‍♂️massage_man🐌snail⛲fountain
💆‍♀️massage_woman🦋butterfly⛺tent
💇haircut🐛bug🌁foggy
💇‍♂️haircut_man🐜ant🌃night_with_stars
💇‍♀️haircut_woman🐝bee🏙️cityscape
🚶walking🐝honeybee🌄sunrise_over_mountains
🚶‍♂️walking_man🦗cricket🌅sunrise
🚶‍♀️walking_woman🕷️spider🌆city_sunset
🏃runner🕸️spider_web🌇city_sunrise
🏃running🦂scorpion🌉bridge_at_night
🏃‍♂️running_man💐bouquet♨️hotsprings
🏃‍♀️running_woman🌸cherry_blossom🎠carousel_horse
💃dancer💮white_flower🎡ferris_wheel
🕺man_dancing🏵️rosette🎢roller_coaster
🕴️business_suit_levitating🌹rose💈barber
👯dancers🥀wilted_flower🎪circus_tent
👯‍♂️dancing_men🌺hibiscus🚂steam_locomotive
👯‍♀️dancing_women🌻sunflower🚃railway_car
🤺person_fencing🌼blossom🚄bullettrain_side
🏇horse_racing🌷tulip🚅bullettrain_front
⛷️skier🌱seedling🚆train2
🏂snowboarder🌲evergreen_tree🚇metro
🏌️‍♂️golfing_man🌳deciduous_tree🚈light_rail
🏌️‍♀️golfing_woman🌴palm_tree🚉station
🏄surfer🌵cactus🚊tram
🏄‍♂️surfing_man🌾ear_of_rice🚝monorail
🏄‍♀️surfing_woman🌿herb🚞mountain_railway
🚣rowboat☘️shamrock🚋train
🚣‍♂️rowing_man🍀four_leaf_clover🚌bus
🚣‍♀️rowing_woman🍁maple_leaf🚍oncoming_bus
🏊swimmer🍂fallen_leaf🚎trolleybus
🏊‍♂️swimming_man🍃leaves🚐minibus
🏊‍♀️swimming_woman🍇grapes🚑ambulance
⛹️‍♂️basketball_man🍈melon🚒fire_engine
⛹️‍♀️basketball_woman🍉watermelon🚓police_car
🏋️‍♂️weight_lifting_man🍊tangerine🚔oncoming_police_car
🏋️‍♀️weight_lifting_woman🍊orange🚕taxi
🚴bicyclist🍊mandarin🚖oncoming_taxi
🚴‍♂️biking_man🍋lemon🚗car
🚴‍♀️biking_woman🍌banana🚗red_car
🚵mountain_bicyclist🍍pineapple🚘oncoming_automobile
🚵‍♂️mountain_biking_man🍎apple🚙blue_car
🚵‍♀️mountain_biking_woman🍏green_apple🚚truck
🤸‍♂️man_cartwheeling🍐pear🚛articulated_lorry
🤸‍♀️woman_cartwheeling🍑peach🚜tractor
🤼‍♂️men_wrestling🍒cherries🏎️racing_car
🤼‍♀️women_wrestling🍓strawberry🏍️motorcycle
🤽‍♂️man_playing_water_polo🥝kiwi_fruit🛵motor_scooter
🤽‍♀️woman_playing_water_polo🍅tomato🚲bike
🤾‍♂️man_playing_handball🥑avocado🛴kick_scooter
🤾‍♀️woman_playing_handball🍆eggplant🚏busstop
🤹‍♂️man_juggling🥔potato🛣️motorway
🤹‍♀️woman_juggling🥕carrot🛤️railway_track
🛀bath🌽corn🛢️oil_drum
🛌sleeping_bed🌶️hot_pepper⛽fuelpump
👭two_women_holding_hands🥒cucumber🚨rotating_light
👫couple🍄mushroom🚥traffic_light
👬two_men_holding_hands🥜peanuts🚦vertical_traffic_light
👩‍❤️‍💋‍👨couplekiss_man_woman🌰chestnut🛑stop_sign
👨‍❤️‍💋‍👨couplekiss_man_man🍞bread🚧construction
👩‍❤️‍💋‍👩couplekiss_woman_woman🥐croissant⚓anchor
💑couple_with_heart🥖baguette_bread⛵boat
👩‍❤️‍👨couple_with_heart_woman_man🥞pancakes⛵sailboat
👨‍❤️‍👨couple_with_heart_man_man🧀cheese🛶canoe
👩‍❤️‍👩couple_with_heart_woman_woman🍖meat_on_bone🚤speedboat
👪family🍗poultry_leg🛳️passenger_ship
👨‍👩‍👦family_man_woman_boy🥓bacon⛴️ferry
👨‍👩‍👧family_man_woman_girl🍔hamburger🛥️motor_boat
👨‍👩‍👧‍👦family_man_woman_girl_boy🍟fries🚢ship
👨‍👩‍👦‍👦family_man_woman_boy_boy🍕pizza✈️airplane
👨‍👩‍👧‍👧family_man_woman_girl_girl🌭hotdog🛩️small_airplane
👨‍👨‍👦family_man_man_boy🌮taco🛫flight_departure
👨‍👨‍👧family_man_man_girl🌯burrito🛬flight_arrival
👨‍👨‍👧‍👦family_man_man_girl_boy🥙stuffed_flatbread💺seat
👨‍👨‍👦‍👦family_man_man_boy_boy🥚egg🚁helicopter
👨‍👨‍👧‍👧family_man_man_girl_girl🍳fried_egg🚟suspension_railway
👩‍👩‍👦family_woman_woman_boy🥘shallow_pan_of_food🚠mountain_cableway
👩‍👩‍👧family_woman_woman_girl🍲stew🚡aerial_tramway
👩‍👩‍👧‍👦family_woman_woman_girl_boy🥗green_salad🛰️artificial_satellite
👩‍👩‍👦‍👦family_woman_woman_boy_boy🍿popcorn🚀rocket
👩‍👩‍👧‍👧family_woman_woman_girl_girl🍱bento
表情id表情id表情id
🛎️bellhop_bell🥉3rd_place_medal🖨️printer
⌛hourglass⚽soccer⌨️keyboard
⏳hourglass_flowing_sand⚾baseball🖱️computer_mouse
⌚watch🏀basketball🖲️trackball
⏰alarm_clock🏐volleyball💽minidisc
⏱️stopwatch🏈football💾floppy_disk
⏲️timer_clock🏉rugby_football💿cd
🕰️mantelpiece_clock🎾tennis📀dvd
🕛clock12🎳bowling🎥movie_camera
🕧clock1230🏑field_hockey🎞️film_strip
🕐clock1🏒ice_hockey📽️film_projector
🕜clock130🏓ping_pong🎬clapper
🕑clock2🏸badminton📺tv
🕝clock230🥊boxing_glove📷camera
🕒clock3🥋martial_arts_uniform📸camera_flash
🕞clock330🥅goal_net📹video_camera
🕓clock4⛳golf📼vhs
🕟clock430⛸️ice_skate🔍mag
🕔clock5🎣fishing_pole_and_fish🔎mag_right
🕠clock530🎽running_shirt_with_sash🕯️candle
🕕clock6🎿ski💡bulb
🕡clock630🎯dart🔦flashlight
🕖clock7🎱8ball🏮izakaya_lantern
🕢clock730🔮crystal_ball🏮lantern
🕗clock8🎮video_game📔notebook_with_decorative_cover
🕣clock830🕹️joystick📕closed_book
🕘clock9🎰slot_machine📖book
🕤clock930🎲game_die📖open_book
🕙clock10♠️spades📗green_book
🕥clock1030♥️hearts📘blue_book
🕚clock11♦️diamonds📙orange_book
🕦clock1130♣️clubs📚books
🌑new_moon🃏black_joker📓notebook
🌒waxing_crescent_moon🀄mahjong📒ledger
🌓first_quarter_moon🎴flower_playing_cards📃page_with_curl
🌔moon🎭performing_arts📜scroll
🌔waxing_gibbous_moon🖼️framed_picture📄page_facing_up
🌕full_moon🎨art📰newspaper
🌖waning_gibbous_moon👓eyeglasses🗞️newspaper_roll
🌗last_quarter_moon🕶️dark_sunglasses📑bookmark_tabs
🌘waning_crescent_moon👔necktie🔖bookmark
🌙crescent_moon👕shirt🏷️label
🌚new_moon_with_face👕tshirt💰moneybag
🌛first_quarter_moon_with_face👖jeans💴yen
🌜last_quarter_moon_with_face👗dress💵dollar
🌡️thermometer👘kimono💶euro
☀️sunny👙bikini💷pound
🌝full_moon_with_face👚womans_clothes💸money_with_wings
🌞sun_with_face👛purse💳credit_card
⭐star👜handbag💹chart
🌟star2👝pouch✉️envelope
🌠stars🛍️shopping📧email
🌌milky_way🎒school_satchel📧e-mail
☁️cloud👞mans_shoe📨incoming_envelope
⛅partly_sunny👞shoe📩envelope_with_arrow
⛈️cloud_with_lightning_and_rain👟athletic_shoe📤outbox_tray
🌤️sun_behind_small_cloud👠high_heel📥inbox_tray
🌥️sun_behind_large_cloud👡sandal📦package
🌦️sun_behind_rain_cloud👢boot📫mailbox
🌧️cloud_with_rain👑crown📪mailbox_closed
🌨️cloud_with_snow👒womans_hat📬mailbox_with_mail
🌩️cloud_with_lightning🎩tophat📭mailbox_with_no_mail
🌪️tornado🎓mortar_board📮postbox
🌫️fog⛑️rescue_worker_helmet🗳️ballot_box
🌬️wind_face📿prayer_beads✏️pencil2
🌀cyclone💄lipstick✒️black_nib
🌈rainbow💍ring🖋️fountain_pen
🌂closed_umbrella💎gem🖊️pen
☂️open_umbrella🔇mute🖌️paintbrush
☔umbrella🔈speaker🖍️crayon
⛱️parasol_on_ground🔉sound📝memo
⚡zap🔊loud_sound📝pencil
❄️snowflake📢loudspeaker💼briefcase
☃️snowman_with_snow📣mega📁file_folder
⛄snowman📯postal_horn📂open_file_folder
☄️comet🔔bell🗂️card_index_dividers
🔥fire🔕no_bell📅date
💧droplet🎼musical_score📆calendar
🌊ocean🎵musical_note🗒️spiral_notepad
🎃jack_o_lantern🎶notes🗓️spiral_calendar
🎄christmas_tree🎙️studio_microphone📇card_index
🎆fireworks🎚️level_slider📈chart_with_upwards_trend
🎇sparkler🎛️control_knobs📉chart_with_downwards_trend
✨sparkles🎤microphone📊bar_chart
🎈balloon🎧headphones📋clipboard
🎉tada📻radio📌pushpin
🎊confetti_ball🎷saxophone📍round_pushpin
🎋tanabata_tree🎸guitar📎paperclip
🎍bamboo🎹musical_keyboard🖇️paperclips
🎎dolls🎺trumpet📏straight_ruler
🎏flags🎻violin📐triangular_ruler
🎐wind_chime🥁drum✂️scissors
🎑rice_scene📱iphone🗃️card_file_box
🎀ribbon📲calling🗄️file_cabinet
🎁gift☎️phone🗑️wastebasket
🎗️reminder_ribbon☎️telephone🔒lock
🎟️tickets📞telephone_receiver🔓unlock
🎫ticket📟pager🔏lock_with_ink_pen
🎖️medal_military📠fax🔐closed_lock_with_key
🏆trophy🔋battery🔑key
🏅medal_sports🔌electric_plug🗝️old_key
🥇1st_place_medal💻computer
🥈2nd_place_medal🖥️desktop_computer
表情id表情id表情id
🔨hammer🔛on➿loop
⛏️pick🔜soon〽️part_alternation_mark
⚒️hammer_and_pick🔝top✳️eight_spoked_asterisk
🛠️hammer_and_wrench🛐place_of_worship✴️eight_pointed_black_star
🗡️dagger⚛️atom_symbol❇️sparkle
⚔️crossed_swords🕉️om©️copyright
🔫gun✡️star_of_david®️registered
🏹bow_and_arrow☸️wheel_of_dharma™️tm
🛡️shield☯️yin_yang#️⃣hash
🔧wrench✝️latin_cross*️⃣asterisk
🔩nut_and_bolt☦️orthodox_cross0️⃣zero
⚙️gear☪️star_and_crescent1️⃣one
🗜️clamp☮️peace_symbol2️⃣two
⚖️balance_scale🕎menorah3️⃣three
🔗link🔯six_pointed_star4️⃣four
⛓️chains♈aries5️⃣five
⚗️alembic♉taurus6️⃣six
🔬microscope♊gemini7️⃣seven
🔭telescope♋cancer8️⃣eight
📡satellite♌leo9️⃣nine
💉syringe♍virgo🔟keycap_ten
💊pill♎libra🔠capital_abcd
🚪door♏scorpius🔡abcd
🛏️bed♐sagittarius🔣symbols
🛋️couch_and_lamp♑capricorn🔤abc
🚽toilet♒aquarius🅰️a
🚿shower♓pisces🆎ab
🛁bathtub⛎ophiuchus🅱️b
🛒shopping_cart🔀twisted_rightwards_arrows🆑cl
🚬smoking🔁repeat🆒cool
⚰️coffin🔂repeat_one🆓free
⚱️funeral_urn▶️arrow_forwardℹ️information_source
🗿moyai⏩fast_forward🆔id
🏧atm⏭️next_track_buttonⓂ️m
🚮put_litter_in_its_place⏯️play_or_pause_button🆕new
🚰potable_water◀️arrow_backward🆖ng
♿wheelchair⏪rewind🅾️o2
🚹mens⏮️previous_track_button🆗ok
🚺womens🔼arrow_up_small🅿️parking
🚻restroom⏫arrow_double_up🆘sos
🚼baby_symbol🔽arrow_down_small🆙up
🚾wc⏬arrow_double_down🆚vs
🛂passport_control⏸️pause_button🈁koko
🛃customs⏹️stop_button🈂️sa
🛄baggage_claim⏺️record_button🉐ideograph_advantage
🛅left_luggage🎦cinema🉑accept
⚠️warning🔅low_brightness㊗️congratulations
🚸children_crossing🔆high_brightness㊙️secret
⛔no_entry📶signal_strength🈵u6e80
🚫no_entry_sign📳vibration_mode🔴red_circle
🚳no_bicycles📴mobile_phone_off🔵large_blue_circle
🚭no_smoking✖️heavy_multiplication_x⚫black_circle
🚯do_not_litter➕heavy_plus_sign⚪white_circle
🚱non-potable_water➖heavy_minus_sign⬛black_large_square
🚷no_pedestrians➗heavy_division_sign⬜white_large_square
📵no_mobile_phones‼️bangbang◼️black_medium_square
🔞underage⁉️interrobang◻️white_medium_square
☢️radioactive❓question◾black_medium_small_square
☣️biohazard❔grey_question⬜white_medium_small_square
⬆️arrow_up❕grey_exclamation▪️black_small_square
↗️arrow_upper_right❗exclamation▫️white_small_square
➡️arrow_right❗heavy_exclamation_mark🔶large_orange_diamond
↘️arrow_lower_right〰️wavy_dash🔷large_blue_diamond
⬇️arrow_down💱currency_exchange🔸small_orange_diamond
↙️arrow_lower_left💲heavy_dollar_sign🔹small_blue_diamond
⬅️arrow_left♻️recycle🔺small_red_triangle
↖️arrow_upper_left⚜️fleur_de_lis🔻small_red_triangle_down
↕️arrow_up_down🔱trident💠diamond_shape_with_a_dot_inside
↔️left_right_arrow📛name_badge🔘radio_button
↩️leftwards_arrow_with_hook🔰beginner🔳white_square_button
↪️arrow_right_hook⭕o🔲black_square_button
⤴️arrow_heading_up✅white_check_mark🏁checkered_flag
⤵️arrow_heading_down☑️ballot_box_with_check🚩triangular_flag_on_post
🔃arrows_clockwise✔️heavy_check_mark🎌crossed_flags
🔄arrows_counterclockwise❌x🏴black_flag
🔙back❎negative_squared_cross_mark🏳️white_flag
🔚end➰curly_loop🏳️‍🌈rainbow_flag
表情id表情id表情id
🇦🇩andorra🇬🇭ghana🇳🇱netherlands
🇦🇪united_arab_emirates🇬🇮gibraltar🇳🇴norway
🇦🇫afghanistan🇬🇱greenland🇳🇵nepal
🇦🇬antigua_barbuda🇬🇲gambia🇳🇷nauru
🇦🇮anguilla🇬🇳guinea🇳🇺niue
🇦🇱albania🇬🇵guadeloupe🇳🇿new_zealand
🇦🇲armenia🇬🇶equatorial_guinea🇴🇲oman
🇦🇴angola🇬🇷greece🇵🇦panama
🇦🇶antarctica🇬🇸south_georgia_south_sandwich_islands🇵🇪peru
🇦🇷argentina🇬🇹guatemala🇵🇫french_polynesia
🇦🇸american_samoa🇬🇺guam🇵🇬papua_new_guinea
🇦🇹austria🇬🇼guinea_bissau🇵🇭philippines
🇦🇺australia🇬🇾guyana🇵🇰pakistan
🇦🇼aruba🇭🇰hong_kong🇵🇱poland
🇦🇽aland_islands🇭🇳honduras🇵🇲st_pierre_miquelon
🇦🇿azerbaijan🇭🇷croatia🇵🇳pitcairn_islands
🇧🇦bosnia_herzegovina🇭🇹haiti🇵🇷puerto_rico
🇧🇧barbados🇭🇺hungary🇵🇸palestinian_territories
🇧🇩bangladesh🇮🇨canary_islands🇵🇹portugal
🇧🇪belgium🇮🇩indonesia🇵🇼palau
🇧🇫burkina_faso🇮🇪ireland🇵🇾paraguay
🇧🇬bulgaria🇮🇱israel🇶🇦qatar
🇧🇭bahrain🇮🇲isle_of_man🇷🇪reunion
🇧🇮burundi🇮🇳india🇷🇴romania
🇧🇯benin🇮🇴british_indian_ocean_territory🇷🇸serbia
🇧🇱st_barthelemy🇮🇶iraq🇷🇺ru
🇧🇲bermuda🇮🇷iran🇷🇼rwanda
🇧🇳brunei🇮🇸iceland🇸🇦saudi_arabia
🇧🇴bolivia🇮🇹it🇸🇧solomon_islands
🇧🇶caribbean_netherlands🇯🇪jersey🇸🇨seychelles
🇧🇷brazil🇯🇲jamaica🇸🇩sudan
🇧🇸bahamas🇯🇴jordan🇸🇪sweden
🇧🇹bhutan🇯🇵jp🇸🇬singapore
🇧🇼botswana🇰🇪kenya🇸🇭st_helena
🇧🇾belarus🇰🇬kyrgyzstan🇸🇮slovenia
🇧🇿belize🇰🇭cambodia🇸🇰slovakia
🇨🇦canada🇰🇮kiribati🇸🇱sierra_leone
🇨🇨cocos_islands🇰🇲comoros🇸🇲san_marino
🇨🇩congo_kinshasa🇰🇳st_kitts_nevis🇸🇳senegal
🇨🇫central_african_republic🇰🇵north_korea🇸🇴somalia
🇨🇬congo_brazzaville🇰🇷kr🇸🇷suriname
🇨🇭switzerland🇰🇼kuwait🇸🇸south_sudan
🇨🇮cote_divoire🇰🇾cayman_islands🇸🇹sao_tome_principe
🇨🇰cook_islands🇰🇿kazakhstan🇸🇻el_salvador
🇨🇱chile🇱🇦laos🇸🇽sint_maarten
🇨🇲cameroon🇱🇧lebanon🇸🇾syria
🇨🇳cn🇱🇨st_lucia🇸🇿swaziland
🇨🇴colombia🇱🇮liechtenstein🇹🇨turks_caicos_islands
🇨🇷costa_rica🇱🇰sri_lanka🇹🇩chad
🇨🇺cuba🇱🇷liberia🇹🇫french_southern_territories
🇨🇻cape_verde🇱🇸lesotho🇹🇬togo
🇨🇼curacao🇱🇹lithuania🇹🇭thailand
🇨🇽christmas_island🇱🇺luxembourg🇹🇯tajikistan
🇨🇾cyprus🇱🇻latvia🇹🇰tokelau
🇨🇿czech_republic🇱🇾libya🇹🇱timor_leste
🇩🇪de🇲🇦morocco🇹🇲turkmenistan
🇩🇯djibouti🇲🇨monaco🇹🇳tunisia
🇩🇰denmark🇲🇩moldova🇹🇴tonga
🇩🇲dominica🇲🇪montenegro🇹🇷tr
🇩🇴dominican_republic🇲🇬madagascar🇹🇹trinidad_tobago
🇩🇿algeria🇲🇭marshall_islands🇹🇻tuvalu
🇪🇨ecuador🇲🇰macedonia🇹🇼taiwan
🇪🇪estonia🇲🇱mali🇹🇿tanzania
🇪🇬egypt🇲🇲myanmar🇺🇦ukraine
🇪🇭western_sahara🇲🇳mongolia🇺🇬uganda
🇪🇷eritrea🇲🇴macau🇺🇸us
🇪🇸es🇲🇵northern_mariana_islands🇺🇾uruguay
🇪🇹ethiopia🇲🇶martinique🇺🇿uzbekistan
🇪🇺eu🇲🇷mauritania🇻🇦vatican_city
🇪🇺european_union🇲🇸montserrat🇻🇨st_vincent_grenadines
🇫🇮finland🇲🇹malta🇻🇪venezuela
🇫🇯fiji🇲🇺mauritius🇻🇬british_virgin_islands
🇫🇰falkland_islands🇲🇻maldives🇻🇮us_virgin_islands
🇫🇲micronesia🇲🇼malawi🇻🇳vietnam
🇫🇴faroe_islands🇲🇽mexico🇻🇺vanuatu
🇫🇷fr🇲🇾malaysia🇼🇫wallis_futuna
🇬🇦gabon🇲🇿mozambique🇼🇸samoa
🇬🇧gb🇳🇦namibia🇽🇰kosovo
🇬🇧uk🇳🇨new_caledonia🇾🇪yemen
🇬🇩grenada🇳🇪niger🇾🇹mayotte
🇬🇪georgia🇳🇫norfolk_island🇿🇦south_africa
🇬🇫french_guiana🇳🇬nigeria🇿🇲zambia
🇬🇬guernsey🇳🇮nicaragua

上传GitHub

1
2
3
4
5
yarn deploy

或

npm deploy
]]> 知识笔记 GitHub VuePress https://meuicat.com/posts/1816d029.html#disqus_thread Hexo跳过指定文件渲染 https://meuicat.com/posts/8e7cd139.html https://meuicat.com/posts/8e7cd139.html Fri, 06 May 2022 03:57:55 GMT 渲染时排除某些文件或目录文件夹等 前言

这两天做的一个 stars页面 预览渲染时，产生了错误

Hexo预览渲染时会对默认 /source/ 里的所有文件页面应用主题模板渲染
但有一些自己的前端作品或demo页我们不希望经过渲染（因为会报错）
而是保持完全原来的样子

  • 添加的模块仍在主题内，主题头部信息依然存在，仅仅是在特定区域进行渲染（适合添加 about 页面）
  • 完全页面渲染，在主题内点击对应链接跳转到一个完全崭新的页面（我需要的）

Hexo渲染逻辑

source 文件夹下存放了待被转化的 markdown 文件
在执行 hexo g 命令时，source 目录下的文件将被转化为 HTML 文件

解决方法

在查看Hexo的_config.yml配置文件的时候发现有这么一个东西

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# Directory

source_dir: source
# 资源文件夹，这个文件夹用来存放内容
public_dir: public
# 公共文件夹，这个文件夹用于存放生成的站点文件
tag_dir: tags
# 标签文件夹
archive_dir: archives
# 归档文件夹
category_dir: categories
# 分类文件夹
code_dir: downloads/code
# Include code 文件夹
assets_dir: assets
# 资源文件夹
i18n_dir: :lang
# 国际化（i18n）文件夹
skip_render:
# 跳过指定文件的渲染，您可使用 glob 表达式来匹配路径

其中的 skip_render: 则可以帮助我们跳过指定的文件或文件夹内的内容渲染

  • 排除单个文件
1
2
skip_render: stars/**
  # 排除 stars 文件夹内所有的文件
1
2
skip_render: *.html
  # 排除 source 文件夹下所有后缀为 html 的文件，但是不会排除子目录如stars及其子目录中的1.html文件
  • 排除多个文件
1
2
3
4
5
6
7
skip_render:
  - '1.html'
  # 排除 source 文件夹下所有的 1.html 文件，但是不会排除子目录如 stars 及其子目录中的 1.html 文件
  - 'stars/all.json'
  # 排除 stars 文件夹内的 all.json 文件
  - 'stars/*.html'
  # 排除 stars 文件夹内所有的 html后缀文件
]]> 经验分享 Hexo https://meuicat.com/posts/8e7cd139.html#disqus_thread 百度贴吧每日自动签到 https://meuicat.com/posts/d0130820.html https://meuicat.com/posts/d0130820.html Wed, 04 May 2022 06:44:23 GMT 百度贴吧自动签到程序，无需自己购买服务器，安全可靠且方便

230710 更新：修改对环境变量的判断；添加电子邮件支持；增加actions手动触发按钮，并将Python修改为3.10版本


TiebaSign-贴吧签到助手

使用

自动化执行任务: 百度贴吧每日签到
自动化运行时间: 北京时间 凌晨02点 以及 下午18点（可修改 时间差为+8）

❶ Fork 仓库

❷ 仓库 → Settings → Secrets → New repository secret, 添加Secrets变量如下:

NameValue
BDUSS百度贴吧BDUSS, 打开浏览器，登录 百度贴吧, 打开控制台 → 应用 → Cookie，复制 BDUSS 的值

❸ 邮箱通知配置 仓库 → Settings → Secrets → New repository secret, 添加Secrets变量如下:

NameValue
HOSTSMTP服务器的主机地址
FROM发件人的邮箱地址
TO收件人的邮箱地址，可以同时发送给多个收件人，用”#”进行分隔
AUTH发件人的邮箱授权码或密码

❹ 仓库 → Actions, 检查Workflows并启用

签到预览

如何获取Cookie

百度贴吧BDUSS, 打开浏览器，登录 百度贴吧, 打开控制台 → 应用 → Cookie，复制 BDUSS 的值

DevTools截图:

GitHub地址

TiebaSign - 项目仓库
自动化执行任务: 百度贴吧每日签到 自动化运行时间: 北京时间 凌晨02点 以及 下午18点（可修改 时间差为+8）
]]> 我的项目 GitHub 源码 自动签到 https://meuicat.com/posts/d0130820.html#disqus_thread 重构记录 - 1 https://meuicat.com/posts/9dabcf59.html https://meuicat.com/posts/9dabcf59.html Fri, 29 Apr 2022 17:28:45 GMT 从零重构本站所有内容；Hexo自用搭建记录~

📖 本教程更新于 2023 年 05 月 18 日

📚 文档目录

🚀 搭建教程 | 1 - 📑 前置教程 | 2 - 🎈 主题调整 | 3 - ✨ 魔改教程 | 4 - 🐈 重构自用数据记录

前言

本教程仅仅是作为个人纪录
如若有兴趣动手按照本教程搭建自己的博客

搭建前，请提前浏览一遍本教程，和重要要点！

前期准备

安装Git

官网链接：https://git-scm.com/
阿里镜像源（下载速度快）：https://registry.npmmirror.com/binary.html?path=git-for-windows/

安装时，建议不要修改安装路径，否则会导致后面的批处理脚本出现问题

安装Node.js

官网链接：https://nodejs.org/zh-cn/

Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本
使用 Node.js 官方安装程序时，请确保勾选 Add to PATH 选项（默认已勾选）

更换npm镜像源

为了解决速度慢的问题
建议给Node.js换一个镜像源，这里更换的是淘宝的镜像源，代码如下：

1
2
3
4
5
# 淘宝镜像源：
npm config set registry https://registry.npm.taobao.org

# npm官方源： (安装一些package 不容易报错)
npm config set registry https://registry.npmjs.org/

安装Hexo

官网链接：https://hexo.io/

1
npm install hexo-cli -g

配置Git用户和ssh密钥

注：如需上传至GitHub或Gitee部署的，需要进行此步骤，其他可跳过

  • 在任意空白地方右键，选择 Git Bash Here 输入下面的命令
1
git config --global user.name "你的用户名"
1
git config --global user.email "你的邮箱"
1
ssh-keygen -t rsa -C "邮箱地址"

引号里对应填入自己的东西
接着在第三个命令后，会出现Enter开头的英文提示，这时候按三次 回车键 即可

配置SSH

SSH文件夹的默认存储位置是 C:\Users\电脑用户名.ssh

在ssh文件夹里，会显示 id_rsa 和 id_rsa.pub 两个文件
id_rsa是私钥，id_rsa.pub是公钥

将 id_rsa.pub 里的内容复制到 GitHub 的 Settings的SSH处

测试连接

完成上一步后可通过下面的这条命令测试是否于GitHub接通了

1
ssh -T git@github.com

Hexo搭建教程

初始化

  • 在你想存放的地方新建一个空文件夹，作为博客的源文件部署地

  • 在此文件夹内右键选择 Git Bash Here 输入下面的命令 初始化Hexo

1
hexo init

注：往后所有的操作都基于此文件夹
如果出现了什么问题无法解决，就只能删除
所以修改东西前注意做好备份

接下来就会在此目录下自动生成一些文件，初始化完成

本地调试

在Hexo根目录内右键选择 Git Bash Here 输入下面的命令
即可通过本地默认的4000端口访问进行预览调试

1
hexo s -debug

Butterfly主题教程

Butterfly主题官网：https://butterfly.js.org/
Butterfly项目地址：https://github.com/jerryc127/hexo-theme-butterfly
更多Hexo主题：https://hexo.io/themes/

主题安装

在Hexo根目录内右键选择 Git Bash Here 输入下面的命令

1
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

接下来就会在此目录下自动下载主题文件到 themes 目录内

配置主题

在 Hexo根目录 内创建一个文件 _config.butterfly.yml
并把主题目录内 _config.yml 里面的内容 复制 到刚刚创建的 _config.butterfly.yml 里面去

注意: 复制的是主题内的 _config.yml，而不是 Hexo根目录 的 _config.yml

往后 _config.butterfly.yml 用来配置主题的文件
而 _config.yml 是用来配置Hexo框架等信息内容

启用主题

在Hexo根目录内打开 _config.yml
找到配置项 theme，修改为 theme: butterfly

在Hexo根目录内右键选择 Git Bash Here 输入下面的命令
即可通过本地默认的4000端口访问进行预览

1
hexo s -debug

上传网站

新建仓库

优点：
可以绑定自己的域名，也可以强制开启HPPTS
总体容量无限制，单个仓库推荐最大1G

缺点：

GitHub的服务器在国外，有时可能会访问不到、过慢或需要挂梯子
私有库需要付费使用
源代码完全公开，安全性略差

  • 打开 Github 官网并登录，点击右下角头像旁边的加号
  • 选择 New Repository（新建仓库）

  • 1、如果作为网站使用，仓库名称格式必须为：你的Github用户名.github.io

  • 2、选择 Public（公开）

  • 再点击 Create Repository 按钮完成创建

优点：
Gitee的服务器在国内，在国内访问的速度会很快
仓库出现问题，可快速联系管理员处理
私有库是免费的

缺点：
绑定域名属于付费内容
仓库、内容容易误封
涉及政治内容容易误封

  • 打开Gitee官网并登录，点击右下角头像旁边的加号
  • 选择新建仓库

  • 如果作为网站使用，仓库名称需要和你的用户名一样
  • Gitee Pages没有限制，开源和私有都能使用
  • 点击创建按钮完成创建

安装插件

在Hexo根目录内右键选择 Git Bash Here 输入下面的命令
即可安装Git部署插件

1
npm install --save hexo-deployer-git

_config.yml配置

  • 将下方左侧图的 url： 的链接改成：你的GitHub用户名.github.io
  • 再找到下方右侧图的 repo: 把SSH地址粘贴进去


  • 将下方左侧图的 url： 的链接改成：你的gitee用户名.gitee.io
  • 再找到下方右侧图的 repo: 把SSH地址粘贴进去


部署网站

在Hexo根目录内右键选择 Git Bash Here 安装顺序输入以下命令

  • 清除缓存
1
hexo clean
  • 生成静态文件
1
hexo g
  • 部署到远端
1
hexo d

报错案例

若遇到报错，请一个一个排查
更多报错案例请移步：Butterfly

本地预览出错

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

没有 pug 以及 stylus 的渲染器

解决方法：

  • 在Hexo根目录内右键选择 Git Bash Here 输入下面的命令
1
2
3
4
5
npm install hexo-renderer-pug hexo-renderer-stylus --save

或

yarn add hexo-renderer-pug hexo-renderer-stylus

push后出错/缺失/无效

本地可以正常运行，但是push上去后出错/缺失/无效

解决方法：

  • 清理浏览器缓存

  • 如果上方方法无效，请确认上传时是否有运行 hexo clean

]]> 经验分享 Butterfly主题 Hexo https://meuicat.com/posts/9dabcf59.html#disqus_thread GitHub Desktop提交报错 https://meuicat.com/posts/b28549e9.html https://meuicat.com/posts/b28549e9.html Wed, 27 Apr 2022 05:50:55 GMT “fatal：unable to access ‘https://github.com/xxx/xxx.git” 报错案例

解决步骤

  • 菜单栏 - Repository(仓库) - Repository settings(仓库设置)


  • 当然了，实在不知道怎么改，就在GitHub项目里复制SSH链接即可

]]> 经验分享 GitHub https://meuicat.com/posts/b28549e9.html#disqus_thread 快速批量处理重命名 https://meuicat.com/posts/8b10c25.html https://meuicat.com/posts/8b10c25.html Fri, 22 Apr 2022 08:22:05 GMT 三行命令，给大量的文件批量重命名~ 前言

上一年年末，接触到广播剧，给大家爬取各种资源
但爬完之后的文件名是各种编码，刚开始是一个一个重命名

后来复制粘贴，直到前段时间，才学到只用三行代码就可以快速重命名文件名以及后缀

步骤

  • 打开文件存放目录 - 右键新建文本TXT - 将下方代码放入后 - 保存为bat格式
1
dir *.* /b >excels.xls

  • 双击保存好的bat文件后，文件的存放目录会多出一个excel表格，双击打开（打开开会显示错误，选择"是"，即可）

  • 将B1填入需要修改的文件名，C1填入需要修改的后缀，D1填入下方代码，即可
1
="ren "&A1&" "&B1&""&C1

  • 紧接着在文件存放目录 - 右键新建文本TXT - 将复制的D表格里的内容粘贴到文本里

  • 选择另存为 - 将后缀改为bat - 编码选择为：ANSI

当然也可以直接在我分享的 “AA.bat文件” 里直接编辑运行 点击下载

  • 之后直接双击运行保存好的bat文件，即可自动重命名

下载地址

阿里云盘下载：https://www.aliyundrive.com/s/9So7xf1x6Kk

]]> 知识笔记 命令 Win10 https://meuicat.com/posts/8b10c25.html#disqus_thread Git连接仓库常用命令 https://meuicat.com/posts/e7cfb425.html https://meuicat.com/posts/e7cfb425.html Fri, 22 Apr 2022 05:21:45 GMT 记录本地仓库同步到GitHub或Gitee常用的Git命令 Git

Git 是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目

我用的是2.34.0版本

下载Git

同步命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
git init
# 在当前目录新建一个Git代码库

git add .
# 添加当前目录的所有文件到暂存区

git commit -m [message]
# 提交暂存区到仓库区；[message] = 信息内容
# 列如：git commit -m 新提交A1

git remote add origin [Clone]
# 指定仓库；[Clone] = git链接
# 列如：git remote add origin git@github.com:yife68/iCat-Pic.git

git push --set-upstream origin master
# 同步源码至远程仓库

常用命令库

新建代码库

1
2
3
4
5
6
7
8
9
10
git init
# 在当前目录新建一个Git代码库

git init [project-name]
# 新建一个目录，将其初始化为Git代码库；[project-name] = 目录名称
# 列如：git init blog

git clone [url]
# 下载一个项目和它的整个代码历史；[url] = HTTPS/SSH链接
# 列如：git clone https://github.com/yife68/Dragon.git

配置

1
2
3
4
5
6
7
8
9
10
11
git config --list
# 显示当前的Git配置
# Git的设置文件为.gitconfig，它可以在用户主目录下（全局配置），也可以在项目目录下（项目配置）

git config -e [--global]
# 编辑Git配置文件

git config [--global] user.name "[name]"
git config [--global] user.email "[email address]"
# 设置提交代码时的用户信息
# [name] = 用户名；[email address] = 邮箱

增减文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
git add [file1] [file2] ...
# 添加指定文件到暂存区；[file1] = 文件名
# 列如：git add 1.txt 2.png 3.html

git add [dir]
# 添加指定目录到暂存区，包括子目录；

git add .
# 添加当前目录的所有文件到暂存区

git add -p
# 添加每个变化前，都会要求确认
# 对于同一个文件的多处变化，可以实现分次提交

git rm [file1] [file2] ...
# 删除工作区文件，并且将这次删除放入暂存区；[file1] = 文件名
# 列如：git rm 1.txt 2.png 3.html

git rm --cached [file]
# 停止追踪指定文件，但该文件会保留在工作区

git mv [file-original] [file-renamed]
# 改名文件，并且将这个改名放入暂存区

代码提交

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
git commit -m [message]
# 提交暂存区到仓库区

git commit [file1] [file2] ... -m [message]
# 提交暂存区的指定文件到仓库区

git commit -a
# 提交工作区自上次commit之后的变化，直接到仓库区

git commit -v
# 提交时显示所有diff信息 

git commit --amend -m [message]
# 使用一次新的commit，替代上一次提交 
# 如果代码没有任何新变化，则用来改写上一次commit的提交信息

git commit --amend [file1] [file2] ...
# 重做上一次commit，并包括指定文件的新变化

分支

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
git branch
# 列出所有本地分支

git branch -r
# 列出所有远程分支

git branch -a
# 列出所有本地分支和远程分支

git branch [branch-name]
# 新建一个分支，但依然停留在当前分支
 
git checkout -b [branch]
# 新建一个分支，并切换到该分支

git branch [branch] [commit]
# 新建一个分支，指向指定commit

git branch --track [branch] [remote-branch]
# 新建一个分支，与指定的远程分支建立追踪关系

git checkout [branch-name]
# 切换到指定分支，并更新工作区
 
git checkout -
# 切换到上一个分支

git branch --set-upstream [branch] [remote-branch]
# 建立追踪关系，在现有分支与指定的远程分支之间

git merge [branch]
# 合并指定分支到当前分支

git cherry-pick [commit]
# 选择一个commit，合并进当前分支

git branch -d [branch-name]
# 删除分支

git push origin --delete [branch-name]
git branch -dr [remote/branch]
# 删除远程分支

标签

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
git tag
# 列出所有tag

git tag [tag]
# 新建一个tag在当前commit

git tag [tag] [commit]
# 新建一个tag在指定commit

git tag -d [tag]
# 删除本地tag

git push origin :refs/tags/[tagName]
# 删除远程tag
 
git show [tag]
# 查看tag信息
 
git push [remote] [tag]
# 提交指定tag

git push [remote] --tags
# 提交所有tag

git checkout -b [branch] [tag]
# 新建一个分支，指向某个tag

查看信息

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
git status
# 显示有变更的文件

git log
# 显示当前分支的版本历史

git log --stat
# 显示commit历史，以及每次commit发生变更的文件

git log -S [keyword]
# 搜索提交历史，根据关键词
 
git log [tag] HEAD --pretty=format:%s
# 显示某个commit之后的所有变动，每个commit占据一行

git log [tag] HEAD --grep feature
# 显示某个commit之后的所有变动，其"提交说明"必须符合搜索条件

git log --follow [file] 
git whatchanged [file]
# 显示某个文件的版本历史，包括文件改名

git log -p [file]
# 显示指定文件相关的每一次diff

git log -5 --pretty --oneline
# 显示过去5次提交

git shortlog -sn
# 显示所有提交过的用户，按提交次数排序

git blame [file]
# 显示指定文件是什么人在什么时间修改过

git diff
# 显示暂存区和工作区的差异

git diff --cached [file]
# 显示暂存区和上一个commit的差异

git diff HEAD
# 显示工作区与当前分支最新commit之间的差异

git diff [first-branch]...[second-branch]
# 显示两次提交之间的差异

git diff --shortstat "@{0 day ago}"
# 显示今天你写了多少行代码

git show [commit]
# 显示某次提交的元数据和内容变化

git show --name-only [commit]
# 显示某次提交发生变化的文件

git show [commit]:[filename]
# 显示某次提交时，某个文件的内容

git reflog
# 显示当前分支的最近几次提交

远程同步

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
git fetch [remote]
# 下载远程仓库的所有变动

git remote -v
# 显示所有远程仓库

git remote show [remote]
# 显示某个远程仓库的信息

git remote add [shortname] [url]
# 增加一个新的远程仓库，并命名

git pull [remote] [branch]
# 取回远程仓库的变化，并与本地分支合并

git push [remote] [branch]
# 上传本地指定分支到远程仓库

git push [remote] --force
# 强行推送当前分支到远程仓库，即使有冲突

git push [remote] --all
# 推送所有分支到远程仓库

撤销

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
git checkout [file]
# 恢复暂存区的指定文件到工作区

git checkout [commit] [file]
# 恢复某个commit的指定文件到暂存区和工作区

git checkout .
# 恢复暂存区的所有文件到工作区

git reset [file]
# 重置暂存区的指定文件，与上一次commit保持一致，但工作区不变

git reset --hard
# 重置暂存区与工作区，与上一次commit保持一致

git reset [commit]
# 重置当前分支的指针为指定commit，同时重置暂存区，但工作区不变

git reset --hard [commit]
# 重置当前分支的HEAD为指定commit，同时重置暂存区和工作区，与指定commit一致

git reset --keep [commit]
# 重置当前HEAD为指定commit，但保持暂存区和工作区不变
 
git revert [commit]
# 新建一个commit，用来撤销指定commit 
# 后者的所有变化都将被前者抵消，并且应用到当前分支

git stash 
git stash pop
# 暂时将未提交的变化移除，稍后再移入
]]> 知识笔记 命令 https://meuicat.com/posts/e7cfb425.html#disqus_thread Ubuntu处理deb命令 https://meuicat.com/posts/22a58d51.html https://meuicat.com/posts/22a58d51.html Thu, 21 Apr 2022 15:30:11 GMT 乌班图终端处理越狱插件deb解包、修改、打包处理命令 终端命令行
  • 进入root模式
1
sudo su
  • 创建tmp文件夹
1
mkdir tmp
  • 创建tmp下的DEBIAN文件夹
1
mkdir tmp/DEBIAN
  • 解包程序文件到tmp
1
dpkg-deb -x 1.deb tmp/

用法：dpkg-deb -x 【指定要操作的”deb”插件的全名(列如：1.deb)】 【解压到指定程序文件的目录(列如：tmp/)】

  • 解包控制信息到tmp/DEBIAN
1
dpkg-deb -e 1.deb tmp/DEBIAN/

用法：dpkg-deb -e 【指定要操作的”deb”插件的全名(列如：1.deb)】 【解压到指定控制信息的目录(列如：tmp/DEBIAN/)】

  • 用gedit修改control文件
1
sudo gedit /home/yife/桌面/deb/tmp/DEBIAN/control

用法：sudo gedit 【文件目录(列如：/home/yife/桌面/deb/tmp/DEBIAN/control】

  • 打包成deb文件
1
dpkg -b tmp/ 2.deb

用法：dpkg -b 【已修改好的目录(列如：tmp/)】 【需要命名的deb名称(列如：2.deb)】


更多拓展命令

  • 查询deb包中的文件内容
1
dpkg-deb -c 2.deb

用法：dpkg-deb -c 【指定要操作的”deb”插件的全名(列如：2.deb)】

用于打包完成后查看新deb包中的文件内容

  • 删除tmp文件夹（需要进入root）
1
rm -rf tmp

用法：dpkg-deb -c 【指定要操作的工作文件夹(列如：tmp)】

用于打包完后删除工作文件夹tmp命令

  • 修改维护者的脚本权限为755
1
chmod 755 -R /home/yife/桌面/deb/tmp

用法：chmod 【文件权限(列如：755)】 -R 【需要修改的目录(列如：/home/yife/桌面/deb/tmp)】

用于打包时提示权限不足时，修改文件夹操作权限

  • 修改文件夹属性
1
chown -R 501:staff tmp/

用法：chown -R 【赋予所有者权限:群组(列如：501:staff)】 【需要修改的目录(列如：/tmp)】

用于改变/tmp的所有者为501，群组为staff

]]> 知识笔记 命令 Ubuntu https://meuicat.com/posts/22a58d51.html#disqus_thread 掘金自动签到并挖矿 https://meuicat.com/posts/d8dcabd5.html https://meuicat.com/posts/d8dcabd5.html Thu, 21 Apr 2022 14:52:51 GMT 稀土掘金自动签到程序和自动挖矿，无需自己购买服务器，安全可靠且方便

Juejin Auto-稀土掘金助手

掘金自动签到、抽奖、沾喜气、海底掘金游戏

使用

自动化执行任务: 掘金每日签到, 沾喜气, 免费抽奖, 海底掘金游戏, 最后将结果发送邮件报告通知
自动化运行时间: 北京时间上午06:30（可修改 时间差为+8）

❶ Fork 仓库

❷ 仓库 → Settings → Secrets → New repository secret, 添加Secrets变量如下:

NameValue
COOKIE掘金网站Cookie, 打开浏览器，登录 掘金, 打开控制台DevTools → Network，复制 cookie, 掘金Cookie有效期约1个月需定期更新.
EMAIL_USER发件人邮箱地址(需要开启 SMTP)
EMAIL_PASS发件人邮箱密码(SMTP密码)
EMAIL_TO订阅人邮箱地址(收件人). 如需多人订阅使用 , 分割, 例如: a@qq.com, b@163.com

❸ 仓库 → Actions, 检查Workflows并启用

预览

掘金每日签到海底掘金游戏
掘金每日签到海底掘金游戏

报错案例

如何获取Cookie

掘金网站Cookie, 打开浏览器，登录 掘金, 打开控制台DevTools(快捷键F12) → Network，复制 cookie, 掘金Cookie有效期约1个月需定期更新

DevTools截图:

授权海底掘金

运行自动化后通知订阅人 玩家未授权, 请前往掘金授权!, 说明您是新玩家从始至终未进行海底掘金游戏, 需要先进行游戏授权

授权步骤: 登陆 掘金 → 每日签到 → 海底掘金挑战赛(点击进入游戏, 点击授权, 最好再随意玩一局). 后续就可以由掘金助手自动处理

或点击👇这个海报帮您直达海底掘金挑战赛

海底掘金挑战赛

GitHub地址

项目直达链接：https://github.com/yife68/juejin-auto/

下载地址

蓝奏云下载：https://meuicat.lanzoul.com/b0119wtsb

蓝奏云访问码：icat

]]> 我的项目 GitHub 源码 自动签到 稀土掘金 https://meuicat.com/posts/d8dcabd5.html#disqus_thread https & http都是些什么？ https://meuicat.com/posts/c81f1026.html https://meuicat.com/posts/c81f1026.html Wed, 20 Apr 2022 09:08:56 GMT 随着网络技术的不断发展,http传输协议已经渐渐被https取代了,主要原因是https超文本传输协议更安全,更私密 前言

超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息
HTTP协议以明文方式发送内容，不提供任何方式的数据加密，如果攻击者截取了Web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息
因此，HTTP协议不适合传输一些敏感信息，比如：信用卡号、密码等支付信息

为了解决HTTP协议的这一缺陷，需要使用另一种协议：
安全套接字层超文本传输协议HTTPS，为了数据传输的安全，HTTPS在HTTP的基础上加入了SSL协议 ，SSL依靠证书来验证服务器的身份
并为浏览器和服务器之间的通信加密。并且防止钓鱼和加密。防止钓鱼通过网站的证书，网站必须有CA证书 ，证书类似于一个解密的签名
另外是加密，加密需要一个密钥交换算法，双方通过交换后的密钥加解密

基本作用

HTTP：是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从WWW服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。

HTTPS：是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。

HTTPS协议的主要作用可以分为两种：一种是建立一个信息安全通道，来保证数据传输的安全；另一种就是确认网站的真实性。

区别

  • https协议需要到ca申请证书，一般免费证书很少，需要交费
  • http是超文本传输协议，信息是明文传输，https 则是具有安全性的ssl加密传输协议
  • http和https使用的是完全不同的连接方式用的端口也不一样，前者是80，后者是443
  • http的连接很简单，是无状态的。HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全

HTTPS工作原理

（1）客户使用https的URL访问Web服务器，要求与Web服务器建立SSL连接

（2）Web服务器收到客户端请求后，会将网站的证书信息（证书中包含公钥）传送一份给客户端

（3）客户端的浏览器与Web服务器开始协商SSL连接的安全等级，也就是信息加密的等级

（4）客户端的浏览器根据双方同意的安全等级，建立会话密钥，然后利用网站的公钥将会话密钥加密，并传送给网站

（5）Web服务器利用自己的私钥解密出会话密钥

（6）Web服务器利用会话密钥加密与客户端之间的通信

HTTPS优缺点

尽管HTTPS并非绝对安全，掌握根证书的机构、掌握加密算法的组织同样可以进行中间人形式的攻击，但HTTPS仍是现行架构下最安全的解决方案，主要有以下几个好处：

（1）使用HTTPS协议可认证用户和服务器，确保数据发送到正确的客户机和服务器；

（2）HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全，可防止数据在传输过程中不被窃取、改变，确保数据的完整性

（3）HTTPS是现行架构下最安全的解决方案，虽然不是绝对安全，但它大幅增加了中间人攻击的成本

（4）谷歌曾在2014年8月份调整搜索引擎算法，并称“比起同等HTTP网站，采用HTTPS加密的网站在搜索结果中的排名将会更高”

虽然说HTTPS有很大的优势，但其相对来说，还是存在不足之处的：

（1）HTTPS协议握手阶段比较费时，会使页面的加载时间延长近50%，增加10%到20%的耗电；

（2）HTTPS连接缓存不如HTTP高效，会增加数据开销和功耗，甚至已有的安全措施也会因此而受到影响；

（3）SSL证书需要钱，功能越强大的证书费用越高，个人网站、小网站没有必要一般不会用

（4）SSL证书通常需要绑定IP，不能在同一IP上绑定多个域名，IPv4资源不可能支撑这个消耗

（5）HTTPS协议的加密范围也比较有限，在黑客攻击、拒绝服务攻击、服务器劫持等方面几乎起不到什么作用。最关键的，SSL证书的信用链体系并不安全，特别是在某些国家可以控制CA根证书的情况下，中间人攻击一样可行

状态码请求

下面描述了每个状态代码，包括它可以遵循的方法的描述以及响应中所需的任何元信息

信息:1xx

此类状态代码表示临时响应，仅由状态行和可选标题组成，并以空行终止。此类状态代码没有必需的标头
由于 HTTP/1.0 没有定义任何 1xx 状态代码，服务器不得向 HTTP/1.0 客户端发送 1xx 响应，除非在实验条件下

客户端必须准备好在常规响应之前接受一个或多个 1xx 状态响应，即使客户端不期望 100（继续）状态消息。意外的 1xx 状态响应可能会被用户代理忽略

代理必须转发 1xx 响应，除非代理与其客户端之间的连接已关闭，或者除非代理本身请求生成 1xx 响应
（例如，如果一个代理在转发请求时添加了Expect: 100-continue 字段，则不需要转发相应的 100 响应）

100 - 继续

客户端应该继续它的请求
此临时响应用于通知客户端请求的初始部分已收到，但尚未被服务器拒绝
客户端应该继续发送请求的剩余部分，或者，如果请求已经完成，忽略这个响应
服务器必须在请求完成后发送最终响应

101 - 交换协议

服务器理解并愿意遵守客户端的请求，通过升级消息头字段更改此连接上使用的应用程序协议
服务器将在终止 101 响应的空行之后立即将协议切换到由响应的升级标头字段定义的协议

协议应该仅在这样做有利时才进行切换
例如:切换到新版本的 HTTP 比旧版本更有优势，切换到实时同步协议在交付使用此类功能的资源时可能更有利

成功:2xx

此类状态码表示客户端的请求已成功接收、理解和接受

200 - 正常

请求已成功
响应返回的信息取决于请求中使用的方法

请求说明
GET响应中发送与请求资源对应的实体
HEAD请求资源对应的实体头域在响应中发送，不带任何消息体
POST描述或包含操作结果的实体
TRACE包含终端服务器接收到的请求消息的实体

201 - 创建

请求已完成并导致创建新资源
新创建的资源可以由响应实体中返回的 URI 引用，其中最具体的 URI 由 Location 头字段给出
响应应该包含一个包含资源特性和位置列表的实体，用户或用户代理可以从中选择最合适的一个
实体格式由 Content-Type 头字段中给出的媒体类型指定。源服务器必须在返回 201 状态码之前创建资源
如果动作不能立即执行，服务器应该响应 202 (Accepted) 响应

一个 201 响应可能包含一个 ETag 响应头字段，指示刚刚创建的请求变体的实体标签的当前值

202 - 接受

请求已被接受进行处理，但处理尚未完成
该请求最终可能会或可能不会被执行，因为在实际进行处理时可能会被禁止。没有从诸如此类的异步操作重新发送状态代码的工具

202 响应是故意不置可否的
它的目的是允许服务器接受对某个其他进程（可能是一个每天只运行一次的面向批处理的进程）的请求，而无需用户代理与服务器的连接持续到该进程完成
与此响应一起返回的实体应该包括请求当前状态的指示以及指向状态监视器的指针或用户期望请求何时被满足的一些估计

203 - 非权威信息

实体头中返回的元信息不是源服务器提供的确定集，而是从本地或第三方副本收集的
呈现的集合可以是原始版本的子集或超集

例如，包含有关资源的本地注释信息可能会导致原始服务器已知的元信息的超集。不需要使用此响应代码，仅当响应为 200 (OK) 时才适用。

204 - 无内容

服务器已完成请求但不需要返回实体主体，并且可能想要返回更新的元信息
响应可以包含实体头形式的新的或更新的元信息，如果存在，应该与请求的变体相关联

如果客户端是一个用户代理，它不应该改变导致请求被发送的文档视图
此响应主要是为了允许输入操作，而不会导致用户代理的活动文档视图发生变化，尽管任何新的或更新的元信息都应该应用于当前在用户代理的活动视图中的文档

204 响应不能包含消息体，因此总是由头字段之后的第一个空行终止

205 - 重置内容

服务器已经完成了请求，用户代理应该重置导致请求被发送的文档视图
此响应主要旨在允许通过用户输入进行操作的输入，然后清除给出输入的表单，以便用户可以轻松启动另一个输入操作

响应不得包含实体

206 - 部分内容

服务器已完成对资源的部分 GET 请求
请求必须包含一个 Range 头域指示所需的范围，并且可以包含一个 If-Range 头域以使请求有条件

响应必须包含以下头字段：

1
2
3
4
5
6
7
8
9
10
11
12
- Content-Range 标头字段指示
    此响应中包含的范围，或多部分/字节范围
    Content-Type 包括每个部分的 Content-Range 字段。如果一个
    Content-Length 头域存在于响应中，它的
    值必须与实际传输的 OCTET 数量相匹配
    邮件正文。
- 日期
- ETag 和/或 Content-Location，如果标头已经发送
    在对同一请求的 200 响应中
- 过期、缓存控制和/或变化，如果字段值可能
    与之前针对相同的任何响应中发送的不同
    变体

如果 206 响应是使用强缓存验证器的 If-Range 请求的结果，则响应不应包含其他实体头
如果响应是使用弱验证器的 If-Range 请求的结果，则响应不得包含其他实体头；这可以防止缓存的实体主体和更新的标头之间出现不一致
否则，响应必须包括所有实体头，这些实体头将与对同一请求的 200（OK）响应一起返回

如果 ETag 或 Last-Modified 标头不完全匹配，则缓存不得将 206 响应与其他先前缓存的内容组合在一起

不支持 Range 和 Content-Range 标头的缓存不得缓存 **206（部分）**响应

重定向:3xx

此类状态代码表示用户代理需要采取进一步的行动来满足请求
当且仅当第二个请求中使用的方法是 GET 或 HEAD 时，所需的操作可以由用户代理执行，而无需与用户交互

客户端应该检测无限重定向循环，因为此类循环会为每个重定向生成网络流量

本规范的先前版本建议使用最多五个重定向
内容开发者应该意识到可能有客户实现了这样一个固定的局限性

300 - 多项选择

请求的资源对应于一组表示中的任何一个，每个表示都有自己的特定位置，并且正在提供代理驱动的协商信息，以便用户（或用户代理）可以选择首选表示并重定向其请求到那个位置

除非是 HEAD 请求，否则响应应该包含一个包含资源特性和位置列表的实体，用户或用户代理可以从中选择最合适的一个
实体格式由 Content-Type 头字段中给出的媒体类型指定。取决于格式和功能

用户代理，可以自动执行最合适的选择。但是，本规范没有为这种自动选择定义任何标准

如果服务器有首选的表示形式，它应该在 Location 字段中包含该表示形式的特定 URI；用户代理可以使用 Location 字段值进行自动重定向
除非另有说明，否则此响应是可缓存的

300 - 永久移动

被请求的资源已经被分配了一个新的永久 URI，以后对该资源的任何引用都应该使用返回的 URI 之一
在可能的情况下，具有链接编辑功能的客户端应该自动将请求 URI 的引用重新链接到服务器返回的一个或多个新引用
除非另有说明，否则此响应是可缓存的

新的永久 URI 应该由响应中的 Location 字段给出
除非请求方法是 HEAD，否则响应的实体应该包含一个简短的超文本注释，并带有指向新 URI 的超链接

如果收到 301 状态代码以响应除 GET 或 HEAD 之外的请求，则用户代理不得自动重定向请求，除非用户可以确认，因为这可能会更改发出请求的条件

当自动重定向 POST 请求后
接收 301 状态代码，一些现有的 HTTP/1.0 用户代理
将错误地将其更改为 GET 请求

302 - 发现

请求的资源临时驻留在不同的 URI 下
由于有时可能会更改重定向，因此客户端应该继续使用 Request-URI 来处理未来的请求
如果由 Cache-Control 或 Expires 标头字段指示，则此响应仅可缓存

临时 URI 应该由响应中的 Location 字段给出
除非请求方法是 HEAD，否则响应的实体应该包含一个简短的超文本注释，并带有指向新 URI 的超链接

如果收到 302 状态码以响应 GET 或 HEAD 以外的请求，则用户代理不得自动重定向请求，除非用户可以确认，因为这可能会改变发出请求的条件

RFC 1945 和 RFC 2068 指定不允许客户端更改重定向请求的方法
然而，大多数现有的用户代理实现将 302 视为 303响应，对 Location 字段值执行 GET，不管原始请求方法状态码 303 和 307
有为希望明确说明哪些服务器添加了期待客户的反应

303 - 见其他

对请求的响应可以在不同的 URI 下找到，并且应该使用该资源的 GET 方法检索
此方法的存在主要是为了允许 POST 激活脚本的输出将用户代理重定向到选定的资源
新的 URI 不是原始请求资源的替代引用。303 响应不能被缓存，但对第二个（重定向）请求的响应可能是可缓存的

不同的 URI 应该由响应中的 Location 字段给出。除非请求方法是 HEAD，否则响应的实体应该包含一个简短的超文本注释，并带有指向新 URI 的超链接

许多 HTTP/1.1 之前的用户代理不理解 303地位
当与此类客户端的互操作性是一个问题时，可以使用 302 状态码来代替，因为大多数用户代理都会做出反应到 302 响应，如此处针对 303 所述

304 - 未修改

如果客户端已经执行了一个有条件的 GET 请求并且允许访问，但是文档没有被修改，服务器应该用这个状态码来响应
304 响应不能包含消息体，因此总是由头字段后的第一个空行终止

如果无时钟源服务器遵守这些规则，并且代理和客户端将他们自己的日期添加到任何没有收到的响应中，缓存将正确运行

如果条件 GET 使用强缓存验证器，则响应不应包含其他实体头
否则（即，条件 GET 使用弱验证器），响应不得包含其他实体头；这可以防止缓存的实体主体和更新的标头之间出现不一致

如果 304 响应指示当前未缓存的实体，则缓存必须忽略响应并在没有条件的情况下重复请求

如果缓存使用收到的 304 响应来更新缓存条目，则缓存必须更新条目以反映响应中给出的任何新字段值

305 - 使用代理

请求的资源必须通过 Location 字段给出的代理访问
Location 字段给出了代理的 URI。接收者应该通过代理重复这个单一的请求
305 响应只能由源服务器生成

RFC 2068 不清楚 305 旨在重定向单个请求，并且仅由源服务器生成
不是遵守这些限制会产生重大的安全后果

306 - 无

306 状态码在之前版本的规范中使用过，不再使用，保留该码

307 - 临时重定向

请求的资源临时驻留在不同的 URI 下
由于有时可能会更改重定向，因此客户端应该继续使用 Request-URI 来处理未来的请求
如果由 Cache-Control 或 Expires 标头字段指示，则此响应仅可缓存

临时 URI 应该由响应中的 Location 字段给出
除非请求方法是 HEAD，否则响应的实体应该包含一个带有指向新 URI 的超链接的短超文本注释，因为许多 HTTP/1.1 之前的用户代理不理解 307 状态
因此，注释应该包含用户在新 URI 上重复原始请求所需的信息

如果收到 307 状态代码以响应 GET 或 HEAD 以外的请求，则用户代理不得自动重定向请求，除非用户确认该请求，因为这可能会更改发出请求的条件

客户端错误:4xx

4xx 类状态代码用于客户端似乎出错的情况
除了响应 HEAD 请求时，服务器应该包含一个实体，其中包含对错误情况的解释，以及它是暂时的还是永久的情况
这些状态代码适用于任何请求方法。用户代理应该向用户显示任何包含的实体

如果客户端正在发送数据，使用 TCP 的服务器实现应该小心确保客户端在服务器关闭输入连接之前确认收到包含响应的数据包
如果客户端在关闭后继续向服务器发送数据，则服务器的 TCP 堆栈将向客户端发送一个重置数据包，这可能会在 HTTP 应用程序读取和解释客户端未确认的输入缓冲区之前擦除它们

400 - 错误请求

由于语法格式错误，服务器无法理解该请求
客户端不应该在没有修改的情况下重复请求

401 - 未授权

该请求需要用户身份验证
响应必须包含一个 WWW-Authenticate 头域，其中包含适用于所请求资源的质询
客户端可以使用合适的 Authorization 头字段重复请求。如果请求已包含授权凭据，则 401 响应指示对这些凭据的授权已被拒绝
如果 401 响应包含与先前响应相同的质询，并且用户代理已经至少尝试过一次身份验证，那么应该向用户呈现响应中给出的实体，因为该实体可能包含相关的诊断信息
HTTP 访问身份验证在“HTTP 身份验证：基本和摘要式访问身份验证” 中进行了解释

402 - 登入错误

此代码保留供将来使用

403 - 禁止

服务器理解请求，但拒绝满足它
授权无济于事，不应重复该请求
如果请求方法不是 HEAD 并且服务器希望公开请求未完成的原因，它应该在实体中描述拒绝的原因
如果服务器不想让客户端可以使用此信息，则可以使用状态代码 404（未找到）来代替

404 - 未找到

服务器未找到任何与请求 URI 匹配的内容
没有说明这种情况是暂时的还是永久性的
如果服务器通过某些内部可配置机制知道旧资源永久不可用且没有转发地址，则应使用 410（消失）状态代码
当服务器不想透露请求被拒绝的确切原因时，或者当没有其他响应适用时，通常使用此状态代码

405 - 方法不允许

对于由 Request-URI 标识的资源，不允许在 Request-Line 中指定的方法
响应必须包含一个 Allow 头，其中包含所请求资源的有效方法列表

406 - 不可接受

请求标识的资源只能根据请求中发送的 accept 头生成具有不可接受的内容特征的响应实体

除非是 HEAD 请求，否则响应应该包含一个实体，其中包含可用实体特征和位置的列表，用户或用户代理可以从中选择最合适的一个
实体格式由 Content-Type 头字段中给出的媒体类型指定。根据用户代理的格式和能力，可以自动执行最合适的选择
但是，本规范没有为这种自动选择定义任何标准

允许 HTTP/1.1 服务器返回响应根据发送的接受标头是不可接受的要求
在某些情况下，这甚至可能比发送406响应。鼓励用户代理检查确定它是否可接受的传入响应

如果响应可能是不可接受的，用户代理应该暂时停止接收更多数据并询问用户对进一步操作的决定

407 - 需要代理认证

此代码类似于 401（未授权），但表示客户端必须首先向代理进行身份验证
代理必须返回一个 Proxy-Authenticate 头字段，其中包含适用于所请求资源的代理的质询
客户端可以使用合适的 Proxy-Authorization 头域重复请求
HTTP 访问身份验证在“HTTP 身份验证：基本和摘要式访问身份验证”

408 - 请求超时

客户端没有在服务器准备等待的时间内产生请求。客户端可以在以后的任何时间不加修改地重复请求

409 - 冲突

由于与资源的当前状态冲突，无法完成请求
仅在预期用户可能能够解决冲突并重新提交请求的情况下才允许使用此代码。响应主体应该包括足够的

供用户识别冲突来源的信息。理想情况下，响应实体应包含足够的信息供用户或用户代理解决问题；然而，这可能是不可能的，也不是必需的

响应 PUT 请求时最有可能发生冲突
例如：如果正在使用版本控制并且被 PUT 的实体包含对资源的更改，该更改与之前（第三方）请求所做的更改发生冲突，则服务器可能会使用 409 响应来指示它无法完成请求.在这种情况下，响应实体可能会以响应 Content-Type 定义的格式包含两个版本之间差异的列表

410 - 不见了

请求的资源在服务器上不再可用，并且不知道转发地址
预计这种情况将被视为永久性的
具有链接编辑功能的客户端应该在用户批准后删除对 Request-URI 的引用
如果服务器不知道或无法确定条件是否永久，则应使用状态代码 404（未找到）代替
除非另有说明，否则此响应是可缓存的

410 响应的主要目的是通过通知接收者资源故意不可用以及服务器所有者希望删除到该资源的远程链接来协助 Web 维护任务
这种事件对于限时促销服务和属于不再在服务器站点工作的个人的资源来说很常见。没有必要将所有永久不可用的资源标记为“消失”或将标记保留任何时间长度——这由服务器所有者自行决定

411 - 所需长度

服务器拒绝接受没有定义内容长度的请求
如果客户端在请求消息中添加了包含消息正文长度的有效 Content-Length 头字段，则客户端可以重复该请求

412 - 先决条件失败

当在服务器上测试时，在一个或多个请求头字段中给出的前提条件评估为假
此响应代码允许客户端在当前资源元信息（头字段数据）上设置前提条件，从而防止将请求的方法应用于预期资源之外的资源

413 - 请求实体太大

服务器拒绝处理请求，因为请求实体大于服务器愿意或能够处理的
服务器可以关闭连接以防止客户端继续请求

如果条件是临时的，服务器应该包含一个 Retry-After 头域来指示它是临时的，并且在什么时间之后客户端可以再试一次

414 - 请求 URI 太长

服务器拒绝为请求提供服务，因为 Request-URI 比服务器愿意解释的要长
这种罕见的情况只可能发生在客户端不正确地将 POST 请求转换为带有长查询信息的 GET 请求时，当客户端下降到重定向的 URI“黑洞”（例如：指向的重定向 URI 前缀）本身的后缀），或者当服务器受到客户端的攻击时，客户端试图利用某些服务器中存在的安全漏洞来读取或操作请求 URI 的固定长度缓冲区

415 - 不支持的媒体类型

服务器拒绝为请求提供服务，因为请求实体的格式不为请求方法的请求资源所支持

416 - 请求范围不满足

如果请求包含 Range request-header 字段，并且该字段中的任何范围说明符值都不与所选资源的当前范围重叠，并且请求没有包括一个 If-Range 请求头字段
（对于字节范围，这意味着所有字节范围规范值的第一个字节位置大于所选资源的当前长度）

当为字节范围请求返回此状态代码时，响应应该包含一个 Content-Range 实体头字段，指定所选资源的当前长度
此响应不得使用 multipart/byteranges 内容类型

417 - 期望失败

该服务器无法满足在 Expect 请求标头字段中给出的期望，或者，如果服务器是代理，则该服务器有明确的证据表明该请求无法被下一跳服务器满足

服务器错误:5xx

以数字“5”开头的响应状态代码表示服务器知道它出错或无法执行请求的情况
除了响应 HEAD 请求时，服务器应该包含一个实体，其中包含对错误情况的解释，以及它是暂时的还是永久的情况

用户代理应该向用户显示任何包含的实体
这些响应代码适用于任何请求方法

500 - 内部服务器错误

服务器遇到意外情况，无法完成请求

501 - 未实现

服务器不支持完成请求所需的功能
当服务器无法识别请求方法并且无法为任何资源支持它时，这是适当的响应

502 - 坏网关

服务器在充当网关或代理时，从它访问的上游服务器收到无效响应，以尝试满足请求

503 - 服务不可用

由于服务器暂时过载或维护，服务器当前无法处理请求
这意味着这是一个暂时的情况，将在一些延迟后得到缓解

如果已知，延迟的长度可以在 Retry-After 头中指示
如果没有给出 Retry-After，客户端应该像处理 500 响应一样处理响应

503 状态码的存在并不意味着服务器在过载时必须使用它
些服务器可能希望简单地拒绝连接

504 - 网关超时

该服务器在充当网关或代理时，没有收到来自 URI（例如：HTTP、FTP、LDAP）指定的上游服务器或它在尝试完成时需要访问的其他辅助服务器（例如：DNS）的及时响应请求

实现者注意：一些部署的代理是已知的当 DNS 查找超时时返回 400 或 500

505 - 不支持 HTTP版本

服务器不支持或拒绝支持请求消息中使用的 HTTP 协议版本
服务器表明它无法或不愿意使用与客户端相同的主要版本完成请求，如上所述 ，除了此错误消息。响应应该包含一个实体，描述为什么不支持该版本以及该服务器支持哪些其他协议

]]> 知识笔记 状态码 https://meuicat.com/posts/c81f1026.html#disqus_thread 一个简洁的橙色调个人简介 https://meuicat.com/posts/52cff17a.html https://meuicat.com/posts/52cff17a.html Wed, 20 Apr 2022 02:34:17 GMT 一款简洁的橙色调个人简介

周末闲来无事，翻了翻网盘，找到了个简洁个人介绍页（当时就下载看了看…）

橙色调个人简介

17年还是18年挺流行的一款简介单页，有自适应

挺适合用于个人展示；戳戳下方瞅一眼~

演示地址：传送门

预览图

PC端



移动端

下载地址

蓝奏云下载：https://meuicat.lanzoul.com/iQrm2ywsxuh

蓝奏云访问码：icat

]]> 资源分享 源码 https://meuicat.com/posts/52cff17a.html#disqus_thread 我的猫以前也是流浪猫 https://meuicat.com/posts/c1116311.html https://meuicat.com/posts/c1116311.html Wed, 20 Apr 2022 01:31:56 GMT 致 卡布 - 奇诺 刚买完早餐回住所时，碰到了一直挺可爱的小狸花
我们同时停下动作，相互看着对方

它在垃圾堆仿佛在寻找些什么
在寻找可以饱腹的食物

他的样子，使我将记忆快速回溯
想起我家的那两只小笨猫还未出生在这个世上，并且他们的妈妈第一次看我亦是如此

第一次喂橘妈，我给的是罐头
最后一次喂橘妈，而是用一盒猫粮换走了它的两个孩子

再后来，回去见到时，仅剩橘妈重新孤苦伶仃的生活了
我不知道它是否还在寻找着它不翼而飞的两个孩子
也不知道它孩子无一幸免的离开她时的心情

但我想，这是我用文字所表达不出来的

它们母女俩也是橘猫
可能是没有养过那么可爱的幼猫
没有养过在一个多月大的时候抚摸幼猫咪的小脑袋
以至于这两天在女朋友工作的科技园门口看到的幼猫崽格外的喜欢

依稀记得前段时间他们母女两在嬉戏玩闹
但这两日却只看到小橘子一个

它跳上了一块黝黑的软纸板，在磨爪子
它自己会去逗小狗，惹人可爱
它会把一张X型桌腿当作猫爬架，上蹿下跳

但它不是很会找到能让自己填饱肚子的食物
也不是很会判断人们是否会伤害诱捕它

它很喜欢小孩子，很亲很亲

]]> 生活随笔 封の唠叨 橘猫 流浪猫 https://meuicat.com/posts/c1116311.html#disqus_thread 召唤神龙源码 https://meuicat.com/posts/b9922a3c.html https://meuicat.com/posts/b9922a3c.html Fri, 07 Jan 2022 06:21:04 GMT 2022年火爆的召唤神龙，还没过关就来试试这个版本！ 2022年元旦起风靡整个抖音以及朋友圈的一款小游戏召唤神龙
休闲吞噬成长类手机游戏，召唤神龙提供了最轻松的吞噬玩法以及多种不同形态的转换机制
在召唤神龙游戏中，灵活的控制小蝌蚪游动，避免被其他强大生物所吞噬，成功进化为一条神龙，体验更多精彩的游戏玩法和欢乐时光

前言

此资源分为原版、简单版、正常版以及无敌版四个版本，上传即可使用

传送门

iCat原版游玩地址：召唤神龙
iCat无敌版版游玩地址：召唤神龙

预览图


下载地址

蓝奏云下载：https://meuicat.lanzoul.com/b01167kzg

蓝奏云访问码：icat

]]> 资源分享 源码 https://meuicat.com/posts/b9922a3c.html#disqus_thread 布柒糖FM 最新指北 https://meuicat.com/posts/b16cb167.html https://meuicat.com/posts/b16cb167.html Tue, 04 Jan 2022 08:35:25 GMT 最新广播剧合集列表~

注意！注意！注意！

此文截稿前，以下所有内容生效于 2023年03月26日



公众号

认证公众号

  • iCat - 布柒糖FM 旗下只有三个公众号
卡布是只猫
山鸟与鱼不同路
奇诺是只猫
山林不向四季起誓，荣枯随缘
美式是只猫
你本无意过堂风，偏偏孤倨引山洪
卡布是只猫奇诺是只猫美式是只猫
ID：iCat-KaBuID：iCat-QiNuoID：iCat-MeiShi

号内推文

微信公众号更新类型推文数量更新频率
卡布是只猫小说 & 盐选三篇推文有资源就更
奇诺是只猫广播剧 & 漫画单篇推文日更
美式是只猫GAY & 韩BL单篇推文有资源就更

关于群

为了防止失联，现已设 QQ频道 和 微信群 两种方式以备个各种不测情况发生

QQ频道

  • 可通过搜索频道号：wp9970u7a8 加入频道
    （进入频道后记得要领取身份组，才可以发言水积分）

  • 亦或加入QQ中转群，通过群公告的二维码加入频道
    （注：进入QQ频道后记得退出中转群哦~ 为后面来加群的友友们让个位~ ）

QQ中转1群QQ中转2群
群号：434873253群号：937726395

微信群

  • 添加博主微信：y59851 ，发送 “ 入群 “ ，即可
    （因微信进群的二维码人满200后，需要手动拉人）

当然啦，群内可聊各种话题，每位喵友都可以进来唠唠嗑喔~
祝每位喵友都可以找到同频灵魂的伙伴

资源获取

  • 各资源云盘链接都在 布柒糖FM 站内发布
iCat - 布柒糖FM
广播剧 | 漫画 | 韩BL | 小说 | 知乎盐选 等

提取码

  • 在各文章最下面会有广播剧的云盘链接
  • 提取码则是需要在 对应的公众号 内 回复对应的关键词 ，即可

资源失效 & 补录

方式一：
在失效的文章底下留言，博主在后台看到会进行补录处理喔~

方式二：
在微信群内艾特博主并告知失效资源名，博主知晓会进行回复并补录处理~

留名找番剧

  • 请前往 布柒糖FM留言板 下方留言
布柒糖FM - 留言板
如果有什么 想听的、想看的 或者 发现了本站的失效资源，欢迎留言告知😊

布柒糖FM留言板

]]> 我的项目 广播剧 https://meuicat.com/posts/b16cb167.html#disqus_thread 初学写个了油猴脚本 https://meuicat.com/posts/50452ee6.html https://meuicat.com/posts/50452ee6.html Sat, 01 Jan 2022 14:28:03 GMT 油猴脚本（Tampermonkey）是一个非常流行的浏览器扩展，它可以运行由广大社区编写的扩展脚本，来实现各式各样的功能，常见的去广告、修改样式文件、甚至是下载视频。今天我们就来看看如何编写自己的油猴脚本。当然为了运行油猴脚本，你应该在浏览器中安装油猴插件 前言

突然听到了一首周董的歌，想在 5sing 上下载一首歌
然而，我好几年前的账号密码都忘得一干二净了，又不想为了下载一首歌重新注册，于是就只能通过官方的API来下载了
为了一劳永逸，我决定研究一下油猴脚本，用于实现在歌曲页面里能够绕过登录并且一键下载的功能

什么是油猴脚本？

油猴，英文（Tampermonkey），又名Greasemonkey，是一款非常流行的浏览器扩展，Chrome和Firefox均支持，其原理有点像Windows编程里的hook，它的可自定义性非常高，它可以运行由广大社区编写的扩展脚本，来实现各式各样的功能，常见的去广告、修改样式文件、甚至是下载视频，能给用户带来无限可能

新建一个油猴脚本，默认内容如下，无需过多配置，填写好UserScript就可以开始编写了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        http://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Your code here...
})();

流程思维导图

第一次接触写油猴，虽然没系统学过JS，但也还有一丢丢的JS基础，得亏天下编程语言万变不离其宗，凭着“语感”一边摸索一边“借鉴”，居然也完成了

大致的流程思维图，具体看代码

获取歌曲ID及类型

ID和歌曲类型可以在歌曲页面网址上直接获得

例如：http://5sing.kugou.com/bz/88538.html
bz就是类型，表示此歌曲是伴奏歌曲，同理yc则是原唱歌曲，88538就是歌曲ID了

1
2
var id = window.location.href.split('/')[4].split(".")[0];
var type = window.location.href.split('/')[3].split(".")[0];

获取歌曲下载链接

向接口http://service.5sing.kugou.com/song/getsongurl?&songid=[id]&songtype=[bz]发送GET请求，其中的两个参数songid和songtype的值，上面已讲，不再赘述
成功后会返回一组Json，里边有各种音质、歌曲MD5等等信息，反序列化一下提取对应音质的下载链接即可

1
2
3
4
5
6
7
8
9
10
11
var url = 'http://service.5sing.kugou.com/song/getsongurl?&songid=' + id + '&songtype='+type;
GM_xmlhttpRequest({
    method: "GET",
    url: url,
    onload: function (res) {
        if (res.status == 200) {
            var text = res.responseText;
            var ret = jQuery.parseJSON(text)
        }
    }
}

添加下载事件

1
2
3
4
5
var oDivNode = document.getElementById("func_Down");
oDivNode.addEventListener("click",function(){
    down_music(music_url,id+".mp3");
    $('.new_login_bg').remove();
});

问题难点

由于我不知道的某个原因，对于视频、音频、文本等等文件直链访问并不会触发下载，而是直接在浏览器中预览，这就很烦，尝试了几个方法，貌似只能创建blob对象来下载

可能对前端大佬来说这不是什么难点，但对我这种半桶水的来说可能就难一点了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function down_music(url, name) {
    let that = this
    let oReq = new XMLHttpRequest();
    oReq.open("GET", url, true);
    oReq.responseType = "blob";
    //oReq.withCredentials = true;//如果跨域
    oReq.onload = function (oEvent) {
        let content = oReq.response;
        let elink = document.createElement('a');
        elink.download = name;
        elink.style.display = 'none';
        let blob = new Blob([content])
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click();
        document.body.removeChild(elink);
    };
    oReq.send();
}

最终效果

出现跨域提醒时，点击总是允许此域名即可，以后使用时就不会弹出了

下载使用演示

]]> 知识笔记 Win10 油猴脚本 JSHint https://meuicat.com/posts/50452ee6.html#disqus_thread 幽灵404页面 https://meuicat.com/posts/ca0468bb.html https://meuicat.com/posts/ca0468bb.html Tue, 21 Dec 2021 10:21:03 GMT 整理了下移动硬盘，翻出了一个幽灵404页面的单页 生病请假在家，硬是睡不着；闲来无事整理了下移动硬盘
翻出了个幽灵404单页

有浮动效果；小眼睛还会跟着鼠标动，挺可爱的一小东西

预览图

源码展示

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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>iCat - 幽灵404页面</title>
<script type="text/javascript" src="yan.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box">
  <div class="box__ghost">
    <div class="symbol"></div>
    <div class="symbol"></div>
    <div class="symbol"></div>
    <div class="symbol"></div>
    <div class="symbol"></div>
    <div class="symbol"></div>
    
    <div class="box__ghost-container">
      <div class="box__ghost-eyes">
        <div class="box__eye-left"></div>
        <div class="box__eye-right"></div>
      </div>
      <div class="box__ghost-bottom">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="box__ghost-shadow"></div>
  </div>
  
  <div class="box__description">
    <div class="box__description-container">
      <div class="box__description-title">~ 404 ~</div>
      <div class="box__description-text">找不到你要的内容哦~</div>
    </div>
    
    <a href="https://meuicat.com/" class="box__button">返回</a>
    
  </div>
  
</div>
<script>
//原作地址：https://dribbble.com/shots/3913847-404-page
//based on https://dribbble.com/shots/3913847-404-page
var pageX = $(document).width();
var pageY = $(document).height();
var mouseY=0;
var mouseX=0;
$(document).mousemove(function( event ) {
  //verticalAxis
  mouseY = event.pageY;
  yAxis = (pageY/2-mouseY)/pageY*300; 
  //horizontalAxis
  mouseX = event.pageX / -pageX;
  xAxis = -mouseX * 100 - 100;
  $('.box__ghost-eyes').css({ 'transform': 'translate('+ xAxis +'%,-'+ yAxis +'%)' }); 
  //console.log('X: ' + xAxis);
});</script>
</body>
</html>

原作地址：https://dribbble.com/shots/3913847-404-page

下载地址

蓝奏云下载：https://meuicat.lanzoul.com/iLUcMxu5n2d

]]> 经验分享 源码 https://meuicat.com/posts/ca0468bb.html#disqus_thread PC游戏 · 植物大战僵尸 https://meuicat.com/posts/702696f5.html https://meuicat.com/posts/702696f5.html Fri, 19 Nov 2021 11:31:28 GMT 《植物大战僵尸：年度版》免安装v1.2.0.1073绿色中文版-附修改器 植物大战僵尸

《植物大战僵尸》是由美国宝开游戏公司(PopCap Games)开发的一款益智策略类单机游戏，于2009年5月5日发售

玩家通过武装多种植物切换不同的功能，快速有效地把僵尸阻挡在入侵的道路上。不同的敌人，不同的玩法构成五种不同的游戏模式，加之黑夜、浓雾以及泳池之类的障碍增加了游戏挑战性

该作在PC上同时有普通版、年度版、长城版、西游版等多个版本

预览图

下载地址

蓝奏云下载：https://meuicat.lanzoui.com/iX087wlpi9a

]]> 资源分享 Win10 修改器 https://meuicat.com/posts/702696f5.html#disqus_thread 语言包 · 越狱篇 https://meuicat.com/posts/92a598fe.html https://meuicat.com/posts/92a598fe.html Wed, 10 Nov 2021 05:22:17 GMT 越狱后使用微信语言包 前言

见过1秒语音，哔哩吧啦一堆话嘛
见过经典台词用微信语言发出来嘛
李云龙？广西表妹？广西佬？乔碧萝？海绵宝宝又或者那些经典台词？

准备工具

  • WeChat微信助手
  • Filza File Manager
  • 语言包

蓝奏云下载：https://meuicat.lanzoui.com/iCE1Mwcbqlc

插件设置

  • 打开微信，进入我-设置-WeChat
  • 找到语音功能，将 语言包 功能打开即可

放置文件

  • 打开 Filza，点击下方 ☆
  • 选择 App管理器，找到微信
  • 依次按照 Library - Preferences 路径点击
  • 进入Preferences后如若没有 Voice 文件夹，点击右上角新建即可（要注意大写V开头）
  • 将语言包里 ZiDingYi.plist 文件复制到Voice文件夹里即可

]]> 经验分享 插件 iOS14 越狱 https://meuicat.com/posts/92a598fe.html#disqus_thread 砸壳多开 · 越狱篇 https://meuicat.com/posts/7abb93cf.html https://meuicat.com/posts/7abb93cf.html Tue, 09 Nov 2021 03:03:50 GMT 多开下载需要收费？为什么不自己砸壳，简单方便~ 这是什么？

首先对一个iOS App进行一系列操作，比如多开软件，逆向分析，都得先进行砸壳，因为AppStore中下载的App是加壳的，即加密过的，砸壳的过程就是解密的过程
通俗易懂就是，提取App的安装包

准备工具

操作案例所使用的插件：

  • DumpDecrypter砸壳工具
  • AppSync Unified安装未签名IPA
  • Filza File Manager

砸壳步骤

  • 打开 砸壳工具 ，找到设置，把里面的选项全部打开
  • 回到首页，顶上的搜索栏搜索你想要砸壳的软件

  • 点击后，软件会跳转到该软件，这时候不要动，等待跳转回砸壳工具
  • 耐心等待，软件操作完后，会提示 前往Filza查看，点击即可

多开步骤

  • 点击ipa安装包，选择解压（过程中会卡着不动，这是在解压中）
  • 点开解压好后的文件夹，点进去，到 WeChat.app 目录里找到 lnfo.plist 文件
  • 点入进去修改 CFBundleDisplayName 以及 CFBundleldentifier 项

  • 修改完后点击右上角 存储 即可
  • 回到最初的文件夹，长按选择 压缩为ZIP文件
  • 等待压缩完成后，依旧是长按选择 重命名，将后缀改成 ipa即可
  • 点击修改完成的安装包即可进行安装多开了~

报错问题

砸壳无跳转

遇到砸壳时遇到跳转到应用后无继续运行
解决方法：

  • 卸载砸壳工具，使用别的源提供的砸壳工具即可；或者使用与我一样的也可以

多开无网络

解决方法：

  • Cydia商店里装个 连个锤子 插件即可

无消息提醒

解决方法1：

  • 打开软件保持后台运行即可

解决方法2：

  • Cydia商店里装个 多开推送 等插件即可

打开多开闪退

解决方法：

  • 使用Fly等屏蔽插件，勾选多开应用的 禁止注入 即可
]]> 经验分享 插件 iOS14 越狱 https://meuicat.com/posts/7abb93cf.html#disqus_thread HuiRan Cursors https://meuicat.com/posts/8141c261.html https://meuicat.com/posts/8141c261.html Wed, 03 Nov 2021 10:05:10 GMT 一款非常好看而且简约的鼠标指针

一款用了挺久的鼠标指针，简约风，有蓝有粉，男女适宜，来盘一盘~

预览图


安装方法

  • 下载好的文件，复制到 C:\Windows\Cursors

  • 回到桌面，按键盘 Win + I 打开设置，然后依次点击 个性化 - 主题 - 鼠标光标

  • 接着点击浏览选择相应的鼠标指针样式
  • 最后点击另存为取个名字点击确认并应用，就完成了

下载地址

阿里云盘下载：https://www.aliyundrive.com/s/rL97mh2bqx8

]]> 资源分享 魔改美化 Win10 https://meuicat.com/posts/8141c261.html#disqus_thread 手动关闭Win10自动更新 https://meuicat.com/posts/feccac97.html https://meuicat.com/posts/feccac97.html Tue, 02 Nov 2021 02:27:25 GMT 手动彻底关闭Windows10自动更新功能

或许你想停留在Win10的某一个版本，在系统设置里面推迟系统更新后，过段时间还是会自动更新
今天就来彻底关闭Win10系统的更新功能

禁用 Windows Update

  • 按键盘上的 Win+R 键进入运行
  • 在运行输入框中输入 services.msc 打开服务，并回车键确定

  • 在服务中找到 Windows Update 一项，双击打开

  • 将启动类型修改至 禁用，再将该服务 停止，点击应用
  • 再到 恢复 选项卡中，将第一次失败和第二次失败以及后续失败三个栏目改为 无操作

关闭自动更新计划

  • 按键盘上的 Win+R 键进入运行
  • 在运行输入框中输入 taskschd.msc 打开服务，并回车键确定

  • 在任务计划程序的界面中，找到目录任务计划程序库 -Microsoft -Windows -WindowsUpdate ，右键，选择禁用即可

组策略关闭Windows更新

  • 按键盘上的 Win+R 键进入运行
  • 在运行输入框中输入 gpedit.msc 打开服务，并回车键确定

  • 在组策略编辑器找到目录计算机配置 -管理模板 -Windows组件 -Windows更新 ，找到右侧栏中的 配置自动更新 双击进入

  • 在配置自动更新界面中，选 已禁用，并且确定

  • 最后，删除C盘目录下的 Windows10Upgrade 文件夹，并删除 C:\Windows 目录下的 UpdateAssistant 和 UpdateAssistantV2 文件夹，如若没有该文件夹，则不操作
]]> 经验分享 优化 Win10 https://meuicat.com/posts/feccac97.html#disqus_thread iPhone XR 完美越狱 成功实例 https://meuicat.com/posts/b9f33961.html https://meuicat.com/posts/b9f33961.html Sun, 31 Oct 2021 07:14:57 GMT 完美越狱iOS14再现！

完美越狱
最大的优势，激活一次，就是越狱状态，重启后设备不丢失越狱环境，随意开关机；
简单，没那么多麻烦

不完美越狱
重启后设备恢复到未越狱环境，需要使用工具重新激活，才能进入越狱环境
不完美越狱，需要考虑越狱工具安装和持续可用性

越狱支持

本次越狱支持的处理器：A12 至 A14
以及越狱支持的系统版本：14.3 至 14.5.1

准备工具

所有软件安装路径不建议修改

  • 待越狱设备（iPhone或iPad等）

  • 苹果数据线（USB-Lightning）

  • Windows10以上系统（我使用的是Win10）

    也可以使用Mac等电脑（系统10.14.4+以上）

    注意：Win7系统需要装黑苹果虚拟机

  • 点击 Next 下一步
  • 安装路径不改，继续点击 Next 进行下一步
  • 继续点击 Next 进行下一步
  • 安装完成后，点击 Close 即可

  • 电脑下载 iCloud
    官网地址：https://www.icloud.com/

    阿里云盘下载：https://www.aliyundrive.com/s/Upfbe3nRmxK

  • 下载好iCloud安装包，双击打开

  • 勾选 我接受许可协议中的条款，并点击 安装

  • 安装期间可能会弹出系统提示，点击 确认 或者 是 即可

  • 等待安装完成后点击 结束

  • 接着会弹出个重启提示框，点击 是 重启即可

  • 找到 iCloud 并打开，登录你的 苹果id，点击 登录
  • 将 iCloud云盘 勾选，其他两项 取消勾选，点击 应用 即可

安装iCloud后，必须要重启

越狱步骤

实例设备：iPhone XR A12
实例系统：iOS14.4 美版

登录软件 ①

  • 电脑打开爱思，手机使用数据线连接到电脑，并信任
  • 电脑打开iCloud并登录；同理，iTunes打开并登录

如手机无弹出信任窗口，请检查是否已连接，若无则打开爱思再次插机即可

设置WiFi同步 ②

  • 手机以及电脑连上同一个网络（完成越狱前不可切换或断开）
  • 打开iTunes，找到 通过Wi-Fi与此iPhone同步 选项，打钩，并点右下角 同步

安装AltStore ③

  • 电脑找到AltServer并右键以管理员身份运行
  • 电脑右下角找到Alt，左键选择 lnstall AltStore,再选择你的设备
  • 接下来会弹出登录的提示框，登录你手机的ID，再点lnstall
  • 第一次登录会有验证码，输入即可；再出现弹框点击 确认 即可

导入自签 ④

  • AltStore 安装到手机后，打开 Safari浏览器，找到从 unc0ver 官网下载的最新版本
  • 右上角找到ipa安装包，点击打开；分享方式导入 AltStore
  • 导入后就会开始自签，然后会弹出登录界面，登录你的id即可
  • 自签过程弹窗询问，是否安装 untether，点击 Install Untethered Jailbreak 安装

运行Fugu14 ⑤

  • 安装完成后，点击 Open Placeholder，就会第一次打开 Fugu14
  • 点击 Setup Fugu14 运行，运行结束弹窗 Setup Done 点击OK

二次运行Fugu14 ⑥

  • 切换后台返回 AltStore，AltStore 会继续自动操作，等待进度条走完，然后点击底部 Open Patchholder 按钮
  • 这时候会第二次打开Fugu14，中间的按钮显示为 Install Untether，点击这个按钮进行安装
  • 耐心等待安装，安装完成会弹窗Reboot required，点击 Reboot now 重启设备

注意：
有部分会遇到第二次进入Fugu14会白（黑）屏，耐心等待一小会即可
如若遇到长时间黑白屏，请看下面的 报错案例

重启后自动化安装 ⑦

  • 重启开机后，打开 AltStore，自动化会继续，打开就会提示要安装 unc0ver，点击 Install unc0ver 安装
  • 耐心等待 unc0ver 安装完成，安装完成底部是 Open unc0ver 按钮，点击就可以打开unc0ver，点击底部 Jailbreak 就可以进行越狱了

unc0ver越狱 ⑧

  • 点击 Jailbreak 越狱中，第一次使用unc0ver越狱会弹出个提示框，一共有三个选项，选择最下面的选项即可
  • 再快结束时，会遇到Unveil Security App的广告，只需点击左上角关闭即可
  • 越狱结束后，弹窗选择 OK 结束越狱，系统会自动重启

越狱成功

  • 正确的操作后，桌面会有两个一样的图标，一个名称是 unc0ver，一个名称是 Untether
  • 这个 Untether 在未越狱状态下可以打开使用，不会过期，无需签名
  • 当设备重启后，只需打开 Untether，点击 Jailbreak，就可以激活越狱了，直接解决了签名问题

版本升级

正常升级操作步骤为方法1
升级遇到错误请检查充电线或者网络问题

方法1出错解决不了可尝试方法2的操作流程

  • 手机连接到电脑

  • 手机重启恢复至 未越狱状态

  • 打开 Safari浏览器

  • 进入unc0ver官网（unc0ver）

  • 下载 unc0ver 最新版本，下载完成打开

  • 右上角点击分享按钮，选择Altstore导入

  • 它就会自动签名安装，等待完成后

  • 打开unc0ver，点击 Jaibroken 越狱即可

  • 手机处于越狱状态

  • 打开越狱商店Cydia，下载 ReProvision 等签名工具

  • 打开手机Safari浏览器

  • 进入unc0ver官网（unc0ver）下载最新安装包

  • 打开ReProvision签名工具登录后，选择左上方Add按钮，选择最新安装包进行签名

  • 签名后会自动安装，后续只需信任描述文件即可

报错案例

iCloud Not Found

解决方法：

  • 先找到 iCloud 安装后路径，在桌面左下角菜单中找到 iCloud右键更多，找到定位位置
  • 找到 iCloud 右键打开文件所有的位置
  • 看到安装路径 C:\Program Files (x86)\Common Files\Apple
  • 再次打开AltServer签名工具弹出 iCloud Not Found 提示框，选择 ChooseFolder 按钮，再选择 iCloud 安装路径就行，选到 Apple 就点确认
  • 再次打开AltServer签名工具就不会弹了

lnstallation failed

解决方法：

  • 使用另外一部手机开启热点，给电脑以及待越狱设备连上

Could not Find Altserver

解决方法1：

  • 手机与电脑连接曾中断过，需重新尝试

解决方法2：

  • 电脑与手机不是同一个WiFi，连接同一个即可

lnstall unc0ver

解决方法1：

  • 等待十几秒后，依旧卡住，可更换USB插口重试

解决方法2：

  • 使用爱思个人签名，再安装到手机上即可

解决方法2：

  • 关闭电脑安全软件，如Win自带防火墙拦截、电脑管家、360等安全软件

Fugu14黑屏不运行

解决方法1：
手机强制关机重启，重新越狱

解决方法2：
平刷（重置手机）清除越狱状态，重新越狱

unc0ver显示unsupported

解决方法1：

  • 关机重启尝试；unsupported 显示为 Jailbreak 即可

解决方法2：

  • 重新安装AltStore

unc0ver越狱后不重启

解决方法：

  • 卸载unc0ver重装即可

最后总结

其实在越狱后，完美和不完美越狱区别不大，一样的使用
本次的完美越狱，只能称为半完美越狱，重启后恢复未越狱状态+一个永不过期的越狱工具

解决了证书掉签的烦恼，可以随便开关机
即使装错了插件，也可以进入安全模式

比以往的一键越狱多了两个步骤
除了从电脑安装AltStore到手机这个步骤容易出错
（大部分是因为网速的原因，手机AltStore和电脑AltServer之间需要传输，速度一慢或者停下来，都可能安装不上，导致一直没反应）

后面的只要按照步骤进行，百分之九十八都可以正常越狱

再次提醒：
整个过程线不可以中断，容易出错报错

自家电脑安装iTunes以及iCloud后，电脑需要关机重启

注意事项

  • 截本文前，Fugu14 越狱，需要使用电脑。只是这次 AltStore 自动化安装 Fugu14，不需要使用 macOS 自己编译安装了
  • AltStore 1.4.8 版本才有内置的 Fugu14
  • AltStore 的安装和使用，需要一定技巧，或许会遇到一些问题，需要自己摸索解决
  • 请仔细检查自己的设备和系统，是否在本次越狱支持范围之内，确定后才动手
  • 资料无价。在你动手之前，请做好重要资料的备份，以免意外情况造成资料丢失
  • 截本文前，文章介绍的仅仅是目前的情况，后续或许有变化，例如支持更多的系统与设备，例如实现真正的重启无需激活的完美越狱

本文更新时间：2021年11月10日

]]> 经验分享 iOS14 越狱 https://meuicat.com/posts/b9f33961.html#disqus_thread 三年的跌撞 https://meuicat.com/posts/846662a5.html https://meuicat.com/posts/846662a5.html Thu, 28 Oct 2021 08:32:20 GMT 记 碎碎念.
]]> 生活随笔 封の唠叨 https://meuicat.com/posts/846662a5.html#disqus_thread 关于《小橘妈妈》 https://meuicat.com/posts/90732013.html https://meuicat.com/posts/90732013.html Sun, 24 Oct 2021 18:08:48 GMT 领养代替购买，流浪猫平均寿命只有两三年... 21夏，偶遇一只小橘猫
蜷缩在车底，夜晚觅食，白天睡大觉
耳朵呈尖尖的三角形，两只眼睛像琥珀一般透亮
雪白的胡须，粉嘟嘟的鼻子嵌在毛乎乎的小脸蛋上，特别可爱

家里有着几个小罐头（养过小猫咪剩下的）
便出门时都会往背包里塞个小罐头
救助救助流浪猫

它很粘人
不知道是否只对我这样
可能也只是很不错的好感，反倒远远一看到我就想我走来

就这样我把仅剩的五六个猫粮
每天一个，全都喂给了它

后来投喂时，才在知情人透露得知，原来是附近一户人家搬离遗弃的小宝贝…

是啊，它曾经也是别人家的小咪宝贝啊
现在过着四处漂泊居无定所，饥肠辘辘的生活，

可是我还是很想知道，猫咪有什么错呢..
要知道，流浪猫的寿命平均不过两三年啊..

心中有过纠结，但也抑制了冲动
从而去各大较靠谱的领养平台发布领养信息

殊不知它的小肚子里，有四只未出世的小咪…

]]> 生活随笔 封の唠叨 橘猫 流浪猫 https://meuicat.com/posts/90732013.html#disqus_thread 重构 - 自用数据记录 https://meuicat.com/posts/b73eab56.html https://meuicat.com/posts/b73eab56.html Fri, 22 Oct 2021 06:30:58 GMT 从零重构本站所有内容；自用魔改记录~

📖 本教程更新于 2023 年 07 月 28 日

📚 文档目录

🚀 搭建教程 | 1 - 📑 前置教程 | 2 - 🎈 主题调整 | 3 - ✨ 魔改教程 | 4 - 🐈 重构自用数据记录

Hexo 纯升级

本节仅仅只是在原本的项目上 进行Hexo的升级 和插件依赖的更新

升级前请 备份！ 备份！ 备份！
有较大的改动一定要备份 而且更新Hexo存在很多不可控因素 哪怕更新成功了也一定要保留一份备份以备不时之需
做好备份就可以开始更新框架工作

npm 全局更新

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
npm cache clean -f
# 清理 NPM缓存

npm install -g npm-check
npm install -g npm-upgrade
# 全局安装版本检测、版本升级工具

npm-check -g
# 全局检测哪些模块可以升级
# 这里可以根据打印的提示信息 手动安装最新版本的模块

npm update -g
# 全局更新模块

hexo version
# 查看当前Hexo版本

npm install -g hexo-cli
# 全局安装 或 更新 Hexo的最新版本

Hexo 目录插件更新

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
cd /Hexo-MeuiCat
# 进入博客的根目录

npm-check
# 检测Hexo哪些模块可以升级

# rm -rf package-lock.json
# 删除 package-lock.json

npm-upgrade
# 更新package.json 一直回车即可

rm -rf node_modules
# 删除整个模块目录 这样可以避免很多坑

npm update --save
# 更新Hexo的模块

npm audix
# 若出现依赖的问题 用此命令检查 把报错的统一修复一下即可

npm update --save --force
# 或者强制更新

完成检查

  • 在上述步骤完成后，package.json 将成为以下版本信息：
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
{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "build": "hexo generate",
    "clean": "hexo clean",
    "deploy": "hexo deploy",
    "server": "hexo s -debug"
  },
  "hexo": {
    "version": "6.3.0"
  },
  "dependencies": {
    "hexo": "^6.3.0",
    "hexo-baidu-url-submit": "0.0.6",
    "hexo-blog-encrypt": "^3.1.6",
    "hexo-deployer-git": "^4.0.0",
    "hexo-filter-nofollow": "^2.0.2",
    "hexo-generator-archive": "^2.0.0",
    "hexo-generator-baidu-sitemap": "^0.1.9",
    "hexo-generator-category": "^2.0.0",
    "hexo-generator-feed": "^3.0.0",
    "hexo-generator-index": "^3.0.0",
    "hexo-generator-search": "^2.4.3",
    "hexo-generator-sitemap": "^3.0.1",
    "hexo-generator-tag": "^2.0.0",
    "hexo-renderer-ejs": "^2.0.0",
    "hexo-renderer-marked": "^6.0.0",
    "hexo-renderer-pug": "^3.0.0",
    "hexo-renderer-stylus": "^2.1.0",
    "hexo-server": "^3.0.0",
    "hexo-wordcount": "^6.0.1",
    "sweetalert2": "^11.7.5"
  }
}

当在其他设备上 可以依据已更新成功的 package.json 直接通过 npm install 进行升级

Hexo 升级&重构

此节内容是重构 彻底的重构
新建空白文件夹 把 Hexo 和 Butterfly 升到最新版本

1
2
3
npm config set registry https://registry.npm.taobao.org
npm config set registry https://registry.npmjs.org/
# 【可选源】 1：淘宝源 / 2：npm原镜像源（安装一些package 不容易报错）

安装 Hexo

1
2
3
4
5
6
7
8
hexo init
# 空文件夹内执行

npm install hexo-deployer-git --save
# 部署必要依赖插件包

npm install hexo-renderer-pug hexo-renderer-stylus --save
# 必要渲染

安装 Butterfly

1
2
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
# Butterfly 稳定版【建议】
Butterfly 官方安装文档
关于 Butterfly 主题多种安装方式

自用数据记录

本节内容可能有所出入，如有缺失，请使用 F12 大法

_config.yml

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
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
# Hexo 设置
# https://github.com/hexojs/hexo/
# https://hexo.io/zh-cn/docs/configuration



# 网站的基本信息
# --------------------------------------

title: 爱吃肉的猫
# 网站标题
subtitle: '有肉有猫有生活.'
# 网站副标题
description: '记录生活与技术点滴'
# 网站描述 主要用于SEO，告诉搜索引擎一个关于您站点的简单描述，通常建议在其中包含您网站的关键词
keywords: 生活，设计，广播剧，软件
# 网站关键词
author: 亦小封
# 作者名字
language: zh-CN
# 网站语言 en/zh-CN
timezone: 'Asia/Shanghai'
# 网站时区 Hexo 默认使用您电脑的时区。请参考 时区列表 进行设置，如 America/New_York, Japan, 和 UTC 。一般的，对于中国大陆地区可以使用 Asia/Shanghai



# URL
# https://hexo.io/zh-cn/docs/configuration#%E7%BD%91%E5%9D%80
# 在此处设置网站url；例如，如果您使用GitHub页面，请将url设置为 'https://username.github.io/project'
# --------------------------------------

url: https://meuicat.com
# 网站网址
root: /
# 网站根目录
permalink: blog/:title/
# 文章的永久链接格式 https://hexo.io/zh-cn/docs/permalinks
permalink_defaults:
# 永久链接中各部分的默认值
pretty_urls:
# 改写 permalink 的值来美化 URL
  trailing_index: true
  # 是否在永久链接中保留尾部的 index.html，设置为 false 时去除
  trailing_html: true
  # 是否在永久链接中保留尾部的 .html, 设置为 false 时去除 (对尾部的 index.html无效)



# 文件目录
# https://hexo.io/zh-cn/docs/configuration#%E7%9B%AE%E5%BD%95
# --------------------------------------

source_dir: source
# 资源文件夹，这个文件夹用来存放内容
public_dir: public
# 公共文件夹，这个文件夹用于存放生成的站点文件
tag_dir: tags
# 标签文件夹
archive_dir: archives
# 归档文件夹
category_dir: categories
# 分类文件夹
code_dir: downloads/code
# Include code 文件夹，source_dir 下的子目录
i18n_dir: :lang
# 国际化（i18n）文件夹
skip_render:
# 跳过指定文件的渲染。匹配到的文件将会被不做改动地复制到 public 目录中



# 文章
# https://hexo.io/zh-cn/docs/configuration#%E6%96%87%E7%AB%A0
# --------------------------------------
new_post_name: :title.md
# 新文章的文件名称
default_layout: post
# 预设布局
titlecase: false
# 把标题转换为 title case
external_link:
# 在新标签中打开链接
  enable: true
  # 在新标签中打开链接
  field: site
  # 对整个网站（site）生效或仅对文章（post）生效
  exclude: ''
  # 需要排除的域名。主域名和子域名如 www 需分别配置
filename_case: 0
# 把文件名称转换为 (1) 小写或 (2) 大写
render_drafts: false
# 显示草稿
post_asset_folder: false
# 启动 Asset 文件夹
relative_link: false
# 把链接改为与根目录的相对位址
future: false
# 显示未来的文章 默认打开true
highlight:
# 代码块的设置 https://hexo.io/zh-cn/docs/syntax-highlight#Highlight-js
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
# 代码块的设置 https://hexo.io/zh-cn/docs/syntax-highlight#PrismJS
  enable: false
  preprocess: true
  line_number: true
  tab_replace: ''

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date

# 分类 & 标签
default_category: uncategorized
# 默认分类
category_map:
# 分类别名
tag_map:
# 标签别名



# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
# --------------------------------------

meta_generator: true
# 插入头部元数据元素



# 日期 / 时间格式
# --------------------------------------

date_format: YYYY-MM-DD
# 日期格式
time_format: HH:mm:ss
# 时间格式
updated_option: 'mtime'
# 当 Front Matter 中没有指定 updated 时 updated 的取值
# mtime: 使用文件的最后修改时间
# date: 使用 date 作为 updated 的值。可被用于 Git 工作流之中，因为使用 Git 管理站点时，文件的最后修改日期常常会发生改变
# empty: 直接删除 updated。使用这一选项可能会导致大部分主题和插件无法正常工作



# 分页
# --------------------------------------

per_page: 10
# 每页显示的文章量 (0 = 关闭分页功能)
pagination_dir: page
# 分页目录



# 包括或不包括目录和文件
# https://hexo.io/zh-cn/docs/configuration#%E5%8C%85%E6%8B%AC%E6%88%96%E4%B8%8D%E5%8C%85%E6%8B%AC%E7%9B%AE%E5%BD%95%E5%92%8C%E6%96%87%E4%BB%B6
# --------------------------------------

include:
# Hexo 默认会不包括 source/ 下的文件和文件夹（包括名称以下划线和 . 开头的文件和文件夹，Hexo 的 _posts 和 _data 等目录除外）。通过设置此字段将使 Hexo 处理他们并将它们复制到 source 目录下
exclude:
# Hexo 不包括 source/ 下的这些文件和目录
ignore:
# Hexo 会忽略整个 Hexo 项目下的这些文件夹或文件



# 选用主题
# --------------------------------------

theme: butterfly
# 当前主题名称。值为false时禁用主题



# 部署
# https://github.com/hexojs/hexo-deployer-git
# https://hexo.io/zh-cn/docs/one-command-deployment
# --------------------------------------

deploy:
- type: git
  repo: git@github.com:yife68/MeuiCat.git
  branch: master
  message: upload
- type: baidu_url_submitter



# RSS订阅
# https://github.com/hexojs/hexo-generator-feed
# --------------------------------------

feed:
    type: rss2
    # 类型
    path: rss2.xml
    # 路径。当指定两种类型时，路径必须遵循类型值的顺序。（默认：atom.xml / rss2.xml）
    limit: false
    # 提要中的最大帖子数（使用 0 或 false 显示所有帖子）



# 站点地图
# https://github.com/hexojs/hexo-generator-sitemap
# --------------------------------------

sitemap:
  path: 
  # 站点地图路径（默认值：sitemap.xml）
    - sitemap.xml
    - sitemap.txt
  rel: false
  # 将relsitemap添加到网站的标题（默认值：false）
  tags: true
  # 添加网站标签
  categories: false
  # 添加网站分类



# 百度站点地图
# https://github.com/coneycode/hexo-generator-baidu-sitemap
# --------------------------------------

baidusitemap:
  path: baidusitemap.xml
  # 站点地图路径。（默认值：baidusitemap.xml）



# 外链 nofollow
# https://github.com/hexojs/hexo-filter-nofollow
# 自动为所有外部链接添加 nofollow 属性
# --------------------------------------

nofollow:
  enable: true
  field: post
  # 'post' - 仅向帖子内容中的外部链接添加 nofollow 属性；'site' - 为整个站点的外部链接添加 nofollow 属性
  exclude:
  # 排除主机名
    # - 'meuicat.com'
    - radio.meuicat.com
    - kabuchino.meuicat.com
    - capucino.meuicat.com
    - music.meuicat.com
    - yi.meuicat.com
    - memos.meuicat.com



# 设置百度主动推送
# https://github.com/huiwang/hexo-baidu-url-submit
# --------------------------------------

baidu_url_submit:
  count: 200
  # 提交数量；代表提交最新的 N 个链接
  host: meuicat.com
  # 在百度站长平台中注册的域名，这个改为你自己的域名
  token: {百度搜索资源平台-普通收录token}
  # 请注意这是您的秘钥， 所以请不要把博客源代码发布在公众仓库里!
  path: baidu_urls.txt
  # 文本文档的地址， 新链接会保存在此文本文档里，这个默认



# 文章加密
# https://github.com/D0n9X1n/hexo-blog-encrypt
# --------------------------------------

encrypt: 
  abstract: 内容已加密，需要数字密码查看~
  message: 请输入六位数字密码查看~
  tags:
  - {name: tagName, password: 密码A}
  - {name: tagName, password: 密码B}
  template: <div id="hexo-blog-encrypt" data-wpm="{{hbeWrongPassMessage}}" data-whm="{{hbeWrongHashMessage}}"><div class="hbe-input-container"><input type="password" id="hbePass" placeholder="{{hbeMessage}}" /><label>{{hbeMessage}}</label><div class="bottom-line"></div></div><script id="hbeData" type="hbeData" data-hmacdigest="{{hbeHmacDigest}}">{{hbeEncryptedData}}</script></div>
  wrong_pass_message: Sorry, 不是这个密码哦, 再试试吧..
  wrong_hash_message: Sorry, 这个文章不能被校验, 不过您还是能看看解密后的内容.



# algolia 搜索
# https://dashboard.algolia.com/
# --------------------------------------

algolia:
  appId: "Application ID"
  apiKey: "Search-Only API Key"
  adminApiKey: "Admin API Key"
  chunkSize: 5000
  indexName: "index名"
  fields:
    - content:strip:truncate,0,500
    - excerpt:strip
    - gallery
    - permalink
    - photos
    - slug
    - tags
    - title

_config.butterfly.yml

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
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027
1028
1029
1030
1031
1032
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
1044
1045
1046
1047
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059
1060
1061
1062
1063
1064
1065
1066
1067
1068
1069
1070
1071
1072
1073
1074
1075
1076
1077
1078
1079
1080
1081
1082
1083
1084
1085
1086
1087
1088
1089
1090
1091
1092
1093
1094
1095
1096
1097
1098
1099
1100
1101
1102
1103
1104
1105
1106
1107
1108
1109
1110
1111
1112
1113
1114
1115
1116
1117
1118
1119
1120
1121
1122
1123
1124
1125
1126
1127
1128
1129
1130
1131
1132
1133
1134
1135
1136
1137
1138
1139
1140
1141
1142
1143
1144
1145
1146
1147
1148
1149
1150
1151
1152
1153
1154
1155
1156
1157
1158
1159
1160
1161
1162
1163
1164
1165
1166
1167
1168
1169
1170
1171
1172
1173
1174
1175
1176
1177
1178
1179
1180
1181
1182
1183
1184
1185
1186
1187
1188
1189
1190
1191
1192
1193
1194
1195
1196
1197
1198
1199
1200
1201
1202
1203
1204
1205
1206
1207
1208
1209
1210
1211
1212
1213
1214
1215
1216
1217
1218
1219
1220
1221
1222
1223
1224
1225
1226
1227
1228
1229
1230
1231
1232
1233
1234
1235
1236
1237
1238
1239
1240
1241
1242
1243
1244
1245
1246
1247
1248
1249
1250
1251
1252
1253
1254
1255
1256
1257
1258
1259
1260
1261
1262
1263
1264
1265
1266
1267
1268
1269
1270
1271
1272
1273
1274
1275
1276
1277
1278
1279
1280
1281
1282
1283
1284
1285
1286
1287
1288
1289
1290
1291
1292
1293
1294
1295
1296
1297
1298
1299
1300
1301
1302
1303
1304
1305
1306
1307
1308
1309
1310
1311
1312
1313
1314
1315
1316
1317
1318
1319
1320
1321
1322
1323
1324
1325
1326
1327
1328
1329
1330
1331
1332
1333
1334
1335
1336
1337
1338
1339
1340
1341
1342
1343
1344
1345
1346
1347
1348
1349
1350
1351
1352
1353
1354
1355
1356
1357
1358
1359
1360
1361
1362
1363
1364
1365
1366
1367
1368
1369
1370
1371
1372
1373
1374
1375
1376
1377
1378
1379
1380
1381
1382
1383
1384
1385
1386
1387
1388
1389
1390
1391
1392
1393
1394
1395
1396
1397
# 导航栏设置
# --------------------------------------

nav:
  logo:
  # 网站的 logo，支持图片，直接填入图片链接
  display_title: true
  # 顶部菜单栏是否显示网站标题 true/false
  fixed: false
  # 是否固定状态栏 true/false



# 导航菜单
# 图标列表http://www.wapadd.cn/icons/awesome/index.htm
# V6图标：https://fontawesome.com/v6/icons/
# --------------------------------------

menu:
  合集||iconfont icat-square||hide:
    归档: /archives/ || 
    标签: /tags/ || 
    分类: /categories/ || 
    统计: /charts/ || 
  专栏||iconfont icat-inbox||:
    布柒糖FM: https://radio.meuicat.com/ || 
    Capucino: https://Capucino.meuicat.com/ || 
    KabuChino: https://KabuChino.meuicat.com/ || 
    iCat运行状态: https://uptime.meuicat.com/status/icat || 
    我の音乐馆: https://music.meuicat.com/ || 
    我开发の主题: https://github.com/yife68/Hexo-Theme-Melancholia || 
  藏宝阁||iconfont icat-precious-deposits||:
    即刻说: /essay/ || 
    相册集: /photos/ || 
    好物阁: /equipment/ || 
    足迹阁: /collect/ || 
    待办录: /project/ || 
    鱼塘录: /fcircle/ || 
  友链: /link/ || iconfont icat-link
  关于: /about/ || iconfont icat-about



# 代码高亮主题
# --------------------------------------

highlight_theme: mac
# 代码主题 darker / pale night / light / ocean / mac / mac light / false
highlight_copy: true
# 复制按钮 true/false
highlight_lang: true
# 显示代码使用的语言
highlight_shrink: false
# true: 折叠代码块 / false: 默认展开代码块 | none: 展开并取消折叠按钮
highlight_height_limit: 200
# 可配置代码高度限制，超出的部分会隐藏，并显示展开按钮
code_word_wrap: true
# 代码超出页面自动换行



# 社交图标
# 右侧社交图标设置
# --------------------------------------

social:
  iconfont icat-qq: http://wpa.qq.com/msgrd?v=3&uin=2714344056 || 企鹅
  iconfont icat-GitHub: https://github.com/yife68 || GitHub
  iconfont icat-tg: https://t.me/yife68 || TG



# 图片设置
# --------------------------------------

favicon: /media/favicon.ico
# ico 网站图标

avatar:
# 头像
  img: https://s11.ax1x.com/2023/07/07/pCc1TSO.jpg
  effect: false
  # 头像一直转圈

disable_top_img: false
# 顶部图 显示/false 不显示/true

index_img: https://s11.ax1x.com/2023/05/02/p9G2jjU.jpg
# 主页的 top_img

default_top_img: https://s11.ax1x.com/2023/05/02/p9GRSHJ.jpg
# 默认的 top_img，当页面的 top_img 没有配置时，会显示 default_top_img

archive_img: false
# 归档页面的 top_img

tag_img: https://s11.ax1x.com/2023/05/02/p9GRSHJ.jpg
# tag 子页面 的 默认 top_img

tag_per_img:
# tag 子页面的 top_img，可配置每个 tag 的 top_img
#  - tag name: xxxxx

category_img: https://s11.ax1x.com/2023/05/02/p9GRSHJ.jpg
# category 子页面 的 默认 top_img

category_per_img:
# category 子页面的 top_img，可配置每个 category 的 top_img
#  - category name: xxxxx

cover:
# 是否文章封面
  index_enable: true
  # 主页是否显示文章封面图
  aside_enable: true
  # 侧栏是否显示文章封面图
  archives_enable: true
  # 归档页面是否显示文章封面图
  position: both
  # 主页卡片文章封面的显示位置 - left：全部显示在左边 - right：全部显示在右边 - both：封面位置以左右左右轮流显示
  default_cover:
    - https://s11.ax1x.com/2023/05/13/p96goJ1.jpg
  # 当没有设置cover时，默认的封面显示
  # - https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg

error_img:
# 替換無法顯示的圖片
  flink: https://yife68.gitee.io/icat-pic/blog/loading.svg
  post_page: https://s11.ax1x.com/2023/05/13/p96goJ1.jpg



# 404页面
# --------------------------------------

error_404:
  enable: true
  subtitle: '请尝试站内搜索寻找文章 ~'
  background: https://s11.ax1x.com/2023/05/02/p9GR2VJ.png



# 文章meta显示
# --------------------------------------

post_meta:
  page:
  # 主页文章
    date_type: created
    # created / updated / both 主页文章日期是创建日或者更新日或都显示
    date_format: date
    # date / relative 显示日期还是相对日期
    categories: true
    # true / false 主页是否显示分类
    tags: false
    # true or false 主页是否显示标签
    label: true
    # true or false 显示描述性文字
  post:
  # 文章页
    date_type: created
    # created / updated / both 文章页日期是创建日或者更新日或都显示
    date_format: date
    # date / relative 显示日期还是相对日期
    categories: true
    # true or false 文章页是否显示分类
    tags: true
    # true or false 文章页是否显示标签
    label: true
    # true or false 显示描述性文字



# 主页文章节选(自动节选和文章页description)
# 1:description： 只显示description
# 2:both： 优先选择description，如果没有配置description，则显示自动节选的内容
# 3:auto_excerpt：只显示自动节选
# false： 不显示文章内容
# --------------------------------------

index_post_content:
  method: 2
  length: 500
  # 如果将method设置为2或3，则需要配置长度



# 页面锚点
# 开启页面锚点后，当你在进行滚动时，页面链接会根据标题ID进行替换
# --------------------------------------

anchor:
  button:
    enable: false
    always_show: false
    icon: # the unicode value of Font Awesome icon, such as '\3423'
  auto_update: false # when you scroll in post, the URL will update according to header id.



# 图片描述文字
# --------------------------------------

photofigcaption: true
# 可开启图片Figcaption描述文字显示
# 优先显示图片的 title 属性，然后是 alt 属性



# 复制相关配置
# 可配置网站是否可以复制、复制的内容是否添加版权信息
# --------------------------------------

copy:
  enable: true
  # 是否开启网站复制权限
  copyright:
  # 复制的内容后面加上版权信息
    enable: true
    # 是否开启复制版权信息添加
    limit_count: 40
    # 字数限制，当复制文字大于这个字数限制时，将在复制的内容后面加上版权信息



# 文章目录
# --------------------------------------

toc:
  post: true
  # 文章页是否显示 TOC
  page: false
  # 普通页面是否显示 TOC
  number: true
  # 是否显示章节数
  expand: true
  # 是否展开 TOC
  style_simple: false
  # 简洁模式（侧边栏只显示 TOC, 只对文章页有效 ）
  scroll_percent: true
  # 是否显示滚动进度百分比



# 文章版权
# --------------------------------------

post_copyright:
  enable: true
  decode: false
  # 由于Hexo 4.1开始，默认对网址进行解码，以至于如果是中文网址，会被解码，可设置decode: true来显示中文网址
  author_href: https://github.com/yife68
  license: CC BY-NC-SA 4.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/



# 文章打赏
# --------------------------------------

reward:
  enable: true
  QR_code:
    - img: https://yife68.gitee.io/icat-pic-2022/03/19/wechat.jpg
      # link:
      text: 微信
    - img: https://yife68.gitee.io/icat-pic-2022/03/19/alipay.jpg
      # link:
      text: 支付宝



# 文章编辑按钮
# 在文章标题旁边显示一个编辑按钮，点击会跳转到对应的链接去
# --------------------------------------

post_edit:
  enable: false
  # url: https://github.com/user-name/repo-name/edit/branch-name/subdirectory-name/
  # For example: https://github.com/jerryc127/butterfly.js.org/edit/main/source/
  url:



# 相关文章推荐
# --------------------------------------

related_post:
  enable: true
  limit: 3
  # 显示推荐文章数目
  date_type: created
  # created / updated 文章日期显示创建日或者更新日



# 文章分页按钮
# false：关闭分页按钮 / 1：下一篇显示的是旧文章 / 2：下一篇显示的是新文章
# --------------------------------------

post_pagination: 1



# 文章过期提醒
# --------------------------------------

noticeOutdate:
  enable: false
  style: flat
  # 样式，带图标或纯色底 simple/flat
  limit_day: 500
  # 距离更新时间多少天才显示文章过期提醒
  position: top
  # 提示在文字顶部或底部 top / bottom
  message_prev: Hey~这是
  # 天数前的文字
  message_next: 天前的文章了，可能会过时哦~
  # 天数后的文字


# 页脚设置
# --------------------------------------

footer:
  owner:
    enable: true
    since: 2021
  custom_text: <p><a style="margin-inline:5px" target="_blank" href="https://hexo.io/" rel="external nofollow noreferrer"><img class="nolazyload" src="https://yife68.gitee.io/icat-pic-2022/04/22/4.svg" data-lazy-src="https://yife68.gitee.io/icat-pic-2022/04/22/4.svg" title="框架为Hexo 6.3.0" data-ll-status="loaded" class="entered loaded"></a><a style="margin-inline:5px" target="_blank" href="https://github.com/jerryc127/hexo-theme-butterfly/" rel="external nofollow noreferrer"><img class="nolazyload" src="https://yife68.gitee.io/icat-pic-2022/04/22/5.svg" data-lazy-src="https://yife68.gitee.io/icat-pic-2022/04/22/5.svg" title="主题采用Butterfly 4.8.5" data-ll-status="loaded" class="entered loaded"></a><a style="margin-inline:5px" target="_blank" href="https://www.dogecloud.com/" rel="external nofollow noreferrer"><img class="nolazyload" src="https://yife68.gitee.io/icat-pic/blog/1.svg" data-lazy-src="https://yife68.gitee.io/icat-pic/blog/1.svg" title="本站使用多吉云为静态资源提供CDN加速" data-ll-status="loaded" class="entered loaded"></a><div style="margin:auto;text-align:center;align-items:center;display:inline-flex;"><span style="font-size:14px;vertical-align:middle;">本网站由</span><a href="https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral"><img src="https://yife68.gitee.io/icat-pic/blog/upyun.svg" style="vertical-align:middle;padding:0 6px;height:1.14em;"></a><span style="font-size:14px;vertical-align:middle">提供CDN加速/云存储服务</span></div></p><div class="icp"><a target="_blank" rel="noopener" href="https://beian.miit.gov.cn/"><img class="icp-icon" src="https://yife68.gitee.io/icat-pic-2022/04/22/8.png"><span>粤ICP备2022035648号</span></a>&nbsp&nbsp|&nbsp<img class="icp-icon" src="https://icp.gov.moe/favicon.ico"><a href="https://icp.gov.moe/?keyword=20227060" target="_blank">萌ICP备20227060号</a></div>
  copyright: false
  # 主题和框架的版权



# 侧边排版
# 可自行决定哪个项目需要显示，可决定位置，也可以设置不显示侧边栏
# --------------------------------------

aside:
  enable: true
  hide: false
  button: false
  # 首页关闭侧边栏设置按钮
  mobile: true
  # 在手机上显示
  position: right
  # 侧边栏位置 left / right

  display:
  # 个人卡片 - 文章 / 标签 /分类
    archive: true
    tag: true
    category: true

  card_author:
  # 侧边栏个人信息
    enable: true
    description: 足够优秀 再大方拥有.
    # 个人卡片 - 座右铭
    button:
      enable: true
      icon: iconfont icat-rss
      text: 订阅本站
      link: /subscribe/

  card_announcement:
  # 公告卡片
    enable: true
    content: Hello, Welcome to iCat.</br>My sharing blog.</br></br><div><a href="https://bf.zzxworld.com/s/876" target="_blank" rel="external nofollow noopener noreferrer"><img class="nolazyload" src="https://bf.zzxworld.com/images/logo-v2.png" alt="BlogFinder" style="width:auto;height:22px" data-ll-status="loading" class="entered loading"></a></div>

  card_recent_post:
  # 最新文章
    enable: false
    limit: 5
    # 显示的数量；如果设置为0，将显示所有
    sort: date
    # 日期或更新时间
    sort_order:
    # 非必要不修改

  card_categories:
  # 分类
    enable: true
    limit: 6
    # 显示的数量；如果设置为0，将显示所有
    expand: none
    # 放大；none - 随机 / true - 开 / false - 关
    sort_order:
    # 非必要不修改

  card_tags:
  # 标签
    enable: true
    limit: 15
    # 显示的数量；如果设置为0，将显示所有
    color: true
    # 侧边栏标签彩色显示 true / false
    orderby: random
    # 排序；random - 随机 / name - 名称 / length - 长度
    order: 1
    # 升降排序；1 - 升序 / -1 - 降序
    sort_order:
    # 非必要不修改

  card_archives:
  # 归档
    enable: false
    type: monthly
    # 类型按年或月 yearly / monthly
    format: YYYY年 MM月
    # 格式
    order: -1
    # 升降排序；1 - 升序 / -1 - 降序
    limit: 6
    # 显示的数量；如果设置为0，将显示所有
    sort_order:
    # 非必要不修改

  card_webinfo:
  # 网站信息
    enable: true
    post_count: true
    last_push_date: true
    sort_order:
    # 非必要不修改



# 访问人数 busuanzi (UV 和 PV)
# --------------------------------------

busuanzi:
  site_uv: true
  # 侧边栏本站访客数
  site_pv: true
  # 侧边栏本站总访问量
  page_pv: false
  # 文章页阅读量



# 运行时间
# 格式: "月/日/年 时间" 也可以写成 "年/月/日 时间"
# --------------------------------------

runtimeshow:
  enable: true
  publish_date: 2021/10/15



# 最新评论
# 在侧边栏显示最新评论板块
# --------------------------------------

newest_comments:
  enable: false
  sort_order:
  limit: 6
  # 显示的数量
  storage: 10
  # 设置缓存时间，单位：分钟
  avatar: true
  # 是否显示头像



# 右下角按钮
# --------------------------------------

translate:
# 简繁转换
  enable: true
  default: 繁
  # 默认按钮显示文字(网站是简体，应设置为'default: 繁')
  defaultEncoding: 2
  # 网站默认语言，1: 繁体中文, 2: 简体中文
  translateDelay: 0
  # 延迟时间,若不在前, 要设定延迟翻译时间, 如100表示100ms,默认为0
  msgToTraditionalChinese: '繁'
  # 当文字是简体时，按钮显示的文字
  msgToSimplifiedChinese: '簡'
  # 当文字是繁体时，按钮显示的文字

readmode: true
# 阅读模式

darkmode:
# 夜间模式
  enable: true
  button: true
  # 是否在右下角显示日夜模式切换按钮
  autoChangeMode: 2
  # 1 跟随系统而变化，不支持的浏览器/系统将按照时间晚上6点到早上6点之间切换为 dark mode
  # 2 只按照时间 start 到 end 之间切换为 light mode ,其余时间为 dark mode
  # false 取消自动切换
  start: 7
  # light mode 的开始时间
  end: 18
  # light mode 的结束时间

rightside_scroll_percent: true
# 滚动状态百分比

rightside_item_order:
# 按钮排序，非必要請不要修改
  enable: true
  hide: readmode,translate,hideAside
  show: toc,darkmode,chat,comment



# Math 数学
# 不要在标题里使用 mathjax 语法，toc 目录不一定能正确显示 mathjax，可能显示 mathjax 代码
# 不要在标题里使用 KaTeX 语法，toc 目录不能正确显示 KaTeX
# --------------------------------------

mathjax:
  enable: false
  # true 表示每一页都加载mathjax.js
  # false 需要时加载，须在使用的Markdown Front-matter 加上 mathjax: true
  per_page: false
# https://www.npmjs.com/package/hexo-renderer-kramed
# 如果 per_page 设为 true,则每一页都会加载 Mathjax 服务。设为 false，则需要在文章 Front-matter 添加 mathjax: true,对应的文章才会加载 Mathjax 服务

katex:
  enable: false
  # true 表示每一页都加载katex.js
  # false 需要时加载，须在使用的Markdown Front-matter 加上 katex: true
  per_page: false
  hide_scrollbar: true
# https://katex.org/docs/options.html
# https://github.com/hexojs/hexo-renderer-markdown-it
# 首先禁用MathJax（如果你配置过 MathJax 的话），然后修改你的主题配置文件以便加载katex.min.css:
# 你不需要添加 katex.min.js 来渲染数学方程。相应的你需要卸载你之前的 hexo 的 markdown 渲染器，然后安装其它插件
# npm un hexo-renderer-marked --save # 如果有安装这个的话，卸载
# npm un hexo-renderer-kramed --save # 如果有安装这个的话，卸载
# npm i hexo-renderer-markdown-it --save # 需要安装这个渲染插件
# npm install katex @renbaoshuo/markdown-it-katex #需要安装这个katex插件



# 搜索系统
# see https://butterfly.js.org/posts/ceeb73f/#搜索系統
# --------------------------------------

algolia_search:
  enable: true
  hits:
    per_page: 6
    # 每页显示的数量
# Algolia 二选一
# https://github.com/oncletom/hexo-algolia
# https://github.com/LouisBarranqueiro/hexo-algoliasearch
# 如果你使用 hexo-algoliasearch，请记得配置 fields 参数的 title, permalink 和 content

local_search:
  enable: false
  preload: true
  # 预加载，开启后，进入网页后会自动加载搜索文件。关闭时，只有点击搜索按钮后，才会加载搜索文件
  top_n_per_article: 1
  # 匹配的文章结果，默认显示最开始的 1 段结果
  unescape: false
  # 将 html 字符串解码为可读字符串
  CDN:
  # 搜索文件的 CDN 地址（默认使用的本地链接）
# 本地搜索
# https://github.com/PaicHyperionDev/hexo-generator-search

docsearch:
  enable: false
  appId:
  # 你的 Algolia 应用 ID
  apiKey:
  # 你的 Algolia 搜索 API key
  indexName:
  # 你的 Algolia index name
  option:
  # 其余的 docsearch 配置
  # https://docsearch.algolia.com/docs/api/
# DocSearch
# https://docsearch.algolia.com/
# DocSearch 是另一款由 algolia 提供的搜索服务，具体申请和使用请查看 DocSearch 文档



# 分享功能
# 只能选择一个分享服务商
# --------------------------------------

addThis:
  enable: false
  pubid:
  # 你的pub-id
# https://www.addthis.com/
# 访问 AddThis 官网，找到你的 pub-id

sharejs:
  enable: true
  sites: twitter,wechat,weibo,qq
  # 设置分享平台，可选：facebook,twitter,wechat,weibo,qq
# https://github.com/overtrue/share.js

addtoany:
  enable: false
  item: facebook,twitter,wechat,sina_weibo,facebook_messenger,email,copy_link
# https://www.addtoany.com/



# 评论设置
# https://butterfly.js.org/posts/ceeb73f/#%E8%A9%95%E8%AB%96
# --------------------------------------

comments:
  use: Twikoo
  # 使用的评论（请注意，最多支持两个，如果不需要请留空）
  # 注意：双评论不能是 Disqus 和 Disqusjs 一起，由于其共用同一个 ID，会出错
  # Disqus / Disqusjs / Livere / Gitalk / Valine / Waline / Utterances / Facebook Comments / Twikoo / Giscus/ Remark42 / Artalk
  text: true
  # 是否显示评论服务商的名字
  lazyload: false
  # 是否为评论开启lazyload，开启后，只有滚动到评论位置时才会加载评论所需要的资源（开启 lazyload 后，评论数将不显示）
  count: true
  # 是否在文章顶部显示评论数
  # livere、Giscus 和 utterances 不支持评论数显示
  card_post_count: false
  # 是否在首页文章卡片显示评论数
  # gitalk、livere 、Giscus 和 utterances 不支持评论数显示

disqus:
  shortname:
  apikey:
  # 对于最新的评论小部件
# https://disqus.com/
# 注册 disqus，配置你自己的 disqus，然后在Butterfly里开启它

disqusjs:
  shortname:
  apikey:
  option:
# https://github.com/SukkaW/DisqusJS
# 与Disqus一样，但由于Disqus在中国大陆无法访问， 使用Disqusjs可以在无法访问Disqus时显示评论。具体可参考Disqusjs。

livere:
  uid:
# https://www.livere.com/
# 注册来必力，配置你自己的来必力设置，然后在Butterfly里开启它

gitalk:
  client_id:
  client_secret:
  repo:
  owner:
  admin:
  option:
# https://github.com/gitalk/gitalk
# 遵循 gitalk的指示去获取你的 github Oauth 应用的 client id 和 secret 值。以及查看它的相关配置説明

valine:
  appId: 
  appKey: 
  avatar: monsterid 
  # 风格样式 https://valine.js.org/#/avatar
  serverURLs: 
  # 此配置适用于国内自定义域名用户，海外版本将自动检测（无需手动填写）
  bg: 
  # valine 背景
  visitor: false
  option:
# https://valine.js.org
# 遵循 Valine的指示去配置你的 LeanCloud 应用。以及查看相应的配置説明
# Valine于 v1.4.5 开始支持自定义表情，如果你需要自行配置，请在emojiCDN配置表情 CDN
# 开启 visitor 后，文章页的访问人数将改为 Valine 提供，而不是 不蒜子

waline:
  serverURL: 
  # Waline 服务器地址url
  bg: 
  # waline 背景
  pageview: false
  option:
# https://waline.js.org/
# Waline - 一款从 Valine 衍生的带后端评论系统。可以将 Waline 等价成 With backend Valine
# 开启 pageview 后，文章页的访问人数将改为 Waline 提供，而不是 不蒜子

utterances:
  repo:
  # 可选 pathname/url/title/og:title
  issue_term: pathname
  # 可选 github-light/github-dark/github-dark-orange/icy-dark/dark-blue/photon-dark
  light_theme: github-light
  dark_theme: photon-dark
# https://utteranc.es/
# 与Gitalk一样，基于 GitHub issues 的评论工具。相对于Gitalk,其相对需要权限较少。具体配置可参考Utterances。

facebook_comments:
  app_id:
  user_id: 
  pageSize: 10
  # 要显示的评论数
  order_by: social
  # social / time / reverse_time
  lang: zh_TW
  # 语言 en_US / zh_CN / zh_TW
# https://developers.facebook.com/docs/plugins/comments/
# Facebook Comments是Facebook提供的评论插件，需要登陆Facebook才可评论

twikoo:
  envId: {搭建的twikoo的环境ID}
  # 环境 ID
  region:
  # 环境地域，默认为 ap-shanghai，如果您的环境地域不是上海，需传此参数
  visitor: false
  # 是否显示文章閲读数
  option:
  # 可选配置
# https://github.com/imaegoo/twikoo
# Twikoo 是一个简洁、安全、无后端的静态网站评论系统，基于腾讯云开发
# 你只需要把获取到的 环境ID (envId) 填写到配置上去就行
# 开启 visitor 后，文章页的访问人数将改为 Twikoo 提供，而不是 不蒜子

giscus:
  repo:
  repo_id:
  category_id:
  theme:
    light: light
    dark: dark
  option:
# https://giscus.app/
# 一个基于 GitHub Discussions 的评论

remark42:
  host: # Your Host URL
  siteId: # Your Site ID
  option:
# https://remark42.com/docs/configuration/frontend/
# remark42 是一款只支持私有部署的评论

artalk:
  server:
  site:
  visitor: false
  option:
# https://artalk.js.org/guide/frontend/config.html
# artalk 是一款只支持私有部署的评论



# 在綫聊天设置
# --------------------------------------

chat_btn: false
# 它将在网站右下角创建一个按钮，并隐藏源按钮

chat_hide_show: false
# 为了不影响访客的体验，主题提供一个chat_hide_show配置
# 设为true后，向上滚动时显示原始聊天按钮，向下滚动时隐藏该按钮

chatra:
  enable: false
  id:
# https://chatra.io/
# 打开chatra并注册账号，在 Preferences 中找到 Public key

tidio:
  enable: false
  public_key:
# https://www.tidio.com/
# 打开tidio并注册账号，在 Preferences > Developer 中找到 Public key

daovoice:
  enable: false
  app_id:
# http://dashboard.daovoice.io/app
# 打开daovoice和注册帐号，找到你的app id

gitter:
  enable: false
  room:
# https://gitter.im/
# 打开Gitter和注册账号,创建一个 community 或者 room ,复制名称到设置去

crisp:
  enable: false
  website_id:
# https://crisp.chat/en/
# 打开crisp并注册帐号,找到需要的网站ID

messenger:
  enable: false
  pageID:
  lang: zh_TW
  # 语言 en_US / zh_CN / zh_TW
# https://developers.facebook.com/docs/messenger-platform/discovery/facebook-chat-plugin/
# messenger 为 Facebook 旗下的聊天服务



# 网站分析统计
# --------------------------------------

baidu_analytics:
# 百度统计
# https://tongji.baidu.com/web/welcome/login

google_analytics:
# 谷歌分析
# https://analytics.google.com/analytics/web/

cloudflare_analytics:
# Cloudflare 分析
# https://www.cloudflare.com/zh-tw/web-analytics/

microsoft_clarity:
# 微软Clarity
# https://clarity.microsoft.com/



# 广告
# --------------------------------------

google_adsense:
# 谷歌广告
  enable: false
  auto_ads: true
  js: https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
  client:
  # 填入个人识别码
  enable_page_level_ads: true

# ad:
# 手动插入广告
#   index:
    # 主页文章列表中
#   aside:
    # 侧边栏
#   post:
    # 文章底部
# 三个位置可供插入广告，分别为主页文章(每三篇文章出现广告)/aside公告之后/文章页打赏之后；把html代码填写到对应的位置
# index: <ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="xxxxxxxxxxxx" data-ad-client="ca-pub-xxxxxxxxxx" data-ad-slot="xxxxxxxxxx"></ins><script>(adsbygoogle=window.adsbygoogle||[]).push({})</script>



# 网站验证
# --------------------------------------

site_verification:
  # - name: google-site-verification
  #   content: xxxxxx
  # - name: baidu-site-verification
  #   content: xxxxxxx



# 美化/特效
# 可以修改大部分UI颜色
# 颜色值必须被双引号包裹，就像"#000"而不是#000。否则将会在构建的时候报错！
# --------------------------------------

# theme_color:
#   enable: true
#   main: "#49B1F5"
#   paginator: "#00c4b6"
#   button_hover: "#FF7242"
#   text_selection: "#00c4b6"
#   link_color: "#99a9bf"
#   meta_color: "#858585"
#   hr_color: "#A4D8FA"
#   code_foreground: "#F47466"
#   code_background: "rgba(27, 31, 35, .05)"
#   toc_color: "#00c4b6"
#   blockquote_padding_color: "#49b1f5"
#   blockquote_background_color: "#49b1f5"
#   scrollbar_color: "#49b1f5"
#   meta_theme_color_light: "ffffff"
#   meta_theme_color_dark: "#0d0d0d"



# 主页top_img显示大小
# 默认top_img全屏，site_info在中间
# 使用默认, 都无需填写（建议默认）
# --------------------------------------

index_site_info_top:
# 主页标题距离顶部距离  例如 300px/300em/300rem/10%
index_top_img_height:
# 主页top_img高度 例如 300px/300em/300rem  不能使用百分比

# The user interface setting of category and tag page (category和tag頁的UI設置)
# index - same as Homepage UI (index 值代表 UI將與首頁的UI一樣)
# default - same as archives UI 默認跟archives頁面UI一樣
category_ui: # 留空或 index
tag_ui: # 留空或 index

background: 'linear-gradient(90deg, rgba(247, 149, 51, 0.1) 0, rgba(243, 112, 85, 0.1) 15%, rgba(239, 78, 123, 0.1) 30%, rgba(161, 102, 171, 0.1) 44%, rgba(80, 115, 184, 0.1) 58%, rgba(16, 152, 173, 0.1) 72%, rgba(7, 179, 155, 0.1) 86%, rgba(109, 186, 130, 0.1) 100%)'
# 网站背景
# 图片格式 url(http://xxxxxx.com/xxx.jpg)
# 颜色（HEX值/RGB值/顔色单词/渐变色)
# 留空 不显示背景

footer_bg: false
# footer是否显示图片背景(与top_img一致)

rightside-bottom:
# 右下角按钮距离底部的距离（单位为：px）

enter_transitions: true
# 网站载入效果



# 打字效果
# https://github.com/disjukr/activate-power-mode
# --------------------------------------

activate_power_mode:
  enable: false
  colorful: true
  # 冒光特效
  shake: false
  # 抖动特效
  mobile: false



# 背景特效
# --------------------------------------

canvas_ribbon:
  enable: false
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: false
  # 设置是否每次点击都更换綵带
  mobile: false
  # false：手机端不显示 true：手机端显示
# 静态丝带
# https://github.com/hustcc/ribbon.js

canvas_fluttering_ribbon:
  enable: false
  mobile: false
  # false：手机端不显示 true：手机端显示
# 动态丝带

canvas_nest:
  enable: false
  color: '0,0,255'
  # 线条颜色，默认值：“0,0,0”；RGB值：（R、G、B）。（注意：使用“，”分隔。）
  opacity: 0.7
  # 线条的不透明度（0~1），默认值：0.5
  zIndex: -1
  # 背景的z-index属性，默认值：-1
  count: 99
  # 行数，默认值：99
  mobile: false
  # false：手机端不显示 true：手机端显示
# 多结构
# https://github.com/hustcc/canvas-nest.js



# 鼠标点击效果
# --------------------------------------

fireworks:
  enable: false
  zIndex: 9999
  # 建议只在 -1 至 9999 间选；-1：代表烟火效果在底部；9999：代表烟火效果在前面
  mobile: false
  # false：手机端不显示 true：手机端显示
# 烟花效果

click_heart:
  enable: false
  mobile: false
  # false：手机端不显示 true：手机端显示
# 爱心效果

ClickShowText:
  enable: false
  text:
    # - I
    # - LOVE
    # - YOU
  fontSize: 15px
  random: false
  # 文字随机显示
  mobile: false
  # false：手机端不显示 true：手机端显示
# 文字效果
# 点击出现文字，文字可自行修改



# 网站默认颜色
# light (default) / dark
# --------------------------------------

display_mode: light



# 页面美化
# 会改变ol、ul、h1-h5的样式
# --------------------------------------

beautify:
  enable: true
  field: post
  # post：只在文章页生效；site：在全站生效
  title-prefix-icon: '\f08d'
  title-prefix-icon-color: '#F47466'



# 自定义字体和字体大小
# 非必要不要修改
# --------------------------------------

font:
  global-font-size:
  code-font-size:
  font-family: ziti,"MiSans",sans-serif
  code-font-family:
# 全局字体

blog_title_font:
  font_link:
  font-family:
# Blog 标题字体
# 左上角网站名字 主页居中网站名字



# hr水平分割线的图标设置
# --------------------------------------

hr_icon:
  enable: true
  icon: 
  # the unicode value of Font Awesome icon, such as '\3423'
  icon-top:



# 网站副标题
# --------------------------------------

subtitle:
  enable: true
  effect: true
  # 打字效果
  loop: true
  # 循环打字
  typed_option:
  # Customize typed.js (配置typed.js)
  source: false
  # source 调用第三方服务
  # source: false 关闭调用
  # source: 1  调用一言网的一句话（简体） https://hitokoto.cn/
  # source: 2  调用一句网（简体） http://yijuzhan.com/
  # source: 3  调用今日诗词（简体） https://www.jinrishici.com/
  # subtitle 会先显示 source , 再显示 sub 的内容
  sub:
    - 山不见我 我便去见山
    - 人不可能每步路都是正确的，我不想回头
    - 希望有个在我打退堂鼓的时候悄悄把鼓藏起来的人
    - 不要怕 轻舟已过万重山
    - 知其不可奈何而安之若命
    - 出现在别人的生活里要像一份礼物
    - 山高路远 看世界 也找自己
    - 发泄后的自醒不能用来赎罪
    - 正是因为那些暗淡浑浊的过去 才成就了此刻闪闪发光的自己
    - 参天之木，必有其根；怀山之水必有其源
    - 遗憾的是我们从来没有被坚定选择过
    - 好景不会太长久，后来渐渐都明白了，遗憾也是
    - 人的一生，总是在替代和被替代中进行
    - 真的很喜欢说走就走，既浪漫又踏实
    - It’s better to be alone than to be with someone you’re not happy to be with.
    - I’ll think of you every step of the way.
    - There are only the pursued, the pursuing, the busy and the tired.
    - Moonlight city. You just couldn't see an end to it.



# 页面加载动画 preloader
# --------------------------------------

preloader:
  enable: true
  source: 3
  # source；1. 开屏加载；2. 顶部进度
  # pace theme (see https://codebyzach.github.io/pace/)
  pace_css_url: /css/icat_change.css
  avatar: https://s11.ax1x.com/2023/07/07/pCc1TSO.jpg
  # 自定义头像 （魔改 - 满屏loader）



# 字数统计
# see https://butterfly.js.org/posts/ceeb73f/#字數統計
# --------------------------------------

wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true



# 图片大图查看模式
# 只能开启一个，或不开启
# --------------------------------------

medium_zoom: false
# https://github.com/francoischalifour/medium-zoom

fancybox: true
# http://fancyapps.com/fancybox/3/



# abcjs 乐谱
# 在页面上渲染乐谱
# See https://github.com/paulrosen/abcjs
# --------------------------------------

abcjs:
  enable: false
  per_page: true



# mermaid
# see https://github.com/mermaid-js/mermaid
# Mermaid 是一个基于 Javascript 的图表绘制工具，通过解析类 Markdown 的文本语法来实现图表的创建和动态修改
# --------------------------------------

mermaid:
  enable: false
  # built-in themes: default/forest/dark/neutral
  theme:
    light: default
    dark: dark



# Not标签
# https://butterfly.js.org/posts/4aa8abbe/#Note-Bootstrap-Callout
# --------------------------------------

note:
  style: flat
  # Note tag style values:
  #  - simple    bs-callout old alert style. Default.
  #  - modern    bs-callout new (v2-v3) alert style.
  #  - flat      带有背景的平面标注样式，如 Mozilla 或 StackOverflow
  #  - disabled  禁用注释标签的所有CSS样式导入
  icons: true
  border_radius: 3
  # icons和light_bg_offset只对方法一生效
  light_bg_offset: 0
  # 对于现代和平面样式 (modern: -12 | 12; flat: -18 | 6)
  # 偏移也应用于标签标记变量。此选项可用于禁用的注释标记



# Pjax
# https://github.com/MoOx/pjax
# 当用户点击链接，通过ajax更新页面需要变化的部分，然后使用HTML5的pushState修改浏览器的URL地址；这样可以不用重复加载相同的资源（css/js）， 从而提升网页的加载速度
# 使用pjax后，一些自己DIY的js可能会无效，跳转页面时需要重新调用；使用pjax后，一些个别页面加载的js/css，将会改为所有页面都加载
# --------------------------------------

pjax:
  enable: true
  exclude:
    # - xxxx
    # - xxxx



# 全局吸底Aplayer音乐
# --------------------------------------

aplayerInject:
  enable: true
  per_page: true



# Snackbar 弹窗
# https://github.com/polonel/SnackBar
# --------------------------------------

snackbar:
  enable: true
  position: bottom-center
  # 弹窗位置可选 top-left / top-center / top-right / bottom-left / bottom-center / bottom-right
  bg_light: '#49b1f5'
  # light mode时弹窗背景
  bg_dark: '#1f1f1f'
  # dark mode时弹窗背景



# 预加载
# 当鼠标悬停到链接上超过 65 毫秒时，Instantpage 会对该链接进行预加载，可以提升访问速度
# https://instant.page/
# --------------------------------------

instantpage: true



# Pangu
# https://github.com/vinta/pangu.js
# 自动在网页中所有的中文字和半形的英文、数字、符号之间插入空格
# --------------------------------------

pangu:
  enable: false
  field: site # site/post



# Lazyload (圖片懶加載)
# https://github.com/verlok/vanilla-lazyload

lazyload:
  enable: true
  field: site
  # 整站或文章 site / post
  placeholder:
  blur: false



# PWA
# https://github.com/JLHwung/hexo-offline
# https://butterfly.js.org/posts/ceeb73f/#PWA
# --------------------------------------

# pwa:
#   enable: false
#   manifest: /pwa/manifest.json
#   apple_touch_icon: /pwa/apple-touch-icon.png
#   favicon_32_32: /pwa/32.png
#   favicon_16_16: /pwa/16.png
#   mask_icon: /pwa/safari-pinned-tab.svg



# Open Graph
# https://developers.facebook.com/docs/sharing/webmasters/
# 在 head 里增加一些 meta 资料，例如缩略图、标题、时间等等。当你分享网页到一些平台时，平台会读取 Open Graph 的内容，展示缩略图，标题等等信息
# --------------------------------------

Open_Graph_meta:
  enable: true
  option:
    # twitter_card:
    # twitter_image:
    # twitter_id:
    # twitter_site:
    # google_plus:
    # fb_admins:
    # fb_app_id:



# CSS 前缀
# 有些 CSS 并不是所有浏览器都支持，需要增加对应的前缀才会生效
# 开启 css_prefix 后，会自动为一些 CSS 增加前缀。（会增加 20%的体积）
# --------------------------------------

css_prefix: true



# Inject
# 如想添加额外的 js / css / meta 等等东西，可以在Inject里添加，插入代码到头部 </head> 之前 和 底部 </body> 之前
# --------------------------------------

inject:
  head:
    - <link rel="stylesheet" href="/css/icat.css">
    - <link rel="stylesheet" href="/css/icat_change.css">
    - <link rel="stylesheet" href="https://cdn3.codesign.qq.com/icons/XMx86jzlQw0brz3/latest/iconfont.css"> # 腾讯iconfont - 图标库
    - <script async src="https://cdn.meuicat.com/sweetalert2@11.7.18/sweetalert2.all.min.js"></script> # 关于页面 - 打赏弹窗
    - <link rel="stylesheet" href="https://font.sec.miui.com/font/css?family=MiSans:400,500,700:Chinese_Simplify,Latin&display=swap"> # 字体 - MiSans
    - <style id="barragesColor"></style> # 热评弹窗 - 载体
    - <script async src="/js/statistics.js"></script> # 监控统计
    
  bottom:
    - <script async data-pjax src="/js/icat.js"></script>
    - <script async src="/icat/random.js"></script> # 随机网页跳转
    - <script type="text/javascript" src="https://unpkg.zhimg.com/jquery@latest/dist/jquery.min.js"></script> # 腾讯地图定位 - 定制化JS
    - <script data-pjax src="/js/txmap.js"></script> # 腾讯地图定位 - API
    - <script type="text/javascript" src="/js/rightmenu.js"></script> # 右键菜单 - 多样式JS
    - <script async type="text/javascript" src="/js/commentBarrage.js" data-pjax=""></script> # 热评弹窗 - 函数处理
    - <script>var meting_api='https://meting.meuicat.com/index.php?server=:server&type=:type&id=:id&auth=:auth&r=:r';</script> # meting api


# CDN
# 非必要请勿修改，配置后请确认链接是否能访问
# --------------------------------------

CDN:
  internal_provider: local
  # 主题内部 js 的 cdn 配置
  # 可选 local(本地) / jsdelivr / unpkg / cdnjs / custom(自定义格式)
  # dev版的主题只能设置为 local

  third_party_provider: custom
  # 第三方 js 的 cdn 配置
  # 可选 local(本地) / jsdelivr / unpkg / cdnjs / custom(自定义格式)
  # 当设置为本地（local）时，需要安装 install hexo-butterfly-extjs 插件

  version: false
  # true/false 为 cdn 加上指定版本号
  # 如需修改版本号，可修改主题目录的 'plugins.yml' 中对应插件的 version
  # 请确保你修改的版本号，你所使用的 cdn 有收录

  custom_format: https://cdn.staticfile.org/${cdnjs_name}/${version}/${min_cdnjs_file}
  # 自定义格式
  # https://cdn.staticfile.org/${cdnjs_name}/${version}/${min_cdnjs_file}
  # name - npm 上的包名 / file - npm 上的文件路径 / min_file - npm 上的文件路径（压缩过的文件） / cdnjs_name - cdnjs 上的包名 / cdnjs_file - cdnjs 上的文件路径 / min_cdnjs_file - cdnjs 上的文件路径（压缩过的文件） / version - 插件版本号
  # Staticfile（七牛云）：https://www.staticfile.org/ - https://cdn.staticfile.org/${cdnjs_name}/${version}/${min_cdnjs_file} - 同步 cdnjs
  # BootCDN：https://www.bootcdn.cn/ - https://cdn.bootcdn.net/ajax/libs/${cdnjs_name}/${version}/${min_cdnjs_file} - 同步 cdnjs
  # Baomitu（360）：https://cdn.baomitu.com/ - 最新版本：https://lib.baomitu.com/${cdnjs_name}/latest/${min_cdnjs_file} / 指定版本： https://lib.baomitu.com/${cdnjs_name}/${version}/${min_cdnjs_file} - 同步 cdnjs
  # Elemecdn - 最新版本： https://npm.elemecdn.com/${name}@latest/${file} / 指定版本： https://npm.elemecdn.com/${name}@${version}/${file} - 同步 npm

  option:
    # main_css:
    # main:
    # utils:
    # translate:
    # local_search:
    # algolia_js:
    algolia_search: https://cdn.staticfile.org/algoliasearch/4.18.0/algoliasearch.umd.min.js
    # instantsearch:
    # docsearch_js:
    # docsearch_css:
    pjax: https://lib.baomitu.com/pjax/0.2.8/pjax.min.js
    # gitalk:
    # gitalk_css:
    # blueimp_md5:
    # valine:
    # disqusjs:
    # disqusjs_css:
    twikoo: https://cdn.staticfile.org/twikoo/1.6.16/twikoo.all.min.js
    # waline_js:
    # waline_css:
    # giscus:
    sharejs: https://lib.baomitu.com/social-share.js/1.0.16/js/social-share.min.js
    sharejs_css: https://lib.baomitu.com/social-share.js/1.0.16/css/share.min.css
    # mathjax:
    # katex:
    # katex_copytex:
    # mermaid:
    # canvas_ribbon:
    # canvas_fluttering_ribbon:
    # canvas_nest: https://cdn.staticfile.org/canvas-nest.js/2.0.4/canvas-nest.js
    lazyload: https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vanilla-lazyload/17.3.1/lazyload.iife.min.js
    instantpage: https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/instant.page/5.1.0/instantpage.min.js
    typed: https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/typed.js/2.0.12/typed.min.js
    # pangu:
    # fancybox_css: https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/fancybox/3.5.7/jquery.fancybox.min.css
    # fancybox: https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/fancybox/3.5.7/jquery.fancybox.min.js
    medium_zoom: https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/medium-zoom/1.0.6/medium-zoom.min.js
    snackbar_css: https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/node-snackbar/0.1.16/snackbar.min.css
    snackbar: https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/node-snackbar/0.1.16/snackbar.min.js
    # activate_power_mode:
    # fireworks:
    # click_heart:
    # ClickShowText:
    fontawesome: https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/6.0.0/css/all.min.css
    # flickr_justified_gallery_js:
    # flickr_justified_gallery_css:
    aplayer_css: https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.css
    aplayer_js: https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.js
    # meting_js: https://cdn1.tianli0.top/npm/js-heo@1.0.12/metingjs/Meting.min.js
    prismjs_js: https://cdn1.tianli0.top/npm/prismjs@1.1.0/prism.js
    prismjs_lineNumber_js: https://cdn1.tianli0.top/npm/prismjs/plugins/line-numbers/prism-line-numbers.min.js
    prismjs_autoloader: https://cdn1.tianli0.top/npm/prismjs/plugins/autoloader/prism-autoloader.min.js
    # artalk_js: https://cdn.staticfile.org/artalk/2.5.5/Artalk.min.js
    # artalk_css: https://cdn.staticfile.org/artalk/2.5.5/Artalk.min.css
    # busuanzi: https://cdn.staticfile.org/busuanzi/2.3.0/bsz.pure.mini.js
    # abcjs_basic_js:
    countup_js: /js/countup.js

安装的插件

必要的插件
插件名版本号用途
hexo@6.3.0Hexo 博客框架
hexo-generator-archive@2.0.0Hexo自带 - 归档
hexo-generator-category@2.0.0Hexo自带 - 分类
hexo-generator-tag@2.0.0Hexo自带 - 标签
hexo-generator-index@3.0.0Hexo自带 - 生成index页面
hexo-renderer-ejs@2.0.0Hexo自带 - ejs支持
hexo-renderer-marked@6.0.0Hexo自带 - 对Markdown的渲染支持
hexo-renderer-pug@3.0.0pug渲染器
hexo-renderer-stylus@2.1.0stylus渲染器
hexo-server@3.0.0Hexo服务器模块
hexo-deployer-git@4.0.0Git部署功能
个人使用添加的插件
插件名版本号用途
hexo-generator-feed@3.0.0生成站点地图XML
hexo-generator-sitemap@3.0.1生成Sitemap
hexo-generator-baidu-sitemap@0.1.9生成百度Sitemap
hexo-filter-nofollow@2.0.2自动为站内链接加上nofollow
hexo-baidu-url-submit@0.0.6主动推送新链接至百度搜索引擎
hexo-blog-encrypt@3.1.6为你的隐私文章添加密码来查阅
hexo-algoliasearch@1.0.0搜索功能
hexo-wordcount@6.0.1字数统计
gulp@4.0.2gulp插件
gulp-htmlclean@2.7.22gulp压缩HTML文件
gulp-html-minifier-terser@7.1.0gulp压缩HTML文件 - terser
gulp-clean-css@4.3.0gulp压缩CSS文件
gulp-terser@2.1.0gulp压缩JS文件
1
2
3
4
5
6
7
8
9
10
11
npm ls -dept 0
# 当前目录已安装插件

npm install [插件名] --save
# 下载安装最新的插件包

npm install [插件名@版本号] --save
# 下载安装指定版本的插件包

npm uninstall [插件名] --save
# 卸载插件包

CSS颜色变量

因调整和魔改教程中有大量 css 颜色变量代码 如color: var(–icat-white)等类似代码, 均为 css 颜色代码, 此处为目前所有的颜色变量定义 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
:root {
    --icat-white: #fff;
    --icat-white-op: rgba(255, 255, 255, 0.2);
    --icat-black: #000;
    --icat-black-op: rgba(0, 0, 0, 0.2);
    --icat-none: #00000000;
    --icat-gray: #999999;
    --icat-gray-op: #9999992b;
    --icat-vip: #e5a80d;
    --icat-main: var(--icat-theme);
    --icat-main-op: var(--icat-theme-op);
    --icat-main-op-deep: var(--icat-theme-op-deep);
    --icat-main-none: var(--icat-theme-none);
    --icat-shadow-theme: 0 8px 12px -3px var(--icat-theme-op);
    --icat-shadow-blackdeep: 0 2px 16px -3px rgba(0, 0, 0, .15);
    --icat-shadow-main: 0 8px 12px -3px var(--icat-main-op);
    --icat-shadow-blue: 0 8px 12px -3px rgba(40, 109, 234, .20);
    --icat-shadow-white: 0 8px 12px -3px rgba(255, 255, 255, .20);
    --icat-shadow-black: 0 0 12px 4px rgba(0, 0, 0, .05);
    --icat-shadow-yellow: 0px 38px 77px -26px rgba(255, 201, 62, .12);
    --icat-shadow-red: 0 8px 12px -3px #ee7d7936;
    --icat-shadow-green: 0 8px 12px -3px #87ee7936;
    --icat-logo-color: linear-gradient(215deg, #4584ff 0%, #cf0db9 100%);
    --icat-snackbar-time: 5s;
    --icat-theme: #425AEF;
    --icat-theme-op: #4259ef23;
    --icat-theme-op-deep: #4259efdd;
    --icat-theme-none: #4259ef01;
    --icat-blue: #425AEF;
    --icat-red: #f04a63;
    --icat-pink: #FF7C7C;
    --icat-green: #57bd6a;
    --icat-yellow: #c28b00;
    --icat-yellow-op: #d99c001a;
    --icat-orange: #e38100;
    --icat-fontcolor: #363636;
    --icat-background: #f7f9fe;
    --icat-reverse: #000;
    --icat-maskbg: rgba(255, 255, 255, 0.6);
    --icat-maskbgdeep: rgba(255, 255, 255, 0.85);
    --icat-hovertext: var(--icat-main);
    --icat-ahoverbg: #F7F7FA;
    --icat-lighttext: var(--icat-main);
    --icat-secondtext: rgba(60, 60, 67, 0.8);
    --icat-scrollbar: rgba(60, 60, 67, 0.4);
    --icat-card-btn-bg: #edf0f7;
    --icat-post-blockquote-bg: #fafcff;
    --icat-post-tabs-bg: #f2f5f8;
    --icat-secondbg: #f1f3f8;
    --icat-shadow-nav: 0 5px 12px -5px rgba(102, 68, 68, 0.05);
    --icat-card-bg: #fff;
    --icat-card-bg-op: var(--icat-black-op);
    --icat-card-bg-none: rgba(255, 255, 255, 0);
    --icat-shadow-lightblack: 0 5px 12px -5px rgba(102, 68, 68, 0.00);
    --icat-shadow-light2black: 0 5px 12px -5px rgba(102, 68, 68, 0.00);
    --icat-card-border: #e3e8f7;
    --icat-shadow-border: 0 8px 16px -4px #2c2d300c;
    --icat-tabs-background: #49B1F5;
    --style-border: 1px solid var(--icat-card-border);
    --style-border-always: 1px solid var(--icat-card-border);
    --style-border-hover: 1px solid var(--icat-main);
    --style-border-hover-always: 1px solid var(--icat-main);
    --style-border-dashed: 1px dashed var(--icat-theme-op);
    --style-border-forever: 2px solid var(--icat-main);
  }
  
  [data-theme=light] {
    --icat-theme: #425AEF;
    --icat-theme-op: #4259ef23;
    --icat-theme-op-deep: #4259efdd;
    --icat-theme-none: #4259ef01;
    --icat-blue: #425AEF;
    --icat-red: #f04a63;
    --icat-pink: #FF7C7C;
    --icat-green: #57bd6a;
    --icat-yellow: #c28b00;
    --icat-yellow-op: #d99c001a;
    --icat-orange: #e38100;
    --icat-fontcolor: #363636;
    --icat-background: #f7f9fe;
    --icat-reverse: #000;
    --icat-maskbg: rgba(255, 255, 255, 0.6);
    --icat-maskbgdeep: rgba(255, 255, 255, 0.85);
    --icat-hovertext: var(--icat-main);
    --icat-ahoverbg: #F7F7FA;
    --icat-lighttext: var(--icat-main);
    --icat-secondtext: rgba(60, 60, 67, 0.8);
    --icat-scrollbar: rgba(60, 60, 67, 0.4);
    --icat-card-btn-bg: #edf0f7;
    --icat-post-blockquote-bg: #fafcff;
    --icat-post-tabs-bg: #f2f5f8;
    --icat-secondbg: #f1f3f8;
    --icat-shadow-nav: 0 5px 12px -5px rgba(102, 68, 68, 0.05);
    --icat-card-bg: #fff;
    --icat-card-bg-op: var(--icat-black-op);
    --icat-card-bg-none: rgba(255, 255, 255, 0);
    --icat-shadow-lightblack: 0 5px 12px -5px rgba(102, 68, 68, 0.00);
    --icat-shadow-light2black: 0 5px 12px -5px rgba(102, 68, 68, 0.00);
    --icat-card-border: #e3e8f7;
    --icat-shadow-border: 0 8px 16px -4px #2c2d300c;
    --icat-tabs-background: #49B1F5;
    --icat-footer-background: rgb(255 255 255 / 0%);
    --style-border: 1px solid var(--icat-card-border);
    --style-border-always: 1px solid var(--icat-card-border);
    --style-border-hover: 1px solid var(--icat-main);
    --style-border-hover-always: 1px solid var(--icat-main);
    --style-border-dashed: 1px dashed var(--icat-theme-op);
    --style-border-forever: 2px solid var(--icat-main);
  }
  
  [data-theme=dark] {
    --icat-theme: #f2b94b;
    --icat-theme-op: #f2b94b23;
    --icat-theme-op-deep: #f2b94bdd;
    --icat-theme-none: #f2b94b00;
    --icat-blue: #0084FF;
    --icat-red: #FF3842;
    --icat-pink: #d44040;
    --icat-green: #3e9f50;
    --icat-yellow: #ffc93e;
    --icat-yellow-op: #ffc93e30;
    --icat-orange: #ff953e;
    --icat-fontcolor: #F7F7FA;
    --icat-background: #18171d;
    --icat-reverse: #fff;
    --icat-maskbg: rgba(0, 0, 0, 0.6);
    --icat-maskbgdeep: rgba(0, 0, 0, 0.85);
    --icat-hovertext: #0A84FF;
    --icat-ahoverbg: #fff;
    --icat-lighttext: var(--icat-theme);
    --icat-secondtext: #a1a2b8;
    --icat-scrollbar: rgba(200, 200, 223, 0.4);
    --icat-card-btn-bg: #30343f;
    --icat-post-blockquote-bg: #000;
    --icat-post-tabs-bg: #121212;
    --icat-secondbg: #30343f;
    --icat-shadow-nav: 0 5px 20px 0px rgba(28, 28, 28, 0.4);
    --icat-card-bg: #1d1e22;
    --icat-card-bg-op: var(--icat-white-op);
    --icat-card-bg-none: #1d1b2600;
    --icat-shadow-lightblack: 0 5px 12px -5px rgba(102, 68, 68, 0.0);
    --icat-shadow-light2black: 0 5px 12px -5px rgba(102, 68, 68, 0.0);
    --icat-card-border: #3d3d3f;
    --icat-shadow-border: 0 8px 16px -4px #00000050;
    --icat-tabs-background: #81d8cf;
    --icat-footer-background: linear-gradient(90deg, rgba(247, 149, 51, 0.1) 0, rgba(243, 112, 85, 0.1) 15%, rgba(239, 78, 123, 0.1) 30%, rgba(161, 102, 171, 0.1) 44%, rgba(80, 115, 184, 0.1) 58%, rgba(16, 152, 173, 0.1) 72%, rgba(7, 179, 155, 0.1) 86%, rgba(109, 186, 130, 0.1) 100%);
    --style-border: 1px solid var(--icat-card-border);
    --style-border-always: 1px solid var(--icat-card-border);
    --style-border-hover: 1px solid var(--icat-theme);
    --style-border-hover-always: 1px solid var(--icat-theme);
    --style-border-dashed: 1px dashed var(--icat-theme-op);
    --style-border-forever: 2px solid var(--icat-lighttext);
  }
]]> 经验分享 Butterfly主题 Hexo https://meuicat.com/posts/b73eab56.html#disqus_thread Hexo 博客添加RSS插件 https://meuicat.com/posts/934154a5.html https://meuicat.com/posts/934154a5.html Tue, 19 Oct 2021 18:37:25 GMT RSS订阅插件安装 前言

兜兜转转的，博客变迁也有两三年了
因为觉得不会有人专门看我的博客，所以才一直没有加像样的订阅功能
这次使用Hexo静态博客，专门放在GitHub上，就不用忘记续费服务器而被删库的烦恼了

本篇就介绍下用 Hexo 构建的博客，如何添加 RSS 订阅功能

下载RSS插件

RSS官方地址

RSS·GitHub
魔改下博客导航栏居中显示，以及PE端的菜单栏样式

下载插件

首先添加功能插件，在 Hexo 项目根目录下执行该命令

1
yarn add hexo-generator-feed
  • 步骤：
  • 右键Hexo 项目根目录空白处
  • 选择”Git Bash”
  • 粘贴命令回车等待即可

添加配置

上一步下载完成后，打开Hexo 项目根目录下的 “_config.yml” 文件中末端添加配置

1
2
3
4
feed:
    type: atom
    path: atom.xml
    limit: 20

然后再在Hexo 主题目录下的 “_config.xxx.yml” 文件中末端添加配置即可

1
rss: /atom.xml

生成RSS静态文件

1
hexo clean && hexo g

随后在 “public” 文件夹中就会生成 “atom.xml” 文件
部署后直接在根目录中访问该文件即可

故本博客RSS链接：https://meuicat.com/atom.xml

配置含义

  • type: RSS的类型(atom/rss2)
  • path: 文件路径，默认是 atom.xml/rss2.xml
  • limit: 展示文章的数量,使用 0 或则 false 代表展示全部
  • hub: URL of the PubSubHubbub hubs (如果使用不到可以为空)
  • content: （可选）设置 true 可以在 RSS 文件中包含文章全部内容，默认：false
  • content_limit: （可选）摘要中使用的帖子内容的默认长度。 仅在内容设置为false且未显示自定义帖子描述时才使用
  • content_limit_delim: （可选）If content_limit is used to shorten post contents, only cut at the last occurrence of this delimiter before reaching the character limit. Not used by default.
  • order_by: 订阅内容的顺序. (默认: -date)

（后面几个选项一般用不到，有两个也没找到比较准确的翻译，所以放上原文，如果你知道就留言吧~）

]]> 知识笔记 Butterfly主题 Hexo 插件 https://meuicat.com/posts/934154a5.html#disqus_thread Butterfly的魔改教程：导航栏魔改美化 https://meuicat.com/posts/2dbd58d6.html https://meuicat.com/posts/2dbd58d6.html Tue, 19 Oct 2021 08:09:06 GMT 魔改一下博客导航栏居中显示，以及PE端的菜单栏样式

📚 更多文档目录

🚀 搭建教程 | 1 - 📑 前置教程 | 2 - 🎈 主题调整 | 3 - ✨ 魔改教程 | 4 - 🐈 重构自用数据记录

本篇教程基于 Hexo 6.3.0 & Butterfly 4.8.5 为博主的魔改教程记录，以防自己日后因魔改迷失所记录 📝

本小节最后更新于 2024 年 01 月 08 日

240108 更新：修复&注意事项。更新调整后的nav.pug缩进问题，以及icon图标库链接。（感谢@追梦小何的反馈）

230707 更新：glup-css压缩后PC魔改菜单栏样式缺漏，已解决

注意：本节教程使用了iCat自建的腾讯CoDesign图标库。请注意修改i标签的图标，如果你需要使用iCat图标库，那么你需要在主题配置文件inject配置项的head处新增以下内容：

1
2
3
inject:
  head:
    - <link rel="stylesheet" href="https://cdn2.codesign.qq.com/icons/XMx86jzlQw0brz3/latest/iconfont.css"> # 腾讯iconfont - 图标库

PC菜单栏

  • 要让搜索栏在最右侧，而其它元素居中，这时我们需要修改一下pug文件

  • 修改 [blogRoot]\themes\Butterfly\layout\includes\header\nav.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
nav#nav
  span#blog-info
    a(href=url_for('/') title=config.title)
      if theme.nav.logo
        img.site-icon(src=url_for(theme.nav.logo))
      if theme.nav.display_title
        span.site-name=config.title
    
  #menus
-    if (theme.algolia_search.enable || theme.local_search.enable)
-      #search-button
-        a.site-page.social-icon.search
-          i.fas.fa-search.fa-fw
-          span=' '+_p('search.title')
  !=partial('includes/header/menu_item', {}, {cache: true})
+  #nav-right
+    if (theme.algolia_search.enable || theme.local_search.enable)
+      #search-button
+        a.site-page.social-icon.search
+          i.fas.fa-search.fa-fw
+    #toggle-menu
+      a.site-page
+        i.fas.fa-bars.fa-fw
+       #toggle-menu
+         a.site-page
+           i.fas.fa-bars.fa-fw
个人调整的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
nav#nav
  div#nav-group
    span#blog-info
      a(href=url_for('/') title="回到主页")
        if theme.nav.logo
          img.site-icon(src=url_for(theme.nav.logo))
        if theme.nav.display_title
          span.site-name=theme.nav.title
      
    #menus
      !=partial('includes/header/menu_item', {}, {cache: true})
    #nav-right
      #travellings
        a.site-page(href=url_for('https://travellings.cn/go.html') title="随机前往一个开往项目网站")
          i.iconfont.icat-subway
      #random
        a.site-page(href=url_for('javascript:toRandomPost()') title="随机前往一个文章")
          i.iconfont.icat-random
      if (theme.algolia_search.enable || theme.local_search.enable)
        #search-button
          a.site-page.social-icon.search
            i.iconfont.icat-search
      #toggle-menu
        a.site-page(href="javascript:void(0);" title="搜索本站文章")
          i.iconfont.icat-bars

  • 调整顶部菜单居中

  • 在自建的CSS文件 [blogRoot]/source/css/icat.css 里新增以下内容

1
2
3
4
5
6
7
8
9
#nav-right{
  flex:1 1 auto;
  justify-content: flex-end;
  margin-left: auto;
  display: flex;
  flex-wrap:nowrap;
}
  
/* 导航栏居中 */
个人调整的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
#nav-right{
    flex:1 1 auto;
    justify-content: flex-end;
    margin-left: auto;
    display: flex;
    flex-wrap:nowrap;
}
/* 菜单栏居中 */

#blog-info a:hover {
    background: var(--icat-blue);
    transition: background .3s;
    border-radius: 8px;
}
#blog-info a:hover .site-name {
    color: var(--icat-blue) !important;
    position: relative;
    text-shadow: 0 0 transparent;
}
#blog-info a:hover .site-name:after {
    position: absolute;
    display: flex;
    top: 0;
    width: 100%;
    height: 100%;
    content: "\e03a";
    font-family: "iconfont" !important;
    font-size: 22px;
    line-height: 1;
    color: var(--icat-white);
    justify-content: center;
    align-items: center;
}
@media screen and (max-width: 768px) {
    #blog-info a:hover {
        background: 0;
        transition: unset;
        border-radius: 0;
    }
    #blog-info a:hover .site-name {
        color: var(--icat-blue) !important;
        position: relative;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.15);
    }
    #blog-info a:hover .site-name:after {
        display: none;
    }
}
/* 主页按钮 */

#nav.show {
    display: flex;
    justify-content: center;
}
#nav .site-page {
    padding-bottom: 14px;
}
#page-header.not-top-img #nav {
    display: flex;
    justify-content: center;
    border-bottom: 1px solid var(--icat-secondbg);
}
#nav-group {
    width: 1400px;
    display: flex;
    align-items: center;
    padding: 0 0.6rem;
    margin-left: auto;
    margin-right: auto;
}
/* 顶部栏宽度定义 */

#nav .menus_items .menus_item .menus_item_child, #nav .menus_items .icat_menus_item .menus_item_child {
    margin-top: 14px;
    border: 1px solid var(--icat-secondbg);
}
#nav .menus_items .menus_item .menus_item_child li a, #nav .menus_items .icat_menus_item .menus_item_child li a {
    padding: 8px 34px;
    text-align: center;
}
#travellings {
    padding: 0 14px 0 0;
}

/* PC菜单栏美化 */

PE菜单栏

  • 在自建的CSS文件 [blogRoot]/source/css/icat.css 里新增以下内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#sidebar #sidebar-menus .menus_items .menus_item {
    margin: 10px 0;
}
#sidebar #sidebar-menus .menus_items a.site-page {
    padding-left: 0;
}
#sidebar #sidebar-menus .menus_items .site-page {
    position: relative;
    display: block;
    padding: 6px 30px 6px 22px;
    color: var(--font-color);
    font-size: 1.15em;
    border: var(--style-border-always);
    background: var(--icat-card-bg);
    font-size: 14px;
    border-radius: 12px;
}
#sidebar #sidebar-menus .menus_items .site-page i:first-child {
    text-align: left;
    padding-left: 10px;
}
  • 修改 [blogRoot]/themes/butterfly/layout/includes/header/menu_item.pug 页面里的内容
    （ + 号直接删除 即是正常缩进）
1
2
3
4
5
6
7
8
9
10
if theme.menu
  .menus_items
    each value, label in theme.menu
      if typeof value !== 'object'
-       .menus_item
+        .icat_menus_item
          - const valueArray = value.split('||')
          a.site-page(href=url_for(trim(valueArray[0])))

    ···
  • 修改 [blogRoot]/themes/butterfly/source/css/_layout/head.styl 里第三百一十一 至 三百二十一行的内容
    （ + 号直接删除 即是正常缩进）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    ···

  .menus_items
    display: inline

    .menus_item
+    .icat_menus_item
      position: relative
      display: inline-block
      padding: 0 0 0 14px

      &:hover
        .menus_item_child
          display: block

    ···
  • 修改 [blogRoot]/themes/butterfly/source/css/_layout/sidebar.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
    ···

    .menus_items
      padding: 0 10px 40px

+      .menus_item
+        margin: 10px 0

      .site-page
        @extend .limit-one-line
        position: relative
        display: block
        padding: 6px 30px 6px 22px
        color: var(--font-color)
        font-size: 1.15em
+        border: var(--icat-style-border-always)
+        background: var(--icat-essay-card-bg)
+        font-size: 14px
+        border-radius: 12px

        &:hover
          background: var(--text-bg-hover)

        i:first-child
          width: 15%
          text-align: left
+          padding-left: 10px

        &.group
          & > i:last-child
            position: absolute
            top: .78em
            right: 18px
            transition: transform .3s

          &.hide
            & > i:last-child
              transform: rotate(90deg)

            & + .menus_item_child
              display: none

      .menus_item_child
        margin: 0
        list-style: none
        padding-top: 6px

+#sidebar
+  #sidebar-menus
+    .icat_menus_item
+      display: inline-block
+      width: 50%
+
+      .site-page
+        text-align: center
+        margin: 4px
+        display: flex
+        flex-direction: column
+        align-items: center
+        padding: 8px 0
+        border-radius: 12px
+        font-size: 14px
+
+        i:first-child
+          padding-left: 0
+
+        & > .icat-essay
+          font-weight: 500
+
+        span
+          margin-top: -8px
  • 在自建的CSS文件 [blogRoot]/source/css/icat.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
#sidebar #sidebar-menus .menus_items .menus_item_child {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -o-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -o-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
#sidebar #sidebar-menus .menus_items a.site-page, #sidebar .menus_item ul {
    padding-left: 0;
}
#sidebar #sidebar-menus .menus_item_child li {
    width: calc(50% - 8px);
    margin: 4px;
}
#sidebar #sidebar-menus .menus_item_child .site-page.child {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -o-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 8px;
    border-radius: 12px;
    border: var(--style-border-always);
    background: var(--icat-card-bg);
    font-size: 14px;
}
#nav.hide-menu #toggle-menu {
    padding: 0 0 0 12px;
}
#sidebar #sidebar-menus .icat_menus_item .site-page {
    text-align: center;
    margin: 4px;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -o-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 8px 0;
    border-radius: 12px;
    font-size: 14px;
}
@media screen and (max-width: 768px) {
    #sidebar #sidebar-menus .menus_items .site-page.group > i:last-child {
        margin-top: 4px;
    }
    #sidebar #sidebar-menus .menus_items .icat_menus_item .site-page i:first-child {
        text-align: center;
        padding-left: 0;
    }
}
/* 子菜单美化 */

#sidebar .open > .avatar-img img {
    height: 100px;
    width: 100px;
    border-radius: 50%;
}
#sidebar .open > .avatar-img img {
    border: 5px #fff solid;
}
#sidebar .open > .avatar-img::before {
    bottom: 8px;
    height: 12px;
    width: 12px;
}
#sidebar .open > .avatar-img::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translate(65%);
    background: #6bdf8f;
    border: 5px solid #fff;
    border-radius: 50%;
    transition: filter 375ms ease-in .2s,transform .3s;
    z-index: 2;
}
/* 头像美化 */

#sidebar #sidebar-menus .sidebar-site-data {
    padding: 0;
    margin-left: 10px;
    background: var(--icat-card-bg);
    border-radius: 12px;
    border: var(--style-border-always);
}
@media screen and (max-width: 768px) {
    .site-data {
        width: 94%;
    }
}
/* 侧边栏的统计栏美化 */
  
/* PE端菜单栏美化 */

IPAD适配菜单栏

  • 在自建的CSS文件 [blogRoot]/source/css/icat.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
#nav #menus {
    display: flex;
    justify-content: center;
    width: 100%;
    position: absolute;
    left: 0;
    margin: 0;
    transform: translateZ(0);
}
#nav #blog-info {
    flex-wrap: nowrap;
    display: flex;
    align-items: center;
    z-index: 102;
    max-width: fit-content;
}
@media screen and (max-width: 900px) {
    #nav {
        padding: 0 15px;
    }
    #nav-group {
        padding: 0 0.2rem;
    }
    #rightside {
        right: -42px;
    }
}
/* IPAD菜单栏调整 */
]]> 经验分享 Butterfly主题 魔改记录 https://meuicat.com/posts/2dbd58d6.html#disqus_thread