hexo博客2:双主题

文章目录

1. 1. 介绍
2. 2. 双主题安装
3. 3. 代码块行高问题
4. 4. wiki图片链接问题
5. 5. 图库APi设置
6. 6. 搜索链接跳转错误
7. 7. 渲染页面
8. 8. 参考资料

介绍

后来发现单纯的wiki风格博客可能确实有些单调了（绝对不是因为我想弄二次元风格的），因此在考虑以后，决定搭建一个双主题的博客，外层是个华丽一点的主题matery，内层是个wiki风格主题Wikitten。

同时可以通过外层的wiki标志点击进入内层的wiki主题。

双主题安装

参考文章：Hexo 同时使用两种主题（博客与 wiki 页面实现统一管理） | 别院牧志 (masantu.com)

1. 把原来wiki主题的 _config.yml复制并重命名为 _config_wiki.yml（wiki主题下的站点文件

2. 安装 hexo-theme-matery主题

   cd your-hexo-directory/themes
   git clone https://github.com/blinkfox/hexo-theme-matery

3. 按照 matery教程配置新的 _config_wiki.yml文件

4. 修改 _config_wiki.yml文件：

   # URL
   ## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
   url: https://bg51717.github.io/wiki/
   root: /wiki/
   # permalink: :year/:month/:day/:title/
   # permalink_defaults:
   permalink: /:abbrlink/
   abbrlink:
       alg: crc16   #算法： crc16(default) and crc32
       rep: dec     #进制： dec(default) and hex
   
   permalink_defaults: 
   
   # Directory
   source_dir: source
   public_dir: public/wiki/

代码块行高问题

在使用 prismjs渲染代码块的时候，可能会遇到图示问题，行高不匹配，其实主要是位置没有对准：

可以参考：hexo 7.3 代码块显示问题 · Issue #928 · blinkfox/hexo-theme-matery

解决办法是把 themes\hexo-theme-matery\source\libs\prism\prism.min.css文件里的：

[class*=language-].line-numbers>code{position:relative;white-space:inherit}

修改为：

[class*=language-].line-numbers>code{position:sticky;white-space:inherit}

wiki图片链接问题

由于渲染的站点 url和 root里都有 wiki，因此会导致渲染出来的图片出现两次 /wiki，因此需要代码进行处理，核心函数如下所示：

def post_html_file(file_path):
    """处理html文件，只修改图片链接中的重复/wiki/"""
    # 如果不是html文件, 返回
    if not file_path.endswith(".html"):
        return

    # 读取文件内容
    with open(file_path, "r", encoding="utf-8") as file:
        content = file.read()

    # 定义正则表达式来匹配图片链接，处理 <img> 标签中的 src 属性
    img_pattern = r'<img[^>]+src="([^"]+)"'

    # 查找所有匹配的图片链接
    matches = re.findall(img_pattern, content)

    # 遍历所有匹配的图片链接，替换掉重复的 /wiki/
    modified_content = content
    for match in matches:
        # 如果链接中有重复的 /wiki/，替换为单一的 /wiki/
        if "/wiki/wiki/" in match:
            corrected_url = match.replace("/wiki/wiki/", "/wiki/")
            # 替换内容中的旧链接为新的链接
            modified_content = modified_content.replace(match, corrected_url)

    # 将修改后的内容写回文件
    with open(file_path, "w", encoding="utf-8") as file:
        file.write(modified_content)

图库APi设置

对于外层主题，需要自己设置相关的图片，笔者从栗次元API-举个栗子 图库API爬取部分图片作为图片。 也有别的食用方法可以参考该网站具体的教程。

搜索链接跳转错误

由于把每篇博客链接到了一个数字，从而起到了缩短博客网址长度和增加搜索引擎爬取的概率，但是可能会导致原有的搜索跳转到随机IP。 原因是：网址返回的是纯数字相对链接，比如 /7369，完整的链接为 https://bg51717.github.io/7369/，但是浏览器可能会把链接解析为ip地址，变成 0.0.28.201，等同于256进制下的 7369，从而导致跳转错误。 因此需要调整搜索代码，每次返回完整链接，具体如下：

if (data_url.indexOf('http') !== 0) {
    // 生成绝对路径，确保基于网站根目录
    data_url =  window.location.host +'/'+root+'/'+ data_url;
    data_url = data_url.replace(/\/+/g, '/'); // 去掉连续的斜杠
    data_url = data_url.replace(/^\//, '');   // 去掉开头的斜杠
    data_url = window.location.protocol + '//' + data_url;
}

渲染页面

渲染部分的参考主要来自：Hexo 同时使用两种主题（博客与 wiki 页面实现统一管理） | 别院牧志

1. 渲染主页面，生成到/public/

   hexo g

2. 删除 db.json 及旧的 public/wiki

   hexo --config _config_wiki.yml clean

3. 渲染wiki页面

   hexo --config _config_wiki.yml g

4. 删除db.json

   rm db.json

如果每次执行上述步骤都会稍显复杂，因此考虑整理脚本文件 run.py，执行渲染时 python run.py即可：

import os
import platform
import subprocess

def run_command(command):
    """实时执行命令并将输出打印到控制台"""
    try:
        # 使用 Popen 来执行命令并实时读取输出
        process = subprocess.Popen(command, shell=True, stdout=subprocess.PIPE, stderr=subprocess.PIPE, text=True, encoding='utf-8')

        # 实时读取 stdout 和 stderr
        for stdout_line in iter(process.stdout.readline, ""):
            print(stdout_line, end='')  # 实时输出 stdout

        process.stdout.close()
        return_code = process.wait()  # 等待命令执行结束

        # 输出 stderr（如果有）
        if return_code != 0:
            for stderr_line in iter(process.stderr.readline, ""):
                print(stderr_line, end='')  # 实时输出 stderr
        process.stderr.close()

    except subprocess.CalledProcessError as e:
        print(f"命令 '{command}' 执行失败，错误信息: {e.stderr}")

def clean_generate_hexo():
    """执行 hexo clean 和 hexo g 命令，以及相关的配置命令"""
    os_type = platform.system()

    # 根据操作系统选择 rm 或 del
    remove_command = "rm db.json" if os_type != "Windows" else "del db.json"

    # 定义需要执行的命令列表
    commands = [
        "python -m process.run_before",
        "hexo clean",
        "hexo g",
        "hexo --config _config_wiki.yml clean",
        "hexo --config _config_wiki.yml g",
        remove_command,
        "python -m process.run_post",
    ]

    # 逐一执行命令
    for command in commands:
        print(f"\n正在执行命令: {command}")
        run_command(command)

if __name__ == "__main__":
    clean_generate_hexo()

参考资料

• blinkfox/hexo-theme-matery: A beautiful hexo blog theme with material design and responsive design.一个基于材料设计和响应式设计而成的全面、美观的Hexo主题。国内访问：http://blinkfox.com (github.com)
• zthxxx/hexo-theme-Wikitten: A theme of Hexo for personal wiki which seems like Wikitten style. (github.com)
• Hexo 同时使用两种主题（博客与 wiki 页面实现统一管理） | 别院牧志 (masantu.com)