feat: add Hexo article and refresh blog visuals

_config.butterfly.yml

@@ -38,7 +38,7 @@ subtitle:
 index:
   banner:
     enable: true                         # 是否开启首页封面
-    img: https://api.btstu.cn/sjbz/api.php  # 封面图片 URL (随机二次元图)
+    img: https://image.987119.xyz/uploads/2026/07/18c591a3f567fc7a381.webp  # 图床封面图片
 
 # ==================== 主题配色 ====================
 theme_color:
@@ -129,7 +129,7 @@ category_img: transparent                # 分类页顶图
 category_per_img: transparent            # 单个分类页顶图
 footer_img: transparent                  # 页脚背景图
 
-background: https://image.987119.xyz/uploads/2026/07/18c0005c5dac2c14635.webp  # 全站背景图
+background: https://image.987119.xyz/uploads/2026/07/18c591a3f567fc7a381.webp  # 图床背景图
 
 index_site_info_top: 200px               # 首页站点信息距顶部距离
 index_top_img_height: 400px              # 首页封面图高度

_config.yml

@@ -164,7 +164,7 @@ theme_config:
   index:
     banner:
       enable: true
-      img: https://api.btstu.cn/sjbz/api.php
+      img: https://image.987119.xyz/uploads/2026/07/18c591a3f567fc7a381.webp
 
   theme_color:
     enable: true
@@ -218,6 +218,10 @@ theme_config:
     head:
       - <meta name="referrer" content="no-referrer">
       - <link rel="stylesheet" href="/css/custom.css">
+      - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lxgw-wenkai-webfont@1.7.0/style.css">
+    bottom:
+      - <script src="/js/background-rotate.js"></script>
+      - <script src="/js/sakura.js"></script>
 
   code_blocks:
     theme: pale night
@@ -239,7 +243,7 @@ theme_config:
   category_per_img: transparent
   footer_img: transparent
 
-  background: https://image.987119.xyz/uploads/2026/07/18c0005c5dac2c14635.webp
+  background: https://image.987119.xyz/uploads/2026/07/18c591a3f567fc7a381.webp
   index_site_info_top: 200px
   index_top_img_height: 400px
 

source/_posts/Hexo添加文章完整教学.md

