文档结构
hexo文档结构
.
├── _config.yml // 站点配置文件
├── db.json // 缓存文件
├── node_modules // 安装的插件以及hexo所需的一些nodejs模块
├── package.json // 应用程序信息，配置hexo运行需要的js包。
├── public // 最终所见网页的所有内容
├── scaffolds // 模版文件,当新建一个文章时，会默认包含对应模板的内容。
├── source // 存放用户资源的地方，所有的源文件都会被保存在_post文件夹中。除 posts 文件夹之外，开头命名为 (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。
└── themes // 主题文件,hexo会根据主题来生成静态页面。主题文档结构
.
├── LICENSE
├── README.en.md // READEME 英文版
├── README.md // READEME 中文文件
├── _config.yml // 主题配置文件
├── bower.json
├── gulpfile.coffee
├── languages // 多语言配置文件
├── layout // 模板文件
├── package.json // 项目的依赖文件
├── scripts // 主题的脚本文件
├── source // 主题的资源文件 CSS IMG
└── test工作原理
1.hexo g
其主要作用是将数据和界面相结合生成静态文件。
- 遍历主题文件中的source文件夹(js,css,img等静态资源)，建立索引
- 根据索引生成public文件夹，其由html,js,css,img组成，可以通过index.html作为入口访问博客
2.hexo d
其主要是根据_config.yml中配置的git仓库将public文件上传到服务器中，我这里是Github,GitHub提供的pages服务可以呈现出页面。
模板引擎
hexo框架中，source文件夹可以理解为数据库，themes文件夹相当于界面，hexo g就是将数据和界面结合生成静态文件。
Hexo 的模板引擎是默认使用ejs编写的。hexo首先会解析md文件，然后根据layout判断布局类型，再调用其他的文件，这样每一块的内容都是独立的，提高代码的复用性。最终会生成一个 html 页面。
模板文件在layout文件夹下，其文档结构如下：
.
├── _custom // 通用布局
├── _layout.swig // 默认布局布局
├── _macro // 插件模板
├── _partials // 局部布局
├── _scripts // script模板
├── _third-party // 第三方插件模板
├── archive.swig // 归档模板
├── category.swig // 分类模板
├── index.swig // 首页模板
├── page.swig // 其他模板
├── photo.swig // 照片模板（自定义）
├── post.swig // 文章模板
├── schedule.swig // 归档模板
└── tag.swig // 标签模板实际应用
添加一个页面
首先在主题文件夹的_config.yml文件中配置页面相关的设置。以添加一个视频播放页面为例。
#添加级菜单
Medias:
icon: fas fa-list
children:
- name: Movies
url: /movies
icon: fas fa-film这里配置了名为Medias的页面，他的图标为fas fa-list,其二级菜单中有一个名叫Movies的子页面，其url链接为/movies,猜想这个文件的默认的路径是hexo文件夹下的source文件夹，那么/movies就意味着需要在source文件夹下创建一个新文件夹movies，用命令hexo new page "movies"在movies文件夹下创建一个新的md文件，在md文件中写入下列文本
---
title: movies
date: 2018-09-30 17:25:30
type: "movies"
layout: "movies"
---这个指定了layout也就是布局采用为movies文件格式，movies.ejs文件可以在主题文件夹下的layout/movies.ejs中找到。该文件夹定义了页面的布局，包含了一个背景封面部分，以及一个视频播放器，视频播放器采用了bilibli视频播放器来播放视频，通过iframe标签将视频嵌入到页面中。
<%- partial('_partial/bg-cover') %>
<!-- 视频页面 -->
<style>
@media only screen and (max-width: 601px) {
.movies-w {
width: 90%;
margin: 0 auto;
}
.movies-h {
height: 90%;
padding-top: 5%;
padding-bottom: 5%;
}
}
/*中等屏幕下(平板类)的样式*/
@media only screen and (min-width: 600px) and (max-width: 992px) {
.movies-w {
width: 95%;
margin: 0 auto;
}
.movies-h {
height: 95%;
padding-top: 5%;
padding-bottom: 5%;
}
}
@media only screen and (min-width: 993px) {
.movies-w {
width: 80%;
margin: 0 auto;
}
.movies-h {
height: 80%;
padding-top: 5%;
padding-bottom: 5%;
}
}
</style>
<main class="content">
<div id="category-cloud" class="container chip-container">
<div class="card">
<div class="card-content">
<div>
<h1 style="text-align:center;">
📺
<span style="color:red;">励</span>
<span style="color:yellow;">志</span>
<span style="color:blue;">短</span>
<span style="color:green;">片</span>
</h1>
<div>
<div class="movies-w" style="position: relative; padding-bottom: 75%;">
<iframe class="movies-h" style="
position: absolute;
width: 100%;
left: 0;
top: 0;"
src="//player.bilibili.com/player.html?aid=2979186&cid=4667585&page=1" scrolling="no" border="0"
frameborder="no"
framespacing="0"
allowfullscreen="true">
</iframe>
</div>
</div>
</div>
</div>
</div>
</main>其中前面的<style>标签为css样式，后面<div class="movies-w" style="position: relative; padding-bottom: 75%;">标签调用了css样式，并将bilibli的视频链接放入页面中
更复杂的页面
未完待续
