自动将新帖子添加到侧边栏

Posted 2023-02-22

【中文标题】自动将新帖子添加到侧边栏

【英文标题】：Automatically add new posts to the Sidebar

【发布时间】：2019-04-15 04:04:32

【问题描述】：

我使用VuePress 和NetlifyCMS 作为内容管理。

我有 3 个集合（design、front-end 和 back-end），其中包含无限数量的页面。这些页面通过 NetlifyCMS 仪表板 创建并添加到定义的文件夹中。

新的设计页面被添加到

design

文件夹中。 新的前端页面被添加到

front-end

文件夹中。 [...]

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

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"

【参考方案1】：

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

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

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/')
  ]
,
[...]

注意：这里需要注意的是在读取目录期间文件名的排序顺序。

【讨论】：

感谢您的回答。您知道是否有任何方法可以处理发布日期订单？

答案对您不起作用吗？就日期顺序而言，集合中的 changing your slug 到 year-month-day-slug 可能会起作用。

否则，您必须将发布日期（或排序值）存储在 frontmatter 中，并在每个文件上执行读取文件，并使用降价工具转换内容并根据值进行排序。

是的，这会工作，但蛞蝓会太长。我正在考虑一种方法来创建一个名为 order 的 number field，然后在 slug 模板之前注入它的值。

嗨@talves，您是仅使用 NetlifyCMS 还是它也在 Netlify 上部署？如果你不介意，你能帮我解决这个问题吗：***.com/questions/55564958/…