Hexo页面框架

Hexo

本博基于yilia主题,打算在上面魔改
毕竟前端二把刀，要魔改首先要搞清楚页面结构。。。

Hexo可以自定义页面。官方默认主题landscape提供了一个基本的页面框架实现
页面框架结构相似

1
2
3
4
5
yilia/
  |-- languages/
  |-- layout/
  |-- source/
  |-- _config.yml

languages文件夹用于多语言配置，每种语言对应一个配置文件，采用yml层级形式

en.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
title:
  archive: Archive
  category: Category
  tag: Tag

menu:
  menu: Menu
  home: Home
  archives: Archives
  categories: Categories
  tags: Tags
  about: About
  search: Search
  link : Links

source文件夹用于存放各种资源，css,js,img等等等

layout文件夹是布局的关键所在

1
2
3
4
5
6
7
8
9
10
11
12
13
14
layout/
  |-- _partial/
         |-- head.ejs
         |-- left-col.ejs
         |-- mobile-nav.ejs
         |-- footer.ejs
         |-- after-footer.ejs
  |-- archive.ejs
  |-- category.ejs
  |-- index.ejs
  |-- layout.ejs
  |-- page.ejs
  |-- post.ejs
  |-- tag.ejs

页面采用ejs模板生成，目录结构比较清晰
根目录下的ejs基本都是对应完整页面，局部组件都放在_partial下

根目录下有个特殊的布局文件layout.ejs,控制着全局布局
整体上是左边栏加主区域形式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<%- partial('_partial/head') %>
<body>
  <div id="container">
    <div class="left-col">
    <%- partial('_partial/left-col', null, {cache: !config.relative_link}) %>
    </div>
    <div class="mid-col">
      <%- partial('_partial/mobile-nav', null, {cache: !config.relative_link}) %>
      <div class="body-wrap"><%- body %></div>
      <%- partial('_partial/footer') %>
    </div>
    <%- partial('_partial/after-footer') %>
  </div>
</body>
</html>

各区域职责通过partial引入集成到一起

  • head
    layout.ejs只定义了body标签的下半个页面，head.ejs定义上半个页面。
    页面的标题，公共的css之类的都在这里定义
  • left-col
    left-col.ejs定义左边栏，大屏模式下的菜单导航区域
  • mobile-nav
    小屏时不采用左边栏形式，mobile-nav.ejs定义滑动展开的导航
  • footer
    页面底部信息，copyright署名
  • afterfooter
    js定义放在页面的最后，有利于页面呈现速度。afterfooter.ejs定义了各种js文件的引入以及需要执行的各种js脚本。

layout.ejs是默认的模板，<%- body -%>会被具体页面替换掉
以下页面是layout.ejs所在目录下的页面

  • index 首页，包含摘要的文章列表
1
<%- partial('_partial/archive', {pagination: 2, index: true}) %>
  • archieve 归档页面，纯标题的文章列表
1
<%- partial('_partial/archive', {pagination: config.archive, index: true}) %>
  • category 分类
1
<%- partial('_partial/archive', {pagination: config.category, index: true}) %>
  • tag 标签
1
<%- partial('_partial/archive', {pagination: config.tag, index: true}) %>
  • post 文章详情页
1
<%- partial('_partial/article', {post: page, index: false}) %>
  • page 导航标签页
1
<%- partial('_partial/article', {post: page, index: false}) %>

版权声明

This site by Linest is licensed under a Creative Commons BY-NC-ND 4.0 International License.
由Linest创作并维护的博客采用创作共用保留署名-非商业-禁止演绎4.0国际许可证。

本文永久链接：http://linest.github.io/2016/09/02/hexo-theme-layout/