@xingwangzhe/stalux 1.29.7 → 1.30.0

package/README.md

@@ -119,7 +119,7 @@ TypeScript uses ESNext. The theme defaults `vite.build.target` to `"esnext"` to
 
 ### Initial CSS and search styles
 
-The theme defaults to Astro's `build.inlineStylesheets: "always"`, placing route styles in the HTML to reduce stylesheet requests before the first paint. An explicit consumer setting of `build.inlineStylesheets: "never"` keeps external stylesheets. Inlining increases each HTML response in exchange for a shorter stylesheet request chain on a first visit.
+The theme defaults to Astro's `build.inlineStylesheets: "never"`: hashed shared CSS can be cached across routes, while component styles load on the pages that use them. Normal blocking stylesheets prevent an unstyled first paint. An explicit consumer setting of `build.inlineStylesheets: "always"` restores inline styles at the cost of larger HTML responses.
 
 Pagefind dialog CSS is emitted as a separate hashed static file with a `prefetch` hint. Opening search activates the stylesheet and waits for it before displaying the dialog. It does not block the initial content or depend on JavaScript generating a CSS asset. A `<noscript>` stylesheet fallback is included.
 
@@ -172,7 +172,7 @@ bingClarityId: "YOUR_CLARITY_PROJECT_ID"
 
 > The Partytown migration in this branch is an unpublished candidate. Representative route measurements show lower TBT, but LCP regresses on the homepage and category page, so performance validation is incomplete. The following describes the candidate implementation.
 
-`stalux()` includes Partytown. The Google Analytics, Clarity, Umami, and Vercount scripts run in a Web Worker without an additional consumer integration. Page tracking follows `astro:page-load`; browsers with `Element.moveBefore()` preserve the worker during navigation. Vercount binds its counters again after the incoming page DOM is ready.
+`stalux()` includes Partytown. The Google Analytics, Clarity, and Umami scripts run in a Web Worker without an additional consumer integration. Page tracking follows `astro:page-load`; browsers with `Element.moveBefore()` preserve the worker during navigation. Vercount loads asynchronously in the main window, avoiding worker startup and DOM bridge delays for visible counters. It runs once after each `astro:page-load` to bind incoming page counters and use the current URL and first-party visitor cookie.
 
 For Google Analytics, turn off **Page changes based on browser history events** under **Admin → Data streams → Enhanced measurement → Page views → Advanced settings**. Stalux sets `send_page_view: false` and sends the URL and title for each navigation explicitly. GA's history tracking must also be disabled in the property to prevent duplicate soft-navigation pageviews. Other enhanced measurement options can remain enabled. See [Google's pageview documentation](https://developers.google.com/analytics/devguides/collection/ga4/views).
 
@@ -281,3 +281,7 @@ In Astro 7.3, integration `logger.debug()` uses the official `DEBUG/--verbose` c
 Timing is emitted only as logs, never included in generated pages or cache keys. Switching between normal and verbose builds may require one rebuild; repeated builds in the same mode remain deterministic. Consumers running `astro dev --background` can read terminal output with `astro dev logs`.
 
 Keep the TypeScript 6 alias for `astro check`, upgrade Vitest and its coverage provider together, and run `bun run validate` before releasing.
+
+## Style development and output
+
+Stalux precompiles its UnoCSS styles; consuming projects need no UnoCSS dependency or configuration. Shared CSS is a cacheable external stylesheet by default. Article/math, archive, category, tag and quote styles load with their components. Explicit Astro `build.inlineStylesheets: "always"` restores inline output. New utilities in consumer override components require the consumer’s own compiler. See [STYLING.md](./docs/STYLING.md) for maintenance and watch mode.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@xingwangzhe/stalux",
-    "version": "1.29.7",
+    "version": "1.30.0",
     "description": "A powerful, modern Astro blog theme — use as template or install as plugin",
     "keywords": [
         "astro",
@@ -67,14 +67,14 @@
         "./package.json": "./package.json"
     },
     "scripts": {
-        "dev": "astro dev",
-        "build": "astro build && node scripts/verify-build.ts",
+        "dev": "bun run styles:build && node scripts/dev.ts",
+        "build": "bun run styles:build && astro build && node scripts/verify-build.ts",
         "preview": "astro preview",
         "astro": "astro",
         "init": "node scripts/cli.ts init",
         "node:check": "tsc6 --project tsconfig.node.json",
         "build:cli": "bun build scripts/cli.ts --target=node --outfile .release/cli.mjs",
-        "prepack": "bun run build:cli",
+        "prepack": "bun run styles:build && bun run build:cli",
         "check": "biome check .",
         "check:fix": "biome check --write .",
         "format": "biome format --write .",
@@ -87,10 +87,12 @@
         "test:coverage": "vitest run --coverage",
         "knip": "knip",
         "verify:build": "node scripts/verify-build.ts",
-        "validate": "bun run check && bun run node:check && bun run astro:check && bun run knip && bun run test:coverage && bun run build && bun run build:cli",
+        "validate": "bun run styles:build && bun run check && bun run node:check && bun run astro:check && bun run knip && bun run test:coverage && bun run build && bun run build:cli",
         "prepare": "git config core.hooksPath scripts/git-hooks",
         "dev:debug": "STALUX_DEBUG=1 astro dev --verbose",
-        "build:debug": "STALUX_DEBUG=1 astro build --verbose && node scripts/verify-build.ts"
+        "build:debug": "STALUX_DEBUG=1 astro build --verbose && node scripts/verify-build.ts",
+        "styles:build": "node scripts/build-styles.ts",
+        "styles:watch": "node scripts/build-styles.ts --watch"
     },
     "dependencies": {
         "@astrojs/markdown-satteri": "0.4.2",
@@ -122,10 +124,12 @@
         "@astrojs/check": "0.9.10",
         "@biomejs/biome": "2.5.14",
         "@types/node": "^26.6.2",
+        "@unocss/astro": "^66.10.5",
         "@vitest/coverage-v8": "5.0.1",
         "astro": "^7.3.5",
         "knip": "^6.37.0",
         "typescript": "npm:@typescript/typescript6@6.0.2",
+        "unocss": "^66.10.5",
         "vite": "8.3.0",
         "vitest": "5.0.1"
     },

package/src/components/stalux/archives/archivesList.astro

@@ -1,6 +1,7 @@
 ---
+import "../../../styles/generated-archives.css";
 import { type CollectionEntry, getCollection } from "astro:content";
-import styles from "@styles/components/archives/archivesList.module.css";
+
 import { getSiteData } from "@utils/config-utils";
 import { format, parseDate, toTimestamp } from "@utils/dayjs";
 import { createTranslator } from "@utils/i18n";
@@ -52,39 +53,44 @@ const archiveYears = [...archivesByYearMonth.entries()]
     }));
 ---
 
