博客搭建与魔改系列教程导航

专栏一专栏二
Hexo搭建博客之基础篇🍚魔改Hexo，搭建博客：上篇🥬
魔改Hexo，搭建博客：下篇🍒Markdown语法与外挂标签汇总🍊
Hexo开源模板的使用方法🍖⇦当前位置🎐

1. hexo-theme-Fomalhaut主题

1.1 前言

主题首页效果预览：

  • 开源地址：hexo-theme-Fomalhaut。

  • 由于Github下载限速，这里提供123网盘下载,无提取码。

  • 开源项目并不适合纯小白，需要一定的前端基础和魔改经验，因此安装之前务必对 Hexo框架命令和 Butterfly主题比较熟悉，以及掌握最基础的HTML5、CSS3、JavaScript知识，不熟悉的朋友建议提前熟悉Hexo 中文文档和Butterfly 主题文档！！！避免各种不必要的麻烦！！！

  • 本源码是基于Butterfly 4.3.1的二次开发，暂时没做完全的主题分离，因此安装方法是整个博客的替换，建议另起一个文件夹进行安装，或备份好原来的资料再搬过来。当然你也可以不直接搬走，而是借鉴里面的部分代码写法。

1.2 安装教程

⛄注意：作者演示的是 NodeJS v16.14.0 + Hexo 6.3.0.

  1. 安装 NodeJs、Hexo、Git、注册并连接 Github。

⛄注意：相当于基础教程的第 1-7 步，第 8 步就不要做了，不然会清空源码的！！！（不是新手请跳过这条）

  1. 把源码打包下载到自己的电脑，然后解压缩到一个你喜欢的文件夹中。

  2. 在 git bash 命令中切换到下载的博客根目录，使用以下命令进行模块安装。这里绝不能使用hexo init初始化，若不慎用了，则站点的配置文件_config.yml内容会被重置。

1
npm i
  1. 执行以下命令清空并启动项目，启动成功后再浏览器地址栏输入:localhost:4000进行验证.
1
hexo cl; hexo g; hexo s
  1. 到这里一般是没啥问题的了，当本地能成功启动后，改一下站点配置文件的_config.yml的deploy配置项，然后用以下命令部署到 Github（这一步出问题的，请删除站点配置文件的deploy配置项与baidu_url_submitter的信息）。
1
hexo d

1.3 常用配置选项修改

  1. js 的主体在source/js/fomal.js里面，做了基本分块逻辑的标注，后期整合的，以... start和... end 包裹

  2. css 主体在themes\butterfly\source\css\_custom\custom.css里，与 Butterfly 的自带样式联合编译为一个 index.css，有基本的注释。

  3. 因为兼顾了白天夜间模式不同壁纸和用户自定义壁纸，背景的切换做在了fomal.js的第3190行附近，美化模块代码逻辑在fomal.js的第 2894-3596 行，四个背景分别为 PC 端白天、PC 端黑夜、手机端白天、手机端黑夜；美化模块起点为第 3356 行，可以自定义任何 DOM，例如按钮、滑块、开关按钮、图片框和外挂标签等（注意：外挂标签必须要被<div id="article-container">包裹才会被渲染）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/* 美化模块 start */
...
// 雪花开关(这里就是默认关雪花，如果你想默认开就将none改为block)
if (localStorage.getItem("snow") == undefined) {
  localStorage.setItem("snow", "none");
}
...
// 背景图(约3190行) 下面链接换成你自己的图片链接
document.getElementById("defineBg").innerText = `:root{
  --default-bg: url(https://lskypro.acozycotage.net/Fomalhaut/img/dm14.webp);
  --darkmode-bg:url(https://lskypro.acozycotage.net/Fomalhaut/img/yuanshen1.webp);
  --mobileday-bg: url(https://lskypro.acozycotage.net/Fomalhaut/img/snow.webp);
  --mobilenight-bg: url(https://lskypro.acozycotage.net/Fomalhaut/img/mb8.webp);
}`;
...
// 美化模块主体DOM(约3356行)
  winbox.body.innerHTML = `

    ...
    <h3>1. 二次元</h3>
    {% folding cyan, 查看二次元背景 %}
    <div class="bgbox">
    <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://lskypro.acozycotage.net/Fomalhaut/img/home_bg.webp)" class="imgbox" onclick="changeBg('url(https://lskypro.acozycotage.net/Fomalhaut/img/home_bg.webp)')"></a>
    // 这里自己加图片
    </div>
    {% endfolding %}
    ...

  `
