hexo-theme-modernduang

v1.2.0

Published

2 days ago

A clean and elegant Hexo blog theme with claymorphism design

0High
0Medium
0Low

andyjinxi

hexo theme modernduang claymorphism blog elegant clean

sample

特性

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

样图

| 首页 Hero | 最新文章 | 年度计划 | |-----------|---------|----------| | hero | latest | plan |

| 站点数据 | 博客文章 | |---------|---------| | stats | blog |

| 归档 | 分类 | 标签 | |------|------|------| | archive | categories | tags |

| 分类详情 | 标签详情 | |---------|---------| | category | tag |

| 友链 | 友链详情 | 关于 | |------|---------|------| | links | friend | about |

安装

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

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

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

theme: modernduang

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

Claude Code 技能

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

# 安装全部技能
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

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

配置

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

cp themes/modernduang/_config.yml _config.modernduang.yml

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

快速上手

# 站点信息（自动从 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 部署后端并获取 envId，然后填入配置：

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

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

友链配置

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

friendGroups:
  技术: 🌟
  生活: 🎨

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

ICP 备案

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 字符串：

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

自定义引用块

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

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

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

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

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

自定义页脚

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

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

文章可见性

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

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

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

不填则正常显示。

自定义友链申请内容

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

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

开源协议

MIT