vuepress 搭建指南

最新推荐文章于 2024-05-15 03:20:30 发布

mrzhangdulin

最新推荐文章于 2024-05-15 03:20:30 发布

阅读量596

点赞数

分类专栏： blog

本文链接：https://blog.csdn.net/mrzhangdulin/article/details/118302090

版权

blog 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

基本配置细节

首页配置
首页配置文件是doc目录下的README.md文件，以下是一个如何使用的例子：

---
home: true
heroImage: /hero.png
heroText: Hero 标题
tagline: Hero 副标题
actionText: 快速上手 →
actionLink: /zh/guide/
features:
  - title: 简洁至上
    details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
  - title: Vue 驱动
    details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
  - title: 高性能
    details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
    footer: MIT Licensed | Copyright © 2018-present Evan You

---

home：设置为true，意思时启用默认主题，对一般人来说，默认主题就够用了，专注写作就好。
hero：Image是设置首页图片的，图片的根路径是doc/.vuepress/public
actionText与actionLink是一对，就是首页的一个链接按钮，具体链接到那里自己定义。
其它属性跑起来之后就能直观感受了，没什么可说的。不需要的配置可以删除。
config.js配置文件
config.js里面包含了系统头部导航、左侧菜单、系统插件等配置。
config.js的路径为doc/.vupress/config.js，内容如下：

module.exports = {
    title: 'java乐园',// 设置网站标题
    description: 'dulinyu的博客',
    base: '/',   // 设置站点根路径
    dest: './ROOT',  // 设置输出目录
    port: 8086,
    head: [],
    plugins: [],
    themeConfig: {
        // 添加导航栏
        nav: [
            { text: '主页', link: '/' },
            { text: '指南', link: '/guide/' },
            { text: '生活', link: '/life/'},
            { text: '学习',
                items: [
                    { text: '英语', link: '/study/english/english01' },
                    { text: '数学', link: '/study/math/math01' },
                ]
            }
			],
        // 为以下路由添加左侧边栏
        sidebar: {
            '/life/': [
                {
                    title: '生活测试',
                    collapsable: false,
                    children: [
                        { title: '生活测试01', path: '/life/life01' },
                        { title: '生活测试02', path: '/life/life02' },
                        { title: '生活测试03', path: '/life/life03' },
                    ]
                }
            ],
            '/study/english/': [
                {
                    title: '英语',
                    collapsable: false,
                    children: [
                        { title: '第一节', path: '/study/english/english01' },
                        { title: '第二节', path: '/study/english/english02' },
                        { title: '第三节', path: '/study/english/english03' },
                    ]
                }
            ],
            '/study/math/': [
                {
                    title: '数学',
                    collapsable: false,
                    children: [
                        { title: '第一节', path: '/study/math/math01' },
                        { title: '第二节', path: '/study/math/math02' },
                        { title: '第三节', path: '/study/math/math03' },
                    ]
                }
            ],
        },
        sidebarDepth: 2,//左侧导航显示的层级
        lastUpdated: 'Last Updated'
    }
}

系统公共配置说明
title: 设置网站标题
description: 网站的描述
base: 设置站点根路径，如果访问的时候是ip+端口，那么这里就是/，如果访问的是ip+端口+工程名，那么这里就是/工程名/
dest: 设置编译后的输出目录./ROOT代表在工程的根目录下生成一个ROOT文件，里面是编译好的文件，可以拿ROOT直接部署。
port: 本地调试的端口号，默认是8080
head说明
类型: Array
默认值: []
额外的需要被注入到当前页面的 HTML 中的标签，每个标签都可以以 [tagName, { attrName: attrValue }, innerHTML?] 的格式指定，举例如下：

module.exports = {
  head: [
    ['link', { rel: 'icon', href: '/logo.png' }] // 增加一个自定义的 favicon
    ['link', { rel: 'manifest', href: '/manifest.json' }], //PWA 插件需要引入的manifest
    ['meta', { name: 'theme-color', content: '#3eaf7c' }], //<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
    ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
    ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
    ['link', { rel: 'apple-touch-icon', href: '/icons/apple-touch-icon-152x152.png' }],
    ['link', { rel: 'mask-icon', href: '/icons/safari-pinned-tab.svg', color: '#3eaf7c' }],
    ['meta', { name: 'msapplication-TileImage', content: '/icons/msapplication-icon-144x144.png' }],
    ['meta', { name: 'msapplication-TileColor', content: '#000000' }]
  ]
}

