hexo-butterfly魔改记录

2023-12-28 13:08:04

使用hexo-butterfly框架搭建个人博客

这里记录一下我自己搭建（魔改/照搬他人）个人博客的步骤，日后查找起来也方便。

留言板信封

出自https://akilar.top/posts/e2d3c450/

这里直接npm安装配置拿来用了。这里转载一下安装方法：

博客根目录执行

npm install hexo-butterfly-envelope --save

在站点配置文件或者主题配置文件添加配置项（对，两者任一均可。但不要都写）

# envelope_comment
# see https://akilar.top/posts/58900a8/
envelope_comment:
  enable: true #开关
  cover: https://ae01.alicdn.com/kf/U5bb04af32be544c4b41206d9a42fcacfd.jpg #信笺封面图
  message: #信笺内容，支持多行
    - 有什么想问的？
    - 有什么想说的？
    - 有什么想吐槽的？
    - 哪怕是有什么想吃的，都可以告诉我哦~
  bottom: 自动书记人偶竭诚为您服务！ #信笺结束语，只能单行
  height: #调整信笺划出高度，默认1050px
  path: #【可选】comments 的路径名称。默认为 comments，生成的页面为 comments/index.html
  front_matter: #【可选】comments页面的 front_matter 配置
    title: 留言板
    comments: true

字体样式修改

修改字体样式直接引入css文件和字体包即可。

1、首先寻找喜欢的字体，有些字体很好看并且是免费非商用的，我们可以拿来用。

这里推荐几个网址供参考：方正字库，第一字体网，字体天下，字体家，*字体

2、将需要使用的字体文件放入博客目录下，我这里是放在blog/source/butterfly/css下，方便css文件引入。

3、如有有css文件，就在最下面继续写；如果没有，则新建一个css文件，文件名任取

@font-face{
  font-family: 'FZFW' ;  /* 自定义字体名称 */
  src: url('FZFWZhu.ttf'); /* 引入字体文件的路径 */
}
/*应用在body体里，放在第一个，font-family会按顺序使用字体族。如果第一个没找到就会找第二个，以此类推。*/
body {
font-family: FZFW,-apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Lato, Roboto, "PingFang SC", "STZhongsong", "Lantinghei SC", sans-serif
}

鼠标样式修改

这里使用的是小康博客的鼠标样式。如果只想修改鼠标样式，在css文件添加下方代码，然后引入即可。

/*指针样式*/
body {
    cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/default.cur),
        default;
}
/*链接小手样式*/
a,
img {
    cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/pointer.cur),
        default;
}

小康博客css修改

我这里是直接使用大佬现成的文件，主题配置中inject引入css文件。

inject:
  head:
    - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/static-butterfly/dist/css/index.min.css">

图片透明度修改

这里使用的是Akilar大佬的修改方案，个人倾向于一图流，比较符合我的审美。

/* 页脚透明 */
#footer{
  background: transparent!important;
}
/* 头图透明 */
#page-header{
  background: transparent!important;
}
/*top-img黑色透明玻璃效果移除，不建议加，除非你执着于完全一图流或者背景图对比色明显 */
#page-header.post-bg:before {
  background-color: transparent!important;
}
/*夜间模式伪类遮罩层透明*/
[data-theme="dark"]
  #footer::before{
      background: transparent!important;
    }
[data-theme="dark"]
  #page-header::before{
    background: transparent!important;
    }

由于前面使用了小康博客的css，页脚的模糊毛玻璃效果没去掉，在页面F12审查元素之后发现是#footer, #footer:before这个选择器有问题，修改如下：

#footer, #footer:before {
    background: transparent!important
}

这样页脚就透明了。

背景音乐添加

这里参考作者的全局吸底Aplayer教程，为方便后续自己查阅，特摘抄出来。

首先安装hexo-tag-aplayer插件,官方github；

博客根目录安装：

npm install --save hexo-tag-aplayer

由于需要全局都插入aplayer和meting资源，为了防止插入重复的资源，需要把asset_inject设为false

在hexo的配置文件中

aplayer:
  meting: true
  asset_inject: false

在主题配置文件中，enable设为true和per_page设为true

# Inject the css and script (aplayer/meting)
aplayerInject:
  enable: true
  per_page: true

然后把代码插入到页脚中

inject:
  head:
  bottom:
    - <div class="aplayer no-destroy" data-id="000PeZCQ1i4XVs" data-server="tencent" data-type="artist" data-fixed="true" data-mini="true" data-listFolded="false" data-order="random" data-preload="none" data-autoplay="true" muted></div>

运行Hexo就可以看到网页左下角出现了Aplayer

