# hexo-theme-fomalhaut splits site configuration away from theme code, and that is its main idea > A Hexo blog theme built on a deep second-pass modification of Butterfly 4.3.1, aimed at cloning a card style site and then editing configuration rather than theme source. The changelog reads like a design diary, with regression scripts, accessibility contrast numbers and effect timing budgets documented release by release. **fomalhaut1998/hexo-theme-fomalhaut** — 基于 Butterfly 二次开发的 Hexo 博客主题 / 站点模板，具备丰富的视觉设计元素、交互式组件、以及充足的自定义样式控件 - Repository: https://github.com/fomalhaut1998/hexo-theme-fomalhaut - Website: https://www.fomal.cc - Stars: 1,015 · Forks: 153 - Language: JavaScript - License: Apache-2.0 - Published: 2026-10-19 · Updated: 2026-10-19 · Language: en - Canonical page: https://hysenlabs.com/projects/fomalhaut1998-hexo-theme-fomalhaut ## Configuration lives apart from theme code, on purpose The theme describes itself as a clone and use Hexo card style blog source, and the architectural decision it leads with is the separation of site configuration from theme code. Changing configuration builds your site, and upgrading the theme does not wipe your own changes. That separation is visible in the repository root. There is a `_config.yml` and a separate `_config.fomalhaut.yml`, alongside the `themes/` directory that holds the theme itself. The README describes the arrangement as thorough separation between site configuration and theme code, so that editing configuration is enough to set up a site and a theme upgrade does not overwrite personal modifications. The upgrade mechanism is documented too. The archive feature in the 1.0.3 release added two lines to the `inject.head` section of `_config.fomalhaut.yml`, and the rollback is to delete those two lines. That is a very small and very concrete rollback, which is what you want from a design where the theme injects into a site it does not own. The version scheme is deliberately split in two. The theme's own version lives in `package.json` and is mirrored in the startup banner at `themes/fomalhaut/scripts/events/welcome.js` and in the footer badge title, all moved to 1.0.4 in the latest release. The upstream Butterfly version is tracked separately by `scripts/butterfly-version.js` at 4.3.1, and the two are kept apart on purpose. A reader who wants to know which Butterfly changes are underneath has to look in a second place, which is a small cost for keeping a fork and its upstream distinguishable. ## The effects panel is a settings module with real resource teardown The most distinctive feature is the appearance or effects panel, and the 1.0.4 release rebuilt it from a long slider strip into a previewable set of sections, adding five front end modules and eight regression scripts. The panel is split into three blocks, for atmosphere effects, interactive widgets and layout, arranged as a two column grid that collapses to one column when the panel narrows. Opacity and background filter controls stay at the top. The cat widget and the obedient mouse each have their own switch, both on by default, while the click ripple only counts as enabled if it was explicitly turned on. The detail that matters is the teardown. The changelog states that turning something off really stops it. Disabling the cat clears the clock timers and the animation frame loop and removes the pointer and rectangle calculations, and disabling the mouse runs a pause and disconnects the observer, with a refresh and observe when it is switched back on. A boot script restores the hidden state on the first frame so nothing flashes during load. That level of care is unusual in a blog theme, and it is the difference between a settings switch and a switch that leaves a timer running. The regression scripts cover exactly this, checking whether the switch really stops the clock, along with colour validation and old key migration, preload token cancellation, effect tiers and pause conditions, navigation touch targets and the degradation conditions for the blur effect. The scripts live in `tools/tests/`, and the number of them grew from five to thirteen. The design records for the round are under `docs/plans/`, nine of them added alongside. ## Accessibility and colour are handled with measured numbers Two details in the changelog show the author measuring rather than eyeballing. The first is the custom theme colour. The panel adds a native colour picker, and the value is stored as a strictly validated six digit hex in `themeCustomColor`, with an invalid value falling back to the default teal on the first frame. A new helper computes the on-theme ink colour from WCAG relative luminance, and buttons, selected items, the current table of contents entry, the selection highlight and the AI assistant panel all read it, so light theme colours no longer produce washed out white text. The second is the frame rate status bar. The small text contrast was measured at 3.21 and raised to 4.91, and after that the palette was adjusted again by eye, with the amber and red colours pulled apart in Lab delta E from 43.2 to 63.5 so they are distinguishable rather than merely different. The preset palette was also reorganised. Three old options were removed, matcha green was added, and the result is eleven colours. The old keys are migrated automatically, with purple moving to purepurple and gray and black both moving to darkblue, and the swatches wrap into a six plus five layout at 375 pixels wide. None of this is required for a blog to work, and all of it is the kind of detail that a theme maintained by one person over many small releases accumulates. The measured contrast ratios are the more useful signal, because they tell you the author checks rather than guesses. ## Search indexing and the archive page are site level, not theme level The 1.0.3 release rebuilt the archive page from a date and title list into a card wall, and the way it does that is instructive. The implementation adds three files, `scripts/archive-index.js`, `source/css/archive-page.css` and `source/js/inject/archive-page.js`, and the changelog insists the implementation is site level and does not touch theme source. The layout runs from a yearly distribution bar chart at the top, with each bar labelled with the year and the article count, drawn fully when the year span is seven or fewer and otherwise only for years that have articles, through a summary line, a sticky year jump control that highlights the current year while scrolling, into year sections with a large year number, a count, a collapse and expand button whose state is stored in `localStorage` under `ar-collapsed-years`, and finally the card grid. The cards carry a cover image, a category pill, the title, the date and an approximate reading time, and the whole card is clickable while the title and cover remain independent links that can be opened in a new window and crawled. A missing or failed cover falls back to the first character of the title with a theme coloured glow, and the lazy loading placeholder reads `data-lazy-src` directly rather than waiting for the scan timing of the lazy load library. The zero extra request claim is the part worth checking. A build time filter registered as `after_render:html` inserts a single `