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

教程二我们已经搭建好了首页，上篇教程已经引入了css和js，接下来还是引入网站上的一些图标。

引入图标

上篇教成叫自行引入图片其实是不用的，因为我们建立的图片文件夹正好是images，和原来的html5up模板刚好一致。让我们看下代码：

1
2
3

<div class="image">
  <img src="images/banner.jpg" alt="" />
</div>

但是也和之前的问题一样，用这种的话一定要把网站放到根目录访问，所以可以用到hexo的辅助函数“url_for”，

img代码改成如下即可：

1
2
3

<div class="image">
  <img src="<%- url_for('/images/banner.jpg') %>" alt="" />
</div>

接下来回到正题，引入图标，首先确定下这个模板的图标是字体图标，字体文件在webfonts文件夹下：

为了方便，就直接把这个文件夹复制到主题source下，hexo s 后就可以看到图标已经呈现出来了

完善首页

开始着手完善首页，首先删掉一些不需要的元素

在index.ejs中的这个Five、Six、Seven分别是图集、图标、留言部分，首页不需要这些，我们给它删掉。
接下来看剩下的代码：

one是最上面的那个，图片占一半那种。自成一派先不管。two、three、four则是下面的部分。我们可以给它看做是文章列表。可以看出这几个的元素都一致，就是three的class是orient-left，所以可以删除多余的three、four后网页显示如下：

接下来考虑往首页填充内容了。不过在这之前还有很多东西要讲下（后悔用文章教程了，出视频的话会快很多55555）

首先，分析下我们首页或者说文章需要哪些东西。标题、封面图、简介还有一些给我们的如分类、标签、时间等等。这些东西都要我们自己建吗？hexo给了我们一个Scaffold文件夹，在官方文档的写作里面有说明：

打开scaffolds>post.md(就是新建文章的模板)可以看到如下内容：（顺带再提，这个在hexo中叫Front-matter）

---
title: {{ title }}
date: {{ date }}
tags:
---

可以看到hexo给文章模板预置了title、date、tags，但是我们还需要封面图、简介、分类等等，我们直接修改post.md就可以让hexo生成我们想要的模板。修改的模板如下：(keywords是关键字，对网站seo有好处)

---
title: {{ title }}
date: {{ date }}
tags:
categories:
keywords: 
description: 
photos: 
---

这里为了更方便我们可以给一些项预设初值。比如分类和封面图。

---
title: {{ title }}
date: {{ date }}
tags:
categories: 技术
keywords: 
description: 
photos: /images/pic01.jpg
---

好了，接下来可以使用 hexo n “你想要的文章名” 来创建文章了。这里我们创建了八篇文章：

记住把第一个hello world.md删掉，因为这个是hexo init生成的，在它的Front-matter中没有一些项，不删除可能会导致一些错误。
好了，测试文章也有了，现在我们要去给首页填充起来。现在我们再来看index.ejs中的one和two,发现one其实和three一样是orient-left，不过多了个fullscreen的css，所以可以只剩下一个two。修改后two的代码如下：

<!-- Two -->
<% page.posts.each(function(post){ %>
  <section class="spotlight style1 orient-right content-align-left image-position-center onscroll-image-fade-in">
    <div class="content">
      <h2><%= post.title %></h2>
      <p><%= post.description %></p>
      <ul class="actions stacked">
        <li><a href="#" class="button">Learn More</a></li>
      </ul>
    </div>
    <div class="image">
      <img src="<%= post.photos %>" alt="" />
    </div>
  </section>
<% }) %>

其中each/forEach函数（和js中的each差不多）参考model.js和query.js，post参考变量。
hexo s后成如下：

怎样将它弄成之前那种左右交替呢？最简单的可以使用css控制：

.spotlight.style1:nth-child(even) {
  -moz-flex-direction: row-reverse;
  -webkit-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

.spotlight.style1:first-child{
    min-height: 100vh;
}

.spotlight.style1:first-child .image{
    width: 50%;
}