reco_luan a1646763b6 vuepress-theme-reco@1.x开始公测

2019-04-09 11:56:58 +08:00

6.5 KiB

Raw Blame History

vuepress-theme-reco

这是一个vuepress主题，旨在添加博客所需的类别，TAB墙，分页，评论和其他功能，适合 vuepress 1.x;

主题本身是极简主义的，并根据vuepress的默认主题进行修改;

你可以打开 http://recoluan.gitlab.io 来查看它。

预览

首页

分类页面

标签页

文章页面

加密登录页

时间轴

移动端

安装和使用

安装

npm install vuepress-theme-reco@next -dev--save

# or

yarn add vuepress-theme-reco@next

使用

// 修改 /docs/.vuepress/config.js

module.exports = {
  theme: 'reco'
}

添加分类和标签云

如果要添加 front-end 分类和标签云，需要进行以下步骤：

在顶部导航中添加类别下拉按钮

// 修改 /docs/.vuepress/config.js

module.exports = {
  theme: 'reco',
  themeConfig: {
    // 博客设置
    blogConfig: {
      category: {
        location: 2, // 在导航栏菜单中所占的位置，默认2
        text: 'Category' // 默认 “分类”
      },
      tag: {
        location: 3, // 在导航栏菜单中所占的位置，默认3
        text: 'Tag' // 默认 “标签”
      }
    }
  }  
}

撰写文章时添加类别

---
title: 【vue】跨域解决方案之proxyTable  
date: 2017-12-28
categories: 
 - frontEnd
tags: 
 - vue  
---

请注意， categories 和 categories 要以数组的方式填写。

添加时间轴

在顶部导航中添加一个按钮

// change /docs/.vuepress/config.js

module.exports = {
  theme: 'reco',
  themeConfig: {
    nav: [
      { text: 'TimeLine', link: '/timeLine/', icon: 'reco-date' }
    ]
  }    
}

添加所需的文件

/docs/timeLine/README.md

---
isTimeLine: true
sidebar: false
isComment: false
---

## Time Line

在撰写文章时添加日期
```
---
title: 【vue】跨域解决方案之proxyTable  
date: 2017-12-28
---
```
请注意，本主题所有的时间都是以 date 为标准，不会以最后更新时间为标准。

添加摘要

效果：

相应的markdown：

在markdown代码中，您将看到注释，注释前面的代码将显示在列表页面上的文章摘要中。

评论(valine)

带有内置了valine评论功能，如果要打开此功能，只需配置你的 config.js

// 更改 /docs/.vuepress/config.js

module.exports = {
  theme: 'reco',
  themeConfig: {
    // valine
    valineConfig: {
      appId: '...',// your appId
      appKey: '...', // your appKey
    }
  }  
}

加入加密功能

有些项目可能具有私密性，不希望被公开，只有填入密钥登录后（关闭标签后登录失效），才能进入内容页面。

// 更改 /docs/.vuepress/config.js

module.exports = {
  theme: 'reco',
  themeConfig: {
    // 密钥
    keyPage: {
      keys: ['930105'],
      color: '#fb9b5f', // 登录页动画球的颜色
      lineColor: '#fb9b5f' // 登录页动画线的颜色
    }
  }  
}

Config.js

在移动端，搜索框在获得焦点时会放大，并且在失去焦点后可以左右滚动，这可以通过设置元来优化。

module.exports = {
  head: [
    ['meta', { name: 'viewport', content: 'width=device-width,initial-scale=1,user-scalable=no' }]
  ]
}

您可以在导航菜单中添加图标，如下所示：

{ text: 'Tags', link: '/tags/', icon: 'reco-tag' }

该项目有内置图标供您选择

设置全局作者姓名

module.exports = {
  themeConfig: {
    // author
    author: 'reco_luan',
  }
}

为单篇文章设置作者姓名

---
title: 你还没真的努力过，就轻易输给了懒惰
date: 2015-04-23
categories: article
author: 渡渡
---

首页配置

如果您的heroImage具有您的网站标题，则可能需要设置值 isShowTitleInHome false 以使标题不显示。

# this is your homepage

---
home: true
heroImage: /hero.png
isShowTitleInHome: false
---

如果你想改变heroImage的风格，你可以设置值 heroImageStyle 来实现你想要的效果

# 这是你的主页 

---
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)'
}
---

无法再随意编辑主页页脚，只能更改所有者的名称。将首先显示全局作者姓名，否则将显示博客的标题

License

MIT

6.5 KiB Raw Blame History Unescape Escape