默认主题的使用
根据官方文档说明:
VuePress 由两部分组成:第一部分是一个极简静态网站生成器,它包含由 Vue 驱动的主题系统和插件 API,另一个部分是为书写技术文档而优化的默认主题。
默认主题由首页、导航条、侧边栏、最后更新时间、上一篇和下一篇文章链接、Git 仓库和编辑链接等等组成。
默认主题首页设置
默认的主题提供了一个首页(Homepage)的布局 (效果参见官方文档网站)。想要使用它,需要在你的根级 README.md
的 YAML front matter
指定内容。以下是例子:
---
home: true
heroImage: /hero.png
heroText: VuePress学习笔记
tagline: 新生代电子书、网站、博客制作工具
actionText: 查看学习笔记 →
actionLink: /guide/
features:
- title: 简洁至上
details: 以 Markdown 为中心的项目结构,以最少的配置帮助你专注于写作。
- title: Vue驱动
details: 享受 Vue + webpack 的开发体验,在 Markdown 中使用 Vue 组件,同时可以使用 Vue 来开发自定义主题。
- title: 高性能
details: VuePress 为每个页面预渲染生成静态的 HTML,同时在页面被加载的时候,将作为 SPA 运行。
footer: MIT Licensed | Copyright © 2018-present Yangzh
---
任何 YAML front matter
之后额外的内容将会以普通的 markdown
被渲染,并插入到 features
的后面。
顶端导航条设置
顶端导航条使用themeConfig.sidebar
属性来设置。示例如下:
themeConfig: {
nav: [{
text: 'Home',
link: '/'
},
{
text: 'Guide',
link: '/guide/'
},
{
text: '多级菜单',
items: [{
text: '菜单1',
link: '/language/chinese/'
},
{
text: '菜单2',
link: '/language/japanese/'
}
]
},
]}
侧边目录设置
侧边目录使用themeConfig.sidebar
属性来设置,是用户组织项目内容结构的重要关键手段。可以通过使用对象进行分组。
在线修订链接
当你提供了 themeConfig.repo
选项,将会自动在每个页面的导航栏生成生成一个 git
仓库地址,并在页面的底部生成一个 "Edit this page"
链接。
最后更新时间设置
通过 themeConfig.lastUpdated
选项来获取每个文件最后一次 git 提交的 UNIX 时间戳(ms),同时它将以合适的日期格式显示在每一页的底部:
themeConfig.lastUpdated
默认是关闭的,如果给定一个字符串,它将会作为前缀显示(默认值是:Last Updated
)。
本项目对默认主题的设置如下:
module.exports = {
// 网站标题
title: 'VuePress学习笔记',
description: "VuePressV1.X学习笔记",
// 网站路径名
base: "/vuepress/",
// 默认主题设置
themeConfig: {
nav: [{
text: 'Home',
link: '/'
},
{
text: 'Guide',
link: '/guide/'
}
],
sidebar: [{
title: '起步', // 必要的
children: [
'/guide/',
'/guide/default-theme',
]
},
{
title: '提高',
children: [
'/pro/markdown-enhance',
'/pro/install-plugins',
'/pro/directory-structure',
'/pro/front-matter'
]
}
],
// 假定是 GitHub. 同时也可以是一个完整的 GitLab URL
repo: 'https://gitee.com/yangjh/vuepress',
// 自定义仓库链接文字。默认从 `themeConfig.repo` 中自动推断为
// "GitHub"/"GitLab"/"Bitbucket" 其中之一,或是 "Source"。
repoLabel: '查看源码',
// 以下为可选的编辑链接选项
// 假如你的文档仓库和项目本身不在一个仓库:
// docsRepo: 'vuejs/vuepress',
// 假如文档不是放在仓库的根目录下:
docsDir: 'docs',
// 假如文档放在一个特定的分支下:
docsBranch: 'master',
// 默认是 false, 设置为 true 来启用
editLinks: true,
// 默认为 "Edit this page"
editLinkText: '在线修订此页面',
lastUpdated: '修订于', // string | boolean
},
// 插件设置
plugins: [
'@limdongjin/vuepress-plugin-sidebar-on-off',
'@vuepress/back-to-top',
[
'@vuepress/container',
{
type: 'slot'
}
]
],
markdown: {
extendMarkdown: md => {
md.set({
html: true
})
md.use(require('markdown-it-katex'))
}
},
head: [
// ...
['link', {
rel: 'stylesheet',
href: 'https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css'
}],
['link', {
rel: "stylesheet",
href: "https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/2.10.0/github-markdown.min.css"
}]
]
}
// 案例
// module.exports = {
// plugins: [
// [
// '@vuepress/google-analytics',
// {
// ga: 'UA-92645815-1'
// }
// ],
// [
// 'vuepress-plugin-rss',
// {
// base_url: '/',
// site_url: 'https://www.bencodezen.io',
// filter: frontmatter => frontmatter.date <= new Date(),
// count: 20
// }
// ],
// 'vuepress-plugin-janitor'
// ]
// }