@@ -0,0 +1,377 @@
+---
+title: Hexo 添加文章完整教学
+date: 2026-07-26 09:00:00
+tags: [Hexo, 博客, 教程]
+categories: 教程
+cover: /images/Hexo 添加文章完整教学/efd8105608be4a03ba9d1ef67ce41b6f-blackwhite.png
+description: 从创建文章到发布上线，完整介绍 Hexo 添加文章的流程、Front-matter 配置、图片管理和常见问题。
+---
+
+Hexo 是一个基于 Node.js 的静态博客框架。写文章时，我们只需要准备 Markdown 文件，Hexo 就会把它转换成 HTML 页面。
+
+本文以一个已经安装好的 Hexo 博客为例，介绍从创建文章到发布上线的完整流程。
+
+## 一、准备工作
+
+开始之前，请确认已经安装：
+
+- Node.js；
+- npm；
+- Hexo CLI；
+- Git（如果需要部署到远程仓库）。
+
+在博客根目录执行以下命令，确认环境正常：
+
+```bash
+node -v
+npm -v
+hexo -v
+```
+
+Hexo 博客的文章默认保存在：
+
+```text
+source/_posts
+```
+
+本文中的命令都应在 Hexo 项目根目录执行，也就是能看到 `_config.yml` 和 `package.json` 的目录。
+
+## 二、创建一篇新文章
+
+最推荐使用 Hexo 命令创建文章：
+
+```bash
+hexo new "我的第一篇文章"
+```
+
+执行成功后，Hexo 会在 `source/_posts` 目录生成一个 Markdown 文件，例如：
+
+```text
+source/_posts/我的第一篇文章.md
+```
+
+也可以直接使用 npm 脚本（如果项目已经配置）：
+
+```bash
+npx hexo new "我的第一篇文章"
+```
+
+文件名可以使用中文、英文或数字。为了兼容不同系统和部署环境，建议使用简洁的英文或拼音，例如：
+
+```text
+hexo-add-post.md
+```
+
+## 三、认识 Front-matter
+
+新文章顶部由一对 `---` 包围的内容叫 Front-matter，它用于设置文章的标题、日期、标签等信息。
+
+```yaml
+---
+title: 我的第一篇文章
+date: 2026-07-26 09:00:00
+tags: [Hexo, 教程]
+categories: 博客
+description: 这是文章摘要。
+---
+```
+
+常用字段说明如下：
+
+| 字段 | 作用 | 示例 |
+| --- | --- | --- |
+| `title` | 文章标题 | `title: Hexo 入门` |
+| `date` | 发布时间 | `date: 2026-07-26 09:00:00` |
+| `updated` | 修改时间 | `updated: 2026-07-26 10:00:00` |
+| `tags` | 文章标签 | `tags: [Hexo, 教程]` |
+| `categories` | 文章分类 | `categories: 博客` |
+| `cover` | 封面图片 | `cover: /images/hexo/cover.jpg` |
+| `description` | 摘要或描述 | `description: Hexo 使用教程` |
+| `comments` | 是否开启评论 | `comments: true` |
+| `toc` | 是否显示目录 | `toc: true` |
+| `mathjax` | 是否启用数学公式 | `mathjax: true` |
+| `permalink` | 自定义文章链接 | `permalink: hexo-add-post/` |
+| `published` | 是否发布 | `published: false` |
+
+其中 `title` 是必填项。其他字段是否生效，取决于当前主题是否支持。例如 Butterfly 主题支持封面、目录和评论等配置。
+
+## 四、编辑文章正文
+
+Front-matter 结束后，在下面使用 Markdown 编写正文：
+
+~~~markdown
+---
+title: 我的第一篇文章
+date: 2026-07-26 09:00:00
+tags: [Hexo, 教程]
+categories: 博客
+---
+
+## 文章小标题
+
+这里是正文内容，可以使用 **粗体**、*斜体* 和 [链接](https://hexo.io/)。
+
+```javascript
+console.log('Hello Hexo!');
+```
+~~~
+
+建议使用二级标题 `##` 作为正文的章节标题，不要在正文中重复写文章标题，因为主题通常会自动显示 `title`。
+
+## 五、设置标签和分类
+
+一篇文章可以有多个标签，但通常只设置一个主分类：
+
+```yaml
+tags:
+  - Hexo
+  - Markdown
+  - 博客搭建
+categories: 技术教程
+```
+
+下面两种写法也都可以：
+
+```yaml
+tags: [Hexo, Markdown]
+categories: 技术教程
+```
+
+分类表示文章所属的栏目，标签表示文章涉及的主题。比如：分类可以是“教程”，标签可以是“Hexo”和“部署”。
+
+## 六、添加文章封面和正文图片
+
+### 1. 使用图床或外部地址
+
+```yaml
+cover: https://example.com/images/cover.jpg
+```
+
+正文中直接引用：
+
+```markdown
+![图片说明](https://example.com/images/example.jpg)
+```
+
+### 2. 使用博客本地图片
+
+在 `source` 目录下创建图片目录：
+
+```text
+source/images/hexo-add-post/cover.jpg
+```
+
+然后在文章中使用：
+
+```yaml
+cover: /images/hexo-add-post/cover.jpg
+```
+
+正文图片写法：
+
+```markdown
+![Hexo 添加文章流程](/images/hexo-add-post/create-post.png)
+```
+
+如果希望图片和 Markdown 文件放在同一个目录，可以在 `_config.yml` 中启用：
+
+```yaml
+post_asset_folder: true
+```
+
+之后创建文章时，Hexo 会生成同名资源目录：
+
+```text
+source/_posts/我的第一篇文章.md
+source/_posts/我的第一篇文章/
+```
+
+将图片放入该目录，并使用资源路径：
+
+```markdown
+{% asset_img example.jpg 图片说明 %}
+```
+
+不同主题对资源标签的支持情况可能不同。若显示异常，使用 `source/images` 加绝对路径通常更稳定。
+
+## 七、使用草稿功能
+
+如果文章还没有写完，可以创建草稿：
+
+```bash
+hexo new draft "未完成的文章"
+```
+
+草稿默认保存在：
+
+```text
+source/_drafts/未完成的文章.md
+```
+
+预览草稿：
+
+```bash
+hexo server --draft
+```
+
+写完后，将草稿发布到文章目录：
+
+```bash
+hexo publish "未完成的文章"
+```
+
+发布后文件会从 `source/_drafts` 移动到 `source/_posts`。
+
+## 八、本地预览文章
+
+保存文章后，启动本地服务器：
+
+```bash
+hexo clean
+hexo generate
+hexo server
+```
+
+然后在浏览器访问：
+
+```text
+http://localhost:4000
+```
+
+开发时可以使用简写命令：
+
+```bash
+hexo clean && hexo server
+```
+
+`hexo server` 通常会自动生成页面。若修改后浏览器没有更新，可以先执行 `Ctrl+C` 停止服务，再重新运行 `hexo clean && hexo server`。
+
+## 九、生成静态文件
+
+确认文章内容无误后，生成最终的静态页面：
+
+```bash
+hexo clean
+hexo generate
+```
+
+生成结果默认位于：
+
+```text
+public
+```
+
+如果只想生成某一篇文章，可以使用：
+
+```bash
+hexo generate --path hexo-add-post/
+```
+
+## 十、部署到远程服务器
+
+如果项目已经配置好部署参数，可以直接执行：
+
+```bash
+hexo deploy
+```
+
+常见的完整发布流程是：
+
+```bash
+hexo clean
+hexo generate
+hexo deploy
+```
+
+如果博客源码本身也使用 Git 管理，还需要提交并推送源码：
+
+```bash
+git add source/_posts/Hexo添加文章完整教学.md
+git commit -m "docs: add Hexo post tutorial"
+git push origin main
+```
+
+具体的部署命令取决于博客使用的 GitHub Pages、服务器、Vercel 或其他平台。不要把密码、令牌和私钥直接写入文章或提交到仓库。
+
+## 十一、常见问题
+
+### 1. 文章没有显示
+
+依次检查：
+
+1. 文件是否位于 `source/_posts`；
+2. Front-matter 是否以 `---` 开始和结束；
+3. `title` 和 `date` 是否正确；
+4. 是否误设置了 `published: false`；
+5. 是否执行过 `hexo clean`；
+6. 文章日期是否晚于当前时间。
+
+### 2. 中文文件名导致链接异常
+
+部分服务器或主题对中文 URL 的处理不一致。可以在 Front-matter 中指定英文链接：
+
+```yaml
+permalink: hexo-add-post/
+```
+
+### 3. 标签或分类没有出现
+
+确认字段格式正确，并检查主题是否开启了标签页和分类页。推荐使用：
+
+```yaml
+tags: [Hexo, 教程]
+categories: 教程
+```
+
+### 4. 图片无法显示
+
+检查图片是否位于 `source` 目录内、路径大小写是否一致，以及引用路径是否以 `/` 开头。部署到 Linux 服务器时，`Cover.jpg` 和 `cover.jpg` 会被视为两个不同文件。
+
+### 5. 修改文章后页面仍是旧内容
+
+清理缓存并重新生成：
+
+```bash
+hexo clean
+hexo generate
+```
+
+同时清理浏览器缓存，或使用无痕窗口检查。
+
+## 十二、推荐的完整工作流
+
+以后每次添加文章，可以按照下面的顺序操作：
+
+```bash
+# 1. 创建文章
+hexo new "文章标题"
+
+# 2. 编辑 source/_posts/文章标题.md
+
+# 3. 本地预览
+hexo clean
+hexo server
+
+# 4. 确认无误后生成
+hexo clean
+hexo generate
+
+# 5. 部署上线
+hexo deploy
+
+# 6. 如果源码使用 Git，则提交源码
+git add .
+git commit -m "docs: add new post"
+git push
+```
+
+## 总结
+
+Hexo 添加文章的核心流程只有四步：
+
+1. 使用 `hexo new` 创建 Markdown 文件；
+2. 编辑 Front-matter 和正文；
+3. 使用 `hexo server` 本地预览；
+4. 使用 `hexo generate` 和 `hexo deploy` 生成并发布。
+
+掌握这套流程后，日常写作只需要专注于 `source/_posts` 目录中的 Markdown 文件即可。

source/css/custom.css

@@ -152,3 +152,22 @@ html:not([data-theme="dark"]) #post-info #post-meta i {
         font-size: 2.73em !important;
     }
 }
