写一个 vuepress 主题

vue 作者尤大发布了一个 vue 编写的博客系统 vuepress , 可以用来开发个人博客, 项目主页等等. 如果你还不了解它, 旁友, 赶紧点击链接了解一下

跟其他的博客系统一样, 它提供了定制主题的功能, 于是我花了两天时间, 定制了一款博客的主题, 安利一下:

这个主题看起来是这样滴:

安装

yarn add vuepress-theme-yubisaki -S

Article

在 markdown 文件头部加上以下内容

title: 文章标题
# 用于排序
date: 2017-08-15 10:27:26
description: 文章概述, 用于在文章首页展示
# 一些 meta 标签, 可以用于被搜索引擎爬取
meta:
  - name: description
    content: 一些描述
  - name: keywords # keywords 标签, 在页内搜索时会被查询
    content: theme vuepress

我们也可以通过 yubisaki-shell 完成这件事

yarn global add yubisaki-shell

yubisaki post -p <path> --page <file>

# example
yubisaki post -p docs/hello --page index.md

这个脚本也提供了自动部署的功能

yubisaki deploy -u <github user> -p <docs path> -r <github repository address>

# example
yubisaki deploy -u bloss -p docs -r bloss.github.io

自定义 layout

在 markdown 文件头部加上以下内容

heroText: Yubisaki # title
activity: true # 使用自定义的 activity layout, 会收起右边的卡片栏
hidden: true # 设置是否在文章列表中显示
tagline: vuepress 博客主题 # 描述
heroImage: /static/logo.png # logo
# 参考官方默认主题的配置
actionText: 了解一下 →  
actionLink: /yubisaki/usage.html # action 链接
features:
  - title: 这是什么
    details: 一个基于 vuepress 的博客主题, 它基于 vuepress 提供的默认主题
  - title: 有哪些特点
    details: 提供文章列表, 文章分页, 文章详情, github card, 自定义活动页 layout 等等功能
  - title: TODO
    details: 标签云, TAG ARCHIVE, 一些脚本, 一些 开箱即用的layout
footer: by stickmy

配置

文章列表的排序是按照每篇文章的中 YAML 格式中的 date 属性来排序的, 可以配置每页显示的文章数量

.vuepress/config.js:

module.exports = {
  themeConfig = {
    // 博客背景图片
    background: `/background/path`,
    // github card
    github: 'github username',
    // 博客的 logo
    logo: '/logo/path',
    // 定制文章标题颜色
    accentColor: '#ac3e40',
    // 每页显示的文章数量
    per_page: 5,
    // 和 vuepress 默认主题一样, 定制导航栏上的链接
    nav: [
        { text: 'HOME', link: '/' },
        { text: 'GITHUB', link: 'https://github.com/bloss' },
        { text: '关于我', link: '/about/' }, 
    ]
  }
}

在 docs 目录下, 务必放一个 markdown 文件, 用于生成根路径路由, 它可以是一个空文件

TODO

标签云
文章分类
更多类似 github card 的卡片