サイドバーの項目が1つしかない場合に表示させない
Category:
Last Updated: 2021/12/13 12:40:54
VuePressでは、見出しとしてマークアップされた内容から自動的にサイドバーナビゲーションを生成する機能がある。
これはこれで便利ではあるのだが、ページ内の項目が1つしかないような場合は特にナビゲーションは必要ないため、見出しが1つしかない場合にサイドバーの項目を表示しないように修正する。
（ちなみにそもそもサイドバー自体が不要なページであればfrontmatter で sidebar にfalse を指定することでサイドバー自体を非表示にできる）
themes/layouts/Layout.vue を見ると computed に下記のように定義されている。
export default {
computed: {
sidebarItems () {
return resolveSidebarItems(
this.$page,
this.$page.regularPath,
this.$site,
this.$localePath
);
},
}
};
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
resolveSidebarItems メソッドは themes/util/index.js に定義されているが、どこから呼ばれているかわからないため、こちらの sidebarItems メソッドで手を入れることにする。
export default {
computed: {
sidebarItems () {
const items = resolveSidebarItems(
this.$page,
this.$page.regularPath,
this.$site,
this.$localePath
);
if (items.length > 1) return items;
if (items.length <= 0) return [];
if (! items[0].children || items[0].children.length <= 0) return [];
return items;
},
}
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
ちなみにこのようにするとサイドバーに表示する項目がない場合はサイドバー自体が表示されなくなる。
サイドバーの表示そのものは同じく computed に定義されている shouldShowSidebar メソッド内で定義されているが、当サイトではサイドバーにカテゴリ、タグ一覧を載せていることもあり、サイドバーは常に表示されるように下記のように設定している。
export default {
computed: {
shouldShowSidebar () {
return true;
},
}
};
1
2
3
4
5
6
7
2
3
4
5
6
7
ここは必要に応じて適宜調整して頂ければと思う。
Category:
Last Updated: 2021/12/13 12:40:54