第一步：主题更换

1.主题选取

hexo.io/themes/和github.com/hexojs/hexo/wiki/Themes这两个地方都可以找到主题，选取并下载

2.主题安装

解压后的主题文件夹拷贝到themes目录下，以Aiki主题为例，如下图
主题安装目录

3.文件配置

打开根目录下_config.yml文件，将theme字段改为aiki,名字与主题文件夹名字要保持一致

4.运行

根目录下打开控制台，hexo g 指令进行解析，hexo s搭建服务。

如果只是要使用现成的主题模板，可以到此为止了。

第二步：知识准备

文件认知　

主题文件夹下必定包含

layout 布局文件夹。用于存放主题的模板文件，决定了网站内容的呈现方式

source 资源文件夹，用于存放需要用到的静态资源文件,如：CSS、JavaScript、图片等.

_config.yml 主题的配置文件

API认知

partial(String[,Object]) 作用类似于CSS中的@import和nodeJS中的require，官方称之为局部模版。partial用于组件的载入,从而实现组件共享

body 载入index.ejs

第三步：模块式编程

hexo的主题开发其实就是采用的MVC模式，现在做的就是完成MVC的M（model）层。

概念与流程

1.官网上说的每个模板都默认使用 layout 布局，其意思就是文件的默认解析/编译入口是layout.ejs

2.一个页面一般分为head、header、content、footer，其中，content模块可以使用body变量加载index.ejs，所以，可以分别建立head.ejs、header.ejs、footer.ejs这三大模块

从以上步骤我们可以建立这样的文件

layout.ejs

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
<%- partial('_layout/head') %>
</head>
<body>
<%- partial('_layout/header') %>
<%- body %>
<%- partial('_layout/footer') %>
</body>
</html>

_layout/head.ejs

1
2
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">

_layout/header.ejs

1
2
3
<header>
  <div>头部的内容</div>
</header>

index.ejs

1
2
3
<div class="layout-content">
  <p>主体内容</p>
</div>

_layout/footer.js

1
2
3
<footer>
  <div>底部</div>
</footer>

经过上面的步骤之后就会对clone下来的主题有个大概的了解，可以进行主题修改了，自己动手技术我有~~

前往github.com/mde/ejs了解更多关于ejs的语法

何莹亮原创技术文章，转载请注明出处：https://heyingliang.github.io/share/2018/02/19/changeTheme/

目录