Hexo+GitHub搭建靜態博客平臺(四)-Hexo基本操作

一、寫作

你可以執行下列命令來創建一篇新文章:

$ hexo new [layout] <title>

您可以在命令中指定文章的佈局(layout),默認爲 post,可以通過修改 _config.yml 中的 default_layout 參數來指定默認佈局。

1.1 佈局(Layout)

Hexo 有三種默認佈局:postpagedraft,它們分別對應不同的路徑,而您自定義的其他佈局和 post 相同,都將儲存到 source/_posts 文件夾。

佈局 路徑
post source/_posts
page source
draft source/_drafts

不要處理我的文章
如果你不想你的文章被處理,你可以將 Front-Matter 中的layout: 設爲 false

1.2 文件名稱

Hexo 默認以標題做爲文件名稱,但您可編輯 new_post_name 參數來改變默認的文件名稱,舉例來說,設爲 :year-:month-:day-:title.md 可讓您更方便的通過日期來管理文章。

變量 描述
:title 標題(小寫,空格將會被替換爲短槓)
:year 建立的年份,比如, 2015
:month 建立的月份(有前導零),比如, 04
:i_month 建立的月份(無前導零),比如, 4
:day 建立的日期(有前導零),比如, 07
:i_day 建立的日期(無前導零),比如, 7

1.3 草稿

剛剛提到了 Hexo 的一種特殊佈局:draft,這種佈局在建立時會被保存到 source/_drafts 文件夾,您可通過 publish 命令將草稿移動到 source/_posts 文件夾,該命令的使用方式與 new 十分類似,您也可在命令中指定 layout 來指定佈局。

$ hexo publish [layout] <title>

草稿默認不會顯示在頁面中,您可在執行時加上 --draft 參數,或是把 render_drafts 參數設爲 true 來預覽草稿。

1.4 模版(Scaffold)

在新建文章時,Hexo 會根據 scaffolds 文件夾內相對應的文件來建立文件,例如:

$ hexo new photo "My Gallery"

在執行這行指令時,Hexo 會嘗試在 scaffolds 文件夾中尋找 photo.md,並根據其內容建立文章,以下是您可以在模版中使用的變量:

變量 描述
layout 佈局
title 標題
date 文件建立日期

二、Front-matter

Front-matter 是文件最上方以 --- 分隔的區域,用於指定個別文件的變量,舉例來說:

---
title: Hello World
date: 2013/7/13 20:46:25
---

以下是預先定義的參數,您可在模板中使用這些參數值並加以利用。

參數 描述 默認值
layout 佈局
title 標題
date 建立日期 文件建立日期
updated 更新日期 文件更新日期
comments 開啓文章的評論功能 true
tags 標籤(不適用於分頁)
categories 分類(不適用於分頁)
permalink 覆蓋文章網址

2.1 分類和標籤

只有文章支持分類和標籤,您可以在 Front-matter 中設置。在其他系統中,分類和標籤聽起來很接近,但是在 Hexo兩者有着明顯的差別:分類具有順序性和層次性,也就是說 Foo, Bar 不等於 Bar, Foo;而標籤沒有順序和層次。

分類方法的分歧:通常分類可以是同級的,也可以是父子分類。但是Hexo不支持指定多個同級分類。 下面的指定方法:
categories:

  • Diary
  • Life
    會使分類Life成爲Diary的子分類,而不是並列分類。因此,有必要爲您的文章選擇儘可能準確的分類。

2.2 JSON Front-matter

除了 YAML 外,你也可以使用 JSON 來編寫 Front-matter,只要將 --- 代換成 ;;; 即可。

三、標籤插件(Tag Plugins)[非重點]

聲明:功能非常強大,但是簡書以及CSDN不支持,爲了保證通用性,此功能不詳細深入。如果想詳細瞭解可參考《標籤插件》。

標籤插件Front-matter 中的標籤不同,它們是用於在文章中快速插入特定內容的插件。

引用塊

在文章中插入引言,可包含作者、來源和標題。

別號quote

{% blockquote [author[, source]] [link] [source_link_title] %}
content
{% endblockquote %}

代碼塊

在文章中插入代碼。

別名: code

{% codeblock [title] [lang:language] [url] [link text] %}
code snippet
{% endcodeblock %}

Pull Quote

在文章中插入 Pull quote。

{% pullquote [class] %}
content
{% endpullquote %}

jsFiddle

在文章中嵌入 jsFiddle。

{% jsfiddle shorttag [tabs] [skin] [width] [height] %}

Gist

在文章中嵌入 Gist。

{% gist gist_id [filename] %}

iframe

在文章中插入 iframe。

{% iframe url [width] [height] %}

Image

在文章中插入指定大小的圖片。

{% img [class names] /path/to/image [width] [height] [title text [alt text]] %}

在文章中插入鏈接,並自動給外部鏈接添加 target=”_blank” 屬性。

{% link text url [external] [title] %}

Include Code

插入 source 文件夾內的代碼文件。

{% include_code [title] [lang:language] path/to/file %}

Youtube

在文章中插入 Youtube 視頻。

{% youtube video_id %}

Vimeo

在文章中插入 Vimeo 視頻。

{% vimeo video_id %}

引用文章

引用其他文章的鏈接。

{% post_path slug %}
{% post_link slug [title] %}

引用資源

引用文章的資源。

{% asset_path slug %}
{% asset_img slug [title] %}
{% asset_link slug [title] %}

Raw

如果您想在文章中插入 Swig 標籤,可以嘗試使用 Raw 標籤,以免發生解析異常。

{% raw %}
content
{% endraw %}

