自动向侧边栏添加新帖子 [英] 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屋!