最后，如果你想切换页面时，音乐不会中断。把主题配置文件的pjax设为true即可。

参数解释：

选项	默认值	描述
data-id	必须值	歌曲 id / 播放列表 id / 相册 id / 搜索关键字
data-server	必须值	音乐平台: `netease`, `tencent`, `kugou`, `xiami`, `baidu`
data-type	必须值	`song`, `playlist`, `album`, `search`, `artist`
data-fixed	`false`	开启固定模式
data-mini	`false`	开启迷你模式
data-loop	`all`	列表循环模式：`all`, `one`,`none`
data-order	`list`	列表播放模式： `list`, `random`
data-volume	0.7	播放器音量
data-lrctype	0	歌词格式类型
data-listfolded	`false`	指定音乐播放列表是否折叠
data-storagename	`metingjs`	LocalStorage 中存储播放器设定的键名
data-autoplay	`true`	自动播放，移动端浏览器暂时不支持此功能
data-mutex	`true`	该选项开启时，如果同页面有其他 aplayer 播放，该播放器会暂停
data-listmaxheight	`340px`	播放列表的最大长度
data-preload	`auto`	音乐文件预载入模式，可选项： `none`, `metadata`, `auto`
data-theme	`#ad7a86`	播放器风格色彩设置

随机背景图

参考Akilar大佬的修改方案。

首先必须设置网站背景图，在主题配置中找到并且配置。我这里是配置成了'#efefef'

# Website Background (設置網站背景)
# can set it to color or image (可設置圖片 或者 顔色)
# The formal of image: url(http://xxxxxx.com/xxx.jpg)
background: '#efefef'

配置之后，主页使用#web_bg的div来存放背景图片，使用#page-header来存放banner图片。使用js随机选择一张图片，然后根据id取值重设即可做到每次切换或刷新时，随机背景图片。

我这里在blog/source/butterfly/js下新建了rdmbkg.js文件

//随机背景图片数组,图片可以换成图床链接，注意最后一条后面不要有逗号
var backimg =[
  "url(/img/bg1.JPG)",
  "url(/img/bg2.jpg)",
  "url(/img/bg3.jpg)",
  "url(/img/bg4.jpg)"
];
//获取背景图片总数，生成随机数
var bgindex =Math.ceil(Math.random() * (backimg.length-1));
//重设背景图片
document.getElementById("web_bg").style.backgroundImage = backimg[bgindex];
//随机banner数组,图片可以换成图床链接，注意最后一条后面不要有逗号
var bannerimg =[
  "url(/img/bg1.JPG)",
  "url(/img/bg2.jpg)",
  "url(/img/bg3.jpg)",
  "url(/img/bg4.jpg)"
];
//获取banner图片总数，生成随机数
var bannerindex =Math.ceil(Math.random() * (bannerimg.length-1));
//重设banner图片
document.getElementById("page-header").style.backgroundImage = bannerimg[bannerindex];

最后在主题配置文件中引入js

inject:
  head:
  bottom:
    - <script async data-pjax src="/js/randombg.js"></script>

侧边栏时钟

参考这里，我直接npm安装之后拿来用了，下面内容均摘自原博客。

博客根目录执行命令

npm install hexo-butterfly-clock --save

在hexo配置，或者主题配置中任选一个添加如下配置信息即可。二选一，不要都添加。

# electric_clock
# see https://akilar.top/posts/4e39cf4a/
electric_clock:
  enable: true # 开关
  priority: 5 #过滤器优先权
  enable_page: all # 应用页面
  exclude:
    # - /posts/
    # - /about/
  layout: # 挂载容器类型
    type: class
    name: sticky_layout
    index: 0
  loading: /img/loading.gif #加载动画自定义

参数说明

参数	备选值/类型	释义
priority	number	【可选】过滤器优先级，数值越小，执行越早，默认为10，选填
enable	true/false	【必选】控制开关
enable_page	path/all	【可选】填写想要应用的页面的相对路径（即路由地址）,如根目录就填’/‘,分类页面就填’/categories/‘。若要应用于所有页面，就填’all’，默认为all
exclude	path	【可选】填写想要屏蔽的页面，可以多个。写法见示例。原理是将屏蔽项的内容逐个放到当前路径去匹配，若当前路径包含任一屏蔽项，则不会挂载。
layout.type	id/class	【可选】挂载容器类型，填写id或class，不填则默认为id
layout.name	text	【必选】挂载容器名称
layout.index	0和正整数	【可选】前提是layout.type为class，因为同一页面可能有多个class，此项用来确认究竟排在第几个顺位
loading	URL	【可选】电子钟加载动画的图片

码农公寓