solitude 安装

1
2
3
4
5
6
7
8
# 官方安装 在hexo主目录下操作
# git clone -b main https://github.com/everfu/hexo-theme-solitude.git themes/solitude
# 修改了源代码，所以还是用自己的仓库吧。不然官方一更新，我这边就对不上了。
git clone -b dev https://github.com/hs3434/hexo-theme-solitude themes/solitude
# 复制配置
cp -rf themes/solitude/_config.yml ./_config.solitude.yml
# 如果没有插件，请安装
npm install hexo-renderer-pug hexo-renderer-stylus --save

在 _config.yml 文件中添加：

1
theme: solitude

Solitude katex 公式支持

  1. 需要使用更高级的 markdown 渲染器
1
2
3
4
5
# 卸载原有的
npm un hexo-renderer-marked --save
# 安装高级的
npm i hexo-renderer-markdown-it --save
npm i @renbaoshuo/markdown-it-katex --save
  1. 配置 _config.yml
1
2
3
4
5
6
markdown:
    preset: 'default' # 使用的 MD 语法，默认使用的 GFM
    render:
        html: true # 渲染 html
        xhtmlOut: false
        langPrefix: 'language-' # 在代码块的类名中添加前缀（指定语言时）。
  1. 配置 _config.solitude.yml
1
2
3
4
katex:
  enable: true
  per_page: true # 是否在每页都加载 / Whether to load on each page
  copytex: false # 是否开启复制公式 / Whether to enable copy formula

mermaid 流程图支持

  1. 安装插件
1
npm install --save hexo-filter-mermaid-diagrams
  1. 配置 _config.solitude.yml
1
mermaid: true

后面的问题不用看了，官方已经修复bug了，这里仅留做记录。

Solitude 博文封面路径问题

Solitude 是 hexo 的一款主题，提供了使用 cover 参数指定博客文章封面的功能。
Alt text

按照我的逻辑，博文的文章封面应该和博文的图片放在一起，而我之前已经设置了粘贴图片时自动把图片放到博文目录的功能。

但是这里 cover 需要指定网页的绝对路径，很不方便（这个路径还不是固定的），所以需要修改代码来生成图片的网页路径。

修改 hexo/themes/solitude/scripts/filter/default.js 文件就行了

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
'use strict';
const path = require('path');
function gfg_Run(URL) {
    // Regular Expression to check url
    let RgExp = /(?:[a-z]+:)?\//;
    if (RgExp.test(URL)) {
        return true;
    } else {
        return false;
    }
}

hexo.extend.filter.register('after_post_render', function (data) {
    data.title = data.title || 'Untitled';
    const {config} = hexo.theme;
    if (data.layout === 'post') {
        let {copyright, locate, cover} = hexo.theme.config.post.default
        cover = cover !== null ? cover : ['/img/default.png']
        data.locate = data.locate || locate
        data.cc = data.cc || copyright
        if (typeof (data.cover) != "undefined" && !gfg_Run(data.cover)) {
            data.cover = path.join(data.path, data.cover)
        }
        data.cover = data.cover || cover[getRandomInt(0, cover?.length)]
        data.excerpt = data.description || data.excerpt
        data.toc = !!(config.aside.toc.post && data.toc !== false)
        data.ai = data.ai !== false
    }
    if (data.layout === 'page') {
        let {cover} = hexo.theme.config.page.default
        cover = cover !== null ? cover : ['/img/default.png']
        data.cover = data.cover || cover[getRandomInt(0, cover?.length)]
        data.excerpt = data.title
        data.toc = !!(config.aside.toc.page && data.toc !== false && data.aside);
    }
    data.comment = !!(config.comment.use && data.comment !== false);
    return data;
});

function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min)) + min;
}

Solitude 博文侧边最近文章图片路径问题

只需再加上

1
2
3
4
5
6
7
8
9
10
11
12
13
14
hexo.extend.filter.register('before_generate', function() {
    hexo.locals.invalidate();
    const posts = hexo.locals.get("posts");
    console.log(`Processing ${posts.length} posts in the site.`);
    hexo.config.generate_stage = "before_generate";
    // 例如，遍历所有文章并修改其内容
    posts.forEach(post => {
        if (typeof (post.cover) != "undefined" && !gfg_Run(post.cover)) {
            post.cover = path.join(post.path, post.cover)
        }
        // 注意：需要保存修改后的内容
        post.save();
    });
});

再修改 themes/solitude/layout/includes/widgets/aside/asideNewestPost.pug

因为在 post 页面主路径是 post 的路径，所以 post.cover 需要使用 url_for 转化为绝对路径。

1
2
3
4
# 第11行
img(alt=post.title src=post.cover)
# 改为
img(alt=post.title src=url_for(post.cover))