Hexo+Butterfly博客搭建记录（4）

更新记录

以前大量使用shadow，一个是因为原生主题也用（但是很浅），另一个是因为我觉得这样看起来会有立体感。现在看久了就觉得丑了，还是扁平化设计更耐看一些，或者说，好的交互界面应该让你感觉不到设计的存在。
宽屏适配。（Fomalhaut 原小冰改唐志远）这个本来一开始就打算做的，看太多人的教程看的眼花缭乱就给忘了。。。适配后确实好看一些。
做宽屏适配了，自然也就把双栏做了。三栏目前还不太适合，毕竟文章写的还太少。
歌词在博客刚上线的时候就改过了，当时只是改了个字体颜色和大小，那颜色蓝里哇叽的，跟我QQ音乐主题色是一样的，但是毕竟背景不一样，所以这个颜色放在博客上看没几天就觉得丑死了，就改成黑灰的了，顺便把背景换成了类似苹果dock栏的样式，顿时耐看许多。然后就发现一个bug，由于current歌词字号比预览歌词字号大一节，所以在手机上显示的时候，如果歌词太长会占用两行，然后第二行（原本是预览歌词的位置）又很矮，就会显示不全。所以现在就改成两行一样高了，不过我的方式比较蠢，是直接改的Aplayer.min.js，不知道能不能在自有的js文件里改。
相册、留言板没什么好搞的，就这样了。
昨天下午开始meting就不好用了，以为是我的bug，结果去别人网站一看也都用不了，报的一样的错，可能是抽风了。今天早上七八点左右恢复了。好吧又断了。。。
新增影视页，内容暂时不多。（Leonus）
新增首页轮播图（安知鱼）
新增首页动态分类条（Heo）
导航栏不再全局常驻，改为位于顶部时透明，其余区域仍然常驻。
添加了音乐控制按钮（上一曲、暂停播放、下一曲）

详细步骤

宽屏适配

参考博客：

博客宽屏适配（自用）

https://www.fomal.cc/posts/d739261b.html#%E5%8D%9A%E5%AE%A2%E5%AE%BD%E5%B1%8F%E9%80%82%E9%85%8D%EF%BC%88%E8%87%AA%E7%94%A8%EF%BC%89

From —— Fomalhaut

引自外站地址，不确保可用性和安全性

双栏适配

参考博客：

文章双侧栏显示(小冰)

https://www.fomal.cc/posts/eec9786.html#%E6%96%87%E7%AB%A0%E5%8F%8C%E4%BE%A7%E6%A0%8F%E6%98%BE%E7%A4%BA-%E5%B0%8F%E5%86%B0

From —— Fomalhaut

引自外站地址，不确保可用性和安全性

双栏显示我遇到一个bug，改完后第一篇post的height会稍微高一点点，跟右边的不对齐。

F12一下发现原来index.css里设了个margin-top，跟小冰的值不一致，给它改一样就好了。

1
2
3

#recent-posts > .recent-post-item:not(:first-child) {
  margin-top: 1rem;
}

影视页

参考博客：

作品推荐卡片—butterfly主题标签外挂

https://blog.leonus.cn/2022/butterflyTag.html

From —— Leonus

引自外站地址，不确保可用性和安全性

首页轮播图

用的是安知鱼大佬的插件。
参考教程：

hexo-butterfly-swiper-anzhiyu-pro

https://www.npmjs.com/package/hexo-butterfly-swiper-anzhiyu-pro

From —— 安知鱼

引自外站地址，不确保可用性和安全性

视频教程：

butterfly的swiper插件(人潮汹涌)配置安装

https://www.bilibili.com/video/BV1RP411E7rM/?spm_id_from=333.788

From —— 安知鱼

引自外站地址，不确保可用性和安全性

我没有什么容器方便挂载，就先去加了一个空盒子。

    if page.type !== '404'
      #body-wrap(class=pageType)
        include ./header/index.pug

+        div#home_top
+          div#home_top_swiper

        main#content-inner.layout(class=hideAside)

然后在主题设置里配置相关项。

swiper:
  enable: true # 开关
  randomenable: true # 人潮汹涌开关
  priority: 5 #过滤器优先权
  enable_page: / # 应用页面
  timemode: update #date/updated
  layout: # 挂载容器类型
    type: id
+    name: home_top_swiper
    index: 1

改完组件错位了，问题不大，微调一下。

#home_top {
  margin: 0 auto 0;
  padding-left: 5%;
  padding-right: 5%;
  max-width: 1600px;
  width: 100%;
}

#home_top_swiper {
  height: auto;
  width: 100%;
  margin: 1rem auto 0;
  display: flex!important;
  justify-content: space-around;
  flex-direction: row!important;
}

div#swiper_container, .topGroup .top-group-list-item, #random, .categoryItem, .blog-slider__img img {
  border-radius: 0.8rem!important;
}

.blog-slider__img {
  width: 22rem!important;
}

轮播图改用Marcus的插件，“人来人往”动画替换成了“技能”瀑布流。
参考教程：

新版首页轮播图

https://blog.marcus233.top/p/hometop2.html

From —— Marcus

引自外站地址，不确保可用性和安全性

动态分类条

参考：

Butterfly魔改：动态分类条，可以根据页面变化而改变的分类列表展示方式

https://blog.zhheo.com/p/bc61964d.html

