vuepress-theme-ting

github项目

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

预览地址

版本

第一版1.4.5

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

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

npm i vuepress-theme-ting@1.4.5

第二版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哟~

有看板娘的vuepress-theme-ting清新简易主题相关推荐

快来给你的Hexo博客招募亿只live2d看板娘吧(๑•̀ㅂ•́)و✧
首先:本文基于CentOS 8.5 64位,其他操作系统请注意修改对应命令关键字,并且本文只介绍Hexo部署的方法和过程文章目录前情提要〇.懒人版一.环境配置二.插件安装三.自建api 1 ...
Hexo博客优化：在Next主题中设置进阶版Live2D看板娘————拒绝踩坑！！！！
最初级的用法使用官方包安装,安装非常简单,但效果一般 hexo live-2d地址:https://github.com/xiazeyu/live2d-widget-models git命令行中输入 ...
Hexo 中 Butterfly主题和看板娘的使用
默认的 Hexo 主题为 landscape,我选择了 Butterfly 作为博客主题 Butterfly 主题使用 Butterfly 安装 Git 安装在博客的根目录执行 git clone ...
Docker系列 WordPress系列国服最强博客看板娘没有之一
转自我的个人博客https://blognas.hwb0307.com.欢迎关注! 前言在<Docker系列 WordPress系列特效>教程中,你应该已经学会怎么使用一个CDN看板娘 ...
Hexo 优化配置汇总【GitHub Actions 看板娘数学公式标签云 README 转义问题】
服务器快到期了,这几天迁移到 GitHub 上,用免费的 GitHub Pages 重新部署下杰森的博客 .以下样式及优化配置基于 Hexo,主题 Next 文章目录 GitHub Actions ...
Hexo个人博客主题和看板娘
Hexo博客美化一.博客主题 1.下载主题 2.更改配置二.看板娘 1.添加看板娘 2.定制看板娘一.博客主题 1.下载主题 Hexo官网有很多主题可供选择,可以去找到一款自己喜欢的主题. He ...
Hexo 博客添加 3D 看板娘替换原来的 Live2D
0.前言前两天用 VRoid Studio 捏了一个 3D 的 loli ,后来想想能不能把这个 3D 形象替换到那个博客站点的原来的 Live2D 看板娘那边去.花了一上午时间在 GitHub 上 ...
搭建博客hexo 安装hexo、配置hexo、hexo主题美化和添加live2d看板娘--详细步骤
一.安装hexo 1.下载安装软件 git:https://git-scm.com/downloads node:https://nodejs.org/en/ 2.安装好两个工具之 ...
(三) 给你的博客添加看板娘(Live2D)HEXO+icarus
HEXO+icarus主题给博客添加看板娘(Live2D) 最近在很多博客左下角或者右下角有看到小人(看板娘),折腾了一番搜到的都没有达到预期的效果,并且大多数教程都是基于Next来做的,本人使用的 ...
用html5看板娘,HEXO+icarus主题给博客添加看板娘(Live2D)
最近在很多博客左下角或者右下角有看到小人(看板娘),折腾了一番搜到的都没有达到预期的效果,并且大多数教程都是基于Next来做的,本人使用的主题是Icarus,跟Next有细微的区别.后面找到了大神的作 ...

有看板娘的vuepress-theme-ting清新简易主题

vuepress-theme-ting

预览地址

版本

第一版1.4.5

第二版2.x.x

新增功能

默认换装看板娘2.x.x

自定义看板娘

图灵对话机器人2.x.x

鸣谢

导语

前期工作

下载主题

配置

指令操作

预览地址

文档设置

注意

效果图

主页

目录

内容

其他

手机端预览效果

全部配置

感谢阅读

其他

有看板娘的vuepress-theme-ting清新简易主题相关推荐

最新文章

热门文章