config.jsを設定する
VuePressの設定ファイル config.js を設定します。
ヒント
VuePressのホット・リロード機能により、「ローカルサーバーを立ち上げる」の手順３でローカルサーバーを立ち上げた状態で、config.jsを修正すると自動で localhost:8080 に反映されます。ローカルサーバーを停止している場合は、yarn dev を実行したうえで、下記の手順を実行してください。
config.jsを作成する
- プロジェクトのルートフォルダに .vuepress フォルダを作る。
- .vuepress フォルダ内に config.js を作成する。
ヒント
Visual Studio Code上でフォルダやファイルの作成ができます。
注意
ドット「.」から始まるフォルダやファイルは、不可視ファイルと呼ばれ、OSの設定によってはエクスプローラーやファインダーからは見えないことがあります。ただしVisual Studio Codeの EXPLORER であれば標準設定のまま見ることができます。
config.jsを編集する
ヘッダーロゴを追加する
config.js に下記を追加する。
module.exports = {
themeConfig: {
// logoのイメージファイルを参照させます。
logo: 'https://www.science.co.jp/wordpress/wp-content/themes/humanscience/common/img/logo.jpg'
}
}
1
2
3
4
5
6
2
3
4
5
6
ヒント
上記の記入例では弊社ヒューマンサイエンスのロゴを参照しています。
インターネット上のリンクではなく、ローカルのイメージファイルを参照したい場合は、.vuepress/public フォルダを作成して、その中にイメージファイルを格納します。例えば .vuepress/public/hoge.png を参照したい場合は、config.js に logo: 'hoge.png' と記入します。
ナビゲーションメニューを追加する
config.js に下記を追加する。
module.exports = {
themeConfig: {
// logoのイメージファイルを参照させます。
logo: 'https://www.science.co.jp/wordpress/wp-content/themes/humanscience/common/img/logo.jpg',
// ナビゲーションにコンテンツに加える内容を追加させます。
nav: [
{ text: 'Home', link: '/' },
{ text: 'Get Started', link: '/contents/' }
]
}
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
ヒント
logo: xxxxの末尾にカンマ,を追加してください。- 任意でナゲーションにメニューを追加できます。
サイドメニューを追加する
config.js に下記を追加する。
module.exports = {
themeConfig: {
// logoのイメージファイルを参照させます。
logo: 'https://www.science.co.jp/wordpress/wp-content/themes/humanscience/common/img/logo.jpg',
// ナビゲーションにコンテンツに加える内容を追加させます。
nav: [
{ text: 'Home', link: '/' },
{ text: 'Get Started', link: '/contents/' }
],
// サイドバーを追加します。
sidebar: [
'/',
'/contents/'
],
// ヘディングタイトルを自動でサイドメニューに表示させます。
displayAllHeaders: true,
// h2までをサイドメニューに表示させます。
sidebarDepth: 2
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
ヒント
nav: [xxxx]の末尾にカンマ,を追加してください。- 任意でサイドバーにメニューを追加してください。
- 現時点ではまだ画面上の表示は変わりません。