博客复现

小懒叨叨

为了因为过度美化加上版本更新而导致的错误，为此博主专门整理了自己美化记录，方便快速找出错误。

安装Git和Node.js

  1. Node.js 官网：让 JAVAscript 成为与 PHP、Python、Perl、Ruby 等服务器语言平起平坐的脚本语言。（我下载的版本为16.17.0）

  2. Git官网：开源分布式版本控制系统，可以有效、高速地处理从很小到非常大的项目版本管理。（我下载的版本为2.37.3）

配置Node.js

配置Node.js

查看npm默认存放位置

查看npm全局模块存放路径

1
npm get prefix

查看npm缓存存放路径

1
npm get cache

在Nodejs安装目录下，创建“node_global” 和 “node_cache” 两个文件夹

修改默认保存文件夹

设置全局模块的安装路径到 “node_global” 文件夹

1
npm config set prefix "E:\Blog environment\node\node_global"

设置缓存到 “node_cache” 文件夹

1
npm config set cache "E:\Blog environment\node\node_cache"

测试默认位置是否更改成功

1
npm install express -g

注意：可能会出现以下报错

修改Node.js安装文件夹的权限就可以了

image-20221006101730995

设置淘宝镜像

查看当前使用的镜像路径

1
npm config get registry

更换npm为淘宝镜像

1
npm config set registry https://registry.npm.taobao.org/

检测是否配置成功

1
npm config get registry

检验软件是否安装成功

1
2
3
git --version
node -v
npm -v

安装 hexo

参考教程安知鱼：https://anheyu.com/posts/ddae.html

1
2
3
4
npm install hexo-cli -g
hexo init
npm install hexo-deployer-git --save
npm install hexo-renderer-pug hexo-renderer-stylus --save

安装anzhiyu

安装anzhiyu

参考教程： 安知鱼主题指南 (anzhiy.cn)

1
git clone -b main https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git themes/anzhiyu

在_config.yml中添加

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: anzhiyu

部署到github

鱼佬的教程写的非常好了，Github Action 自动部署 | 安知鱼 (anzhiy.cn)。

功能插件

配置文章链接转数字或字母（SEO）

配置文章链接转数字或字母（SEO）

参考链接：https://github.com/rozbo/hexo-abbrlink

1
npm install hexo-abbrlink --save

在_config.yml中添加

1
2
3
4
5
6
7
8
9
10
11
12
# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://luomengguo.top/ #这里的url填写你的博客网址
permalink: posts/:abbrlink.html #这里和我的一样
# 文章链接转数字或字母：https://github.com/rozbo/hexo-abbrlink
abbrlink:
	alg: crc16   #算法： crc16(default) and crc32
	rep: hex     #进制： dec(default) and hex: dec #输出进制：十进制和十六进制，默认为10进制。丨dec为十进制，hex为十六进制
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

本地搜索依赖

本地搜索依赖

参考链接：https://github.com/wzpan/hexo-generator-search

1
npm install hexo-generator-search --save

在_config.yml中添加

1
2
3
4
5
# 本地搜索：https://github.com/wzpan/hexo-generator-search
search:
  path: search.xml
  field: all
  content: true

爬虫爬取网页

爬虫爬取网页

sitemap，Rss

1
2
3
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save-dev
npm install hexo-generator-feed --save

在_config.yml中添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# https://github.com/hexojs/hexo-generator-sitemap
sitemap:
  path: sitemap.xml
  rel: false
  tags: true
  categories: true
# https://github.com/coneycode/hexo-generator-baidu-sitemap
baidusitemap:
    path: baidusitemap.xml
# https://github.com/hexojs/hexo-generator-feed
#Feed Atom
feed:
    type: atom
    path: atom.xml
    limit: 20
rss: /atom.xml
# Extensions
plugins:
    - hexo-generator-feed
    - hexo-generator-baidu-sitemap
    - hexo-generator-sitemap

追番插件

追番插件 
1
npm install hexo-bilibili-bangumi --save

在_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
# 追番插件
# https://github.com/HCLonely/hexo-bilibili-bangumi
bangumi: # 追番设置
  enable: true
  path:
  vmid: 491478728 #这里填写自己B站的uid
  title: '追番列表'
  quote: '生命不息，追番不止！'
  show: 1
  lazyload: false
  loading:
  metaColor:
  color:
  webp:
  progress:
  extra_options:
    key: value
cinema: # 追剧设置
  enable: true
  path:
  vmid: 491478728 #这里填写自己B站的uid
  title: '追剧列表'
  quote: '生命不息，追剧不止！'
  show: 1
  lazyload: true
  loading:
  metaColor:
  color:
  webp:
  progress:
  extra_options:
    key: value

百度主动推送

百度主动推送 
1
npm install hexo-baidu-url-submit --save

在_config.yml中添加

1
2
3
4
5
6
7
# 百度主动推送
# https://github.com/huiwang/hexo-baidu-url-submit
baidu_url_submit:
  count: 10        # 提交最新的多少个链接
  host: luomengguo.top  # 在百度站长平台中添加的域名
  token:    # 秘钥，百度站长平台 > 推送接口 > 接口调用地址中token字段
  path: baidu_urls.txt   # 文本文档的地址， 新链接会保存在此文本文档里

使用gulp压缩博客静态资源

参考教程：Gitcalendar | Akilarの糖果屋

配置gulp压缩博客静态资源

必要插件

1
2
3
4
5
6
7
8
9
10
11
12
npm install --global gulp-cli #全局安装gulp指令集
npm install gulp --save #安装gulp插件
#压缩HTML
npm install gulp-htmlclean --save-dev
npm install gulp-html-minifier-terser --save-dev

#css压缩
npm install gulp-clean-css --save-dev
#js压缩
npm install gulp-terser --save-dev
#字体压缩
npm install gulp-fontmin --save-dev

为Gulp创建gulpfile.js任务脚本。在博客根目录[Blogroot]下新建gulpfile.js,打开[Blogroot]\gulpfile.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
//用到的各个插件
var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
var htmlmin = require('gulp-html-minifier-terser');
var htmlclean = require('gulp-htmlclean');
var fontmin = require('gulp-fontmin');
// gulp-tester
var terser = require('gulp-terser');
// 压缩js
gulp.task('compress', async() =>{
  gulp.src(['./public/**/*.js', '!./public/**/*.min.js'])
    .pipe(terser())
    .pipe(gulp.dest('./public'))
});
//压缩css
gulp.task('minify-css', () => {
    return gulp.src(['./public/**/*.css'])
        .pipe(cleanCSS({
            compatibility: 'ie11'
        }))
        .pipe(gulp.dest('./public'));
});
//压缩html
gulp.task('minify-html', () => {
    return gulp.src('./public/**/*.html')
        .pipe(htmlclean())
        .pipe(htmlmin({
            removeComments: true, //清除html注释
            collapseWhitespace: true, //压缩html
            collapseBooleanAttributes: true,
            //省略布尔属性的值，例如：<input checked="true"/> ==> <input />
            removeEmptyAttributes: true,
            //删除所有空格作属性值，例如：<input id="" /> ==> <input />
            removeScriptTypeAttributes: true,
            //删除<script>的type="text/javascript"
            removeStyleLinkTypeAttributes: true,
            //删除<style>和<link>的 type="text/css"
            minifyJS: true, //压缩页面 JS
            minifyCSS: true, //压缩页面 CSS
            minifyURLs: true  //压缩页面URL
        }))
        .pipe(gulp.dest('./public'))
});
//压缩字体
function minifyFont(text, cb) {
  gulp
    .src('./public/fonts/*.ttf') //原字体所在目录
    .pipe(fontmin({
      text: text
    }))
    .pipe(gulp.dest('./public/fontsdest/')) //压缩后的输出目录
    .on('end', cb);
}

gulp.task('mini-font', (cb) => {
  var buffers = [];
  gulp
    .src(['./public/**/*.html']) //HTML文件所在目录请根据自身情况修改
    .on('data', function(file) {
      buffers.push(file.contents);
    })
    .on('end', function() {
      var text = Buffer.concat(buffers).toString('utf-8');
      minifyFont(text, cb);
    });
});
// 运行gulp命令时依次执行以下任务
gulp.task('default', gulp.parallel(
  'compress', 'minify-css', 'minify-html','mini-font'
))

在每次运行完hexo generate生成静态页面后，运行gulp对其进行压缩。指令流程如下：

1
2
3
4
hexo clean
hexo generate
gulp
hexo server 或 hexo deploy

留言板：薇尔莉特信封

留言板：薇尔莉特信封 
1
npm install hexo-butterfly-envelope --save

在主题文件_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
# envelope_comment
# see https://akilar.top/posts/e2d3c450/
# envelope_comment
# see https://akilar.top/posts/e2d3c450/
envelope_comment:
  enable: true #控制开关
  custom_pic:
    cover: https://cdn.cbd.int//hexo-butterfly-envelope/lib/violet.jpg #信笺头部图片
    line: https://cdn.cbd.int/hexo-butterfly-envelope/lib/line.png #信笺底部图片
    beforeimg: https://cdn.cbd.int/hexo-butterfly-envelope/lib/before.png # 信封前半部分
    afterimg: https://cdn.cbd.int/hexo-butterfly-envelope/lib/after.png # 信封后半部分
  message: #信笺正文，多行文本，写法如下
    - 有什么想问的？
    - 有什么想说的？
    - 有什么想吐槽的？
    - 哪怕是有什么想吃的，都可以告诉我哦~
  bottom: 自动书记人偶竭诚为您服务！ #仅支持单行文本
  height: #1050px，信封划出的高度
  path: #【可选】comments 的路径名称。默认为 comments，生成的页面为 comments/index.html
  front_matter: #【可选】comments页面的 front_matter 配置
    title: 留言板
    comments: true

