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>