重构博客记录~
  经验分享 9202 字

重构博客记录~

前言

鸽了几万年的楠终于开始重构自己的屎山博客了，此贴来记录楠是用了什么东西堆成新的 屎山

部署

  • 由 GitHub 储存
  • 由 Vercel 托管部署
  • 更换 vercel.cdn.yt-blog.top 节点加快国内访问速度
  • 版本：hexo: 6.3.0 butterfly: 4.7.0

整理配置文件

  • 将主题配置文件复制出来，方便更改
  • 将配置文件注释汉化

图床

本来想搞个 cdn 来加速 GitHub 仓库当图床的，结果 https 要证书，就开始了艰辛的坐牢一日。

证书

  1. 安装 wsl ，在微软商店下载了个 Ubuntu 2204 版本。
  2. 启动的时候出错了，一直报错 0x8004032d 。上网查找之后使用下面的命令安装并初始化（前提是已经开启 Hype-v 适用于Linux的Windows子系统 虚拟机平台）。
    cmd
    wsl --install
  3. 就是正常配置用户名密码啥的，成功进入 wsl。并使用 sudo 命令设置 root 密码。
    sh
    sudo passwd root
  4. 安装 acme.sh 的时候又出问题了，没有代理连接不上 Github 。解决方法来自博客园的一篇文章 传送门。 省流： 就是在 Windows中的C:\Users\<your_username> 目录下创建一个.wslconfig 文件，并写入以下代码。
    config
    [experimental]
 autoMemoryReclaim=gradual
 networkingMode=mirrored
 dnsTunneling=true
 firewall=true
 autoProxy=true

    再使用终端重启 wsl。
    shell
    wsl --shutdown

    注意，每次开关梯子都要重新启动 wsl
  5. 成功安装 acme.sh 后便开始手动生成证书
    • 第一次要先使用
      sh
      ~/.acme.sh/acme.sh --register-account -m <你的邮箱>

      来注册账户
    • 注册成功后使用
      sh
      ~/.acme.sh/acme.sh --issue -d <域名> --dns dns-01

      生成证书
    • 按照要求在域名服务商添加 TXT 解析，等候片刻再次运行命令就生成证书了
  6. 生成的证书在/root 目录，这里又出现个问题，无法访问，显示没有权限。 解决方法：
    sh
    cd /
sudo nano /etc/wsl.conf

    在 wsl.cong 里面添加
    conf
    [user]
default=root

    让默认账户是 root 就解决了

配置 cdn

自己搞半天没成功，最后问了一下 煮雪话河山 大佬，并跟着大佬一步一步走才成功

  • 绑定的加速网站：要加速的网站
  • 源站：加速网站绑定的源站，如 vercel 绑定域名的时候的 cname.vercel-dns.com 或者是 cf page 绑定域名时候的 xxx.pages.dev
  • https 证书：证书

外挂标签

使用的是店长的 Tag Plugins Plus 用的是源码部署，站外卡片的样式因为看到 June 的样式很喜欢，所以就也去洪哥的帖子 cv 了一个下来，略微改改。

外挂标签

Hexo的Butterfly魔改教程：网址卡片外置标签

文章版权卡片美化

使用的是 Fomalhaut 和 店长 的样式，并自己修改了一点 css。

博客魔改教程总结(二)

（二创）Copyright-beautify

修改过的 css:

返回顶部显示网页阅读进度

提醒

虽然 Buttrtfly 4.6 版本 就加入了内置了这个功能，可以在配置文件开启，但是内置的的滑动没有 Leonus 的丝滑，所以还是选择自己动手。

用了 Leonus 的教程，但是发现 Leonus 大佬的 js 在我这里有点小问题，所以也自己修改了一下。

返回顶部显示网页阅读进度

这是我修改过的 js（把 childNodes 改成了 children）

