butterfly 美化日记 (一)

作者：程序员余白

2022-11-10
陕西
本文字数：8732 字
阅读完需：约 29 分钟

前言

这一篇内容在搭建完 hexo 框架的基础上进行博客的魔改，这是我自己的记录，你可以直接看我推荐大佬的博客，然后进行魔改，这篇文章不常更，还望周知！！！
推荐大佬博客，根据自己的需求进行魔改：糖果屋

butterfly 魔改

看到这里相信大家已经搭建好了属于自己的博客，本来想这先出优化博客的教程，但是我觉得通过上篇的教程，网页还是有很多不足的地方，本篇教程继续带领大家，完成博客的美化，搭好框架，打造一个属于自己免费的炫酷博客。
还是那句话，魔改的尽头是默认，哈哈，我只挑我觉得不足的地方，争取教会大家方法，大家也可以根据自己的喜好，查询官方文档，设置自己的博客。
官方文档链接：https://butterfly.js.org/posts/4aa8abbe/
如果你没有 pug 以及 stylus 的渲染器，请下载安装
npm install hexo-renderer-pug hexo-renderer-stylus --save

主页的美化

我发现每次进来这个部分的背景颜色都不一样，有的时候随机匹配出来的很丑，于是乎我就开始看代码，查官方文档的帮助文档，将这部分内容做了修改，觉得没有影响的可以忽略这部分的内容。

我设置了主题配置文件以下内容：
方式一：删除掉后面的值，我觉得更美观些
方式二：将背景改成透明,或者引用别人的 css 文件，推荐的大佬博客里面都有，这里不在赘述

生成文章唯一链接

Hexo 的默认文章链接格式是年，月，日，标题这种格式来生成的。如果你的标题是中文的话，那你的 URL 链接就会包含中文，复制后的 URL 路径就是把中文变成了一大堆字符串编码，如果你在其他地方用这边文章的 url 链接，偶然你又修改了改文章的标题，那这个 URL 链接就会失效。为了给每一篇文章来上一个属于自己的链接，利用 hexo-abbrlink 插件 ,来解决这个问题。
参考 github 官方： hexo-abbrlink 按照此教程配置完之后如下：
记得修改每篇文章 abbrlink 的值

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

CODEnpm install hexo-abbrlink --save

复制代码

2、插件安装成功后，在根目录的配置文件 _config.yml 找到 permalink：

CODEpermalink: :year/:month/:day/:title/#修改为permalink: post/:abbrlink.html # post为自定义前缀abbrlink:        alg: crc32   #算法： crc16(default) and crc32        rep: hex     #进制： dec(default) and hex

复制代码

打字效果

修改主题配置文件 _config.butterfly.yml 的 activate_power_mode 即可

activate_power_mode:  enable: true  colorful: true # open particle animation (冒光特效)  shake: true #  open shake (抖動特效)  mobile: false

复制代码

网站副标题

可设置主页中展示的网站副标题或者自己喜欢的座右铭

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

# Sitetitle: Hexosubtitle:  enable: true  # Typewriter Effect (打字效果)  effect: true  # loop (循環打字)  loop: true  # source 調用第三方服務  # source: false 關閉調用  # source: 1  調用一言網的一句話（簡體） https://hitokoto.cn/  # source: 2  調用一句網（簡體） http://yijuzhan.com/  # source: 3  調用今日詩詞（簡體） https://www.jinrishici.com/  # subtitle 會先顯示 source , 再顯示 sub 的內容  # source: 3  # 如果關閉打字效果，subtitle 只會顯示 sub 的第一行文字  sub:    - 我双手合十的愿望里永远有你。    - 穿越人海，只为与你相拥。    - 手握日月摘 ♥ 陈。

复制代码

文章置顶

PS：要实现这个功能的方法很多，有一个就可以了

方式一：

Hexo 本身并没有内置文章置顶功能，因此需要自行安装。

# 先卸载npm uninstall --save hexo-generator-index
# 再安装npm install --save hexo-generator-index-pin-top

复制代码

就需要在文章的头部信息栏加入一个 header 属性：

title: 谢谢你来看我的博客date: 2020-01-31 17:09:13top: trueheader: false

复制代码

方式二：

在你的 .md 的文件属性栏添加 sticky 属性，值越大文章越靠前

代码高亮主题

Butterfly 支持 6 种代码高亮样式：

darker
pale night
light
ocean
mac
mac light

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

highlight_theme: mac light

复制代码

这个自行选择

运行时间

网页已运行时间

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

