本站配置

各配置项代码里有简单的注释，详细说明请自行查看官方文档：

• VuePress 默认主题配置 (opens new window)
• Vdoing 主题配置 (opens new window)
• 继承新增的配置项在介绍篇里查看

首页配置

在 docs 目录下的 index.md或 README.md 的 front matter 指定 home: true，就会为你的站点生成一个首页。
在项目初始化时我们已经生成过跟VuePress官网一样的首页配置，现在按自己需求，修改为自己的首页配置。

docs/index.md

---
home: true
# heroImage: /img/logo.png
heroText: 积硅步以至千里 积懈怠以致深渊
tagline: talk is cheap, show me the code. —— Linus
# actionText: 立刻进入 →
# actionLink: /categories/
bannerBg: none # auto => 网格纹背景(有bodyBgImg时无背景)，默认 | none => 无 | '大图地址' | background: 自定义背景样式       提示：如发现文本颜色不适应你的背景时可以到palette.styl修改$bannerTextColor变量

features: # 可选的
  - title: 文章
    details: 各种问题及解决办法的文章
    link: /article/  # 可选
    imgUrl: /img/article.png # 可选
  - title: 专栏
    details: 技术文档、读书笔记、相关教程
    link: /column/
    imgUrl: /img/column.png
  - title: 项目
    details: 从零到上线的项目开发过程
    link: /project/
    imgUrl: /img/project.png
# 文章列表显示方式: detailed 默认，显示详细版文章列表（包括作者、分类、标签、摘要、分页等）| simple => 显示简约版文章列表（仅标题和日期）| none 不显示文章列表
postList: none
# simplePostListLength: 10 # 简约版文章列表显示的文章数量，默认10。（仅在postList设置为simple时生效）

# !!!!!以下配置为继承新增的配置项-----------------
# 侧边栏分类框是否显示： 默认true，配置为true时，也需要打开分类功能才会显示，即主题配置themeConfig中的category配置为true
category: false
# 侧边栏标签框是否显示： 默认true，配置为true时，也需要打开标签功能才会显示，即主题配置themeConfig中的tag配置为true
tag: false
---

docs/.vuepress 目录下新建 public/img 目录，用于存放所需的静态资源图片

Front Matter 配置

front matter 是指 markdown 文档最上方的 yaml 配置。

---
# 本站导航栏/项目/本站开发 的 front matter
pageComponent: # 使用页面组件
  name: Catalogue # 组件名：Catalogue => 目录页组件
  data: # 组件所需数据
    path: 03.项目/01.本站开发 # 设置为`docs/`下面的某个文件夹相对路径，如‘03.项目/01.本站开发’ 或 ’03.项目‘ (有序号的要带序号)
    imgUrl: /img/logo.png # 目录页内的图片
    description: 本章内容为此博客网站从零开发到部署上线的全过程 # 目录描述（可加入a标签）
title: 本站开发 # 页面标题
date: 2022-01-21 17:58:05 # 创建日期
permalink: /project/blog # 永久链接
sidebar: false # 不显示侧边栏 默认为 true
article: false # 不是文章页 (不显示面包屑栏、最近更新栏等) 默认为 true
comment: false # 不显示评论栏 默认为 true
editLink: false # 不显示编辑按钮 默认为 true
---

---
 # 本篇文章的 front matter
title: 本站配置 # 文章页标题
date: 2022-02-17 19:50:29 # 文章创建日期
permalink: /pages/6554a5/ # 文章永久链接
categories:
  - 本站开发  # 文章分类，在顶部导航栏的索引下的分类页面中，生成该分类项。 可以设置多个
tags:
  - 本站  # 文章标签，在顶部导航栏的索引下的标签页面中，生成该标签。 可以设置多个
# titleTag: 原创 # 用于给标题添加 原创、转载 、优质、推荐 等自定义标记。
# sticky: 1 # 文章置顶，允许有多个置顶文章，按照 1, 2, 3, ... 来降低置顶文章的排列优先级
author: # 文章作者信息。如果在主题配置中设置了 author 配置项的信息，这里不填就默认使用主题配置中的配置
  name: Runs
  link: https://github.com/foreverRuns
---

