将 vue-katex 应用于从静态文件夹加载的内容

Question

我正在尝试使用 Vue 制作博客，正如出色的演示 here 中所述。我想在我的博客中包含一些数学公式和方程式，所以我想我会尝试使用vue-katex。当我将所有的 KaTeX HTML 直接放入我的 Vue 模板中时，vue-katex 完美地格式化了我的数学符号，但是要创建一个可用的博客 我需要将我的内容与我的模板分开（如演示中所示)。

我无法让 vue-katex 格式化静态文件夹中的 HTML 内容。这就是我想要帮助的。

---

设置

我为演示克隆了github repo。

我将 vue-katex 添加到package.json：

"vue-katex": "^0.1.2",

我将 KaTeX CSS 添加到 index.html:

<!-- KaTeX styles -->
<link 
  rel="stylesheet" 
  href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0-alpha2/katex.min.css" 
  integrity="sha384-exe4Ak6B0EoJI0ogGxjJ8rn+RN3ftPnEQrGwX59KTCl5ybGzvHGKjhPKk/KC3abb" 
  crossorigin="anonymous"
>

我将import语句添加到src/App.vue：

import Vue from 'vue'
import VueKatex from 'vue-katex'
Vue.use(VueKatex)

我在 BlogPost 模板中添加了一行简单的带有 KaTeX 的 HTML：

<p>Here's an equation in the actual Vue template: <div class="equation" v-katex="'X \\sim N(\\mu, \\sigma^2)'"></div></p>

---

正如我所说，这行得通 - 我在我的博客文章（URL http://localhost:8080/read/neque-libero-convallis-eget）中看到了格式化的数学符号：

当然，我需要为每篇博文使用不同的方程式。

所以我尝试将 KaTeX HTML 添加到第一篇博文的 JSON 中的“内容”字段：static/api/post/neque-libero-convallis-eget.json。我将"content" 行更改为：

"content": "Here's an equation in the static folder: <div class=\"equation\" v-katex=\"'X \\sim N(\\mu, \\sigma^2)'\"></div>",

此内容显示在页面上，但方程式未呈现。我看到了：（出现了文字，但没有显示方程式）

当我使用开发者工具检查页面上的 HTML 时，我看到：

您可以看到 vue-katex 已应用于我直接放入模板中的方程式：它已将我输入的 HTML 解析为具有所有数学符号的大量跨度，这些都完美显示。

但是，我添加到静态文件夹中"content" 的 KaTeX HTML 只是按照我输入的方式放置在页面上，因此不会在页面上显示为等式。我真的需要将我的博文内容保存在这个静态文件夹中——我不想为每篇博文创建一个不同的 .vue 文件，这样就失去了意义！

我的问题是：有没有办法在加载时手动将 vue-katex “应用”到我放置在静态文件夹中的 HTML 中？也许我可以在plugins/resource/index.js 文件中添加一些内容，因为它包含从静态文件夹加载数据的函数？

非常感谢您的帮助。

Answer 1

*免责声明：对于我将要解释的内容，我绝对不是专家/权威！

要记住的一点是，Vue 会读取您编写的模板，然后将它们替换为反应式组件。这意味着尽管您经常编写像 v-for、v-html 或在本例中为 v-katex 之类的 Vue 属性，但这些属性仅在安装应用程序或组件之前有用。

考虑到这一点，如果您的 Vue 应用程序通过 ajax 加载一些 html，它就无法使用这些 Vue 绑定重新呈现自己。

我有点忽略了您当前的设置并着手以另一种方式解决问题。

第 1 步：从服务器端重新格式化您的数据

我已将帖子放入一个数组中，每个帖子都包含模板（只是一个 html 字符串）和方程式分别作为一个数组。我在帖子中使用了[e1] 作为 katex 去向的占位符。

var postsFromServer = [{
  content : `<div>
    <h2>Crazy equation</h2>
    <p>Look here!</p>
    [e1]
  </div>`,
  equations : [
    {
      key : 'e1',
      value : "c = \\pm\\sqrt{a^2 + b^2}"
    }
  ]
}];

第 2 步：渲染帖子后，对其进行一些工作

我不只是使用v-html="post.content"，而是将html输出包装在一个方法中

<div id="app">
  <div v-for="post in posts" v-html="parsePostContent(post)">
  </div>
</div>

第三步：创建一个渲染所有katex的方法，然后替换post中的占位符

methods : {
  parsePostContent(post){
    // Loop through every equation that we have in our post from the server
    for(var e = 0; e < post.equations.length; e++){
      // Get the raw katex text
      var equation = post.equations[e].value;
      // Get the placeholder i.e. e1
      var position = post.equations[e].key;
      // Replace [e1] in the post content with the rendered katex
      post.content = post.content.replace("[" + position + "]", katex.renderToString(equation));
    }
    // Return
    return post.content;
  }
}

这是渲染 Katex 的整个设置： https://codepen.io/EightArmsHQ/pen/qxzEQP?editors=1010