Vue博客开发：如何为静态文件夹内容应用vue-katex？

我之前也碰到过类似的困扰，咱们一步步拆解问题并找到解决方案：

首先得搞清楚核心原因：当你把内容从Vue模板分离到静态文件后，vue-katex的指令（比如v-katex）或组件只会在Vue模板编译阶段生效，而静态加载的HTML是直接插入DOM的，不会经过Vue的编译流程，所以公式没法自动渲染。

下面是几个实用的解决思路：

1. 手动调用KaTeX原生渲染API #

如果你的静态HTML里是用$$或\(包裹的原始公式（而非已生成的KaTeX HTML），可以在静态内容加载完成后，手动遍历DOM并调用KaTeX的render方法：

• 先确保安装了依赖（vue-katex本身依赖katex）：

npm install katex

• 在Vue组件中实现加载与渲染：

<template>
  <div ref="blogContent"></div>
</template>

<script>
import katex from 'katex'
import 'katex/dist/katex.min.css' // 必须引入KaTeX样式文件

export default {
  mounted() {
    // 加载静态HTML文件
    fetch('/static/your-blog-post.html')
      .then(res => res.text())
      .then(rawHtml => {
        this.$refs.blogContent.innerHTML = rawHtml
        
        // 遍历所有需要渲染公式的元素，比如带math类的标签
        const formulaElements = this.$refs.blogContent.querySelectorAll('.math')
        formulaElements.forEach(el => {
          katex.render(el.textContent, el, {
            throwOnError: false, // 忽略渲染错误避免页面崩溃
            displayMode: el.classList.contains('display') // 区分块级/行内公式
          })
        })
      })
  }
}
</script>

如果你的静态HTML里已经是KaTeX生成的HTML结构，那大概率是样式没全局生效，确保katex.min.css在项目中全局引入即可。

2. 自定义Vue指令结合v-html #

你可以封装一个自定义指令，让v-html插入内容后自动处理其中的KaTeX公式：

• 先注册全局自定义指令：

import Vue from 'vue'
import katex from 'katex'
import 'katex/dist/katex.min.css'

Vue.directive('render-katex', {
  inserted(el) {
    // 匹配行内公式：\( ... \)
    const inlineRegex = /\\\((.*?)\\\)/g
    // 匹配块级公式：$$ ... $$
    const blockRegex = /\$\$(.*?)\$\$/gs

    let processedHtml = el.innerHTML
    
    // 替换块级公式
    processedHtml = processedHtml.replace(blockRegex, (_, formula) => {
      const div = document.createElement('div')
      katex.render(formula, div, {
        displayMode: true,
        throwOnError: false
      })
      return div.innerHTML
    })
    
    // 替换行内公式
    processedHtml = processedHtml.replace(inlineRegex, (_, formula) => {
      const span = document.createElement('span')
      katex.render(formula, span, {
        displayMode: false,
        throwOnError: false
      })
      return span.innerHTML
    })

    el.innerHTML = processedHtml
  }
})

• 在组件中使用：

<template>
  <div v-render-katex v-html="staticBlogContent"></div>
</template>

<script>
export default {
  data() {
    return {
      staticBlogContent: ''
    }
  },
  mounted() {
    fetch('/static/your-blog-post.html')
      .then(res => res.text())
      .then(html => {
        this.staticBlogContent = html
      })
  }
}
</script>

3. 构建阶段预编译静态HTML #

如果你的博客内容都是静态的，还可以在项目构建前，用Node脚本把所有静态HTML里的公式预编译成KaTeX结构，这样Vue中直接用v-html插入就能显示：

举个简单的Node脚本示例：

const fs = require('fs')
const path = require('path')
const katex = require('katex')

const staticContentDir = './static/blog-posts'

// 遍历静态HTML文件
fs.readdirSync(staticContentDir).forEach(file => {
  if (path.extname(file) === '.html') {
    const filePath = path.join(staticContentDir, file)
    let content = fs.readFileSync(filePath, 'utf8')

    // 预编译块级公式
    content = content.replace(/\$\$(.*?)\$\$/gs, (_, formula) => {
      return katex.renderToString(formula, {
        displayMode: true,
        throwOnError: false
      })
    })

    // 预编译行内公式
    content = content.replace(/\\\((.*?)\\\)/g, (_, formula) => {
      return katex.renderToString(formula, {
        displayMode: false,
        throwOnError: false
      })
    })

    // 写回处理后的内容
    fs.writeFileSync(filePath, content)
  }
})

把这个脚本加到项目的package.json的scripts里，构建前执行一次，静态HTML里的公式就已经是渲染好的结构了。

内容的提问来源于stack exchange，提问作者Gareth Williams