---
# 本站导航栏/关于 的 front matter
title: 关于
date: 2022-01-26 16:35:25
permalink: /about
sidebar: false
article: false  # 非文章
---

// Make sure to add code blocks to your code group

提示

文章模板中的 author 如果不设置，默认使用 主题配置 中的 author 配置项，
建议在主题配置中配置就好，原创文章就可省略不写作者信息，转载的再手动写上所属作者信息即可。

vdoing 主题下 front matter 参数配置项 详细说明 (opens new window)

示例:

• 一级目录页：项目， 二级目录页：本站开发
• 文章：本篇
• 非目录页非文章：关于

目录页配置

注意

目录页数据需要依赖于结构化的侧边栏数据，就是说你需要在 主题配置 中配置 sidebar: 'structuring' 或 sidebar: { mode: 'structuring', collapsable: false} 才能实现目录页数据的获取。

vdoing 主题 目录页配置 详细说明 (opens new window)

• 建议在 一级目录 即 docs/ 下，单独创建相应的文件夹专门放置你的目录页，不要一起放在文章目录下，目录页也会被扫描生成侧边结构目录，会导致重复错乱
• 打开目录页时，不想显示侧边栏可以在 front matter 中设置 sidebar: false
• 想要显示在同一侧边栏的目录页放置到同一专门的目录下，一般按照导航栏来分类放置

本站当前目录页结构：

├── docs
    ├── 00.目录页 (一级目录页)
    │   ├── 01.文章.md    
    │   ├── 02.专栏.md
    │   ├── 03.项目.md
    │   └── 04.更多.md
    │      
    ├── 00.文章目录页 (二级目录页)
    │   ├── 01.文章-前端.md
    │   ├── 02.文章-后端.md
    │   ├── 03.文章-Linux.md
    │   ├── 04.文章-Openssl.md
    │   └── 05.文章-Level2.md
    │
    ├── 00.专栏目录页 (二级目录页)
    │   ├── 01.Markdown入门教程.md
    │   └── 05.ES6标准入门笔记.md  
    │         
    └── 00.项目目录页 (二级目录页)
        └── 01.本站开发.md

一级目录页 docs/00.目录页/01.文章.md

---
pageComponent:
  name: Catalogue
  data:
    path: 01.文章
    imgUrl: /img/article.png
    description: 各种问题及解决办法的文章
title: 技术文章
date: 2022-01-01 00:05:05
permalink: /article
sidebar: false
article: false
comment: false
editLink: false
---

其他的类似，不清楚的去看源码。

二级目录页 docs/00.文章目录页/01.文章-前端.md

---
pageComponent:
  name: Catalogue
  data:
    path: 01.文章/01.前端
    imgUrl: /img/article.png
    description: html、css、JavaScript、Vue生态等前端记录文章
title: 前端
date: 2022-01-07 18:20:42
permalink: /article/web/
# sidebar: false # 不显示侧边栏
article: false
comment: false
editLink: false
---

其他的类似，不清楚的去看源码。

导航配置

侧边栏配置

vdoing 主题遵循 约定优于配置 原则，想构建一个结构化的站点，只需要在下面的主题配置中设置 sidebar: 'structuring'，即可为你省去很多配置，编译时按照目录约定自动生成一个结构化的侧边栏、目录页、面包屑等数据。

在源目录（一般是docs）文件夹中，除了.vuepress、@pages、_posts、index.md 或 README.md 之外的文件夹将会为其生成对应的侧边栏。生成的顺序取自序号，标题取自文件（夹）名称

想要禁用指定页面的侧边栏，可以通过在该页面文档的 Front Matter 来禁用

---
sidebar: false
---

命名约定

• 无论是文件还是文件夹，请为其名称添加上正确的正整数序号和.，从 00 或 01 开始累计，如 01.文件夹、02.文件.md，将会按照序号的顺序来决定其在侧边栏当中的顺序。
• 同一级别目录别内即使只有一个文件或文件夹也要为其加上序号。
• 文件或文件夹名称中间不能出现多余的点 .，如 01.我是.名称.md 中间出现.将会导致解析错误。

提示

