vuepress入门详解（四）vuepress 基本配置

最新推荐文章于 2024-05-07 09:32:57 发布

牛魔王sq

最新推荐文章于 2024-05-07 09:32:57 发布

阅读量8.8k

点赞数 6

分类专栏： vuepress入门详解文章标签： vue.js 前端 javascript html

本文链接：https://blog.csdn.net/loveshanqian/article/details/106332636

版权

vuepress入门详解专栏收录该内容

7 篇文章 10 订阅

订阅专栏

vuepress 基本配置

::: tip
本页所列的选项仅对默认主题生效。如果你在使用一个自定义主题，选项可能会有不同。
:::

首页配置

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


---
home: true
heroImage: /hero.png
heroText: Hero 标题
tagline: Hero 副标题
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 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: '牛魔王的博客',
    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 <head> 中的标签，每个标签都可以以 [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文件。
  ::: tip
  如果系统比较简单，只想用一个侧边栏，最简单的办法就是把我们本例的“英语”和“数学”侧边栏去掉，只保留生活的，并且把/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
  }
}

::: tip
一般都不设置为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
---

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

最后更新时间

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

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

::: warning 使用须知
由于 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 的关键词（不推荐使用）

🍉🍉🍉 欢迎大家来博客了解更多内容：java乐园 🍉🍉🍉

vuepress入门详解（一）vuepress介绍
 vuepress入门详解（二）vuepress 快速搭建
 vuepress入门详解（三） vuepress 目录结构
 vuepress入门详解（四）vuepress 基本配置
 vuepress入门详解（五）vuepress Markdown详解
 vuepress入门详解（六）vuepress 实用插件
 vuepress入门详解（七）vuepress如何添加评论功能

牛魔王sq

关注

6
点赞
踩
29

收藏

觉得还不错? 一键收藏
2
评论
vuepress入门详解（四）vuepress 基本配置

vuepress 基本配置::: tip本页所列的选项仅对默认主题生效。如果你在使用一个自定义主题，选项可能会有不同。:::首页配置首页配置文件是doc目录下的README.md文件，以下是一个如何使用的例子：---home: trueheroImage: /hero.pngheroText: Hero 标题tagline: Hero 副标题actionText: 快速上手 →actionLink: /guide/features:- title: 简洁至上 details
复制链接

扫一扫