runtimeshow:  enable: true  publish_date: 6/7/2018 00:00:00    ##网页开通时间  #格式: 月/日/年 时间  #也可以写成 年/月/日 时间

复制代码

代码复制

主题支持代码复製功能

修改主题配置文件

highlight_copy: true

复制代码

侧边栏时钟

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

npm install hexo-butterfly-clock --save

复制代码

2、添加配置信息，以下为写法示例

在站点配置文件 _config.yml 或者主题配置文件 _config.butterfly.yml 中添加：

# 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: https://npm.elemecdn.com/hexo-butterfly-clock/lib/loading.gif #加载动画自定义  clock_css: https://npm.elemecdn.com/hexo-butterfly-clock/lib/clock.min.css  clock_js: https://npm.elemecdn.com/hexo-butterfly-clock/lib/clock.min.js  ip_api: https://pv.sohu.com/cityjson?ie=utf-8

复制代码

字数统计

要为 Butterfly 配上字数统计特性, 你需要如下几个步骤:

打开 hexo 工作目录
npm install hexo-wordcount —save or yarn add hexo-wordcount
修改主题配置文件 _config.butterfly.yml

wordcount:  enable: true  post_wordcount: true  min2read: true  total_wordcount: true

复制代码

公告 2 个小人

这里提供两个方式，一个是本地引入，第二种方式是直接引入别人的

方式一：

在 node_modules\hexo-theme-butterfly\layout\includes\widget\card_announcement.pug 下添加如下代码：


.xpand(style='height:200px;')  canvas.illo(width='800' height='800' style='max-width: 200px; max-height: 200px; touch-action: none; width: 640px; height: 640px;')script(src='https://fastly.jsdelivr.net/gh/xiaopengand/blogCdn@latest/xzxr/twopeople1.js')script(src='https://fastly.jsdelivr.net/gh/xiaopengand/blogCdn@latest/xzxr/zdog.dist.js')script#rendered-js(src='https://fastly.jsdelivr.net/gh/xiaopengand/blogCdn@latest/xzxr/twopeople.js')style.  .card-widget.card-announcement {  margin: 0;  align-items: center;  justify-content: center;  text-align: center;  }  canvas {  display: block;  margin: 0 auto;  cursor: move;  }

复制代码

方式二：

添加个性化板娘

以下整理了很多类别，选择自己喜好的怕动手就第一种，现在都很成熟，放心大胆的引用，我使用的就是第一种，但每种都试过了，才写出来,可以参考一下推荐的大佬博客的看板娘。
不怕动手建议选择大神魔改版本，可以根据自己的喜好进行配置，修改！！！
第一种：最简单引用方式在Butterfly/_config.yml中inject添加，复制的时候注意一下格式

inject:   head:     - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">   bottom:    - <script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>

复制代码

第二种：Hexo 插件版看板娘（不能换装）
在 Hexo 根目录[Blogroot]下打开终端，输入以下指令安装必要插件。

npm install --save hexo-helper-live2d

复制代码

打开站点配置文件[Blog]\config.yml搜索 live2d,按照如下注释内容指示进行操作。如果没有搜到 live2d 的配置项，就直接把以下内容复制到最底部
完成后保存修改，在 Hexo 根目录下运行指令
之所以必须要使用 hexo clean 是因为我们需要清空缓存重新生成静态页面，不然看板娘没被加入生成的静态页面里，是不会出现的。

更换看板娘

同样是在 Hexo 根目录[Blog]下，打开终端，选择想要的看板娘进行安装，例如我这里用到的是 live2d-widget-model-koharu，一个 Q 版小正太。其他的模型也可以在模型预览里查看以供选择。
输入指令
然后在站点配置文件
里找到
项修改为期望的模型。
之后按部就班的运行
就能在
上查看效果了。

卸载看板娘

这个是第二种方式安装看板娘的卸载方法，其它方式很简单就不说了

卸载插件和卸载模型的指令都是通过 npm 进行操作的。在博客根目录[Blog]打开终端，输入：

npm uninstall hexo-helper-live2d #卸载看板娘插件npm uninstall live2d-widget-model-modelname #卸载看板娘模型。记得替换modelname为看板娘名称

复制代码

卸载后为了保证配置项不出错，记得把[Blog]\_config.yml里的配置项给注释或者删除掉。

大神魔改看板娘

会说话，能换装，来自张书樵大神链接：https://github.com/stevenjoezhang/live2d-widget.git

在[Blog]\node_modules\hexo-theme-butterfly\source 目录下打开终端,输入
这行指令的意思就是clone这个项目到source路径下并重命名为live2d-widget。
我下载失败了就去了网址下载了压缩包，如果是用下载项目压缩包，解压后放到这里的，也记得把文件夹更名为live2d-widget。
找到路径[Blog]\node_modules\hexo-theme-butterfly\source\live2d-widget\autoload.js，打开autoload.js，找到这行代码，修改为如下内容：
此处引用一下参考教程原话：autoload.js中的注释的绝对地址指的是，将资源打包放到[Blogroot]/theme/next/source中后，以[Blogroot]/theme/next/source为根目录（/）的绝对路径。【旧版教程，可能和新版本路径不一样，明白意思即可】
在Butterfly的主题配置文件[Blog]\_config.butterfly.yml中,butterfly主题其实自带fontawesome依赖，无需引入
引入的时候记得写注释，以后改起来也方便
保存所有文件的修改，然后照例执行
就能在localhost:4000看到预览了。
自定义修改有一定前端基础的小伙伴可以通过修改[Blog]\\node_modules\hexo-theme-butterfly\source\live2d-widget路径下的样式资源文件：
waifu-tips.js:包含了按钮和对话框的逻辑
waifu-tips.json :定义了触发条件（selector，CSS 选择器）和触发时显示的文字（text）；
waifu.css:看板娘的样式表。可以对看板娘的位置布局等做自定义修改。

关于一些 bug 说明

在配置了gulp和pwa之后，看板娘消失。这个是gulp-babel压缩导致的。

解决方法

直接把看板娘提取出来作为单独的项目，然后借助 jsdelivr 引用相应的静态资源。live2d-widget文件夹不放在博客的source目录中，而是存在独立的github仓库里。这样gulp怎么也压缩不到。而且得益于jsdelivr，看板娘的加载速度也有所提高。
配置方法是将 live2d-widget 项目 fork 到自己的仓库（用原项目也可以，但是那样不方便更改样式啊），然后修改 autoload.js 里的路径为你自己的仓库名。【看清楚需要修改的地方】
在主题配置项里也可以使用https://cdn.jsdelivr.net/gh/YourGithubName/live2d-widget/autoload.js来引入。

说明：不知道怎么弄的可以去 csdn 搜一下本地仓库上传到 github 教程

本地化 API 配置

懒人配置方案:修改张书樵大神的项目内的~\live2d-widget\autoload.js,将模型资源由cdnPath改为apiPath。
上面已经说到过，张书樵大神的魔改方案其实已经实现了本地化API，只是因为模型配置路径不同才导致无法换装的。所以其实只要注意配置模型时，保证每个可以展示的模型都有相应的index.json并且在model_list.json里有相应的模型路径就可以了。这里读者可以直接使用我配置好的本地化项目的路径：修改张书樵大神的项目内的~\live2d-widget\autoload.js,修改cdnPath
除了让原有模型换装可用化以为，还顺便添加了亚丝娜、和泉纱雾，血小板、土间埋（干物妹小埋）和香风智乃的模型哦。

页脚跳动的♥

编辑博客根目录node_modules\hexo-theme-butterfly\layout\includes\footer.pug文件，修改以下内容

改第一部分内容

.copyright!= `&copy;${theme.footer.owner.since} - ${nowYear} By ${config.author}`

复制代码

将上面代码改为下面的

.copyright!= `&copy;${theme.footer.owner.since} - ${nowYear} <i id="heartbeat" class="fa fas fa-heartbeat"></i>  ${config.author}`

复制代码

改第二部分内容
将上面代码改为下面的
编辑butterfly.yml文件
在inject->head下面添加如下内容：

Butterfly 加载动画修改

添加配置文件，在目录node_modules\hexo-theme-butterfly\layout\includes\loading\loaded.ejs下添加 loaded.ejs 文件，代码如下

<% if (theme.preloader.enable) { %><div id='loader'>    <% if(theme.preloader.layout == 'gear' ) {%>    <div class="outer_box">    <div class='loader_overlay'></div>    <div class='loader_cogs'>        <div class='loader_cogs__top'>            <div class='top_part'></div>            <div class='top_part'></div>            <div class='top_part'></div>            <div class='top_hole'></div>        </div>        <div class='loader_cogs__left'>            <div class='left_part'></div>            <div class='left_part'></div>            <div class='left_part'></div>            <div class='left_hole'></div>        </div>        <div class='loader_cogs__bottom'>            <div class='bottom_part'></div>            <div class='bottom_part'></div>            <div class='bottom_part'></div>            <div class='bottom_hole'></div>        </div>        <p style="text-align:center">&nbsp;&nbsp;&nbsp;loading...</p>    </div>    </div>  <% } else if(theme.preloader.layout == 'spinner-box') { %>    <div class="loading-left-bg"></div>    <div class="loading-right-bg"></div>    <div class="spinner-box">        <div class="configure-border-1">            <div class="configure-core"></div>        </div>        <div class="configure-border-2">            <div class="configure-core"></div>        </div>        <div class="loading-word">加载中...</div>    </div>  <% } %></div>
<script>  var endLoading = function () {    document.body.style.overflow = 'auto';    document.getElementById('loader').classList.add("loading");  }  window.addEventListener('load',endLoading);</script><% } %>