导航栏
导航栏可能包含你的页面标题、搜索框、导航栏链接、多语言切换、仓库链接，它们均取决于你的配置。

导航栏 Logo
你可以通过 themeConfig.logo 增加导航栏 Logo ，Logo 可以被放置在公共文件目录（就是我们的doc/puclic）：

// .vuepress/config.js

module.exports = {
  themeConfig: {
    logo: '/assets/img/logo.png',
  }
}

导航栏链接
你可以通过 themeConfig.nav 增加一些导航栏链接:

// .vuepress/config.js

module.exports = {
  themeConfig: {
    nav: nav: [
        { text: '主页', link: '/' },
        { text: '指南', link: '/guide/' },
        { text: '生活', link: '/life/'},
        { text: '学习',
            items: [
                { text: '英语', link: '/study/english/english01' },
                { text: '数学', link: '/study/math/math01' }
            ]
        },
        { text: '菜单分组测试', items: [
          { text: 'test1',  items: [
                  { text: 'test1-1', link: '/frontend/test1-1/' },
                  { text: 'test1-2', link: '/frontend/test1-2/' }
              ]},
          { text: 'teset2', items: [
                  { text: 'test2-1', link: '/frontend/test2-1/' },
                  { text: 'test2-2', link: '/frontend/test2-2/' }
              ] }
      ]}
    ],
  }
}

一组text和link就是一个菜单（例如本例的主页、指南和生活），一个菜单还可以有子菜单，可以有一组（本例的“学习”），也可以有多组（例如本例的“菜单分组测试”）

禁用导航栏
你可以使用 themeConfig.navbar 来禁用所有页面的导航栏：

// .vuepress/config.js

module.exports = {
  themeConfig: {
    navbar: false
  }
}

你也可以通过 YAML front matter 来禁用某个指定页面的导航栏：

在当前页面头部输入下面代码就会在这个页面禁用导航栏

navbar: false

侧边栏
想要使侧边栏（Sidebar）生效，需要配置 themeConfig.sidebar，基本的配置，需要一个包含了多个链接的数组：

// .vuepress/config.js

sidebar: {
    '/life/': [
        {
            title: '生活测试',
            collapsable: false,
            children: [
                { title: '生活测试01', path: '/life/life01' },
                { title: '生活测试02', path: '/life/life02' },
                { title: '生活测试03', path: '/life/life03' },
            ]
        }
    ],
    '/study/english/': [
        {
            title: '英语',
            collapsable: false,
            children: [
                { title: '第一节', path: '/study/english/english01' },
                { title: '第二节', path: '/study/english/english02' },
                { title: '第三节', path: '/study/english/english03' },
            ]
        }
    ],
    '/study/math/': [
        {
            title: '数学',
            collapsable: false,
            children: [
                { title: '第一节', path: '/study/math/math01' },
                { title: '第二节', path: '/study/math/math02' },
                { title: '第三节', path: '/study/math/math03' },
            ]
        }
    ],
},

我们以“生活测试”举例说明：

这个示例是多个侧边栏，“生活测试”是一个侧边栏。最前面的/life/表示“生活测试”的侧边栏，同理“英语”和“数学”也有自己的侧边栏
title就是这个页面的标题（如果我们在页面也指定了标题的话以在页面指定的为准）
collapsable表示把标题合起来，默认是true，我们一般设置为false，让标题自动展开
path是页面路径。
以 / 结尾的路径将会被视为 */README.md，/life/表示doc/life/README.md文件。
以文件名结尾，可以省略 .md 拓展名，例如/life/life01表示doc/life/life01.MD文件。

如果系统比较简单，只想用一个侧边栏，最简单的办法就是把我们本例的“英语”和“数学”侧边栏去掉，只保留生活的，并且把/life/改成/就可以了

嵌套的标题链接
默认情况下，侧边栏会自动地显示由当前页面的标题（headers）组成的链接，并按照页面本身的结构进行嵌套，你可以通过 themeConfig.sidebarDepth 来修改它的行为。
默认的深度是 1，它将提取到 h2 的标题，设置成 0 将会禁用标题（headers）链接，同时，最大的深度为 2，它将同时提取 h2 和 h3 标题。

