Hexo和Icarus折腾

魔改

固定顶部导航

pjax

首页文章显示tags

宽度修改

WEBP格式

遇到的问题

hexo和vscode均兼容的图片显示

目前显示图片用的是

1

{% asset_img hexo-blog-encrypt.png %}

在vscode中没法正常显示，但在hexo s 和 hexo g 中都能正常显示。

尝试了一下利用Markdown Preview Enhanced中的Extend Parser进行渲染，目前网上主流的修改方式如下：

使用ctrl+shift+p输入Markdown Preview Enhanced: Extend Parser编辑onWillParseMarkdown函数。

1
2
3
4
5
6
7
8
9
10
11

module.exports = {
  onWillParseMarkdown: function(markdown) {
    return new Promise((resolve, reject)=> {
      markdown = markdown.replace(
        /\{%\s*asset_img\s*(.*)\s*%\}/g,
        (whole, content) => (`![img](${content})`)
      )
      return resolve(markdown)
    })
  },
  ...

这样的修改方式实际上将{% asset_img hexo-blog-encrypt.png %}修改为![img](${content})，不知道什么版本的markdown能渲染出来（并且我使用vscode和typora都不能正常显示），但这样是有问题的，因为markdown显示图片需要使用相对地址，不应该使用文件名读取同名目录下的文件。

因此，需要在content前补充一个文件夹名，由于文件夹和文件以及标题是同名的，因此这里用标题来作为dir路径，如果你的不是这样命名，可能还需要别的方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

module.exports = {
  onWillParseMarkdown: function(markdown) {
    return new Promise((resolve, reject)=> {
      // 寻找一行开头为title:的行, 并进行正则提取
      var r = /title: (.*)/
      var dir = r.exec(markdown)[1]
      markdown = markdown.replace(
        /\{%\s*asset_img\s*(\S*)\s*(.*)\s+%\}/g,
        (whole, file_name, file_info) =>  (`![${file_info}](${dir}/${file_name})`)
      )
      return resolve(markdown)
    })
  },
  ...

这样就能够正常预览了，虽然这样实现不太优雅hhhh，但预计未来会使用图床或对象存储进行图片存储，因此这个就不做调整了。

vscode中预览bulma样式

本站使用了bulma样式对markdown进行补充，但在vscode的预览中，引入的html语句因为没有css因此不能正常显示，因此需要把bulma的css引入进来。

使用ctrl+shift+p输入Markdown Preview Enhanced: Customize CSS编辑，将bulma的提供的css贴上或者引入均可。

https://bulma.io/

导入后就可以看到显示的效果了，注意bulma提供的css对markdown有侵入，如果发现哪里出现问题了，把对应的css注释掉即可，以下是我修改的一些部分。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// 注释number类
// .number {
//   align-items: center;
//   background-color: whitesmoke;
//   border-radius: 9999px;
//   display: inline-flex;
//   font-size: 1.25rem;
//   height: 2em;
//   justify-content: center;
//   margin-right: 1.5rem;
//   min-width: 2.5em;
//   padding: 0.25rem 0.5rem;
//   text-align: center;
//   vertical-align: top;
// }

// 添加.message-body p
// 用于对message-body内p标签的调整，不然会有16px的错误margin
.message-body p {
  margin-bottom: 0;
}

// 同上，为了之后方便改，就不写一起了
.message-header p {
  margin-bottom: 0;
}

同时，在Markdown Preview Enhanced: Extend Parser中，编辑onWillParseMarkdown函数，添加如下内容，将Raw代码块排除渲染。

1
2
3
4
5
6
7
8
9

markdown = markdown.replace(
  /\{% endraw %}/g,
  (whole) =>  (``)
)

markdown = markdown.replace(
  /\{% raw %}/g,
  (whole) =>  (``)
)

显示效果：

插件

Waline 评论

Hexo-blog-encrypt 加密

html内容直接加密，应该还是比较安全的

安装

1

npm install --save hexo-blog-encrypt

使用

在文章前添加密码和其他说明（以下内容摘自hexo-blog-encrypt github）

1
2
3
4
5

password: hello
abstract: 有东西被加密了, 请输入密码查看.
message: 您好, 这里需要密码.
wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试.
wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.

也可以在_config.yml中设置，其中tags可以根据tag设置密码，并自动加密

1
2
3
4
5
6
7
8
9

# Security
encrypt: # hexo-blog-encrypt
  abstract: 有东西被加密了, 请输入密码查看.
  message: 您好, 这里需要密码.
  tags:
  - {name: tagName, password: 密码A}
  - {name: tagName, password: 密码B}
  wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试.
  wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.

显示效果

Hexo-native-lazy-load 懒加载

使用npm install hexo-native-lazy-load --save安装，并在_config.yml添加：

1
2
3
4

# lazy—load
lazy_load:
  enable: true
  onlypost: false

即可实现懒加载，图片不需要手动添加loading="lazy"，如果f12后发现img标签没有正确的添加lazy属性，则需要执行hexo clean，成功效果如下。

Hexo-generator-feed rss订阅

现在用rss的人已经不多了（虽然我还在用），所以要给博客加个rss。
使用npm hexo-generator-feed --save安装，并在_config.yml添加：

1
2
3
4
5
6

# rss
# rss
feed:
  type: atom
  path: atom.xml
  limit: 20

就可以使用了，具体配置参数可以在 https://github.com/hexojs/hexo-generator-feed 这里看。
同时还需要在Icarus中设置rss链接，在_config.icarus.yml的widgets.social_links中添加：

1
2
3

RSS:
  icon: fas fa-rss
  url: /atom.xml

即可显示rss按钮了。

Hexo-generator-sitemap 站点地图

使用npm install hexo-generator-sitemap --save安装后，并在_config.yml添加：

1
2
3
4
5

# sitemap
sitemap:
  path: sitemap.xml
  tags: false
  categories: false

Hexo-tag-steamgame steam游戏插件

使用npm install hexo-tag-steamgame --save安装后，在文章内添加：

1
2
3
4
5

{% steamgame appid description %}
# 例如
{% steamgame 1127500 迷你地铁制作组的新作品 %}
# 或者，不带简介，默认会使用steam的简介
{% steamgame 246620 %}