都2020了，带你开发hexo主题(二)

上篇教程已经准备开始构建页面了，接上文：

构建主题页面

我们在阅读文档模版后，可以知道如下信息：

模板决定了网站内容的呈现方式，每个主题至少都应包含一个 index 模板，以下是各页面相对应的模板名称：

布局（Layout），如果页面结构类似，例如两个模板都有页首（Header）和页脚（Footer），您可考虑通过「布局」让两个模板共享相同的结构。一个布局文件必须要能显示 body 变量的内容，如此一来模板的内容才会被显示，举例来说：

每个模板都默认使用 layout 布局，您可在 front-matter 指定其他布局，或是设为 false 来关闭布局功能，您甚至可在布局中再使用其他布局来建立嵌套布局。

关于front-matter可以查下以下文档了解更多front-matter

Front-matter 是文件最上方以 --- 分隔的区域，用于指定个别文件的变量，举例来说：

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

根据以上文档，我们就可以建模版页面了。其中每个主题至少都应包含一个 index 模板和每个模板都默认使用 layout 布局，所以我们先建个layout.ejs和index.ejs
index.ejs内容如下：

layout.ejs内容如下：其中<%- body %>文档中并没有做出详细解释，可以理解body为页面内容。首页就是引入index.ejs，归档页就是引入archive.ejs这样。至于<%- %>的语法可以去参考ejs文档(看不懂的，就是没好好看文档。)

hexo s 生成运行如下，可以看到我们的模版页编译成功了。（生成了layout的头部和尾部，并成功显示出了index中的内容）

好了，主题页面就是这样构建的，接下来开始把从html5up上下载的story写成我们的主题。

构建 hexo-theme-story 首页

解压得到：

在subline中打开其index页面如下

我们要拆解这个页面，从简单的header和footer开始，将其代码收缩，可以就大致分出header、body、和footer了。

再看官方文档中关于局部模版的说明，我想你已经学会怎么拆分了

文件夹这样建立：

稍难点的layout这样写：

但是这样拆分还是有些问题，比如有部分的footer内容在index中，暂时把这部分代码直接剪切到footer.ejs中

运行后页面如下所示：

页面这种显示的原因是我们没有导入js、css。

导入css、js

source
资源文件夹，除了模板以外的 Asset，例如 CSS、JavaScript 文件等，都应该放在这个文件夹中。文件或文件夹开头名称为 _（下划线线）或隐藏的文件会被忽略。
如果文件可以被渲染的话，会经过解析然后储存到 public 文件夹，否则会直接拷贝到 public 文件夹。

所以我们的 CSS、JavaScript、Images 文件要放在source文件夹中，怎么放我就不赘述了。说说怎么引入。可以hexo g先生成public文件夹，看一下目录结构：

可以看到对于最外层的index.html来说，引入可以使用更通用的相对路径写法./css/xxx.css(./表示当前目录下)，但是这种写法放在hello-world下的文章页index.html就不适用了。必需使用绝对路径写法/css/（/表示从根目录开始）所以可以使用如下写法引入：

1 2	<link rel="stylesheet" href="/css/main.css" /> <noscript><link rel="stylesheet" href="/css/noscript.css" /></noscript>

但是这种写法也有一个问题，若你的博客不是放在网站根目录也是不生效的。所以hexo辅助函数css()，js()就有意义了。

1 2	<%- css(path, ...) %> <%- js(path, ...) %>

最终改写成如下：

<head>
  <title>Story by HTML5 UP</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  <%- css(['/css/main.css', '/css/noscript.css']) %>
</head>

js雷同。
把layout中的注释改成html注释，hexo s 运行预览下：

可以看到页面已经正常了，图片路径自行修改下就可以呈现。
从这教成开始代码开始变多起来，我把代码同步上传到github仓库和百度云上，公众号回复story002获取。
未完待续 To be continued……

希望这篇文章能给你带来知识和乐趣，喜欢博主的文章可以加博主好友哦

有好的文章也可以向博主投稿哦

hojun

hello ，stranger