在主题文件_config.butterfly.yml中找到menu配置项添加以下代码

1
留言板: /comments/ || fas fa-envelope

使用 Github Action 实现全自动部署

参考链接https://blog.anheyu.com/posts/asdx.html

Gitcalendar（github贡献图配置）

参考链接：https://akilar.top/posts/1f9c68c9/

站点动态 title

站点动态title

在E:\blog\dream\source\js路径下新建title.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//动态标题
var OriginTitile = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
  if (document.hidden) {
    //离开当前页面时标签显示内容
    document.title = 'w(ﾟДﾟ)w 不要走！再看看嘛！';
    clearTimeout(titleTime);
  } else {
    //返回当前页面时标签显示内容
    document.title = '♪(^∇^*)欢迎肥来！' + OriginTitile;
    //两秒后变回正常标题
    titleTime = setTimeout(function () {
      document.title = OriginTitile;
    }, 2000);
  }
});

在主题文件_config.butterfly.yml中找到inject配置项添加下面代码，注意缩进。

1
2
3
4
inject:
  head:
  bottom:
+     - <script type="text/javascript" src="/js/title.js"></script>

评论配置

参考视频链接：23.butterfly配置twikoo评论系统_哔哩哔哩_bilibili

输入打字效果

参考链接：ヾ(≧▽≦*)o上当了吧嘿嘿 (zhangshier.vip)

打字效果

配置文件_config.butterfly.yml

1
2
3
4
5
6
7
# Typewriter Effect (打字效果)
# https://github.com/disjukr/activate-power-mode
activate_power_mode:
  enable: true
  colorful: true # open particle animation (冒光特效)
  shake: true #  open shake (抖动特效)
  mobile: false

字数统计

字数统计

安装依赖

1
npm install hexo-wordcount --save or yarn add hexo-wordcount

修改主题配置文件_config.butterfly.yml

1
2
3
4
5
6
# wordcount (字數統計)
wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true

夜间模式

夜间模式

配置文件_config.butterfly.yml，默认开启

1
2
3
4
5
6
# dark mode
darkmode:
  enable: true
  # dark mode和 light mode切换按钮
  button: true
  autoChangeMode: false

V2.0.0 开始增加一个选项，可开启自动切换 light mode 和 dark mode

autoChangeMode: 1 跟随系统而变化，不支持的浏览器 / 系统将按照时间晚上 6 点到早上 6 点之间切换为 dark mode

autoChangeMode: 2 只按照时间 晚上 6 点到早上 6 点之间切换为 dark mode, 其余时间为 light mode

autoChangeMode: false 取消自动切换

twikoo 评论美化

参考链接：twikoo评论块气泡风格魔改美化 | Akilarの糖果屋

twikoo 评论美化

在E:\blog\dream\source\css新建twikoo.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
/* 自定义twikoo评论输入框高度 */
.tk-input[data-v-619b4c52] .el-textarea__inner {
  height: 130px !important;
}
/* 输入评论时自动隐藏输入框背景图片 */
.tk-input[data-v-619b4c52] .el-textarea__inner:focus {
  background-image: none !important;
}
/* 调整楼中楼样式 ，整体左移，贴合气泡化效果 */
.tk-replies {
  left: -70px;
  width: calc(100% + 70px);
}
/* 头像宽度调整 rem单位与全局字体大小挂钩，需配合自己情况调整大小以保证头像显示完整*/
.tk-replies .tk-avatar {
  width: 2.5rem !important;
  height: 2.5rem !important;
}
.tk-replies .tk-avatar img {
  width: 2.5rem !important;
  height: 2.5rem !important;
}
/* 回复框左移，避免窄屏时出框 */
.tk-comments-container .tk-submit {
  position: relative;
  left: -70px;
}
/* 评论块气泡化修改 */
.tk-content {
  background: #00a6ff; /*默认模式访客气泡配色*/
  padding: 10px;
  color: #fff; /*默认模式访客气泡字体配色*/
  border-radius: 10px;
  font-size: 16px !important;
  width: fit-content;
  max-width: 100%;
  position: relative !important;
  overflow: visible !important;
  max-height: none !important;
}
/* 修复图片出框 */
.tk-content img {
  max-width: 100% !important;
}
/* 修复过长文本出框 */
.tk-content pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}
.tk-content a {
  color: #eeecaa; /*默认模式超链接配色*/
}
.tk-content::before {
  content: '';
  width: 0;
  height: 0;
  position: absolute;
  top: 20px;
  left: -13px;
  border-top: 2px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 15px solid #00a6ff; /*默认模式访客气泡小三角配色*/
  border-left: 0px solid transparent;
}
.tk-master .tk-content {
  background: #ff8080; /*默认模式博主气泡配色*/
  color: #fff; /*默认模式博主气泡字体配色*/
  width: fit-content;
  max-width: 100%;
}
.tk-master .tk-content a {
  color: #eeecaa;
}
.tk-master .tk-content::before {
  content: '';
  width: 0;
  height: 0;
  position: absolute;
  top: 20px;
  left: -13px;
  border-top: 2px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 15px solid #ff8080; /*默认模式博主气泡小三角配色*/
  border-left: 0px solid transparent;
}
.tk-row[data-v-d82ce9a0] {
  max-width: 100%;
  width: fit-content;
}
.tk-avatar {
  border-radius: 50%;
  margin-top: 10px;
}