+
+/* ==================== 背景轮换淡入时长（配合 3 秒切换） ==================== */
+#web_bg.bg-animation {
+    animation-duration: 1.2s;
+}
+
+/* ==================== 全站字体：霞鹜文楷 (LXGW WenKai) ==================== */
+/* 仅替换正文字体，代码块保持主题自带的等宽字体 */
+body,
+#body-wrap,
+#article-container,
+#post-info,
+#aside-content,
+#nav,
+.site-page,
+footer#footer,
+#pagination {
+    font-family: "LXGW WenKai", "LXGW WenKai Screen", "Microsoft YaHei", "PingFang SC", sans-serif !important;
+}

source/js/background-rotate.js

@@ -0,0 +1,43 @@
+/* 全站背景图定时轮换（每 6 秒切换一张，交叉淡入淡出） */
+(function () {
+  var bgList = [
+    'https://image.987119.xyz/uploads/2026/07/18c591a3f567fc7a381.webp',
+    'https://image.987119.xyz/uploads/2026/07/18c5917f198ecf88481.webp',
+    'https://image.987119.xyz/uploads/2026/07/18c5917e0bbb86bb221.webp',
+    'https://image.987119.xyz/uploads/2026/07/18c591618e6be61c264.webp',
+    'https://image.987119.xyz/uploads/2026/07/18c5916148d840e1468.webp',
+    'https://image.987119.xyz/uploads/2026/07/18c59161282de003513.webp'
+  ]
+  var webBg = document.getElementById('web_bg')
+  if (!webBg || bgList.length < 2) return
+
+  // 覆盖层：用于交叉淡入，避免背景瞬间硬切
+  var overlay = document.createElement('div')
+  overlay.id = 'web_bg_overlay'
+  overlay.style.cssText =
+    'position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;' +
+    'background-size:cover;background-position:center;opacity:0;' +
+    'transition:opacity 1.5s ease;'
+  document.body.appendChild(overlay)
+
+  var idx = 0
+  var DURATION = 1500 // 淡入淡出时长(ms)，须与 CSS transition 一致
+
+  function swap() {
+    idx = (idx + 1) % bgList.length
+    var url = 'url("' + bgList[idx] + '")'
+    // 新图先放到覆盖层并淡入，盖住旧图
+    overlay.style.backgroundImage = url
+    void overlay.offsetWidth // 强制 reflow，确保过渡生效
+    overlay.style.opacity = '1'
+    // 过渡结束后，把底层也换成新图，再将覆盖层淡出，实现无缝循环
+    setTimeout(function () {
+      webBg.style.backgroundImage = url
+      webBg.style.backgroundSize = 'cover'
+      webBg.style.backgroundPosition = 'center'
+      overlay.style.opacity = '0'
+    }, DURATION)
+  }
+
+  setInterval(swap, 6000)
+})()

