有看板娘的vuepress-theme-ting清新简易主题
vuepress-theme-ting
github项目
这是一个vuepress主题，主要功能有博客归档分类，以及留言，个人展示等；主题追求极简，根据 vuepress 的默认主题修改而成，官方的主题配置仍然适用；
这是一个看板娘小清新vuepress主题，主要功能有博客归档分类，以及留言，个人展示等；主题追求极简，根据 vuepress 的默认主题修改而成，官方的主题配置仍然适用；
预览地址
预览地址
版本
第一版1.4.5
看板娘需在配置目录下设置路径。
-
-
如果你喜欢最初风格的版本：为1.4.5
npm i [email protected]
第二版2.x.x
- 支持默认换装看板娘
- 图灵对话机器人
npm i vuepress-theme-ting
UI风格我个人感觉还有待改进，我个人不是很喜欢哈哈哈~
最近在致力于编写一个小清新风格的ui组件库要运用到本主题中，所以进度会比较慢。
新增功能
默认换装看板娘2.x.x
自动换装88套衣服，琳琅满目~，截图不过来了。
自定义看板娘
- 本主题支持看板娘，由于live2d读取模型文件，你可以选择自己喜欢的看板娘，在配置时填写路径就可以了。
如果你不喜欢默认的看板娘模型，可以在config.js里增加看板娘路径。
module.exports = {
……
head: [
……
],
themeConfig: {
……
live2dModel: '/live2d/model/poi/poi.model.json', //live2d模型路径
……
}
}
- 其他待补充
图灵对话机器人2.x.x
可以与机器人聊天，并且播放语音；
鸣谢
| 支持者 | 支持内容 |
|---|---|
| mumudadi | 提供图灵机器人后台技术支持。 |
导语
你是否喜欢这个vuepress主题呢？
按照步骤来，你也可以使用这样的主题哦。以下是具体的配置使用过程。
前期工作
新建项目project，在project下新建一个docs文件夹和一个package.json文件
- 文件目录
project
│
├─── docs
│
└─── package.json
- 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"
}
下载主题
npm i vuepress-theme-ting
npm i
- 目录结构
project
│
├─ docs
│
├─ package.json
│
└─ node_modules
配置
在docs目录下新建README.md、catalog.md、.vuepress文件夹；在.vuepress文件下新建config.js文件；
project
│
├─ docs
│ │
│ ├─ README.md
│ │
│ ├─ catalog.md
│ │
│ └─.vuepress
│ │
│ └─config.js
│
├─ package.json
│
└─ node_modules
- config.js内容
module.exports = {
title: 'YATING',//网站名称
description: '用心写代码，不辜负程序员之名',//网站描述
themeConfig: {
nav: [//导航栏
{
text: '主页', link: '/' },
{
text: '目录',link:'/catalog'}
],
catalogUrl:'/catalog',//必填 目录路径
lastUpdated: 'Last Updated',//必填：文章显示最新修改时间
},
theme:'ting'//必填：使用vuepress-theme-ting 主题
}
- README.md
---
layout: index
title: Home
showMessage: false
---
# vuepress-theme-ting
> 如果你喜欢这个主题可以给我一个start，谢谢
## 欢迎使用
- catalog.md
---
layout: catalog
---
layout:表示当前使用catalog页面；
title：md文件标题，注意：命名为Home本主题均自动忽略；
指令操作
- 本地预览
npm run dev
最终效果图如下：
-
-
打包
npm run build
预览地址
预览地址
文档设置
md文档抬头以下列格式为例：
---
layout: index
title: Home
showMessage: false
---
layout：默认值为空，为文章内容页
catalog：表示当前页为目录页面；
index：表示为主页；
layout：默认文章内容（无需设置）
当前文章属性
---
img:url
title：文章标题
showMessage：是否显示留言栏，侧边栏；默认为true
---
注意：文章的图片若保存在.vuepress/public/img/hello.jpg路径下，对应图片将在目录中展示；
则相应的，请将img的值设置为：/img/hello.jpg
对应图片效果为：
注意
例如以下目录结构：
project
│
├─ docs
│ │
│ ├─ README.md
│ │
│ ├─ catalog.md
│ │
│ └─.vuepress
│ │ │
│ │ └─config.js
│ └─ 你的文档
│
├─ package.json
│
└─ node_modules
效果图
主页
目录
内容
其他
手机端预览效果
全部配置
// .vuepress/config.js
module.exports = {
title: 'YATING',//网站名称
description: '用心写代码，不辜负程序员之名',//网站描述
//head标签
head: [
['link', {
rel: 'stylesheet', href: '/img/logo.ico' }],//注意"/"就是public资源目录。标签的logo
['script', {
src: 'https://cdn.bootcss.com/jquery/3.4.1/jquery.js' }]
],
themeConfig: {
author:'tinger',
headImg:'https://yating.online/res/img/yating.jpg',//选填：头像
//导航栏
nav: [
{
text: '主页', link: '/' },
{
text: '目录',link:'/config/catalog'},
{
text: '项目列表', link: '/config/about' },
{
text: 'Github',type:'url', link: 'https://github.com/Chenyating' },
],
catalogUrl:'/catalog',//必填 目录路径
lastUpdated: 'Last Updated',//必填：文章显示最新修改时间
smoothScroll: true,//选填
//选填/live2d模型路径
live2dModel:'/live2d/model/poi/poi.model.json',
pageNum:5,//选填：目录每页显示条数
gitalk:{
//选填：gitalk留言设置
clientID: '5b8613cfe15e02db85b7',
clientSecret: 'd4129094c33b8da73e873470fb89aea53dfaf396',
repo: 'Chenyating.github.io',
owner: 'chenyating',
admin: ['Chenyating'],
distractionFreeMode: false // Facebook-like distraction free mode
},
footer:'粤ICP备案号：18150247号'//选填
},
theme:'ting'//必填：使用vuepress-theme-ting 主题
}
感谢阅读
如果你喜欢这个主题，请给我一个start，给予我一个鼓励吧蟹蟹
github项目
其他
如果你在使用过程中遇到什么问题，可以与我联系，记得给我个start哟~