hexo hexo-theme

初识 Hexo Theme

Hexo 的 Theme 文件夹是如何运作的

Posted by Light on 2024-05-24 | 559 words, 1 mins. |

hexo 英文文档上提供了一个讲解 theme 的视频：

https://www.youtube.com/watch?v=5ROIU_9dYe4

根据上面的视频学习。

hexo 的 themes 文件夹是从 layout.ejs 开始渲染的，所有的页面都会使用这个页面。

而 index.ejs, about.ejs, post.ejs, page.ejs 只是作为 body 内容被渲染在 layout.ejs 中。

以首页为例子，如何生成首页的 html

首先查看 layout.ejs 的代码，里面包含了整个页面最基础的元素 <html>, <head>, <body> 。我们可以看到代码中有一个 body 变量，在生成页面的时候，所有内容都经过它填充成为一个完整的页面。

layout.ejs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">

<%- partial('partials/head') %>

<!-- hack iOS CSS :active style -->
<body ontouchstart="">

    <%- partial('partials/nav') %>
    <%- partial('partials/search-page') %>

    <%- body %>

    <%- partial('partials/footer') %>


<!-- Image to hack wechat -->
<!-- <img src="/img/wechat.jpg" width="0" height="0" /> -->
<!-- Migrate from head to bottom, no longer block render and still work -->

</body>

</html>

接下来看看博客首页是如何生成的。首先博客首页会加载 index.ejs 的代码，这部分的代码在最开始的几行代码中指定了 layout:page 。这会导致该页面也是会作为 body 传递的，传递到指定的 page.ejs 中。

index.ejs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
---
layout: page
---

<%- partial('partials/recent-posts') %>

<!-- Pager -->
<% if (page.total > 1) {%>
<ul class="pager">
  <% if (page.prev){ %>
      <li class="previous">
          <a href="<%- config.root %><%- page.prev_link %>">&larr; Newer Posts</a>
      </li>
  <% } %>
  <% if (page.next){ %>
      <li class="next">
          <a href="<%- config.root %><%- page.next_link %>">Older Posts &rarr;</a>
      </li>
  <% } %>
</ul>
<% } %>

然后查看 page.ejs 的代码，上面的 index.ejs 的内容作为 body 被渲染到这部分的代码中。然后这个 page.ejs 的代码再作为 body 渲染到我们最初看到的 layout.ejs 中，形成了一个页面。

page.ejs
1
2
3
4
5
6
---
layout: layout
---
......
  <%- body %>
......
如果这篇文章对你有帮助，那么不妨？
CATALOG
    FEATURED TAGS
    hexo arts