feint

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 也写了一些魔改的方法和大佬的魔改版,可以去瞅瞅。

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

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

参考博客:

Author

Ctwo

Posted on

2020-10-25

Updated on

2020-10-25

Licensed under

Comments