2

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

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

设置

我为演示克隆了github 存储库。

我将 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"
>

我将导入语句添加到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文件中添加一些东西，因为它包含从静态文件夹加载数据的函数？

非常感谢您的帮助。

4

1 回答 1

0

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

要记住的一件事是 Vue 会读取您编写的模板，然后将它们替换为响应式组件。这意味着尽管您经常编写 Vue 属性v-for，v-html或者在这种情况下，v-katex这些属性仅在安装应用程序或组件之前才有用。

考虑到这一点，如果您有一个 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

于 2018-03-05T19:07:55.493 回答