anzhiyu主题添加对数学公式的支持

Roxy_Magic2025-07-042025-10-12

前言

由于我想要写一篇文章，其中需要写化学方程式，但anzhiyu主题似乎没自带，所以研究了一下，写了篇教程方便其他需要的小伙伴

2025/10/5补充：据评论区大佬 Prorise 提出，anzhiyu 博客主题其实是自带了对 katex 的支持，我再次翻阅文档后发现确实如此，并且大佬还给出了详细教程，在此非常感谢这位大佬
如果还没有使用我的方案，建议大家优先选择 Prorise 大佬的方案

效果演示

此处表达式转载自https://www.bilibili.com/read/cv39488642

$$ \text{Na}^\text{+}[\text{:}\mathop{\text{O}}\limits_{\mathbf{..}}^{\mathbf{..}}\text{:}\text{H}]^\text{-} $$
$$\ce{2Al2O3_{\text{（熔融）}}} \xlongequal[冰晶石]{电解} \ce{4Al + 3O2 ^}$$
$$\ce{N2(g) + 3H2(g) <=> 2NH3(g)} \qquad \Delta H = -92.5kJ/mol$$

教程

文章内

在博客终端输入指令

1	npm install hexo-filter-katex --save

在博客根目录_config.yml中添加

katex:
  enable: true
  copy_tex: false
  mhchem: true  # 启用化学扩展
  cdn:
    css: https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css
    js: https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js
    mhchem: https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/mhchem.min.js

在themes\anzhiyu\layout\includes\head.pug中最底部添加

if theme.katex.enable
  link(rel="stylesheet" href=theme.katex.cdn.css)
  script(defer src=theme.katex.cdn.js)
  script(defer src=theme.katex.cdn.mhchem)

评论区

感谢本文章评论区网友茯芺苒的置顶评论，在 twikoo 评论区中也可以写公式

在博客根目录_config.anzhiyu.yml中找到# Inject配置项，引入 css

inject:
  head:
    # 自定义css
    - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">

在source\js\文件夹下新建名为twikoo.js的文件并粘贴以下内容，没有 js 这个文件夹的也可自己新建，如果想要其他位置自行更改即可

// Twikoo评论系统Katex和mhchem支持
document.addEventListener('DOMContentLoaded', function() {
  // 配置mhchem扩展
  if (typeof katex !== 'undefined') {
    // 确保mhchem扩展已加载并注册
    try {
      if (typeof mhchem !== 'undefined') {
        console.log('mhchem扩展已加载');
      }
    } catch (e) {
      console.warn('mhchem扩展加载可能有问题:', e);
    }
  }
  
  // 渲染数学公式的函数
  function renderAllMath() {
    if (typeof renderMathInElement !== 'function') {
      console.log('renderMathInElement函数未加载');
      return;
    }
    
    // 配置Katex选项，包含mhchem支持
    const katexOptions = {
      delimiters: [
        {left: '$$', right: '$$', display: true},
        {left: '$', right: '$', display: false},
        {left: '\\(', right: '\\)', display: false},
        {left: '\\[', right: '\\]', display: true}
      ],
      throwOnError: false,
      strict: false,
      trust: true,
      // 添加宏定义以确保\ce命令被识别
      macros: {
        "\\ce": "\\ce{#1}",
        "\\pu": "\\pu{#1}"
      }
    };
    
    // 渲染整个页面的公式
    renderMathInElement(document.body, katexOptions);
    
    // 特别渲染评论区域
    const commentArea = document.getElementById('tcomment');
    if (commentArea) {
      renderMathInElement(commentArea, katexOptions);
    }
  }
  
  // 初始渲染
  setTimeout(renderAllMath, 100);
  
  // 监听评论区域变化
  const observer = new MutationObserver(function(mutations) {
    let shouldRender = false;
    mutations.forEach(function(mutation) {
      if (mutation.addedNodes.length) {
        mutation.addedNodes.forEach(function(node) {
          if (node.nodeType === 1) {
            if (node.classList && (
              node.classList.contains('tk-comment') ||
              node.querySelector('.tk-comment')
            )) {
              shouldRender = true;
            }
          }
        });
      }
    });
    if (shouldRender) {
      setTimeout(renderAllMath, 200);
    }
  });
  
  const commentContainer = document.getElementById('tcomment');
  if (commentContainer) {
    observer.observe(commentContainer, {
      childList: true,
      subtree: true
    });
  }
  
  // 监听页面变化
  window.addEventListener('popstate', function() {
    setTimeout(renderAllMath, 300);
  });
});

在博客根目录_config.anzhiyu.yml中找到# Inject配置项，引入 js

bottom:
  # 自定义js
  - <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
  - <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/mhchem.min.js"></script>
  - <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"></script>
  - <script src="/js/twikoo.js"></script>

其他方案及补充说明

前言

效果演示

教程

文章内

评论区

其他方案及补充说明

内容扩展：添加数学公式支持（KaTeX）

Hexo 插件使用——hexo-filter-mathjax

让 Hexo 搭建的博客支持 LaTeX

Twikoo 如何启用 katex 支持

为 hexo 博客更换 pandoc 渲染

Roxy_Magic