在 Nuxt.js 中从其他内容目录的 markdown 文件中的前端生成动态路由答案

【问题标题】：Generate dynamic routes in Nuxt.js from front matter in markdown files from other content directories在 Nuxt.js 中从其他内容目录的 markdown 文件中的前端生成动态路由
【发布时间】：2020-09-17 18:22:11
【问题描述】：

我在以下文件夹结构中有降价文件：

content
-- blog
-- guest
-- random

每个markdown文件都有一个前置tags数组。我想为我使用的每个标签创建一个/tags/_id.vue 动态路径，但我不确定如何编写generate 函数来执行此操作。

这是我为当前功能所做的事情：

const markdownPaths = [
    'blog',
    'guest',
    'random'
];
function dynamicMarkdownRoutes() {
    return [].concat(
        ...markdownPaths.map(mdPath => {
            return glob.sync(`${mdPath}/*.md`, { cwd: 'content' })
            .map(filepath => `${mdPath}/${path.basename(filepath, '.md')}`);
        })
    );
}
export default {
    // a bunch of other stuff
    ....

    generate: {
        routes: dynamicMarkdownRoutes()
    },
}

...从 Markdown 文件本身创建动态路由非常有用，但我不知道如何扩展此功能以包含来自前端的路由。

【问题讨论】：

标签： markdown nuxt.js dynamically-generated

【解决方案1】：

我不知道如何从 Nuxt 的 npm run generate 命令读取前文，因此我选择使用 gulp 进程从前文生成降价文件。现在npm run generate 命令可以从content/tags 目录中检测到新创建的markdown 文件，并为它们创建索引文件，就像在我的常规帖子中一样。

作为参考，这里是 gulp 过程：

const markdownToJSON  = require('gulp-markdown-to-json'),
      marked          = require('marked'),
      file            = require('gulp-file');

function meta(){
    return src('content/blog')
        .pipe(markdownToJSON(marked, function(d){
            if(d.tags){
                var tags = [];
                for(c in d.tags){
                    var e = d.tags[c].toLowerCase();
                    saveMD(e+'.md', 'content/tags');
                }
            }
        }));
}

function saveMD(src,destination){
    return file(src, '')
        .pipe(dest(destination));
}

【讨论】：