vue.js - 如何在 Vuepress 中添加自定义块/容器？

Question

我在 VuePress 中建立了一个网站，发现它支持 markdown-它的 :::danger、:::tip、:::info 等来生成自定义容器。我想知道这是否可以以某种方式扩展，例如使用 :::card 或 :::example 或任何你想要的。

我找到了https://github.com/posva/markdown-it-custom-block，但不知道如何实现它。

这就是我的 config.js 中的内容

markdown: {
    // options for markdown-it-anchor
    anchor: { permalink: false },
    // options for markdown-it-toc
    toc: { includeLevel: [1, 2] },
    extendMarkdown: md => {
      md.use(require("markdown-it-container"), "card", {
        validate: function(params) {
          return params.trim().match(/^card\s+(.*)$/);
        },

        render: function(tokens, idx) {
          var m = tokens[idx].info.trim().match(/^card\s+(.*)$/);

          if (tokens[idx].nesting === 1) {
            // opening tag
            return (
              "<card><summary>" + md.utils.escapeHtml(m[1]) + "</summary>\n"
            );
          } else {
            // closing tag
            return "</card>\n";
          }
        }
      });
    }
  }

非常感谢任何建议！

Answer 1

您拥有的脚本将使用::: card，以使其工作更改

extendMarkdown: md => {...

至

config: md => {...

这花了我一段时间才弄清楚。这是一个版本冲突——这就是它目前不起作用的原因。