Hexo参考文章

EJS文件参考文章

Hexo代码结构

1
2
3
4
5
6
7
├── _config.yml      // 站点配置文件
├── db.json          // 缓存文件
├── node_modules     // 安装的插件以及hexo所需的一些nodejs模块
├── package.json     // 项目的依赖文件
├── scaffolds        // 模版文件
├── source           // 源文件，用来存放你的文章 md 文件
└── themes           // 主题文件

上面是Hexo博客的结构, 我们使用的主题都放在themes文件夹中. 比如我使用的是zuoduan的主题, 在themes里能看到zuoduan.

再打开zuoduan文件夹有

1
2
3
4
5
6
7
8
9
10
11
12
13
.
├── LICENSE
├── README.en.md       // READEME 英文版
├── README.md          // READEME 中文文件
├── _config.yml        // 主题配置文件
├── bower.json
├── gulpfile.coffee
├── languages         // 多语言配置文件
├── layout            // 模板文件
├── package.json      // 项目的依赖文件
├── scripts           // 主题的脚本文件
├── source            // 主题的资源文件 CSS IMG
└── test

主题模版文件在layout文件夹下, 其结构为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.
├── _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                 // 标签模板

Hexo工作部署流程

  1. hexo g：生成静态文件。将我们的数据和界面相结合生成静态文件的过程。会遍历主题文件中的 source 文件夹（js、css、img 等静态资源），然后建立索引，然后根据索引生成 public 文件夹中，此时的 public 文件是由 html、 js、css、img 建立的纯静态文件可以通过 index.html 作为入口访问你的博客。
  2. hexo d：部署文件。部署主要是根据在 _config.yml 中配置的 git 仓库或者 coding 的地址，将 public 文件上传至 github 或者 coding 中。然后再根据上面的 github 提供的 pages 服务呈现出页面。当然你也可以直接将你生成的 public 文件上传至你自己的服务器上。

什么是模板引擎?

初学前端, 从写静态HTML页面开始, 也即网页内容都是固定的. 想实现动态网页, 很明显不能认为修改HTML文件, 那么怎么让HTML动态展示内容呢?

模版引擎: 让表现层 (HTML文档) 和业务数据分离. 通过特定的语法, 动态地渲染出HTML文档

EJS 模板引擎

EJS 是 Embedded JavaScript 的缩写, 在HTML文件内使用JS代码进行HTML模板渲染. EJS上手很快, 无需破坏HTML文档结构, 只需在标签内写JS代码

ejs文件中, <% %> 括起来的变量会作为JS代码来编译.

教练, 我想加地图!

别人的博客里经常能看到访问者的ip地址, 看着很酷炫, 我也想加一个.