四、資源文件夾

資源(Asset)代表 source 文件夾中除了文章以外的所有文件,例如圖片、CSS、JS 文件等。比方說,如果你的Hexo項目中只有少量圖片,那最簡單的方法就是將它們放在 source/images 文件夾中。然後通過類似於![](/images/image.jpg)的方法訪問它們。

4.1 相對路徑引用的標籤插件

通過常規的 markdown 語法和相對路徑來引用圖片和其它資源可能會導致它們在存檔頁或者主頁上顯示不正確。在Hexo 2時代,社區創建了很多插件來解決這個問題。但是,隨着Hexo 3 的發佈,許多新的標籤插件被加入到了核心代碼中。這使得你可以更簡單地在文章中引用你的資源。

{% asset_path slug %}
{% asset_img slug [title] %}
{% asset_link slug [title] %}

比如說:當你打開文章資源文件夾功能後,你把一個 example.jpg 圖片放在了你的資源文件夾中,如果通過使用相對路徑的常規 markdown 語法 ![](/example.jpg) ,它將 不會 出現在首頁上。(但是它會在文章中按你期待的方式工作)

正確的引用圖片方式是使用下列的標籤插件而不是 markdown

{% asset_img example.jpg This is an example image %}

通過這種方式,圖片將會同時出現在文章和主頁以及歸檔頁中。

五、數據文件

有時您可能需要在主題中使用某些資料,而這些資料並不在文章內,並且是需要重複使用的,那麼您可以考慮使用 Hexo 3.0 新增的「數據文件」功能。此功能會載入 source/_data 內的 YAMLJSON 文件,如此一來您便能在網站中複用這些文件了。

舉例來說,在 source/_data 文件夾中新建 menu.yml 文件:

Home: /
Gallery: /gallery/
Archives: /archives/

您就能在模板中使用這些資料:

<% for (var link in site.data.menu) { %>
<a href="<%= site.data.menu[link] %>"> <%= link %> </a>
<% } %>

渲染結果如下 :

<a href="/"> Home </a>
<a href="/gallery/"> Gallery </a>
<a href="/archives/"> Archives </a>

六、服務器

6.1 hexo-server

Hexo 3.0 把服務器獨立成了個別模塊,您必須先安裝 hexo-server 才能使用。

$ npm install hexo-server --save

安裝完成後,輸入以下命令以啓動服務器,您的網站會在 http://localhost:4000 下啓動。在服務器啓動期間,Hexo* 會監視文件變動並自動更新,您無須重啓服務器。*

$ hexo server

如果您想要更改端口,或是在執行時遇到了 EADDRINUSE 錯誤,可以在執行時使用 -p 選項指定其他端口,如下:

$ hexo server -p 5000

靜態模式

在靜態模式下,服務器只處理 public 文件夾內的文件,而不會處理文件變動,在執行時,您應該先自行執行 hexo generate,此模式通常用於生產環境(production mode)下。

$ hexo server -s

自定義 IP

服務器默認運行在 0.0.0.0,您可以覆蓋默認的 IP 設置,如下:

$ hexo server -i 192.168.1.1

指定這個參數後,您就只能通過該IP才能訪問站點。例如,對於一臺使用無線網絡的筆記本電腦,除了指向本機的 127.0.0.1 外,通常還有一個 192.168.*.* 的局域網IP,如果像上面那樣使用 -i 參數,就不能用 127.0.0.1 來訪問站點了。對於有公網IP的主機,如果您指定一個局域網IP作爲 -i 參數的值,那麼就無法通過公網來訪問站點。

6.2 Pow

Pow 是一個 Mac 系統上的零配置 Rack 服務器,它也可以作爲一個簡單易用的靜態文件服務器來使用。

安裝

$ curl get.pow.cx | sh

設置

~/.pow 文件夾建立鏈接(symlink)。

$ cd ~/.pow
$ ln -s /path/to/myapp

您的網站將會在 http://myapp.dev 下運行,網址根據鏈接名稱而定。

七、生成器

使用 Hexo 生成靜態文件快速而且簡單。

$ hexo generate

7.1 監視文件變動

Hexo 能夠監視文件變動並立即重新生成靜態文件,在生成時會比對文件的 SHA1 checksum,只有變動的文件纔會寫入。

$ hexo generate --watch

7.2 完成後部署

您可執行下列的其中一個命令,讓 Hexo 在生成完畢後自動部署網站,兩個命令的作用是相同的。

$ hexo generate --deploy
$ hexo deploy --generate

上面兩個命令可以簡寫爲:

$ hexo g -d
$ hexo d -g

八、部署

Hexo 提供了快速方便的一鍵部署功能,讓您只需一條命令就能將網站部署到服務器上。

$ hexo deploy

在開始之前,您必須先在_config.yml 中修改參數,一個正確的部署配置中至少要有 type 參數,例如:

deploy:
type: git

您可同時使用多個 deployerHexo 會依照順序執行每個 deployer

deploy:
- type: git
repo:
- type: heroku
repo:

縮進

YAML依靠縮進來確定元素間的從屬關係。因此,請確保每個deployer的縮進長度相同,並且使用空格縮進。

8.1 Git

安裝 hexo-deployer-git

$ npm install hexo-deployer-git --save

修改 站點配置文件 :

deploy:
type: git
repo: <repository url>
branch: [branch]
message: [message]


4_8.1

Hexo 生成的所有文件都放在 public 文件夾中,您可以將它們複製到您喜歡的地方。

Heroku、Rsync、OpenShift、FTPSync的部署可以參考《部署》。

求贊

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章