默认主题的使用

根据官方文档说明:

VuePress 由两部分组成:第一部分是一个极简静态网站生成器,它包含由 Vue 驱动的主题系统和插件 API,另一个部分是为书写技术文档而优化的默认主题。

默认主题由首页、导航条、侧边栏、最后更新时间、上一篇和下一篇文章链接、Git 仓库和编辑链接等等组成。

默认主题首页设置

默认的主题提供了一个首页(Homepage)的布局 (效果参见官方文档网站)。想要使用它,需要在你的根级 README.mdYAML 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'
// 	]
// }

参考资料

  1. 官网配置文件