vuepress-theme-ting
這是一個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喲~