Hexo 主题制作教程

引言

Hexo 主题结构大致都一样,很清晰,简明

代码结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
├── _config.yml // 主题配置文件
├── languages // 多语言文件夹
├── layout
│ ├── archive.ejs // 存档页模板
│ ├── category.ejs // 分类文章列表页模板
│ ├── includes // 各页面共享的模板
│ │ ├── layout.ejs // 页面布局模板,其它的页面模板都是根据它扩展来的
│ │ ├── pagination.ejs // 翻页按钮模板
│ │ └── recent-posts.ejs // 文章列表模板
│ ├── index.ejs // 首页模板
│ ├── page.ejs // 页面详情页模板
│ ├── post.ejs // 文章详情页模板
│ └── tag.ejs // 标签文章列表页模板
└── source
├── css
│ └── theme.styl // 主题自定义 CSS 文件
├── favicon.ico
└── js
└── theme.js // 主题 JavaScript 文件

Css

1
2
3
4
5
6
7
8
9
10
#wrap {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
transition: 0.2s ease-out;
z-index: 1;
background: #fff;
}

图片

参考资料