-<section class={styles.archivesContainer}>
-    <div class={styles.pageHeader}>
-        <div class={styles.timelineContainer}>
+<section class="stalux-archive-container">
+    <div class="stalux-archive-page-header">
+        <div class="stalux-archive-timeline-container">
             {archiveYears.length > 0 ? (
     archiveYears.map((archiveYear) => (
-        <div class={styles.yearSection} data-year={String(archiveYear.year)}>
-            <div class={styles.yearHeader}>
-                <h2 class={styles.yearTitle}>{archiveYear.year}</h2>
-                <div class={styles.yearCount}>
+        <div class="stalux-archive-year-section" data-year={String(archiveYear.year)}>
+            <div class="stalux-archive-year-header">
+                <h2 class="stalux-archive-year-title">{archiveYear.year}</h2>
+                <div class="stalux-archive-year-count">
                     {t("archives.postCount", { n: archiveYear.count })}
                 </div>
             </div>
             {archiveYear.months.map(({ month, posts: monthPosts }) => (
                 <div
-                    class={styles.monthSection}
-                    style={{ "--archive-estimate": `${Math.ceil(monthPosts.length / 12) * 12 * 48 + 40}px` }}
+                    class="stalux-archive-month-section"
+                    style={{
+                        "--archive-estimate": `${Math.ceil(monthPosts.length / 12) * 12 * 48 + 40}px`,
+                    }}
                 >
-                    <h3 class={styles.monthTitle}>{t("archives.month", { n: month })}</h3>
+                    <h3 class="stalux-archive-month-title">{t("archives.month", { n: month })}</h3>
                     {Array.from({ length: Math.ceil(monthPosts.length / 12) }, (_, index) =>
                         monthPosts.slice(index * 12, (index + 1) * 12),
                     ).map((group) => (
                         <ul
-                            class={styles.postList}
+                            class="stalux-archive-post-list"
                             style={{ "--archive-group-estimate": `${group.length * 48}px` }}
                         >
                             {group.map((post) => (
-                                <li class={styles.postItem}>
-                                    <time class={styles.postDate} datetime={post.data.date}>
+                                <li class="stalux-archive-post-item">
+                                    <time
+                                        class="stalux-archive-post-date"
+                                        datetime={post.data.date}
+                                    >
                                         {format(parseDate(post.data.date), "yyyy-MM-dd")}
                                     </time>
                                     <a
                                         href={`/posts/${post.data.abbrlink}/`}
-                                        class={styles.postLink}
+                                        class="stalux-archive-post-link"
                                         data-astro-prefetch="viewport"
                                     >
                                         {post.data.title}
@@ -98,7 +104,7 @@ const archiveYears = [...archivesByYearMonth.entries()]
         </div>
     ))
 ) : (
-    <div class={styles.noPosts}>{t("archives.noPosts")}</div>
+    <div class="stalux-archive-no-posts">{t("archives.noPosts")}</div>
 )}
         </div>
 

package/src/components/stalux/archives/toArchive.astro

@@ -1,6 +1,6 @@
 ---
 import { getCollection } from "astro:content";
-import styles from "@styles/components/archives/toArchive.module.css";
+
 import { getSiteData } from "@utils/config-utils";
 import { createTranslator } from "@utils/i18n";
 
@@ -9,6 +9,6 @@ const siteConfig = getSiteData(configEntries);
 const { t } = createTranslator(siteConfig.lang || "zh-CN");
 ---
 
-<div id={styles.archs}>
+<div id={"stalux-to-archive-archs"}>
     <a href="/archives" data-astro-prefetch>{t("archives.viewAll")}</a>
 </div>

package/src/components/stalux/categories/categoriesCard.astro

@@ -1,6 +1,7 @@
 ---
+import "../../../styles/generated-categories.css";
 import { getCollection } from "astro:content";
-import styles from "@styles/components/categories/categoriesCard.module.css";
+
 import { createTranslator } from "@utils/i18n";
 
 interface Props {
@@ -19,13 +20,13 @@ const siteConfig = (configEntries.find((e) => e.id === "site")?.data ?? {}) as R
 const { t } = createTranslator((siteConfig.lang as string) || "zh-CN");
 ---
 
-<article class={styles.categoryCard}>
+<article class="stalux-category-card">
     <a
         href={`/categories/${props.category.name}/`}
-        class={`${styles.categoryheader} a-none`}
+        class="stalux-categoryheader a-none"
         data-astro-prefetch
     >
-        <div class={styles.categoryIcon}>
+        <div class="stalux-category-icon">
             <svg
                 aria-hidden="true"
                 xmlns="http://www.w3.org/2000/svg"
@@ -43,9 +44,9 @@ const { t } = createTranslator((siteConfig.lang as string) || "zh-CN");
                 ></path>
             </svg>
         </div>
-        <div class={styles.categoryContent}>
-            <h2 class={styles.categoryName}>{props.category.name}</h2>
-            <div class={styles.categoryCount}>
+        <div class="stalux-category-content">
+            <h2 class="categoryName">{props.category.name}</h2>
+            <div class="categoryCount">
                 {t("categories.postCount", { n: props.category.count })}
             </div>
         </div>

package/src/components/stalux/categories/categoriesList.astro

@@ -1,12 +1,13 @@
 ---
+import "../../../styles/generated-categories.css";
 import CategoriesCard from "@components/stalux/categories/categoriesCard.astro";
-import styles from "@styles/components/categories/categoriesList.module.css";
+
 import { getCategoryCountList } from "@utils/collections-stats";
 
 const categoryList = await getCategoryCountList(Astro.logger);
 ---
 
-<ul class={styles.categoriesList}>
+<ul class="stalux-categories">
     {categoryList.map((category) => (
     <li>
         <CategoriesCard category={category} />

package/src/components/stalux/common/author.astro

@@ -1,7 +1,7 @@
 ---
 import { Image } from "astro:assets";
 import { getCollection } from "astro:content";
-import styles from "@styles/components/common/author.module.css";
+
 import { getAuthorData } from "@utils/config-utils";
 
 const configEntries = await getCollection("config");
@@ -17,8 +17,8 @@ const isHomePage = Astro.url.pathname === "/";
 const navigationHref = isHomePage ? "/about" : "/";
 ---
 
-<article class={styles.author} transition:persist-props>
-    <figure class={`${styles.authorFigure} ${props.iscolum ? styles.figureColumn : ""}`}>
+<article class="stalux-author" transition:persist-props>
+    <figure class={`stalux-author-figure ${props.iscolum ? "stalux-author-figure-column" : ""}`}>
         <a href={navigationHref} class="a-none" data-astro-prefetch>
             <Image src={authorConfig.avatar} alt={authorConfig.name} width={100} height={100} />
         </a>

package/src/components/stalux/common/date.astro

@@ -1,10 +1,9 @@
 ---
-import styles from "@styles/components/common/date.module.css";
 ---
 
-<div id={styles["date-time"]} class="date-time" transition:persist-props>
-    <time id={styles.date} data-ref="date" datetime=""></time>
-    <time id={styles.time} data-ref="time" datetime=""></time>
+<div id={"stalux-date-date-time"} class="date-time" transition:persist-props>
+    <time id={"stalux-date-date"} data-ref="date" datetime=""></time>
+    <time id={"stalux-date-time"} data-ref="time" datetime=""></time>
 </div>
 
 <script is:inline>

package/src/components/stalux/common/textType.astro

@@ -1,6 +1,6 @@
 ---
 import { getCollection } from "astro:content";
-import styles from "@styles/components/common/textType.module.css";
+
 import { getTypetextsData } from "@utils/config-utils";
 import Typewriter from "astro-typewriter";
 
@@ -8,4 +8,4 @@ const configEntries = await getCollection("config");
 const typetextsConfig = getTypetextsData(configEntries);
 ---
 
-{typetextsConfig?.items && <Typewriter class={styles.typeWriter} messages={typetextsConfig?.items} />}
+{typetextsConfig?.items && <Typewriter class="stalux-typewriter" messages={typetextsConfig?.items} />}

package/src/components/stalux/footer/FooterBadges.astro

@@ -22,7 +22,7 @@ function badgeImg(opts: BadgeOptions) {
     const height = svg.match(/<svg\b[^>]*\bheight="(\d+)"/)?.[1];
     const dimensions = width && height ? ` width="${width}" height="${height}"` : "";
     // Closed badge groups should not initialize every SVG document during first paint.
-    const img = `<img src="${src}" alt="${alt}" class="badge" loading="lazy" decoding="async"${dimensions} />`;
+    const img = `<img src="${src}" alt="${alt}" class="stalux-badge" loading="lazy" decoding="async"${dimensions} />`;
     if (opts.href) {
         return `<a href="${opts.href}" target="_blank" rel="${opts.rel ?? "noopener"}">${img}</a>`;
     }
@@ -31,23 +31,23 @@ function badgeImg(opts: BadgeOptions) {
 ---
 
 {badges && badges.length > 0 && (
-    <div class="badges-wrapper">
+    <div class="stalux-badges-wrapper">
         {badges.map((item: BadgeItem, idx: number) => {
             if (isBadgeGroup(item)) {
                 const groupId = `badge-group-${idx}`;
                 return (
-                    <details class="badge-group" id={groupId}>
-                        <summary class="badge-group-summary">
-                            <span class="badge-group-arrow">&#9654;</span>
-                            <span class="badge-group-title">{item.title}</span>
-                            <span class="badge-group-hint" data-hint="expanded">
+                    <details class="stalux-badge-group badge-group" id={groupId}>
+                        <summary class="stalux-badge-group-summary">
+                            <span class="stalux-badge-group-arrow">&#9654;</span>
+                            <span class="stalux-badge-group-title">{item.title}</span>
+                            <span class="stalux-badge-group-hint" data-hint="expanded">
                                 {t("footer.collapse")}
                             </span>
-                            <span class="badge-group-hint" data-hint="collapsed">
+                            <span class="stalux-badge-group-hint" data-hint="collapsed">
                                 {t("footer.expand")}
                             </span>
                         </summary>
-                        <div class="badge-group-items badges">
+                        <div class="stalux-badge-group-items stalux-badges">
                             {item.items.map((b) => (
                                 <Fragment set:html={badgeImg(b)} />
                             ))}
@@ -59,91 +59,3 @@ function badgeImg(opts: BadgeOptions) {
         })}
     </div>
 )}
-
-<style>
-.badges-wrapper {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-}
-
-/* Badge HTML is emitted by set:html, so target it through the scoped wrapper. */
-.badges-wrapper :global(.badge) {
-    width: auto;
-}
-
-.badge-group {
-    width: 100%;
-    border: none;
-}
-
-.badge-group-summary {
-    cursor: pointer;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 0.4rem;
-    padding: 0.2rem 0;
-    color: var(--white-70p);
-    font-size: 0.85rem;
-    user-select: none;
-    list-style: none;
-    transition: color 0.2s;
-}
-.badge-group-summary:hover {
-    color: var(--white-70p);
-}
-.badge-group-summary::-webkit-details-marker {
-    display: none;
-}
-
-.badge-group-arrow {
-    font-size: 0.65rem;
-    transition: transform 0.2s;
-    display: inline-block;
-}
-.badge-group[open] .badge-group-arrow {
-    transform: rotate(90deg);
-}
-
-.badge-group-title {
-    color: var(--white-80p);
-}
-
-.badge-group-hint {
-    font-size: 0.7rem;
-    color: var(--white-70p);
-}
-.badge-group[open] .badge-group-hint[data-hint="collapsed"],
-.badge-group:not([open]) .badge-group-hint[data-hint="expanded"] {
-    display: none;
-}
-
-.badge-group-items {
-    padding-top: 0.35rem;
-}
-
-.badges {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-}
-
-.badge {
-    height: 20px;
-    vertical-align: middle;
-}
-
-@media (max-width: 768px) {
-    .badges {
-        gap: 0.3rem;
-    }
-    .badge {
-        height: 18px;
-    }
-}
-</style>

package/src/components/stalux/footer/FooterBeian.astro

@@ -19,7 +19,7 @@ const showBeian = !!(icp || pubsec);
 ---
 
 {showBeian && (
-    <div class="beian-info">
+    <div class="stalux-beian-beian-info">
         {icp && (
             <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">
                 {icp}
@@ -30,7 +30,7 @@ const showBeian = !!(icp || pubsec);
                 href={`http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=${pubsecNumber}`}
                 target="_blank"
                 rel="noopener noreferrer"
-                class="public-security-beian"
+                class="stalux-beian-public-security-beian"
             >
                 <img
                     src="https://beian.mps.gov.cn/img/logo01.dd7ff50e.png"
@@ -41,45 +41,3 @@ const showBeian = !!(icp || pubsec);
         )}
     </div>
 )}
-
-<style>
-.beian-info {
-    display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
-    gap: 1rem;
-}
-
-.beian-info a {
-    color: rgba(255, 255, 255, 0.7);
-    text-decoration: none;
-    transition: color 0.3s ease;
-    font-size: 0.9rem;
-}
-
-.beian-info a:hover {
-    color: rgba(255, 255, 255, 0.9);
-    text-decoration: none;
-}
-
-.public-security-beian {
-    display: inline-flex;
-    align-items: center;
-    gap: 5px;
-    color: rgba(255, 255, 255, 0.7);
-    text-decoration: none;
-    transition: color 0.3s ease;
-    font-size: 0.9rem;
-}
-
-.public-security-beian:hover {
-    color: rgba(255, 255, 255, 0.9);
-    text-decoration: none;
-}
-
-.public-security-beian img {
-    width: 15px;
-    height: 15px;
-    display: inline-block;
-}
-</style>

package/src/components/stalux/footer/FooterCopyright.astro

@@ -21,21 +21,6 @@ const copyrightYear =
         : currentYear;
 ---
 
-<small class="copyright">
+<small class="stalux-copyright">
     <span>&copy; {copyrightYear} {props.author || ""}. {t("footer.rightsReserved")}</span>
 </small>
-
-<style>
-.copyright {
-    color: var(--white-70p);
-    font-weight: 500;
-    display: flex;
-    gap: 0.3em;
-    justify-content: center;
-    flex-wrap: wrap;
-}
-
-.copyright span {
-    margin: 0;
-}
-</style>

package/src/components/stalux/footer/FooterStats.astro

@@ -16,17 +16,17 @@ const { showStats = true, wordCount, buildtime } = Astro.props;
 ---
 
 {showStats && (
-    <p class="site-stats">
+    <p class="stalux-stats-site-stats">
         <span id="vercount_container_site_uv">
             {t("footer.visitors")}
             <span id="vercount_value_site_uv">Loading...</span> {t("footer.visits")}
         </span>
-        <span class="stats-separator">|</span>
+        <span class="stalux-stats-stats-separator">|</span>
         <span id="vercount_container_site_pv">
             {t("footer.totalVisits")}
             <span id="vercount_value_site_pv">Loading...</span> {t("footer.times")}
         </span>
-        <span class="stats-separator">|</span>
+        <span class="stalux-stats-stats-separator">|</span>
         <span id="word-count-container">
             {t("footer.totalWords")}
             <span id="word-count-value">{wordCount ?? "Loading..."}</span> {t("footer.chars")}
@@ -36,7 +36,7 @@ const { showStats = true, wordCount, buildtime } = Astro.props;
 
 {buildtime && (
     <div
-        class="site-build-time"
+        class="stalux-stats-site-build-time"
         data-stalux-buildtime={buildtime}
         data-stalux-runtime-format={t("footer.runtimeFormat")}
     >
@@ -46,24 +46,3 @@ const { showStats = true, wordCount, buildtime } = Astro.props;
         </span>
     </div>
 )}
-
-<style>
-.site-stats {
-    display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-    font-size: 0.9rem;
-}
-
-.stats-separator {
-    color: rgba(255, 255, 255, 0.5);
-}
-
-.site-build-time {
-    margin-top: 0.5rem;
-    font-size: 0.9rem;
-    color: rgba(255, 255, 255, 0.8);
-    text-align: center;
-}
-</style>

package/src/components/stalux/footer/FooterThemeInfo.astro

@@ -9,7 +9,7 @@ const showThemeInfoSection = !!(showPoweredBy || showThemeInfo);
 ---
 
 {showThemeInfoSection && (
-    <div class="theme-info">
+    <div class="stalux-theme-info">
         {showPoweredBy && (
             <span>
                 Powered by
@@ -33,30 +33,3 @@ const showThemeInfoSection = !!(showPoweredBy || showThemeInfo);
         )}
     </div>
 )}
-
-<style>
-.theme-info {
-    color: var(--white-70p);
-    font-size: 0.85rem;
-    display: flex;
-    justify-content: center;
-    gap: 0.3em;
-    flex-wrap: wrap;
-}
-
-.theme-info span {
-    margin: 0;
-}
-
-.theme-info a {
-    color: rgba(255, 255, 255, 0.8);
-    text-decoration: none;
-    transition: color 0.3s ease;
-    margin: 0 0.2em;
-}
-
-.theme-info a:hover {
-    color: rgba(255, 255, 255, 1);
-    text-decoration: none;
-}
-</style>

package/src/components/stalux/layout/footer.astro

@@ -5,7 +5,7 @@ import FooterBeian from "@components/stalux/footer/FooterBeian.astro";
 import FooterCopyright from "@components/stalux/footer/FooterCopyright.astro";
 import FooterStats from "@components/stalux/footer/FooterStats.astro";
 import FooterThemeInfo from "@components/stalux/footer/FooterThemeInfo.astro";
-import footerStyle from "@styles/components/footer/footer.module.css";
+
 import type { BadgeItem, BadgeOptions } from "@utils/badge-generator";
 import { getAuthorData, getFooterData, getSiteData } from "@utils/config-utils";
 import { formatWordCount, getTotalWordCount } from "@utils/word-count-utils";
@@ -50,8 +50,8 @@ const totalWordCount = await getTotalWordCount(Astro.logger);
 const formattedWordCount = formatWordCount(totalWordCount, siteConfig.lang || "zh-CN");
 ---
 
-<footer class={footerStyle.siteFooter} transition:persist-props>
-    <div class={footerStyle.footerContent}>
+<footer class="stalux-footer" transition:persist-props>
+    <div class="stalux-footer-content">
         <!-- 版权信息 -->
         {footerConfig?.copyright?.enabled && (
     <FooterCopyright author={author} startYear={footerConfig?.copyright?.startYear} />

package/src/components/stalux/layout/listPage.astro

@@ -2,7 +2,7 @@
 import { getCollection } from "astro:content";
 import Navs from "@components/stalux/layout/navs.astro";
 import Stalux from "@layouts/Stalux.astro";
-import styles from "@styles/pages/listPage.module.css";
+
 import { getSiteData } from "@utils/config-utils";
 
 interface Props {
@@ -20,7 +20,7 @@ const siteConfig = getSiteData(configEntries);
 <Stalux title={`${title} | ${siteConfig.title}`} description={description}>
     <div style="height: 3em;"></div>
     <Navs />
-    <h1 class={styles.title}>{heading}</h1>
-    {subheading && <div class={styles.description}>{subheading}</div>}
+    <h1 class="stalux-page-title">{heading}</h1>
+    {subheading && <div class="stalux-page-description">{subheading}</div>}
     <slot />
 </Stalux>