source/js/sakura.js

@@ -0,0 +1,44 @@
+/* 樱花飘落效果：动态生成花瓣，CSS 动画飘落+左右摇摆+旋转 */
+(function () {
+  if (document.getElementById('sakura-container')) return
+
+  // 容器：铺满全屏、不拦截鼠标事件
+  var container = document.createElement('div')
+  container.id = 'sakura-container'
+  container.style.cssText =
+    'position:fixed;top:0;left:0;width:100%;height:100%;' +
+    'pointer-events:none;z-index:9999;overflow:hidden;'
+  document.body.appendChild(container)
+
+  // 样式与飘落关键帧（S 形摆动 + 旋转）
+  var style = document.createElement('style')
+  style.textContent =
+    '.sakura-petal{' +
+    '  position:absolute;top:-12%;' +
+    '  background:#ffb7c5;border-radius:100% 0 100% 0;' +
+    '  opacity:.85;will-change:transform;' +
+    '  animation:sakura-fall linear infinite;' +
+    '}' +
+    '@keyframes sakura-fall{' +
+    '  0%{transform:translate(0,-12vh) rotate(0deg);}' +
+    '  25%{transform:translate(18px,25vh) rotate(90deg);}' +
+    '  50%{transform:translate(-18px,50vh) rotate(180deg);}' +
+    '  75%{transform:translate(18px,75vh) rotate(270deg);}' +
+    '  100%{transform:translate(0,112vh) rotate(360deg);}' +
+    '}'
+  document.head.appendChild(style)
+
+  var PETALS = 28
+  for (var i = 0; i < PETALS; i++) {
+    var p = document.createElement('div')
+    p.className = 'sakura-petal'
+    var size = 8 + Math.random() * 10 // 8~18px
+    p.style.width = size + 'px'
+    p.style.height = size + 'px'
+    p.style.left = Math.random() * 100 + 'vw'
+    p.style.background = Math.random() > 0.5 ? '#ffb7c5' : '#ffc8d6'
+    p.style.animationDuration = (6 + Math.random() * 6).toFixed(2) + 's' // 6~12s
+    p.style.animationDelay = (-Math.random() * 12).toFixed(2) + 's' // 错落起步
+    container.appendChild(p)
+  }
+})()

themes/butterfly

@@ -1 +0,0 @@
-/root/hexo-blog/node_modules/hexo-theme-butterfly