vuepress-theme-reco 2.0 导航栏
时间: 2023-05-28 22:03:27 浏览: 89
TIES-2.0:代码为
vuepress-theme-reco 2.0 的导航栏可以通过配置文件进行设置。以下是一个简单的例子:
```js
// .vuepress/config.js
module.exports = {
themeConfig: {
nav: [
{ text: 'Home', link: '/' },
{ text: 'Guide', link: '/guide/' },
{ text: 'External', link: 'https://google.com' },
]
}
}
```
上述代码中,`nav` 是一个数组,其中每个元素都代表导航栏中的一个链接。每个链接可以包含 `text` 和 `link` 两个属性,分别表示链接的文本和 URL。
此外,`nav` 数组还可以包含子数组,用于创建下拉菜单:
```js
// .vuepress/config.js
module.exports = {
themeConfig: {
nav: [
{ text: 'Home', link: '/' },
{
text: 'Guide',
items: [
{ text: 'Getting Started', link: '/guide/' },
{ text: 'Advanced', link: '/guide/advanced/' }
]
},
{ text: 'External', link: 'https://google.com' },
]
}
}
```
上述代码中,`items` 是一个包含子链接的数组,用于创建下拉菜单。每个子链接可以包含 `text` 和 `link` 两个属性,同样表示链接的文本和 URL。
阅读全文