/* 夜间模式配色，具体比照上方默认模式class */
[data-theme="dark"] .tk-content {
  background: #000;
  color: #fff;
}
[data-theme="dark"] .tk-content a {
  color: #dfa036;
}
[data-theme="dark"] .tk-content::before {
  border-right: 15px solid #000;
}
[data-theme="dark"] .tk-master .tk-content {
  background: #000;
  color: #fff;
}
[data-theme="dark"] .tk-master .tk-content a {
  color: #dfa036;
}
[data-theme="dark"] .tk-master .tk-content::before {
  border-top: 2px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 15px solid #000;
  border-left: 0px solid transparent;
}
/* 自适应内容 */
@media screen and (min-width: 1024px) {
  /* 设置宽度上限，避免挤压博主头像 */
  .tk-content {
    max-width: 75%;
    width: fit-content;
  }
  .tk-master .tk-content {
    width: 75%;
  }
  .tk-master .tk-content::before {
    left: 100%;
    border-left: 15px solid #ff8080;
    border-right: 0px solid transparent;
  }
  .tk-master .tk-avatar {
    position: relative;
    left: calc(75% + 70px);
  }
  .tk-master .tk-row[data-v-d82ce9a0] {
    position: relative;
    top: 0px;
    left: calc(75% - 230px);
  }
  [data-theme="dark"] .tk-master .tk-content::before {
    border-left: 15px solid #000;
    border-right: 0px solid transparent;
  }
}
/* 设备名称常态隐藏，悬停评论时显示 */
.tk-extras {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
.tk-content:hover + .tk-extras {
  -webkit-animation: tk-extras-fadeIn 0.5s linear;
  -moz-animation: tk-extras-fadeIn 0.5s linear;
  -o-animation: tk-extras-fadeIn 0.5s linear;
  -ms-animation: tk-extras-fadeIn 0.5s linear;
  animation: tk-extras-fadeIn 0.5s linear;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@-moz-keyframes tk-extras-fadeIn {
  from {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@-webkit-keyframes tk-extras-fadeIn {
  from {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@-o-keyframes tk-extras-fadeIn {
  from {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@keyframes tk-extras-fadeIn {
  from {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}

修改_config.butterfly.yml的inject配置项

1
2
3
  inject:
    head:
+     - <link rel="stylesheet" href="/css/twikoo.css"  media="defer" onload="this.media='all'">

Twikoo 回复邮件模板

参考链接：Twikoo评论回复邮件模板：Acrylic Mail 粉 | 张洪Heo (zhheo.com)

Twikoo 回复邮件模板 
1
<div class="page flex-col"><div class="box_3 flex-col" style="  display: flex;  position: relative;  width: 100%;  height: 206px;  background: #ef859d2e;  top: 0;  left: 0;  justify-content: center;"><div class="section_1 flex-col" style="  background-image: url(&quot;这里更改为你的网站图标&quot;);  position: absolute;  width: 152px;  height: 152px;  display: flex;  top: 130px;  background-size: cover;"></div></div><div class="box_4 flex-col" style="  margin-top: 92px;  display: flex;  flex-direction: column;  align-items: center;"><div class="text-group_5 flex-col justify-between" style="  display: flex;  flex-direction: column;  align-items: center;  margin: 0 20px;"><span class="text_1" style="  font-size: 26px;  font-family: PingFang-SC-Bold, PingFang-SC;  font-weight: bold;  color: #000000;  line-height: 37px;  text-align: center;">嘿！你在&nbsp;${SITE_NAME}&nbsp;博客中收到一条新回复。</span><span class="text_2" style="  font-size: 16px;  font-family: PingFang-SC-Bold, PingFang-SC;  font-weight: bold;  color: #00000030;  line-height: 22px;  margin-top: 21px;  text-align: center;">你之前的评论&nbsp;在&nbsp;${SITE_NAME} 博客中收到来自&nbsp;${NICK}&nbsp;的回复</span></div><div class="box_2 flex-row" style="  margin: 0 20px;  min-height: 128px;  background: #F7F7F7;  border-radius: 12px;  margin-top: 34px;  display: flex;  flex-direction: column;  align-items: flex-start;  padding: 32px 16px;  width: calc(100% - 40px);"><div class="text-wrapper_4 flex-col justify-between" style="  display: flex;  flex-direction: column;  margin-left: 30px;  margin-bottom: 16px;"><span class="text_3" style="  height: 22px;  font-size: 16px;  font-family: PingFang-SC-Bold, PingFang-SC;  font-weight: bold;  color: #C5343E;  line-height: 22px;">${PARENT_NICK}</span><span class="text_4" style="  margin-top: 6px;  margin-right: 22px;  font-size: 16px;  font-family: PingFangSC-Regular, PingFang SC;  font-weight: 400;  color: #000000;  line-height: 22px;">${PARENT_COMMENT}</span></div><hr style="    display: flex;    position: relative;    border: 1px dashed #ef859d2e;    box-sizing: content-box;    height: 0px;    overflow: visible;    width: 100%;"><div class="text-wrapper_4 flex-col justify-between" style="  display: flex;  flex-direction: column;  margin-left: 30px;"><hr><span class="text_3" style="  height: 22px;  font-size: 16px;  font-family: PingFang-SC-Bold, PingFang-SC;  font-weight: bold;  color: #C5343E;  line-height: 22px;">${NICK}</span><span class="text_4" style="  margin-top: 6px;  margin-right: 22px;  font-size: 16px;  font-family: PingFangSC-Regular, PingFang SC;  font-weight: 400;  color: #000000;  line-height: 22px;">${COMMENT}</span></div><a class="text-wrapper_2 flex-col" style="  min-width: 106px;  height: 38px;  background: #ef859d38;  border-radius: 32px;  display: flex;  align-items: center;  justify-content: center;  text-decoration: none;  margin: auto;  margin-top: 32px;" href="${POST_URL}"><span class="text_5" style="  color: #DB214B;">查看详情</span></a></div><div class="text-group_6 flex-col justify-between" style="  display: flex;  flex-direction: column;  align-items: center;  margin-top: 34px;"><span class="text_6" style="  height: 17px;  font-size: 12px;  font-family: PingFangSC-Regular, PingFang SC;  font-weight: 400;  color: #00000045;  line-height: 17px;">此邮件由评论服务自动发出，直接回复无效。</span><a class="text_7" 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>

使用方法

image-20221010201029131image-20221010201150572image-20221010201240968

首页分类磁贴新版

首页分类磁贴新版

1.安装插件，在博客根目录 [Blogroot] 下打开终端，运行以下指令：

1
npm install hexo-butterfly-categories-card --save

2.添加配置信息，以下为写法示例
在站点配置文件_config.yml 或者主题配置文件_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
# hexo-butterfly-categories-card
# see https://akilar.top/posts/a9131002/
categoryBar:
  enable: true # 开关
  priority: 5 #过滤器优先权
  enable_page: / # 应用页面
  layout: # 挂载容器类型
    type: id
    name: recent-posts
    index: 0
  column: odd # odd：3列 | even：4列
  row: 1 #显示行数，默认两行，超过行数切换为滚动显示
  message:
    - descr: 博学大脑
      cover: https://s3.bmp.ovh/imgs/2022/11/06/e456de6025f77b9d.jpg
    - descr: 课外拓展
      cover: https://s3.bmp.ovh/imgs/2022/11/06/95cafd93d5f33e1f.jpg
    - descr: 知识输出
      cover: https://s3.bmp.ovh/imgs/2022/11/06/d1e82ad9d77adbfe.jpg
    - descr: 展望未来
      cover: https://s3.bmp.ovh/imgs/2022/11/06/4d626393dfd6d3ee.jpg
    - descr: 共享资源
      cover: https://s3.bmp.ovh/imgs/2022/11/06/c9cb1db8f3c54ad6.jpg
    - descr: 记录生活
      cover: https://s3.bmp.ovh/imgs/2022/11/06/0f902b7bcd57d28a.jpg
  custom_css: https://npm.elemecdn.com/hexo-butterfly-categories-card@1.0.0/lib/categorybar.css

3.参数释义

image-20221106225525699

文章置顶滚动栏

文章置顶滚动栏

1.安装插件，在博客根目录 [Blogroot] 下打开终端，运行以下指令：

1
npm install hexo-butterfly-swiper --save

2.添加配置信息，以下为写法示例
在站点配置文件_config.yml 或者主题配置文件_config.butterfly.yml 中添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# hexo-butterfly-swiper
# see https://akilar.top/posts/8e1264d1/
swiper:
  enable: true # 开关
  priority: 5 #过滤器优先权
  enable_page: all # 应用页面
  timemode: date #date/updated
  layout: # 挂载容器类型
    type: id
    name: recent-posts
    index: 0
  default_descr: 再怎么看我也不知道怎么描述它的啦！
  swiper_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.css #swiper css依赖
  swiper_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js #swiper js依赖
  custom_css: /css/swiperstyle.css  # 适配主题样式补丁
  custom_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper_init.js # swiper初始化方法

3.参数释义

image-20221106230235483

使用方法：1.在scaffolds\post.md文件里添加 swiper_index 配置项即可。

2.也可以在文章页头里面直接添加swiper_index

1
2
3
4
5
6
7
8
---
title: 文章标题
date: 创建日期
updated: 更新日期
cover: 文章封面
description: 文章描述
swiper_index: 1 #置顶轮播图顺序，非负整数，数字越大越靠前
---

自定义颜色

复制里面的内容https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiperstyle.css 在F:\blog\hexo\source\css下新建swiperstyle.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
* {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}
div#swiper_container {
    background: linear-gradient(to left, #d9a7c7, #fffcdc); /* 这是滚动栏容器可以改变颜色 */
}
.blog-slider {
    width:100%;
    position:relative;
    border-radius:12px 8px 8px 12px;
    margin:auto;
    background:var(--global-bg);
    padding:10px;
    -webkit-transition:all .3s;
    -moz-transition:all .3s;
    -o-transition:all .3s;
    -ms-transition:all .3s;
    transition:all .3s
}
.blog-slider__item {
    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
}
.blog-slider__item.swiper-slide-active .blog-slider__img img {
    opacity:1;
    -ms-filter:none;
    filter:none;
    -webkit-transition-delay:.3s;
    -moz-transition-delay:.3s;
    -o-transition-delay:.3s;
    -ms-transition-delay:.3s;
    transition-delay:.3s
}
.blog-slider__item.swiper-slide-active .blog-slider__content>* {
    opacity:1;
    -ms-filter:none;
    filter:none;
    -webkit-transform:none;
    -moz-transform:none;
    -o-transform:none;
    -ms-transform:none;
    transform:none
}
.blog-slider__item.swiper-slide-active .blog-slider__content>:nth-child(1) {
    -webkit-transition-delay:.3s;
    -moz-transition-delay:.3s;
    -o-transition-delay:.3s;
    -ms-transition-delay:.3s;
    transition-delay:.3s
}
.blog-slider__item.swiper-slide-active .blog-slider__content>:nth-child(2) {
    -webkit-transition-delay:.4s;
    -moz-transition-delay:.4s;
    -o-transition-delay:.4s;
    -ms-transition-delay:.4s;
    transition-delay:.4s
}
.blog-slider__item.swiper-slide-active .blog-slider__content>:nth-child(3) {
    -webkit-transition-delay:.5s;
    -moz-transition-delay:.5s;
    -o-transition-delay:.5s;
    -ms-transition-delay:.5s;
    transition-delay:.5s
}
.blog-slider__item.swiper-slide-active .blog-slider__content>:nth-child(4) {
    -webkit-transition-delay:.6s;
    -moz-transition-delay:.6s;
    -o-transition-delay:.6s;
    -ms-transition-delay:.6s;
    transition-delay:.6s
}
.blog-slider__item.swiper-slide-active .blog-slider__content>:nth-child(5) {
    -webkit-transition-delay:.7s;
    -moz-transition-delay:.7s;
    -o-transition-delay:.7s;
    -ms-transition-delay:.7s;
    transition-delay:.7s
}
.blog-slider__item.swiper-slide-active .blog-slider__content>:nth-child(6) {
    -webkit-transition-delay:.8s;
    -moz-transition-delay:.8s;
    -o-transition-delay:.8s;
    -ms-transition-delay:.8s;
    transition-delay:.8s
}
.blog-slider__item.swiper-slide-active .blog-slider__content>:nth-child(7) {
    -webkit-transition-delay:.9s;
    -moz-transition-delay:.9s;
    -o-transition-delay:.9s;
    -ms-transition-delay:.9s;
    transition-delay:.9s
}
.blog-slider__item.swiper-slide-active .blog-slider__content>:nth-child(8) {
    -webkit-transition-delay:1s;
    -moz-transition-delay:1s;
    -o-transition-delay:1s;
    -ms-transition-delay:1s;
    transition-delay:1s
}
.blog-slider__item.swiper-slide-active .blog-slider__content>:nth-child(9) {
    -webkit-transition-delay:1.1s;
    -moz-transition-delay:1.1s;
    -o-transition-delay:1.1s;
    -ms-transition-delay:1.1s;
    transition-delay:1.1s
}
.blog-slider__item.swiper-slide-active .blog-slider__content>:nth-child(10) {
    -webkit-transition-delay:1.2s;
    -moz-transition-delay:1.2s;
    -o-transition-delay:1.2s;
    -ms-transition-delay:1.2s;
    transition-delay:1.2s
}
.blog-slider__item.swiper-slide-active .blog-slider__content>:nth-child(11) {
    -webkit-transition-delay:1.3s;
    -moz-transition-delay:1.3s;
    -o-transition-delay:1.3s;
    -ms-transition-delay:1.3s;
    transition-delay:1.3s
}
.blog-slider__item.swiper-slide-active .blog-slider__content>:nth-child(12) {
    -webkit-transition-delay:1.4s;
    -moz-transition-delay:1.4s;
    -o-transition-delay:1.4s;
    -ms-transition-delay:1.4s;
    transition-delay:1.4s
}
.blog-slider__item.swiper-slide-active .blog-slider__content>:nth-child(13) {
    -webkit-transition-delay:1.5s;
    -moz-transition-delay:1.5s;
    -o-transition-delay:1.5s;
    -ms-transition-delay:1.5s;
    transition-delay:1.5s
}
.blog-slider__item.swiper-slide-active .blog-slider__content>:nth-child(14) {
    -webkit-transition-delay:1.6s;
    -moz-transition-delay:1.6s;
    -o-transition-delay:1.6s;
    -ms-transition-delay:1.6s;
    transition-delay:1.6s
}
.blog-slider__item.swiper-slide-active .blog-slider__content>:nth-child(15) {
    -webkit-transition-delay:1.7s;
    -moz-transition-delay:1.7s;
    -o-transition-delay:1.7s;
    -ms-transition-delay:1.7s;
    transition-delay:1.7s
}
.blog-slider__img {
    width:200px;
    -webkit-flex-shrink:0;
    flex-shrink:0;
    height:200px;
    padding:10px;
    border-radius:5px;
    -webkit-transform:translateX(0);
    -moz-transform:translateX(0);
    -o-transform:translateX(0);
    -ms-transform:translateX(0);
    transform:translateX(0);
    overflow:hidden
}
.blog-slider__img:after {
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border-radius:5px;
    opacity:.8
}
.blog-slider__img img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    opacity:0;
    border-radius:5px;
    -webkit-transition:all .3s;
    -moz-transition:all .3s;
    -o-transition:all .3s;
    -ms-transition:all .3s;
    transition:all .3s
}
.blog-slider__content {
    padding-right:50px;
    padding-left:50px
}
.blog-slider__content>* {
    opacity:0;
    -webkit-transform:translateY(25px);
    -moz-transform:translateY(25px);
    -o-transform:translateY(25px);
    -ms-transform:translateY(25px);
    transform:translateY(25px);
    -webkit-transition:all .4s;
    -moz-transition:all .4s;
    -o-transition:all .4s;
    -ms-transition:all .4s;
    transition:all .4s
}
.blog-slider__code {
    color:var(--font-color);
    margin-bottom:0;
    display:block;
    font-weight:500
}
.blog-slider__title {
    font-size:18px;
    font-weight:700;
    color:var(--font-color);
    margin-bottom:15px;
    -webkit-line-clamp:1;
    display:-webkit-box;
    overflow:hidden;
    -webkit-box-orient:vertical
}
.blog-slider__text {
    color:var(--font-color);
    -webkit-line-clamp:1;
    display:-webkit-box;
    overflow:hidden;
    -webkit-box-orient:vertical;
    margin-bottom:15px;
    line-height:1.5em;
    width:100%;
    display:block;
    word-break:break-all;
    word-wrap:break-word
}
.blog-slider__button {
    display:-webkit-inline-box;
    display:-moz-inline-box;
    display:-webkit-inline-flex;
    display:-ms-inline-flexbox;
    display:inline-box;
    display:inline-flex;
    background-color:var(--btn-bg);
    padding:4px 14px;
    border-radius:8px;
    color:var(--btn-color);
    text-decoration:none;
    font-weight:500;
    -webkit-box-pack:center;
    -moz-box-pack:center;
    -o-box-pack:center;
    -ms-flex-pack:center;
    -webkit-justify-content:center;
    justify-content:center;
    text-align:center;
    letter-spacing:1px;
    display:none
}
.blog-slider__button:hover {
    background-color:var(--btn-hover-color);
    color:var(--btn-color)
}
.blog-slider .swiper-container-horizontal>.swiper-pagination-bullets, .blog-slider .swiper-pagination-custom, .blog-slider .swiper-pagination-fraction {
    bottom:10px;
    left:0;
    width:100%
}
.blog-slider__pagination {
    position:absolute;
    z-index:21;
    right:20px;
    width:11px!important;
    text-align:center;
    left:auto!important;
    top:50%;
    bottom:auto!important;
    -webkit-transform:translateY(-50%);
    -moz-transform:translateY(-50%);
    -o-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    transform:translateY(-50%)
}
.blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
    margin:8px 0
}
.blog-slider__pagination .swiper-pagination-bullet {
    width:11px;
    height:11px;
    display:block;
    border-radius:10px;
    background:#858585;
    opacity:.2;
    -webkit-transition:all .3s;
    -moz-transition:all .3s;
    -o-transition:all .3s;
    -ms-transition:all .3s;
    transition:all .3s
}
.blog-slider__pagination .swiper-pagination-bullet-active {
    opacity:1;
    -ms-filter:none;
    filter:none;
    background:var(--btn-bg);
    height:30px
}
@media screen and (max-width:600px) {
    .blog-slider__pagination {
        -webkit-transform:translateX(-50%);
        -moz-transform:translateX(-50%);
        -o-transform:translateX(-50%);
        -ms-transform:translateX(-50%);
        transform:translateX(-50%);
        left:50%!important;
        top:320px;
        width:100%!important;
        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;
        -webkit-box-align:center;
        -moz-box-align:center;
        -o-box-align:center;
        -ms-flex-align:center;
        -webkit-align-items:center;
        align-items:center
    }
    .blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
        margin:0 5px
    }
    .blog-slider__pagination .swiper-pagination-bullet-active {
        height:11px;
        width:30px
    }
    .blog-slider__button {
        display:-webkit-inline-box;
        display:-moz-inline-box;
        display:-webkit-inline-flex;
        display:-ms-inline-flexbox;
        display:inline-box;
        display:inline-flex;
        width:100%
    }
    .blog-slider__text {
        margin-bottom:40px
    }
    .blog-slider {
        min-height:350px;
        height:auto;
        margin-top:110px;
        margin-bottom:10px
    }
    .blog-slider__content {
        margin-top:-80px;
        text-align:center;
        padding:0 30px
    }
    .blog-slider__item {
        -webkit-box-orient:vertical;
        -moz-box-orient:vertical;
        -o-box-orient:vertical;
        -webkit-flex-direction:column;
        -ms-flex-direction:column;
        flex-direction:column
    }
    .blog-slider__img {
        -webkit-transform:translateY(-50%);
        -moz-transform:translateY(-50%);
        -o-transform:translateY(-50%);
        -ms-transform:translateY(-50%);
        transform:translateY(-50%);
        width:90%
    }
    .blog-slider__content {
        padding-left:10px;
        padding-right:10px
    }
    .blog-slider__pagination.swiper-pagination-clickable.swiper-pagination-bullets {
        top:110px
    }
}
@media screen and (min-width:600px) {
    .blog-slider {
        height:200px
    }
    .blog-slider__img {
        height:200px
    }
}

文章双侧栏显示

文章双侧栏显示

在博客根目录 [Blogroot] 下打开终端，运行以下指令：

1
npm i hexo-butterfly-article-double-row --save

在网站配置文件_config.yml 新增以下项 (注意不是主题配置文件)：

1
2
butterfly_article_double_row:
  enable: true

执行 hexo 三连：

1
2
3
hexo clean
hexo g
hexo s

阿里巴巴矢量图标库

阿里巴巴矢量图标库

iconfont-阿里巴巴矢量图标库

  1. 先将图标保存至项目下

  2. 可以本地链接将文件下载解压至博客根目录css，之后引入css文件，也可以使用在线链接 //at.alicdn.com/t/c/font_3683608_ey6u472w9cf.css并引入

    1
    2
    3
    inject:
      head:
      	- <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3683608_ey6u472w9cf.css">

  3. 之后在需要的地方引入iconfont +图片名称
    注意这个里有一个坑，你每次添加新的图标时，你的css引入都会改变

友联朋友圈

友联朋友圈

  1. 确保有友联地址，hexo new page link建立友链文件：/source/link/index.md，Front中注意type: link

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    ---
    title: 友情鏈接
    date: 2022-11-13 17:17:49
    type: "link"
    ---

    {% flink %}
    - class_name: 友情链接
      class_desc: 那些人，那些事
      link_list:
        - name: 梦想高地
          link: https://luomengguo.top
          avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
          descr: 梦想高地
    {% endflink %}

  2. hexo new page fcircle生成朋友圈地址

  3. 主题配置文件中加入友联地址

    1
    2
    3
    4
    menu:
    + 友链:
    +   友人帐: /link/ || iconfont icon-pengyouquan
    +   朋友圈: /fcircle/ || iconfont icon-pengyouquan

  4. 参考友链朋友圈文档：后端部署及基本配置采用Github+Vercel+Sqlite部署（注意由于Vercel无法访问需要自备域名）

    1. 修改fork后仓库中/hexo_circle_of_friends/fc_settings.yaml

      1
      2
      3
      4
      LINK:
      +   - {link: "https://www.luomengguo.top/link/", theme: "butterfly"}  # 友链页地址1，修改为你的友链页地址
      #    - {link: "https://noionion.top/link/", theme: "butterfly"} # 友链页地址2
      #    - {link: "https://immmmm.com/about/", theme: "common1"} # 友链页地址3

    2. 申请Github Token

    3. 根据文档依次将变量填入仓库的secret下

    4. 在vercel中导入仓库，同理，将变量填入vercel项目的环境变量中

    5. 回到github仓库下启用Actions，之后每天 6,12,18,21 点自启动更新

    6. 绑定域名并为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
      ---
      title: fcircle
      date: 2022-11-13 17:18:56
      ---

      <div id="hexo-circle-of-friends-root"></div>
      <script>
          let UserConfig = {
              // 填写你的api地址
              private_api_url: 'https://fcircle.luomengguo.top/',
              // 点击加载更多时，一次最多加载几篇文章，默认10
              page_turning_number: 10,
              // 头像加载失败时，默认头像地址
              error_img: 'https://sdn.geekzu.org/avatar/57d8260dfb55501c37dde588e7c3852c',
              // 进入页面时第一次的排序规则
              sort_rule: 'created'
          }
      </script>

      <script type="text/javascript" src="https://npm.elemecdn.com/fcircle-theme-yyyz@1.0.5/dist/app.min.js"></script>
      <script type="text/javascript" src="https://npm.elemecdn.com/fcircle-theme-yyyz@1.0.5/dist/bundle.js"></script>

  5. 回到博客，设置前端密码

弹窗切换

参考链接：弹窗切换 | Leonus

博客魔改日记（1） | Ariasakaの小窝 (yisous.xyz)

给Hexo博客添加一个切换壁纸功能 | Leonus

弹窗切换

先创建建相册文件**hexo new page ‘wallpaper’**然后在md文件里面添加如下代码：

1
2
3
4
5
<div class="gallery-group-main">
{% galleryGroup '电脑壁纸' '一些高端大气上档次的电脑壁纸' '/wallpaper/pc/' 'https://cn.bing.com/th?id=OHR.MonfragueNationalPark_ZH-CN5421553314_1920x1080.jpg' %}
{% galleryGroup '手机壁纸' '一些个人比较喜欢的手机壁纸' '/wallpaper/ph/' 'https://img.vm.laomishuo.com/image/2021/04/2021040311203011.jpeg' %}
{% galleryGroup '美女壁纸' '最好的当然要单独建一个相册' '/wallpaper/girl/' 'https://img.vm.laomishuo.com/image/2021/11/2021111016525829.jpeg' %}
</div>

格式是：{% galleryGroup name description link img-url %}

  • name：图库名字
  • description：图库描述
  • link：连接到对应相册的地址
  • img-url：图库封面的地址

创建子相册

还是使用hexo new page 'xxx'创建, 如hexo new page 'girl', 然后就是把创建好的文件夹挪到你的相册目录里面，这样可以实现嵌套。
然后在这个页面直接放图片就可以了，如markdown的![](imgurl)或者html的<img src="imgurl">
到此一个相册就创建了, 你的相册位置就是/wallpaper/ ,你的子相册位置就是 /wallpaper/girl。需要注意的是如果wallpape文件夹下有多个md文件，在引用是时需要在后面加上.html的后缀。实例如下：

1
2
3
4
5
6
7
8
9
10
11
12
---
title: 相册
date: 2022-11-19 21:27:12
aside: false
comments: false
---
<div class="gallery-group-main">
{% galleryGroup '美好记录池' '记录世间一切美好' '/wallpaper/xiangce.html/' 'http://p4.qhimg.com/bdm/853_527_0/t01c03e1976e568c227.jpg' %}
{% galleryGroup '电脑壁纸' '一些高端大气上档次的电脑壁纸' '/wallpaper/pc.html/' 'https://cn.bing.com/th?id=OHR.MonfragueNationalPark_ZH-CN5421553314_1920x1080.jpg' %}
{% galleryGroup '爱情小屋' '*****' '/wallpaper/ph.html/' 'http://p17.qhimg.com/bdm/426_263_0/t019c3ce7bfbc46c301.jpg' %}
{% galleryGroup '美女壁纸' '最好的当然要单独建一个相册' '/wallpaper/girl.html/' 'https://img.vm.laomishuo.com/image/2021/11/2021111016525829.jpeg' %}
</div>

添加js

然后我们在需要的页面添加如下代码

1
2
3
4
5
6
7
8
<script>
let time = ''
let imgbox = document.querySelector('.fj-gallery')
imgbox.addEventListener('contextmenu', e => e.preventDefault())
imgbox.addEventListener('dragend', e => { changeBg('url(' + e.target.src + ')'); })
imgbox.addEventListener('touchstart', e => { time = setTimeout(() => { changeBg('url(' + e.target.src + ')'); }, 500); })
imgbox.addEventListener('touchend', clearTimeout(time))
</script>

实例如下

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
---
title: 爱情小屋
date: 2022-11-19 21:34:10
aside: false
comments: false
---
<h1 class="page-title">爱情小屋</h1>
<div class="note info flat"><p>温馨提示：点击可以查看图片，<code>手机端长按图片</code> 可以实现切换壁纸哦~</p></div>
{% gallery %}
![](http://p16.qhimg.com/bdm/853_527_0/t0185513056775ab3a0.jpg)
![](http://p15.qhimg.com/bdm/853_527_0/t0111c159c54267057c.jpg)
![](http://p19.qhimg.com/bdm/853_527_0/t019cf37a9b0dd9a4d0.jpg)
![](http://p15.qhimg.com/bdm/853_527_0/t01212f2fbd18999ca7.jpg)
![](http://p16.qhimg.com/bdm/853_527_0/t014340919eac180ba5.jpg)
![](http://p16.qhimg.com/bdm/853_527_0/t01031a1a5c49b03855.jpg)
![](http://p17.qhimg.com/bdm/426_263_0/t019c3ce7bfbc46c301.jpg)
![](http://p16.qhimg.com/bdm/426_263_0/t01dd7244ab250b93a0.jpg)
![](http://p17.qhimg.com/bdm/853_527_0/t012fc47ac2bfd6c568.jpg)
![](http://p19.qhimg.com/bdm/853_527_0/t0132d6181149f1cf62.jpg)
{% endgallery %}
<script>
let time = ''
let imgbox = document.querySelector('.fj-gallery')
imgbox.addEventListener('contextmenu', e => e.preventDefault())
imgbox.addEventListener('dragend', e => { changeBg('url(' + e.target.src + ')'); })
imgbox.addEventListener('touchstart', e => { time = setTimeout(() => { changeBg('url(' + e.target.src + ')'); }, 500); })
imgbox.addEventListener('touchend', clearTimeout(time))
</script>

修改butterfly\layout\includes\rightside.pug

1
2
3
4
5
6
7
when 'comment'
    if commentsJsLoad
        a#to_comment(href="#post-comment" title=_p("rightside.scroll_to_comment"))
        i.fas.fa-comments
+ when 'bg'
+     button(type="button" title='切换背景' onclick="toggleWinbox()")
+         i.fas.fa-display

然后修改：

1
2
3
4
5
#rightside
  - const { enable, hide, show } = theme.rightside_item_order
  - const hideArray = enable ? hide && hide.split(',') : ['readmode','translate','darkmode','hideAside']
-  - const showArray = enable ? show && show.split(',') : ['toc','chat','comment']
+  - const showArray = enable ? show && show.split(',') : ['toc','chat','comment','bg']

在source\js\Pop window.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
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
// 存数据
// name：命名 data：数据
function saveData(name, data) {
    localStorage.setItem(name, JSON.stringify({ 'time': Date.now(), 'data': data }))
}

// 取数据
// name：命名 time：过期时长,单位分钟,如传入30,即加载数据时如果超出30分钟返回0,否则返回数据
function loadData(name, time) {
    let d = JSON.parse(localStorage.getItem(name));
    // 过期或有错误返回 0 否则返回数据
    if (d) {
        let t = Date.now() - d.time
        if (t < (time * 60 * 1000) && t > -1) return d.data;
    }
    return 0;
}

// 上面两个函数如果你有其他需要存取数据的功能，也可以直接使用

// 读取背景
try {
    let data = loadData('blogbg', 1440)
    if (data) changeBg(data, 1)
    else localStorage.removeItem('blogbg');
} catch (error) { localStorage.removeItem('blogbg'); }

// 切换背景函数
// 此处的flag是为了每次读取时都重新存储一次,导致过期时间不稳定
// 如果flag为0则存储,即设置背景. 为1则不存储,即每次加载自动读取背景.
function changeBg(s, flag) {
    let bg = document.getElementById('web_bg')
    if (s.charAt(0) == '#') {
        bg.style.backgroundColor = s
        bg.style.backgroundImage = 'none'
    } else bg.style.backgroundImage = s
    if (!flag) { saveData('blogbg', s) }
}

// 以下为2.0新增内容

// 创建窗口
var winbox = ''

function createWinbox() {
    let div = document.createElement('div')
    document.body.appendChild(div)
    winbox = WinBox({
        id: 'changeBgBox',
        index: 999,
        title: "切换背景",
        x: "center",
        y: "center",
        minwidth: '300px',
        height: "60%",
        background: 'var(--leonus-blue)',
        onmaximize: () => { div.innerHTML = `<style>body::-webkit-scrollbar {display: none;}div#changeBgBox {width: 100% !important;}</style>` },
        onrestore: () => { div.innerHTML = '' }
    });
    winResize();
    window.addEventListener('resize', winResize)

    // 每一类我放了一个演示，直接往下复制粘贴 a标签 就可以，需要注意的是 函数里面的链接 冒号前面需要添加反斜杠\进行转义
    winbox.body.innerHTML = `
    <div id="article-container" style="padding:10px;">

    <div class="note info flat"><p>点击对应样式即可切换背景。<br>相册图片也可以当作壁纸哦~ <a href="/wallpaper/wallpaper.html">前往相册</a></p>
    </div>

    <div class="note pink icon-padding flat"><i class="note-icon fa-solid fa-image"></i><p>有效期为一天，到期切回默认壁纸。</p>
    </div>

    <p><button onclick="localStorage.removeItem('blogbg');location.reload();" style="background:#5fcdff;display:block;width:100%;padding: 15px 0;border-radius:6px;color:white;"><i class="fa-solid fa-arrows-rotate"></i> 点我恢复默认背景</button></p>

    <h2 id="电脑壁纸"><a href="#电脑壁纸" class="headerlink" title="电脑壁纸"></a>电脑壁纸</h2>
    <details class="toggle"><summary class="toggle-button" style="">动漫系列</summary>
    <div class="toggle-content">
        <div class="bgbox">
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Animation/5f464430e1cf965ddc11744039112a42.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Animation/5f464430e1cf965ddc11744039112a42.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Animation/4eb6637d94ce7a8dab74dfc45e359fa0.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Animation/4eb6637d94ce7a8dab74dfc45e359fa0.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Animation/0b4b00e23d46f739d934e57cd5a282c1.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Animation/0b4b00e23d46f739d934e57cd5a282c1.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Animation/7c7a63ddda0300a3df1f59dc31d2e4f9.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Animation/7c7a63ddda0300a3df1f59dc31d2e4f9.jpg')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Animation/9a6aea94820b24906e150fe3da8a7c13.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Animation/9a6aea94820b24906e150fe3da8a7c13.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Animation/9fe04330b83130da54f6e07caa2cc717.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Animation/9fe04330b83130da54f6e07caa2cc717.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Animation/52f99139720cd256fb332a3baedfaa03.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Animation/52f99139720cd256fb332a3baedfaa03.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Animation/61bfd7afb4dc2eee0cc0f6ed09b61be3.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Animation/61bfd7afb4dc2eee0cc0f6ed09b61be3.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Animation/67e24143728d39a9f6f5c8ba0541061f.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Animation/67e24143728d39a9f6f5c8ba0541061f.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Animation/0683f0295ec4fe6df22715adc4da4946.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Animation/0683f0295ec4fe6df22715adc4da4946.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Animation/930e37ae88a7715936233ff23c2af5b7.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Animation/930e37ae88a7715936233ff23c2af5b7.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Animation/b34851bbd1d788173bd3e56807f318de.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Animation/b34851bbd1d788173bd3e56807f318de.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Animation/ba3a78740ee8e12b5b89f1096b6356b0.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Animation/ba3a78740ee8e12b5b89f1096b6356b0.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Animation/bf11791217762640fa9158041fd3c566.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Animation/bf11791217762640fa9158041fd3c566.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Animation/c57d6f17a8f9b70e50557d0f0d7ca423.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Animation/c57d6f17a8f9b70e50557d0f0d7ca423.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Animation/d9d1b14c381dccb07e88f8374b3b65aa.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Animation/d9d1b14c381dccb07e88f8374b3b65aa.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Animation/d69c8c5d1896425d34426af77c5c81f9.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Animation/d69c8c5d1896425d34426af77c5c81f9.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Animation/dccf125f2d8bdd87d47b175d0b47fd59.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Animation/dccf125f2d8bdd87d47b175d0b47fd59.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Animation/e4d8a7feb3525325e00f3863e957f4fb.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Animation/e4d8a7feb3525325e00f3863e957f4fb.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Animation/e6fb0d7c44d3721dd9093681f23e617a.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Animation/e6fb0d7c44d3721dd9093681f23e617a.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Animation/f1a287fa6abecdb8fcf5f2bd5b303e80.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Animation/f1a287fa6abecdb8fcf5f2bd5b303e80.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Animation/f73595097cc9600ff4662c1c7ccbb47b.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Animation/f73595097cc9600ff4662c1c7ccbb47b.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Animation/fdbeecba624eef17079b7cb205ef9bd4.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Animation/fdbeecba624eef17079b7cb205ef9bd4.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Animation/5789c583adc06e47a1fb964029404473.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Animation/5789c583adc06e47a1fb964029404473.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Animation/4145cf345ed1002bd89e7e9ba7d03dc3.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Animation/4145cf345ed1002bd89e7e9ba7d03dc3.jpg)')"></a>
            </div>
        </div>
    </details>


    <details class="toggle"><summary class="toggle-button" style="">风景系列</summary>
    <div class="toggle-content">
        <div class="bgbox">
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Scenery/S1.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Scenery/S1.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Scenery/S2.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Scenery/S2.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Scenery/S3.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Scenery/S3.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Scenery/S4.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Scenery/S4.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Scenery/S5.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Scenery/S5.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Scenery/S6.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Scenery/S6.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Scenery/S7.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Scenery/S7.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Scenery/S8.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Scenery/S8.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Scenery/S9.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Scenery/S9.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Scenery/S10.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Scenery/S10.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Scenery/S11.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Scenery/S11.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Scenery/S12.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Scenery/S12.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Scenery/S13.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Scenery/S13.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Scenery/S14.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Scenery/S14.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Scenery/S15.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Scenery/S15.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Scenery/S16.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Scenery/S16.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Scenery/S17.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Scenery/S17.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Scenery/S18.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Scenery/S18.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Scenery/S19.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Scenery/S19.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Scenery/S20.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Scenery/S20.jpg)')"></a>
            </div>
        </div>
    </details>

    <details class="toggle"><summary class="toggle-button" style="">美女系列</summary>
    <div class="toggle-content">
        <div class="bgbox">
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://img.vm.laomishuo.com/image/2021/04/2021040311203011.jpeg)" class="imgbox" onclick="changeBg('url(https\://img.vm.laomishuo.com/image/2021/04/2021040311203011.jpeg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://img.vm.laomishuo.com/image/2021/11/2021110119420045.jpeg)" class="imgbox" onclick="changeBg('url(https\://img.vm.laomishuo.com/image/2021/11/2021110119420045.jpeg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://img.vm.laomishuo.com/image/2020/12/2020121409235638.jpeg)" class="imgbox" onclick="changeBg('url(https\://img.vm.laomishuo.com/image/2020/12/2020121409235638.jpeg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://img.vm.laomishuo.com/image/2021/11/2021111016525829.jpeg)" class="imgbox" onclick="changeBg('url(https\://img.vm.laomishuo.com/image/2021/11/2021111016525829.jpeg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://img.vm.laomishuo.com/image/2021/11/2021111016580917.jpeg)" class="imgbox" onclick="changeBg('url(https\://img.vm.laomishuo.com/image/2021/11/2021111016580917.jpeg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Beauty/Q1.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Beauty/Q1.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Beauty/Q2.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Beauty/Q2.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Beauty/Q3.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Beauty/Q3.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Beauty/Q4.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Beauty/Q4.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Beauty/Q5.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Beauty/Q5.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Beauty/Q6.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Beauty/Q6.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Beauty/Q7.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Beauty/Q7.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Beauty/Q8.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Beauty/Q8.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Beauty/Q9.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Beauty/Q9.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Beauty/Q10.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Beauty/Q10.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Beauty/Q11.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Beauty/Q11.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Beauty/Q12.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Beauty/Q12.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Beauty/Q13.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Beauty/Q13.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Beauty/Q14.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Beauty/Q14.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://wenzhangku.luomengguo.top/Beauty/Q15.jpg)" class="imgbox" onclick="changeBg('url(https\://wenzhangku.luomengguo.top/Beauty/Q15.jpg)')"></a>
            </div>
        </div>
    </details>

    <h2 id="图片（手机）"><a href="#图片（手机）" class="headerlink" title="图片（手机）"></a>图片（手机）</h2>
    <details class="toggle"><summary class="toggle-button" style="">查看手机壁纸</summary>
        <div class="toggle-content">
            <div class="bgbox">
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://img.vm.laomishuo.com/image/2021/12/2021122715170589.jpeg)" class="pimgbox" onclick="changeBg('url(https\://img.vm.laomishuo.com/image/2021/12/2021122715170589.jpeg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://img.vm.laomishuo.com/image/2021/05/2021053107390019.jpeg)" class="pimgbox" onclick="changeBg('url(https\://img.vm.laomishuo.com/image/2021/05/2021053107390019.jpeg')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://img.vm.laomishuo.com/image/2021/08/2021082418471438.jpeg)" class="pimgbox" onclick="changeBg('url(https\://img.vm.laomishuo.com/image/2021/08/2021082418471438.jpeg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://img.vm.laomishuo.com/image/2021/05/2021053111333664.jpeg)" class="pimgbox" onclick="changeBg('url(https\://img.vm.laomishuo.com/image/2021/05/2021053111333664.jpeg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://img.vm.laomishuo.com/image/2021/05/2021052509214162.jpeg)" class="pimgbox" onclick="changeBg('url(https\://img.vm.laomishuo.com/image/2021/05/2021052509214162.jpeg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://img.vm.laomishuo.com/image/2021/10/2021101113150626.jpeg)" class="pimgbox" onclick="changeBg('url(https\://img.vm.laomishuo.com/image/2021/10/2021101113150626.jpeg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://img.vm.laomishuo.com/image/2021/12/2021121119294157.jpeg)" class="pimgbox" onclick="changeBg('url(https\://img.vm.laomishuo.com/image/2021/12/2021121119294157.jpeg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://img.vm.laomishuo.com/image/2022/05/2022050211365433.jpg)" class="pimgbox" onclick="changeBg('url(https\://img.vm.laomishuo.com/image/2022/05/2022050211365433.jpg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://img.vm.laomishuo.com/image/2021/01/2021011114540487.jpeg)" class="pimgbox" onclick="changeBg('url(https\://img.vm.laomishuo.com/image/2021/01/2021011114540487.jpeg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://img.vm.laomishuo.com/image/2021/10/2021101112481925.jpeg)" class="pimgbox" onclick="changeBg('url(https\://img.vm.laomishuo.com/image/2021/10/2021101112481925.jpeg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://img.vm.laomishuo.com/image/2020/12/2020120109592351.jpeg)" class="pimgbox" onclick="changeBg('url(https\://img.vm.laomishuo.com/image/2020/12/2020120109592351.jpeg)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://img.vm.laomishuo.com/image/2021/08/2021081519313621.jpeg)" class="pimgbox" onclick="changeBg('url(https\://img.vm.laomishuo.com/image/2021/08/2021081519313621.jpeg)')"></a>
            </div>
        </div>
    </details>

    <h2 id="渐变色"><a href="#渐变色" class="headerlink" title="渐变色"></a>渐变色</h2>
    <details class="toggle"><summary class="toggle-button" style="">查看渐变背景</summary>
    <div class="toggle-content">
        <div class="bgbox">
            <a href="javascript:;" rel="noopener external nofollow" class="box" style="background: linear-gradient(to right, #eecda3, #ef629f)" onclick="changeBg('linear-gradient(to right, #eecda3, #ef629f)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" class="box" style="background: linear-gradient(to right, rgb(255, 110, 127), rgb(191, 233, 255))" onclick="changeBg('linear-gradient(to right, #eecda3, #ef629f)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" class="box" style="background: linear-gradient(to right, #ff4b1f, #1fddff)" onclick="changeBg('linear-gradient(to right, #ff4b1f, #1fddff)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" class="box" style="background: linear-gradient(to right, rgb(251, 215, 134), rgb(247, 121, 125))" onclick="changeBg('linear-gradient(to right, rgb(251, 215, 134), rgb(247, 121, 125))')"></a>
            <a href="javascript:;" rel="noopener external nofollow" class="box" style="background: linear-gradient(to right, #16bffd, #cb3066)" onclick="changeBg('linear-gradient(to right, #16bffd, #cb3066)')"></a>
            <a href="javascript:;" rel="noopener external nofollow" class="box" style="background: linear-gradient(to right, rgb(192, 192, 170), rgb(28, 239, 255))" onclick="changeBg('linear-gradient(to right, rgb(192, 192, 170), rgb(28, 239, 255))')"></a>
            </div>
        </div>
    </details>
`;
}

// 适应窗口大小
function winResize() {
    var offsetWid = document.documentElement.clientWidth;
    if (offsetWid <= 768) {
        winbox.resize(offsetWid * 0.95 + "px", "90%").move("center", "center");
    } else {
        winbox.resize(offsetWid * 0.6 + "px", "70%").move("center", "center");
    }
}

// 切换状态，窗口已创建则控制窗口显示和隐藏，没窗口则创建窗口
function toggleWinbox() {
    if (document.querySelector('#changeBgBox')) winbox.toggleClass('hide');
    else createWinbox();
}

在source\css\custom.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
.winbox {
    border-radius: 12px;
    overflow: hidden;
}

.wb-full {
    display: none;
}

.wb-min {
    background-position: center;
}


.bgbox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.pimgbox,
.imgbox,
.box {
    width: 166px;
    margin: 10px;
    background-size: cover
}

.pimgbox,
.imgbox {
    border-radius: 10px;
    overflow: hidden;
}

.pimgbox {
    height: 240px;
}

.imgbox {
    height: 95px;
}

.box {
    height: 100px;
}

@media screen and (max-width: 768px) {
    /* 背景 */
    .pimgbox,
    .imgbox,
    .box {
        height: 73px;
        width: 135px;
    }
    .pimgbox {
        height: 205px;
    }
    .wb-min {
        display: none;
    }
    #changeBgBox .wb-body::-webkit-scrollbar {
        display: none;
    }
}
.bgbox *{
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
.reSettings{
    color:var(--lyx-white)!important
}
.reSettings::before{
    content:"\f021";
    font-family:var(--fa-style-family,"Font Awesome 6 Free");font-weight:var(--fa-style,900);
    color:var(--lyx-white)!important
}
.reSettings:hover{
    cursor: pointer;
}
.wb-title{
    color:black;
    font-family: var(--global-font),'PingFang SC','Ubuntu Mono','Noto Sans','Microsoft Yahei','SimSun'!important;
}
[data-theme="dark"] .wb-title{
    color:white;
}
#changeBgBox{
        
        border-radius: 12px;
        backdrop-filter: blur(20px);
        
}
[data-theme="light"] #changeBgBox{
    background: #fffa!important;
}
[data-theme="dark"] #changeBgBox{
    background: #0008!important;
}
[data-theme="light"] .wb-close{
    background-image: url("data:image/svg+xml;base64,PHN2ZyB0PSIxNjYxODMyNDg4NDQ2IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI2MzAiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48cGF0aCBkPSJNNTU2LjggNTEyTDgzMiAyMzYuOGMxMi44LTEyLjggMTIuOC0zMiAwLTQ0LjgtMTIuOC0xMi44LTMyLTEyLjgtNDQuOCAwTDUxMiA0NjcuMmwtMjc1LjItMjc3LjMzMzMzM2MtMTIuOC0xMi44LTMyLTEyLjgtNDQuOCAwLTEyLjggMTIuOC0xMi44IDMyIDAgNDQuOGwyNzUuMiAyNzcuMzMzMzMzLTI3Ny4zMzMzMzMgMjc1LjJjLTEyLjggMTIuOC0xMi44IDMyIDAgNDQuOCA2LjQgNi40IDE0LjkzMzMzMyA4LjUzMzMzMyAyMy40NjY2NjYgOC41MzMzMzNzMTcuMDY2NjY3LTIuMTMzMzMzIDIzLjQ2NjY2Ny04LjUzMzMzM0w1MTIgNTU2LjggNzg3LjIgODMyYzYuNCA2LjQgMTQuOTMzMzMzIDguNTMzMzMzIDIzLjQ2NjY2NyA4LjUzMzMzM3MxNy4wNjY2NjctMi4xMzMzMzMgMjMuNDY2NjY2LTguNTMzMzMzYzEyLjgtMTIuOCAxMi44LTMyIDAtNDQuOEw1NTYuOCA1MTJ6IiBwLWlkPSIyNjMxIj48L3BhdGg+PC9zdmc+");}
[data-theme="light"] .wb-max{
    background-image: url("data:image/svg+xml;base64,PHN2ZyB0PSIxNjYxODMyNjU2MTQ0IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI5MjMiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48cGF0aCBkPSJNNzk0LjQzMiA5ODMuNTUySDUxLjJhMjUuNiAyNS42IDAgMCAxLTI1LjYtMjUuNlYyMTQuNzg0YTI1LjYgMjUuNiAwIDAgMSAyNS42LTI1LjZoMTUyLjc2OFY2Ni4xMTJhMjUuNiAyNS42IDAgMCAxIDI1LjYtMjUuNkg5NzIuOGEyNS42IDI1LjYgMCAwIDEgMjUuNiAyNS42djc0My4yMzJhMjUuNiAyNS42IDAgMCAxLTI1LjYgMjUuNmgtMTUyLjc2OHYxMjMuMDA4YTI1LjYgMjUuNiAwIDAgMS0yNS42IDI1LjZ6IG0tNzE3LjYzMi01MS4yaDY5Mi4wMzJWMjQwLjM4NEg3Ni44djY5MS45Njh6IG03NDMuMjMyLTE0OC42NzJIOTQ3LjJWOTEuNjQ4SDI1NS4xNjh2OTcuNDcyaDUzOS4yNjRhMjUuNiAyNS42IDAgMCAxIDI1LjYgMjUuNnY1NjguOTZ6IiBwLWlkPSIyOTI0Ij48L3BhdGg+PC9zdmc+");
}
[data-theme="light"] .wb-min{
    background-image: url("data:image/svg+xml;base64,PHN2ZyB0PSIxNjYxODMyNzE4OTgzIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjM4MzQiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48cGF0aCBkPSJNMTkyLjEyOCA3NjhsNjM5LjY4IDBDODY3LjI2NCA3NjggODk2IDc5Ni40MTYgODk2IDgzMmMwIDM1LjM5Mi0yOS4xODQgNjQtNjQuMTkyIDY0TDE5Mi4xMjggODk2QzE1Ni43MzYgODk2IDEyOCA4NjcuNTg0IDEyOCA4MzIgMTI4IDc5Ni42MDggMTU3LjE4NCA3NjggMTkyLjEyOCA3Njh6IiBwLWlkPSIzODM1Ij48L3BhdGg+PC9zdmc+");
}
[data-theme="light"] .wb-body{
    background:#fffa!important;
}
[data-theme="dark"] .wb-body{
    background:#0008!important;
}
.winbox.focus.max {
    border-radius: 0!important;
    -webkit-border-radius: 0!important;
    -moz-border-radius: 0!important;
    -ms-border-radius: 0!important;
    -o-border-radius: 0!important;
}
.settings{
    margin:15px
}
.settings .content{
    margin-left:20px;
}
.content-text{
    margin-left:5px
}
.content-button {
    background-color: var(--lyx-theme);
    padding: 5px;
    color: white;
    border-radius: 4px;
}
.content-button{
    margin-right: 10px;
}
/* 开关 */
.settings input[type="checkbox"] {
    width: 38px;
    height: 20px;
    position: relative;
    border: 1px solid #000000;
    background-color: #fdfdfd;;
    border-radius: 12px;
    background-clip: content-box;
    display: inline-block;
    -webkit-appearance: none;
    user-select: none;
    outline: none;
transform: translateY(5px);}
.settings input[type="checkbox"]:before {
    content: '';
    width: 12px;
    height: 12px;
    position: absolute;
    top: 3px;
    left: 5px;
    border-radius: 10px;
    background-color: #000;}
.settings input[type="checkbox"]:checked {
    background-color: var(--lyx-theme);border-color:var(--lyx-theme)}
.settings input[type="checkbox"]:checked:before {
    left: 19px;background-color: white!important;}
.settings input[type="checkbox"] {
    transition: border background-color box-shadow }
.settings input[type="checkbox"]:before {
    transition: left 0.2s;}
.settings input[type="checkbox"]:checked {
    background-color: var(--lyx-theme);
    /* transition: border ease 0.4s, background-color ease 1.2s; */
}.settings input[type="checkbox"]:checked:before {
    transition: left 0.2s;}
.settings input[type="checkbox"]:checked:hover{
    opacity: 0.8;
}
.settings input[type="checkbox"]:active{
    background-color: #666666!important;
    border-color:#666666!important;
}
.settings input[type="checkbox"]:active::before{
    background-color:white!important;
}
.wb-e{
    right:5px!important
}
#colors::before {
    position: absolute;
    color: rgb(255, 255, 255);
    left: 38px;
    top: 44px;
    content: "自定义颜色";
}
#colors {
    border: none;
    background: 0 0;
    width: 166px;
    height: 110px;
    margin: 5px 10px;
    position: relative;
    cursor: pointer;
    padding:0;
    border-radius:12px
}
input[name="colors"]{
    margin-right: 15px;
    min-width: 1rem;
    height: 1rem;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 50%;
}
#red{
    border: 3px solid var(--lyx-red);
}
#orange{
    border: 3px solid var(--lyx-orange);
}
#yellow{
    border: 3px solid var(--lyx-yellow);
}
#green{
    border: 3px solid var(--lyx-green);
}
#blue{
    border: 3px solid var(--lyx-blue);
}
#purple{
    border: 3px solid var(--lyx-purple);
}
#pink{
    border: 3px solid var(--lyx-pink);
}
#heoblue{
    border: 3px solid var(--lyx-heoblue);
}
#darkblue{
    border: 3px solid var(--lyx-darkblue);
}
#black  {
    border: 3px solid var(--lyx-black);
}
#blackgray  {
    border: 3px solid var(--lyx-blackgray);
}
#purple:checked{
    box-shadow: 0 0 0 2px #fff inset;
    border-radius: 50%;
    border: 3px solid var(--lyx-purple);
    background-color: var(--lyx-purple);
}
#red:checked{
    box-shadow: 0 0 0 2px #fff inset;
    border-radius: 50%;
    border: 3px solid var(--lyx-red);
    background-color: var(--lyx-red);
}
#orange:checked{
    box-shadow: 0 0 0 2px #fff inset;
    border-radius: 50%;
    border: 3px solid var(--lyx-orange);
    background-color: var(--lyx-orange);
}
#yellow:checked{
    box-shadow: 0 0 0 2px #fff inset;
    border-radius: 50%;
    border: 3px solid var(--lyx-yellow);
    background-color: var(--lyx-yellow);
}
#green:checked{
    box-shadow: 0 0 0 2px #fff inset;
    border-radius: 50%;
    border: 3px solid var(--lyx-green);
    background-color: var(--lyx-green);
}
#blue:checked{
    box-shadow: 0 0 0 2px #fff inset;
    border-radius: 50%;
    border: 3px solid var(--lyx-blue);
    background-color: var(--lyx-blue);
}
#pink:checked{
    box-shadow: 0 0 0 2px #fff inset;
    border-radius: 50%;
    border: 3px solid var(--lyx-pink);
    background-color: var(--lyx-pink);
}
#heoblue:checked{
    box-shadow: 0 0 0 2px #fff inset;
    border-radius: 50%;
    border: 3px solid var(--lyx-heoblue);
    background-color: var(--lyx-heoblue);
}
#darkblue:checked{
    box-shadow: 0 0 0 2px #fff inset;
    border-radius: 50%;
    border: 3px solid var(--lyx-darkblue);
    background-color: var(--lyx-darkblue);
}
#black:checked{
    box-shadow: 0 0 0 2px #fff inset;
    border-radius: 50%;
    border: 3px solid var(--lyx-black);
    background-color: var(--lyx-black);
}
#blackgray:checked{
    box-shadow: 0 0 0 2px #fff inset;
    border-radius: 50%;
    border: 3px solid var(--lyx-blackgray);
    background-color: var(--lyx-blackgray);
}