js
window.onscroll = percent; // 执行函数
// 页面百分比
function percent() {
  let a = document.documentElement.scrollTop || window.pageYOffset; // 卷去高度
    let b
      = Math.max(
        document.body.scrollHeight,
        document.documentElement.scrollHeight,
        document.body.offsetHeight,
        document.documentElement.offsetHeight,
        document.body.clientHeight,
        document.documentElement.clientHeight
      ) - document.documentElement.clientHeight; // 整个网页高度
    let result = Math.round((a / b) * 100); // 计算百分比
    let up = document.querySelector("#go-up"); // 获取按钮
  percentSpan = document.querySelector("#percent"); // 获取显示的按钮

  if (result <= 95) {
    up.children[0].style.display = "none";
    up.children[1].style.display = "block";
    percentSpan.children[0].innerHTML = result;
  }
 else {
    up.children[1].style.display = "none";
    up.children[0].style.display = "block";
  }
}

打开控制台和复制提醒

按键防抖：

博客魔改教程总结(三)

css
/* Snackbar弹窗 */

.snackbar-container {
  border-radius: 15px;
}

/* Snackbar弹窗 end */

Heo 加载动画

Heo同款loading动画

博客宽屏适配

博客魔改教程总结(四)

文章双栏

在店长的教程上做了一点自己的修改

双栏布局首页卡片魔改教程

替换 [themes]\butterfly\layout\includes\mixins\post-ui.pug 为下面代码（用的是店长的，删减了一些东西）

用的是 模式二 并且将三栏修改成双栏，加上自己的一些修改

css
.article-meta-separator,
.article-meta-wrap i,
.article-meta-link {
  margin: 0 6px;
}

信息卡片头像状态

博客魔改教程总结(四)

问题

原本的样式有问题，无法居中，扒了一下鱼佬的导航栏，重新改了一版

部分来自于

关于Butterfly的导航栏的一些教程

  • 分离搜索栏与菜单栏
  • 子菜单横向布局
  • 网站标题部分的增强版 (自己修改了一些)
  • 显示标题 (自己修改了上下滑动动画和去除 jq 依赖)

上下滑动动画

修改 [themes]\butterfly\layout\includes\header\nav.pug: (注意缩进)

diff
nav#nav
+  #navBox
    span#blog-info
      a(href=url_for('/') title=config.title)
        if theme.nav.logo
          img.site-icon(src=url_for(theme.nav.logo))
        if theme.nav.display_title
          span.site-name=config.title

    #menus
      !=partial('includes/header/menu_item', {}, {cache: true})
+    #menuTitleBox
+      center(id="name-container")
+        a(id="page-name" href="javascript:scrollToTop()") PAGE_NAME
    #nav-right
      if (theme.algolia_search.enable || theme.local_search.enable)
        #search-button
          a.site-page.social-icon.search
            i.fas.fa-search.fa-fw
        #toggle-menu
          a.site-page
            i.fas.fa-bars.fa-fw

添加 nav.js

完整 css (我也挑不出来了，混在一起)

旧版本

修改 [themes]\butterfly\layout\includes\header\nav.pug

diff
  #menus
    !=partial('includes/header/menu_item', {}, {cache: true})
+    #menuTitleBox
+      center(id="name-container")
+        a(id="page-name" href="javascript:scrollToTop()") PAGE_NAME
  ...

在 js 文件夹新建并引用这段代码

最后是 css 部分 (仅实现这个功能)

完整 css

首页分类磁贴

使用的是小冰大佬的插件

教程：hexo-magnet 插件 1.0

其中深色模式适配我是用了 css 变量

yml
# 小冰分类磁贴
color_setting:
  text_color: var(--fl-text)
  text_hover_color: var(--fl-hover-text)
  background_color: var(--fl-bg)
  background_hover_color: var(--theme-color)
css
:root {
  /* 首页分类磁贴 */
  --fl-bg: #e5e5e5;
  --fl-text: #000;
  --fl-hover-text: #fff;
}

