快速上手

# 安装与启动

# clone the project
git clone https://github.com/xugaoyi/vuepress-theme-vdoing.git

# enter the project directory
cd vuepress-theme-vdoing

# install dependency
npm install # or yarn install

# develop
npm run dev # or yarn dev

1
2
3
4
5
6
7
8
9
10
11

# 简介

修改 `docs/.vuepress/config.js的菜单配置，删掉一些不需要的文件，快速搭建一个结构化的知识文档库
具体使用方式查看 vuepress-theme-vdoing

# 技术相关

1、使用尤小右 VuePress 开源框架基于vue的静态网站生成器
2、主题使用 vuepress-theme-vdoing

vuepress诞生初衷是为了支持vue及其子项目的文档需求，它以markdown为中心的项目结构，以最少的配置帮助你专注于写作；享受 Vue + webpack 的开发体验，可以在 Markdown 中使用 Vue 组件，又可以使用 Vue 来开发自定义主题；它会为每个页面预渲染生成静态的 HTML，同时，每个页面被加载的时候，将作为 SPA 运行

提示

因此，如果不是要去搭建个人博客，不必深入研究具体的实现逻辑，而只关注于文档写作

# 目录相关

├── docs (必须，不要修改文件夹名称)
│   ├── .vuepress （同官方，查看：https://vuepress.vuejs.org/zh/guide/directory-structure.html#目录结构）
│   ├── @pages (可选，自动生成的文件夹，存放分类页、标签页、归档页)
│   ├── <结构化目录>
│   └── index.md (首页)
├── theme-vdoing (可选，本地的vdoing主题，非必要还是使用node_modules中的theme-vdoing)
├── utils  (可选，vdoing主题使用的node工具)
│   ├── modules
│   ├── config.yml (可选，批量操作front matter配置)
│   ├── editFrontmatter.js (可选，批量操作front matter工具)
├── baiduPush.sh (可选，百度推送命令脚本)
├── deploy.sh (可选，部署命令脚本)
│
└── package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 站点配置及约定

# 目录结构

	.
├── 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
.   .

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

# 命名约定

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

提示

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

# 级别说明

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

vuepress、@pages、_posts、index.md 或 README.md 这些文件(文件夹)不参与数据生成。
序号非必须。（如一些专栏，可以不用序号)

该级别下可以同时放文件夹和.md文件，但是两者序号要连贯（参考下面的例子中的其他）。
必须有序号

该级别下只能放.md文件。
必须有序号
所有级别内至少有一个文件或文件夹。

# 自动生成front matter

当你没有给.md文件的front matter (opens new window)指定标题(title)、时间(date)、永久链接(permalink)、分类(categories)、标签(tags)时，在运行开发服务npm run dev或打包npm run build时将自动为你生成这些数据，你也可以自己手动设置这些数据，当你手动设置之后，相应的数据就不会再自动生成。

# 生成示例

---
title: 《JavaScript教程》笔记 #标题
date: 2020-01-12 11:51:53 #生成日期
permalink: /pages/d8cae9 #永久链接
categories: #分类
  - 前端
  - JavaScript
tags: #标签
  - 
author: #作者信息
  name: jiangchaolan
  link: https://github.com/julie7366
---

1
2
3
4
5
6
7
8
9
10
11
12
13

注意

下面配置类文件改完需重启服务才生效

	---
	home: true
	# heroImage: /img/web.png
	heroText: Ni Ni blog
	tagline: web前端技术博客，爱学习，爱劳动，长大要为人民立功劳。
	
	features: # 可选的
	  - title: 编程
	    details: JavaScript、ES6、Vue框架等前端技术
	    link: /web/ # 可选
	    imgUrl: /img/web.png # 可选
	  - title: 文集
	    details: 激发内心的小怪兽
	    link: /ui/
	    imgUrl: /img/ui.png
	  - title: 文档
	    details: 记录生活中的每一个精彩瞬间
	    link: /docs/
	    imgUrl: /img/other.png
	---

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# markdown相关语法

参考地址

编辑

上次更新: 2021/07/22, 09:07:42

← GitHub + jsDelivr + TinyPNG+ PicGo 打造稳定快速、高效免费图床部署到github→