序号只是用于决定先后顺序，并不一定需要连着，如 01、02、03...，实际工作中可能会在两个文章中间插入一篇新的文章，因此为了方便可以采用间隔序号 10、20、30...，后面如果需要在 10 和 20 中间插入一篇新文章，可以给定序号 15。

级别说明

源目录（一般是 docs）底下的级别现在我们称之为 一级目录，一级目录 的下一级为 二级目录，以此类推，最多到 四级目录。

• 一级目录
  1. .vuepress、@pages、_posts、index.md 或 README.md 这些文件(文件夹)不参与数据生成。
  2. 序号非必须。
• 二、三级目录
  1. 该级别下可以同时放文件夹和 .md 文件，但是两者序号要连贯
  2. 必须有序号
• 四级目录
  1. 该级别下只能放 .md 文件。
  2. 必须有序号

导航栏配置

docs/.vuepress/config/themeConfig/nav.js

module.exports = {
  nav: [
    // 说明：以下所有link的值只是在相应md文件头部定义的永久链接（那些随机数不是什么特殊编码）。另外，注意结尾是有斜杠的
    { text: '首页', link: '/' },
    {
      text: '文章',
      link: '/article/', //目录页链接，此处link是vdoing主题新增的配置项，有二级导航时，可以点击一级导航跳到目录页
      items: [
        { text: '前端', link: '/article/web/' },
        { text: '后端', link: '/article/server/' },
        { text: 'Linux', link: '/article/linux/' },
        { text: 'Openssl', link: '/article/openssl/' },
        { text: 'Level2', link: '/article/level2/' },
        { text: '其他', link: '/article/other/' },
      ],
    },
    {
      text: '专栏',
      link: '/column/',
      items: [
        { text: 'Markdown入门', link: '/column/md/' },
        { text: 'ES6标准入门', link: '/column/es6/' },
      ],
    },
    {
      text: '项目',
      link: '/project/',
      items: [{ text: '本站开发', link: '/project/blog/' }],
    },
    {
      text: '更多',
      link: '/more/',
      items: [
        { text: '网址收藏', items: [{ text: '收藏夹', link: '/pages/bb780f/' }] },
        {
          text: '摸鱼娱乐',
          items: [
            { text: 'VIP视频解析', link: '/pages/74e151/' },
            { text: '免费动漫', link: '/pages/312d52/' },
          ],
        },
      ],
    },
    { text: '关于', link: '/about/' },
    // {
    //   text: '索引',
    //   link: '/categories/',
    //   items: [
    //     { text: '分类', link: '/categories/' },
    //     { text: '标签', link: '/tags/' },
    //     { text: '归档', link: '/archives/' },
    //   ],
    // },
  ],

  navBefore: [
    {
      text: '🔑索引',
      // link: '/categories/',
      items: [
        { text: '分类', link: '/categories/' },
        { text: '标签', link: '/tags/' },
        { text: '归档', link: '/archives/' },
      ],
    },
  ],
}

navBefore 是本站新增的配置项，介绍篇 有详细说明

注意：请根据自己的博客文档分类结构去创建自己对应的 目录页配置 和 导航配置

本站当前大概的文档结构：

├── docs
    ├── 01.文章 (一级目录)
    │   ├── 01.前端 (二级目录)
    │   │   ├── 01.HTML (三级目录)
    │   │   │   ├── xxx.md
    │   │   │   └── ...
    │   │   ├── 02.JavaScript (三级目录)
    │   │   └── 03.CSS (三级目录)
    │   ├── 02.后端
    │   ├── 03.Linux
    │   ├── 04.Openssl
    │   ├── 04.Level2
    │   └── 099.其他
    │      
    ├── 02.专栏
    │   └── ...
    │
    ├── 03.项目
    │   └── ...
    │ 
    ├── 04.更多
    │   └── ...        
    └── 05.关于
        └── 01.关于.md

主题配置

docs/.vuepress/config/themeConfig.js

const { nav, navBefore } = require('./themeConfig/nav.js')

