Guo's Blog
前端技术博客(蜀ICP备19002089号-1)
主页
第二页
另一页

Hexo博客主题开发指南

之前一直用Wordpress，从实用性角度讲，WP没有任何替代品。但我不想为了开发WP主题而去了解它的细节。因此选择了Hexo并期望从0开始完成一套主题。

知识储备

需要掌握的知识

HTML/CSS，部分需求涉及JS

可以快速学习的知识

Hexo安装及使用，EJS模板语法

开发准备

观察默认主题结构

可以看到，主题文件夹下有layout、scripts、source、languages、_config.yml，分别是模板、JS、静态资源、翻译、配置文件。
即使主题目录为空，Hexo server也不会报错，因此我们可以从空文件夹开始。

开发过程

第一张页面

在layout下新建layout.ejs，内容可以是任意字符串。此时访问主页可以看到刚才输入的内容。现在将内容替换为<%- body %>，我们可以看到文章。在此基础上修改页面。

主页和文章页

自定义页面

评论

进度条

进度条能起到安慰的作用，用户更有耐心等待。网页加载的进度条通常也不会持续很长时间，因此没有必要根据网络请求判断进度，只需要做动画+onload时完成。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
let style = document.createElement("style");
style.innerHTML = `        .progress-axdf{
    height:10px;width:100vw;background:rgb(255, 255, 176)
}
.progress-axdf::before{
    content: '';
    display: block;
    animation: progress-axdf;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    height: 10px;
    width: 0vw;
    background: rgb(135, 207, 255);
}
.progress-fin::before{
   animation: progress-fin;
   animation-duration: .6s;
   animation-fill-mode: forwards;
}
@keyframes progress-axdf {
    0%{
        width: 0;
    }
    100%{
        width: 80vw;
    }
}
@keyframes progress-fin {
    0%{
        width: 80vw;
    }
    100%{
        width: 100vw;
    }
}`;

document.querySelector("head").appendChild(style);
let el = document.createElement("div");
el.classList.add("progress-axdf");
let root = document.querySelector("html");
root.insertBefore(el, root.firstChild);
let finProgress = () => {
  el.classList.add("progress-fin");
};

演示：

12