# vuepress-theme-ting

这是一个vuepress主题，主要功能有博客归档分类，以及留言，个人展示等；主题追求极简，根据 vuepress 的默认主题修改而成，官方的主题配置仍然适用；

# 预览地址

# 版本

# 第三版：3.0.0

如果你喜欢当前页面的版本

npm i vuepress-theme-ting

# 第一版1.4.5

看板娘需在配置目录下设置路径。

如果你喜欢最初风格的版本：为1.4.5

npm i vuepress-theme-ting@1.4.5

# 第二版2.x.x

支持默认换装看板娘
图灵对话机器人

npm i vuepress-theme-ting

# 导语

你是否喜欢这个vuepress主题呢？按照步骤来，你也可以使用这样的主题哦。以下是具体的配置使用过程。

# 前期工作

新建项目project，在project下新建一个docs文件夹和一个package.json文件

project
│
├─── docs
│
└─── package.json

1
2
3
4
5

package.json内容

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "directories": {
    "doc": "docs"
  },
  "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

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

# 下载主题

npm i vuepress-theme-ting

project
│ 
├─ docs  //你放置md文档的地方
│
├─ package.json  //你的依赖包json
│
└─  node_modules   //依赖包

1
2
3
4
5
6
7

# 配置

在docs目录下新建README.md、.vuepress文件夹；在.vuepress文件下新建config.js文件；

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

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

config.js内容

module.exports = {
    title: 'YATING',//网站名称
    themeConfig: {
        lastUpdated: 'Last Updated',//必填：文章显示最新修改时间
        smoothScroll: true,
    },
    theme:'ting'//必填：使用vuepress-theme-ting 主题
}

1
2
3
4
5
6
7
8

# 指令操作

本地预览

npm run dev

打包

npm run build

# 预览地址

预览地址 (opens new window)

# 注意

例如以下目录结构：

project
│ 
├─ docs
│   │
│   ├─ README.md
│   │
│   └─.vuepress
│   │   │
│   │   └─config.js
│   └─ 你的文档
│
├─ package.json
│
└─  node_modules

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

# 全部配置

// .vuepress/config.js
module.exports = {
    title: 'YATING',//网站名称
    //head标签
    head: [
        ['link', { rel: 'stylesheet', href: '/img/logo.ico' }],//注意"/"就是public资源目录。标签的logo
        ['script', { src: 'https://cdn.bootcss.com/jquery/3.4.1/jquery.js' }]
    ],
    themeConfig: {
        lastUpdated: 'Last Updated',//必填：文章显示最新修改时间
        smoothScroll: true,//选填
        //选填/live2d模型路径
        live2dModel:'/live2d/model/poi/poi.model.json',
        gitalk:{//选填：gitalk留言设置
            clientID: '5b8613cfe15e02db85b7',
            clientSecret: 'd4129094c33b8da73e873470fb89aea53dfaf396',
            repo: 'Chenyating.github.io',
            owner: 'chenyating',
            admin: ['Chenyating'],
            distractionFreeMode: false // Facebook-like distraction free mode
        },
        author :{
            name: "YaTing",
            description: '用心写代码，不辜负程序员之名', //网站描述
            headImg: '/img/yating.jpeg', //头像
            // 首页轮播描述信息
            infolist: [{
                txt: "做的小布丁",
                img: "/img/tutu.jpg"
            },
            {
                txt: "我做的",
                img: "/img/nuomizi.jpg"
            },
            {
                txt: "欢迎来我的世界哦",
            },
    ]
}
    },
    theme:'ting'//必填：使用vuepress-theme-ting 主题
}

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
30
31
32
33
34
35
36
37
38
39
40
41
42

# 感谢阅读

如果你喜欢这个主题，请给我一个start，给予我一个鼓励吧~蟹蟹~ github项目 (opens new window)

# 其他

如果你在使用过程中遇到什么问题，可以与我联系哟～