Hexo even主題部落格配置
按照部落格 使用Gitee+Hexo搭建個人部落格 的教程,我們已經成功在Gitee上搭建完成了自己的部落格,但是這個部落格還是比較簡陋的。
接下來講介紹 如何開始寫作 和 Even主題的常用配置 。
如何開始寫作
部落格搭建完成,雖然功能很簡單,但是已經可以開始寫作。
- 新建文章
使用命令來新建一篇文章:
$ hexo new [layout] <title>
layout
是文章的佈局,預設為post
,可以先不寫。
title
是文章的標題,也是檔案的名字,儲存在source/_posts
下。
使用MarkDown編輯器開啟檔案就可以開始寫作了。
Front-matter 設定
Front-matter 是文章最上方以 — 分隔的區域,用於指定文章的變數設定,舉例來說:title: Hello World date: 2013/7/13 20:46:25 <hr />
以下是預先定義的引數,您可在模板中使用這些引數值並加以利用。
引數 | 描述 | 預設值 |
---|---|---|
layout | 佈局 | |
title | 標題 | |
date | 建立日期 | 檔案建立日期 |
updated | 更新日期 | 檔案更新日期 |
comments | 開啟文章的評論功能 | true |
tags | 標籤 | (不適用於分頁) |
categories | 分類 | (不適用於分頁) |
permalink | 覆蓋文章網址 |
- 文章分類和標籤
只有文章支援分類和標籤,您可以在 Front-matter 中設定。在其他系統中,分類和標籤聽起來很接近,但是在 Hexo 中兩者有著明顯的差別:分類具有順序性和層次性,也就是說 Foo, Bar 不等於 Bar, Foo;而標籤沒有順序和層次。設定示例:
categories:
- Diary
tags:
- PS3
- Games
說明:文章分類和標籤的設定,會自動歸檔的選單的分類和標籤中。
文章截斷
在文章內容中新增 即可在首頁顯示時只顯示其之上的內容。
並且會在 新增一個 Read more 的連結。自定義文章簡述
可在文章頭資訊中新增 description 欄位,並填寫自定義的文章簡述。
就可以在首頁顯示文章簡述而不顯示文章內容。
Even主題常用配置
我們部落格搭建完成後Hexo的目錄結構如下:
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
├── themes
| ├── even
| └── landscape
我們Even主題的配置則主要在even
目錄下進行,配置檔案_config.yml
,目錄結構如下:
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── css
| └── js
├── languages
| ├── default.yml
| └── zh-cn.yml
|── layout
修改主題顏色
主題自帶了 5 種可選的顏色:
修改主題配置檔案中 theme 欄位的 color 屬性可改變主題色:# =========================================== # Theme Settings # =========================================== # theme styling # color: Default | Mint Green | Cobalt Blue | Hot Pink | Dark Violet theme: color: Default
除了能夠修改為主題自帶的 5 種顏色之外,還可以使用自定義的其他顏色。
在source/css/_custom/_custom.scss
中新增樣式變數$theme-color
修改主題色。$theme-color: #xxxxxx;
同時需要修改
$deputy-color
主題副顏色,該值主要使用在程式碼塊背景以及文章目錄。$deputy-color: #xxxxxx;
_variables.scss
中的樣式變數都可以在_custom.scss
中進行覆蓋,從而自定義主題樣式。
新增分類頁
使用命令新建一個 categories 頁面:hexo new page categories
編輯生成的
categories/index.md
檔案,設定佈局為categories
:title: categories layout: categories
預設開啟評論(如果使用了多說或 Disqus),新增 comments 欄位並設定為 false 可關閉。
在主題配置檔案(
_config.yml
)中新增連結:# =========================================== # Menu Settings # =========================================== menu: Home: / Archives: /archives/ Categories: /categories/
新增標籤頁
使用命令新建一個 tags 頁面:hexo new page tags
編輯生成的
tags/index.md
檔案,設定佈局為 tags:title: tags layout: tags
預設開啟評論,新增 comments 欄位並設定為 false 可關閉。
在主題配置檔案(
_config.yml
)中新增連結:# =========================================== # Menu Settings # =========================================== menu: Home: / Archives: /archives/ Tags: /tags
新增自定義頁面
使用命令新建一個自定義頁面(以新增關於頁為例):hexo new page about
編輯生成的 about/index.md 檔案,設定佈局為 page:
title: about layout: page
關於頁面的內容,個人相關介紹也是在此頁面進行編輯。
預設開啟評論(如果使用了多說或 Disqus),新增 comments 欄位並設定為 false 可關閉。在主題配置檔案(_config.yml)中新增連結:
# =========================================== # Menu Settings # =========================================== menu: Home: / Archives: /archives/ About: /about
在使用的語言檔案下新增對應的欄位(預設為 languages/default.yml):
menu: home: Home archives: Archives tags: Tags categories: Categories about: About
新增文章訪問量統計
文章訪問量統計通過 LeadCloud 支援配置LeanCloud
開啟LeanCloud官網,進入註冊頁面註冊。完成郵箱啟用後,點選頭像,進入控制檯頁面建立新應用
建立一個新應用,並建立名稱為 Counter 的 Class(注意許可權選擇無限制)配置 app_id 與 app_key
在你所建立的應用的 設定->應用Key 中檢視 app_id 與 app_key修改主題配置檔案
_config.yml
,填入app_id
與app_key
:# LeanCloud leancloud: app_id: app_key:
設定 Web 安全域名
在你所建立的應用的 設定->安全中心 中設定 Web 安全域名 新增你的域名到 Web 安全域名中(若本地服務也想看到訪問量,新增 http://localhost:4000/)
設定文章打賞
通過主題配置檔案中的 reward 欄位開啟/關閉:reward: enable: true qrCode: wechat: /image/reward/wechat.png alipay: /image/reward/alipay.png
支援微信以及支付寶,修改 qrCode 下對應的二維碼圖片連結,也可以直接設定成圖片的網路連結。
當開啟打賞功能時,可通過文章 Markdown 頭部:
reward: false
關閉該篇文章的打賞。反之,當打賞功能關閉時,可以在文章中單獨開啟。
設定底部社交連結
目前支援:Email, Stack Overflow, Twitter, Facebook, Github, 微博以及知乎修改主題配置檔案中的 social 欄位下的各個欄位開啟,為空時即為關閉:
social: email: [email protected].com stack-overflow: twitter: facebook: github: weibo: zhihu:
主題使用的是自定義的 iconfont 圖示庫。
設定文章版權
修改主題配置檔案中的 copyright 欄位開啟/關閉:copyright: enable: true # https://creativecommons.org/ license: '本文采用<a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/">知識共享署名-非商業性使用 4.0 國際許可協議</a>進行許可'
預設顯示作者,來源,連結以及版權說明,版權說明可通過
copyright.lincese
自定義。copyright.license
的值可以是 HTML當文章版權資訊開啟時,可通過文章 Markdown 頭部:
copyright: false
進行單篇文章版權資訊的關閉。