# vuepress-theme-cycle

npm LICENSE

🚲 一款基于VuePress的博客主题

我的个人博客也在使用该主题,因为目前的需求都是基于该博客的需求而定的,而且目前的版本也没有完美的承载这些需求,我会逐渐将这些功能更新到主题当中的。当然,对于这款主题如果有其他需求的朋友可以在issues当中发言,如果可行我会尽快加入最新的版本当中。

# 主题完成度

  • [x] 首页
  • [x] 三杯(博客列表)
  • [x] 两盏(图片展览馆)
  • [x] 淡酒(个人故事分享,类似树洞功能)
  • [x] 文章页
  • [ ] 分类列表页
  • [x] 搜索
  • [x] 评论
  • [x] 文章浏览统计
  • [ ] 订阅
  • [x] 移动端支持

# 版本更新

# v0.7.11(2019/9/11)

1.增加“淡酒”栏目

2.调整除首页外其他页面logo问题

# v0.7.10(2019/6/11)

vuepress更新为^1.0.1版本

# v0.7.9(2019/5/20)

1.样式整合为一个文件

2.404页面的背景图格式改为jpg,现在除PWA配置中的图标以及站点logo外,均使用jpg格式的图片(其他格式图片可以通过图片格式转换器进行格式转换)

# v0.7.6(2019/5/17)

增加主页图片lazyload,压缩字体包大小

# v0.7.5(2019/4/26)

解决iphone端页面滚动问题

# v0.7.0(2019/4/25)

1.整体样式更新,现在变得更加简洁了

2.做了移动端适配,现在通过移动端访问也不用担心页面走形

3.修改了文章搜索功能,现在的搜索结果是所有文章的标题列表

# v0.6.9(2019/4/16)

文章浏览统计功能可用(基于Valine

# v0.6.8(2019/4/15)

增加了文章的评论功能,需要在主题配置themeConfig当中增加idkey的配置项(评论功能使用的是Valine,使用前请先按照提示在LeanCloud注册,将相应的APP IDAPP Key值分别填入themeConfig中的idkey

# v0.6.6(2019/4/10)

1.增加了新的页面-画廊gallery/

现在可以将每篇文章对应的图片放大查看了,还增加了图片下载的功能;

2.增加了新页面-故事与酒story/

空白留存页

3.调整了文章页yaml的格式

删除了name和images项

4.调整了图片获取方式

public/images/posts/文件下,以文章名.jpg的方式命名后,主题会自动取得文章和图片的对应关系,另外目前文章图片只支持jpg格式,且文章名里如果想要添加其他符号,建议使用-,例如:文章名-1-1.md,对应图片名称则是文章名-1-1.jpg

# 安装

$ npm install vuepress-theme-cycle --save-dev

# 配置

在配置文件.vuepress/config.js当中,增加theme配置项,并将配置项的值设置为cycle

module.exports = {
  theme: 'cycle',
}

# themeConfig(v0.7.0)

在配置文件.vuepress/config.js当中,增加themeConfig配置项,并按照如下进行配置:

themeConfig: { 
      avatar:'images/avatar.jpg',                 //头像路径
      about:'',                                   //个人介绍
      mail:'',                                    //邮箱
      wechat:'',                                  //微信号
      subscription:'',                            //订阅文案
      id:'',                                      //[LeanCloud](https://leancloud.cn/)的APP ID                       v0.6.8新增
      key:'',                                     //[LeanCloud](https://leancloud.cn/)的APP Key                      v0.6.8新增
      menus:[                                     //导航菜单(v0.7.0只支持首页、博客和画廊)
        {name:'首页',value:'home',url:'/'},
        {name:'博客',value:'blog',url:'/posts/'}
        {name:'画廊',value:'gallery',url:'/gallery/'}
        {name:'故事与酒',value:'story',url:'/story/'}
      ],
      links:[                                     //其他社交链接
        {name:'github',url:''},
        {name:'weibo',url:''},
        {name:'instagram',url:'/'}
      ],
      categories:[                                //文章分类(v0.7.0暂未支持分类筛选)
        {name:'古韵',url:'/posts/'},
        {name:'当下',url:'/posts/'},
        {name:'斗酒话评',url:'/posts/'},
        {name:'酒巷小调',url:'/posts/'}
      ],
      footer: '©2018-2019 XXX博客',
      copyright: '备案号'
    }

# 目录格式(v0.7.7)

如下文件目录为根文件夹docs的具体格式,除两个posts/文件夹下的内容名称可以随意修改外,其他都名称不可修改:

├── .vuepress
|   ├── public/
|   |   ├── images/
|   |   |   ├── posts/                   
|   |   |   |   ├── post1-1.jpg
|   |   |   |   ├── post2-2.jpg
|   |   |   |   ├── ...
|   |   |   ├── 404.jpg   //v0.7.9版本,图片格式改为jpg
|   |   |   ├── avatar.jpg
|   |   |   ├── cgqz.jpg
|   ├── config.js
├── README.md
├── posts/
|   ├── README.md
|   ├── post1-1.md
|   ├── post2-2.md
|   ├── ...
├── gallery/
|   ├── README.md
├── story/
|   ├── README.md

# 文章配置项(v0.7.0)

---
title: 标题
createTime: 发文时间
introduce: 文章介绍
tags:                    #文章分类
- name: 分类1
- name: 分类2
- name: ...
prev: 上一篇文章          #填写格式为‘./文章名.html’(可填,或直接移除该分支)
next: 下一篇文章          #填写格式为‘./文章名.html’(可填,或直接移除该分支)
---

具体文章内容...

# 协议

MIT License © leCapsimRy

Made with ❤️ by Ahmad Mostafa - @z3by