Help us understand the problem. What is going on with this article?

VuePressでディレクトリ構成からサイドバーのメニューを自動設定する

More than 1 year has passed since last update.

VuePress、いいよね・・・

VuePress、ちょっと触ってみましたけどいい感じですね。
まだ機能はそこまで豊富じゃないですが
プログラマーとしてはデザイン部分に頭を悩ませずに良い感じに仕上がってくれてるのが有り難いです。
Jekyllの代替として使ってみようかと思っているところです。

サイドバーを手動で定義するのが面倒です

さて、現バージョンのVuePressにはサイドバーの機能が実装済みですが、
ここに表示するメニューはconfig.jsにて自力で定義してあげる必要があります。

module.exports = {
  themeConfig: {
    sidebar: [
      '/',
      '/page-a',
      ['/page-b', 'Explicit link text']
    ]
  }
}

VuePress - Default Theme Config

config.jsで良い感じに設定します

ファイルが増えてくるといちいちconfig.jsに追記するのは面倒なので、ディレクトリ構成を読んでdocs配下にあるmarkdownファイルを自動でメニューに設定してくれるようにconfig.jsに追記しました。

docs配下のディレクトリをメニューグループ、その下にいるmarkdownファイルをメニューとして登録します。
※複数階層のネストには対応していません。

.vuepress/config.js

const fs = require('fs');
const path = require('path');

var dirpath = "./docs"
var dirs = fs.readdirSync(dirpath).filter((f) => {
  return fs.existsSync(dirpath + "/" + f) && fs.statSync(dirpath + "/" + f).isDirectory()
})
var sidebarArray = ["/"].concat(dirs.map((dir) => {
  return {
    title: dir,
    collapsable: true,
    children: fs.readdirSync(dirpath + "/" + dir).map((childDir) => {
      return dirpath + "/" + dir + "/" + childDir
    })
  }
}))

module.exports = {
  title: 'My Vuepress',
  description: 'Just playing around',
  config: (md) => {
    md.options.linkify = true
  },
  themeConfig: {
    sidebar: sidebarArray
  }
}

このような構成の場合、

$ tree
.
├── README.md
├── docs
│   ├── README.md
│   ├── ruby
│   │   └── ruby_sample.md
│   └── server
│       ├── aws_setting.md
│       └── install_manual.md

こんな感じになります。

fr_notes___README.jpg

あまり綺麗に書けていませんが、とりあえず目的は達成できました。本体にもこういう機能が欲しいですね。

参考

VuePressをお試しするに際してはこちらの記事が参考になりました。ありがとうございますー。

https://qiita.com/dojineko/items/aae7e6d13479e08d49fd#%E8%89%B2%E5%A4%89%E6%9B%B4-%E3%83%86%E3%83%BC%E3%83%9E%E3%83%AA%E3%83%B3%E3%82%B0

jacoyutorius
Software/Server developer at AIRS. Ruby / AWS / Vue
http://jacoyutorius.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした