https://github.com/markdown-it/markdown-it-container

插件开发时需要更新md文件, 否则可能因为缓存问题导致看不到新的效果

在md文件中通过使用标记在此处添加其他站点的博客链接, 如果没有显示no link或者空





官方的例子 var md = require('markdown-it')(); md.use(require('markdown-it-container'), 'spoiler', { validate: function(params) { return params.trim().match(/^spoiler\s+(.*)$/); }, render: function (tokens, idx) { var m = tokens[idx].info.trim().match(/^spoiler\s+(.*)$/); if (tokens[idx].nesting === 1) { // opening tag return '<details><summary>' + md.utils.escapeHtml(m[1]) + '</summary>\n'; } else { // closing tag return '</details>\n'; } } }); console.log(md.render('::: spoiler click me\n*content*\n:::\n')); // Output: // // <details><summary>click me</summary> // <p><em>content</em></p> // </details>



blogLink const path = require("path"); const { readSync } = require("fs"); const markdownItContainer = require("markdown-it-container"); const blogLinkMark = "blogLink"; module.exports = (options = {}, context) => { return { name: "blog-link", enhanceAppFiles: [path.resolve(__dirname, "enhanceAppFile.js")], extendMarkdown: (md) => { function render(tokens, idx) { console.log("idx", idx); const { nesting, info } = tokens[idx]; if (nesting === -1) { return "</BlogLink>\n"; } return "<BlogLink>"; } console.log("extendMarkdown"); md.use(markdownItContainer, blogLinkMark, { render, validate: function(params) { // 返回三个冒号后面的文字 // console.log("validate", params); return params.trim().match(`^${blogLinkMark}`); }, }); }, ready: (page) => { console.log("page", page); }, }; };
blogLink.vue <template> <div> <div v-for="v,k in items">{{ k }} ---> {{ v }}</div> <div v-if="Object.keys(items).length === 0">no link</div> </div> </template> <script> export default { data() { return { items: {} }; }, mounted() { this.items = this.$frontmatter._publish_blog_ || {}; console.log("mounted", this.items); console.log("mounted", Object.keys(this.items)); }, }; </script> <style></style>
enhanceAppFile import BlogLink from "./BlogLink.vue"; export default ({ Vue }) => { Vue.component("BlogLink", BlogLink); };
使用 plugins: [ "./.vuepress/plugins/blogLink.js", ]