Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
17
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

@jacoyutorius

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

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をお試しするに際してはこちらの記事が参考になりました。ありがとうございますー。

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
17
Help us understand the problem. What are the problem?