复制代码

引入样式文件

引入 spinner-boxbutterfly，在主题配置文件 inject 处 heard 处引入以下代码

- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zyoushuo/Blog@latest/hexo/css/loading_style_1.css" >

复制代码

gear 风格样式文件引入

- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zyoushuo/Blog@latest/hexo/css/loading_style_2.css" >

复制代码

引入到页面

找到 node_modules\hexo-theme-butterfly\layout\includes\layout.pug ,将如下代码替换

if theme.preloader      !=partial('includes/loading/loading', {}, {cache:theme.fragment_cache})

复制代码

替换为如下代码：

if theme.preloader      !=partial('includes/loading/loaded.ejs', {}, {cache:theme.fragment_cache})

复制代码

开启加载
主题配置文件下的
改为如下：
不需要的话关掉即可

浏览器标题恶搞

在node_modules\hexo-theme-butterfly\source\js\crash_cheat.js文件夹下添加crash_cheat.js文件填入以下内容：（记得修改你喜好的标题）

var OriginTitle = document.title; var titleTime; document.addEventListener('visibilitychange', function () {     if (document.hidden) {         $('[rel="icon"]').attr('href', "/joke.ico");         document.title = '看不见我🙈~看不见我🙈~';         clearTimeout(titleTime);     }     else {         $('[rel="icon"]').attr('href', "/favicon.ico");         document.title = ' ( ๑•̀ㅂ•́) ✧被发现了～';         titleTime = setTimeout(function () {             document.title = OriginTitle;         }, 2000);     } });

复制代码

在 node_modules\hexo-theme-butterfly\layout\includes\layout.pug 中添加以下代码来引入

script(type='text/javascript', src='/js/crash_cheat.js')

复制代码

在inject: -> bottom: 引入以下文件

JAVASCRIPT- <script src="https://cdn.jsdelivr.net/gh/weilain/cdn-photo/js/jquery.min.js"></script>

复制代码

自定义文章封面

首先：找到主题配置文件 cover ，文章主题的修改在 cover 下，如果不想麻烦可以选择统一的封面，把默认的修改成自己喜欢的图片地址即可
自定义文章封面
写文章的时候在 cover 后面输入你想要的封面图片的 url，在 top_img 后面加上你想要的顶部图片的 url

背景渐变

在 css——>style.css 引入以下文件即可

#web_bg {  background: -webkit-linear-gradient(    0deg,    rgba(247, 149, 51, 0.1) 0,    rgba(243, 112, 85, 0.1) 15%,    rgba(239, 78, 123, 0.1) 30%,    rgba(161, 102, 171, 0.1) 44%,    rgba(80, 115, 184, 0.1) 58%,    rgba(16, 152, 173, 0.1) 72%,    rgba(7, 179, 155, 0.1) 86%,    rgba(109, 186, 130, 0.1) 100%  );  background: -moz-linear-gradient(    0deg,    rgba(247, 149, 51, 0.1) 0,    rgba(243, 112, 85, 0.1) 15%,    rgba(239, 78, 123, 0.1) 30%,    rgba(161, 102, 171, 0.1) 44%,    rgba(80, 115, 184, 0.1) 58%,    rgba(16, 152, 173, 0.1) 72%,    rgba(7, 179, 155, 0.1) 86%,    rgba(109, 186, 130, 0.1) 100%  );  background: -o-linear-gradient(    0deg,    rgba(247, 149, 51, 0.1) 0,    rgba(243, 112, 85, 0.1) 15%,    rgba(239, 78, 123, 0.1) 30%,    rgba(161, 102, 171, 0.1) 44%,    rgba(80, 115, 184, 0.1) 58%,    rgba(16, 152, 173, 0.1) 72%,    rgba(7, 179, 155, 0.1) 86%,    rgba(109, 186, 130, 0.1) 100%  );  background: -ms-linear-gradient(    0deg,    rgba(247, 149, 51, 0.1) 0,    rgba(243, 112, 85, 0.1) 15%,    rgba(239, 78, 123, 0.1) 30%,    rgba(161, 102, 171, 0.1) 44%,    rgba(80, 115, 184, 0.1) 58%,    rgba(16, 152, 173, 0.1) 72%,    rgba(7, 179, 155, 0.1) 86%,    rgba(109, 186, 130, 0.1) 100%  );  background: linear-gradient(    90deg,    rgba(247, 149, 51, 0.1) 0,    rgba(243, 112, 85, 0.1) 15%,    rgba(239, 78, 123, 0.1) 30%,    rgba(161, 102, 171, 0.1) 44%,    rgba(80, 115, 184, 0.1) 58%,    rgba(16, 152, 173, 0.1) 72%,    rgba(7, 179, 155, 0.1) 86%,    rgba(109, 186, 130, 0.1) 100%  );}

