苏喵分享vuepress-theme-hope从编写到部署的整个过程
经过了至少一周的时间, 终于成功部署了这个属于自己的网站, 这里打算把使用vuepress-theme-hope编写到部署的整个过程记录分享一下
注意: 本喵电脑为Windows, 因此不清楚其他操作系统如何操作
1. 下载, 准备及安装
vuepress-theme-hope的官方网站为点击跳转, 在此页面, 我们点击快速上手/创建项目即可查询对应命令.
1.1 包管理器
这里推荐只用pnpm作为包管理器, 可以使用Node.js安装程序安装包管理器npm和Node.js, 之后使用npm来安装pnpm.
此外, 为了方便的管理node版本, 推荐使用nvm(Node.js version manager)进行安装和管理. nvm安装非常简单, 直接在Github Releases下载.exe文件即可.
nvm: https://github.com/nvm-sh/nvm/releases
nvm use 22则nvm会自动下载并使用22.*.*版本, 此外, 可以使用nvm查看全部指令, 使用nvm list查看已安装版本.
之后, 使用如下指令安装pnpm.
npm install -g pnpm@latest-10安装后, 准备一个文件夹并cd到此处, 使用如下指令可在此处创建一个新文件夹并在这个新文件夹中创建项目模板.
pnpm create vuepress-theme-hope <new floder>1.2 初始化
输入指令后, 通过上下键和回车键依次选择/设置语言: 简体中文, 包管理器: pnpm, 打包器: vite, 应用名称, 应用描述, 版本号, 协议, 项目类型: blog, 多语言: n, 是否初始化 Git 仓库: y, 是否需要一个自动部署文档到 GitHub Pages 的工作流: y.
如果出现如下字样, 则证明初始化成功, 按y启动Demo服务器.
安装依赖...
这可能需要数分钟，请耐心等待.
我们无法正确输出子进程的进度条，所以进程可能会看似未响应
Packages: +379
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 441, reused 379, downloaded 0, added 379, done
devDependencies:
+ @vuepress/bundler-vite 2.0.0-rc.20
+ sass-embedded 1.85.1
+ vue 3.5.13
+ vuepress 2.0.0-rc.20
+ vuepress-theme-hope 2.0.0-rc.73
╭ Warning ───────────────────────────────────────────────────────────────────────────────────╮
│ │
│ Ignored build scripts: esbuild. │
│ Run "pnpm approve-builds" to pick which dependencies should be allowed to run scripts. │
│ │
╰────────────────────────────────────────────────────────────────────────────────────────────╯
Done in 12.5s using pnpm v10.4.1
模板已成功生成!
? 是否想要现在启动 Demo 查看? (Y/n)随后会出现若干网址, 直接浏览器访问即可, 在终端按Ctrl - C可关闭服务器.
服务器关闭后, 可输入如下命令重新部署服务器:
pnpm vuepress-vite dev src若初始化时选用的其他配置, 可打开package.json文件, 有如下字样:
"scripts": {
"docs:build": "vuepress-vite build src",
"docs:clean-dev": "vuepress-vite dev src --clean-cache",
"docs:dev": "vuepress-vite dev src",
"docs:update-package": "pnpm dlx vp-update"
},该部分列出来服务器使用命令, 请参考vuepress-theme-hope官方文档/快速上手/项目命令
1.3 禁用全局配置
关闭后, 如果直接删除文件夹, 或将文件悉数移动到新文件夹, 可能就无法再次部署/初始化, 因为pnpm配置文件是全局的.
在文件夹中新建名为.npmrc的文件, 输入如下内容配置镜像源为淘宝的镜像源.
registry=https://registry.npmmirror.com/之后删除node_modules文件夹, 输入如下命令重新安装.
pnpm install此时应该可以成功初始化.
1.4 自定义初始化
若已有项目文件夹, 可先安装1.2的方法进行初始化, 然后, 在所需的文件夹中添加.npmrc文件并按1.3配置.
若已有.git文件夹, 建议创建一个新分支, 然后删除所有文件(.git文件夹或.idea, .vscode文件夹除外), 如下:
git branch -a
gir branch <new branch>
git branch checkout <new branch>手动删除全部文件(.git文件夹或.idea, .vscode文件夹除外), 并添加.npmrc文件.
git add .
git commit -m "<注释>"然后在其他位置初始化一个项目, 复制项目文件夹下除node_module文件夹和.git文件夹外的所有文件(包括.github文件夹 , pnpm-lock.yaml, .gitignore, src文件夹, package.json, tsconfig.json), 之后cd到对应文件夹, 输入如下命令进行安装:
pnpm install之后按照1.2的方法部署服务器.
若服务器可以成功运行, 关闭服务器, 将所以文件添加到Git中.
git add .
git commit -m "<注释>"2. 文件结构
上述配置新建的项目文件结构如下:
<project floder>
├── .git
├── .github/workflows/deploy-docs.yml
├── node_module
├── src
| ├── .vuepress
| | ├── .cache
| | ├── .temp
| | ├── public
| | ├── styles
| | ├── config.ts
| | ├── navbar.ts
| | ├── sidebar.ts
| | └── theme.ts
| ├── demo
| | ├── disable.md
| | ├── encrypt.md
| | ├── layout.md
| | ├── markdown.md
| | ├── page.md
| | └── README.md
| ├── posts
| | ├── apple
| | | ├── 1.md
| | | ├── 2.md
| | | ├── 3.md
| | | └── 4.md
| | ├── banana
| | | ├── 1.md
| | | ├── 2.md
| | | ├── 3.md
| | | └── 4.md
| | ├── cherry.md
| | ├── dragonfruit.md
| | ├── strawberry.md
| | └── tomato.md
| ├── instro.md
| └── README.md
├── .npmrc
├── .gitignore
├── package.json
├── pnpm-lock.yaml
└── tsconfig.json下面我们一一介绍一下各个文件(文件夹)的作用.
2.1 根目录文件
.git文件夹和.gitignore文件无需多言,.github文件夹为用于自动配置Github Action工作流的yml文件, 这些无需用户操作..npmrc文件为用户创建, 初始化时并不存在, 上一节已做讲解.node_module文件夹是下载的资源, 也就是vue部分, 这个也无需用户管理, 它不会被添加到Git中, 删除后也可以使用pnpm重新下载.src文件夹稍后讲解, 这个是我们这个blog所有自定义部分的存储位置.package.json文件是包配置文件, 用于指导pnpm下载安装node_module, 或者更新插件/配置, 里面内容大致如下:{ "name": "demo", "description": "演示", "version": "2.0.0", "license": "MIT", "type": "module", "scripts": { "docs:build": "vuepress-vite build src", "docs:clean-dev": "vuepress-vite dev src --clean-cache", "docs:dev": "vuepress-vite dev src", "docs:update-package": "pnpm dlx vp-update" }, "devDependencies": { "@vuepress/bundler-vite": "2.0.0-rc.20", "sass-embedded": "^1.85.0", "vue": "^3.5.13", "vuepress": "2.0.0-rc.20", "vuepress-theme-hope": "2.0.0-rc.73" } }注意到其中的
name,description,version,license都与创建是填写的相同, 当然也可以自己修改, 之后使用pnpm install重新安装即可其中的
scripts部分讲解了该项目对应命令, 分别是构建项目,删除缓存并启动服务器,启动服务器,更新包, 使用时, 直接在前面添加pnpm关键词即可, 即:pnpm vuepress-vite dev src该命令用于启动服务器, 如下提示意为启动成功.
✔ Initializing and preparing data - done in 259ms vite v6.1.1 dev server running at: ➜ Local: http://localhost:8080/ ➜ Network: http://**.**.**.**:****/devDependencies部分存储了该项目的相关依赖及版本, 类似Rust中Cargo.toml的[dependencies], 当node_module文件丢失时,pnpm会根据这部分信息下载对应依赖.tsconfig.json我也不知道是干什么的, 能跑就别碰它,pnpm-lock.yaml也是.
2.2 src文件
src文件夹中, 每个MarkDown文件都对应着一个Blog中的一个页面(.vuepress文件夹中所有文件除外), 因此这里只讲解除.vuepress文件夹外的文件.
README.md是一个特殊的名字, 因此theme-hopee把它作为每个页面都入口, 根目录下的README.md自然就是整个网站的入口, 类似index.html.README.md其中的内容我们稍后再讲, 总之, 它作为整个网站的入口, 应该有主页的样子,theme-hope中预设了主页(博客主页)布局, 我们稍后再讲.intro.md文件就是普通的页面文件了, 这里我们可以随便修改名称(sidebar和navbar中也要对应修改), 根目录下的其他md文件会被处理成直接在根目录的页面, 即https://***.***/***.html.这里的
intro.md为档案首页, 默认是江户川柯南, 可自行修改, 稍后讲解.dome文件夹和post文件夹是更深一级的文件夹, 其中的文件对应个更深一级的文件, 例如其中的README.md对应的是https://***.**/demo/; 其中的普通md文件对应的是https://***.**/demo/***.html.
2.3 src/.vuepress文件
这里是除md外的页面配置文件.
.cache文件夹和.temp文件夹无需多言, 它们都不在Git中.public文件夹存储着整个页面都资源文件, 例如, 若public文件夹下有image/icon.png, 则md中直接引用image/icon.png即可调用该图片.styles文件夹是可自定义的样式文件夹, 其中含有index.scss和config.scss, 如有自定义需求, 直接在index.scss中修改即可.
下面是几个ts文件的作用
config.ts是网页的配置信息, 包括语言,标题和描述, 它们会出现在网页的<title>中.import { defineUserConfig } from "vuepress"; import theme from "./theme.js"; export default defineUserConfig({ base: "/", lang: "zh-CN", title: "博客演示", description: "vuepress-theme-hope 的博客演示", theme, // 和 PWA 一起启用 // shouldPrefetch: false, });其中
title和description自行修改, 其他配置项不要动.navbar.ts顾名思义为网页顶部的导航栏(手机端为右侧的按钮), 默认的navbar.ts如下所示:import { navbar } from "vuepress-theme-hope"; export default navbar([ "/", "/demo/", { text: "博文", icon: "pen-to-square", prefix: "/posts/", children: [ { text: "苹果", icon: "pen-to-square", prefix: "apple/", children: [ { text: "苹果1", icon: "pen-to-square", link: "1" }, { text: "苹果2", icon: "pen-to-square", link: "2" }, "3", "4", ], }, { text: "香蕉", icon: "pen-to-square", prefix: "banana/", children: [ { text: "香蕉 1", icon: "pen-to-square", link: "1", }, { text: "香蕉 2", icon: "pen-to-square", link: "2", }, "3", "4", ], }, { text: "樱桃", icon: "pen-to-square", link: "cherry" }, { text: "火龙果", icon: "pen-to-square", link: "dragonfruit" }, "tomato", "strawberry", ], }, { text: "V2 文档", icon: "book", link: "https://theme-hope.vuejs.press/zh/", }, ]);其中
export default navbar()内部传入一个数组, 也就是navbar中显示的各个项目, 每个元素对应着导航栏的一个按钮."/": 根目录, 即README.md"/demo/": demo文件夹目录, 即demo/README.md{}: 对象, 具体解释如下:
{ text: "博文", icon: "pen-to-square", prefix: "/posts/", children: [ { text: "苹果", icon: "pen-to-square", prefix: "apple/", children: [ { text: "苹果1", icon: "pen-to-square", link: "1" }, { text: "苹果2", icon: "pen-to-square", link: "2" }, "3", "4", ], }, ], },text:navbar栏显示文字.icon:navbar栏显示图标, 具体参考Vuepress-theme-hope官方文档指南/页面/图标支持prefix: 为该目录对应位置,/posts/即/posts/README.mdchildren: 可选, 如有, 则该按钮变为下拉按钮, 可选择其中的子页面.children中配置和export default navbar()配置一模一样, 也是传入一个数组, 该数组元素可以是路径("/"或"/demo/"), 也可以是结构("{}", 内容和上述完全一样), 结构也支持继续进行children嵌套.如果不使用
prefix和children表明 位置, 还可以直接使用link链接到一个网络位置.
sidebar.ts文件是网页的侧边栏, 咱网页的左边, 作为文档的导航, 默认的sidebar.ts如下所示:import { sidebar } from "vuepress-theme-hope"; export default sidebar({ "/": [ "", { text: "如何使用", icon: "laptop-code", prefix: "demo/", link: "demo/", children: "structure", }, { text: "文章", icon: "book", prefix: "posts/", children: "structure", }, "intro", { text: "幻灯片", icon: "person-chalkboard", link: "https://ecosystem.vuejs.press/zh/plugins/markdown/revealjs/demo.html", }, ], });注意到
sidebar中向export default sidebar()传入一个对象参数, 默认为"/": [], 在这个数组中, 可以填下自定义的内容, 形式和navbar并无太大区别.注意, 若设置
prefix: "posts/",children: "structure", 则sidebar中会自动显示所有子文件, 若添加collapsible: true参数, 则该按钮可折叠.同理也可以直接使用
link链接一个网络位置.theme.ts是整个项目的配置文件, 其中内置了大量可配置内容, 详细参考Vuepress-theme-hope官方文档.
3. 主页
3.1 博客主页
进入网页, 第一个页面就是主页(README.md). 该页面作为网页的门户, 一定要认知编写. 所幸的是, hope大佬给我们预制了一个很漂亮的主页模板, 默认的README.md便是一个成型的主页.
---
home: true
layout: BlogHome
icon: house
title: 博客主页
heroImage: https://theme-hope-assets.vuejs.press/logo.svg
heroText: 你博客的名称
heroFullScreen: true
tagline: 你可以在这里放置你的口号与标语
projects:
- icon: folder-open
name: 项目名称
desc: 项目详细描述
link: https://你的项目链接
- icon: link
name: 链接名称
desc: 链接详细描述
link: https://链接地址
- icon: book
name: 书籍名称
desc: 书籍详细描述
link: https://你的书籍链接
- icon: newspaper
name: 文章名称
desc: 文章详细描述
link: https://你的文章链接
- icon: user-group
name: 伙伴名称
desc: 伙伴详细介绍
link: https://你的伙伴链接
- icon: https://theme-hope-assets.vuejs.press/logo.svg
name: 自定义项目
desc: 自定义详细介绍
link: https://你的自定义链接
footer: 自定义你的页脚文字
---
这是一个博客主页的案例。
要使用此布局，你应该在页面前端设置 `layout: BlogHome` 和 `home: true`。
相关配置文档请见 [博客主页](https://theme-hope.vuejs.press/zh/guide/blog/home.html)。Frontmatter是每个md文件开头的一段参数文本, 该部分文本会使用预设的页面, 使用该部分的参数进行配置.
Frontmatter有部分为所有文件通用的参数, 当然也有每个页面(主要指预设页面)特有的参数.
home: true和layout: blogHome为博客主页的标识, 要使用该页面预设, 需在文档顶部添加该字样.icon: home是该页面的图标, 更多图标请参考Vuepress-theme-hope官方文档指南/页面/图标支持title: 博客主页为该页面在navbar和sidebar中显示的标题以及在页面标签页显示的子标题.heroText: 你博客的名称,heroImage: ***和heroFullScreen: true分别为页面中间的标题, 页面背景图片和背景图片是否全屏.页面背景图片可以传入
url, 也可以传入位置, 位置只能以.vuepress/public文件夹为基准.tagline可以展示一条你的标语, 在主页头像下方.主页头像在这里无法修改, 相关数据存储在
.vuepress/theme.ts中, 该文件上面并未详细讲解, 但我认为你看得懂.
- 接下来有一个
projects栏目, 下设若干小项目, 这个是也是主页预设的组件, 显示在主页一整面屏下方左侧, 博客上面.
每个小组件都有4个参数, 这里无需过多讲解.
projects:
- icon: heart
name: 认识一下
desc: 这里是Twisuki~
link: intro.md
- icon: pen-to-square
name: 苏喵笔记
desc: 随笔, 感想, 生活中的一点..小事
link: /notes/
- icon: gears
name: 苏の百宝箱
desc: 各种各样奇奇怪怪的小工具(?)
link: /kits/
- icon: bxl:github
name: Github Profile
desc: Github主页, 求fo喵~
link: https://github.com/Twisuki
- icon: user-group
name: 苏喵的好朋友
desc: 一起贴贴的小猫娘们~
link: friend.md
- icon: https://theme-hope-assets.vuejs.press/logo.svg
name: 技术支持
desc: vuepress-theme-hope官方主页
link: https://theme-hope.vuejs.press/zh/这是本喵博客首页下面的组件.
footer定义了页脚内容. 这里可以直接删去, 使用默认页脚. 默认页脚同样存储在.vuepress/theme.ts中.下面的
md文件就是普通的MarkDown语法, 在这里的md将会渲染在网页最下面, 使用theme-hope内置的渲染样式进行渲染.主页一整面屏下方右侧是
博主信息, 它们也存储在.vuepress/theme.ts中.主页下面是博客缩略展示, 整个文档的文章(配置
article: false的除外)都会展示在这里.
3.2 档案主页
档案主页为在上述初始化项目中并没有自动生成, 如果初始化时项目类型: blog选为docs即可生成主页和档案主页两个预设页面.
Vuepress-theme-hope官方案例/档案主页
咱自己的档案主页配置如下
---
containerClass: home
home: true
portfolio: true
icon: heart
sidebar: false
avatar: avatar.png
welcome: 你好, 这里是
name: Twisuki
titles:
- Hi, this is Twisuki~
- Welcome to my page meow~
---
# 介绍 intro要使用档案主页,
Frontmatter中需存在home: true和portfolio: true参数.icon参数上面已经进行讲解.档案主页特殊
Frontmatter参数有avatar: ***,welcome: ***,name: ***和titles: ***.
其中avatar是一个非常大的图片, 展示在屏幕左侧.
``welcome: ***, name: ***和titles: ***为展示在右侧的三行文本, 其中title可以接入多个<li>`参数, 页面会滚动展示这些文本.
sidebar: false为通用Frontmatter参数, 可隐藏sidebar, 此外,navbar: true/false同理, 这样的参数在初始化文档中src/demo/disable.md中已经说明.右侧三行文本下方是各个账号的信息, 无法在此处修改, 它们存储在
.vuepress/theme.ts中.Frontmatter下方可以使用普通的MarkDown语法进行其他内容的编写.
其中一级标题#的内容会被处理成navbar或者sidebar位置的标题.
4. 页面与侧边栏, 导航栏
4.1 页面
普通页面为一个MarkDown文档, 由Frontmatter部分和md部分两部分构成. 但个人认为中间特殊组件也可以算作一部分.
Frontmatter
这是初始化项目中src/.vuepresss/demo/page.md的Frontmatter部分:
---
# 这是文章的标题
title: 页面配置
# 你可以自定义封面图片
cover: /assets/images/cover1.jpg
# 这是页面的图标
icon: file
# 这是侧边栏的顺序
order: 3
# 设置作者
author: Ms.Hope
# 设置写作时间
date: 2020-01-01
# 一个页面可以有多个分类
category:
- 使用指南
# 一个页面可以有多个标签
tag:
- 页面配置
- 使用指南
# 此页面会在文章列表置顶
sticky: true
# 此页面会出现在星标文章中
star: true
# 你可以自定义页脚
footer: 这是测试显示的页脚
# 你可以自定义版权信息
copyright: 无版权
---其中介绍了很多常用Frontmatter配置和参数, 正常编写中, 我们不需要那么多, 直接复制粘贴即可.
---
title: Vuepress-theme-hope部署
icon: fa6-brands:markdown
date: 2025-03-03
category:
- 开发
- 前端技术
tag:
- vuepress
- hope
---这是本页面的Frontmatter配置和参数, 正常页面也只需要这么多参数.
此外, 这是src/.vuepresss/demo/disable.md的Frontmmatter部分:
---
title: 布局与功能禁用
icon: gears
order: 4
category:
- 使用指南
tag:
- 禁用
navbar: false
sidebar: false
breadcrumb: false
pageInfo: false
contributors: false
editLink: false
lastUpdated: false
prev: false
next: false
comment: false
footer: false
backtotop: false
---这里配置了一些禁用项, 具体情况详见src/.vuepresss/demo/disable.md.
其他Frontmatter配置见Vuepress-theme-hope官方文档配置/Frontmatter配置
正文组件
- 摘要
在
Frontmatter下方添加<!-- more -->字样, 则之间的内容会被处理成摘要, 显示在主页下方.若无
<!-- more -->摘要, 则会自动生成, 取正文部分开头的几行文字显示出来.- 目录
使用
[[toc]]可生成一个该页面的目录(用于普通页面), 使用<Catalog />可生成该文件夹的目录(多用于README.md)
本页上方文本如下:
苏喵分享`vuepress-theme-hope`从编写到部署的整个过程
<!-- more -->
经过了至少一周的时间, 终于成功部署了这个属于自己的网站, 这里打算把使用`vuepress-theme-hope`编写到部署的整个过程记录分享一下
_注意: 本喵电脑为Windows, 因此不清楚其他操作系统如何操作_
[[toc]]
---其中最下方的---并非内置的部分分割符, 单纯是markdown内置的分割符, 显示在文本中为<hr/>
- md正文
由于Vuepress使用markdown-it解析markdown内容, 因此除原生md语法外, 部分md语法拓展可直接使用.
如Github风格的表格, 删除线, Emoji, TOC(就是上述介绍的组件).
此外, 可以安装其他md解析库, 用以显示其他md内容.
详情请见Vuepress-theme-hope官方文档指南/Markdown介绍
以TeX支持为例, 首先安装katex或者mathjax-full, 这里以katex为例.
pnpm add -D katex之后在src/.vuepress/config.ts中配置:
import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";
export default defineUserConfig({
theme: hopeTheme({
markdown: {
math: {
type: "katex", // 或 'mathjax'
},
},
}),
});摘自Vuepress-theme-hope官方文档指南/Markdown/语法/数学公式
此时即可正常显示LaTeX
代码如下:
$$
\text{例 解线性方程组:}
\begin{cases}
x_1 + x_2 + x_3 = 1 \\
x_1 + 2x_1 - 5x_3 = 2 \\
2x_1 + 3x_2 - 4x_3 = 3
\end{cases}
\\ \ \\
\text{解: 对方程组增广矩阵进行初等行变换:} \\
\overline{A} = \begin{pmatrix}
1 & 1 & 1 & 1 \\
1 & 2 & -5 & 2 \\
2 & 3 & -4 & 3
\end{pmatrix}
\xrightarrow[r_3 + (-2) \times r_1]{r_2 + (-1) \times r_1}
\begin{pmatrix}
1 & 1 & 1 & 1 \\
0 & 1 & 6 & 1 \\
0 & 1 & -6 & 1
\end{pmatrix}
\xrightarrow[r_3 + (-1) \times r_1]{r_1 + (-1) \times r_2}
\begin{pmatrix}
1 & 0 & 7 & 0 \\
0 & 1 & -6 & 1 \\
0 & 0 & 0 & 0
\end{pmatrix}
\\ \ \\
\text{变换后对应阶梯线性方程组:} \\
\begin{cases}
x_1 \ \ \ \ \ \ \ + 7x_3 = 0 \\
\ \ \ \ \ \ \ x_2 - 6x_3 = 1
\end{cases}
\\
\text{它与原方程同解, 取} x_3 = k \text{, 则} x_1 = -7k, x_2 = 1 + 6k \text{, 则原方程解为:}
\begin{cases}
x_1 = -7k \\
x_2 = 1 + 6k \\
x_3 = k
\end{cases}
$$4.2 侧边栏
上述2.3 src/.vuepress文件已讲解sidebar.ts的文件结构, 这里只进行补充.
本项目文件结构(部分)如下:
src
├── .vuepress
├── notes
| ├── dev
| | ├── README.md
| | └── 1.md
| └── other
| └── README.md
├── kits
└── README.md对应sidebar.ts(部分)为:
import { sidebar } from "vuepress-theme-hope";
export default sidebar({
"/": [
"",
{
text: "笔记 notes",
icon: "book",
prefix: "notes/",
link: "notes/",
children: [
{
text: "开发",
icon: "gear",
prefix: "dev/",
collapsible: true,
children: "structure"
},
{
text: "其他",
icon: "fa6-brands:markdown",
prefix: "other/",
collapsible: true,
children: "structure"
}
],
},
{
text: "工具 kites",
icon: "gears",
prefix: "kits/",
collapsible: true,
children: "structure",
},
],
});留空则默认为README.md, 文件但不留后缀则默认为.md, /结尾为文件夹(README.md省略了).
children: "structure"则将文件夹下属所有子文件全部列出, collapsible: true则使该列表成为下拉列表.
4.3 导航栏
本项目导航栏十分简单
import { navbar } from "vuepress-theme-hope";
export default navbar([
"/",
"intro",
"/notes/",
"/kits/",
"friend"
]);不多介绍.