Hexo博客

hexo-theme-modernduang — Hexo 博客模板

作者 PlayWithAndyJin

一款采用 Claymorphism 柔和粘土质感的 Hexo 博客主题，支持暗色模式、响应式布局、Twikoo 评论与年度计划等模块。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

3 个预览视图

桌面端首页1 / 3

访问演示网站在新标签页打开

桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 3

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-10-01查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

Claymorphism 柔和粘土质感视觉风格

暗色模式支持跟随系统或手动切换

首页含年度计划进度、站点运行时长与十年之约倒计时

内置 Twikoo 评论、Mermaid 图表与四种自定义引用块

支持文章可见性控制（列表隐藏或完全隐藏）

提供 Claude Code Agent Skills 辅助配置与自定义

模板详细介绍

hexo-theme-modernduang 是面向 Hexo 的博客主题，视觉上采用柔和的 Claymorphism 设计风格，整体偏向简洁、蓬松的卡片化观感。主题要求 Hexo 6.0 及以上、Node.js 14.0.0 及以上，通过 npm 安装后把站点 _config.yml 的 theme 指向 modernduang 即可启用。

功能层面，主题覆盖博客常见页面：首页 Hero、最新文章、站点数据、归档、分类、标签、友链与关于页。首页可展示年度计划进度与子任务进度条，以及站点运行时长和十年之约倒计时。导航支持下拉菜单、自定义 SVG 图标与外链新窗口打开；分类页可配置图标、颜色和描述；友链支持分组展示。文章页内置 Mermaid 图表渲染和四种自定义引用块（提示、警告、声明、危险），并支持通过 Front Matter 的 visibility 字段控制文章在前台隐藏或完全隐藏。

配置方面，主题提供独立的 _config.modernduang.yml，可设置暗色模式默认值、首页个人信息卡片、页脚社交图标、ICP 备案信息等。评论使用 Twikoo，需要自行部署后端并填写 envId。主题另配套 Claude Code Agent Skills，用于辅助安装配置与源码自定义。

使用限制：主题代码采用 MIT 许可，可免费使用、修改、商用和分发，但演示图片、字体、图标等第三方素材需按各自许可核对；Twikoo 等外部服务可能产生额外费用。

Hexo博客

适合你的项目吗？

适用场景

使用 Hexo 搭建个人博客并希望获得卡片化粘土质感界面
需要在首页展示年度计划进度与站点运行数据的博客
希望用 Twikoo 作为评论系统并自行部署后端的站点
需要分类、标签、友链分组等完整内容组织页面的博客

适合人群

使用 Hexo 6.0 及以上、Node.js 14.0.0 及以上的站点
偏好柔和 3D 粘土风格而非极简或商务风格的博主
愿意自行部署 Twikoo 后端并维护第三方服务的用户
需要中文界面与 ICP 备案展示的国内博客

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
在站点目录执行 npm install hexo-theme-modernduang --save，并将 _config.yml 的 theme 设为 modernduang
2
Hexo 版本低于 6.0 时需手动复制主题到 themes/modernduang
3
将主题默认配置复制为站点根目录的 _config.modernduang.yml 后按需修改
4
使用评论功能需先部署 Twikoo 后端并在配置中填入 envId
5
主题代码为 MIT 许可，但演示图片、字体、图标等第三方素材需单独核对许可

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

允许免费使用、修改、商用和分发该版本代码。
分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

评论功能依赖第三方 Twikoo 服务，需自行部署后端并获取 envId 填入配置；该外部服务可能产生额外费用，且不属于主题代码的 MIT 授权范围。
配套的 Claude Code Agent Skills 位于独立仓库 modernduang-skills，需另行安装，不属于本主题仓库的 MIT 授权范围。
使用要求 Hexo >= 6.0.0、Node.js >= 14.0.0；低于 Hexo 6.0 时需手动复制主题目录到 themes/modernduang 才能生效。
演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
域名、托管、数据库、支付或 AI 等外部服务可能另外收费。

查看原文依据

Permission is hereby granted, free of charge
许可证原文