...
/* 美化模块 end */

  1. 页脚部分请见themes\butterfly\layout\includes\footer.pug，包括页脚计时器、徽标、文字、布局等。

  2. 封面图在主题配置文件_config.butterfly.yml的default_cover配置项，建议配置多项后随机刷出封面图。

  3. 网站图标为根目录的favicon.ico，替换为你自己的图标即可。

  4. 加载页面时中间的头像在custom.css约1300行附近，直接搜索替换成你自己的头像即可。

  5. 页脚时间由fomal.js控制，搜索以下代码，将网站诞生时间改为你自己的即可(示例：2023-01-09)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* 页脚计时器 start */
var now = new Date();
function createtime() {
  // 当前时间
  now.setTime(now.getTime() + 1000);
  var start = new Date("08/01/2022 00:00:00"); // 旅行者1号开始计算的时间
  var dis = Math.trunc(23400000000 + ((now - start) / 1000) * 17); // 距离=秒数*速度 记住转换毫秒
  var unit = (dis / 149600000).toFixed(6);  // 天文单位
  // 网站诞生时间
  var grt = new Date("08/09/2022 00:00:00");
...
  let currentTimeHtml = "";
  (currentTimeHtml =
    hnum < 18 && hnum >= 9
      ? `<img class='boardsign' src='https://lskypro.acozycotage.net/Fomalhaut/badge/F小屋-科研摸鱼中.svg' title='什么时候能够实现财富自由呀~'><br> <div style="font-size:13px;font-weight:bold">本站居然运行了 ${dnum} 天 ${hnum} 小时 ${mnum} 分 ${snum} 秒 <i id="heartbeat" class='fas fa-heartbeat'></i> <br> 旅行者 1 号当前距离地球 ${dis} 千米，约为 ${unit} 个天文单位 🚀</div>`
      : `<img class='boardsign' src='https://lskypro.acozycotage.net/Fomalhaut/badge/F小屋-下班休息啦.svg' title='下班了就该开开心心地玩耍~'><br> <div style="font-size:13px;font-weight:bold">本站居然运行了 ${dnum} 天 ${hnum} 小时 ${mnum} 分 ${snum} 秒 <i id="heartbeat" class='fas fa-heartbeat'></i> <br> 旅行者 1 号当前距离地球 ${dis} 千米，约为 ${unit} 个天文单位 🚀</div>`),
    document.getElementById("workboard") &&
    (document.getElementById("workboard").innerHTML = currentTimeHtml);
}
...

/*页脚计时器 end */

  1. 控制台字符画，在fomal.js找到代码，并进行相应的替换，字符画可以到：Text to ASCII Art Generator (TAAG)生成。

  2. 欢迎信息地理位置显示，这个需要配置自己的 key，类似的还有 bibi 的配置、朋友圈等配置均需要参考相关文档改成自己的 API。

1.4 主题更新与修复

📅3.13 更新：解决目录一级标题不能直接跳转问题
  1. 首先安装包hexo-toc.
1
npm install hexo-toc --save
  1. 进入你项目根目录的 node_modules\hexo-toc\lib\filter.js 中，修改 28 行至31 行，恢复
    28 行，注释 29 行至31 即可。
1
2
3
4
$title.attr('id', id);
// $title.children('a').remove();
// $title.html( '<span id="' + id + '">' + $title.html() + '</span>' );
// $title.removeAttr('id');
  1. 清理旧文章缓存，hexo 三连。
1
hexo cl; hexo g; hexo s
📅3.5 更新：微调部分样式，修复手机端无法加载 css 样式

问题在fomal.js的 1340 行附近，切换至手机端时候导致空指针异常，这部分代码注释掉即可！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 搜索框修复 start */
// searchSize();
// window.addEventListener('resize', searchSize)
// // 搜索窗口自适应
// function searchSize() {
//   // 只需要适应手机端
//   if (document.body.clientWidth > 768) return
//   let div = document.querySelector('#algolia-hits')
//   // 监听插入，如果有插入则根据可视高度动态设置最大高度
//   div.addEventListener('DOMNodeInserted', () => {
//     div.children[0].style.maxHeight = (document.documentElement.clientHeight - 210) + 'px'
//   })
// }
/* 搜索框修复 end */

2. Hexo-Theme-Acrylic主题

  1. Bug诸多，暂未完结，等待更新！

  2. Acrylic-Promote: 一个美观，强大，高效的Hexo主题。

  3. 主题文档，主题和替换文件的下载地址。

  4. 由于Github下载限速，我下载好的已存至123网盘。