1. 程式人生 > >Hexo even主題部落格配置

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_idapp_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

    進行單篇文章版權資訊的關閉。