也可以使用 YAML front matter 来为某个页面重写此值：

想要修改页面的头部位置

sidebarDepth: 2

显示所有页面的标题链接
默认情况下，侧边栏只会显示由当前活动页面的标题（headers）组成的链接，你可以将 themeConfig.displayAllHeaders 设置为 true 来显示所有页面的标题链接：

module.exports = {
  themeConfig: {
    displayAllHeaders: true // 默认值：false
  }
}

一般都不设置为ture，全部显示标题感觉太乱了，一般都用默认值，看个人喜好。

禁用侧边栏
你可以通过 YAML front matter 来禁用指定页面的侧边栏：

sidebar: false

搜索框
内置搜索

module.exports = {
  themeConfig: {
    search: false,
    searchMaxSuggestions: 10
  }
}

search: false 禁用或者开启内置搜索框。false为禁用，默认为true
searchMaxSuggestions 调整默认搜索框显示的搜索结果数量。
你可以通过在页面的 frontmatter 中设置 tags 来优化搜索结果：

// 当前页面优化搜索结果

tags:

配置
主题
索引

你可以通过在页面的 frontmatter 中设置 search 来对单独的页面禁用内置的搜索框：

当前页面禁用搜索

search: false

内置搜索只会为页面的标题、h2 、 h3 以及 tags 构建搜索索引。如果你需要全文搜索，你可以使用 Algolia 搜索。我还没有研究Algolia 搜索，有兴趣的可以看官网。

最后更新时间
你可以通过 themeConfig.lastUpdated 选项来获取每个文件最后一次 git 提交的 UNIX 时间戳(ms)，同时它将以合适的日期格式显示在每一页的底部：

module.exports = {
  themeConfig: {
    lastUpdated: 'Last Updated', // string | boolean
  }
}

使用须知
由于 lastUpdated 是基于 git 的, 所以你只能在一个基于 git 的项目中启用它。此外，由于使用的时间戳来自 git commit，因此它将
仅在给定页的第一次提交之后显示，并且仅在该页面后续提交更改时更新。（我的项目没有基于git，所以没有使用这个工程）
:::

上 / 下一篇链接
上一篇和下一篇文章的链接将会自动地根据当前页面的侧边栏的顺序来获取。你可以通过 themeConfig.nextLinks 和 themeConfig.prevLinks 来全局禁用它们：

// .vuepress/config.js

module.exports = {
  themeConfig: {
    // 默认值是 true 。设置为 false 来禁用所有页面的 下一篇 链接
    nextLinks: false,
    // 默认值是 true 。设置为 false 来禁用所有页面的 上一篇 链接
    prevLinks: false
  }
}

你也可以使用 YAML front matter 来明确地重写或者禁用它们：

prev: ./some-other-page
next: false

页面滚动
你可以通过 themeConfig.smoothScroll 选项来启用页面滚动效果。

// .vuepress/config.js

module.exports = {
  themeConfig: {
    smoothScroll: true
  }
}

做好上面的配置后就可以写文章了，具体的文章就是在示例目录里面的life01.md、 life012.md等文件里面，具体书写语法请看下一章Markdown详解

front-matter参数
Front-matter 是文件最上方以 — 分隔的区域，用于指定个别文件的变量
以下是预先定义的参数，可在模板中使用这些参数值并加以利用

参数描述默认值
layout 布局
title 标题文章的文件名
date 建立日期文件建立日期
updated 更新日期文件更新日期
description 描述
comments 开启文章的评论功能
tags 标签（不适用于分页）
categories 分类（不适用于分页）
permalink 覆盖文章网址
keywords 仅用于 meta 标签和 Open Graph 的关键词（不推荐使用）

参考

mrzhangdulin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vuepress 搭建指南

版本Vuepress1.0Vuepress2.0主题比较火的主题reco插件增加github acionsVuepress + GitHub Actions 静态博客全攻略基本配置细节首页配置首页配置文件是doc目录下的README.md文件，以下是一个如何使用的例子：---home: trueheroImage: /hero.pngheroText: Hero 标题tagline: Hero 副标题actionText: 快速上手 →actionLink: /zh/gui
复制链接

扫一扫