# AnningBlogs

**Repository Path**: night_wish/anning-blogs

## Basic Information

- **Project Name**: AnningBlogs
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-09-04
- **Last Updated**: 2026-09-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Napalm Lee  Blog

一个基于 **Hexo + Fluid 主题** 的个人技术博客，主要记录 Java、大数据、Spring 生态、前端与 Python 等后端相关的学习笔记。

![首页 Banner](docs/screenshots/01-home-banner.png)

---

## 项目概览

| 项目 | 说明 |
| --- | --- |
| 站点名称 | Napalm Lee Blog |
| 生成器 | [Hexo](https://hexo.io/) 7.3.0 |
| 主题 | [hexo-theme-fluid](https://github.com/fluid-dev/hexo-theme-fluid) 1.9.9 |
| 文章数 | 143 篇（Java / 大数据 / Spring / 前端 / Python 等） |
| 布局宽度 | 首页与文章正文统一为窗口 85% |
| 深色模式 | 支持自动跟随系统/手动切换 |

## 技术栈

- **Hexo** 7.x：静态站点生成器
- **Fluid 主题**：Material-Design 风格的响应式主题
- **Stylus / SCSS / CSS**：样式与自定义布局
- **EJS**：模板引擎
- **Node.js 22.x**：本地开发运行环境

## 快速开始

### 1. 环境要求

- Node.js >= 18
- npm 或兼容包管理器

### 2. 安装依赖

```bash
npm install
```

> Windows 下推荐在 Git Bash 或 PowerShell 中运行；本仓库已提供 `.bat` 脚本，直接双击即可。

### 3. 本地预览

```bash
./dev.bat
```

脚本会自动清空缓存、启动本地服务器，访问：

```
http://localhost:4000
```

按 `Ctrl + C` 停止服务。

### 4. 重新打包

```bash
./build.bat
```

打包后的静态文件输出到 `public/` 目录，可直接部署到任意静态托管服务。

---

## 项目结构

```
AnningBlogs/
├── _config.yml                 # Hexo 根配置（站点标题、作者、语言等）
├── _config.fluid.yml           # Fluid 主题配置（背景图、副标题、导航、颜色等）
├── package.json                # 依赖与 npm 脚本
├── clean.bat                   # 清空缓存脚本
├── build.bat                   # 清缓存 + 打包
├── serve.bat                   # 清缓存 + 打包 + 启动本地服务
├── dev.bat                     # 清缓存 + 启动开发服务（不预打包）
├── start-server.ps1            # 旧版启动脚本（保留）
│
├── docs/                       # 文档与截图
│   └── screenshots/            # README 展示用截图
│
├── output/                     # 过程产物
│   └── blog-architecture.svg   # 博客架构图
│
├── scaffolds/                  # 新建文章/页面/草稿模板
│   ├── draft.md
│   ├── page.md
│   └── post.md
│
├── source/                     # 站点源文件（会被 Hexo 处理）
│   ├── _posts/                 # 所有文章（Markdown）
│   ├── categories/             # 分类页（Fluid 生成）
│   ├── css/                    # 自定义样式
│   │   ├── custom-layout.css   # 85% 宽度等布局自定义
│   │   ├── lxgw-font.css       # 霞鹜文楷字体
│   │   └── ...
│   ├── fonts/                  # 本地字体
│   ├── images/                 # 图片与配图
│   ├── tags/                   # 标签页（Fluid 生成）
│   └── tools/                  # 工具页面
│
├── themes/                     # 主题目录（本仓库使用 npm 主题，此目录为空）
└── node_modules/               # 依赖
```

---

## 常用命令速查

| 脚本 | 作用 | 是否暂停 |
| --- | --- | --- |
| `clean.bat` | 删除 `public/`、`db.json`，执行 `hexo clean` | 是 |
| `clean.bat -y` | 同上，但不暂停（被其他脚本调用用） | 否 |
| `build.bat` | 清空缓存 + 生成静态文件到 `public/` | 是 |
| `serve.bat` | 清空缓存 + 打包 + 启动 http://localhost:4000 | 是 |
| `dev.bat` | 清空缓存 + 直接启动开发服务器，边改边刷新 | 是 |

等价 npm 命令：

```bash
# 清缓存
npm run clean

# 打包
npm run build

# 开发预览
npm run server
```

---

## 自定义配置入口

博客常用的三处修改已经集中到 `_config.fluid.yml` 顶部，其余配置可按需调整：

| 想改什么 | 文件位置 | 具体字段 |
| --- | --- | --- |
| **背景图**（全站默认） | `_config.fluid.yml` | 顶部 `_banner_img`（YAML 锚点，全站同步） |
| **导航栏博客标题** | `_config.fluid.yml` | `navbar.blog_title` |
| **浏览器标签标题** | `_config.yml` | `title` |
| **首页副标题**（打字机文案） | `_config.fluid.yml` | `index.slogan.text` |
| **内容区宽度** | `source/css/custom-layout.css` | `:root { --content-width: 85%; }` |
| **代码高亮主题** | `_config.fluid.yml` | `code.highlight.highlightjs.style` |

> ⚠️ 注意：`_config.fluid.yml` 的字段名必须与 `node_modules/hexo-theme-fluid/_config.yml` 一致。写错的字段会被静默忽略，页面会回退到主题默认值。改配置前建议对照主题原始配置的顶层键名。

---

## 如何添加一篇新博客

本项目所有文章都放在 `source/_posts/` 目录下，**只要把带 front-matter 的 `.md` 文件放进该目录，重新构建就会自动被收录**。有两种方式：

### 方式一：用命令生成（推荐，自动带 front-matter）

在 `E:\WorkSpace\AnningBlogs` 目录下打开终端执行：

```bash
# 生成一篇新文章，会在 source/_posts/ 下创建「文章标题.md」
hexo new "我的第一篇文章"
```

生成后文件头部已自动带好 `title`、`date`、`tags`（模板来自 `scaffolds/post.md`），补全正文即可。

### 方式二：直接放置文件

自己写好了一个 `.md`，直接复制到 `source/_posts/` 即可。但**文件头部必须包含 Hexo 的 front-matter**（两个 `---` 之间），否则会被当成普通文本、不按文章渲染：

```markdown
---
title: 我的第一篇文章
date: 2026-09-04 08:50:14
categories:
  - Java
  - Spring
tags:
  - 学习笔记
  - 后端
---

这里是正文，用 Markdown 写就行……
```

> 当前 `_config.yml` 关键设置：
> - `new_post_name: :title.md` → 新文件按标题命名
> - `default_layout: post` → 默认按文章处理
> - `permalink: :year/:month/:day/:title/` → 文章链接格式
> - `post_asset_folder: true` → 已开启同名资源目录

### 配图说明（重要）

因为开启了 `post_asset_folder: true`，**文章用到的图片要放在与 md 同名的文件夹里**：

```
source/_posts/
├── 我的第一篇文章.md
└── 我的第一篇文章/        ← 同名目录放配图
    └── cover.png
```

在 md 里这样引用：`![封面](我的第一篇文章/cover.png)` 或直接 `![封面](cover.png)`。

### 添加完之后如何预览 / 发布

| 目的 | 操作 | 说明 |
| --- | --- | --- |
| 边写边看效果 | 双击 `dev.bat` | 清缓存 + 直接起服务 `localhost:4000`，改 md 会自动刷新 |
| 重新打包静态站 | 双击 `build.bat` | 清缓存 + `hexo generate`，产物在 `public/` |
| 打包并起服务 | 双击 `serve.bat` | 打包后启动预览 |

> 注意：改了 `_config.yml` / `_config.fluid.yml` / 主题文件，必须重启 `dev.bat`；只改 md 或 css 用 `dev.bat` 热刷新即可。

---

## 截图展示

以下截图在 1264 × 569 视口下截取，展示当前主题与布局效果：

### 首页 Banner

![首页 Banner](docs/screenshots/01-home-banner.png)

### 首页文章列表

![首页文章列表](docs/screenshots/02-home-posts.png)

### 文章页与目录

![文章页与目录](docs/screenshots/03-post-toc.png)

### 归档页

![归档页](docs/screenshots/04-archive.png)

### 深色模式

![深色模式](docs/screenshots/05-dark-mode.png)

---

## 部署

打包后 `public/` 即为完整静态站点，可部署到：

- GitHub Pages
- Gitee Pages
- Vercel / Netlify
- 任意 Nginx / CDN 静态托管

推荐使用 `build.bat` 或 `npm run build` 生成后上传 `public/` 目录。

---
## License

本仓库文章与代码版权归原作者所有；博客主题与依赖遵循各自开源协议。