vuepress-theme-reco

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

预览

首页

分类页面

标签页

文章页面

加密登录页

时间轴

移动端

安装和使用

1. 安装

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

2. 使用

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

添加分类

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

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

   // change /docs/.vuepress/config.js
   
   module.exports = {
     theme: 'reco',
     themeConfig: {
       nav: [
         { text: 'categories', 
           items: [
             { text: 'frontEnd', link: '/categories/frontEnd' },
             { text: 'backEnd', link: '/categories/backEnd' }
           ]
         }
       ]
     }  
   }  
   

2. 添加分类所需的文件

   /docs/categories/frontEnd.md

   --- 
   title: frontEnd  
   isCategories: true  
   sidebar: false  
   isComment: false
   ---
   
   ## FrontEnd
   

   /docs/categories/backEnd.md

   ---
   title: backEnd
   isCategories: true
   sidebar: false
   isComment: false
   ---
   
   ## BackEnd
   

   你为什么设置侧边栏是假的？因为您启用了分类，这与自定义侧边栏功能有点冲突，所以您全局打开自动侧边栏功能，然后在不需要侧标记的地方关闭它

3. 撰写文章时添加类别

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

   请记住， categories 文件的相应 title 值和相应的分类值是一致的。

添加标签云

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

   // change /docs/.vuepress/config.js
   
   module.exports = {
     theme: 'reco',
     themeConfig: {
       nav: [
         { text: 'Tags', link: '/tags/' }
       ]
     }    
   }  
   

2. 添加所需的文件

   /docs/tags/README.md

   ---
   isTags: true
   sidebar: false
   isComment: false
   ---
   
   ## tag cloud
   

3. 在撰写文章时添加标签

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

添加时间轴

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
   tags:
   - vue
   - webpack
   ---
   

添加摘要

效果：

相应的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