vuepress 插件 markdown 拓展

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", 
]

 

来源：oschina

链接：https://my.oschina.net/ahaoboy/blog/4336007