Cloud-Link's blog Cloud-Link's blog
首页
  • 开发资源
  • 人员动态
  • 新人训练
  • 奖惩通报
  • 通讯录
项目资产
  • 快速指南
  • 后端框架
  • 前端框架
  • 业务模块
  • 基础理论
    • 前端
    • 后端
    • 数据库
    • 工具类
  • 常用
  • 网站
  • 资源
  • Vue资源
  • 分类
  • 标签
  • 归档
关于
首页
  • 开发资源
  • 人员动态
  • 新人训练
  • 奖惩通报
  • 通讯录
项目资产
  • 快速指南
  • 后端框架
  • 前端框架
  • 业务模块
  • 基础理论
    • 前端
    • 后端
    • 数据库
    • 工具类
  • 常用
  • 网站
  • 资源
  • Vue资源
  • 分类
  • 标签
  • 归档
关于
  • 前端

  • 后端

  • 数据库

  • 工具类

    • Vepress

      • 介绍
      • 快速上手
      • 目录结构
      • 核心配置和约定
        • 文档编写和一级标题
        • 自动生成front matter
        • 批量操作front matter工具
        • Markdown 容器
        • Markdown使用教程
        • Markdown 中使用组件
        • 提高文档表现力
      • Git

      • npm

    • Vue

    • TypeScript

    • React

    • 知识库
    • 工具类
    • Vepress
    2021-06-18

    核心配置和约定

    本主题遵循“约定优于配置”原则,如果你想构建一个结构化的站点,需要遵循下面这些约定,约定可以为你省去很多配置,轻松拥有一个结构清晰的站点。

    你需要在config.js中有如下配置:

    // config.js
    module.exports = {
      themeConfig: {
         sidebar: 'structuring' //  'structuring' | { mode: 'structuring', collapsable: Boolean} | 'auto' | 自定义
      }
    }
    
    1
    2
    3
    4
    5
    6

    在运行开发服务npm run dev或打包npm run build时主题内部将会按照目录约定自动生成一个结构化的侧边栏、目录页、面包屑等数据。

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

    # 命名约定

    • 无论是文件还是文件夹,请为其名称添加上正确的正整数序号和.,从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. 必须有序号
    • 三级目录
      • (同上)
    • 四级目录 v1.6.0 +
      1. 该级别下只能放.md文件。
      2. 必须有序号

    所有级别内至少有一个文件或文件夹。

    # 目录结构例子

    .
    ├── docs
    │   │  (不参与数据生成)
    │   ├── .vuepress
    │   ├── @pages
    │   ├── _posts
    │   ├── index.md
    │   │
    │   │ (以下部分参与数据生成)
    │   ├── 01.前端
    │   │   ├── 01.JavaScript
    │   │   |   ├── 01.js1.md
    │   │   |   ├── 02.js2.md
    │   │   |   └── 03.js3.md
    │   │   └── 02.vue
    │   │   |   ├── 01.vue1.md
    │   │   |   └── 02.vue2.md
    │   ├── 02.其他
    │   │   ├── 01.学习
    │   │   |   ├── 01.xxa.md
    │   │   |   └── 02.xxb.md
    │   │   ├── 02.学习笔记
    │   │   |   ├── 01.xxa.md
    │   │   |   └── 02.xxb.md
    │   │   ├── 03.文件x.md
    │   │   └── 04.文件xx.md
    │   └── 03.关于我
    │   │   └── 01.关于我.md
    .   .
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29

    # 如何知道侧边栏数据有没有正确生成?

    在运行开发服务时(npm run dev),在命令行查看打印记录,如果正确生成会有这样的绿色提示记录:

    tip: add sidebar data. 侧边栏数据添加成功。
    
    1

    如果有未按约定的文件,会有黄色警告记录,如:

    warning:  该文件'xxx'序号出错,请填写正确的序号。
    
    1
    目录结构
    文档编写和一级标题

    ← 目录结构 文档编写和一级标题→

    Copyright © 2021-2022 用技术改变世界 | Tungray Cloud-Link
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式
    ×