[data-theme="dark"] {
  /* 首页分类磁贴 */
  --fl-bg: #222;
  --fl-text: #fff;
}

首页置顶轮播

参考

博客魔改日记（3）

Butterfly轮播图Swiper

再加上自己微调

css
/* 首页轮播图 */

#swiper_container .blog-slider__content {
  height: 250px;
}

#swiper_container a.blog-slider__title {
  font-weight: bold;
}

#swiper_container .blog-slider__text {
  font-size: 1em;
}

#swiper_container .swiper-button-next:after,
#swiper_container .swiper-button-prev:after {
  color: var(--theme-color);
}

/* 首页轮播图 */

归档、分类、标签页美化

参考

本站的一些样式魔改

自己修改的 css:

归档

问题

踩了个坑，归档页显示标签（tags）要在配置文件开启，浪费了我好多时间 😭😭

分类

只参考了一下 meuicat 大佬的页面，css 是自己手搓的 {% psw 绝对不是因为懒得改变量 (确信) %}

文章分类

标签

警告

如果标签页的标签没有数字的话看这里

修改 [themes]\butterfly\scripts\helpers\page.js

diff
  const length = sizes.length - 1
  source.sort(orderby, order).forEach(tag => {
    const ratio = length ? sizes.indexOf(tag.length) / length : 0
    const size = minfontsize + ((maxfontsize - minfontsize) * ratio)
    let style = `font-size: ${parseFloat(size.toFixed(2))}${unit};`
    const color = 'rgb(' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ')' // 0,0,0 -> 200,200,200
    style += ` color: ${color}`
-    result += `<a href="${env.url_for(tag.path)}" style="${style}">${tag.name}</a>`
+    result += `<a href="${env.url_for(tag.path)}" style="${style}">${tag.name}<span>${tag.length}</span></a>`
  })
  return result

右下角菜单修改

添加直达底部

修改 [themes]\butterfly\layout\includes\rightside.pug , 在最下面添加代码 (注意缩进)

pug
button#go-down(type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500);")
  i.fas.fa-arrow-down

样式美化

css
/* 右下角菜单 */

#rightside #rightside-config-show > button,
#rightside #rightside-config-hide > button {
  border-radius: 50%;
}

/* 右下角菜单 end */

持久化 url

安装 hexo-abbrlink2 插件

shell
npm install hexo-abbrlink2 --save

修改 _config.yml 的 permalink 为

yml
permalink: posts/:abbrlink/ # 永久链接格式

在 _config.yml 添加配置

yml
# hexo-abbrlink2
# 持久化url
abbrlink:
  start: 0 # 启起始文章id，默认为0 ，可以自定义，比如100

Foot 页脚

参考

猹的魔改日记-小小的重写个页脚

我的 footer.pug 和 footer.styl

首页封面样式

js
// 首页封面样式

window.addEventListener("scroll", function () {
  // 获取当前页面滚动的高度
  const scrollTop = window.scrollY || document.documentElement.scrollTop;

  // 获取90%视口高度，即页面90vh对应的像素值
  const thresholdHeight = window.innerHeight * 0.8;

  // 计算scrollTop占thresholdHeight的比例，并限制在0-1之间
  let scrollPercentage = scrollTop / thresholdHeight;
  if (scrollPercentage > 1) {
    scrollPercentage = 1;
  }
 else if (scrollPercentage < 0) {
    scrollPercentage = 0;
  }

  // 输出或使用这个scrollPercentage值
  console.log(scrollPercentage);

  // 将这个值应用于其他操作，例如CSS变量
  document.documentElement.style.setProperty("--process", scrollPercentage);
});

// 首页封面样式 end --

文章页样式

波浪线

参考

butterfly文章顶部添加波浪效果

搜索时滚动条消失恢复

我发现在打开搜索弹窗的时候会禁止滚动页面，并且滚动条会消失，造成页面宽度变化，很丑，所以就找办法给他干掉了

