AI-摘要
切换
Tianli GPT
AI初始化中...
介绍自己 🙈
生成本文简介 👋
推荐相关文章 📖
前往主页 🏠
前往tianli博客
2022
插件
一些必要和可能用的上的插件安装
1 | npm install hexo-generator-search --save # 本地搜索系统 |
图标
经常去的图标库：
加载水印
给自己的图简单加载水印
Live2d
Akilar店长原教程： Live2d Widget
点击查看教程（方式一）
这种安装使用的Live2d比较单调，不过这样耗资源较少，比较推荐这个，如果想要可以换装换角色的看方式二
插件安装
在Hexo根目录
[BlogRoot]下打开终端，输入以下指令安装必要插件：1
npm install --save hexo-helper-live2d
打开站点配置文件
[BlogRoot]\config.yml
添加live2d的配置项，就直接把以下内容复制到最底部。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24# Live2D
## https://github.com/EYHN/hexo-helper-live2d
live2d:
enable: true #开关插件版看板娘
scriptFrom: local # 默认
pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
pluginModelPath: assets/ # 模型文件相对与插件根目录路径
# scriptFrom: jsdelivr # jsdelivr CDN
# scriptFrom: unpkg # unpkg CDN
# scriptFrom: https://npm.elemecdn.com/[email protected]/lib/L2Dwidget.min.js # 你的自定义 url
tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
debug: false # 调试, 是否在控制台输出日志
model:
use: live2d-widget-model-wanko # npm-module package name
# use: wanko # 博客根目录/live2d_models/ 下的目录名
# use: ./wives/wanko # 相对于博客根目录的路径
# use: https://npm.elemecdn.com/[email protected]/assets/wanko.model.json # 你的自定义 url
display:
position: right #控制看板娘位置
width: 150 #控制看板娘大小
height: 300 #控制看板娘大小
mobile:
show: true # 手机中是否展示
更换
同样是在Hexo根目录
[BlogRoot]下，打开终端，选择想要的看板娘进行安装，例如我这里用到的是live2d-widget-model-koharu，一个Q版小正太。模型名称可以到live2d-widget-models参考，一些模型的预览可以去这里的模型预览查看。输入指令以下指令：
1
npm install --save live2d-widget-model-koharu
在站点配置文件
[BlogRoot]\_config.yml里找到model项修改为自己安装的模型1
2
3model:
use: live2d-widget-model-koharu # npm-module package name
# 默认为live2d-widget-model-wankoLive2d卸载
卸载插件和卸载模型的指令都是通过npm进行操作的。在博客根目录
[BlogRoot]打开终端，输入：1
2npm uninstall hexo-helper-live2d #卸载看板娘插件
npm uninstall live2d-widget-model-modelname #卸载看板娘模型。记得替换modelname为看板娘名称
点击查看教程（方式二）
以
Butterfly主题为例，在[Blogroot]\themes\butterfly\source\目录下打开终端,输入1
git clone https://github.com/stevenjoezhang/live2d-widget.git live2d-widget
这行指令的意思就是
clone这个项目到source路径下并重命名为live2d-widget。emm，貌似本来就叫live2d-widget。反正算是一个踩坑点。如果是用下载项目压缩包，解压后放到这里的，也记得把文件夹更名为live2d-widget。找到路径
[Blogroot]\themes\butterfly\source\live2d-widget\autoload.js，打开autoload.js，修改内容：1
2- const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/";
+ const live2d_path = "/live2d-widget/";此处引用一下参考教程原话：
autoload.js中的注释的绝对地址指的是，将资源打包放到[Blogroot]/theme/next/source中后，以[Blogroot]/theme/next/source为根目录（/）的绝对路径。在
Butterfly的主题配置文件[Blogroot]\_config.butterfly.yml中,butterfly主题其实自带fontawesome依赖，无需引入。1
2
3
4
5
6
7
8
9# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
head:
# - <link rel="stylesheet" href="/xxx.css">
bottom:
# - <script src="xxxx"></script>
+ - <script defer src="/live2d-widget/autoload.js"></script>自定义修改（进阶）
有一定前端基础的小伙伴可以通过修改
[Blogroot]\themes\butterfly\source\live2d-widget路径下的样式资源文件：waifu-tips.js:包含了按钮和对话框的逻辑waifu-tips.json:定义了触发条件（selector，CSS 选择器）和触发时显示的文字（text）；waifu.css:看板娘的样式表。可以对看板娘的位置布局等做自定义修改。
本地化API配置
懒人配置方案:修改张书樵大神的项目内的
~\live2d-widget\autoload.js,将模型资源由cdnPath改为apiPath。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16// 加载 waifu.css live2d.min.js waifu-tips.js
if (screen.width >= 768) {
Promise.all([
loadExternalResource(live2d_path + "waifu.css", "css"),
loadExternalResource(live2d_path + "live2d.min.js", "js"),
loadExternalResource(live2d_path + "waifu-tips.js", "js")
]).then(() => {
initWidget({
waifuPath: live2d_path + "waifu-tips.json",
- //apiPath: "https://live2d.fghrsh.net/api/",
- cdnPath: "https://cdn.jsdelivr.net/gh/fghrsh/live2d_api/"
+ apiPath: "https://live2d.fghrsh.net/api/",
+ //cdnPath: "https://cdn.jsdelivr.net/gh/fghrsh/live2d_api/"
});
});
}模型配置方案更改
上面已经说到过，张书樵大神的魔改方案其实已经实现了
本地化API，只是因为模型配置路径不同才导致无法换装的。所以其实只要注意配置模型时，保证每个可以展示的模型都有相应的index.json并且在model_list.json里有相应的模型路径就可以了。
这里可以比对参考店长改好的路径项目和原项目的区别也可以直接使用店长配置好的本地化项目的路径：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17// 加载 waifu.css live2d.min.js waifu-tips.js
if (screen.width >= 768) {
Promise.all([
loadExternalResource(live2d_path + "waifu.css", "css"),
loadExternalResource(live2d_path + "live2d.min.js", "js"),
loadExternalResource(live2d_path + "waifu-tips.js", "js")
]).then(() => {
initWidget({
waifuPath: live2d_path + "waifu-tips.json",
//apiPath: "https://live2d.fghrsh.net/api/",
- cdnPath: "https://cdn.jsdelivr.net/gh/fghrsh/live2d_api/"
+ cdnPath: "https://npm.elemecdn.com/akilar-live2dapi@latest/"
//因为jsdelivr不支持50MB以上的包的加速，可能报403错误，所以用的vercel的CDN服务。
//可以考虑clone我配置好的live2d_api仓库自己部署到其他更快的cdn服务上。
});
});
}除了让原有模型换装可用化以外，店长还顺便添加了
亚丝娜、和泉纱雾，血小板、土间埋（干物妹小埋）和香风智乃的模型。
一图流
点击查看教程
三种不同类型的透明修改。
在
[BlogRoot]\source文件夹下新建一个放css的文件夹，该文件夹用于存放自定义的css样式，再新建一个名为custom.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{
background:rgba(255, 255, 255, 0.9);
}
/* 首页侧栏卡片 */
.card-widget{
background:rgba(255, 255, 255, 0.9);
}
/* 文章页面正文背景 */
div#post{
background: rgba(255, 255, 255, 0.9);
}
/* 分页页面 */
div#page{
background: rgba(255, 255, 255, 0.9);
}
/* 归档页面 */
div#archive{
background: rgba(255, 255, 255, 0.9);
}
/* 标签页面 */
div#tag{
background: rgba(255, 255, 255, 0.9);
}
/* 分类页面 */
div#category{
background: rgba(255, 255, 255, 0.9);
}opacity:0.5
opacity定义的是全局的透明度，会影响添加该属性的页面元素及其下属元素。1
2
3#footer{
opacity: 0.5;
}background:transparent
这一属性会让定义了该属性的页面元素背景变完全透明，但不会影响下属元素，效果等同于
background:rgba(255,255,255,0)。实例：定义头图或页脚全透明以实现一图流（安知鱼取消了background看情况自行修改）。
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/* 页脚透明 */
#footer{
background: transparent;
}
/* 页脚黑色透明玻璃效果移除 */
#footer::before{
background: transparent;
}
/* 头图透明 */
#page-header{
background: transparent;
}
/* 头图遮罩层透明 */
#page-header::before{
background: transparent;
}
/*top-img黑色透明玻璃效果移除，不建议加，除非你执着于完全一图流或者背景图对比色明显 */
#page-header.post-bg:before {
background-color: transparent;
}
/*夜间模式伪类遮罩层透明*/
[data-theme="dark"]
#footer::before{
background: transparent;
}
[data-theme="dark"]
#page-header::before{
background: transparent;
}
图片模糊渐变清晰
点击查看教程
css3中有个filter滤镜属性，可以提供高斯模糊滤镜。而animation动画属性支持给网页添加动画效果。把他们结合一下就可以了。
此处以给网页头图和网页背景添加图片渐变模糊为例，在
custom.css中添加1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23/*10s为加载动画的时间，1为加载动画的次数，ease-in-out为动画效果*/
#page-header,
#web_bg {
-webkit-animation: imgblur 10s 1 ease-in-out;
animation: imgblur 10s 1 ease-in-out;
}
@keyframes imgblur {
0% {
filter: blur(5px);
}
100% {
filter: blur(0px);
}
}
/*适配使用-webkit内核的浏览器 */
@-webkit-keyframes imgblur {
0% {
-webkit-filter: blur(5px);
}
100% {
-webkit-filter: blur(0px);
}
}考虑到还有部分读者的需求是指定页面，可以在对应文章或者page的markdown文件里写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{% raw %}
<style>
/*10s为加载动画的时间，1为加载动画的次数，ease-in-out为动画效果*/
#page-header,
#web_bg {
-webkit-animation: imgblur 10s 1 ease-in-out;
animation: imgblur 10s 1 ease-in-out;
}
@keyframes imgblur {
0% {
filter: blur(5px);
}
100% {
filter: blur(0px);
}
}
/*适配使用-webkit内核的浏览器 */
@-webkit-keyframes imgblur {
0% {
-webkit-filter: blur(5px);
}
100% {
-webkit-filter: blur(0px);
}
}
</style>
{% endraw %}
自定义字体
点击查看教程
准备好字体文件后，在
[BlogRoot]\source\css\custom.css（没有就自己创建）中添加以下代码：1
2
3
4
5
6
7
8
9
10
11
12@font-face {
/* 为载入的字体取名字(随意) */
font-family: 'YSHST';
/* 字体文件地址(相对或者绝对路径都可以) */
src: url(/font/优设好身体.woff2);
/* 定义加粗样式(加粗多少) */
font-weight: normal;
/* 定义字体样式(斜体/非斜体) */
font-style: normal;
/* 定义显示样式 */
font-display: block;
}各个属性的定义：
font-family属性值中使用webfont来声明使用的是服务器端字体，即设置文本的字体名称。
src属性值中首先指定了字体文件所在的路径。
format声明字体文件的格式，可以省略文件格式的声明，单独使用src属性值。
font-style：设置文本样式。取值：normal:不使用斜体；italic:使用斜体；oblique:使用倾斜体；inherit：从父元素继承。
支持格式：*.eot(老版本IE)，*.otf，*.ttf，*.woff，*.woff2(推荐)
在主题配置文件
_config.butterfly.yml中的font配置项以及blog_title_font配置项写上你刚刚引入的字体名称，系统会根据先后次序从前到后依次加载这些字体：1
2
3
4
5
6
7
8
9
10
11
12# Global font settings
# Don't modify the following settings unless you know how they work (非必要不要修改)
font:
global-font-size: '15px'
code-font-size: '14px'
font-family: YSHST, -apple-system, 'Quicksand', 'Nimbus Roman No9 L', 'PingFang SC', 'Hiragino Sans GB', 'Noto Serif SC', 'Microsoft Yahei', 'WenQuanYi Micro Hei', 'ST Heiti', sans-serif;
code-font-family: Consolas, YSHST, "Microsoft YaHei", Menlo, "PingFang SC", "Microsoft JhengHei", sans-serif
# 左上角網站名字 主頁居中網站名字
blog_title_font:
font_link:
font-family: YSHST, -apple-system, BlinkMacSystemFont, "Segoe UI" , "Helvetica Neue" , Lato, Roboto, "PingFang SC" , "Microsoft JhengHei" , "Microsoft YaHei" , sans-serif
添加外挂标签
点击查看教程
新建[Blogroot]/source/js/ali_font.js, 输入以下内容
1 | !(function (c) { |
执行以下命令：
1 | # https://www.npmjs.com/package/hexo-butterfly-tag-plugins-plus |
在主题文件下添加配置项：
1 | # tag-plugins-plus |
导航栏居中
点击查看教程
在[BlogRoot]\source\css\custom.css中引入如下css代码，然后在主题配置文件_config.butterfly.yml中引入该文件：
1 | /* 一级菜单居中 */ |
此处的css实现了两个作用：菜单栏居中、子菜单横向显示。其中子菜单横向显示要根据自己的实际情况来改，例如你的以及菜单的第2个选项中有子菜单，那就要加一项调节第2个选项中的子菜单，这个具体调节多少要根据你的具体情况为准，可以自己慢慢调到中间。
此时我们只需要在主题配置文件_config.butterfly.yml中列表对应的地方加一个hide即可，如下图的列表选项：
1 | menu: |
此时有人觉得右边搜索按钮露出搜索两个字很丑，我们也可以把它隐藏了，在[BlogRoot]\themes\Butterfly\layout\includes\header\nav.pug（npm安装的在[BlogRoot]\node_moudules\hexo-theme-butterfly\layout\includes\header\nav.pug）中把以下语句删除或注释掉即可，搜索两个字就不会显示出来(这种语句统一写法是直接删除+就可以，不用补空格)。
1 | nav#nav |
引入阿里图标
店长原教程：https://akilar.top/posts/d2ebecef/
点击查看教程
注意 ⚠️这里需要先自行引入ali_font.js
添加外挂标签，在[Blogroot]\themes\butterfly\scripts\tag\目录下新建iconfont.js，打开[Blogroot]\themes\butterfly\scripts\tag\iconfont.js,输入
1 | ; |
1 | {% icon [icon-xxxx],[font-size] %} |
icon-xxxx：表示图标font-class,可以在自己的阿里矢量图标库项目的font-class引用方案内查询并复制。font-size：表示图标大小，直接填写数字即可，单位为em。图标大小默认值为1em。
1 | {% icon icon-rat_zi %}{% icon icon-rat,2 %} |
站点动态 title
点击查看教程
添加自定义title.js，然后主题配置文件inject引入即可。
1 | //动态标题 |
添加 wowjs 特效
点击查看教程
参考：wowjs 特效
1 | npm install hexo-butterfly-wowjs --save |
在主题文件下添加配置项：
1 | # wowjs |
留言板：薇尔莉特信封
点击查看教程
1 | npm install hexo-butterfly-envelope --save |
在主题文件下添加配置项：
1 | # envelope_comment |
1 | 留言板: /comments/ || fas fa-envelope |
电子钟
参考：https://anzhiy.cn/posts/fc18.html
点击查看教程
1 | npm install hexo-butterfly-clock-anzhiyu --save |
在主题文件下添加配置项：
1 | # electric_clock |
hexo-butterfly-categories-card
点击查看教程
店长原教程： Akilarの糖果屋
1 | npm install hexo-butterfly-categories-card --save |
在_config.butterfly.yml加入以下配置项：
1 | # hexo-butterfly-categories-card |
字数统计
1 | npm install hexo-wordcount --save |
打赏按钮投币彩蛋效果
店长原教程：https://akilar.top/posts/23fdf850/
点击查看教程
修改[Blogroot]\themes\butterfly\languages\zh-CN.yml
1 | date_suffix: |
新建[Blogroot]source\css\coin\coin.css
1 | .tip-button { |
新建[Blogroot]\source\js\coin\coin.js
1 | var tipButtons = document.querySelectorAll(".tip-button"); |
修改_config.butterfly.yml,添加音频文件配置项，添加 CDN 配置项：
1 | # Sponsor/reward |
现在的打赏按钮样式需要稍作适配，当前若提示语太长，悬停时会无法显示完全。需要微调一下,修改[Blogroot]\themes\butterfly\source\css\_layout\reward.styl，整体替换为以下内容：
1 | .post-reward |
一些微改
还可以针对自己的情况适度调整以下内容：
修改悬停打赏按钮时的颜色填充长度：
1
2
3
4
5
6
7
8
9
10
11.reward-button
display: inline-block
padding: .2rem 1.2rem
background: var(--btn-bg)
color: var(--btn-color)
cursor: pointer
transition: all .4s
&:hover
- box-shadow: inset 9em 0 0 0 var(--btn-hover-color)
+ box-shadow: inset 20em 0 0 0 var(--btn-hover-color)修改打赏二维码的样式（仅针对 2 张二维码的情况，单张不用改动。两张以上需要自己调试这两个参数）
1
2
3
4
5
6
7
8
9
10.reward-main
position: absolute
bottom: 40px
- left: 0
+ left: -25%
z-index: 100
display: none
padding: 0 0 15px
- width: 100%
+ width: 150%
每页单独配置背景图
店长原教程：https://akilar.top/posts/23fdf850/
点击查看教程
查看单独页背景配置魔改教程
修改
[Blogroot]\themes\butterfly\layout\includes\layout.pug1
2
3
4
5
6if theme.background
- #web_bg
+ if page.background
+ #web_bg(style=`background:`+ page.background + `;background-attachment: local;background-position: center;background-size: cover;background-repeat: no-repeat;`)
+ else
+ #web_bg如此即可在每个页面的
markdown文件的front-matter中使用background配置项单独配置页面背景了,不写或留空则使用主题配置文件中的默认背景。1
2
3
4
5
6
7
8
9
10
11---
title: hexo-butterfly主题美化记录
tags: Hexo
cover: "https://npm.elemecdn.com/[email protected]/img/post/blog-construct/banner.jpg"
keywords: "使用 Github Pages 和 Hexo 搭建自己的独立博客,博客,hexo,github,搭博客"
description: 记录搭建博客的经历~
abbrlink: ddae
date: 2022-03-31 13:26:54
background: url(https://npm.elemecdn.com/[email protected]/img/post/blog-construct/banner.jpg)
swiper_index: 4
---开了 pjax 的用户会发现背景变了以后就变不回去了，需要刷新才行。因此为了实现期望的效果，这里还要再把
#web_bg加到pjax选择器中。
修改[Blogroot]\themes\butterfly\layout\includes\third-party\pjax.pug1
2
3
4
5
6
7
8
9
10
11script(src=url_for(theme.CDN.pjax))
script.
let pjaxSelectors = [
'title',
'#config-diff',
'#body-wrap',
'#rightside-config-hide',
'#rightside-config-show',
+ '#web_bg',
'.js-pjax'
]
菜单栏多色图标配置教程
店长原教程：https://akilar.top/posts/23fdf850
点击查看教程
配置项
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
head:
# 公共css
- <link rel="stylesheet" href="/css/custom.css"">
- <link rel="stylesheet" href="https://cdn.cbd.int/[email protected]/font/qweather-icons.css">
# - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">
bottom:
# 控制台打印消息
- <script async rel="prefetch" src="/js/console.js"></script>
# 标题卖萌
- <script async src="/js/diytitle.js"></script>
# 站点公祭日自动变灰判定
- <script async src="/js/grayscale.js"></script>
# 浮动动画特效
- <script async data-pjax src="/js/floatpanel.js"></script>
# aplayer音乐
- <div class="aplayer no-destroy" data-id="1708664797" data-server="tencent" data-type="playlist" data-order="list" data-fixed="true" data-preload="auto" data-autoplay="false" data-mutex="true" ></div>替换全部内容修改
[Blogroot]\themes\butterfly\layout\includes\header\menu_item.pug,本方案默认使用观感最佳的悬停父元素触发子元素动画效果。默认动画为faa-tada。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
44if theme.menu
//- for mobile sidebar
- let sidebarChildHide = theme.hide_sidebar_menu_child ? 'hide' : ''
.menus_items
each value, label in theme.menu
if typeof value !== 'object'
.menus_item
a.site-page.faa-parent.animated-hover(href=url_for(trim(value.split('||')[0])))
if value.split('||')[1]
- var icon_value = trim(value.split('||')[1])
- var anima_value = value.split('||')[2] ? trim(value.split('||')[2]) : 'faa-tada'
if icon_value.substring(0,2)=="fa"
i.fa-fw(class=icon_value + ' ' + anima_value)
else if icon_value.substring(0,4)=="icon"
svg.icon(aria-hidden="true" class=anima_value)
use(xlink:href=`#`+ icon_value)
span=' '+label
else
.menus_item
a.site-page.faa-parent.animated-hover(href='javascript:void(0);')
if label.split('||')[1]
- var icon_label = trim(label.split('||')[1])
- var anima_label = label.split('||')[2] ? trim(label.split('||')[2]) : 'faa-tada'
if icon_label.substring(0,2)=="fa"
i.fa-fw(class=icon_label + ' ' + anima_label)
else if icon_label.substring(0,4)=="icon"
svg.icon(aria-hidden="true" class=anima_label)
use(xlink:href=`#`+ icon_label)
span=' '+ trim(label.split('||')[0])
i.fas.fa-chevron-down.expand(class=sidebarChildHide)
ul.menus_item_child
each val,lab in value
li
a.site-page.child.faa-parent.animated-hover(href=url_for(trim(val.split('||')[0])))
if val.split('||')[1]
- var icon_val = trim(val.split('||')[1])
- var anima_val = val.split('||')[2] ? trim(val.split('||')[2]) : 'faa-tada'
if icon_val.substring(0,2)=="fa"
i.fa-fw(class=icon_val + ' ' + anima_val)
else if icon_val.substring(0,4)=="icon"
svg.icon(aria-hidden="true" class=anima_val)
use(xlink:href=`#`+ icon_val)
span=' '+ lab修改配置项
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15menu:
首页: / || fas fa-home || faa-tada
时间轴: /archives/ || fas fa-archive
闲言碎语: /artitalk/ || fas fa-comment-dots
音乐馆: /music/ || fas fa-music
分类: /categories/ || fas fa-folder-open
# List||fas fa-list:
# Music: /music/ || fas fa-music
# Movie: /movies/ || fas fa-video
朋友圈: /fcircle/ || fab fa-artstation
留言板: /comments/ || fas fa-envelope
友人帐: /link/ || fas fa-link
# 闲言碎语: /hpptalk/ || fas fa-comment-dots
追番: /bangumis/ || icon-bilibili1
关于: /about/ || icon-zhifeiji
Social 卡片彩色图标引入
店长原教程：https://akilar.top/posts/23fdf850/
点击查看教程
重写
[Blogroot]\themes\butterfly\layout\includes\header\social.pug,替换为以下代码：1
2
3
4
5
6
7
8
9
10each value, title in theme.social
a.social-icon.faa-parent.animated-hover(href=url_for(trim(value.split('||')[0])) target="_blank" title=title === undefined ? '' : trim(title))
if value.split('||')[1]
- var icon_value = trim(value.split('||')[1])
- var anima_value = value.split('||')[2] ? trim(value.split('||')[2]) : 'faa-tada'
if icon_value.substring(0,2)=="fa"
i.fa-fw(class=icon_value + ' ' + anima_value)
else if icon_value.substring(0,4)=="icon"
svg.icon(aria-hidden="true" class=anima_value)
use(xlink:href=`#`+ icon_value)以下为对应的
social配置项。写法沿用menu_item的写法示例。早就想吐槽 butterfly 里 menu 和 social 截然相反的配置项写法了。修改[Blogroot]\_config.butterfly.yml的social配置项。1
2
3
4
5
6
7
8
9# social settings (社交图标设置)
# formal:
# icon: link || the description
social:
Github: https://github.com/anzhiyu-c || icon-gitHub || faa-tada
Email: https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&[email protected] || icon-youxiang || faa-tada
RSS: atom.xml || icon-rss || faa-tada
BiliBili: https://space.bilibili.com/372204786 || icon-bilibili || faa-tada
QQ: tencent://Message/?Uin=2268025923&websiteName=local.edu.com:8888=&Menu=yes || icon-QQ1 || faa-tada
random.js 随机跳转一篇文章
洪哥原教程：https://blog.zhheo.com/p/c116857c.html
点击查看教程
创建themes/butterfly/scripts/helpers/random.js文件
1 | hexo.extend.generator.register("random", function (locals) { |
如果你没有开启pjax用下面的代码：
1 | hexo.extend.generator.register("random", function (locals) { |
在主题配置文件引入themes/butterfly/_config.yml，inject的bottom里添加
1 | <script src="/anzhiyu/random.js"></script> |
调用
在需要调用的位置执行toRandomPost()函数即可。
比如任意dom添加onclick="toRandomPost()"
文章双栏
小冰博客原教程：https://zfe.space/post/hexo-butterfly-article-double-row.html
点击查看教程
执行以下命令
1 | npm i hexo-butterfly-article-double-row --save |
注意，一定要加 –save，不然本地预览的时候可能不会显示！！！
新增网站根目录_config 配置项 (不是主题的)：
1 | butterfly_article_double_row: |
相关推荐
评论
匿名评论隐私政策
✅ 你无需删除空行，直接评论以获取最佳展示效果
冰梦
公告