Hexo 博客搭建 (2) - 个性化需求配置

发表于 更新于 分类于 ， 阅读次数： 本文字数： 1.4k 阅读时长 ≈ 5 分钟

Hexo-Next 我主要的配置需求：

  1. 基础的美化与功能
  2. 数学公式
  3. 公益404
  4. 图片插入

注：强烈不建议在文章文件名称与图片名称中出现空格，我们可以在md文件名称中不使用空格，在文件中 title 字段中，使用包含空格的文章标题。

一些基础美化与功能配置

Next 主题使用 Pandoc 展示数学公式

参考

  • https://hexo-next.readthedocs.io/zh-cn/latest/next/advanced/%E9%85%8D%E7%BD%AEMathJax/
  • https://github.com/jgm/pandoc/blob/master/INSTALL.md
  • https://blog.csdn.net/weixin_45073562/article/details/120289648
  • https://blog.barku.re/2024/04/20/%E5%BD%BB%E5%BA%95%E8%A7%A3%E5%86%B3-Hexo-%E7%9A%84%E6%95%B0%E5%AD%A6%E5%85%AC%E5%BC%8F%E6%B8%B2%E6%9F%93%E9%97%AE%E9%A2%98/

总结

  1. 安装 Pandoc
1
winget install --source winget --exact --id JohnMacFarlane.Pandoc
  1. 插件变动
1
2
3
4
5
6
npm uninstall hexo-math --save
npm uninstall hexo-renderer-marked --save

npm install hexo-renderer-pandoc --save
npm install hexo-filter-mathjax --save

  1. 主题配置文件修改：可以自行参考：https://github.com/next-theme/hexo-filter-mathjax?tab=readme-ov-file#options

  2. 重启电脑，重启 VSCode

  3. 重新构建

1
2
hexo clean
hexo g

添加图片

参考： https://www.cnblogs.com/cscshi/p/15196100.html

  1. 安装插件，在 hexo 根目录下执行 

    1
    npm install hexo-asset-image --save

  2. 打开 hexo 的配置文件 _config.yml，将 post_asset_folder，把这个选项从false改成true

  3. 打开 hexo 根目录下的 /node_modules/hexo-asset-image/index.js，将内容更换为下面的代码。（此步骤不知道是否真的有效，我没用此步骤也可以，可能遇到的问题不一样，建议执行此步骤的时候先备份 index.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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
'use strict';
var cheerio = require('cheerio');

// http://stackoverflow.com/questions/14480345/how-to-get-the-nth-occurrence-in-a-string
function getPosition(str, m, i) {
  return str.split(m, i).join(m).length;
}
var version = String(hexo.version).split('.');
hexo.extend.filter.register('after_post_render', function(data){
  var config = hexo.config;
  if(config.post_asset_folder){
        var link = data.permalink;
    if(version.length > 0 && Number(version[0]) == 3)
       var beginPos = getPosition(link, '/', 1) + 1;
    else
       var beginPos = getPosition(link, '/', 3) + 1;
    // In hexo 3.1.1, the permalink of "about" page is like ".../about/index.html".
    var endPos = link.lastIndexOf('/') + 1;
    link = link.substring(beginPos, endPos);

    var toprocess = ['excerpt', 'more', 'content'];
    for(var i = 0; i < toprocess.length; i++){
      var key = toprocess[i];
 
      var $ = cheerio.load(data[key], {
        ignoreWhitespace: false,
        xmlMode: false,
        lowerCaseTags: false,
        decodeEntities: false
      });

      $('img').each(function(){
        if ($(this).attr('src')){
            // For windows style path, we replace '\' to '/'.
            var src = $(this).attr('src').replace('\\', '/');
            if(!/http[s]*.*|\/\/.*/.test(src) &&
               !/^\s*\//.test(src)) {
              // For "about" page, the first part of "src" can't be removed.
              // In addition, to support multi-level local directory.
              var linkArray = link.split('/').filter(function(elem){
                return elem != '';
              });
              var srcArray = src.split('/').filter(function(elem){
                return elem != '' && elem != '.';
              });
              if(srcArray.length > 1)
                srcArray.shift();
              src = srcArray.join('/');
              $(this).attr('src', config.root + link + src);
              console.info&&console.info("update link as:-->"+config.root + link + src);
            }
        }else{
            console.info&&console.info("no src attr, skipped...");
            console.info&&console.info($(this));
        }
      });
      data[key] = $.html();
    }
  }
});

实际上安装了 hexo-asset-image --save 插件后，通过 hexo new post *** 指令新建博文，除了在 ~/source/_post/ 目录下新建 .md 文件外，还会新建一个同名的文件夹，图片直接放这个文件夹即可。在生成静态页面的时候，hexo 会将 .md文件和图片放在一个文件夹内。 如果不通过 hexo new post *** 指令新建博文，可以直接在 _post 目录下新建 .md（注意自己加头部），以及同名的文件夹，将图片放这文件夹下效果一样。

  1. 插入图片。语法和 markdown 语法一致。 

    1
    2
    ![]()  # [描述，不能为空，否则不会显示，md 下是可以不写的](图片完整名称)
    # eg. ![test](test.jpg)，注意 test.jpg 是按要求放在与此 .md 文件同名的文件夹内。

  2. 一般我个人习惯于使用 Typora 进行 Markdown 写作，粘贴图片比较方便，我们可以在 文件-偏好设置-图像 中设置 复制到指定路径 为 ./${filename}，因为 hexo new <md file> 创建的文件夹不包含 .asset 后缀。另外，一般还可以勾选 对本地位置图片应用上述规则，优先使用相对路径，为相对路径添加 ./

Typora-settings
  1. 重要：如果遇到还是不能加载图像的问题，首先检查图片路径中是否含有空格，请其中的空格全部替换为 %20

公益404

参考：https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-custom-404-page-for-your-github-pages-site

注意，对 Github Pages 的二级域名是无效的，只有自己买域名搭建的才有效。

但是我们可以直接在导航栏中添加一个，以下是方法：

  1. 在 主题配置文件中 搜索 commonweal 设置为 true
  2. hexo new page 404
  3. 在 .\source\404\index.md 中添加以下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="robots" content="all" />
  <meta name="robots" content="index,follow"/>
  <link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
</head>
<body>
  <script type="text/plain" src="http://www.qq.com/404/search_children.js"
          charset="utf-8" homePageUrl="/"
          homePageName="回到我的主页">
  </script>
  <script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>
  <script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
</body>
</html>
  1. 重新构建
1
2
3
hexo clean
hexo g
hexo s

文章过长时分段显示

参考：https://blog.csdn.net/RayDon03/article/details/104441437 自动化貌似不太好整，所以自己使用 <!-- more -->

也可以选择使用 description 这个 front0-matter

证实： https://hexo-next.readthedocs.io/zh-cn/latest/next/base/%E9%A6%96%E9%A1%B5%E9%A2%84%E8%A7%88/

1
2
3
4
5
# 这个选项貌似没有用
auto_excerpt:
  enable: true
  length: 150  # 自动生成摘要的字数限制

折叠过长的代码块

https://homulilly.com/post/hexo-next-add-code-folding.html

貌似现在不支持，以后可能也不打算支持，所以暂时不考虑，不浪费太多精力了。