主页
WARNING
切换模式时,请先将根目录下的 index.md
page1.md
page2.md
等 Markdown 文件删除,再次运行项目
主题提供了两种主页模式,可以将文章列表作为主页(参考演示站1),也可以将引导页作为主页(参考演示站2),可以通过 usePosts
方法的 homepage
参数来切换
ts
// .vitepress/config.ts
const { posts, rewrites } = await usePosts({ homepage: true });
文章列表
当参数设置为 true 时(默认为 true,可以省略),从 posts
文件夹中生成的文章列表将命名为 index.md
page-2.md
page-3.md
,与下一种模式相比,直接省去了引导页,将 page-1.md
命名为 index.md
,nav 配置如下
js
// .vitepress/config.ts
export default defineConfigWithTheme<ThemeConfig>({
themeConfig: {
nav: [
{ text: 'Home', link: '/' }
]
}
}
引导页
当参数设置为 false 时,从 posts
文件夹中生成的文章列表将命名为 page-1.md
page-2.md
page-3.md
,同时会生成引导页命名为 index.md
,通过修改 Home 组件的 props 来修改引导页中的内容
- imgUrl: 主页图片
- title: 主页标题
- desc: 主页描述
- links: 对象数组,url 为链接,text 为按钮文字
markdown
---
layout: page
---
<Home imgUrl="/profile.png" title="只抄" desc="Less is more." :links="[{ url: 'https://github.com/izhichao/vitepress-theme-minimalism', text: 'Github ->' }]" />
当引导页作为主页时,建议将 Posts 目录单独添加到 nav 中,可以进行如下配置
js
// .vitepress/config.ts
export default defineConfigWithTheme<ThemeConfig>({
themeConfig: {
nav: [
{ text: 'Home', link: '/' },
{ text: 'Posts', link: '/page-1' }
]
}
}
预览: