標籤:

VI:GitHub + Hexo (3):安裝主題

這篇文章將以NexT為例,介紹「安裝主題」的相關步驟,是《Hexo2.0:部署博客及更新博文》的後續。

原載於Hexo3.0:安裝主題。

1.前言

建立個人博客的方法很多, GitHub + Hexo 只是其中的一種,但這種方法幾乎不需要基礎,上手簡單,維護方便,是建立個人博客的理想方法。

這是我的個人博客:北境。

關於系列教程,我推薦的閱讀順序為:

GitHub + Hexo (5):總結

GitHub + Hexo (1):在 OS X 下建立你的第一個博客——史上最靠譜教程

GitHub + Hexo (2):部署博客及更新博文

GitHub + Hexo (3):安裝主題

GitHub + Hexo (4):配置第三方服務

GitHub + Hexo (5):總結

-----------------------------------------

我們之前使用 Hexo 生成的博客,默認主題是 Landscape ——顯然這個主題不夠酷炫,而搭建個人博客中非常主要的一個步驟就是選擇一個酷酷的主題並配置好。

2.選擇主題

你可以直接瀏覽 hexo 主題匯總,從這中間挑選一個中意的主題,當然也可以參考知乎大神的推薦:有哪些好看的 Hexo 主題?

我這裡所做的範例就是高票回答中的最高票主題NexT。

NexT「精於心,簡於形」的標語非常合我的口味,視覺上實際有一點點日系風格,當然這是我個人的看法,你也可以選擇其他主題,主題配置大部分還是大同小異的。

3.安裝主題

3.1背景說明

在 Hexo 中有兩份主要的配置文件,其名稱都是 _config.yml ——一份位於站點根目錄下,主要包含 Hexo 本身的配置;另一份位於主題目錄(themes)下,這份配置由主題作者提供,主要用於配置主題相關的選項。

為了描述方便,在以下說明中,將前者稱為站點配置文件, 後者稱為主題配置文件

3.2下載主題

先 cd 到 Hexo 站點目錄下,例如我的是 Hexo

$ cd Hexo$ git clone https://github.com/iissnan/hexo-theme-next themes/next

3.3啟用主題

打開站點配置文件, 找到 theme 欄位,並將其值更改為 next 。

3.4驗證主題

開啟調試模式(即加上 —debug),輸入:

$ hexo s —debug

不出意外將看到如下的反饋:

INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

這時候在瀏覽器中打開0.0.0.0:4000/,將看到類似下圖的的站點:

4.主題設定

4.1選擇 Scheme

Scheme 是 NexT 提供的一種特性,用於提供不同的外觀。目前 NexT 支持三種 Scheme:

· Muse - 默認 Scheme,這是 NexT 最初的版本,黑白主調,大量留白

· Mist - Muse 的緊湊版本,整潔有序的單欄外觀

· Pisces - 雙欄 Scheme,小家碧玉似的清新

Scheme 的切換通過更改 主題配置文件,將需用啟用的 scheme 前面注釋「 #」 去掉即可,例如我現在啟用的是 Mist 。

4.2設置語言

編輯 站點配置文件, 將 language 設置成你所需要的語言。我選擇的是英文,配置如下:

language: en

目前 NexT 支持的語言如以下表格所示:

4.3設置站點名稱

編輯站點配置文件, 設置 title 欄位為你的站點名稱:

title: 北境

4.4設置菜單

菜單配置包括兩個部分,第一是菜單項(名稱和鏈接),第二是菜單項的顯示文本,第三是菜單項對應的圖標。 編輯主題配置文件 ,修改以下內容:

4.4.1設定菜單內容

對應的欄位是 menu,格式為item name: link。其中 item name 是一個名稱,並不直接顯示在頁面上,而是用於匹配圖標以及翻譯,例如我的設置為:

menu: home: / #categories: /categories about: /about archives: /archives #tags: /tags #commonweal: /404.html

NexT 默認的菜單項有(除前兩項外均需要手動創建這個頁面):

4.4.2設置菜單項的顯示文本

在第一步中設置的菜單的名稱並不直接用於界面上的展示。Hexo 在生成的時候將使用這個名稱查找對應的語言翻譯,並提取顯示文本。這些翻譯文本放置在 NexT 主題目錄下的 languages/{language}.yml ({language} 為你所使用的語言)。

由於我所用的是英文,因而這一步就略去了。

4.4.3設定菜單項的圖標

對應的欄位是 menu_icons。 此設定格式是 item name: icon name,其中 item name 與上一步所配置的菜單名字對應,icon name 是 Font Awesome 圖標的 名字。而 enable 可用於控制是否顯示圖標,你可以設置成 false 來去掉圖標。

對圖標我還是不甚了解,以至於連知乎的圖標都沒找到,這點容我後面再摸索下。

4.5設置頭像

編輯站點配置文件, 新增欄位 avatar, 值設置成頭像的鏈接地址。我推薦使用「完整的互聯網 URI」,這是最方便快捷的。例如我的是:

avatar: https://static.pexels.com/photos/33392/portrait-bird-nature-wild.jpg

4.6設置作者昵稱

編輯站點配置文件, 設置 author 為你的昵稱:

author: 三尺微命

4.7站點描述

編輯站點配置文件, 設置 description 欄位為你的站點描述:

description: 劍未配妥

5.最後

感覺文章內容不錯,讀後有收穫--不妨小額贊助我一下,讓我有動力繼續寫出高質量的文章!


推薦閱讀:

Ⅰ.GitHub + Hexo (1):在 OS X 下建立你的第一個博客——史上最靠譜教程
hexo 怎麼創建 404 頁面?
hexo文章發布到github後部分文件404了?
hexo下新建頁面下如何放多個文章?
hexo音樂插件有嗎?或者說hexo上有什麼好玩的插件?

TAG:Hexo | GitHub | 博客 |