From —— 张洪Heo

引自外站地址，不确保可用性和安全性

如果自动扒取分类参数，或者想改成标签条，参考下面这个。
Hexo博客 | 动态分类标签条，自动获取全站分类与标签进行展示

有个bug，当前分类页的图标未高亮显示，从评论区找到以下教程，加入 data-pjax="" defer=""解决
pjax无法生效解决办法，butterfly主题维护你的pjax

音乐控制器（导航栏）

之前Meting的API炸了，根据 https://github.com/xizeyoupan/Meting-API 的教程自建了API，现已恢复。

1 2	bottom: - <script>var meting_api='https://metingjs.gavin-chen.top/api?server=:server&type=:type&id=:id&auth=:auth&r=:r';</script>

修改bottom部分aplayer代码，改用meting-js 标签

1
2

-    - <div class="aplayer no-destroy" data-id="8086610771" data-server="netease" data-type="playlist" data-theme="#48E3F6" data-fixed="true" data-mini="true" data-listFolded="false" data-order="list" data-preload="none" data-autoplay="false" muted></div>
+    - <meting-js id="8086610771" server="netease" type="playlist" fixed="true" mutex="true" preload="none" theme="#48E3F6" data-lrctype="0" order="random"></meting-js>

nav.pug：

  #menus
+    div#nav-music-ctrl
+      div.nav-button#music-Backward
+        a.aplayer-icon-play(onclick="ctrl.musicBackward()" title="上一曲" href="javascript:void(0);" rel="external nofollow" data-pjax-state="external")
+          i.fas.fa-solid.fa-backward-step
+      div.nav-button#music-Switch
+        a.aplayer-icon-play(onclick="ctrl.musicSwitch()" title="音乐开关" href="javascript:void(0);" rel="external nofollow" data-pjax-state="external")
+          i.fas.fa-solid.fa-play
+      div.nav-button#music-Forward
+        a.aplayer-icon-play(onclick="ctrl.musicForward()" title="下一曲" href="javascript:void(0);" rel="external nofollow" data-pjax-state="external")
+          i.fas.fa-solid.fa-forward-step

API可以参考Aplayer中文文档，js函数：

var ctrl = {
  musicSwitch: function() {
    const music_state = document.querySelector("meting-js").aplayer.audio.paused;
    if (music_state) {
      document.querySelector("#music-Switch i").classList.remove("fa-play");
      document.querySelector("#music-Switch i").classList.add("fa-pause");
    } else {
      document.querySelector("#music-Switch i").classList.remove("fa-pause");
      document.querySelector("#music-Switch i").classList.add("fa-play");
    }
    document.querySelector("meting-js").aplayer.toggle();
  },
  musicForward: function() {
    document.querySelector("meting-js").aplayer.skipForward();
  },
  musicBackward: function() {
    document.querySelector("meting-js").aplayer.skipBack();
  },
  musicMute: function() {
    document.querySelector("meting-js").aplayer.volume(0.1, true);
  }
}

首页字体logo

本来想把导航栏的给换了的，结果换上去发现太小了看不清，所以就放在封面了。
logo是一个正七角星，配上小篆的“参星阁”，正七角星本来想自己画的，但画的不太好，正好Google图片有一个合适的，就下载下来用BigImg和Photoshop精修了一下，放上去还不错。“参星阁”小篆字是用的导入的字体，原字体包体积太大，就用提取工具提取了仅有“参星阁”三个字的子集，精简后体积仅1.8K。
字体子集提取工具：
在线版：http://www.1json.com/front/fonteditor.html
软件版：https://fontsmaller.github.io/
推荐软件版，更方便。

其他

这个博客做到这里基本上已经够用了，以后有什么好用的功能会再加上，然后步骤就补在第二条上上。
这个博客刚接触的时候什么都不了解，以前看的教程多是HTML、CSS、JavaScript三件套，顶多再加个JSP，所以看到pug和styl很懵，不知道咋用，而且听说theme里面的文件最好不要动，所以刚开始的时候都是在source下的自建文件夹CSS和JS里改的，HTML几乎没写过。后来了解了pug、styl的写法，而且越来越多的教程需要改源码，所以才敢大胆地去动源码里的文件。
大部分的功能其实都是有大佬封装好了的，直接npm安装就行了，还是很方便的。不过这类方法一定要注意教程里的注意事项，防止和现有的功能冲突。还有一部分功能是直接给源码的，这种自己改的时候稍微费时一点，但好处是容易理解原理和结构，而且便于自定义。
最后自己做微调的时候，最基本的技能就是F12大法了。HTML和CSS部分常用操作就是右键-检查，可以快速定位目标组件的各项属性，部分设置了hover才能显示的组件，开发者工具也能强制设置元素为hover状态。部分HTML结构需要微调的，可以复制下组件的id或者class，去theme下用Ctrl+F快速查找，找到源文件直接改就好了。JS部分可以利用控制台console.log打印日志，而且通过报错也可以知道问题出在哪。源代码里也可以找到整个工程的源码，大多网站有压缩处理，可能需要将源码格式化一下才能阅读。
另外建议先在开发者工具上调试好后，再将改动复制到工程里，这样可以减少很多繁琐的步骤。
博客搭建与修改参考的大佬有很多，都放在友链中了，十分感谢。