hexo-theme-comic

一个漫画风格的 Hexo 主题。粗黑边框、偏移阴影、奶油底色 + 高饱和度点缀色，搭配现代响应式布局与丰富的交互功能。

特性

• 漫画风格视觉 — 4px 实线边框 + 4px 偏移阴影 + 全大写粗体标题，奶油底色 (#fffef0) 配黑/红/黄/蓝/绿
• 响应式布局 — 三档断点（768px / 1024px），移动端友好
• Mermaid 图表 — 构建时自动渲染为内联 SVG（含 PNG 数据用于下载），悬浮工具栏（预览/下载），macOS 风格灯箱支持缩放、平移、键盘快捷键
• 图片灯箱 — 点击放大，支持滚轮缩放、拖拽平移、键盘操作（Esc/+/-/0），从 alt 属性自动生成图片说明
• 代码块 — 终端风格代码块，语言标签，一键复制（含"已复制"气泡反馈）
• Raw Markdown 源码链接 — 每篇文章自动生成 <permalink>/article.md 路由，在文章页以图标链接展示
• 转载标记 — 支持 front-matter repost: true + original_url 显示"转载"徽章与原文链接
• 纯 CSS / 零框架依赖 — 不使用 jQuery、Bootstrap 等任何外部 CSS/JS 框架
• 装饰动画 — 页面漂浮星星随机移动动画

安装

1. 将主题克隆/下载到 themes 目录

cd your-hexo-blog
git clone https://github.com/imjcw/hexo-theme-comic.git themes/comic

2. 在 Hexo 配置中指定主题

编辑 _config.yml：

theme: comic

3. 安装必要依赖

npm install hexo-renderer-ejs hexo-renderer-marked --save

4. 可选依赖

• hexo-neat — HTML/CSS/JS 压缩

  npm install hexo-neat --save

• puppeteer — Mermaid 图表构建时渲染（仅在文章中使用了 mermaid 代码块时需要）

  cd themes/comic
  npm install puppeteer --save-dev

5. 生成站点

hexo clean && hexo generate

主题配置

编辑 themes/comic/_config.yml：

# 导航菜单（键为显示文字，值为路径）
menu:
  首页: /
  分类: /categories
  标签: /tags
  归档: /archives

# 首页 Hero 区域
hero:
  enable: true
  title:                    # Hero 标题（可选，留空则不显示）
  description: 你的副标题或标语
  quote:                    # 引用语（可选）
  buttons:                  # 按钮列表（可选）
    # - text: 按钮文字
    #   url: /link

# 首页文章列表
index:
  section_title: 最新文章
  full_catalog_url: /archives
  show_category: true       # 是否在列表项显示分类
  show_tags: true           # 是否在列表项显示标签

# 页脚
footer:
  copyright: '2026'
  description:              # 页脚描述文字（可选）

# 文章页元信息
post_meta:
  show_date: true
  show_author: true
  show_categories: true
  show_tags: true

# 各页面描述
tags:
  description: 按标签浏览所有文章
categories:
  description: 按分类浏览所有文章
archives:
  description: 按时间归档

Front-matter 扩展

在文章 front-matter 中使用以下字段：

---
title: 文章标题
date: 2026-08-01
categories: [分类名]
tags: [标签1, 标签2]
repost: true              # 标记为转载文章，标题旁显示"转载"徽章
original_url: https://example.com/original-article
---

• repost — 设为 true 时，文章标题旁显示红色"转载"徽章
• original_url — 当 repost: true 时设置，文章元信息区域显示原文链接图标按钮

Mermaid 图表用法

在 Markdown 文章中使用标准 mermaid 代码块：

```mermaid
flowchart LR
    A[开始] --> B[处理]
    B --> C[结束]
```

支持 flowchart、sequenceDiagram、classDiagram、gantt、stateDiagram、erDiagram、gitGraph、pie 等所有 mermaid 图类型。

构建时自动渲染为 SVG，页面上：

• 悬浮图表右上角出现工具栏（预览 / 下载 PNG）
• 点击"预览"打开 macOS 风格灯箱，支持缩放、平移、键盘快捷键
• 点击"下载"直接下载 PNG 图片

注意：首次构建 mermaid 图表时需要 puppeteer 和 Chromium 浏览器。运行 cd themes/comic && npm install puppeteer 安装。

故障排查

Mermaid 图表不显示 / 构建报 chromium 错误

构建 mermaid 图表依赖 puppeteer（Chromium）。常见问题：

1. 未安装 puppeteer

   cd themes/comic
   npm install puppeteer --save-dev

2. Chromium 下载失败（国内网络常见） 设置镜像后重装：

   set PUPPETEER_DOWNLOAD_BASE_URL=https://cdn.npmmirror.com/binaries/chrome-for-testing
   npm install puppeteer --save-dev

3. 系统缺少 Chromium 运行依赖（Linux）

   # Debian/Ubuntu
   sudo apt-get install -y libnss3 libatk1.0-0 libatk-bridge2.0-0 libcups2 \
     libxkbcommon0 libxcomposite1 libxdamage1 libxfixes3 libxrandr2 \
     libgbm1 libpango-1.0-0 libcairo2 libasound2 libgtk-3-0

4. 构建日志中出现 mermaid-build: ABORTING 说明渲染进程失败，文章中的 mermaid 代码块会原样保留（不会渲染成图）。请检查上面的 puppeteer/Chromium 安装。

主题不生效

• 确认 Hexo 根目录 _config.yml 中 theme: comic
• 确认主题目录名为 themes/comic/
• 运行 hexo clean && hexo generate 后重试

中文乱码 / 模板报错（Windows）

• 项目已包含 .gitattributes 强制 LF 换行。若手动编辑了模板后出现语法错误，检查文件是否为 LF 换行（而非 CRLF）

浏览器支持

• Chrome / Edge / Firefox / Safari 最新版本
• 移动端浏览器

许可证

MIT