引入js

在主题配置文件里的inject下的bottom引入文件：

1
2
3
4
5
6
7
8
9
inject:
  head:
 #- <style id="settingStyle"></style>
 #- <style id="yjjs"></style>
 #- <style id="themeColor"></style>
  ...
  bottom:
  - <script src="https://cdn1.tianli0.top/gh/nextapps-de/winbox/dist/winbox.bundle.min.js"></script>
  - <script src="/js/Pop window.js"></script>

土味情话

参考链接：土味情话 | Jayhrn-分享科技与热爱生活

土味情话

新建[BlogRoot]\themes\butterfly\source\js\custom\cheesy_pick-up_lines.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function cheesy_pick_up_lines() {
  let html = "";
  for (let i = 0; i < 3; i++) {
    fetch("https://api.vvhan.com/api/love")
      .then((data) => data.text())
      .then((data) => {
        html += "<li>" + data + "</li>";
        document.querySelector("#cheesy_pick-up_lines-container").innerHTML =
          html;
      })
      .catch(function (error) {
        console.log(error);
      });
  }
}

新建[BlogRoot]\themes\butterfly\layout\includes\widget\card_cheesy_pick-up_lines.pug

1
2
3
4
5
6
7
8
9
10
.card-widget.card-cheesy_pick-up_lines
  .card-content
    .item-headline
      i.fas.fa-heart(style="color:pink")
      span= _p('土味情话')
    #cheesy_pick-up_lines-container
