寫一個 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 的卡片