前往 [Twikoo](https://twikoo.js.org/) 部署后端并获取 `envId`，然后填入配置
README 原文

npx skills add PlayWithAndyJin/modernduang-skills --all
README 原文

如果你的 Hexo 版本低于 6.0，需额外执行：`cp -r node_modules/hexo-theme-modernduang themes/modernduang`
README 原文

https://github.com/PlayWithAndyJin/hexo-theme-modernduang/blob/main/LICENSE https://github.com/PlayWithAndyJin/hexo-theme-modernduang/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-01。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台: GitHub
资料与维护参考分: 资料较完整 · 83 / 100
技术栈: Hexo
网站类型: 博客

这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间: 2026-07-19
截图检查日期: 2026-10-01

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Hexo。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

已完成服务器许可规则与 AI 来源核对；未经过人工编辑审核。

查看当时使用的来源资料

SHA-256: 7259321570e6ba3f9e5273f85a701c80a6d3332e0a782dbd2ac2a21d1ad74344

2026-10-01T03:15:08.022Z

来源文件 / 仓库

<h1 align="center">Modern Duang</h1>

<p align="center"><img src="./samples/logo.png" width="120" alt="logo" /></p>

<p align="center">
<a title="Hexo Version" target="_blank" href="https://hexo.io/zh-cn/"><img alt="Hexo Version" src="https://img.shields.io/badge/Hexo-%3E%3D%206.0-blue?style=flat"></a>
<a title="Node Version" target="_blank" href="https://nodejs.org/zh-cn/"><img alt="Node Version" src="https://img.shields.io/badge/Node-%3E%3D%2014.21.3-green?style=flat"></a>
<a title="License" target="_blank" href="https://github.com/PlayWithAndyJin/hexo-theme-modernduang/LICENSE"><img alt="License" src="https://img.shields.io/github/license/PlayWithAndyJin/hexo-theme-modernduang.svg?style=flat"></a>
<br>
<a title="GitHub Release" target="_blank" href="https://github.com/PlayWithAndyJin/hexo-theme-modernduang"><img alt="GitHub Release" src="https://img.shields.io/github/v/release/PlayWithAndyJin/hexo-theme-modernduang?style=flat"></a>
<a title="Npm Downloads" target="_blank" href="https://www.npmjs.com/package/hexo-theme-modernduang"><img alt="Npm Downloads" src="https://img.shields.io/npm/dt/hexo-theme-modernduang?color=red&label=npm"></a>
<a title="GitHub Commits" target="_blank" href="https://github.com/PlayWithAndyJin/hexo-theme-modernduang"><img alt="GitHub Commits" src="https://img.shields.io/github/commit-activity/m/PlayWithAndyJin/hexo-theme-modernduang.svg?style=flat&color=purple&label=commits"></a>
<a title="Agent Skills" target="_blank" href="https://github.com/PlayWithAndyJin/modernduang-skills"><img alt="Agent Skills" src="https://img.shields.io/badge/skills-2-orange?style=flat"></a>
</p>

<p align="center"><a href="https://themeblog.andyjin.website">主题博客</a> | <a href="https://theme.andyjin.website/zh/index.html">中文指南</a> | <a href="./README_en.md">English README</a> | <a href="https://github.com/PlayWithAndyJin/modernduang-skills">Agent Skills</a></p>

<p align="center">一款简洁优雅的 <a href="https://hexo.io/">Hexo</a> 博客主题，采用柔和的 Claymorphism 设计风格。</p>

![sample](./samples/home-hero.png)

## 特性

- **Claymorphism 设计** — 柔和的 3D 粘土质感，蓬松俏皮的视觉风格
- **暗色模式** — 支持跟随系统自动切换或手动切换
- **响应式布局** — 完美适配手机、平板、桌面端
- **灵活导航** — 支持下拉菜单、自定义 SVG 图标、外链新窗口打开
- **分类 & 标签** — 分类页支持自定义图标、颜色和描述
- **友链页面** — 支持友链分组展示，自定义分组图标
- **年度计划** — 首页进度追踪，支持子任务进度条
- **站点数据** — 展示站点运行时长与十年之约倒计时
- **首页 Hero** — 副标题支持固定模式或随机刷新模式
- **自定义引用块** — 内置提示、警告、声明、危险四种风格，带鼠标追踪光效
- **Mermaid 支持** — 文章页内置 Mermaid 图表渲染
- **ICP 备案** — 支持工信部、萌/茶 ICP 备案号与图标
- **Twikoo 评论** — 内置 Twikoo 评论系统，开箱即用
- **自定义页脚** — 支持自定义 HTML 内容、内置社交图标及自定义社交图标
- **文章可见性** — 支持文章前台隐藏或全局隐藏
- **文章搜索** - 支持通过关键词搜索相关的文章
- **RSS 支持** — 头部内置 RSS 链接，支持 RSS 图标

## 样图

| 首页 Hero | 最新文章 | 年度计划 |
|-----------|---------|----------|
| ![hero](./samples/home-hero.png) | ![latest](./samples/home-latest-article.png) | ![plan](./samples/home-plan.png) |

| 站点数据 | 博客文章 |
|---------|---------|
| ![stats](./samples/home-site-data.png) | ![blog](./samples/blog.png) |

| 归档 | 分类 | 标签 |
|------|------|------|
| ![archive](./samples/archive.png) | ![categories](./samples/categories.png) | ![tags](./samples/tags.png) |

| 分类详情 | 标签详情 |
|---------|---------|
| ![category](./samples/category-detail.png) | ![tag](./samples/tag-detail.png) |

| 友链 | 友链详情 | 关于 |
|------|---------|------|
| ![links](./samples/links.png) | ![friend](./samples/friend.png) | ![about](./samples/about.png) |

## 安装

> 要求：Node.js >= 14.0.0，Hexo >= 6.0.0

```bash
cd your-site
npm install hexo-theme-modernduang --save
```

然后修改 Hexo 站点根目录的 `_config.yml`：

```yaml
theme: modernduang
```

> 如果你的 Hexo 版本低于 6.0，需额外执行：`cp -r node_modules/hexo-theme-modernduang themes/modernduang`

## Claude Code 技能

主题配套了 Claude Code Agent Skills，安装后即可用 AI 配置和自定义主题：

```bash
# 安装全部技能
npx skills add PlayWithAndyJin/modernduang-skills --all

# 或单独安装
npx skills add PlayWithAndyJin/modernduang-skills --skill modernduang-theme-setup
```

- `modernduang-theme-setup` — 帮你安装、配置、排查主题
- `modernduang-theme-custom` — 告诉你每个源文件的作用，按需修改

> 技能仓库：[PlayWithAndyJin/modernduang-skills](https://github.com/PlayWithAndyJin/modernduang-skills)

之后在 Claude Code 中直接说「帮我配置 Modern Duang 主题」即可。

## 配置

将主题的默认配置复制到站点的 `_config.modernduang.yml` 中，按需修改：

```bash
cp themes/modernduang/_config.yml _config.modernduang.yml
```

所有配置项说明见主题目录下的 `_config.yml`。

### 快速上手

```yaml
# 站点信息（自动从 Hexo 主配置的 title 和 description 继承）

# 暗色模式
dark_mode:
  enable: true
  default: light  # 可选 'dark'

# 首页个人信息卡片
profile:
  avatar: https://your-avatar-url.png
  motto: 你的座右铭
  social:
    - name: GitHub
      url: https://github.com/yourname
      icon: github

# 页脚
footer:
  since: 2024
  author: 你的名字
  powered: true
  social:
    travelling: true
    github: true
    email: true
    custom: []
```

## 第三方服务

### 评论系统（Twikoo）

前往 [Twikoo](https://twikoo.js.org/) 部署后端并获取 `envId`，然后填入配置：

```yaml
comments:
  enable: true
  twikoo:
    envId: https://your-twikoo-envid
```

> 自部署（Vercel 等）的 Twikoo 无需填写 `region`。

### 友链配置

在 `_config.modernduang.yml` 中配置友链分组和链接：

```yaml
friendGroups:
  技术: 🌟
  生活: 🎨

friends:
  - name: 示例博客
    url: https://example.com
    desc: 一个很棒的博客
    avatar: https://example.com/avatar.png
    group: 技术
```

### ICP 备案

```yaml
footer:
  beian:
    icp: "京ICP备12345678号"  # 工信部备案，完整格式
    moe: "123456"              # 萌备案，只填数字，显示为"萌ICP备123456号"
    chabei: "123456"           # 茶备案，只填数字，显示为"茶ICP备123456号"
```

## 内置社交图标

`profile.social` 和 `footer.social.custom` 支持以下内置图标名：

`github`、`bilibili`、`email`、`blog`、`tiktok`、`kuaishou`、`xiaohongshu`、`wechat`、`qq`、`gitee`、`rss`

也可以直接传入自定义 SVG 字符串：

```yaml
social:
  - name: 我的站点
    url: https://mysite.com
    icon: '<svg viewBox="0 0 24 24">...</svg>'
```

## 自定义引用块

在 Markdown 文章中使用以下标签：

```markdown
{%note%}
这是一条提示信息。
{%endnote%}

{%warning%}
这是一条警告信息。
{%endwarning%}

{%declare%}
这是一条声明信息。
{%enddeclare%}

{%danger%}
这是一条危险警告。
{%enddanger%}
```

## 自定义页脚

可以在页脚插入自定义 HTML 内容：

```yaml
footer:
  custom: '<p>你的自定义 HTML 内容</p>'
```

## 文章可见性

在文章 Front Matter 中配置 `visibility` 字段：

```yaml
---
title: 某某文章
visibility: local   # 列表隐藏，直接访问可见
---

---
title: 某某文章
visibility: global  # 完全隐藏，直接访问也 404
---
```

不填则正常显示。

## 自定义友链申请内容

编辑 `themes/modernduang/layout/_link-apply.md` 即可自定义友链页面的"交换友链"板块。支持以下语法：

- `{%card%}内容{%card%}` — 带样式的提示卡片
- `<!-- siteinfo -->` — 自动替换为站点信息（名称、简介、网址、头像、Atom 订阅）
- 标准 Markdown（标题、列表、链接、加粗、斜体）
- `---` — 分割线

## 开源协议

MIT

反馈内容错误