写在前面

在使用hexo博客的这段时间里遇到一些小问题，但又不足以单写一个post，就都收集并记录于此。

问题

GitHub Actions-pandoc

由于使用hexo-renderer-pandoc渲染引擎，在GitHub Actions里会报如下错误：

pandoc exited with code null.

这是因为需要pandoc软件支持，如果问题出现在本地很好解决，安装一个2.0版以上即可。也可以在GitHub Actions使用pandoc，官方给了一种简单方法

name: Simple Usage

on: push

jobs:
  convert_via_pandoc:
    runs-on: ubuntu-18.04
    steps:
      - uses: docker://pandoc/core:2.9
        with:
          args: "--help" # gets appended to pandoc command

但是这个uses和run不能同时使用，pandoc仅在一个 workflow 里作用。于是就看到一个原始的方法^[1]，直接在GitHub Actions安装pandoc

- name: Install Pandoc
  run: |
  # install pandoc
  curl -s -L https://github.com/jgm/pandoc/releases/download/2.9.2/pandoc-2.9.2-linux-amd64.tar.gz | tar xvzf - -C $RUNNER_TOOL_CACHE/

其中下载保存目录$RUNNER_TOOL_CACHE在github的项目中添加一个Secrets = /opt/hostedtoolcache。然后在Hexo Generate中导入pandoc的路径

- name: Hexo Generate
  run: |
    # add pandoc to PATH
    export PATH="$PATH:$RUNNER_TOOL_CACHE/pandoc-2.9.2/bin"
    rm -f .yarnclean
    yarn --frozen-lockfile --ignore-engines --ignore-optional --non-interactive --silent --ignore-scripts --production=false
    rm -rf ./public
    yarn run hexo clean
    yarn run hexo generate

其他的保持不变，自动部署Hexo显示成果。

p.s. 之前想过卸载hexo-renderer-pandoc一了百了，不过卸载后发现公式的\(*\)和\(\| \cdot \|\)不能识别，复选框- [] 和- [x]都不能正常显示，那还是正面面对吧。

锚点偏移

在markdown里使用锚点

[说明文字](#jump)
<span id = "jump">说明文字-跳转位置</span>

出现跳转位置被导航栏挡住，因为目前锚点的偏移只对已知的元素支持，例如标题和脚标。下面给一种设置锚点的css的方法解决方法

a.anchor {
  display: block;
  position: relative;
  top: -60px;
  visibility: hidden;
}

然后用链接形式

说明文字-跳转位置<a class="anchor" id="jump"></a>

这样的锚点不会被挡住😊。不过公式😑就不好弄了。公式可以设置$\label{eq:mark}$锚点，然后在跳转位置设定$\eqref{eq:mark}$跳转，这就找不到对应的样式了，都在Mathjax里。

hexo-blog-encrypt 图片不加载

使用加密插件hexo-blog-encrypt后发现图片不能正常加载，一直是懒加载的圈圈，另外图片浏览的 fancybox 效果消失，因此官方给出的解决方式是使用 Callback 函数来激活

在部分博客中, 解密后部分元素可能无法正常显示或者表现, 这属于已知问题. 目前的解决办法是通过自行查阅自己的博客中的代码, 了解到在 onload 事件发生时调用了哪些函数, 并将这些函数挑选后写入到博客内容中. 如:

<script>
    // 添加一个 script tag 与代码在文章末尾.
    alert("Hello World");
</script>

在一波尝试后找到了正确的打开方式，将如下代码插入到markdown文档末尾即可

<script src="/js/lazyload.js"></script>
<script>
    $('#post img:not(.no-zoom img, img[no-zoom]), img[zoom]').each(
      function () {
        var element = document.createElement('a');
        $(element).attr('data-fancybox', 'images');
        $(element).attr('href', $(this).attr('src'));
        $(this).wrap(element);
      }
    );
</script>

hexo-blog-encrypt 目录不出现

GitHub上一个外国友人提出一个IssueToC and Copy Code Button messing up，使用加密插件hexo-blog-encrypt后发现目录不显示，不管刷新多少次都是这个问题，看源码发现

<div id="toc">

因此也是插件没有正确激活toc的调用函数。使用下面的callback即可（其实就是tocjs.ejs的一部分）

<script>
  $(document).ready(function () {
      var boardCtn = $('#board-ctn');
      var boardTop = boardCtn.offset().top;
      tocbot.init({
        tocSelector: '#tocbot',
        contentSelector: '#post-body',
        linkClass: 'tocbot-link',
        activeLinkClass: 'tocbot-active-link',
        listClass: 'tocbot-list',
        isCollapsedClass: 'tocbot-is-collapsed',
        collapsibleClass: 'tocbot-is-collapsible',
        scrollSmooth: true,
        headingsOffset: -boardTop
      });
      if ($('.toc-list-item').length > 0) {
        $('#toc').css('visibility', 'visible');
      }
  });
</script>

问题hexo-abbrlink.js:24:27

hexo-abbrlink 最近抽风，报下面的错，在GitHub Actions里也是下面问题

TypeError: Cannot read property 'drafts' of undefined
    at Hexo.logic (D:\github\Hexo-Blog-test\node_modules\hexo-abbrlink\lib\logic.js:24:27)

而且在初始环境(hexo init)下也能复现这个毛病，所以就选择卸载hexo-abbrlink插件了，但是又需要维持以前的永久短链接，使用urlname的形式手动设置

permalink: posts/:urlname/

在每个post的Front-matter中加上urlname即可。

---
title: title
urlname: urlname
...
---

然后就发现一个有趣的事情，html文件也可以加这个来设置链接和标题。详细见Fluid+自定义html

Gitalks

按照网上的教程使用评论出现错误

Error: u.concat(...).join is not a function!
Error: Not Found.

对于第一个问题，gitalks的issue#114提到labels的问题，控制台也确实报的这样的错误。

在fluid\layout\_partial\comments\gitalk.ejs找到

labels: <%- JSON.stringify(theme.gitalk.labels || []) %>,

改为

labels: '{{ theme.gitalk.labels }}'.split(',').filter(l => l),

对于第二个问题，只需要仔细填写

• OAuth application
• 配置文件的gitalk设置
• repo开启Issures(没有Issures的最好先提交一个)

sharp: Command failed

看到群友在讨论gridsome-starter-blog安装会报错

error my-gridsome-site/node_modules/sharp: Command failed.

因此上手尝试下，记录解决方案。

• clone 仓库(github的网速太慢，换了个镜像)

git clone https://hub.fastgit.org/gridsome/gridsome-starter-blog.git
cd gridsome-starter-blog

• 安装sharp

  • 下载压缩文件libvips-8.9.1-win32-x64.tar.gz（文件10.9 MB）

  • （npm）文件夹

    C:\Users\{usename}\AppData\Roaming\npm-cache\_libvips\

  • (cnpm) 文件夹

    C:\Users\{usename}\.npminstall_tarball\_libvips\

  • 需要将{usename}换成电脑用户名，压缩文件不要解压。

  • 运行安装指令

    npm install sharp

• 在gridsome-starter-blog文件夹下安装node_modules

npm install

其他操作与Gridsome Blog Starter文档一致。

ps. 如果在npm install sharp报错，需要看报错原因

• 压缩包不完整，因为压缩包有10多兆，在github的源加载大概率会中断，所以先把压缩包放到指定文件夹下即可
• npm与cnpm安装的话注意文件夹有区别

参考

1. Github Actions 测试 - 自动部署 Hexo ↩︎