mirror of
https://github.com/hugo-fixit/FixIt.git
synced 2026-08-24 15:28:57 +00:00
Cell
14a965f9c1
* refactor: add TypeScript support and refactor utility functions * docs: add CLAUDE.md for Claude Code guidance Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * refactor(assets): replace factory-function pattern with service classes and DI container Introduce typed service container, event bus, and service interfaces to replace the shared FixItContext factory-function pattern. Each module is now a standalone class implementing a typed interface, with explicit constructor-injected dependencies. The window.fixit backward-compatibility facade is built via a publicAPI() helper that extracts class methods. Also removes unnecessary setTimeout/afterPaint deferred execution wrappers from init sequences, and improves module header comments. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * refactor: replace private properties with class fields in modules Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * refactor(assets): rewrite link page script in TypeScript Rename pages/link.js to link.ts with proper type annotations and update the Hugo template reference accordingly. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * docs: rewrite CLAUDE.md and copilot-instructions.md in English Update both files to reflect the new service-class architecture with DI container, typed event bus, and ES6 # private fields. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * fix: update event handling to use CustomEvent for better type safety * refactor: enhance theme switching by adding isChanged flag to event details * refactor(assets): refactor Mermaid module structure and event wiring * refactor(assets): align lib integrations with TypedEventBus and add module overviews * chore(assets): remove vite-specific import ignore comments * refactor(assets): remove deprecated forEach utility and use native forEach Replace custom forEach wrapper with native .forEach() on NodeList, HTMLCollection (via querySelectorAll), and arrays. The utility was already marked @deprecated and all 30+ call sites use synchronous handlers, making the wrapper unnecessary. Also replace getElementsByClassName/getElementsByTagName with querySelectorAll for consistency. - Delete utils/array.ts (no longer needed) - Remove forEach export from utils/index.ts - Refactor 11 module files to use native .forEach() - Switch getElementsByClassName to querySelectorAll in theme.ts and charts.ts * refactor(assets): split ChartsModule into independent lib files Move ECharts, Mapbox GL, and TypeIt integrations from the ServiceContainer-managed ChartsModule into three standalone lib files (echarts.ts, mapbox.ts, typeit.ts). Each lib: - Instantiates its own TypedEventBus - Reads config from window.config.* - Self-initializes on DOMContentLoaded - Handles decrypt/re-init events independently - Uses implicit idempotency via DOM element queries Key improvements: - Reduces ServiceContainer complexity - Makes chart libs independently loadable - Fixes partial decryption handling in echarts (only re-inits decrypted portion) - Maintains consistency with aplayer/file-tree lib pattern * refactor(assets): extract third-party libraries to standalone lib files Extract twemoji, pangu, cookieconsent, watermark, lightgallery, and json-viewer from modules into separate lib files for better separation of concerns. Each lib is loaded conditionally via assets.html and handles its own initialization and event lifecycle independently. Additionally, unify fixit event handling by replacing document.addEventListener calls with TypedEventBus.on() in EncryptionModule and MiscModule for consistent event architecture. Remove unused MiscService dependency from ContentModule. * refactor(assets): unify js.Build pipeline and defaults - extract shared helper partial function/js-build.html for js.Build + minify - make plugin script renderer and Mermaid use the same js.Build logic - default Build.minify to hugo.IsProduction when unset - default Build.sourceMap to cond hugo.IsDevelopment "linked" "none" - remove duplicated sourceMap branching in layout templates - update js targetPath naming to .js (no explicit .min.js suffix) * refactor(assets): extract comment systems to independent lib files Extract comment system initialization logic from CommentModule into 7 independent lib files (artalk, gitalk, valine, waline, utterances, twikoo, giscus). Each lib: - Conditionally loads based on window.config.comment configuration - Handles backend-specific initialization via DOMContentLoaded - Manages its own theme synchronization and event listeners - Is loaded conditionally in assets.html only when enabled Simplify CommentModule to handle only: - Comment section UI display and visibility toggle - Shared lightGallery initialization utility (used by Artalk and Twikoo) - Comment expiration handling This reduces module complexity and enables per-backend lazy loading. * refactor(assets): unify js.Build pipeline and consolidate PWA config Enhance js-build.html to accept Build as bool/dict, auto-derive targetPath from resource name (.ts → .js), and skip js.Build when Build is false/omit. Simplify assets.html by removing explicit targetPath dicts for all .ts lib builds. Consolidate enablePWA and serviceWorkerURL into a PWA config object. * refactor(assets): decouple toc from content module and add JSDoc headers - Remove TocService dependency from ContentModule, toc now self-manages - Rename initContent() → setup(), init() → setup() for toc - Make initFootnotes private (#initFootnotes) - Add multi-line JSDoc headers with Responsibilities to all modules, main.ts, pages/link.ts, and head/color-scheme.ts * refactor(assets): split types.ts into types/ directory module * refactor(assets): simplify JS module architecture and expose typed window.fixit API - Remove DI container (core/container.ts), use direct constructor calls - Export shared eventBus singleton from core/event-bus.ts, remove 16 redundant instances - Merge thin modules: SvgModule/CommentModule/LinkGuardModule into ContentModule/MiscModule - Trim service interfaces to externally-used methods only - Replace publicAPI() reflection with minimal typed window.fixit facade - Expose public APIs: setThemeMode, eventBus, initContent, mask overlay, scroll state - Extract setThemeMode from initSwitchTheme closure as public method - Rename fixit:reset to fixit:re-encrypt, remove dead events - Replace custom.js.example with custom.ts.example - Update CLAUDE.md and copilot-instructions.md * style(i18n): use semantic names for comment dividers instead of file paths Replace file-path-based comment dividers (e.g. partials/base/header.html) with semantic names (e.g. Header) across all 16 i18n files for consistency. * chore(workflow): update cron schedule for library updates --------- Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
FixIt is a clean, elegant but advanced blog theme for Hugo.
Don't forget to leave a ⭐️ if you like this theme, thanks!
FixIt
It is based on the original LoveIt Theme, KeepIt Theme and LeaveIt Theme.
Warning
Version v0.x only accepts bug fixes. For new feature submissions, please develop on the v1 branch.
Version 1.0 is planned for release in the first half of 2027. Welcome to join the development and discussion! See v1 Milestone for details.
Live Preview
💟 Docs | ❇️ Test | 🚼 Demo | 🆕 Starter
More FixIt examples here.
Usage
Documentation
Head to the Quick Start page for a step-by-step guide on how to create a new website with FixIt.
Outline: Installation ➜ Getting Started ➜ Content Management ➜ Advanced Usage
Starter Wizard
We provided a CLI tool to help you create a new project with FixIt by a single command.
pnpx fixit-cli create my-blog
Templates
Click the following links to generate a new repository with template:
| Template | repository | Generate link |
|---|---|---|
| A quick-start template base on Hugo Modules. | hugo-fixit-starter | Click |
| A quick-start template base on Git submodule. | hugo-fixit-starter1 | Click |
| Build multilingual sites using Fixit theme. | docs | Click |
| Customize with FixIt theme. | Lruihao/hugo-blog | Click |
Features
Click to view.
Performance and SEO
- Optimized for performance: 99/100 on mobile and 100/100 on desktop in Google PageSpeed Insights
- Optimized SEO performance with a correct SEO SCHEMA based on JSON-LD
- Google Analytics supported
- Fathom Analytics supported
- Baidu Analytics supported
- Umami Analytics supported
- Plausible Analytics supported
- Cloudflare Web Analytics supported
- Splitbee Analytics supported
- Search engine verification supported (Google, Bing, Yandex, Pinterest, Baidu, 360 and Sogou)
- CDN for third-party libraries supported
Appearance and Layout
- Responsive layout
- Light/Dark mode
- Globally consistent design language
- Pagination supported
- Easy-to-use and self-expanding table of contents
- Multilanguage supported and i18n ready
- Beautiful CSS animation
Social and Comment Systems
- Gravatar supported by Gravatar
- Local Avatar supported
- Up to 87 social links supported
- Up to 28 share sites supported
- Disqus comment system supported by Disqus
- Gitalk comment system supported by Gitalk
- Valine comment system supported by Valine
- Waline comment system supported by Waline
- Facebook comments system supported by Facebook
- Telegram comments system supported by Telegram Comments
- Commento comment system supported by Commento
- Utterances comment system supported by Utterances
- Artalk comment system supported by Artalk
- Twikoo comment system supported by Twikoo
- giscus comment system supported by giscus
Extended Features
- AI Summary, AI Search and AI Chatbot supported by PostChat
- PWA (Progressive Web App) supported
- Sub Menu supported
- Content Encryption supported (Pages, Partial)
- Friends page embedded template
- Search supported by algolia, Fuse.js, Pagefind, CSE or PostChat
- Custom Search Engine (CSE) supported by Google
- Twemoji supported
- Automatically highlighting code
- Copy code to clipboard with one click
- Images gallery supported by lightgallery
- Extended Markdown syntax for Font Awesome icons
- Extended Markdown syntax for ruby annotation
- Extended Markdown syntax for fraction
- Multiple admonitions shortcode or alerts extended Markdown syntax
- Tabs and Tab shortcode with multiple design styles
- Mathematical formula supported by KaTeX or MathJax
- Diagrams code fences extended and shortcode supported by mermaid
- Interactive data visualization shortcode and code fences extended supported by ECharts
- Timeline code fences extended and shortcode supported
- File tree code fences extended and shortcode supported
- Mapbox shortcode supported by Mapbox GL JS
- Music player shortcode supported by APlayer and MetingJS
- Bilibili player and Douyin player shortcode
- Custom style shortcode
- Custom script shortcode
- Open more custom blocks
- Animated typing supported by TypeIt
- Cookie consent banner supported by cookieconsent
- Web Watermark supported by cell-watermark
- Chinese typesetting supported by pangu.js
- Options to cache remote image locally
- ...
Multilingual and i18n
FixIt supports multilingual and i18n. For more information, see the Content Management documentation. You are welcome to contribute with a new language.
FixIt supports the following languages.
- English
- Simplified Chinese
- Traditional Chinese
- French
- Polish
- Brazilian Portuguese
- Italian
- Spanish
- German
- Serbian
- Russian
- Romanian
- Vietnamese
- Hindi
- Japanese
- Korean
Theme Components
The FixIt theme balances simplicity and extensibility with extra Hugo theme components for customization.
Click to view.
- fixit-bundle
🌲 Bundles the FixIt core theme and all hugo-fixit components into a single component. - cmpt-flyfish
🐟 A canvas implemented animation effect of small fish swimming. - cmpt-mdevtools
Mobile devtools component powered by vConsole and eruda. - cmpt-santa-hat
A Christmas Easter Egg by JavaScript. - cmpt-translate
🌐 A component for site automatic translation. - component-projects
🐙 Display your GitHub projects in the FixIt theme and generate blog posts from readme. - hugo-atom-feed
Hugo theme component for ATOM feed custom Output Format. - hugo-json-feed
Hugo theme component for JSON feed custom Output Format. - shortcode-asciinema
A Hugo theme component with asciinema-embed shortcode. - shortcode-caniuse
A Hugo theme component with caniuse shortcode. - shortcode-docs-bookmark
🔖 Embed bookmark of FixIt Docs. - shortcode-missing-translation
A Hugo theme component with missing-translation shortcode. - shortcode-mmt-netease
🎶 A Hugo theme component with a NetEase Cloud random comment shortcode. - shortcode-rewards
A Hugo theme component with reward-log or sponsor-log shortcode.
Community
All feedback is welcome! Head over to the discussions, Pull requests and issues tracker.
| Official Community | Description |
|---|---|
| Discussions | GitHub discussion forum |
| FixIt WeChat group | Follow and reply "FixIt" to get |
| FixIt QQ group | QQ group: 814031017 |
| Hugo FixIt Planet | Paid knowledge Planet |
Contributing
We welcome you to join the development of FixIt. Please see contributing document. 🤗
Also, we welcome Issue or PR to our official-components.
Note
When contributing, please first discuss the change you wish to make via a discussion on this repository before making the actual change.
Acknowledgements
Thanks to the support of all contributors!
Thanks to the Hugo DoIt theme and Hexo NexT theme for inspiration and reference.
Thanks to all the open source projects used in the FixIt theme.
- normalize.css
- Font Awesome
- Simple Icons
- Animate.css
- autocomplete-js
- algoliasearch
- Fuse.js
- object-fit-images
- Twemoji
- emoji-data
- lightgallery
- Sharer.js
- TypeIt
- KaTeX
- MathJax
- mermaid
- ECharts
- Mapbox GL JS
- APlayer
- MetingJS
- Gitalk
- Valine
- cookieconsent
- cell-watermark
- 不蒜子
- Vercount
- pangu.js
- Artalk
- Waline
- Twikoo
- github-corners
- giscus
- crypto-js
- pace
- xxhash-wasm
<tab-container>element<json-viewer>element
License
FixIt is licensed under the MIT license. Check the LICENSE file for details.
Sponsor Support
If you enjoy the theme, please consider buying me a cup of coffee ☕️. Thanks!
Thanks to the following sponsors for their great support:
- translate.js sponsored Enterprise Translation Channel.