decap-cms 实现数学公式预览


decap-cms 免费,但是后端着实有些简陋。

不过 docs 里开放了 CMS.registerPreviewTemplate,我们可以自己实现一个。

方法:在 admin/index.html<body> 标签中加入以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script type="module">
import Markdown from 'https://esm.sh/react-markdown@9?bundle' // 替换内置 markdown
import remarkMath from 'https://esm.sh/[email protected]?bundle' // 数学公式
import rehypeMathjax from 'https://esm.sh/[email protected]?bundle' // 数学公式

import remarkGfm from 'https://esm.sh/[email protected]?bundle' // github 风格的 markdown 扩展
import rehypeRaw from 'https://esm.sh/[email protected]?bundle' // 内嵌 html 支持

var PostPreview = createClass({
render: function() {
if (this.props.widgetFor('body') != null) { // 修复新建文章出错
return Markdown({
children: this.props.widgetFor('body').props.value,
rehypePlugins: [rehypeMathjax, rehypeRaw],
remarkPlugins: [remarkMath, remarkGfm]
});
} else {
return '';
}
}
});
CMS.registerPreviewTemplate("posts", PostPreview); // posts是你的 collections 的 name 字段
</script>