How to make vuepress dynamically create the side navigation?

Question

I'm trying to simplify the creation of my view press site so I don't have to add entries on the left side navigation manually.

So far I tried

    "vuepress-auto-sidebar": "^1.1.1"

But it renders the .git and node_modules folder as well. It also does not render the title.

Not only that it does not render a file called upload.md in the root of my project.

I am thinking I may just have to code it manually by doing some form of directory scanning (though I am not sure how to "watch" that, so that it updates when I add new files).

The way I worked around it so far is to configure theme-config to do this which removes the errant modules.

    sidebar: sidebar
      .getSidebar()
      .filter((v) => v.path !== "/node_modules/" && v.path !== "/.git/"),

Then add filters to it skips .git and node_modules folders. Following that I have to parse the Markdown to extract the title.

It helps but it shows the flaw of the plugin but I did find another plugin that did most of what I needed. — Archimedes Trajano
– Archimedes Trajano, Commented Mar 20, 2021 at 23:09

kissu · Accepted Answer · 2021-03-08 15:02:38Z

1

EDIT: usually, you do write your .md docs into a docs directory (not at the root of the project) and then launch it with this (from package.json)

vuepress dev docs --no-clear-screen --open

As for the sidebar, my first answer is below.

From this github issue: https://github.com/vuejs/vuepress/issues/613

You can see that this is not available out of the box. So, you could use some solutions given there and generate it kinda yourself but you could also try this npm package called vuepress-bar.

It is working great ! Beware tho, I had some incompatibility issues with it after upgrading to Nuxt 2.15.2, not sure if it's still the case but this way pretty annoying to not being able to run vuepress at all.

edited Mar 8, 2021 at 15:02

answered Mar 8, 2021 at 14:39

kissu

47.3k16 gold badges94 silver badges197 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Archimedes Trajano · Accepted Answer · 2021-03-20 23:10:40Z

0

I chose a different plugin vuepress-bar in the end but still had to implement the filter

const getConfig = require("vuepress-bar");
const { nav, sidebar } = getConfig();
module.exports = {
  themeConfig: {
    nav,
    sidebar: sidebar.filter(i => i.title !== "Node Modules"),
    smoothScroll: true
  }
};

answered Mar 20, 2021 at 23:10

Archimedes Trajano

43.3k29 gold badges223 silver badges373 bronze badges

Comments

Korak · Accepted Answer · 2024-06-13 12:44:59Z

This seems to be the perfect solution

//config.js
import path from "path";
import fs from "fs";

const docsDir = path.resolve(__dirname, "../");

const getSidebarItems = (dir) => {
  const items = [];
  const files = fs.readdirSync(dir, { withFileTypes: true });

  files.forEach((file) => {
    if (file.isDirectory() && file.name !== ".vuepress") {
      const folderName = file.name;
      const folderPath = path.join(dir, folderName);
      const children = fs
        .readdirSync(folderPath, { withFileTypes: true })
        .filter((child) => child.isFile() && child.name.endsWith(".md"))
        .map((child) => child.name.replace(".md", ""));

      if (children.length === 1 && children[0] === "README") {
        // Folder with just README.md
        items.push({
          text: folderName.replace(/-/g, " ").toUpperCase(),
          link: `/${folderName}/`,
        });
      } else {
        // Folder with other markdown files
        items.push({
          text: folderName.replace(/-/g, " ").toUpperCase(),
          link: `/${folderName}/`,
          prefix: `/${folderName}`,
          children: children.filter((child) => child !== "README"),
        });
      }
    }
  });

  return items;
};

const generateSidebar = () => {
  return getSidebarItems(docsDir);
};


//Then just replace the sidebar 
export default defineUserConfig({
  //....
  theme: defaultTheme({
    //....
    sidebar: generateSidebar(),
  }),
  //....
});

Collectives™ on Stack Overflow

How to make vuepress dynamically create the side navigation?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related