修改 [themes]\butterfly\source\js\search\local-search.js 大约第 7 行

diff
window.addEventListener('load', () => {
  let loadFlag = false
  let dataObj = []
  const $searchMask = document.getElementById('search-mask')

  const openSearch = () => {
-    const bodyStyle = document.body.style
-    bodyStyle.width = '100%'
-    bodyStyle.overflow = 'hidden'
    btf.animateIn($searchMask, 'to_show 0.5s')
    btf.animateIn(document.querySelector('#local-search .search-dialog'), 'titleScale 0.5s')
    setTimeout(() => { document.querySelector('#local-search-input input').focus() }, 100)
    if (!loadFlag) {
      search()
      loadFlag = true
    }
...

修改网站 cdn

优化一下加载速度

cdn 大部分来自 Heo 佬

Butterfly CDN链接更改指南，替换jsdelivr提升访问速度

我的 option

那年今日

基于 butterfly 主题的历史上的今天 2.0 重置版

点击文章卡片进入文章页

参考

Butterfly给首页首个文章添加class

子级a标签href避免触发父级onclick的方法，子元素阻止冒泡

看不懂的点这里

修改 [themes]\butterfly\layout\includes\mixins\post-ui.pug :

diff
mixin postUI(posts)
  each article , index in page.posts.data
+    - let link = article.link || article.path
+    .recent-post-item(onclick=`pjax.loadUrl('${url_for(link)}')`)
-    .recent-post-item
      -
-        let link = article.link || article.path
        let title = article.title || _p('no_title')
        const position = theme.cover.position
        let leftOrRight = position === 'both'
          ? index%2 == 0 ? 'left' : 'right'
          : position === 'left' ? 'left' : 'right'
        let post_cover = article.cover
        let no_cover = article.cover === false || !theme.cover.index_enable ? 'no-cover' : ''
      -

往下翻找到 .article-meta__categories 和 .article-meta__tags , 在 a 标签后的括号内添加 onclick="window.event.cancelBubble=true;" (注意，要加个空格)

diff
if (theme.post_meta.page.categories && article.categories.data.length > 0)
  span.article-meta
    span.article-meta-separator |
    i.fas.fa-inbox
    each item, index in article.categories.data
+      a(href=url_for(item.path) onclick="window.event.cancelBubble=true;").article-meta__categories #[=item.name]
      if (index < article.categories.data.length - 1)
        i.fas.fa-angle-right.article-meta-link
if (theme.post_meta.page.tags && article.tags.data.length > 0)
  span.article-meta.tags
    span.article-meta-separator |
    i.fas.fa-tag
    each item, index in article.tags.data
+      a(href=url_for(item.path) onclick="window.event.cancelBubble=true;").article-meta__tags #[=item.name]
      if (index < article.tags.data.length - 1)
        span.article-meta-link #[='•']

外挂标签之折叠栏

店长的外挂标签里的折叠栏不是很喜欢，因为用的是 details 元素实现的，没有过渡动画，所以就自己重写了一下源码和样式

示例代码 (其实和店长的没啥区别，就是少了个颜色的选项)

md
{% folding, 展示 %}

{% folding open, 默认打开 %}

内容

{% endfolding %}

{% folding, 默认关闭 %}

内容

{% endfolding %}

{% endfolding %}

在 [themes]\butterfly\scripts\tag 目录下新建 folding.js 文件

在 [themes]\butterfly\source\css\_tags 目录下新建 folding.styl 文件 Tips：如果需要修改颜色，改颜色变量就好了

在自己的 js 文件夹下新建 foldMain.js 文件 (名字随意的啦) 并引用

引入 foldMain.js 并适配 Pjax

yml
- <script data-pjax src="/static/js/foldMain.js?1"></script> # 外挂标签-折叠栏

说说

因为我没有服务器 😭，所以使用的是本地静态的说说，正好浮杨大佬新开发了一个说说，我就试试水

浮杨佬说说的项目地址

floatsheep

正常插件安装版

没有自定义需求的直接 npm 安装就好了

shell
npm install hexo-butterfly-statictalk

鹊楠魔改免安装版

这个是我自己改给自己用的，舍弃掉了自动生成时间，可能不是那么好看和好用，可以自己改改

2024/9/2 更新

修复 bug

新建 talk 页面

shell
hexo new page talk

打开 source\talk\index.md 添加

md
---
title: 说说
date: 2024-08-10 23:25:34
type: talk
---

修改 [themes]\butterfly\layout\page.pug

diff
extends includes/layout.pug

block content
  #page
    if top_img === false
      h1.page-title= page.title

    case page.type
      when 'tags'
        include includes/page/tags.pug
      when 'link'
        include includes/page/flink.pug
      when 'categories'
        include includes/page/categories.pug
+      when 'talk'
+        include includes/page/talk.pug

      default
        include includes/page/default-page.pug

    if page.comments !== false && theme.comments && theme.comments.use
      - var commentsJsLoad = true
      !=partial('includes/third-party/comments/index', {}, {cache: true})

在 [themes]\butterfly\layout\includes\page 文件夹下新建 talk.pug 文件，写入

pug
if site.data.talk
  #talk-container
    each i in site.data.talk
      - let content = markdown(i.content)
      - let time = i.time

      - content = content.replace(/<img src="(.*?)"[^>]*>/g, '<a href="$1" data-fancybox="gallery" data-caption="" data-thumb="$1">$&</a>')

      div.talk-wrapper
        div.talk-content!= content
        div.talk-footer
          div.talk-time= time

在 [themes]\butterfly\source\css\_page 文件夹下新建 talk.styl 文件，写入

在自己的 js 文件夹下新建 talk.js 写入

并在配置文件引入该 js

yml
bottom:
  - <script data-pjax src="/static/js/talk.js?1"></script> # 说说

最后在 source\_data 文件夹下新建 talk.yml

参考写法

yml
- content: |
    1
    test
    # test1
    ![](https://tuchuang.voooe.cn/images/2024/06/19/MUICanvas.webp)
    ![](https://tuchuang.voooe.cn/images/2024/06/19/InstallDolby.webp)
  time: 2024-09-01
- content: |
    2
    # test1
  time: 2024-09-01

关于我

直接从鱼那里搬过来的关于页面，做了一点点自己的修改

  • 删除捐赠 楠的破烂博客还敢开捐赠？！
  • 修改 51LA 的统计数据为 Hexo 自带数据

butterfly魔改关于页面

统计数据部分

pug
#statistic
    div
        span 文章数量
        span= site.posts.length
    div
        span 运行时间
        span#runtimeshow(data-publishDate=date_xml(theme.runtimeshow.publish_date))
    div
        span 访客数量
        span#busuanzi_value_site_uv
    div
        span 总访问量
        span#busuanzi_value_site_pv
    div
        span 最近更新
        span#last-push-date(data-lastPushDate=date_xml(Date.now()))

修改国内不蒜子统计平台

来自杜老师的教程

杜老师自建国内不蒜子统计平台

压缩静态资源

来自 空梦大佬

网站加载速度优化方案总结

Todo

自己用 md 写的太丑辣，懒得动脑，直接拿 亦小封 佬的用

Butterfly的魔改教程：待办清单

不过佬的瀑布流代码在我这里有点小问题，我就用我自己的屎山代码代替了））

外挂标签之外链卡片

参考洪哥的样式

做出了自己的修改

修改 [themes]\butterfly\scripts\tag\link.js ：

修改 [themes]\butterfly\source\css\_tags\link.styl ：

评论样式

参考了 Ariasaka 和 店长 的一些样式

css

许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

关于我的个人主页！ 
Windows安装alist并美化 

评论区

评论加载中...