如何通过插件更改 VuePress 页面的内容

Posted 2023-02-22

【中文标题】如何通过插件更改 VuePress 页面的内容

【英文标题】：How to change content of VuePress page via Plugin

【发布时间】：2019-07-29 11:36:36

【问题描述】：

我正在尝试设置一个插件来更改开发服务器和生产版本上的 VuePress 降价文件的内容。根据文档，我应该能够使用_content 和_strippedContent 以及extendPageData 提供给我

以下代码是我在插件中设置的。

module.exports = (options = , context) => (
  extendPageData($page) 
    const 
      _filePath, // file's absolute path
      _computed, // access the client global computed mixins at build time, e.g _computed.$localePath.
      _content, // file's raw content string
      _strippedContent, // file's content string without frontmatter
      key, // page's unique hash key
      frontmatter, // page's frontmatter object
      regularPath, // current page's default link (follow the file hierarchy)
      path, // current page's real link (use regularPath when permalink does not exist)
     = $page

    $page._content = "replaced"
    $page._strippedContent = "replaced"
  
)

我能说的最好的就是这段代码应该可以工作，因为它更新了$page._content，但是它没有显示testing，而是显示原始内容。

我知道我正在进入这段代码，因为我可以从文件中console.log 并显示在控制台中。

我担心$page._content 是不可变的，想知道在dev 或build 期间是否有办法进行这种内容交换

【参考方案1】：

我认为您应该使用 extendMarkdown https://v1.vuepress.vuejs.org/config/#markdown-extendmarkdown 来做到这一点。

这样试试

// index.js

module.exports = () => (
  name: 'vuepress-plugin-foo-bar',
  extendMarkdown: md => 
    const render = md.render;

    md.render = (...args) => 
      // original content
      const html = render.call(md, ...args);

      return 'new content';
    ;
  ,
);

【讨论】：

虽然这看起来很公平，但不幸的是它不起作用。见格雷格的解释和回答

【参考方案2】：

这些页面对象中的信息在 Markdown 编译后和 Vue 组件渲染期间使用。内容更多供参考，修改不会有你想要的效果。

这也把我绊倒了。

所有的markdown文件都是为了信息而处理的，但是实际的编译是通过webpack发生的。大体流程是：

.md -> markdown-loader -> vue-loader -> ...

我的建议和我所做的是创建一个自定义的 webpack 加载器，以在内容通过 VuePress 降价加载器之前对其进行修改。我使用这种方法通过 Nunjucks 运行我的 markdown 文件，用于模板化 pre-markdown 编译。找出正确的方法后，这样做非常容易：) 这是一种可行的方法：

config.js：

chainWebpack: config => 
    config.module
      .rule('md')
      .test(/\.md$/)
      .use(path.resolve(__dirname, './nunjucks'))
        .loader(path.resolve(__dirname, './nunjucks'))
        .end()
,

然后一个简单的加载器可以看起来像这样（删节）：

module.exports = function(source)    
    const rendered = nunjucks.renderString(source, config)
    return rendered

【讨论】：

这很好解释和工作，所以它应该是接受的答案恕我直言。

【参考方案3】：

你可以修改你的 .vuepress/config.js。例如，如果你想在你所有的文件markdown中将'---my text---'替换为'MY TEXT

'（例如大写），你必须将下一个代码添加到

.vuepress/config.js

，进入我使用正则表达式的chainWebpack部分：

// File: .vuepress/config.js
module.exports = 
...,
chainWebpack: config => 
    // Each loader in the chain applies transformations to the processed resource:
    config.module
      .rule('md')
      .test(/\.md$/)
      .use("string-replace-loader")
      .loader("string-replace-loader")
      .options(
        multiple: [
            search: '---(.*?)---',
            replace: (match, p1, offset, string, groups) => `<div><p class="myclass">$p1.toUpperCase()</p></div>`,
            flags: 'ig'
          ,
          
            search: ' ... ',
            replace: (match, p1, p2, ..., pn, offset, string) => ` ... `,
            flags: 'ig'
          
        ],
      , )
      .end()

  ,
;

【讨论】：

我忘了说安装string-replace-loader是必须的：npm install --save-dev string-replace-loader