// 主题配置
module.exports = {
  nav, // 导航配置
  navBefore, // 继承后新增的前置nav，在搜索框前面
  sidebarDepth: 2, // 侧边栏显示深度，默认1，最大2（显示到h3标题）
  logo: '/img/logo.png', // 导航栏logo
  searchMaxSuggestions: 10, // 搜索结果显示最大数
  lastUpdated: '上次更新', // 开启更新时间，并配置前缀文字   string | boolean (取值为git提交时间)
  // 配置repo后，导航栏右侧生成相应的 repoLabel 链接，并在页面的底部生成一个默认的 "Edit this page" 链接，可通过editLinkText修改
  repo: 'foreverRuns/vuepress-vdoing-blog',
  // 自定义仓库链接文字。默认从 `themeConfig.repo` 中自动推断为 "GitHub"/"GitLab"/"Bitbucket" 其中之一，或是 "Source"。
  // repoLabel: '查看源码', 
  repoLink: false,  // 继承后新增的配置项，不显示顶部导航栏右边 repoLabel 链接
  docsDir: 'docs', // 编辑的文件夹
  docsBranch: 'main', // 文档放在main分支下
  editLinks: true, // 启用编辑
  editLinkText: '编辑此页',

  //*** 以下是Vdoing主题相关配置，文档：https://doc.xugaoyi.com/pages/a20ce8/ ***//
  // 随机图片API
  // bodyBgImg: 'https://api.yimian.xyz/img?type=moe&size=1920x1080', // body背景大图，默认无。 单张图片 String | 多张图片 Array, 多张图片时每隔15秒换一张。
  bodyBgImg: [
    'https://cdn.staticaly.com/gh/foreverRuns/image-hosting@main/blog/bg-street.568x7lyv9a0w.webp', 
    'https://cdn.staticaly.com/gh/foreverRuns/image-hosting@main/blog/bg-club.1s9q1gb7dk1s.webp', 
    'https://cdn.staticaly.com/gh/foreverRuns/image-hosting@main/blog/bg-classroom.1kvh5rjqvccg.webp'
  ], // body背景大图，默认无。 单张图片 String | 多张图片 Array, 多张图片时每隔15秒换一张。
  bodyBgImgOpacity: 0.45, // body背景图透明度，选值 0 ~ 1.0, 默认0.5

  // titleBadge: false, // 文章标题前的图标是否显示，默认true
  // titleBadgeIcons: [ // 文章标题前图标的地址，默认主题内置图标
  //   '图标地址1',
  //   '图标地址2'
  // ],
  contentBgStyle: 1, // 文章内容块的背景风格，默认无. 1 方格 | 2 横线 | 3 竖线 | 4 左斜线 | 5 右斜线 | 6 点状

  // updateBar: { // 最近更新栏
  //   showToArticle: false, // 显示到文章页底部，默认true
  //   moreArticle: '/archives' // “更多文章”跳转的页面，默认'/archives'
  // },
  // rightMenuBar: false, // 是否显示右侧文章大纲栏，默认true (屏宽小于1300px下无论如何都不显示)
  // sidebarOpen: false, // 初始状态是否打开左侧边栏，默认true
  // pageButton: false, // 是否显示快捷翻页按钮，默认true

  // 侧边栏  'structuring' | { mode: 'structuring', collapsable: Boolean} | 'auto' | <自定义>
  // 温馨提示：目录页数据依赖于结构化的侧边栏数据，如果你不设置为'structuring',将无法使用目录页
  sidebar: 'structuring',

  // 文章默认的作者信息，可在md文件中单独配置此信息 String | {name: String, link: String}
  author: {
    name: 'Runs', // 必需
    link: 'https://github.com/foreverRuns', // 可选的
  },

  // 博主信息，显示在首页侧边栏
  // blogger: {
  //   // 我的github头像
  //   avatar: 'https://avatars.githubusercontent.com/u/17795989?v=4',
  //   // 二次元随机头像
  //   // avatar: 'https://api.yimian.xyz/img?type=head',
  //   name: 'Runs Zheng',
  //   slogan: '就一个小学生',
  // },

  // 社交图标，显示于博主信息栏和页脚栏。内置图标：https://doc.xugaoyi.com/pages/a20ce8/#social
  social: {
    // iconfontCssFile: '//at.alicdn.com/t/font_1678482_u4nrnp8xp6g.css', // 可选，阿里图标库在线css文件地址，对于主题没有的图标可自己添加
    icons: [
      {
        iconClass: 'icon-youjian',
        title: '发邮件',
        link: 'mailto:894985240@qq.com',
      },
      {
        iconClass: 'icon-github',
        title: 'GitHub',
        link: 'https://github.com/foreverRuns',
      },
      {
        iconClass: 'icon-erji',
        title: '听音乐',
        link: 'https://music.163.com/#/playlist?id=755597173',
      },
    ],
  },

  // 页脚信息
  footer: {
    createYear: 2022, // 博客创建年份
    copyrightInfo: 'RunsZ | <a href="https://vuepress.vuejs.org/zh/" target="_blank">VuePress</a>', // 博客版权信息，支持a标签
  }
}

