Modernduang theme custom

Skill PlayWithAndyJin/modernduang-skills/skills/modernduang-theme-custom

帮助用户快速配置Hexo的一个主题Modern Duang，同时帮助用户排查部署可能遇到问题。也可以帮助用户自定义主题。| Help users quickly configure Modern Duang, a topic of Hexo, and help users troubleshoot possible deployment problems. It can also help users customize themes.

Install

npx -y skills add PlayWithAndyJin/modernduang-skills --skill modernduang-theme-custom

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Help users modify Modern Duang theme source files. Use this skill whenever the user wants to customize source code, edit templates, change styles, modify scripts, or understand the purpose of specific theme files. Also trigger when the user asks "which file controls X" or wants to add/change theme behavior beyond config.

SKILL.md

5.9 KB, as published. Nobody here has run it

Modern Duang Theme — Source File Reference

This skill maps every source file in the theme to its purpose, so you know exactly which file to edit for any customization.

Directory Structure

modernduang/
├── _config.yml              # Theme default config
├── layout/                  # EJS templates (HTML structure)
│   ├── layout.ejs           # Base layout: <head>, fonts, meta, global scripts
│   ├── index.ejs            # Homepage: hero, latest posts, plans, site stats
│   ├── post.ejs             # Article page: content, copyright, prev/next, TOC
│   ├── archive.ejs          # Archive page: posts grouped by year
│   ├── tags.ejs             # Tags cloud page
│   ├── tag.ejs              # Single tag listing page
│   ├── categories.ejs       # Categories overview page
│   ├── category.ejs         # Single category listing page
│   ├── links.ejs            # Friend links page + Twikoo comments
│   ├── friend.ejs           # Individual friend detail page (RSS posts)
│   ├── search.ejs           # Article search page (full-text by keyword)
│   ├── about.ejs            # About page
│   ├── 404.ejs              # 404 error page
│   ├── _link-apply.md       # Friend-link exchange guide (editable Markdown)
│   └── partials/
│       ├── header.ejs       # Navigation bar, desktop/mobile menu, theme toggle, search button
│       ├── footer.ejs       # Footer: copyright, beian, social icons, custom HTML, busuanzi stats
│       └── comments/
│           └── twikoo.ejs   # Twikoo comment widget (post pages)
├── scripts/                 # Hexo scripts (server-side)
│   ├── icons.js             # SVG icon helper (get_icon)
│   ├── link-apply.js        # Renders _link-apply.md into links page
│   ├── friend-pages.js      # Generates individual friend detail pages
│   ├── mermaid.js           # Mermaid diagram tag + after_post_render filter
│   ├── note-tags.js         # Custom blockquote tags: note, warning, declare, danger
│   └── visibility.js        # Post visibility: local/global filter + helper
├── source/
│   ├── css/
│   │   └── main.css         # ALL theme styles — single CSS file
│   ├── js/
│   │   └── main.js          # ALL theme JavaScript — copy, dark mode, menu, TOC, back-to-top
│   └── img/
│       ├── logo.png         # Default favicon/logo
│       └── icp/             # ICP beian icons (miit, moe, chabei)
├── samples/                 # Theme screenshots (README showcase)
├── package.json             # npm package metadata
├── LICENSE                  # MIT license
├── README.md                # Chinese documentation
└── README_en.md             # English documentation

Common Customization Scenarios

Change navigation menu items

→ Edit _config.yml → menu section

Add a new page type to navigation

→ Edit layout/partials/header.ejs — add icon to defaultIcons map

Change homepage layout

→ Edit layout/index.ejs

Change footer copyright or beian

→ Edit _config.yml → footer section

Modify comment system behavior

→ Edit layout/partials/comments/twikoo.ejs

Add custom CSS styles for theme and twikoo

→ Edit source/css/main.css — append to the end

Add custom JavaScript

→ Edit source/js/main.js — add inside DOMContentLoaded callback

Change font defaults

→ Edit both _config.yml → font section AND source/css/main.css → --font-display / --font-body

Modify blockquote colors

→ Edit source/css/main.css — CSS variables --success/--warning/--declare/--danger AND scripts/note-tags.js line 3-6 (matching colors)

Change Twikoo CDN version

→ Edit layout/partials/comments/twikoo.ejs — update version number in CDN URL AND integrity hash. Use SRI Hash Generator to get the new integrity value for the updated CDN URL.

Add new custom blockquote type

→ Edit scripts/note-tags.js — add entry to blockTypes object, AND source/css/main.css — add corresponding .blockquote-xxx styles

Customize link-apply page content

→ Edit layout/_link-apply.md

Change theme logo (README)

→ Replace samples/logo.png

Modify search page behavior or style

→ Edit layout/search.ejs (template + JavaScript) and source/css/main.css → search section

Customize friend detail page

→ Edit layout/friend.ejs — RSS fetching and display logic

Add/remove statistics (busuanzi)

→ Edit _config.yml → busuanzi section; labels in layout/partials/footer.ejs

Key Architecture Notes

Single CSS file: All ~4000 lines of styles are in source/css/main.css. No CSS modules or imports — just scroll to the relevant section (sections are marked with /* ====== */ headers).
Single JS file: All client-side logic is in source/js/main.js. Functions are scoped within DOMContentLoaded.
EJS partials: header.ejs and footer.ejs are included in layout.ejs via <%- partial('partials/header') %>. Post comments use <%- partial('partials/comments/twikoo') %>.
Hexo scripts: Files in scripts/ run server-side. They register helpers, filters, and tags via the hexo global.
Font sync: Changing fonts requires updating BOTH _config.yml (Google Fonts URL) AND main.css (CSS font-family variables). They must match.