Hexo 博客搭建攻略合集：建站、主题配置、评论、音乐播放器等

  总结一下做这个博客的过程中搜到的有用教程和踩的坑，给有需要的无经验小白提供一点帮助，同时也当作给自己的备忘录。本人并不专业，内容仅供参考。

Hexo 博客建站

  网络上类似的攻略有很多，我参考的是某乎枫叶佬的教程。👉️ 从零开始搭建个人博客

  大佬写的相当详细，基本照着一步一步来就能成功，只是教程是 2020 年写的，一些页面的内容可能已经有变化了，不确定的话可以再上网查一查。

  这里说一些需要注意的点：

• 可以不买域名，直接用 Github Pages 的网址就行。域名主要是为了输起来方便以及感觉很酷😎！
• 第 2 步官网下载 Git 可能会很慢，可以在镜像网站下载。👉️ git for windows
• Git 中的复制/粘贴是 Ctrl/Shift + Insert ！ （我真的习惯性敲了好多次Ctrl C）
• Github 已经将默认的主分支名从 master 改成了 main，因此需要注意修改一些指令。例如在第 3 步中，最后应该输入 git push origin main 而非作者所写的 git push origin master。

  大佬使用的是 Next，如果想换其他主题跟到第 6 步就行。可使用的主题可以在 Themes | Hexo 找到，部署方式参照官方文档，大同小异。

Icarus主题配置

  Icarus 的 2077 主题真的完全戳中我了，实际上我原本就想搞个赛博系的 Blog，所以果断选择了这个。

  如果你也想使用 Icarus，推荐通过 NPM 安装，在你的 Blog 根目录下打开 Git Bash 输入下面的指令即可：

npm install -S hexo-theme-icarus hexo-renderer-inferno

  官方文档也非常详细，一些基本的配置可以在 Icarus用户指南 找到。

  配置时需要注意区分下面的文件：

• 站点配置文件：_config.yml，默认是在 Blog 根目录下。
• 主题配置文件：_config.icarus.yml，默认是在 Blog 根目录下。
• 文章/页面的 Front-matter：在某个页面 .md 文件的开头部分，以虚线和正文分隔。

  以上不同文件中的配置是有优先级的，详情可以在官方文档中了解。

  同时，如果你和我一样使用了 Icarus 的 2077 主题，那你有概率会发现一个小问题：在宽屏显示下，页面的最右侧会有一条细细的黑边。身为强迫症的我接受不了！😡

  通过试验基本确定是滚动条没有正常显示（或许作者压根没显示滚动条，是我自己哪里搞错了）。解决办法是自己整一个，或者直接隐藏掉。打开你的 Blog\node_modules\hexo-theme-icarus\source\css\cyberpunk.styl 文件，在底部加入下面的代码：

cyberpunk.styl

::-webkit-scrollbar-thumb {
    background-color: #000;
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);
    border-radius: 0em;   /* 控制圆角 */
}
::-webkit-scrollbar-track {
    background-color: #fcee09;
    border-radius: 0em;   /* 控制圆角 */
}
::-webkit-scrollbar {
    width: 8px;   /* 此两项设为0可隐藏滚动条 */
    height: 7px;
}

  对了，如果你是通过源码或下载解压的方式使用 Icarus，或是使用较老的版本，那么 Icarus 文件夹可能会在根目录的 themes 文件夹中。

评论插件

  如果你常用 Github，社交圈子都是计算机大牛，那么可以考虑 Gitalk 。哪个计算机大牛会来看这么基础的攻略

  如果你希望访客能通过国内社交帐号登录评论，那推荐 来比力。

  如果你希望访客不用登录就能评论，那么推荐 Twikoo，也就是本站使用的评论系统。总体感觉还是不错的，界面也很简洁好看。

  Twikoo 部署分两步。首先要把云函数部署在云端，不同平台的具体操作也不同。这里建议资金充裕的话直接选择腾讯云，稳定且后续可以不用单独部署图床；不想花钱的选择 Netlify（每月免费额度），其他平台或多或少都有点问题。具体部署方式可以在上面 Twikoo 的文档中找到。

  云函数部署完成后，需要在主题配置文件中进行设置，具体参照 Icarus-Twikoo部署。

  同时推荐使用 Qmsg酱，接入 Twikoo 后有新的访客评论时可以直接在🐧收到推送。

图床

  图床顾名思义就是存放图片的地方。为什么需要图床🤔？你当然可以在写文章时引用本地图片，但这样无疑会增加 Github 仓库的负担。此外，如果想让访客能上传图片评论，也要部署图床。

  跟上面相同，追求稳定直接腾讯云走起；不想花钱的话可以考虑 PicGo + Smms 的方案，有 5G 的免费额度，足够用了，参考 Sorlia 的攻略 👉️ PicGo+smms。

音乐播放器吸底

  只推荐 Aplayer，虽然理论上是可以通过安装插件插入页面的，不过我因为不明原因没有成功。所以参考了 Macyrate 大佬的攻略。找到 hexo-theme-icarus\layout\layout.jsx 文件，在 </body> 标签之前插入下面的代码（请记得补充其中的 id）：

layout.jsx

<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css"></link>
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@1.2.0/dist/Meting.min.js"></script>
<div class="aplayer" 
  data-id="xxxxxx" 
  data-server="netease" 
  data-type="playlist" 
  data-fixed="true" 
  data-autoplay="false" 
  data-order="list" 
  data-listFolded="true" 
  data-listMaxHeight="200px" 
  data-volume="0.6" >
  </div>

  上面的是吸底模式的代码，部署成功后播放器会固定在页面的左下角，其中的参数设置和其他部署方式请参考 APlayer 参数。此外，你可以尝试将代码加入 hexo-theme-icarus\layout\common 文件夹下的其他 .jsx 文件中，可能会产生不同的效果。

  以上的方法针对的是 Icarus 主题，其他主题的设置大同小异。

  如果想实现切换页面继续播放，需要使用 Pjax。一些 Hexo 主题已经内置了 Pjax，如 Next 等，只需要下载插件并启用即可，而没有内置的主题需要自己改代码。由于 Pjax 加入后某些页面部件不会刷新，可能会导致意想不到的 Bug。总之我没学会，谁学会了记得来教教我😭。

其他攻略

看板娘的设置

  直接参考 hexo-helper-live2d 中文文档 即可。

  除了自带的模型外，你也可以自己下载模型，将文件夹放在 Blog\live2d_models 下，名称为模型的名字，其中的模型文件应名为 模型名.model.json。

可预览代码高亮主题的网站

  👉️ Demo - highlight.js

自定义文章模板

  找到 Blog 根目录下的 scaffolds 文件夹，修改其中的 .md 文件即可。

  暂时就写这么多吧，想不起来了🙃~