feint
Posted Updated essay

feint

多灾多难

本来开心的用着 hexo，写公式的时候发现有点问题，网上解决了一下，顺手更新了一下 npm 包，然后整个人就裂开了，折腾了一晚上 + 一上午，曲线解决了问题。m*，还我时间…

数学公式

Hexo 的 MathJax 在渲染 LaTex 数学公式时会把一些字符转义导致公式无法正常显示。

可以通过修改渲染的规则来解决这个问题。

npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

执行上面的命令即可，先卸载原来的渲染引擎，再安装新的，换一个渲染的引擎。

然后，跟换引擎后行间公式可以正确渲染了，但是这样还没有完全解决问题，行内公式的渲染还是有问题，因为 hexo-renderer-kramed 引擎也有语义冲突的问题。

接下来到博客根目录下，找到 node_modules\kramed\lib\rules\inline.js，把第11行的 escape 变量的值做相应的修改：

1
2
- escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
+ escape: /^\\([`*\[\]()#$+\-.!_>])/

这一步是在原基础上取消了对 ,{,} 的转义

同时把第20行的 em 变量也要做相应的修改

1
2
- em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
+ em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/

重新启动 hexo，如果不行试着 clean 一下缓存再重新生成。

Node 版本

在解决这个问题的时候，我手贱更新了 npm，然后自动修复更新了一些包，强制更新了一些包（现在想想为啥要更新）。然后 hexo 的依赖就各种崩，我还找不到原来的 package.json，只好逐一试试网上的一些方法。其中一个就是回退 NodeJs 的版本。

推荐使用 nvm 工具来管理电脑上的 node，官方下载链接 https://github.com/coreybutler/nvm-windows/releases

然后就可以使用简单的命令来管理电脑上的不同版本的 node

1
2
3
4
nvm ls # 查看安装的版本
nvm use xxx # 使用某个版本,xxx 为版本号
nvm install vxx # 安装对应vxx版本的node
nvm uninstall vxx # 卸载对应版本的node

然鹅这并没有用处

报的错误是 TypeError [ERR_INVALID_URL]，看了下错误找到对应的位置，是一个 new URL() 初始化抛出的异常被捕获了，去掉捕获代码（这个错误提示信息真的太少了），然后发现错误的原因是 / 根目录错误，应该写为 '/' …

但是重要的是，当我改完我博客里面的所有 root 符号的时候，还有错误，这次是在一些我找不到的或者看不懂的文件里面了…

翻了好久网上，没有能解决的，推测为 hexo 的版本的问题，但我也不知道该回滚到那一个版本，大晚上心态炸裂然后就睡了。

弃疗

早早起床，备份博客和配置文件，删除重装…

icarus 更新到 4.0 了，变成了一个 npm 包，我之前用的还是 2.x 版本。然后我就不会魔改了，扒拉对比了半天找到几个修改的地方，向着我原来的样子改：

修改文章详情页

原本情况下主页和文章详情页都是只能同样的栏数，这很不好看，在原来的版本中可以参考网上的一些修改方法，新版我就没找到

后来发现 issue 里提出了解决方法：复制 _config.yml 到 _config.post.yml 和 _config.page.yml，然后在相应的配置文件中修改 widget 布局

这个好像是 4.0 的新的特性，之前我咋不知道呢。官方文档里也有提到这些配置文件的优先级和使用顺序。

然后就是页面大小问题，即使设置了 post 页两栏，文章内容这一栏也很小，需要修改代码里的这样一些地方（源码在 node_modules 的 hexo-theme-icarus 里）:

  • layout/common/widget.jsx 修改 getColumnSizeClass 函数
layout/common/widget.jsx
1
2
3
4
5
6
7
8
9
10
11

function getColumnSizeClass(columnCount) {
    switch (columnCount) {
        case 2:
            return 'is-4-tablet is-4-desktop is-3-widescreen';
        case 3:
            return 'is-4-tablet is-4-desktop is-3-widescreen';
    }
    return '';
}

  • layout/layout.jsx 修改 columnCount 对应生成的属性（第29行和第30行）
  • layout/layout.jsx 修改生成 body 的属性（第19行）（感觉手机适配会有一些问题，暂时没考虑）
1
2
3
4
5
6
- <body class={`is-${columnCount}-column`}>
+ <body class={`is-3-column`}>
...
'is-8-tablet is-8-desktop is-9-widescreen': columnCount === 2,
'is-8-tablet is-8-desktop is-6-widescreen': columnCount === 3
...
  • include/style/responsive.styl 增加新的 class 样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
+widescreen()
    .is-1-column .container, .is-2-column .container
        max-width: $desktop - 2 * $gap
        width: $desktop - 2 * $gap
    .is-3-column .container
        max-width: $widescreen - $gap
        width: $widescreen - $gap

+fullhd()
    .is-2-column .container
        max-width: $widescreen - 2 * $gap
        width: $widescreen - 2 * $gap

    .is-1-column .container
        max-width: $desktop - 2 * $gap
        width: $desktop - 2 * $gap
    .is-3-column .container
        max-width: $fullhd - $gap
        width: $fullhd - $gap

还有一点，在原本的里面可以给 toc 生成的目录标签加一个 sticky 属性，这样无论你前面加了几个插件，当滑到 toc 这里的时候就会黏上。只在配置文件里面修改的话是从一开始第一个插件的位置就黏上了。目前还没有找到如何修改

加自定义的 icon

可以在配置文件里修改默认的服务器，我怕改了之后有问题，就引了别的 iconfont 网站的图标

  • layout/common/head.jsx 里加入你的引用路径 如：<link rel="stylesheet" href="xxxxxx" /> 即可

写在后面

  • 网上还有一些别的魔改，感觉喜欢的话可以自己试试，我觉得这些就够了。我上一次 essay 也写了一些魔改的方法和大佬的魔改版，可以去瞅瞅。

  • 官方文档是个好东西，不认真看肯定要吃亏。

  • 不要作死更新你的项目的版本，除非你真的需要并且做好了备份或者版本控制

参考博客:

feint

http://cyx0706.github.io/2020/10/25/feint/

Author

Ctwo

Posted on

2020-10-25

Updated on

2020-10-25

Licensed under

Comments

Catalogue

×