Hexo 主题构建指南：打造丰富且优化的主题

2023-09-21 03:41:28

从零开始：Hexo 主题构建 Part2

在 Hexo 主题构建之旅的第一部分中，我们成功地创建了网站的首页。现在，我们将踏上征程的第二部分，一起完成其余页面的创建，让您的网站更加丰富和完整。

文章详情页：展现内容的舞台

文章详情页是读者深入探索您博客文章内容的地方，因此它至关重要。在 Hexo 中，我们可以通过编辑 layout/post.html 文件来构建文章详情页。

准备工作：确保您已在 themes/your-theme 文件夹中创建了 layout 文件夹。
打开 layout/post.html 文件，并添加以下代码：

---
title: {{ page.title }}
date: {{ page.date }}
categories: {{ page.categories }}
tags: {{ page.tags }}
---

<article class="post">
  <header class="post-header">
    <h1>{{ page.title }}</h1>
    <div class="post-meta">
      <span class="post-date">{{ page.date }}</span>
      <span class="post-categories">Categories: {{ page.categories }}</span>
      <span class="post-tags">Tags: {{ page.tags }}</span>
    </div>
  </header>

  <div class="post-content">
    {{ page.content }}
  </div>

  <footer class="post-footer">
    <div class="post-comments">
      <!-- 评论区域 -->
    </div>
  </footer>
</article>

保存文件，并在浏览器中刷新文章页面，即可看到文章详情页的雏形。

分类页面：内容归类，井然有序

分类页面用于将具有相同分类的文章分组显示。这有助于读者根据兴趣和主题快速找到相关内容。

准备工作：确保您已在 themes/your-theme 文件夹中创建了 layout 文件夹。
打开 layout/category.html 文件，并添加以下代码：

---
title: Category: {{ page.category }}
---

<section class="category">
  <h1>Category: {{ page.category }}</h1>

  <ul class="post-list">
    {% for post in page.posts %}
      <li class="post-item">
        <a href="{{ post.path }}">{{ post.title }}</a>
      </li>
    {% endfor %}
  </ul>
</section>

保存文件，并在浏览器中刷新分类页面，即可看到分类页面的效果。

标签页面：挖掘主题，洞察内涵

标签页面与分类页面类似，但它用于将具有相同标签的文章分组显示。这有助于读者根据特定主题或找到相关内容。

准备工作：确保您已在 themes/your-theme 文件夹中创建了 layout 文件夹。
打开 layout/tag.html 文件，并添加以下代码：

---
title: Tag: {{ page.tag }}
---

<section class="tag">
  <h1>Tag: {{ page.tag }}</h1>

  <ul class="post-list">
    {% for post in page.posts %}
      <li class="post-item">
        <a href="{{ post.path }}">{{ post.title }}</a>
      </li>
    {% endfor %}
  </ul>
</section>

保存文件，并在浏览器中刷新标签页面，即可看到标签页面的效果。

归档页面：时光回溯，重温经典

归档页面是按照时间顺序列出所有文章的页面。这有助于读者快速找到过去发布的文章，并回顾网站的发展历程。

准备工作：确保您已在 themes/your-theme 文件夹中创建了 layout 文件夹。
打开 layout/archive.html 文件，并添加以下代码：

---
title: Archive
---

<section class="archive">
  <h1>Archive</h1>

  <ul class="post-list">
    {% for post in page.posts %}
      <li class="post-item">
        <a href="{{ post.path }}">{{ post.title }}</a>
        <span class="post-date">{{ post.date }}</span>
      </li>
    {% endfor %}
  </ul>
</section>