插件配置

docs/.vuepress/config/plugins.js

配置中插件名字前缀 vuepress-plugin- 可以省略

vuepress-plugin-last-updated

vuepress 已经包含该插件，无需再次安装。

1. 当你提供了 themeConfig.repo 选项，将会自动在每个页面的导航栏生成生成一个 GitHub 链接，以及在页面的底部生成一个 "Edit this page" 链接。
   通过下面配置可以做相应修改

docs/.vuepress/config/themeConfig.js 中

// 配置repo后，导航栏右侧生成相应的 repoLabel 链接，并在页面的底部生成一个默认的 "Edit this page" 链接，可通过editLinkText修改
repo: 'foreverRuns/vuepress-vdoing-blog',
// 自定义仓库链接文字。默认从 `themeConfig.repo` 中自动推断为 "GitHub"/"GitLab"/"Bitbucket" 其中之一，或是 "Source"。
// repoLabel: '查看源码', 
repoLink: false,  // 继承后新增的配置项，不显示顶部导航栏右边 repoLabel 链接
docsDir: 'docs', // 编辑的文件夹
docsBranch: 'main', // 文档放在main分支下
editLinks: true, // 启用编辑
editLinkText: '编辑此页',

提示

配置好之后，每篇文章页面底下都会有一个 编辑此页 按钮，点击即可跳到你配置的远程仓库地址在线编辑
你可以通过文章顶部的 YAML front matter 来禁用指定页面的编辑链接按钮

---
editLink: false
---

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

docs/.vuepress/config/themeConfig.js 中

lastUpdated: '上次更新', // 开启更新时间，并配置前缀文字   string | boolean (取值为git提交时间)

提示

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

3. 配置如下：

yarn add dayjs

module.exports = [
  [
    '@vuepress/last-updated', // "上次更新"时间格式
    {
      transformer: (timestamp) => {
        const dayjs = require('dayjs') // https://day.js.org/
        return dayjs(timestamp).format('YYYY/MM/DD, HH:mm:ss')
      },
    },
  ],
]

显示效果如下：

vuepress-plugin-one-click-copy

代码块右上角添加 复制按钮，方便代码的复制

yarn add vuepress-plugin-one-click-copy -D

配置如下：

module.exports = [
  [
    'one-click-copy', // 代码块复制按钮
    {
      copySelector: ['div[class*="language-"] pre', 'div[class*="aside-code"] aside'], // String or Array
      copyMessage: '复制成功', // default is 'Copy successfully and then paste it for use.'
      duration: 1000, // prompt message display time.
      showInMobile: false, // whether to display on the mobile side, default: false.
    },
  ],
]

vuepress-plugin-zooming

文章中的图片添加放大显示功能

yarn add vuepress-plugin-zooming -D

配置如下：

module.exports = [
  [
    'zooming', // 放大图片
    {
      // selector: '.theme-vdoing-content img:not(.no-zoom)', // 排除class是no-zoom的图片
      selector: '.theme-vdoing-content img:not(a > img, .no-zoom)', // 排除被a标签包含的img, 排除class是no-zoom的图片(不想放大的图片加上class="no-zoom")
      options: {
        bgColor: 'rgba(0,0,0,0.6)',
      },
    },
  ],
]

点击查看大图：

其他插件

vuepress-plugin-comment 评论插件等，在后面详细说明

完整配置

点击查看目前插件配置

