菜单设置
大约 2 分钟使用指南配置页面配置使用指南
Navbar设置
项目现在的navbar的设置如下:
import { navbar } from "vuepress-theme-hope";
export default navbar([
{
text: "我的项目",
icon: "lightbulb",
children: [
{
text: "vuepress theme hope使用说明",
icon: "book",
link: "/vuepress-theme-hope/",
},
],
},
{
text: "给我买杯咖啡",
link: "https://www.itomtan.com/",
target: "_blank",
},
{
text: "关于我",
icon: "book",
link: "https://www.itomtan.com/",
target: "_blank",
},
]);
Sidebar设置
sidebar的配置原来是这样的。
import { sidebar } from "vuepress-theme-hope";
export default sidebar({
"/": [
"",
{
text: "案例",
icon: "laptop-code",
prefix: "demo/",
link: "demo/",
children: "structure",
},
{
text: "文档",
icon: "book",
prefix: "guide/",
children: "structure",
},
"slides",
],
});
但在使用的过程中, 我们不希望大部分页面都展示所有的列表。
需要调整一下, 就是把里边子元素，全部抽出来，全部为平级的，也就是拍平了, 大概是这样的。
import { sidebar } from "vuepress-theme-hope";
export default sidebar({
"/demo/": [
{
text: "案例",
icon: "laptop-code",
prefix: "",
children: "structure",
},
],
"/guide/": [
{
text: "文档",
icon: "book",
prefix: "",
children: "structure",
},
],
});
看一下效果。
在使用过程中, 发现栏目的没有高亮，，就是没有选择的意思。
这个需要在每个节点加link的这个属性，值是index.html
{
...
link: "index.html"
...
}
看一下效果