script(data-pjax src=("/js/cheesy_pick-up_lines.js"))
.js-pjax
  script.
    cheesy_pick_up_lines()

修改[BlogRoot]\themes\butterfly\layout\includes\widget\index.pug，在第 16 行左右

1
2
3
4
5
6
7
8
9
10
      !=partial('includes/widget/card_author', {}, {cache: true})
      !=partial('includes/widget/card_announcement', {}, {cache: true})
      !=partial('includes/widget/card_top_self', {}, {cache: true})
      .sticky_layout
        if showToc
          include ./card_post_toc.pug
        !=partial('includes/widget/card_recent_post', {}, {cache: true})
+       !=partial('includes/widget/card_cheesy_pick-up_lines', {}, {cache: true})
        !=partial('includes/widget/card_ad', {}, {cache: true})

新建[BlogRoot]\themes\butterfly\source\css\custom\cheesy_pick-up_lines.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#cheesy_pick-up_lines-container li {
  list-style-type: none;
  position: relative;
  padding-left: 26px;
}
#cheesy_pick-up_lines-container li:before {
  top: 8px;
  left: 2px;
  padding: 5px;
  border: 3px solid pink;
  border-radius: 10px;
  content: "";
  position: absolute;
}

js和css需要在_config.butterfly.yml文件中引入，引入方法与上面的一样抄就可以了。