// 插件配置 插件名字前缀 vuepress-plugin- 可以省略
module.exports = [
  [
    '@vuepress/last-updated', // "上次更新"时间格式
    {
      transformer: (timestamp) => {
        const dayjs = require('dayjs') // https://day.js.org/
        return dayjs(timestamp).format('YYYY/MM/DD, HH:mm:ss')
      },
    },
  ],
  [
    'one-click-copy', // 代码块复制按钮
    {
      copySelector: ['div[class*="language-"] pre', 'div[class*="aside-code"] aside'], // String or Array
      copyMessage: '复制成功', // default is 'Copy successfully and then paste it for use.'
      duration: 1000, // prompt message display time.
      showInMobile: false, // whether to display on the mobile side, default: false.
    },
  ],
  [
    'zooming', // 放大图片
    {
      // selector: '.theme-vdoing-content img:not(.no-zoom)', // 排除class是no-zoom的图片
      selector: '.theme-vdoing-content img:not(a > img, .no-zoom)', // 排除被a标签包含的img, 排除class是no-zoom的图片(不想放大的图片加上class="no-zoom")
      options: {
        bgColor: 'rgba(0,0,0,0.6)',
      },
    },
  ],
]

webpack配置

docs/.vuepress/config/webpack.js

const path = require('path')

module.exports = {
  // webpack 配置
  resolve: {
    // 当你想要继承某个组件的时候，直接把源码中对应的组件复制到.vuepress/theme/components下修改，
    // 源码中其他地方用到该组件通过 @theme/components/XXX.vue 会自动地映射到子主题中对应的 XXX 组件。
    // 但是由于 vdoing主题 源码中某些组件的引用省略了.vue后缀, 比如：Layout.vue 中 import Footer from '@theme/components/Footer'
    // 这时候继承失败，会使用原主题的Footer组件，下面配置也无效不知为何，只能直接去主题源码中加上后缀 import Footer from '@theme/components/Footer.vue'
    extensions: ['.vue'], //省略 .vue后缀
    // 官方文档：主题想要被继承 所有的组件都必须使用 @theme 别名来引用其他组件。
    // 这里重新指定 @theme 为继承的vdoing主题所在目录，否则编译会出现各种组件找不到的错误（这里官网不知为何没有说明要重新指定@theme）
    alias: {
      '@theme': path.resolve(__dirname, '../../../node_modules/vuepress-theme-vdoing'),
    },
  },
}

配置入口文件

docs/.vuepress/config.js

const themeConfig = require('./config/themeConfig.js')
const plugins = require('./config/plugins.js')
const configureWebpack = require('./config/webpack.js')

module.exports = {
  title: "RunSS11's blog",
  description: '个人技术博客,学习笔记,技术文档。html,css,JavaScript,TypeScript,Vue3,NodeJS,Git,Github,C,Openssl,...',
  // 注入到页面<head>中的标签，格式[tagName, { attrName: attrValue }]
  head: [
    // 增加一个自定义的 favicon(网页标签的图标)
    // 这里的 '/' 指向 docs/.vuepress/public 文件目录
    // 即 docs/.vuepress/public/img/geass-bg.ico
    ['link', { rel: 'icon', href: '/img/icon.ico' }],
    [
      'meta',
      {
        name: 'keywords',
        content: '个人技术博客,学习笔记,技术文档。html,css,JavaScript,TypeScript,Vue3,NodeJS,Git,Github,C,Openssl',
      },
    ],
    // 移动浏览器主题颜色
    ['meta', { name: 'theme-color', content: '#11a8cd' }],
    // 移动端阻止页面缩放
    // ['meta', { name: 'viewport', content: 'width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no'}],
    // 页脚不蒜子
    // ['meta', { name: 'referrer', content: 'no-referrer-when-downgrade' }],
  ],

  // 默认'/'。如果你想将你的网站部署到如 https://username.github.io/blog/，那么 base 应该被设置成 "/blog/",（否则页面将失去样式等文件）
  base: '/blog/',
  // 显示代码块的行号
  markdown: {
    lineNumbers: true,
  },

  // 主题配置
  themeConfig,
  // 插件配置
  plugins,
  // webpack 配置
  configureWebpack,
}