按照上次的使用AI工具的经验，这次给自己这个小破站增加了两个页面，分别是：分类页面和404错误页面。

一、添加分类页面（Categories）

  1. 创建分类页面文件

在 source 文件夹下创建 categories 文件夹，新建 index.md：文件路径：source/categories/index.md

1
2
3
4
5
---
title: 文章分类
layout: categories  # 指定分类布局
date: 2025-10-31 12:00:00
---
  1. 创建分类页面布局

在 layout 文件夹下新建 categories.ejs：文件路径：layout/categories.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
25
26
27
28
29
30
31
32
33
34
35
36
37
<section class="archive categories-page">
  <div class="archive-title">
    <h1><%= page.title %></h1>
  </div>

  <% if (site.categories.length > 0) { %>
    <% site.categories.each(function(category) { %>
      <div class="category-item">
        <!-- 分类名称与文章数量 -->
        <h2 class="category-name">
          <a href="<%= category.permalink %>" style="color: var(--accent-color);">
            <%= category.name %>
            <span class="category-count">（<%= category.posts.length %>篇）</span>
          </a>
        </h2>
        
        <!-- 分类下的文章列表 -->
        <ul class="category-posts">
          <% category.posts.sort('-date').each(function(post) { %>
            <li class="archive-item">
              <span class="archive-date"><%= date(post.date, 'YYYY-MM-DD') %></span>
              <a href="<%= post.permalink %>" class="archive-title-link"><%= post.title %></a>
            </li>
          <% }) %>
        </ul>
      </div>
    <% }) %>
  <% } else { %>
    <div class="no-posts">
      <div class="no-posts-inner">
        <i class="fa fa-folder-o" style="font-size: 2rem; margin-bottom: 1rem;"></i>
        <p>暂无分类</p>
        <p style="font-size: 0.9rem;">在文章Front-matter中添加 <code>categories: 分类名</code> 创建分类</p>
      </div>
    </div>
  <% } %>
</section>
  1. 导航栏添加分类链接

修改 layout/_partial/header.ejs，在导航菜单中添加分类项：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<nav class="header-menu">
  <ul class="menu-list">
    <li class="menu-item <%= is_home() ? 'active' : '' %>">
      <a href="<%= url_for('/') %>">首页</a>
    </li>
    <li class="menu-item <%= is_archive() ? 'active' : '' %>">
      <a href="<%= url_for('/archives') %>">归档</a>
    </li>
    <!-- 新增分类导航项 -->
    <li class="menu-item <%= is_page('categories') ? 'active' : '' %>">
      <a href="<%= url_for('/categories') %>">分类</a>
    </li>
    <li class="menu-item <%= is_tag() ? 'active' : '' %>">
      <a href="<%= url_for('/tags') %>">标签</a>
    </li>
    <li class="menu-item <%= is_page('about') ? 'active' : '' %>">
      <a href="<%= url_for('/about') %>">关于</a>
    </li>
  </ul>
</nav>
  1. 添加分类页面样式（style.css 补充）
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
45
46
47
48
49
50
51
/* ==================================================
   分类页面样式
================================================== */
.categories-page {
  background-color: var(--white);
  border-radius: 8px;
  padding: 2rem;
  box-shadow: var(--shadow);
  margin-bottom: 2rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.category-item {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
}

.category-item:last-child {
  border-bottom: none;
}

.category-name {
  font-size: 1.4rem;
  margin-bottom: 1rem;
  color: var(--accent-color);
}

.category-count {
  font-size: 0.9rem;
  color: var(--secondary-color);
  font-weight: normal;
}

.category-posts {
  list-style: none;
  padding: 0;
}

/* 复用归档页文章项样式，保持一致 */
.category-posts .archive-item {
  display: flex;
  padding: 0.6rem 0;
  border-bottom: 1px dashed var(--border-color);
}

.category-posts .archive-item:hover {
  background-color: var(--light-gray);
}

二、添加 404 错误页面

  1. 创建 404 页面文件

在 source 根目录下新建 404.html（直接放在 source 下，无需文件夹）：

文件路径：source/404.html

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
<!DOCTYPE html>
<html lang="<%= config.language || 'zh-CN' %>">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>404 - 页面未找到</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="/css/style.css">
</head>
<body>
  <div class="container">
    <!-- 导航栏 -->
    <header>
      <%- include('_partial/header') %>
    </header>

    <!-- 404内容区 -->
    <main class="four-zero-four">
      <div class="four-zero-four-inner">
        <div class="error-code">404</div>
        <div class="error-message">页面好像迷路了...</div>
        <div class="error-tips">
          <p>你访问的页面不存在或已被移动</p>
          <p>建议检查URL是否正确，或返回首页重新导航</p>
        </div>
        <a href="<%= url_for('/') %>" class="back-home-btn">
          <i class="fa fa-arrow-left"></i> 返回首页
        </a>
      </div>
    </main>

    <!-- 底部 -->
    <footer>
      <%- include('_partial/footer') %>
    </footer>
  </div>
</body>
</html>
  1. 添加 404 页面样式（style.css 补充）
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
/* ==================================================
   404页面样式
================================================== */
.four-zero-four {
  background-color: var(--white);
  border-radius: 8px;
  padding: 4rem 2rem;
  box-shadow: var(--shadow);
  margin-bottom: 2rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.four-zero-four-inner {
  max-width: 500px;
  margin: 0 auto;
}

.error-code {
  font-size: 6rem;
  font-weight: 700;
  color: var(--accent-color);
  margin-bottom: 1rem;
  line-height: 1;
}

.error-message {
  font-size: 1.8rem;
  color: var(--primary-color);
  margin-bottom: 1.5rem;
}

.error-tips {
  color: var(--secondary-color);
  font-size: 1rem;
  margin-bottom: 2rem;
  line-height: 1.7;
}

.back-home-btn {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  background-color: var(--accent-color);
  color: var(--white);
  border-radius: 4px;
  font-size: 1rem;
  transition: background-color 0.2s ease;
}

.back-home-btn:hover {
  background-color: var(--accent-hover);
  color: var(--white);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .four-zero-four {
    padding: 3rem 1.5rem;
  }
  
  .error-code {
    font-size: 4.5rem;
  }
  
  .error-message {
    font-size: 1.5rem;
  }
}

到现在就成功的增加了这两个页面，当然以上的代码只适合我自己使用，对其他的任何人都是无效的。

不过我在测试404错误页面的时候，上面的404错误页代码显示是不正常的，我也不知道是哪里出的问题。

最后我把style.css文件里的404错误代码删除之后正常了！虽然现在看起来依然是一个怪怪的感觉。但是我在测试的时候，现在是正常的显示了，不像我一开始测试的时候出现的一堆乱码了。😄

现在先记录一下，免得以后自己在分不清楚那个是那个。😄