随便逛逛

参考链接：随机网页跳转（无缝版） | 张洪Heo (zhheo.com)

随便逛逛

创建themes/butterfly/scripts/helpers/random.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 || 'zhheo/random.js',
        data: `var posts=${JSON.stringify(posts)};function toRandomPost(){window.open('/'+posts[Math.floor(Math.random() * posts.length)],"_self");};`
    }
})

在主题配置文件引入themes/butterfly/_config.yml，inject的bottom里添加

1
<script src="/zhheo/random.js"></script>

调用在需要调用的位置执行toRandomPost()函数即可。

比如任意dom添加onclick=”toRandomPost()”

例如在配置文件导航栏中需要的位置添加，宝藏博主: javascript:toRandomPost() || fas fa-bus

樱花飘落效果

参考链接：基于 Hexo 从零开始搭建个人博客（六） | 唐志远の博客 (tzy1997.com)

樱花飘落效果

在主题配置文件_config.butterfly.yml的inject配置项中bottom下引入sakura.js即可。

1
2
3
4
inject:
  bottom:
   # 樱花飘落效果
   - <script async src="https://npm.elemecdn.com/tzy-blog/lib/js/other/sakura.js"></script>

主页冒泡特效

主页冒泡特效

在_config.butterfly.yml中引入一下内容

1
2
3
#主页冒泡特效
   - <script defer src="https://npm.elemecdn.com/jquery@latest/dist/jquery.min.js"></script>
   - <script data-pjax defer src="https://npm.elemecdn.com/tzy-blog/lib/js/theme/chocolate.js"></script>

博客文章隐藏

博客文章隐藏

安装插件

1
npm install hexo-hide-posts --save

在_config.yml添加以下代码，注意这个配置项可以选择不填写，好像也没有使用上的差别 

1
2
3
4
5
6
7
8
9
10
# hexo-hide-posts
hide_posts:
  enable: true
  # Change the filter name to fit your need
  filter: hidden
  # Generators which you want to expose all posts (include hidden ones) to.
  # Common generators: index, tag, category, archive, sitemap, feed, etc.
  public_generators: []
  # Add "noindex" meta tag to prevent hidden posts from being indexed by search engines
  noindex: true

调用代码

1
hidden: true

项目示例

1
2
3
4
5
---
title: 'Lorem Ipsum'
date: '2019/8/10 11:45:14'
hidden: true
---