博客调整记录

博客搭建后进行一些调整的记录。

主题更换

因为个人能力有限，自行修改主题对我来说还是不如使用别人的主题，毕竟太耗费时间精力。先后尝试了很多主题，包括 Next、Sakura、Butterfly、Yilia、Matery 等等，相对合我口味的有 Spfk、Momery 和 Snark 等等，最终选择相对简洁而且配置也简单的 Snark。

设置参数根据主题仓库配置即可。但是有个问题是更改 theme_color 选项并未生效。

修改配色

尝试修改 css 样式：

颜色参考网站：NIPPON COLORS - 日本の伝統色、中国色 － 中国传统颜色

底色需要修改snark/source/img/backgroud.png，采用 钢青(#142334)、 鸽蓝（#1c2938）以及加深样式。

Html点击跳转联系方式

• 直接添加 URL
• 邮件：mailto:xxx@xxx.com
• QQ： tencent://AddContact/?fromId=45&fromSubId=1&subcmd=all&uin=QQ号&website=www.oicqzone.com
• TG：tg://resolve?domain=用户名

含链接图片关闭fancybox

根据怎么在某些图片上禁用 fancybox？

由于主题 js 中已有该属性：

因此图片添加超链接后，添加 class="nofancybox" 属性即可：

添加音乐

• 使用音乐外链

例如网易云，生成歌曲或者歌单外链后添加即可（歌单生成外链在自己页面看不到）：

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=110 src="//music.163.com/outchain/player?type=0&id=5471267016&auto=1&height=90"></iframe>

效果 (auto=1时自动播放)：

• 使用 Aplayer

安装 hexo-tag-aplayer 插件：npm install --save hexo-tag-aplayer

使用 MeingJS 使播放器将支持对于 QQ 音乐、网易云音乐、虾米、酷狗、百度等平台的音乐播放。

在 Hexo 配置文件 _config.yml 中设置：

aplayer:
  meting: true

例如打开网易云音乐「岁月神偷」和歌单「拾遗」的 id分别 为 28285910和 5471267016，按下面格式插入：

{% meting "28285910" "netease" "song" "theme:#555" "mutex:true" "listmaxheight:340px" "preload:auto" %}

{% meting "5471267016" "netease" "playlist" "theme:#FF4081" "mode:circulation" "mutex:true" "listmaxheight:340px" "preload:auto" %}

效果：

更多设置参考： hexo-tag-aplayer，插入视频参考：hexo-tag-dplayer。

目录无法跳转

在我不经意间缩小网页比例时发现这个主题是会生成目录的（100%时不显示）：

但是点击目录并没有跳转，参考 Hexo 博客踩坑，进入项目根目录 node_modules\hexo-toc\lib\filter.js 中，把 28 行～31 行修改为：

$title.attr('id', id);
// $title.children('a').remove();
// $title.html( '<span id="' + id + '">' + $title.html() + '</span>' );
// $title.removeAttr('id');

恢复正常~

后来发现只在 hexo s 后本地查看才能正常跳转，部署到 Github 后点击目录显示 #null ，无法跳转：

再后来本地中文也无法跳转，只有英文才能跳转，尝试了网上几种解决办法都没解决。

再再后来又可以了，再再再后来又发现有的文章可以有的不行。

试着将所有文章的标题前后的换行都增加至3行，本地浏览都正常，但部署后仍无效。

最后把 hexo-toc 卸载了，博客正常跳转，但是本篇使用了 Aplayer 的文档，中文目录跳转失败，发现这是个老 Bug 了，好像还没解决。根据 使用 Aplayer 导致博客目录跳转失效 等很多相关文章进行了修改，都无效。

最后根据 Hugo 目录和音乐播放器 APlayer 的冲突问题，将 _config.yml 中的 aplayer 项注释掉，然后将下面的代码直接放入本文档中：

<!-- require APlayer -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<!-- require MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>

然后添加歌单：

<meting-js
server="netease"
type="playlist"
id="5471267016">
</meting-js>

结果还是无法跳转😂，于是卸载了 hexo-tag-aplayer，早卸杂就完事了，折腾什么呢 😄，用网易云外链就好了😂

部分标题无法渲染

发现有篇博文的目录中，四个标题只渲染了三个，在本地 MD 编辑器中是显示正常的：

最后才发现是在此标题之前有一个代码块缺少换行的缘故：

其他

Pug与Hexo

在 hexo 主题中使用 pug 时，可以通过使用 hexo 提供的全局变量 config，theme 来分别调用博客根目录下 _config.yml 文件中的参数以及主题根目录下 _config.yml 文件中的参数。

//- blog config
p= config.description

//- theme config
p= theme.title

更多查看：网页模板 pug 基本语法

看来写 md 文档的时候，能多打几个换行就多打几个，不然很可能会出奇奇怪怪的问题。