自动向侧边栏添加新帖子 [英] Automatically add new posts to the Sidebar

问题描述

我正在使用 VuePress 和

I'm using VuePress and NetlifyCMS as Content Management.

我有3个馆藏(设计，前端和后端)，其中包含不确定数量的页面.这些页面是通过 NetlifyCMS仪表板创建的，并被添加到已定义的文件夹中.

I have 3 collections (design, front-end and back-end) which contains an indefinite number of pages. Those pages are created through the NetlifyCMS dashboard and are added to the defined folder.

• 新设计页面将添加到 design 文件夹中.
• 新的前端页面被添加到前端文件夹中.
• [...]

• New design pages are added to the design folder.
• New front-end pages are added to the front-end folder.
• [...]

这很好，但是我遇到了问题.
由于我的新页面未在侧边栏配置中定义，因此无法从侧边栏界面使用.如何在保持以下相同的边栏格式的同时做到这一点?

This works fine but I'm facing an issue.
Since my new pages are not defined in the sidebar config, they are not available from the sidebar interface. How could I do that while keeping the same sidebar format as below?

config.js

[...],
sidebar: {
  '/design/': [{
    title: 'Design',
    children: [
      '',
      'foo 1',
      'foo 2'
    ]
  }],
  '/front-end/': [{
    title: 'Front-end',
    children: [
      '',
      'bar 1',
      'bar 2'
    ]
  }],
  '/back-end/': [{
    title: 'Back-end',
    children: [
      '',
      'baz 1',
      'baz 2'
    ]
  }]
},
[...]

---

config.yml

[...],
collections:
  - name: "design"
    label: "Design"
    folder: "docs/design"
    create: true
    slug: "{{slug}}"
    fields:
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Body", name: "body", widget: "markdown"}
  - name: "front-end"
    label: "Front-end"
    folder: "docs/front-end"
    create: true
    slug: "{{slug}}"
    fields:
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Body", name: "body", widget: "markdown"}
  - name: "back-end"
    label: "Back-end"
    folder: "docs/back-end"
    create: true
    slug: "{{slug}}"
    fields:
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Body", name: "body", widget: "markdown"}

推荐答案

一种方法是在构建时将文件名导入配置中.

One way would be to import your filenames into the config at build.

将脚本添加到您的docs/.vuepress文件夹:

Add a script to your docs/.vuepress folder:

docs/.vuepress/childscript.js

var fs = require('fs');

module.exports = function(path) {
  var files = fs.readdirSync(path);
  var list = [""];
  for (var i in files) {
    var filename = files[i].split('.').slice(0, -1).join('.');
    if (filename.toLowerCase() !=="readme") list.push(filename);
  }
  console.log(`${path}: `, list);
  return list;
}

然后更改您的docs/.vuepress/config.js

var getChildren = require('./childscript');

[...],
sidebar: {
  '/design/': [{
    title: 'Design',
    children: getChildren('./docs/design/')
  }],
  '/front-end/': [{
    title: 'Front-end',
    children: getChildren('./docs/front-end/')
  }],
  '/back-end/': [{
    title: 'Back-end',
    children: getChildren('./docs/back-end/')
  }]
},
[...]

注意: 这里的警告是在读取目录期间文件名的排序顺序.

NOTE: The caveat here is the sort order of the filenames during the reading of the directory.

这篇关于自动向侧边栏添加新帖子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！