更新说明文档
This commit is contained in:
reco_luan
parent
5c07cc09f2
commit
202bf1b84e
243
README.md
243
README.md
@ -4,9 +4,10 @@
|
||||
|
||||
|
||||
|
||||
> 1. 这是一个vuepress主题，旨在添加博客所需的类别，TAB墙，分页，评论和其他功能，适合 `vuepress 1.x`;<br>
|
||||
> 2. 主题本身是极简主义的，并根据vuepress的默认主题进行修改;<br>
|
||||
> 3. 你可以打开 http://recoluan.gitlab.io 来查看它。
|
||||
> 1. 这是一个vuepress主题，旨在添加博客所需的分类、TAB墙、分页、评论等能；
|
||||
> 2. 主题追求极简，根据 vuepress 的默认主题修改而成，官方的主题配置仍然适用；
|
||||
> 3. 效果：[午后南杂](http://recoluan.gitlab.io)
|
||||
> 4. 文档：[vuepress-theme-reco-doc](https://recoluan.gitlab.io/vuepress-theme-reco-doc)
|
||||
|
||||
## 预览
|
||||
|
||||
@ -36,241 +37,5 @@
|
||||
### 移动端
|
||||
|
||||
|
||||
## 安装和使用
|
||||
|
||||
1. 安装
|
||||
|
||||
```bash
|
||||
npm install vuepress-theme-reco@next -dev--save
|
||||
|
||||
# or
|
||||
|
||||
yarn add vuepress-theme-reco@next
|
||||
```
|
||||
|
||||
2. 使用
|
||||
|
||||
```javscript
|
||||
// 修改 /docs/.vuepress/config.js
|
||||
|
||||
module.exports = {
|
||||
theme: 'reco'
|
||||
}
|
||||
```
|
||||
|
||||
## 添加分类和标签云
|
||||
|
||||
**如果要添加 `front-end` 分类 和 标签云，需要进行以下步骤：**
|
||||
|
||||
1. 在顶部导航中添加类别下拉按钮
|
||||
|
||||
```javscript
|
||||
// 修改 /docs/.vuepress/config.js
|
||||
|
||||
module.exports = {
|
||||
theme: 'reco',
|
||||
themeConfig: {
|
||||
// 博客设置
|
||||
blogConfig: {
|
||||
category: {
|
||||
location: 2, // 在导航栏菜单中所占的位置，默认2
|
||||
text: 'Category' // 默认 “分类”
|
||||
},
|
||||
tag: {
|
||||
location: 3, // 在导航栏菜单中所占的位置，默认3
|
||||
text: 'Tag' // 默认 “标签”
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
2. 撰写文章时添加类别
|
||||
|
||||
```
|
||||
---
|
||||
title: 【vue】跨域解决方案之proxyTable
|
||||
date: 2017-12-28
|
||||
categories:
|
||||
- frontEnd
|
||||
tags:
|
||||
- vue
|
||||
---
|
||||
```
|
||||
|
||||
> 请注意， `categories` 和 `categories` 要以数组的方式填写。
|
||||
|
||||
## 添加时间轴
|
||||
|
||||
1. 在顶部导航中添加一个按钮
|
||||
|
||||
```javscript
|
||||
// change /docs/.vuepress/config.js
|
||||
|
||||
module.exports = {
|
||||
theme: 'reco',
|
||||
themeConfig: {
|
||||
nav: [
|
||||
{ text: 'TimeLine', link: '/timeLine/', icon: 'reco-date' }
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
2. 添加所需的文件
|
||||
|
||||
**`/docs/timeLine/README.md`**
|
||||
|
||||
```
|
||||
---
|
||||
isTimeLine: true
|
||||
sidebar: false
|
||||
isComment: false
|
||||
---
|
||||
|
||||
## Time Line
|
||||
```
|
||||
|
||||
3. 在撰写文章时添加日期
|
||||
|
||||
```
|
||||
---
|
||||
title: 【vue】跨域解决方案之proxyTable
|
||||
date: 2017-12-28
|
||||
---
|
||||
```
|
||||
|
||||
> 请注意，本主题所有的时间都是以 `date` 为标准，不会以最后更新时间为标准。
|
||||
|
||||
## 添加摘要
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
相应的markdown：
|
||||
|
||||
|
||||
|
||||
在markdown代码中，您将看到注释，注释前面的代码将显示在列表页面上的文章摘要中。
|
||||
|
||||
## 评论(valine)
|
||||
|
||||
带有内置了valine评论功能，如果要打开此功能，只需配置你的 `config.js`
|
||||
|
||||
```javscript
|
||||
// 更改 /docs/.vuepress/config.js
|
||||
|
||||
module.exports = {
|
||||
theme: 'reco',
|
||||
themeConfig: {
|
||||
// valine
|
||||
valineConfig: {
|
||||
appId: '...',// your appId
|
||||
appKey: '...', // your appKey
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 加入加密功能
|
||||
|
||||
有些项目可能具有私密性，不希望被公开，只有填入密钥登录后（关闭标签后登录失效），才能进入内容页面。
|
||||
|
||||
```javscript
|
||||
// 更改 /docs/.vuepress/config.js
|
||||
|
||||
module.exports = {
|
||||
theme: 'reco',
|
||||
themeConfig: {
|
||||
// 密钥
|
||||
keyPage: {
|
||||
keys: ['930105'],
|
||||
color: '#fb9b5f', // 登录页动画球的颜色
|
||||
lineColor: '#fb9b5f' // 登录页动画线的颜色
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Config.js
|
||||
|
||||
1. 在移动端，搜索框在获得焦点时会放大，并且在失去焦点后可以左右滚动，这可以通过设置元来优化。
|
||||
|
||||
```javascript
|
||||
module.exports = {
|
||||
head: [
|
||||
['meta', { name: 'viewport', content: 'width=device-width,initial-scale=1,user-scalable=no' }]
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
2. 您可以在导航菜单中添加图标，如下所示：
|
||||
|
||||
```javascript
|
||||
{ text: 'Tags', link: '/tags/', icon: 'reco-tag' }
|
||||
```
|
||||
|
||||
该项目有内置图标供您选择
|
||||
|
||||
|
||||
|
||||
3. 设置全局作者姓名
|
||||
|
||||
```javascript
|
||||
module.exports = {
|
||||
themeConfig: {
|
||||
// author
|
||||
author: 'reco_luan',
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
4. 为单篇文章设置作者姓名
|
||||
|
||||
```bash
|
||||
---
|
||||
title: 你还没真的努力过，就轻易输给了懒惰
|
||||
date: 2015-04-23
|
||||
categories: article
|
||||
author: 渡渡
|
||||
---
|
||||
```
|
||||
|
||||
|
||||
## 首页配置
|
||||
|
||||
1. 如果您的heroImage具有您的网站标题，则可能需要设置值 `isShowTitleInHome` `false` 以使标题不显示。
|
||||
|
||||
```bash
|
||||
# this is your homepage
|
||||
|
||||
---
|
||||
home: true
|
||||
heroImage: /hero.png
|
||||
isShowTitleInHome: false
|
||||
---
|
||||
```
|
||||
|
||||
2. 如果你想改变heroImage的风格，你可以设置值 `heroImageStyle` 来实现你想要的效果
|
||||
|
||||
```bash
|
||||
# 这是你的主页
|
||||
|
||||
---
|
||||
home: true
|
||||
heroImage: /hero.png
|
||||
heroImageStyle: {
|
||||
maxHeight: '200px',
|
||||
display: block,
|
||||
margin: '6rem auto 1.5rem',
|
||||
borderRadius: '50%',
|
||||
boxShadow: '0 5px 18px rgba(0,0,0,0.2)'
|
||||
}
|
||||
---
|
||||
```
|
||||
|
||||
3. 无法再随意编辑主页页脚，只能更改所有者的名称。将首先显示全局作者姓名，否则将显示博客的标题
|
||||
|
||||
## License
|
||||
[MIT](https://github.com/recoluan/vuepress-theme-reco/blob/master/LICENSE)
|
||||
Loading…
Reference in New Issue
Block a user