Hexo 转至 Next 优化及插件使用问题

2023-12-28 12:41:46

hexo-asset-image 与 hexo-abbrlink 纷争

hexo-abbrlink 插件用于将文章链接永久化，hexo-asset-image 插件用于当站点配置（根目录下的 _config.yml，themes 目录下的叫主题配置）中的 post_asset_folder 为 true 时，能通过相对路径使用资源文件夹中的图片等，这个好处是像使用 Typora 文本编辑器通过设置使拖进来的图片自动转换成对应的相对路径，使写博客变得更加高效。

注：hexo-asset-image 版本为 0.0.3。

当一起用时 hexo-asset-image 失效，因为所需要的相对路径为 abbrlink/<image_name>，但是编写的是 title/<image_name>，那么需要实现类似重定向的功能即可解决问题，添加此功能的 hexo-asset-image 插件已经有人发布在 GitHub 上了 >>>仓库地址<<<，但是 Star 为什么只有 1？？？是没人用 hexo-asset-image 吗？应该不会吧，那就只剩添加这个功能很简单，毕竟 hexo-abbrlink 的 Issue 中有如何修改代码的回答。反正 install 上这个适配版后，一切都正常工作了！

hexo-abbrlink 使生成的静态文件发生了变化

hexo g 生成的文章静态文件不会再以年月日创建目录并防至相应位置了，所以当站定配置中 permalink 设置成 permalink: /:abbrlink.html 时，文章少还好，一多 public 目录下就会很乱。

推荐设置成 permalink: posts/:abbrlink.html ，这样所有文章的 html 和 post_asset_folder 都会保存在 public/posts 目录下，分类摆放好看又好找。

hexo-asset-image 再次失——http(s)

相对路径中不能包含 “http” 字符串（即 MarkDown 文件名和资源文件夹名），阅读源码得知它是靠正则表达式去进行一些操作的。

一个解决办法（“曲线救国”）：创建新文章时不要包含 “http”，然后在 Front-matter 的 title 中添加。

还有一个解决办法就是改正则表达式，那就 TODO 吧。

无法显示置顶图标 fa fa-thumb-tack

next 主题中的 fontawesome 图标只有 all.min.css，而 fa fa-thumb-tack 在 v4-shims.css 中。

解决步骤：

下载 fontawesome 所有图标 >>>下载地址<<<。
解压后将 css 和 webfonts 文件夹移至主题相应位置（合并并替换）。

在 layout/_macro/post.swig 的 <div class="post-meta"> 下添加：

{% if post.top %}
    <link href="/lib/font-awesome/css/v4-shims.css" rel="stylesheet"><i class="fa fa-thumb-tack"></i>
    <font color=7D26CD>置顶</font>
    <span class="post-meta-divider">|</span>
{% endif %}

压缩文件

gulp

配置参考此文章。

执行 gulp 时出现两个 Error：Error in plugin "gulp-htmlmin" 和额外功能中的 babel 语法错误，如果您知道解决办法请在底部评论处留言，或者侧边栏中选择邮箱或者微信联系，谢谢！

因此改用 hexo-neat。

hexo-neat

GitHub 地址，按 README 中所写配置即可。

修改链接样式时标签和分类页跟着变化

css 如果选择 post-body 中的所有 a 标签就会导致分类和标签一起变化，分类有 class 定义还好，但是标签没有 class，用开发者工具查看后发现还有一个表明此段 div 中放的内容概要的 itemprop 参数，怪不得 next 到处都是 post-body。

用 itemprop 选择的 css 代码（在 _data/styles.styl 中添加）：

div[itemprop="articleBody"] a {
    &:not(.btn) {
        color: $blue;
        border-bottom: none;
        border-bottom: 1px solid $blue;
        &:hover {
            color: $orange;
            border-bottom: none;
            border-bottom: 1px solid $orange;
        }
    }
}

删除图片标题

可图实现，但是我改了之后又改回去了，有时候还是需要标明此图含义利于理解。

图片居中显示

图片未居中原因：

在 _data/styles.styl 中添加：

.posts-expand .post-body img {
    margin-left: auto;
}

修改 pace 加载颜色（标准色）

在主题配置 vendors 中设置，如需要橙色：

生成新文章时显示 ‘[object Object]’: null

原因是 scaffolds/post.md 的 Front-matter 中获取标题和日期的两大括号之间有空格，我记得没动过啊……，但是重新 hexo init 一个新目录时，它的正确让我怀疑我失忆了。

对自己写的 css 的 thinking

图献上！

码农公寓