复制代码

引入阿里矢量图标库

推荐阅读大佬的文章
阿里矢量图标库_糖果屋教程

添加标签云

使用命令进行安装插件

npm install hexo-tag-cloud --save

复制代码

打开 node_modules\hexo-theme-butterfly\layout\includes\widget\card_tags.pug 文件，用下面内容将其替换掉，最好把之前的文件备份一下,防止后悔

if site.tags.length  .card-widget.card-tags    .card-content      .item-headline        i.fa.fa-tags(aria-hidden="true")        span= _p('aside.card_tags')        script(type="text/javascript" charset="utf-8" src="/js/tagcloud.js")        script(type="text/javascript" charset="utf-8" src="/js/tagcanvas.js")        #myCanvasContainer.widget.tagcloud(align='center')          canvas#resCanvas(width='200', height='200', style='width=100%')            != tagcloud()          != tagcloud({min_font: 16, max_font: 24, amount: 50, color: true, start_color: '#999', end_color: '#99a9bf'})

复制代码

普通标签备份

if theme.aside.card_tags.enable  if site.tags.length    .card-widget.card-tags      .item-headline        i.fas.fa-tags        span= _p('aside.card_tags')
      - let tagLimit = theme.aside.card_tags.limit === 0 ? 0 : theme.aside.card_tags.limit || 40      if theme.aside.card_tags.color        .card-tag-cloud!= cloudTags({source: site.tags, minfontsize: 1.15, maxfontsize: 1.45, limit: tagLimit, unit: 'em'})      else        .card-tag-cloud!= tagcloud({min_font: 1.1, max_font: 1.5, amount: tagLimit , color: true, start_color: '#999', end_color: '#99a9bf', unit: 'em'})

复制代码

文章页相关推荐

山岳博文https://kmar.top/posts/3bc89eb/

hexo-swiper 文章轮播图插件

https://zfe.space/post/hexo-swiper.html

在 Front-matter 添加以下参数即可，index 数字越大越靠前展示。

swiper_index: 8swiper_desc: 简单好用的 hexo 博客文章置顶插件！swiper_cover: /images/letter/p.png

复制代码

若你安装了插件功能都有了，但是点击无法跳转
可能是你的 pjax 的地址设置不对，在主题配置文件，找到 CDN——->pjax 设置 pjax 的地址
更换为如下地址：
https://cdn.staticfile.org/pjax/0.2.8/pjax.min.js

butterfly 主题文章双栏布局插件

https://zfe.space/post/hexo-butterfly-article-double-row.html

hexo-magnet 插件 1.0

https://zfe.space/post/hexo-magnet.html

发布于: 刚刚阅读数: 4

程序员余白

关注

Java全栈开发者，编程导航皮友余白~ 2022-09-01 加入

【个人网站】vipyubai.top 【联系方式】微信：joker_yubai 【软件技能】前端，Java

发布

暂无评论

创作场景

butterfly 美化日记 (一)

前言

butterfly 魔改

主页的美化

生成文章唯一链接

打字效果

网站副标题

文章置顶

代码高亮主题

运行时间

代码复制

侧边栏时钟

字数统计

公告 2 个小人

添加个性化板娘

更换看板娘

卸载看板娘

大神魔改看板娘

关于一些 bug 说明

解决方法

本地化 API 配置

页脚跳动的♥

Butterfly 加载动画修改

引入样式文件

浏览器标题恶搞

自定义文章封面

背景渐变

引入阿里矢量图标库

添加标签云

twikoo 评论块气泡风格魔改美化

引入音乐播放器

手机端 fixed 定位侧栏布局魔改方案

给博客添加自定义的通知悬浮窗

hexo-swiper 文章轮播图插件

butterfly 主题文章双栏布局插件

hexo-magnet 插件 1.0

程序员余白

评论