Web►Hexo

[Hexo] 主題設置

前言

最近研究了一下Hexo主題的寫法，在這邊紀錄一下。

結構

Hexo使用EJS和Stylus。

EJS在layout而Stylus在source裡，靜態產生後的來源都可以放在source資料夾裡。

New Page

想要新增一個頁面可以輸入

1
hexo new page "xxx"

並且在主題內的_config.yml的menu加上頁面。

1
2
3
4
5
menu:
	home: /
	archives: archives
	tags: tags
	xxx: xxx

EJS

1
2
3
4
5
6
//只執行
<% %>
//將執行結果轉成字串
<%- %>
//引入其他ejs
<%- partial('article') %>

Hexo變數及函式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//當前是否首頁
is_home()
//當前是否在某個頁面
is_current("xxx")
//路徑前加根路徑
url_for()
//當前頁面變數
page
//當前頁面路徑
page.path
//網站變數
site
//網站所有文章
site.posts

Nav

1
2
3
4
//當初設在主題_config.yml的menu內容
<% for (var i in theme.menu){ %>
	<a href="<%- url_for(theme.menu[i]) %>" ><%- i  %></a>
<% } %>

Post

Hexo的文章似乎沒有不同分頁屬性的結構，只能使用md的屬性或者來源來分辨。

文章有預設的屬性不能自己新增，在這邊使用屬性中的資料夾來源辨別。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<% 
site.posts.forEach(function(post){
	var slug = post.slug.split("/")[0] ;
	if ( slug === "xxx" ){ %>
		<img src=<%- post.photos[0] %> />
		<div >
			<%- post.title %>
		</div>
		<div >
			<%- post.description %>
		</div>
		<div >
			<%- post.content %>
		</div>
	<% }
}) %>