feat(client): add Mirages-inspired blog theme - #555
Closed
Liner03 wants to merge 1 commit into
Closed
Conversation
- Add mirages header layout (top navbar with brand text, centered nav, gray circular search button) registered in layout registry - Add Mirages-style hero section showing site name on home and article title + meta on article pages - Add Mirages feed card variant with gradient/cover backgrounds, dark mask, and centered title - Add scroll progress bar and back-to-top button - Style article page: centered 642px reading column, Mirages-aligned typography (headings, blockquote, inline code, dark code blocks, tables), AI summary card, copyright notice - Redesign TOC as traditional text list with sticky positioning, active-item highlight, and fix empty-TOC bug (cleanup ref race) - Align page containers (952px list / 864px article), pagination, footer, and dark mode colors with Mirages palette (#1abc9c theme)
Author
|
关闭此 PR：实际目标为在 fork 仓库 (Liner03/Rin) 内部合并 PR #1，此跨仓库 PR 为误建。 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Adds a new blog theme layout inspired by the Typecho Mirages theme, selectable from Settings → Header 布局样式 as "Mirages 侧栏" (and Settings → 文章卡片样式 as "Mirages 卡片").
Changes
New files
client/src/components/site-header/layouts/mirages-layout.tsx— Mirages-style layout: fixed 64px top navbar (plain-text brand, centered nav, gray circular search button), hero section, left drawer for mobileclient/src/components/site-header/layouts/mirages-hero.tsx— route-aware hero: site name on home, article title + meta (author • date • views • category) on article pages, page title elsewhereclient/src/components/mirages-chrome.tsx— scroll progress bar + back-to-top buttonclient/src/mirages.css— theme overrides (fonts, colors#1abc9c, containers, typography)Modified
layout-registry.tsx/layout-options.ts— registermiragesheader layoutfeed-card-options.ts/feed_card.tsx— newmiragescard variant (gradient/cover background, dark mask, centered title)feed.tsx— copyright notice, AI summary card styling, TOC restylefeeds.tsx— pagination button class for themed outline styleheader.tsx— mirages-specific padding/spacer (64px navbar)useTableOfContents.tsx— fix TOC always-empty bug (cleanup ref race under StrictMode) + traditional text-list design with sticky positioning and active highlightindex.css/base.css/tailwind.config.ts— theme color, background#fafafa, Mirages font stackDesign details
#343232, dashed link underlines)#2c2a2anavbar,#343232panels)Screenshots
(work in progress)