WordPress 博客 EasyBe-2 主题搭建记录

easybe-2/
├── style.css       # 主题样式（全屏Banner、侧边栏面板、文章排版、夜间模式）
├── index.php       # 首页模板（全屏Banner + 文章列表 + 侧边导航面板）
├── single.php      # 文章详情页模板
├── functions.php   # 主题设置与资源加载
└── Parsedown.php   # Markdown 解析库

通过 SCP 上传主题文件到服务器：

scp easybe-2/* root@10.10.10.42:/var/www/blog/wp-content/themes/easybe-2/

通过 PHP 脚本激活主题并刷新缓存。

二、首页功能

2.1 全屏 Banner

首页采用全屏背景图 + 半透明遮罩的 Banner 设计，覆盖整个视口高度（100vh）。Banner 上包含：

• 博客标题与副标题
• MENU 按钮（左上角）：点击展开侧边导航面板
• 日夜切换按钮（右上角）：切换深色/浅色模式
• 导航链接：首页、分类、关于

2.2 侧边导航面板（博客园风格）

点击 MENU 按钮弹出，参考博客园（cnblogs.com）的设计，包含：

• 用户信息区（头像、用户名、签名）
• 统计信息（随笔数、评论数、阅读量）
• 搜索框
• 日历组件
• 最新随笔列表
• 分类列表（按文章数量排序）
• 积分与排名
• 阅读排行

面板通过 JavaScript 控制显示/隐藏，配合半透明遮罩层实现。

2.3 文章列表区

Banner 下方为文章列表区，采用白色卡片设计，滚动即可查看，无需点击切换页面。每篇文章显示：

• 文章标题
• 元信息（发布日期、阅读量、评论数、推荐数）
• 内容摘要
• "阅读全文"链接

支持分页导航。

三、文章详情页

3.1 顶部导航条

深色底栏，显示博客名称、随笔/分类/评论/阅读统计、日夜切换按钮。

3.2 文章排版

完整支持 Markdown 渲染，包括：

• 多级标题（h2/h3）
• 代码块（语法高亮风格）
• 表格
• 引用块
• 有序/无序列表

3.3 其他功能

• 文章标签展示
• 点赞/踩按钮
• 上一篇/下一篇导航
• 作者信息卡片
• 评论区

四、Markdown 渲染方案

文章内容以 Markdown 原文存储在数据库中，需要在前端渲染为 HTML。

选择 Parsedown 作为 Markdown 解析器：

wget https://raw.githubusercontent.com/erusev/parsedown/master/Parsedown.php

在 single.php 中加载 Parsedown 并判断内容格式：

require_once get_stylesheet_directory() . '/Parsedown.php';
$parsedown = new Parsedown();
$raw_content = get_the_content();
if (strpos(trim($raw_content), 'text($raw_content);  // Markdown → HTML
} else {
    the_content();  // 原生 HTML 输出
}

五、夜间模式

通过 JavaScript 自动检测系统时间，19:00-7:00 自动启用夜间模式。也可通过右上角按钮手动切换。

CSS 中使用 .dark-mode 类覆盖所有组件的颜色方案，包括背景、文字、边框、代码块等。

六、分类数据清理

编写 Python 脚本连接 MySQL 数据库，清理空的分类目录。最终保留 9 个有效分类：

七、总结

EasyBe-2 是一个极简风格的 WordPress 主题，核心特点：

• 全屏 Banner 首页
• 博客园风格侧边导航面板
• 完整的 Markdown 渲染支持
• 自动夜间模式
• 响应式设计
• 博客园风格文章列表

整个过程通过 CodeBuddy AI 辅助完成，从主题编写到部署、内容管理均在对话中完成。

本文由 EasyBe-2 主题自动排版渲染。