【VuePress02】config配置走一波

config配置

config.js的位置

config.js的位置应该在 .vuepress里面，它的配置主要包含了网站的标题、描述、主题的配置等。

贴一下我现在的config.js的配置

我的config配置

这里是config.js。所以开头要写 module.exports = {}包裹一下，在hugo中一般是config.json或者config.toml。 vuepress我还没试过其它的，等我把项目大致摸一下再试试。

官网上找到了这样一段话：

config也可以是以上两种格式的

base: 网站用来部署的基准 URL。如果你打算将你的网站部署到
      https://foo.github.io/bar/，
      则应将 base 设置为 "/bar/"。以/开始和结束。
      在其他选项中，base 会自动添加到以 / 开头的所有 URL 中，因此你只需指定一次即可。
title: 网站的标题，也是所有页面标题的前缀，显示在默认主题的导航栏中。
description: 网站描述，在页面 HTML 中表现为一个  标签。
head: 被注入页面 HTML  额外的标签。
      每个标签可以用 [tagName, { attrName: attrValue }, innerHTML?] 的形式指定。例如：
      module.exports = {
          head: [
            ['link', { rel: 'icon', href: '/logo.png' }] // 悄咪咪的说一下，路径`/`就是public资源目录
          ]
        } 
themeConfig: 为使用的主题提供配置选项。这些选项将根据你使用的主题而有所不同。【敲黑板：这点很重要】
serviceWorker: 如果设置为 true，VuePress 将自动生成并注册一个 service worker ，
               这个 worker 将内容缓存以供离线使用（仅在生产环境中启用）。这个是用来做PWA的，
               不是很了解PWA的看这里 https://developer.mozilla.org/zh-CN/docs/Web/Manifest。

------------------------------我是鳄鱼分割线---------------------

themeConfig下的

nav: 导航栏配置，此配置主要用于配置导航栏的链接，例如以上主页的link为"/"，默认是根目录下的README.md。
     "/web/"链接到根目录docs下的web文件夹下的README.md文件。
sidebar: 侧边栏配置，你可以省略.md拓展名，同时以/结尾的路径将会被视为 */README.md。
         '/miniprogram/'、'/vue/'和'/web/'是通过路由的方式将每个页面的标题抽取出来显示。
          "/miniprogram/"是指根目录下miniprogram文件夹中的路由，每个路由链接都要有README.md
sidebarDepth: 侧边栏自动显示当前激活页面中标题的链接，嵌套在页面本身的链接下。
              默认深度是1，提取h2标题；0禁用标题链接；最大值为2，同时提取h2和h3。
             【页面中的front matter可以重新设置覆盖config里的这个值】
lastUpdated: 最近更新，选项允许你获取每个文件的最后一次 git 提交的 UNIX 时间戳（ms），
             并且它也会以合适的格式显示在每个页面的底部。

挑一下部分设置的表现

我是head啦

我是侧边栏

我是nav导航栏，搜索框是默认主题带的~

总结

我自己总结一下，可能不是很对，如果有误欢迎指正。根据我之前学hugo的经验来看，config.js配置的是全站的，例如title等等，有些部分是可以在页面中配置来覆盖的。例如sidebarDepth这种。

然后读取的是一个个*.md文件，这些*.md文件上面一部分是front matter，front matter就是针对页面的一些配置，可覆盖config.js里的一些配置的值。然后下面接的就是我们的内容。hugo中这下面的部分可以是纯文字，也可以是自定义的dom结构。

一般来说应该是一个页面模板，配合多个这个模板的.md文件生成多个模板的内容页【vuepress我还没有做到后面这步，现在是边学边写，所以如果我做到后面发现有误也会回来改正这里。】

在这里贴一下config 和 主题配置的链接: 【config走你】、【themeConfig走你】