vuepress-theme-reco

1. 这是一个vuepress主题，旨在添加博客所需的类别，TAB墙，分页，评论和其他功能，适合 vuepress 1.x;
   
2. 主题本身是极简主义的，并根据vuepress的默认主题进行修改;
   
3. 你可以打开 http://recoluan.gitlab.io 来查看它。

预览

首页

分类页面

标签页

文章页面

加密登录页

时间轴

移动端

安装和使用

1. 安装

   npm install vuepress-theme-reco@next -dev--save
   
   # or
   
   yarn add vuepress-theme-reco@next
   

2. 使用

   // 修改 /docs/.vuepress/config.js
   
   module.exports = {
     theme: 'reco'
   }  
   

添加分类和标签云

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

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

   // 修改 /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. 在顶部导航中添加一个按钮

   // 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

// 更改 /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

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

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

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

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

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

3. 设置全局作者姓名

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

4. 为单篇文章设置作者姓名

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

首页配置

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

# this is your homepage

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

2. 如果你想改变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)'
}
---

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

License

MIT