寫一個 vuepress 主題

stickmy發表於2018-04-23
Vue

vue 作者尤大發布了一個 vue 編寫的部落格系統 vuepress , 可以用來開發個人部落格, 專案主頁等等. 如果你還不瞭解它, 旁友, 趕緊點選連結瞭解一下

跟其他的部落格系統一樣, 它提供了定製主題的功能, 於是我花了兩天時間, 定製了一款部落格的主題, 安利一下:

github地址

Yubisaki主題介紹

這個主題看起來是這樣滴:

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

相關文章