CCNAIVE

vuepress基础配置

2023/4/6

# 1.基础配置

# 1.vuepress配置文件

在文档目录下创建一个 .vuepress 目录，所有 VuePress 相关的文件都会被放在这里。项目结构：

.
├─ docs
│  ├─ README.md
│  └─ .vuepress
│     └─ config.js
└─ package.json

# 2.添加 config.js，

在 .vuepress 文件夹下添加 config.js，配置网站的标题和描述：

module.exports = {
  title: 'xxx学习 文档',
  description: 'xxx'
}

# 3.添加导航栏

我们现在在页首的右上角添加导航栏，修改 config.js:

module.exports = {
    title: '...',
    description: '...',
    themeConfig: {
        nav: [
            { text: '首页', link: '/' },
            {
                text: '小小灿的 Study 日记',
                items: [
                    { text: 'Github', link: 'https://github.com/lichengcan' }
                ]
            }
        ]
    }
}

# 4.添加侧边栏

添加一些 md 文档，目前文档的目录如下：

.
├─ docs
│  ├─ README.md
│  └─ .vuepress
│     └─ config.js
|  └─ handbook
|  	  └─ ConditionalTypes.md
|	  └─ Generics.md
└─ package.json

# 5.更换主题

目录和导航功能已经实现，想要加载 loading、切换动画、模式切换（暗黑模式）、返回顶部、评论等功能呢，直接使用主题

安装 vuepress-theme-reco：

npm install vuepress-theme-reco --save-dev 或者yarn add vuepress-theme-reco

然后在 config.js 里引用该主题：

module.exports = {
  theme: 'reco'
}

# 6.添加文章信息

可能会发现的问题，像条件类型这一篇文章，条件类型（Conditional Types） 竟然出现了两遍，这是因为这个主题自动提取了第一个大标题作为本文的标题，在每篇文章的 md 文件中添加一些信息修改：

---
title: 标题
author: 承灿
date: '2023-05-20'
---

# 7.设置语言

注意，上图的文章时间，写入的格式为 2021-12-12 ，但是显示的是 12/12/2021，这是因为 VuePress 默认的 lang 为 en-US，修改一下 config.js：

module.exports = {
  // ...
  locales: {
    '/': {
      lang: 'zh-CN'
    }
  },
  // ...
}

# 8.开启目录结构

而 vuepress-theme-reco 将原有的侧边栏的中的多级标题移出，生成子侧边栏，放在了页面的右侧，如果要全局开启，在页面 config.js 里设置开启：

module.exports = {
  themeConfig: {
    subSidebar: 'auto'
  }
}

# 9.修改主题颜色

你可以创建一个 .vuepress/styles/palette.styl 文件，文件代码如下：

$accentColor = #3178c6

更多的颜色修改参考 VuePress (opens new window) 官方文档

# 10.自定义修改样式

而 VuePress 提供了一种添加额外样式的简便方法。可以创建一个 .vuepress/styles/index.styl 文件。这是一个 Stylus 文件，也可以使用正常的 CSS 语法。

在 .vupress 文件夹下创建这个目录，然后创建 index.styl 文件，代码如下：

.dark .content__default code {
    background-color: rgba(58,58,92,0.7);
    color: #fff;
}

那之前提到的隐藏每篇文章的标题、作者、时间呢，其实也是类似的方式：

.page .page-title {
   display: none;
}

Vuepress 部署 GitHub