写一个 vuepress 主题

vue 做者尤大发布了一个 vue 编写的博客系统 vuepress , 能够用来开发我的博客, 项目主页等等. 若是你还不了解它, 旁友, 赶忙点击连接了解一下

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

github地址

Yubisaki主题介绍

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

安装

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 的卡片