hexo搭建博客教程02
Dec 27 , 2016

1、创建主题文件夹

在themes下面创建一个与landscape同级的文件夹,文件夹名称可以随意(例如：mytheme)
在mytheme文件夹下创建layout和source文件夹，_config.yml文件
因为主题是基于bootstrap，所以把bootstrap的源文件拷贝到mytheme->source下面，另外在该目录下创建css,js,images文件夹

2、主题首页

创建/layout/layout.ejs文件
编辑layout.ejs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
	<!-- Head tag -->
	<%- partial('_partial/head') %>
	<body>
		<!-- Menu -->
		<%- partial('_partial/menu') %>
		<%- body %>
		<!-- Footer -->
		<%- partial('_partial/footer') %>
		<!-- After footer scripts -->
		<%- partial('_partial/after-footer') %>
	</body>
</html>
创建/layout/index.ejs文件
编辑index.ejs
1
2
3
4
5
6
7
<!-- Main Content -->
<div class="blog-mainindex">
	<% page.posts.each(function(item){ %>
		<%- partial('_partial/article-index',{item: item})%>
	<% }); %>
	<%- partial('_partial/pagination') %>
</div>
在index.ejs和layout.ejs中引入的head,menu,footer,after-footer,article-index,pagination是位于/layout/partial/下文件
因为实现的主题的样式文件，头部和底部是固定的，每个页面都需要加载同样内容，所以采用这种形式实现。
如果你的主题不是这种形式的，可以按照自己的方式呈现。

head文件

head是页面的head部分，加载一些样式文件
1
2
3
4
5
6
7
8
9
10
<head>
	<meta chartset="utf-8">
	<meta http=equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<title><% if ( page.title ){ %><%= page.title %> | <% } %> <%= config.title %></title>
	<!-- Bootstrap core css -->
	<link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css" type="text/css" async>
	<!-- Blog css -->
	<link rel="stylesheet" href="/css/blog.css" type="text/css" async>
</head>

menu文件

menu是页面的菜单栏部分，在mytheme->_config.yml中定义菜单栏选项,menu.ejs中显示自定义的菜单栏内容
1
2
3
4
5
6
7
8
9
_config.yml
menu:
  首页: /
  归档: /archives
  标签: /tags
menu.ejs
<% for(var i in theme.menu){ %>
	<li><a href="<%- url_for(theme.menu[i]) %>"><%= i %></a></li>
<% } %>

article-index文件

article-index是首页主要内容的显示部分，可以根据自己想要的样式去组合显示内容
1
2
3
4
5
6
7
8
//文章标题
item.title
//文章作者
item.author
//文章时间
item.date
//文章摘要(<!--more-->以上内容即为摘要)
item.excerpt

pagination文件

pagination是分页显示部分，如果不分页可以忽略该部分
1
2
3
4
<%- paginator({
	prev_text: 'Prev',
	next_text: 'Next',
}) %>
具体内容可以自己参考pagination实现

footer/after-footer文件

footer是页面底部显示内容，after-footer是加载js文件

如此，首页就完成了……

PREVIOUS NEXT
 |