hexo-butterfly魔改记录

本文主要是介绍hexo-butterfly魔改记录，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

使用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即可。

参数解释：

随机背景图

参考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 #加载动画自定义

参数说明

这篇关于hexo-butterfly魔改记录的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！