从零用VitePress搭建博客教程(2) –VitePress默认首页和头部导航、左侧导航配置
2. 从零用VitePress搭建博客教程(2) –VitePress默认首页和头部导航、左侧导航配置
接上一节: 从零用VitePress搭建博客教程(1) – VitePress的安装和运行
四、默认首页配置
配置首页之前,我们需要了解VitePress的默认主题,它是提供了首页布局,通过设置 layout 选项为页面 frontmatter 来选择页面布局。
layout 有 3 个布局选项doc, page, 和 home,详细如下:
- layout: doc:doc 是默认布局,它将整个 Markdown 内容样式化为“文档”外观。
- layout: page :选项 page 被视为“空白页”。 Markdown 仍然会被解析,并且所有 Markdown Extensions 与 doc 布局同样生效,但它不会获得任何默认样式。
- layout: home :选项 home 将生成模板化的“主页”。 在此布局中,您可以设置额外的选项,例如hero和features
- layout: false 无布局(纯空白页),解析 Markdown 但不会获得任何默认样式
1、首页配置
那么我们想要配置主页,选择layout: home 即可,它有hero和features两个部分的配置。
首先在index.md顶部,写入如下代码
---
layout: home
---
这样我们就开启了首页的布局配置,之后,我们就可以通过设置其他选项(如 hero 和 features)向主页添加几个不同的预模板 sections了。
1.1、Hero 部分
Hero 部分位于主页顶部,下面是如何配置 Hero 部分。注意点:要注意缩进。
---
layout: home
hero:
image:
src: /logo.png
alt: 前端吧
name: 前端吧
text: 关注web前端开发为主的博客网站和前端网址导航
tagline: 收集有一大批前端相关的技术网站,包括Vue、React等技术资料的生态网站,方便快速访问
---
name: 是文档标题
text: 是类似文档副标题内容
tagline: 文档标语
基本效果如下:
有一点VitePresshttps://vitepress.dev/的样子了,在后面我们还会跟大家说下怎么修改样式
1.2、按钮部分
按钮部分主要通过actions来配置的,如下:
---
layout: home
hero:
image:
src: /logo.png
alt: 前端吧
name: 前端吧
text: 关注web前端开发为主的博客网站和网址导航
tagline: 收集有一大批前端相关的技术网站,包括Vue、React等技术资料的生态网站,方便快速访问。
actions:
- theme: brand
text: 开始使用
link: /guide/start
- theme: alt
text: 前端吧官网
link: http://qianduan8.com/
---
-
theme 是按钮的主题,只有 brand 和 alt 两种,也就是分别对应目前网页中绿色和灰色按钮
-
text 是按钮的文字
-
link 是按钮的链接,点击后跳转,可以是网址URL,也可以是文档中的绝对路径,根路径是 docs,可以省略文档类型,默认是 md
比如上面的/guide/start,我们在 docs 下创建 guide 目录,再在 guide 目录下创建 start.md 文件,输入一些文字试试。
# 开始访问官网-测试内容
[前端吧官网](http://qianduan8.com/)
1.3、features 部分
features部分:简单说就是网站文档说明或者附加说明部分,具体看最终效果就知道了。
---
layout: home
hero:
image:
src: /logo.png
alt: 前端吧
name: 前端吧
text: 关注web前端开发为主的博客网站和网址导航
tagline: 收集有一大批前端相关的技术网站,包括Vue、React等技术资料的生态网站,方便快速访问。
actions:
- theme: brand
text: 开始使用
link: /guide/start
- theme: alt
text: 前端吧官网
link: http://qianduan8.com/
features:
- title: UnoCSS
details: Unocss是一种基于PurgeCSS的CSS框架,它可以帮助你更简洁、更高效地编写CSS。 Unocss的语法非常简单,它采用了类似于Tailwind CSS的类名方式。
link: https://unocss.dev/
linkText: 了解更多
- title: Vue3
details: 渐进式JavaScript框架.
link: https://cn.vuejs.org/
linkText: 了解更多
- title: vitePress
details: Vite & Vue Powered Static Site Generator.
link: https://vitepress.dev/
- title: Pinia
details: 符合直觉的Vue.js 状态管理库.
link: https://pinia.vuejs.org/zh/
- title: Vuex
details: 是一个专为 Vue.js 应用程序开发的状态管理模式.
link: https://vuex.vuejs.org/zh/
- title: Vue Router
details: Vue.js 的官方路由,为 Vue.js 提供富有表现力、可配置的、方便的路由.
link: https://router.vuejs.org/zh/
---
- icon 是每个 feature 盒子的图标
- title 是每个 feature 盒子的标题
- details 是每个 feature 盒子的详细描述内容
- link 是每个 feature 盒子的单击要素组件时链接,简单说就是链接地址,链接可以是内部链接,也可以是外部链接。
- linkText 是每个 feature 盒子的链接要显示在要素组件内部的文本,简单说就是链接文本。最好与 link 选项一起使用。
效果如下:
2、头部导航栏配置
我们可以通过配置文件config.js中的themeConfig选项定义主题配置,通过它我们可以配置网站的logo、主导航、标题、侧边导航等等。
参考文档:https://vitepress.qzxdp.cn/reference/default-theme-config.html
在 vitePress 中,一个 .md 文件就可以作为一张页面,并且,在根目录 docs 中.md可自动生成路由。
所以头部导航的配置,只需在config.js中的themeConfig中的nav配置即可,在这我们还可以把logo也配置上
// 头部导航
import topNav from "./topNav";
export default {
title: "前端吧",
description: "关注web前端开发为主的博客网站和前端网址大全",
// 打包目录
dest: "./dist",
head: [
// 添加图标
["link", { rel: "icon", href: "/favicon.ico" }],
],
// 主题配置
themeConfig: {
// 导航上的logo
logo: "/logo.png",
// 隐藏logo右边的标题
siteTitle: false,
// 头部导航栏配置
nav: topNav,
},
};
然后我们新建一个topNav/index.js文件
index.js代码如下
export default [
{
text: "前端网聚",
items: [
{ text: "前端综合", link: "/site/page" },
{ text: "HTML/CSS", link: "/site/html-css" },
{ text: "框架组件", link: "/site/framework" },
],
},
{
text: "技术笔记",
items: [
{ text: "VitePress", link: "/note/vitePress" },
{ text: "Vue", link: "/note/vue" },
{ text: "react", link: "/note/react" },
],
},
{
text: "关于我们",
link: "/about/page",
},
{ text: "更新日志", link: "" },
];
效果如下:
然后我们在创建site、note等相关文件夹和文件,即可
注意点:
我们在创建导航的时候,比如关于我们,假如我们创建的是about/index.md,这个时候导航就没有选中效果。
把index.md改为其他名字即可,比如page.md,此时才有选中效果的样式。
3、左侧导航栏配置
关于左侧导航栏的配置,在themeConfig中的sidebar配置即可
这里,我们新建一个sideBar文件夹,用于专门放左侧导航栏的js文件,比如我们新建一个vitePressBar.js(这里如何管理导航文件,根据自己需求处理)。
import { vitePressNote } from "./sideBar/vitePressBar";
export default {
// 主题配置
themeConfig: {
// 左侧导航栏
sidebar: {
"/note/vitePress": vitePressNote,
},
},
};
// VitePress技术笔记左侧导航栏
export const vitePressNote = [
{
text: "从零开始用VitePress搭建个人博客的笔记",
items: [
{
text: "1.VitePress的安装和首页配置",
link: "/note/vitePress/page1",
},
{
text: "2.VitePress默认主题修改和配置",
link: "/note/vitePress/page2",
},
{
text: "3.如何自定义布局和主题样式修改?",
link: "/note/vitePress/page3",
},
{
text: "4.如何自定义布局页面模板?",
link: "/note/vitePress/page4",
},
{
text: "5.第三方组件库的使用-组件库文档",
link: "/note/vitePress/page5",
},
],
},
];