+
+
+
+
+
+
+
+
+ {i18n(I18nKey.bangumi)}
+
+
+
+ {i18n(I18nKey.bangumiSubtitle)}
+
+
+ {i18n(I18nKey.bangumiLastUpdated)} {buildTime}
+
+
+
+
+ {tabs.length > 0 ? (
+ <>
+
+
+
+ {tabs.map((tab) => (
+
+ ))}
+
+ ) : (
+
+
+
+
+ {isUserIdConfigured ? i18n(I18nKey.bangumiEmpty) : "未配置 Bangumi 用户ID"}
+
+
+ {isUserIdConfigured ? i18n(I18nKey.bangumiEmptyReason) : "请在 src/config/siteConfig.ts 中配置你的 Bangumi 用户ID"}
+
+
+ )}
+
+
+
+
+
\ No newline at end of file
diff --git a/src/pages/friends.astro b/src/pages/friends.astro
new file mode 100644
index 0000000..7153e3e
--- /dev/null
+++ b/src/pages/friends.astro
@@ -0,0 +1,212 @@
+---
+import { getEntry, render } from "astro:content";
+import Comment from "@components/comment/index.astro";
+import Markdown from "@components/misc/Markdown.astro";
+import Icon from "@/components/misc/Icon.astro";
+import { friendsPageConfig, getEnabledFriends } from "@/config";
+import I18nKey from "@/i18n/i18nKey";
+import { i18n } from "@/i18n/translation";
+import MainGridLayout from "@/layouts/MainGridLayout.astro";
+
+const friendsPost = await getEntry("spec", "friends");
+
+if (!friendsPost) {
+ throw new Error("friends page content not found");
+}
+
+const { Content } = await render(friendsPost);
+
+// 使用配置文件中的友链数据，按权重排序
+const items = getEnabledFriends();
+const allTags = [...new Set(items.flatMap((item) => item.tags || []))].sort();
+
+// 页面标题和描述
+const title = i18n(I18nKey.friends);
+const description = i18n(I18nKey.friendsDescription);
+---
+
+
+
+
+
+
+
+ {
+ description && (
+
+ {description}
+
+ )
+ }
+
+
+
+ {
+ items.length > 0 && (
+
+
+ {i18n(I18nKey.all)}
+
+ {allTags.map((tag) => (
+
+ {tag}
+
+ ))}
+
+ )
+ }
+
+
+
+
+
+
+
+
+
+
diff --git a/src/pages/guestbook.astro b/src/pages/guestbook.astro
new file mode 100644
index 0000000..70eb86d
--- /dev/null
+++ b/src/pages/guestbook.astro
@@ -0,0 +1,90 @@
+---
+import { getEntry, render } from "astro:content";
+import Comment from "@components/comment/index.astro";
+import Markdown from "@components/misc/Markdown.astro";
+import Icon from "@/components/misc/Icon.astro";
+import { commentConfig, siteConfig } from "@/config";
+import I18nKey from "@/i18n/i18nKey";
+import { i18n } from "@/i18n/translation";
+import MainGridLayout from "@/layouts/MainGridLayout.astro";
+
+// 检查页面是否启用
+if (!siteConfig.pages.guestbook) {
+ return Astro.redirect("/404/");
+}
+
+const guestbookPost = await getEntry("spec", "guestbook");
+
+if (!guestbookPost) {
+ throw new Error("guestbook page content not found");
+}
+
+const { Content } = await render(guestbookPost);
+
+// 检查评论系统是否启用
+const isCommentEnabled = commentConfig?.type && commentConfig.type !== "none";
+
+// 页面标题和描述
+const title = i18n(I18nKey.guestbook);
+const description = i18n(I18nKey.guestbookDescription);
+---
+
+
+
+
+
+
+
+ {description && (
+
+ {description}
+
+ )}
+
+
+
+
+
+
+ {isCommentEnabled ? (
+
+ ) : (
+
+
+
+
{i18n(I18nKey.commentNotConfigured)}
+
+ {i18n(I18nKey.guestbookCommentHint)}
+
+
+
+ )}
+
diff --git a/src/pages/og/[...slug].png.ts b/src/pages/og/[...slug].png.ts
new file mode 100644
index 0000000..4af82f5
--- /dev/null
+++ b/src/pages/og/[...slug].png.ts
@@ -0,0 +1,354 @@
+import type { CollectionEntry } from "astro:content";
+import { getCollection } from "astro:content";
+import * as fs from "node:fs";
+import type { APIContext, GetStaticPaths } from "astro";
+import satori from "satori";
+import sharp from "sharp";
+import { removeFileExtension } from "@/utils/url-utils";
+
+import { profileConfig } from "../../config/profileConfig";
+import { siteConfig } from "../../config/siteConfig";
+
+type Weight = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+
+type FontStyle = "normal" | "italic";
+interface FontOptions {
+ data: Buffer | ArrayBuffer;
+ name: string;
+ weight?: Weight;
+ style?: FontStyle;
+ lang?: string;
+}
+export const prerender = true;
+
+export const getStaticPaths: GetStaticPaths = async () => {
+ if (!siteConfig.generateOgImages) {
+ return [];
+ }
+
+ const allPosts = await getCollection("posts");
+ const publishedPosts = allPosts.filter((post) => !post.data.draft);
+
+ return publishedPosts.map((post) => {
+ // 将 id 转换为 slug（移除扩展名）以匹配路由参数
+ const slug = removeFileExtension(post.id);
+ return {
+ params: { slug },
+ props: { post },
+ };
+ });
+};
+
+let fontCache: { regular: Buffer | null; bold: Buffer | null } | null = null;
+
+async function fetchNotoSansSCFonts() {
+ if (fontCache) return fontCache;
+ try {
+ const cssResp = await fetch(
+ "https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap",
+ );
+ if (!cssResp.ok) throw new Error("Failed to fetch Google Fonts CSS");
+ const cssText = await cssResp.text();
+
+ const getUrlForWeight = (weight: number) => {
+ const blockRe = new RegExp(
+ `@font-face\\s*{[^}]*font-weight:\\s*${weight}[^}]*}`,
+ "g",
+ );
+ const match = cssText.match(blockRe);
+ if (!match || match.length === 0) return null;
+ const urlMatch = match[0].match(/url\((https:[^)]+)\)/);
+ return urlMatch ? urlMatch[1] : null;
+ };
+
+ const regularUrl = getUrlForWeight(400);
+ const boldUrl = getUrlForWeight(700);
+
+ if (!regularUrl || !boldUrl) {
+ console.warn(
+ "Could not find font urls in Google Fonts CSS; falling back to no fonts.",
+ );
+ fontCache = { regular: null, bold: null };
+ return { regular: null, bold: null };
+ }
+
+ const [rResp, bResp] = await Promise.all([
+ fetch(regularUrl),
+ fetch(boldUrl),
+ ]);
+ if (!rResp.ok || !bResp.ok) {
+ console.warn(
+ "Failed to download font files from Google; falling back to no fonts.",
+ );
+ fontCache = { regular: null, bold: null };
+ return { regular: null, bold: null };
+ }
+
+ const rBuf = Buffer.from(await rResp.arrayBuffer());
+ const bBuf = Buffer.from(await bResp.arrayBuffer());
+ fontCache = { regular: rBuf, bold: bBuf };
+ return fontCache;
+ } catch (err) {
+ console.warn("Error fetching fonts:", err);
+ fontCache = { regular: null, bold: null };
+ return { regular: null, bold: null };
+ }
+}
+
+export async function GET({
+ props,
+}: APIContext<{ post: CollectionEntry<"posts"> }>) {
+ const { post } = props;
+
+ // Try to fetch fonts from Google Fonts (woff2) at runtime.
+ const { regular: fontRegular, bold: fontBold } = await fetchNotoSansSCFonts();
+
+ // Avatar + icon: still read from disk (small assets)
+ let avatarBase64: string;
+
+ // 检查头像是否为 URL
+ if (profileConfig.avatar?.startsWith("http")) {
+ // 如果是 URL，直接使用
+ avatarBase64 = profileConfig.avatar;
+ } else {
+ // 如果是本地路径，从 public 目录读取
+ const avatarPath = profileConfig.avatar?.startsWith("/")
+ ? `./public${profileConfig.avatar}`
+ : `./src/${profileConfig.avatar}`;
+ const avatarBuffer = fs.readFileSync(avatarPath);
+ avatarBase64 = `data:image/png;base64,${avatarBuffer.toString("base64")}`;
+ }
+
+ let iconPath = "./public/favicon/favicon-dark-192.png";
+ if (siteConfig.favicon.length > 0) {
+ iconPath = `./public${siteConfig.favicon[0].src}`;
+ }
+ const iconBuffer = fs.readFileSync(iconPath);
+ const iconBase64 = `data:image/png;base64,${iconBuffer.toString("base64")}`;
+
+ const hue = siteConfig.themeColor.hue;
+ const primaryColor = `hsl(${hue}, 90%, 65%)`;
+ const textColor = "hsl(0, 0%, 95%)";
+
+ const subtleTextColor = `hsl(${hue}, 10%, 75%)`;
+ const backgroundColor = `hsl(${hue}, 15%, 12%)`;
+
+ const pubDate = post.data.published.toLocaleDateString("en-US", {
+ year: "numeric",
+ month: "short",
+ day: "numeric",
+ });
+
+ const description = post.data.description;
+
+ const template = {
+ type: "div",
+ props: {
+ style: {
+ height: "100%",
+ width: "100%",
+ display: "flex",
+ flexDirection: "column",
+ backgroundColor: backgroundColor,
+ fontFamily:
+ '"Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+ padding: "60px",
+ },
+ children: [
+ {
+ type: "div",
+ props: {
+ style: {
+ width: "100%",
+ display: "flex",
+ alignItems: "center",
+ gap: "20px",
+ },
+ children: [
+ {
+ type: "img",
+ props: {
+ src: iconBase64,
+ width: 48,
+ height: 48,
+ style: { borderRadius: "10px" },
+ },
+ },
+ {
+ type: "div",
+ props: {
+ style: {
+ fontSize: "36px",
+ fontWeight: 600,
+ color: subtleTextColor,
+ },
+ children: siteConfig.title,
+ },
+ },
+ ],
+ },
+ },
+
+ {
+ type: "div",
+ props: {
+ style: {
+ display: "flex",
+ flexDirection: "column",
+ justifyContent: "center",
+ flexGrow: 1,
+ gap: "20px",
+ },
+ children: [
+ {
+ type: "div",
+ props: {
+ style: {
+ display: "flex",
+ alignItems: "flex-start",
+ },
+ children: [
+ {
+ type: "div",
+ props: {
+ style: {
+ width: "10px",
+ height: "68px",
+ backgroundColor: primaryColor,
+ borderRadius: "6px",
+ marginTop: "14px",
+ },
+ },
+ },
+ {
+ type: "div",
+ props: {
+ style: {
+ fontSize: "72px",
+ fontWeight: 700,
+ lineHeight: 1.2,
+ color: textColor,
+ marginLeft: "25px",
+ display: "-webkit-box",
+ overflow: "hidden",
+ textOverflow: "ellipsis",
+ lineClamp: 3,
+ WebkitLineClamp: 3,
+ WebkitBoxOrient: "vertical",
+ },
+ children: post.data.title,
+ },
+ },
+ ],
+ },
+ },
+ description && {
+ type: "div",
+ props: {
+ style: {
+ fontSize: "32px",
+ lineHeight: 1.5,
+ color: subtleTextColor,
+ paddingLeft: "35px",
+ display: "-webkit-box",
+ overflow: "hidden",
+ textOverflow: "ellipsis",
+ lineClamp: 2,
+ WebkitLineClamp: 2,
+ WebkitBoxOrient: "vertical",
+ },
+ children: description,
+ },
+ },
+ ],
+ },
+ },
+ {
+ type: "div",
+ props: {
+ style: {
+ display: "flex",
+ justifyContent: "space-between",
+ alignItems: "center",
+ width: "100%",
+ },
+ children: [
+ {
+ type: "div",
+ props: {
+ style: {
+ display: "flex",
+ alignItems: "center",
+ gap: "20px",
+ },
+ children: [
+ {
+ type: "img",
+ props: {
+ src: avatarBase64,
+ width: 60,
+ height: 60,
+ style: { borderRadius: "50%" },
+ },
+ },
+ {
+ type: "div",
+ props: {
+ style: {
+ fontSize: "28px",
+ fontWeight: 600,
+ color: textColor,
+ },
+ children: profileConfig.name,
+ },
+ },
+ ],
+ },
+ },
+ {
+ type: "div",
+ props: {
+ style: { fontSize: "28px", color: subtleTextColor },
+ children: pubDate,
+ },
+ },
+ ],
+ },
+ },
+ ],
+ },
+ };
+
+ const fonts: FontOptions[] = [];
+ if (fontRegular) {
+ fonts.push({
+ name: "Noto Sans SC",
+ data: fontRegular,
+ weight: 400,
+ style: "normal",
+ });
+ }
+ if (fontBold) {
+ fonts.push({
+ name: "Noto Sans SC",
+ data: fontBold,
+ weight: 700,
+ style: "normal",
+ });
+ }
+
+ const svg = await satori(template, {
+ width: 1200,
+ height: 630,
+ fonts,
+ });
+
+ const png = await sharp(Buffer.from(svg)).png().toBuffer();
+
+ return new Response(new Uint8Array(png), {
+ headers: {
+ "Content-Type": "image/png",
+ "Cache-Control": "public, max-age=31536000, immutable",
+ },
+ });
+}
diff --git a/src/pages/posts/[...slug].astro b/src/pages/posts/[...slug].astro
new file mode 100644
index 0000000..2ddc4bb
--- /dev/null
+++ b/src/pages/posts/[...slug].astro
@@ -0,0 +1,393 @@
+---
+import { render } from "astro:content";
+import * as path from "node:path";
+import Comment from "@components/comment/index.astro";
+import License from "@components/misc/License.astro";
+import Markdown from "@components/misc/Markdown.astro";
+import I18nKey from "@i18n/i18nKey";
+import { i18n } from "@i18n/translation";
+import MainGridLayout from "@layouts/MainGridLayout.astro";
+import { getSortedPosts } from "@utils/content-utils";
+import {
+ getFileDirFromPath,
+ getPostUrlBySlug,
+ removeFileExtension,
+} from "@utils/url-utils";
+import { Icon } from "astro-icon/components";
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
+import PostMetadata from "@/components/content/PostMeta.astro";
+import RandomCoverImage from "@/components/misc/RandomCoverImage.astro";
+import SharePoster from "@/components/misc/SharePoster.svelte";
+import { coverImageConfig } from "@/config/coverImageConfig";
+import { licenseConfig } from "@/config/licenseConfig";
+import { profileConfig } from "@/config/profileConfig";
+import { siteConfig } from "@/config/siteConfig";
+import { sponsorConfig } from "@/config/sponsorConfig";
+import { formatDateToYYYYMMDD } from "@/utils/date-utils";
+import { processCoverImageSync } from "@/utils/image-utils";
+import { url } from "@/utils/url-utils";
+
+export async function getStaticPaths() {
+ const blogEntries = await getSortedPosts();
+ return blogEntries.map((entry) => {
+ // 将 id 转换为 slug（移除扩展名）以匹配路由参数
+ const slug = removeFileExtension(entry.id);
+ return {
+ params: { slug },
+ props: { entry },
+ };
+ });
+}
+
+const { entry } = Astro.props;
+const { Content, headings } = await render(entry);
+
+const { remarkPluginFrontmatter } = await render(entry);
+
+// 处理随机图：如果image为"api"，则从配置的API获取随机图
+const processedImage = processCoverImageSync(entry.data.image, entry.id);
+
+let posterCoverUrl = processedImage;
+if (processedImage) {
+ const isLocal = !(
+ processedImage.startsWith("/") ||
+ processedImage.startsWith("http") ||
+ processedImage.startsWith("https") ||
+ processedImage.startsWith("data:")
+ );
+ if (isLocal) {
+ const basePath = getFileDirFromPath(entry.filePath || "");
+ const files = import.meta.glob
("../../**", {
+ import: "default",
+ });
+ let normalizedPath = path
+ .normalize(path.join("../../", basePath, processedImage))
+ .replace(/\\/g, "/");
+ const file = files[normalizedPath];
+ if (file) {
+ const img = await file();
+ posterCoverUrl = img.src;
+ }
+ }
+}
+
+dayjs.extend(utc);
+
+const jsonLd = {
+ "@context": "https://schema.org",
+ "@type": "BlogPosting",
+ headline: entry.data.title,
+ description: entry.data.description || entry.data.title,
+ keywords: entry.data.tags,
+ author: {
+ "@type": "Person",
+ name: profileConfig.name,
+ url: Astro.site,
+ },
+ datePublished: formatDateToYYYYMMDD(entry.data.published),
+ inLanguage: entry.data.lang
+ ? entry.data.lang.replace("_", "-")
+ : siteConfig.lang.replace("_", "-"),
+ // TODO include cover image here
+};
+---
+
+
+
+
+
+
+
+
+
+
+
+ {remarkPluginFrontmatter.words}
+ {" " + i18n(I18nKey.wordsCount)}
+
+
+
+
+
+
+ {remarkPluginFrontmatter.minutes}
+ {
+ " " +
+ i18n(
+ remarkPluginFrontmatter.minutes === 1
+ ? I18nKey.minuteCount
+ : I18nKey.minutesCount
+ )
+ }
+
+
+
+
+
+
+
+ {entry.data.title}
+
+
+
+
+
+
+ {
+ !processedImage && (
+
+ )
+ }
+
+
+
+
+ {
+ processedImage && coverImageConfig.enableInPost && (
+
+
+ )
+ }
+
+
+
+
+ {/* 赞助按钮 & 分享按钮 */}
+ {
+ (siteConfig.sharePoster || (sponsorConfig.showButtonInPost && siteConfig.pages.sponsor)) && (
+
+
+
+
+
+
+
+
+ {
+ sponsorConfig.showButtonInPost && siteConfig.pages.sponsor
+ ? i18n(I18nKey.sponsorButton)
+ : i18n(I18nKey.shareOnSocial)
+ }
+
+
+ {
+ sponsorConfig.showButtonInPost && siteConfig.pages.sponsor
+ ? i18n(I18nKey.sponsorButtonText)
+ : i18n(I18nKey.shareOnSocialDescription)
+ }
+
+
+
+
+ {
+ siteConfig.sharePoster && (
+
+ )
+ }
+ {
+ sponsorConfig.showButtonInPost && siteConfig.pages.sponsor && (
+
+ {i18n(I18nKey.sponsor)}
+
+ )
+ }
+
+
+
+
+ )
+ }
+
+ {
+ licenseConfig.enable && (
+
+ )
+ }
+
+
+
+
+
+
+ {(() => {
+ const dateStr = lastModified.format("YYYY-MM-DD");
+ const isOutdated = daysDiff >= 1;
+
+ return (
+
+
+ {`${i18n(I18nKey.lastModifiedPrefix)}${dateStr}${
+ isOutdated
+ ? `，${i18n(I18nKey.lastModifiedDaysAgo).replace("{days}", daysDiff.toString())}`
+ : ""
+ }`}
+
+ {isOutdated && (
+
+ {i18n(I18nKey.lastModifiedOutdated)}
+
+ )}
+
+ );
+ })()}
+
+
diff --git a/src/pages/robots.txt.ts b/src/pages/robots.txt.ts
new file mode 100644
index 0000000..cf9107f
--- /dev/null
+++ b/src/pages/robots.txt.ts
@@ -0,0 +1,16 @@
+import type { APIRoute } from "astro";
+
+const robotsTxt = `
+User-agent: *
+Disallow: /_astro/
+
+Sitemap: ${new URL("sitemap-index.xml", import.meta.env.SITE).href}
+`.trim();
+
+export const GET: APIRoute = () => {
+ return new Response(robotsTxt, {
+ headers: {
+ "Content-Type": "text/plain; charset=utf-8",
+ },
+ });
+};
diff --git a/src/pages/rss.astro b/src/pages/rss.astro
new file mode 100644
index 0000000..850cb5d
--- /dev/null
+++ b/src/pages/rss.astro
@@ -0,0 +1,159 @@
+---
+import MainGridLayout from "@layouts/MainGridLayout.astro";
+import { getSortedPosts } from "@utils/content-utils";
+import { formatDateToYYYYMMDD } from "@utils/date-utils";
+import { Icon } from "astro-icon/components";
+import I18nKey from "@/i18n/i18nKey";
+import { i18n } from "@/i18n/translation";
+
+const posts = await getSortedPosts();
+const recentPosts = posts.slice(0, 6);
+---
+
+
+
+
+
+
+
+
+
{i18n(I18nKey.rss)}
+
+ {i18n(I18nKey.rssSubtitle)}
+
+
+
+
+
+
+
+
+
+
+
+
{i18n(I18nKey.rssLink)}
+
{i18n(I18nKey.rssCopyToReader)}
+
+
+
+
+ {Astro.site}rss.xml
+
+
+
+
+
+
+
+
+
+
+
+ {recentPosts.map((post) => (
+
+
+ {post.data.description && (
+
+ {post.data.description}
+
+ )}
+
+
+ {formatDateToYYYYMMDD(post.data.published)}
+
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+ {i18n(I18nKey.rssWhatIsRSSDescription)}
+
+
+ {i18n(I18nKey.rssBenefit1)}
+ {i18n(I18nKey.rssBenefit2)}
+ {i18n(I18nKey.rssBenefit3)}
+ {i18n(I18nKey.rssBenefit4)}
+
+
+ {i18n(I18nKey.rssHowToUse)}
+
+
+
+
\ No newline at end of file
diff --git a/src/pages/rss.xml.ts b/src/pages/rss.xml.ts
new file mode 100644
index 0000000..275488b
--- /dev/null
+++ b/src/pages/rss.xml.ts
@@ -0,0 +1,50 @@
+import rss from "@astrojs/rss";
+import { getSortedPosts } from "@utils/content-utils";
+import { formatDateI18nWithTime } from "@utils/date-utils";
+import { url } from "@utils/url-utils";
+import type { APIContext } from "astro";
+import MarkdownIt from "markdown-it";
+import sanitizeHtml from "sanitize-html";
+import { profileConfig, siteConfig } from "@/config";
+import pkg from "../../package.json";
+
+const parser = new MarkdownIt();
+
+function stripInvalidXmlChars(str: string): string {
+ return str.replace(
+ // biome-ignore lint/suspicious/noControlCharactersInRegex: https://www.w3.org/TR/xml/#charsets
+ /[\x00-\x08\x0B\x0C\x0E-\x1F\x7F-\x9F\uFDD0-\uFDEF\uFFFE\uFFFF]/g,
+ "",
+ );
+}
+
+export async function GET(context: APIContext) {
+ const blog = await getSortedPosts();
+
+ return rss({
+ title: siteConfig.title,
+ description: siteConfig.subtitle || "No description",
+ site: context.site ?? "https://firefly.cuteleaf.cn",
+ customData: `
+ ${siteConfig.lang}
+ Firefly
+ ${pkg.version}
+ https://github.com/CuteLeaf/Firefly
+ ${formatDateI18nWithTime(new Date())} `,
+ items: blog.map((post) => {
+ const content =
+ typeof post.body === "string" ? post.body : String(post.body || "");
+ const cleanedContent = stripInvalidXmlChars(content);
+ return {
+ title: post.data.title,
+ author: post.data?.author || profileConfig.name,
+ pubDate: post.data.published,
+ description: post.data.description || "",
+ link: url(`/posts/${post.id}/`),
+ content: sanitizeHtml(parser.render(cleanedContent), {
+ allowedTags: sanitizeHtml.defaults.allowedTags.concat(["img"]),
+ }),
+ };
+ }),
+ });
+}
diff --git a/src/pages/search.astro b/src/pages/search.astro
new file mode 100644
index 0000000..c070fcf
--- /dev/null
+++ b/src/pages/search.astro
@@ -0,0 +1,42 @@
+---
+import AdvancedSearch from "@components/pages/AdvancedSearch.svelte";
+import I18nKey from "@i18n/i18nKey";
+import { i18n } from "@i18n/translation";
+import MainGridLayout from "@layouts/MainGridLayout.astro";
+import { url } from "@/utils/url-utils";
+
+const title = i18n(I18nKey.search);
+const description = "";
+---
+
+
+
+
+
+{import.meta.env.PROD && (
+
+)}
diff --git a/src/pages/sponsor.astro b/src/pages/sponsor.astro
new file mode 100644
index 0000000..2feb61b
--- /dev/null
+++ b/src/pages/sponsor.astro
@@ -0,0 +1,185 @@
+---
+import Icon from "@/components/misc/Icon.astro";
+import { siteConfig, sponsorConfig } from "@/config";
+import I18nKey from "@/i18n/i18nKey";
+import { i18n } from "@/i18n/translation";
+import MainGridLayout from "@/layouts/MainGridLayout.astro";
+import { url } from "@/utils/url-utils";
+
+// 检查页面是否启用
+if (!siteConfig.pages.sponsor) {
+ return Astro.redirect("/404/");
+}
+
+const title = sponsorConfig.title || i18n(I18nKey.sponsorTitle);
+const description =
+ sponsorConfig.description || i18n(I18nKey.sponsorDescription);
+const enabledMethods = sponsorConfig.methods.filter((method) => method.enabled);
+const sponsors = sponsorConfig.sponsors || [];
+const showSponsorsList = sponsorConfig.showSponsorsList !== false;
+---
+
+
+
+
+
+
+
+ {description && (
+
+ {description}
+
+ )}
+ {sponsorConfig.usage && (
+
+
+
+
+
+
+
+ )}
+
+
+
+
+
+ {enabledMethods.map((method) => (
+
+
+
+ {method.icon && (
+
+ {method.name}
+
+
+
+
+ {method.description && (
+
+ {method.description}
+
+ )}
+
+
+ {method.qrCode && (
+
+
+
+ )}
+
+ {method.link && (
+
+ {i18n(I18nKey.sponsorGoTo)}
+
+ )}
+
+ ))}
+
+
+
+
+
+ {showSponsorsList && (
+
+
+
+ {i18n(I18nKey.sponsorList)}
+
+
+ {sponsors.length > 0 ? (
+
+ {sponsors.map((sponsor) => (
+
+
+
+
+
+
+ {sponsor.name}
+
+ {sponsor.amount && (
+
+ {sponsor.amount}
+
+ )}
+
+
+
+ {sponsor.message && (
+
+ {sponsor.message}
+
+ )}
+
+
+ {sponsor.date && (
+
+
+
+
+ {new Date(sponsor.date).toLocaleDateString()}
+
+
+ )}
+
+
+ ))}
+
+ ) : (
+
+
{i18n(I18nKey.sponsorEmpty)}
+
+ )}
+
+ )}
+
+
+
+
+
diff --git a/src/plugins/expressive-code/custom-copy-button.ts b/src/plugins/expressive-code/custom-copy-button.ts
new file mode 100644
index 0000000..47e9cb7
--- /dev/null
+++ b/src/plugins/expressive-code/custom-copy-button.ts
@@ -0,0 +1,90 @@
+import { definePlugin } from "@expressive-code/core";
+import type { Element } from "hast";
+
+export function pluginCustomCopyButton() {
+ return definePlugin({
+ name: "Custom Copy Button",
+ hooks: {
+ postprocessRenderedBlock: (context) => {
+ function traverse(node: Element) {
+ if (node.type === "element" && node.tagName === "pre") {
+ processCodeBlock(node);
+ return;
+ }
+ if (node.children) {
+ for (const child of node.children) {
+ if (child.type === "element") traverse(child);
+ }
+ }
+ }
+
+ function processCodeBlock(node: Element) {
+ const copyButton = {
+ type: "element" as const,
+ tagName: "button",
+ properties: {
+ className: ["copy-btn"],
+ "aria-label": "Copy code",
+ },
+ children: [
+ {
+ type: "element" as const,
+ tagName: "div",
+ properties: {
+ className: ["copy-btn-icon"],
+ },
+ children: [
+ {
+ type: "element" as const,
+ tagName: "svg",
+ properties: {
+ viewBox: "0 -960 960 960",
+ xmlns: "http://www.w3.org/2000/svg",
+ className: ["copy-btn-icon", "copy-icon"],
+ },
+ children: [
+ {
+ type: "element" as const,
+ tagName: "path",
+ properties: {
+ d: "M368.37-237.37q-34.48 0-58.74-24.26-24.26-24.26-24.26-58.74v-474.26q0-34.48 24.26-58.74 24.26-24.26 58.74-24.26h378.26q34.48 0 58.74 24.26 24.26 24.26 24.26 58.74v474.26q0 34.48-24.26 58.74-24.26 24.26-58.74 24.26H368.37Zm0-83h378.26v-474.26H368.37v474.26Zm-155 238q-34.48 0-58.74-24.26-24.26-24.26-24.26-58.74v-515.76q0-17.45 11.96-29.48 11.97-12.02 29.33-12.02t29.54 12.02q12.17 12.03 12.17 29.48v515.76h419.76q17.45 0 29.48 11.96 12.02 11.97 12.02 29.33t-12.02 29.54q-12.03 12.17-29.48 12.17H213.37Zm155-238v-474.26 474.26Z",
+ },
+ children: [],
+ },
+ ],
+ },
+ {
+ type: "element" as const,
+ tagName: "svg",
+ properties: {
+ viewBox: "0 -960 960 960",
+ xmlns: "http://www.w3.org/2000/svg",
+ className: ["copy-btn-icon", "success-icon"],
+ },
+ children: [
+ {
+ type: "element" as const,
+ tagName: "path",
+ properties: {
+ d: "m389-377.13 294.7-294.7q12.58-12.67 29.52-12.67 16.93 0 29.61 12.67 12.67 12.68 12.67 29.53 0 16.86-12.28 29.14L419.07-288.41q-12.59 12.67-29.52 12.67-16.94 0-29.62-12.67L217.41-430.93q-12.67-12.68-12.79-29.45-.12-16.77 12.55-29.45 12.68-12.67 29.62-12.67 16.93 0 29.28 12.67L389-377.13Z",
+ },
+ children: [],
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ } as Element;
+
+ if (!node.children) {
+ node.children = [];
+ }
+ node.children.push(copyButton);
+ }
+
+ traverse(context.renderData.blockAst);
+ },
+ },
+ });
+}
diff --git a/src/plugins/expressive-code/language-badge.ts b/src/plugins/expressive-code/language-badge.ts
new file mode 100644
index 0000000..5839428
--- /dev/null
+++ b/src/plugins/expressive-code/language-badge.ts
@@ -0,0 +1,49 @@
+/**
+ * Based on the discussion at https://github.com/expressive-code/expressive-code/issues/153#issuecomment-2282218684
+ */
+import { definePlugin } from "@expressive-code/core";
+
+export function pluginLanguageBadge() {
+ return definePlugin({
+ name: "Language Badge",
+ baseStyles: () => `
+ [data-language]::before {
+ position: absolute;
+ z-index: 2;
+ right: 0.5rem;
+ top: 0.5rem;
+ padding: 0.1rem 0.5rem;
+ content: attr(data-language);
+ font-family: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+ font-size: 0.75rem;
+ font-weight: bold;
+ text-transform: uppercase;
+ color: oklch(0.75 0.1 var(--hue));
+ background: oklch(0.33 0.035 var(--hue));
+ border-radius: 0.5rem;
+ pointer-events: none;
+ transition: opacity 0.3s;
+ opacity: 0;
+ }
+ .frame:not(.has-title):not(.is-terminal) {
+ @media (hover: none) {
+ & [data-language]::before {
+ opacity: 1;
+ margin-right: 3rem;
+ }
+ & [data-language]:active::before {
+ opacity: 0;
+ }
+ }
+ @media (hover: hover) {
+ & [data-language]::before {
+ opacity: 1;
+ }
+ &:hover [data-language]::before {
+ opacity: 0;
+ }
+ }
+ }
+ `,
+ });
+}
diff --git a/src/plugins/mermaid-render-script.js b/src/plugins/mermaid-render-script.js
new file mode 100644
index 0000000..a0fed46
--- /dev/null
+++ b/src/plugins/mermaid-render-script.js
@@ -0,0 +1,344 @@
+(() => {
+ // 单例模式：检查是否已经初始化过
+ if (window.mermaidInitialized) {
+ return;
+ }
+
+ window.mermaidInitialized = true;
+
+ // 记录当前主题状态，避免不必要的重新渲染
+ let currentTheme = null;
+ let isRendering = false; // 防止并发渲染
+ let retryCount = 0;
+ const MAX_RETRIES = 3;
+ const RETRY_DELAY = 1000; // 1秒
+
+ // 检查主题是否真的发生了变化
+ function hasThemeChanged() {
+ const isDark = document.documentElement.classList.contains("dark");
+ const newTheme = isDark ? "dark" : "default";
+
+ if (currentTheme !== newTheme) {
+ currentTheme = newTheme;
+ return true;
+ }
+ return false;
+ }
+
+ // 等待 Mermaid 库加载完成
+ function waitForMermaid(timeout = 10000) {
+ return new Promise((resolve, reject) => {
+ const startTime = Date.now();
+
+ function check() {
+ if (window.mermaid && typeof window.mermaid.initialize === "function") {
+ resolve(window.mermaid);
+ } else if (Date.now() - startTime > timeout) {
+ reject(new Error("Mermaid library failed to load within timeout"));
+ } else {
+ setTimeout(check, 100);
+ }
+ }
+
+ check();
+ });
+ }
+
+ // 设置 MutationObserver 监听 html 元素的 class 属性变化
+ function setupMutationObserver() {
+ const observer = new MutationObserver((mutations) => {
+ mutations.forEach((mutation) => {
+ if (
+ mutation.type === "attributes" &&
+ mutation.attributeName === "class"
+ ) {
+ // 检查是否是 dark 类的变化
+ const target = mutation.target;
+ const wasDark = mutation.oldValue
+ ? mutation.oldValue.includes("dark")
+ : false;
+ const isDark = target.classList.contains("dark");
+
+ if (wasDark !== isDark) {
+ if (hasThemeChanged()) {
+ // 延迟渲染，避免主题切换时的闪烁
+ setTimeout(() => renderMermaidDiagrams(), 150);
+ }
+ }
+ }
+ });
+ });
+
+ // 开始观察 html 元素的 class 属性变化
+ observer.observe(document.documentElement, {
+ attributes: true,
+ attributeFilter: ["class"],
+ attributeOldValue: true,
+ });
+ }
+
+ // 设置其他事件监听器
+ function setupEventListeners() {
+ // 监听页面切换
+ document.addEventListener("astro:page-load", () => {
+ // 重新初始化主题状态
+ currentTheme = null;
+ retryCount = 0; // 重置重试计数
+ if (hasThemeChanged()) {
+ setTimeout(() => renderMermaidDiagrams(), 100);
+ }
+ });
+
+ // 监听页面可见性变化，页面重新可见时重新渲染
+ document.addEventListener("visibilitychange", () => {
+ if (!document.hidden) {
+ setTimeout(() => renderMermaidDiagrams(), 200);
+ }
+ });
+ }
+
+ async function initializeMermaid() {
+ try {
+ await waitForMermaid();
+
+ // 初始化 Mermaid 配置
+ window.mermaid.initialize({
+ startOnLoad: false,
+ theme: "default",
+ themeVariables: {
+ fontFamily: "inherit",
+ fontSize: "16px",
+ },
+ securityLevel: "loose",
+ // 添加错误处理配置
+ errorLevel: "warn",
+ logLevel: "error",
+ });
+
+ // 渲染所有 Mermaid 图表
+ await renderMermaidDiagrams();
+ } catch (error) {
+ console.error("Failed to initialize Mermaid:", error);
+ // 如果初始化失败，尝试重新加载
+ if (retryCount < MAX_RETRIES) {
+ retryCount++;
+ setTimeout(() => initializeMermaid(), RETRY_DELAY * retryCount);
+ }
+ }
+ }
+
+ async function renderMermaidDiagrams() {
+ // 防止并发渲染
+ if (isRendering) {
+ return;
+ }
+
+ // 检查 Mermaid 是否可用
+ if (!window.mermaid || typeof window.mermaid.render !== "function") {
+ console.warn("Mermaid not available, skipping render");
+ return;
+ }
+
+ isRendering = true;
+
+ try {
+ const mermaidElements = document.querySelectorAll(
+ ".mermaid[data-mermaid-code]",
+ );
+
+ if (mermaidElements.length === 0) {
+ isRendering = false;
+ return;
+ }
+
+ // 延迟检测主题，确保 DOM 已经更新
+ await new Promise((resolve) => setTimeout(resolve, 100));
+
+ const htmlElement = document.documentElement;
+ const isDark = htmlElement.classList.contains("dark");
+ const theme = isDark ? "dark" : "default";
+
+ // 更新 Mermaid 主题（只需要更新一次）
+ window.mermaid.initialize({
+ startOnLoad: false,
+ theme: theme,
+ themeVariables: {
+ fontFamily: "inherit",
+ fontSize: "16px",
+ // 强制应用主题变量
+ primaryColor: isDark ? "#ffffff" : "#000000",
+ primaryTextColor: isDark ? "#ffffff" : "#000000",
+ primaryBorderColor: isDark ? "#ffffff" : "#000000",
+ lineColor: isDark ? "#ffffff" : "#000000",
+ secondaryColor: isDark ? "#333333" : "#f0f0f0",
+ tertiaryColor: isDark ? "#555555" : "#e0e0e0",
+ },
+ securityLevel: "loose",
+ errorLevel: "warn",
+ logLevel: "error",
+ });
+
+ // 批量渲染所有图表，添加重试机制
+ const renderPromises = Array.from(mermaidElements).map(
+ async (element, index) => {
+ let attempts = 0;
+ const maxAttempts = 3;
+
+ while (attempts < maxAttempts) {
+ try {
+ const code = element.getAttribute("data-mermaid-code");
+
+ if (!code) {
+ break;
+ }
+
+ // 显示加载状态
+ element.innerHTML =
+ 'Rendering diagram...
';
+
+ // 渲染图表
+ const { svg } = await window.mermaid.render(
+ `mermaid-${Date.now()}-${index}-${attempts}`,
+ code,
+ );
+
+ element.innerHTML = svg;
+
+ // 添加响应式支持
+ const svgElement = element.querySelector("svg");
+ if (svgElement) {
+ svgElement.setAttribute("width", "100%");
+ svgElement.removeAttribute("height");
+ svgElement.style.maxWidth = "100%";
+ svgElement.style.height = "auto";
+
+ // 强制应用样式
+ if (isDark) {
+ svgElement.style.filter = "brightness(0.9) contrast(1.1)";
+ } else {
+ svgElement.style.filter = "none";
+ }
+ }
+
+ // 渲染成功，跳出重试循环
+ break;
+ } catch (error) {
+ attempts++;
+ console.warn(
+ `Mermaid rendering attempt ${attempts} failed for element ${index}:`,
+ error,
+ );
+
+ if (attempts >= maxAttempts) {
+ console.error(
+ `Failed to render Mermaid diagram after ${maxAttempts} attempts:`,
+ error,
+ );
+ element.innerHTML = `
+
+
Failed to render diagram after ${maxAttempts} attempts.
+
+ Retry Page
+
+
:::")',
+ );
+
+ let label = null;
+ if (Object.hasOwn(Object(properties), "has-directive-label")) {
+ label = children[0]; // The first child is the label
+ // biome-ignore lint/style/noParameterAssign:
+ children = children.slice(1);
+ label.tagName = "div"; // Change the tag to
+ }
+
+ return h("blockquote", { class: `admonition bdm-${type}` }, [
+ h("span", { class: "bdm-title" }, label ? label : type.toUpperCase()),
+ ...children,
+ ]);
+}
diff --git a/src/plugins/rehype-component-github-card.mjs b/src/plugins/rehype-component-github-card.mjs
new file mode 100644
index 0000000..50d1851
--- /dev/null
+++ b/src/plugins/rehype-component-github-card.mjs
@@ -0,0 +1,95 @@
+///
+import { h } from "hastscript";
+
+/**
+ * Creates a GitHub Card component.
+ *
+ * @param {Object} properties - The properties of the component.
+ * @param {string} properties.repo - The GitHub repository in the format "owner/repo".
+ * @param {import('mdast').RootContent[]} children - The children elements of the component.
+ * @returns {import('mdast').Parent} The created GitHub Card component.
+ */
+export function GithubCardComponent(properties, children) {
+ if (Array.isArray(children) && children.length !== 0)
+ return h("div", { class: "hidden" }, [
+ 'Invalid directive. ("github" directive must be leaf type "::github{repo="owner/repo"}")',
+ ]);
+
+ if (!properties.repo || !properties.repo.includes("/"))
+ return h(
+ "div",
+ { class: "hidden" },
+ 'Invalid repository. ("repo" attributte must be in the format "owner/repo")',
+ );
+
+ const repo = properties.repo;
+ const cardUuid = `GC${Math.random().toString(36).slice(-6)}`; // Collisions are not important
+
+ const nAvatar = h(`div#${cardUuid}-avatar`, { class: "gc-avatar" });
+ const nLanguage = h(
+ `span#${cardUuid}-language`,
+ { class: "gc-language" },
+ "Waiting...",
+ );
+
+ const nTitle = h("div", { class: "gc-titlebar" }, [
+ h("div", { class: "gc-titlebar-left" }, [
+ h("div", { class: "gc-owner" }, [
+ nAvatar,
+ h("div", { class: "gc-user" }, repo.split("/")[0]),
+ ]),
+ h("div", { class: "gc-divider" }, "/"),
+ h("div", { class: "gc-repo" }, repo.split("/")[1]),
+ ]),
+ h("div", { class: "github-logo" }),
+ ]);
+
+ const nDescription = h(
+ `div#${cardUuid}-description`,
+ { class: "gc-description" },
+ "Waiting for api.github.com...",
+ );
+
+ const nStars = h(`div#${cardUuid}-stars`, { class: "gc-stars" }, "00K");
+ const nForks = h(`div#${cardUuid}-forks`, { class: "gc-forks" }, "0K");
+ const nLicense = h(`div#${cardUuid}-license`, { class: "gc-license" }, "0K");
+
+ const nScript = h(
+ `script#${cardUuid}-script`,
+ { type: "text/javascript", defer: true },
+ `
+ fetch('https://api.github.com/repos/${repo}', { referrerPolicy: "no-referrer" }).then(response => response.json()).then(data => {
+ document.getElementById('${cardUuid}-description').innerText = data.description?.replace(/:[a-zA-Z0-9_]+:/g, '') || "Description not set";
+ document.getElementById('${cardUuid}-language').innerText = data.language;
+ document.getElementById('${cardUuid}-forks').innerText = Intl.NumberFormat('en-us', { notation: "compact", maximumFractionDigits: 1 }).format(data.forks).replaceAll("\u202f", '');
+ document.getElementById('${cardUuid}-stars').innerText = Intl.NumberFormat('en-us', { notation: "compact", maximumFractionDigits: 1 }).format(data.stargazers_count).replaceAll("\u202f", '');
+ const avatarEl = document.getElementById('${cardUuid}-avatar');
+ avatarEl.style.backgroundImage = 'url(' + data.owner.avatar_url + '&s=32' + ')';
+ avatarEl.style.backgroundColor = 'transparent';
+ document.getElementById('${cardUuid}-license').innerText = data.license?.spdx_id || "no-license";
+ document.getElementById('${cardUuid}-card').classList.remove("fetch-waiting");
+ console.log("[GITHUB-CARD] Loaded card for ${repo} | ${cardUuid}.")
+ }).catch(err => {
+ const c = document.getElementById('${cardUuid}-card');
+ c?.classList.add("fetch-error");
+ console.warn("[GITHUB-CARD] (Error) Loading card for ${repo} | ${cardUuid}.")
+ })
+ `,
+ );
+
+ return h(
+ `a#${cardUuid}-card`,
+ {
+ class: "card-github fetch-waiting no-styling",
+ href: `https://github.com/${repo}`,
+ target: "_blank",
+ repo,
+ },
+ [
+ nTitle,
+ nDescription,
+ h("div", { class: "gc-infobar" }, [nStars, nForks, nLicense, nLanguage]),
+ nScript,
+ ],
+ );
+}
diff --git a/src/plugins/rehype-email-protection.mjs b/src/plugins/rehype-email-protection.mjs
new file mode 100644
index 0000000..e72841c
--- /dev/null
+++ b/src/plugins/rehype-email-protection.mjs
@@ -0,0 +1,129 @@
+import { h } from "hastscript";
+import { visit } from "unist-util-visit";
+
+// 来自霞葉： https://kasuha.com/posts/fuwari-enhance-ep1/
+
+/**
+ * 加密 mailto 链接以保护邮箱地址免受爬虫抓取的 rehype 插件
+ *
+ * @param {Object} options - 插件选项
+ * @param {string} [options.method='base64'] - 编码方式: 'base64' or 'rot13'
+ * @returns {Function} A transformer function for the rehype plugin
+ */
+export default function rehypeEmailProtection(options = {}) {
+ const { method = "base64" } = options;
+
+ // Base64 编码函数
+ const base64Encode = (str) => {
+ return btoa(str);
+ };
+
+ // ROT13 编码函数
+ const rot13Encode = (str) => {
+ return str.replace(/[a-zA-Z]/g, (char) => {
+ const start = char <= "Z" ? 65 : 97;
+ return String.fromCharCode(
+ ((char.charCodeAt(0) - start + 13) % 26) + start,
+ );
+ });
+ };
+
+ // 根据选择的方法进行编码
+ const encode = (str) => {
+ return method === "rot13" ? rot13Encode(str) : base64Encode(str);
+ };
+
+ // 生成解码 JavaScript 代码
+ const generateDecodeScript = () => {
+ if (method === "rot13") {
+ return `
+ function decodeRot13(str) {
+ return str.replace(/[a-zA-Z]/g, function(char) {
+ const start = char <= 'Z' ? 65 : 97;
+ return String.fromCharCode(((char.charCodeAt(0) - start + 13) % 26) + start);
+ });
+ }
+ const decodedEmail = decodeRot13(encodedEmail);
+ `;
+ }
+ return `
+ const decodedEmail = atob(encodedEmail);
+ `;
+ };
+
+ return (tree) => {
+ let hasEmailLinks = false;
+
+ visit(tree, "element", (node, index, parent) => {
+ // 只处理 a 元素
+ if (node.tagName !== "a") {
+ return;
+ }
+
+ // 检查是否是 mailto 链接
+ const href = node.properties?.href;
+ if (!href || !href.startsWith("mailto:")) {
+ return;
+ }
+
+ hasEmailLinks = true;
+
+ // 提取邮箱地址
+ const email = href.replace("mailto:", "");
+ const encodedEmail = encode(email);
+
+ // 创建加密的链接元素（移除原始的 href 属性，避免重复定义）
+ const otherProperties = { ...node.properties };
+ delete otherProperties.href;
+ const protectedLink = h(
+ "a",
+ {
+ ...otherProperties,
+ href: "#",
+ "data-encoded-email": encodedEmail,
+ onclick: `
+ (function() {
+ const encodedEmail = this.getAttribute('data-encoded-email');
+ ${generateDecodeScript()}
+ this.href = 'mailto:' + decodedEmail;
+ this.removeAttribute('data-encoded-email');
+ this.removeAttribute('onclick');
+ this.click();
+ return false;
+ }).call(this);
+ `
+ .replace(/\s+/g, " ")
+ .trim(),
+ },
+ node.children,
+ );
+
+ // 替换当前的 a 节点
+ if (parent && typeof index === "number") {
+ parent.children[index] = protectedLink;
+ }
+ });
+
+ // 如果页面中有邮箱链接，添加样式
+ if (hasEmailLinks) {
+ visit(tree, "element", (node) => {
+ if (node.tagName === "head") {
+ const style = h(
+ "style",
+ `
+ a[data-encoded-email] {
+ cursor: pointer;
+ text-decoration: underline;
+ color: inherit;
+ }
+ a[data-encoded-email]:hover {
+ text-decoration: underline;
+ }
+ `.trim(),
+ );
+ node.children.push(style);
+ }
+ });
+ }
+ };
+}
diff --git a/src/plugins/rehype-figure.mjs b/src/plugins/rehype-figure.mjs
new file mode 100644
index 0000000..dc84ba4
--- /dev/null
+++ b/src/plugins/rehype-figure.mjs
@@ -0,0 +1,46 @@
+import { h } from "hastscript";
+import { visit } from "unist-util-visit";
+
+// 来自霞葉： https://kasuha.com/posts/fuwari-enhance-ep1/
+
+/**
+ * 将带有 alt 文本的图片转换为包含 figcaption 的 figure 元素的 rehype 插件
+ *
+ * @returns {Function} A transformer function for the rehype plugin
+ */
+export default function rehypeFigure() {
+ return (tree) => {
+ visit(tree, "element", (node, index, parent) => {
+ // 只处理 img 元素
+ if (node.tagName !== "img") {
+ return;
+ }
+
+ // 获取 alt 属性
+ const alt = node.properties?.alt;
+
+ // 如果没有 alt 属性或 alt 为空字符串，则保持原样
+ if (!alt || alt.trim() === "") {
+ return;
+ }
+
+ // 创建 figure 元素，包含原始的 img 和居中的 figcaption
+ const figure = h("figure", [
+ // 复制原始的 img 节点，但移除 alt 属性避免重复显示
+ h("img", {
+ ...node.properties,
+ alt: "", // 清空 alt 属性，因为现在有 figcaption 了
+ }),
+ h("figcaption", alt),
+ ]);
+
+ // 居中显示
+ const centerFigure = h("center", figure);
+
+ // 替换当前的 img 节点为 figure 节点
+ if (parent && typeof index === "number") {
+ parent.children[index] = centerFigure;
+ }
+ });
+ };
+}
diff --git a/src/plugins/rehype-mermaid.mjs b/src/plugins/rehype-mermaid.mjs
new file mode 100644
index 0000000..4946afc
--- /dev/null
+++ b/src/plugins/rehype-mermaid.mjs
@@ -0,0 +1,52 @@
+import { h } from "hastscript";
+import { visit } from "unist-util-visit";
+import mermaidRenderScript from "./mermaid-render-script.js?raw";
+
+export function rehypeMermaid() {
+ return (tree) => {
+ visit(tree, "element", (node) => {
+ if (
+ node.tagName === "div" &&
+ node.properties &&
+ node.properties.className &&
+ node.properties.className.includes("mermaid-container")
+ ) {
+ const mermaidCode = node.properties["data-mermaid-code"] || "";
+ const mermaidId = `mermaid-${Math.random().toString(36).slice(-6)}`;
+
+ // 创建 Mermaid 容器
+ const mermaidContainer = h(
+ "div",
+ {
+ class: "mermaid-wrapper",
+ id: mermaidId,
+ },
+ [
+ h(
+ "div",
+ {
+ class: "mermaid",
+ "data-mermaid-code": mermaidCode,
+ },
+ mermaidCode,
+ ),
+ ],
+ );
+
+ // 创建客户端渲染脚本
+ const renderScript = h(
+ "script",
+ {
+ type: "text/javascript",
+ },
+ mermaidRenderScript,
+ );
+
+ // 替换原始节点
+ node.tagName = "div";
+ node.properties = { class: "mermaid-diagram-container" };
+ node.children = [mermaidContainer, renderScript];
+ }
+ });
+ };
+}
diff --git a/src/plugins/remark-directive-rehype.js b/src/plugins/remark-directive-rehype.js
new file mode 100644
index 0000000..174cceb
--- /dev/null
+++ b/src/plugins/remark-directive-rehype.js
@@ -0,0 +1,30 @@
+import { h } from "hastscript";
+import { visit } from "unist-util-visit";
+
+export function parseDirectiveNode() {
+ return (tree, { _data }) => {
+ visit(tree, (node) => {
+ if (
+ node.type === "containerDirective" ||
+ node.type === "leafDirective" ||
+ node.type === "textDirective"
+ ) {
+ // biome-ignore lint/suspicious/noAssignInExpressions:
+ const data = node.data || (node.data = {});
+ node.attributes = node.attributes || {};
+ if (
+ node.children.length > 0 &&
+ node.children[0].data &&
+ node.children[0].data.directiveLabel
+ ) {
+ // Add a flag to the node to indicate that it has a directive label
+ node.attributes["has-directive-label"] = true;
+ }
+ const hast = h(node.name, node.attributes);
+
+ data.hName = hast.tagName;
+ data.hProperties = hast.properties;
+ }
+ });
+ };
+}
diff --git a/src/plugins/remark-excerpt.js b/src/plugins/remark-excerpt.js
new file mode 100644
index 0000000..360fe83
--- /dev/null
+++ b/src/plugins/remark-excerpt.js
@@ -0,0 +1,17 @@
+// biome-ignore lint/suspicious/noShadowRestrictedNames:
+import { toString } from "mdast-util-to-string";
+
+/* Use the post's first paragraph as the excerpt */
+export function remarkExcerpt() {
+ return (tree, { data }) => {
+ let excerpt = "";
+ for (const node of tree.children) {
+ if (node.type !== "paragraph") {
+ continue;
+ }
+ excerpt = toString(node);
+ break;
+ }
+ data.astro.frontmatter.excerpt = excerpt;
+ };
+}
diff --git a/src/plugins/remark-mermaid.js b/src/plugins/remark-mermaid.js
new file mode 100644
index 0000000..b0c5dd2
--- /dev/null
+++ b/src/plugins/remark-mermaid.js
@@ -0,0 +1,19 @@
+import { visit } from "unist-util-visit";
+
+export function remarkMermaid() {
+ return (tree) => {
+ visit(tree, "code", (node) => {
+ if (node.lang === "mermaid") {
+ // 将 mermaid 代码块转换为自定义节点类型
+ node.type = "mermaid";
+ node.data = {
+ hName: "div",
+ hProperties: {
+ className: ["mermaid-container"],
+ "data-mermaid-code": node.value,
+ },
+ };
+ }
+ });
+ };
+}
diff --git a/src/plugins/remark-reading-time.mjs b/src/plugins/remark-reading-time.mjs
new file mode 100644
index 0000000..4813f03
--- /dev/null
+++ b/src/plugins/remark-reading-time.mjs
@@ -0,0 +1,15 @@
+// biome-ignore lint/suspicious/noShadowRestrictedNames:
+import { toString } from "mdast-util-to-string";
+import getReadingTime from "reading-time";
+
+export function remarkReadingTime() {
+ return (tree, { data }) => {
+ const textOnPage = toString(tree);
+ const readingTime = getReadingTime(textOnPage);
+ data.astro.frontmatter.minutes = Math.max(
+ 1,
+ Math.round(readingTime.minutes),
+ );
+ data.astro.frontmatter.words = readingTime.words;
+ };
+}
diff --git a/src/scripts/index-to-meilisearch.mts b/src/scripts/index-to-meilisearch.mts
new file mode 100644
index 0000000..f42a4de
--- /dev/null
+++ b/src/scripts/index-to-meilisearch.mts
@@ -0,0 +1,145 @@
+import fs from "node:fs/promises";
+import path from "node:path";
+import { pathToFileURL } from "node:url";
+import { glob } from "glob";
+import matter from "gray-matter";
+import { MeiliSearch } from "meilisearch";
+import { navBarSearchConfig } from "../config/index.ts";
+
+class MeiliSearchIndexer {
+ private client: MeiliSearch;
+
+ constructor(
+ private MEILI_HOST: string,
+ private MEILI_MASTER_KEY: string | undefined,
+ private INDEX_NAME: string,
+ private contentDir: string,
+ ) {
+ if (!MEILI_HOST || !INDEX_NAME || !contentDir) {
+ console.error(
+ "Error: MeiliSearch configuration is incomplete. Please check your settings.",
+ );
+ process.exit(1);
+ }
+ if (!MEILI_MASTER_KEY) {
+ console.error(
+ "Error: MeiliSearch master key is missing. Please provide the MEILI_MASTER_KEY environment variable.",
+ );
+ process.exit(1);
+ }
+ this.client = new MeiliSearch({
+ host: this.MEILI_HOST,
+ apiKey: this.MEILI_MASTER_KEY,
+ });
+ console.log("Running MeiliSearch Indexer:", MEILI_HOST);
+ }
+
+ async getDocuments() {
+ // glob 模式以递归搜索所有子目录
+ const files = await glob(`${this.contentDir}/**/*.{md,mdx}`);
+
+ return await Promise.all(
+ files.map(async (file, idx) => {
+ const content = await fs.readFile(file, "utf-8");
+ const { data, content: body } = matter(content);
+
+ // 获取文件相对于 'src/content/posts' 的路径
+ const relativePath = path.relative(this.contentDir, file);
+
+ // 解析路径，得到目录(dir)和文件名(name)
+ const { dir, name } = path.parse(relativePath);
+
+ // 根据 Astro 规则生成 slug:
+ // - 如果文件名是 'index', slug 就是它的父目录路径。
+ // - 否则, slug 是 目录路径 + 文件名。
+ const slugPart = name === "index" ? dir : path.join(dir, name);
+
+ // 确保在 Windows 上也能正确生成 URL 路径（将 \ 替换为 /）
+ const finalSlug = slugPart.replace(/\\/g, "/");
+
+ const plainText = body
+ .replace(/```[\s\S]*?```/g, "")
+ .replace(/(^|\n)( {4,}|\t).*(\n|$)/g, "\n")
+ .replace(/`[^`]*`/g, "")
+ .replace(/---[\s\S]*?---/g, "")
+ .replace(/<[^>]+>/g, "")
+ .replace(/[#*_~[\]()\-+=>|{}]/g, "")
+ .replace(/\s+/g, " ")
+ .trim();
+
+ return {
+ id: idx,
+ slug: `/posts/${finalSlug}/`, // 完整的 URL 路径
+ title: data.title,
+ description: data.description || "",
+ content: plainText,
+ pubDate: data.published
+ ? new Date(data.published).getTime()
+ : Date.now(),
+ };
+ }),
+ );
+ }
+
+ async main() {
+ try {
+ // 删除旧索引
+ await this.client.deleteIndexIfExists(this.INDEX_NAME);
+ console.log(`Index '${this.INDEX_NAME}' deleted.`);
+
+ const documents = await this.getDocuments();
+ if (documents.length === 0) {
+ console.log("No documents found to index.");
+ return;
+ }
+ console.log(`Found ${documents.length} documents to index.`);
+
+ // 创建新索引
+ const index = this.client.index(this.INDEX_NAME);
+
+ // 更新配置
+ await index.updateSettings({
+ searchableAttributes: ["title", "content", "description"],
+ displayedAttributes: [
+ "title",
+ "description",
+ "content",
+ "pubDate",
+ "slug",
+ ],
+ sortableAttributes: ["pubDate"],
+ });
+ console.log("Index settings updated.");
+
+ await index.addDocuments(documents, { primaryKey: "id" });
+ console.log("MeiliSearch indexing completed successfully!");
+ } catch (error) {
+ console.error("Error during indexing:", error);
+ process.exit(1);
+ }
+ }
+}
+
+const isMain = import.meta.url === pathToFileURL(process.argv[1]).href;
+
+if (isMain) {
+ const { meiliSearchConfig } = navBarSearchConfig;
+ if (!meiliSearchConfig) {
+ console.error(
+ "Error: MeiliSearch configuration is missing in navBarConfig.",
+ );
+ process.exit(1);
+ }
+ const MEILI_MASTER_KEY = process.env.MEILI_MASTER_KEY;
+ const indexer = new MeiliSearchIndexer(
+ meiliSearchConfig.MEILI_HOST,
+ MEILI_MASTER_KEY,
+ meiliSearchConfig.INDEX_NAME,
+ meiliSearchConfig.CONTENT_DIR,
+ );
+
+ await indexer.main();
+ console.log("Indexing completed successfully.");
+}
+
+export default MeiliSearchIndexer;
diff --git a/src/scripts/theme-manager.js b/src/scripts/theme-manager.js
new file mode 100644
index 0000000..0dc56b7
--- /dev/null
+++ b/src/scripts/theme-manager.js
@@ -0,0 +1,92 @@
+// 主题管理脚本
+export function initThemeManager() {
+ const _DEFAULT_THEME = "LIGHT_MODE";
+ const LIGHT_MODE = "LIGHT_MODE";
+ const DARK_MODE = "DARK_MODE";
+ const SYSTEM_MODE = "SYSTEM_MODE";
+ const BANNER_HEIGHT_EXTEND = 30;
+ const _PAGE_WIDTH = 80;
+ const configHue = 200; // 从配置中获取
+ const defaultMode = "system"; // 从配置中获取
+
+ // Load the theme from local storage, use defaultMode from config if not set
+ const theme = localStorage.getItem("theme") || defaultMode;
+
+ // Helper function to get system preference
+ function getSystemPreference() {
+ return window.matchMedia("(prefers-color-scheme: dark)").matches
+ ? DARK_MODE
+ : LIGHT_MODE;
+ }
+
+ // Resolve theme (convert system to actual theme)
+ function resolveTheme(themeValue) {
+ if (themeValue === SYSTEM_MODE) {
+ return getSystemPreference();
+ }
+ return themeValue;
+ }
+
+ const resolvedTheme = resolveTheme(theme);
+ let isDark = false;
+
+ switch (resolvedTheme) {
+ case LIGHT_MODE:
+ document.documentElement.classList.remove("dark");
+ isDark = false;
+ break;
+ case DARK_MODE:
+ document.documentElement.classList.add("dark");
+ isDark = true;
+ break;
+ }
+
+ // Setup system theme change listener if using system mode
+ if (theme === SYSTEM_MODE) {
+ const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+ const handleSystemThemeChange = (e) => {
+ const currentStoredTheme = localStorage.getItem("theme");
+ if (currentStoredTheme === SYSTEM_MODE) {
+ const newTheme = e.matches ? DARK_MODE : LIGHT_MODE;
+ const newIsDark = newTheme === DARK_MODE;
+
+ if (newIsDark) {
+ document.documentElement.classList.add("dark");
+ } else {
+ document.documentElement.classList.remove("dark");
+ }
+
+ const expressiveTheme = newIsDark ? "github-dark" : "github-light";
+ document.documentElement.setAttribute("data-theme", expressiveTheme);
+ }
+ };
+
+ // Add listener for system theme changes
+ mediaQuery.addListener(handleSystemThemeChange);
+ }
+
+ // Set the theme for Expressive Code based on current mode
+ const expressiveTheme = isDark ? "github-dark" : "github-light";
+ document.documentElement.setAttribute("data-theme", expressiveTheme);
+
+ // 确保主题正确应用 - 解决代码块渲染问题
+ // 使用 requestAnimationFrame 确保在下一帧检查主题状态
+ requestAnimationFrame(() => {
+ const currentTheme = document.documentElement.getAttribute("data-theme");
+ if (currentTheme !== expressiveTheme) {
+ document.documentElement.setAttribute("data-theme", expressiveTheme);
+ }
+ });
+
+ // Load the hue from local storage
+ const hue = localStorage.getItem("hue") || configHue;
+ document.documentElement.style.setProperty("--hue", hue);
+
+ // calculate the --banner-height-extend, which needs to be a multiple of 4 to avoid blurry text
+ let offset = Math.floor(window.innerHeight * (BANNER_HEIGHT_EXTEND / 100));
+ offset = offset - (offset % 4);
+ document.documentElement.style.setProperty(
+ "--banner-height-extend",
+ `${offset}px`,
+ );
+}
diff --git a/src/styles/animation-enhancements.css b/src/styles/animation-enhancements.css
new file mode 100644
index 0000000..7e22a9e
--- /dev/null
+++ b/src/styles/animation-enhancements.css
@@ -0,0 +1,252 @@
+/* 页面切换状态类 */
+html.is-leaving .transition-leaving {
+ transform: translateY(-1rem);
+ opacity: 0;
+}
+
+html.is-entering .transition-main {
+ transform: translateY(1.5rem);
+ opacity: 0;
+}
+
+/* 离开动画类 */
+.animate-leave {
+ transform: translateY(-1rem) !important;
+ opacity: 0 !important;
+ transition:
+ transform 250ms cubic-bezier(0.4, 0, 0.6, 1),
+ opacity 250ms cubic-bezier(0.4, 0, 0.6, 1) !important;
+}
+
+/* 增强的组件动画 */
+.enhanced-fade-in {
+ opacity: 0;
+ transform: translateY(1.5rem) scale(0.98);
+ transition:
+ opacity 350ms cubic-bezier(0.4, 0, 0.2, 1),
+ transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.enhanced-fade-in.animate {
+ opacity: 1;
+ transform: translateY(0) scale(1);
+}
+
+/* 侧边栏动画 */
+.sidebar-animate {
+ opacity: 0;
+ transform: translateX(-2rem);
+ transition:
+ opacity 300ms cubic-bezier(0.4, 0, 0.2, 1),
+ transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.sidebar-animate.animate {
+ opacity: 1;
+ transform: translateX(0);
+}
+
+/* 卡片动画 */
+.card-animate {
+ opacity: 0;
+ transform: translateY(2rem) scale(0.95);
+ transition:
+ opacity 400ms cubic-bezier(0.4, 0, 0.2, 1),
+ transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.card-animate.animate {
+ opacity: 1;
+ transform: translateY(0) scale(1);
+}
+
+/* 文章内容动画 */
+.post-content-animate {
+ opacity: 0;
+ transform: translateY(1rem);
+ transition:
+ opacity 320ms cubic-bezier(0.4, 0, 0.2, 1),
+ transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.post-content-animate.animate {
+ opacity: 1;
+ transform: translateY(0);
+}
+
+/* 导航栏动画增强 */
+.navbar-animate {
+ opacity: 0;
+ transform: translateY(-1rem);
+ transition:
+ opacity 280ms cubic-bezier(0.4, 0, 0.2, 1),
+ transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.navbar-animate.animate {
+ opacity: 1;
+ transform: translateY(0);
+}
+
+/* 页脚动画 */
+.footer-animate {
+ opacity: 0;
+ transform: translateY(1rem);
+ transition:
+ opacity 300ms cubic-bezier(0.4, 0, 0.2, 1),
+ transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.footer-animate.animate {
+ opacity: 1;
+ transform: translateY(0);
+}
+
+/* 按钮悬停动画增强 */
+.button-enhance {
+ transition:
+ transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
+ box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.button-enhance:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.button-enhance:active {
+ transform: translateY(0);
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+/* 链接动画增强 */
+.link-enhance {
+ position: relative;
+ transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.link-enhance::after {
+ content: '';
+ position: absolute;
+ bottom: -2px;
+ left: 0;
+ width: 0;
+ height: 2px;
+ background: currentColor;
+ transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.link-enhance:hover::after {
+ width: 100%;
+}
+
+/* 图片加载动画 */
+.image-animate {
+ opacity: 0;
+ transform: scale(1.05);
+ transition:
+ opacity 400ms cubic-bezier(0.4, 0, 0.2, 1),
+ transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.image-animate.loaded {
+ opacity: 1;
+ transform: scale(1);
+}
+
+/* 搜索框动画 */
+.search-animate {
+ transform: scale(0.95);
+ opacity: 0;
+ transition:
+ transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
+ opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.search-animate.animate {
+ transform: scale(1);
+ opacity: 1;
+}
+
+/* 标签云动画 */
+.tag-animate {
+ opacity: 0;
+ transform: translateY(0.5rem) scale(0.9);
+ transition:
+ opacity 200ms cubic-bezier(0.4, 0, 0.2, 1),
+ transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.tag-animate.animate {
+ opacity: 1;
+ transform: translateY(0) scale(1);
+}
+
+/* 分页动画 */
+.pagination-animate {
+ opacity: 0;
+ transform: translateY(1rem);
+ transition:
+ opacity 300ms cubic-bezier(0.4, 0, 0.2, 1),
+ transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.pagination-animate.animate {
+ opacity: 1;
+ transform: translateY(0);
+}
+
+/* 减少动画的媒体查询 */
+@media (prefers-reduced-motion: reduce) {
+ *,
+ *::before,
+ *::after {
+ animation-duration: 0.01ms !important;
+ animation-iteration-count: 1 !important;
+ transition-duration: 0.01ms !important;
+ }
+
+ /* 保留TOC的平滑滚动，但减少其他滚动动画 */
+ html {
+ scroll-behavior: auto !important;
+ }
+
+ /* 确保TOC组件仍然有平滑滚动 */
+ table-of-contents#toc {
+ scroll-behavior: smooth !important;
+ }
+}
+
+/* 高对比度模式支持 */
+@media (prefers-contrast: high) {
+ .enhanced-fade-in,
+ .card-animate,
+ .post-content-animate {
+ border: 1px solid currentColor;
+ }
+}
+
+/* 暗色模式动画调整 */
+@media (prefers-color-scheme: dark) {
+ .button-enhance:hover {
+ box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
+ }
+
+ .button-enhance:active {
+ box-shadow: 0 2px 4px rgba(255, 255, 255, 0.05);
+ }
+}
+
+/* 性能优化 */
+.animate-gpu {
+ will-change: transform, opacity;
+ backface-visibility: hidden;
+ -webkit-backface-visibility: hidden;
+ transform: translateZ(0);
+ -webkit-transform: translateZ(0);
+}
+
+/* 动画完成后清理 */
+.animation-complete {
+ will-change: auto;
+}
\ No newline at end of file
diff --git a/src/styles/expressive-code.css b/src/styles/expressive-code.css
new file mode 100644
index 0000000..a5045e1
--- /dev/null
+++ b/src/styles/expressive-code.css
@@ -0,0 +1,9 @@
+.expressive-code {
+ .frame {
+ @apply !shadow-none;
+ }
+
+ .title {
+ font-family: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+ }
+}
diff --git a/src/styles/fancybox-custom.css b/src/styles/fancybox-custom.css
new file mode 100644
index 0000000..4b6b551
--- /dev/null
+++ b/src/styles/fancybox-custom.css
@@ -0,0 +1,121 @@
+/* Fancybox 自定义样式 */
+.fancybox__container {
+ --fancybox-bg: rgba(0, 0, 0, 0.9);
+ --fancybox-thumbs-width: 64px;
+ --fancybox-thumbs-ratio: 1;
+ --fancybox-thumbs-border-radius: 4px;
+}
+
+.fancybox__toolbar {
+ background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent);
+ padding: 8px;
+ backdrop-filter: blur(4px);
+}
+
+.fancybox__caption {
+ background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
+ color: white;
+ font-size: 1rem;
+ padding: 1rem;
+ text-align: center;
+ backdrop-filter: blur(4px);
+ border-radius: 8px;
+ margin: 0 1rem 1rem 1rem;
+}
+
+.fancybox__nav {
+ --carousel-button-svg-width: 24px;
+ --carousel-button-svg-height: 24px;
+}
+
+.fancybox__thumbs {
+ background: rgba(0, 0, 0, 0.7);
+ padding: 2px;
+ border-radius: 8px;
+ backdrop-filter: blur(4px);
+}
+
+.fancybox__thumb {
+ border-radius: 4px;
+ overflow: hidden;
+ border: 2px solid transparent;
+ transition: all 0.2s ease;
+}
+
+.fancybox__thumb.is-loading {
+ background: rgba(255, 255, 255, 0.1);
+}
+
+.fancybox__thumb:hover {
+ border-color: rgba(255, 255, 255, 0.5);
+ transform: scale(1.05);
+}
+
+.fancybox__thumb.is-active {
+ border-color: #fff;
+}
+
+/* 按钮样式 */
+.fancybox__button {
+ background: rgba(0, 0, 0, 0.5);
+ border-radius: 50%;
+ width: 44px;
+ height: 44px;
+ transition: all 0.2s ease;
+ backdrop-filter: blur(4px);
+ border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.fancybox__button:hover {
+ background: rgba(0, 0, 0, 0.7);
+ transform: scale(1.1);
+ border-color: rgba(255, 255, 255, 0.3);
+}
+
+.fancybox__button svg {
+ filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
+}
+
+.fancybox__infobar {
+ color: white;
+ font-size: 0.9rem;
+ padding: 0 8px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+ .fancybox__toolbar {
+ padding: 4px;
+ }
+
+ .fancybox__button {
+ width: 36px;
+ height: 36px;
+ }
+
+ .fancybox__caption {
+ font-size: 0.9rem;
+ padding: 0.5rem;
+ margin: 0 0.5rem 0.5rem 0.5rem;
+ }
+
+ .fancybox__thumbs {
+ --fancybox-thumbs-width: 48px;
+ }
+}
+
+@media (max-width: 480px) {
+ .fancybox__button {
+ width: 32px;
+ height: 32px;
+ }
+
+ .fancybox__caption {
+ font-size: 0.8rem;
+ padding: 0.4rem;
+ }
+
+ .fancybox__thumbs {
+ --fancybox-thumbs-width: 40px;
+ }
+}
\ No newline at end of file
diff --git a/src/styles/layout-styles.css b/src/styles/layout-styles.css
new file mode 100644
index 0000000..a9387b0
--- /dev/null
+++ b/src/styles/layout-styles.css
@@ -0,0 +1,730 @@
+/* Layout specific styles */
+
+/* Banner text styles */
+.banner-title {
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
+ animation: banner-fadeInUp 1s ease-out;
+ font-weight: bold;
+}
+
+.banner-subtitle {
+ text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
+ animation: banner-fadeInUp 1s ease-out 0.3s both;
+}
+
+@keyframes banner-fadeInUp {
+ from {
+ opacity: 0;
+ transform: translateY(30px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+/* 移动端无侧边栏布局优化 */
+@media (max-width: 768px) {
+ .mobile-no-sidebar {
+ display: block !important;
+ width: 100% !important;
+ }
+
+ .mobile-no-sidebar main {
+ width: 100% !important;
+ max-width: 100% !important;
+ margin: 0 !important;
+ padding-left: 0 !important;
+ padding-right: 0 !important;
+ }
+
+ .mobile-no-sidebar #content-wrapper {
+ width: 100% !important;
+ max-width: 100% !important;
+ margin: 0 !important;
+ }
+}
+
+/* 移动端横幅优化 - 小屏手机 (320px - 480px) */
+@media (max-width: 480px) {
+ /* Banner wrapper 高度优化 - 优先保持banner显示 - 仅在首页应用 */
+ #banner-wrapper:not(.mobile-hide-banner) {
+ height: 70vh !important; /* 保持较大高度优先显示banner */
+ min-height: 450px;
+ max-height: none; /* 移除最大高度限制 */
+ top: 0 !important; /* 移动端从顶部开始，避免被导航栏覆盖 */
+ }
+
+ /* 主内容区域位置调整 - 向上移动以部分遮挡banner */
+ /* 仅在 banner 模式下应用，其他模式（全屏壁纸/纯色）使用默认的 5.5rem */
+ body.enable-banner .absolute.w-full.z-30:not(.no-banner-layout):not(.mobile-main-no-banner) {
+ top: 65vh !important; /* 向上移动5vh，部分遮挡banner */
+ min-height: calc(100vh - 65vh) !important;
+ }
+
+ /* 横幅文本覆盖层优化 */
+ .banner-text-overlay {
+ align-items: center !important; /* 垂直居中 */
+ justify-content: center !important; /* 水平居中 */
+ padding: 1rem !important;
+ text-align: center !important; /* 文字居中对齐 */
+ }
+
+ /* 文本容器优化 */
+ .banner-text-overlay > div {
+ margin-bottom: 0 !important; /* 移除底部边距，保持居中 */
+ width: 95% !important; /* 增加文本宽度利用率 */
+ text-align: center !important; /* 确保文字居中 */
+ }
+
+ /* 标题字体优化 */
+ .banner-title {
+ font-size: 3.2rem !important; /* 增大字体大小 */
+ line-height: 1.1 !important;
+ margin-bottom: 0.5rem !important;
+ text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8) !important; /* 增强阴影 */
+ }
+
+ /* 副标题字体优化 */
+ .banner-subtitle {
+ font-size: 1rem !important;
+ line-height: 1.3 !important;
+ text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7) !important;
+ }
+
+ /* 波浪效果高度调整 - 与文章列表提升同步 */
+ .waves {
+ height: 13vh !important;
+ min-height: 100px !important;
+ max-height: 176px !important;
+ }
+}
+
+/* 移动端横幅优化 - 大屏手机 (481px - 640px) */
+@media (min-width: 481px) and (max-width: 640px) {
+ /* Banner wrapper 高度优化 - 优先保持banner显示 - 仅在首页应用 */
+ #banner-wrapper:not(.mobile-hide-banner) {
+ height: 75vh !important;
+ min-height: 500px;
+ max-height: none; /* 移除最大高度限制 */
+ top: 0 !important; /* 移动端从顶部开始，避免被导航栏覆盖 */
+ }
+
+ /* 主内容区域位置调整 - 向上移动以部分遮挡banner */
+ /* 仅在 banner 模式下应用，其他模式（全屏壁纸/纯色）使用默认的 5.5rem */
+ body.enable-banner .absolute.w-full.z-30:not(.no-banner-layout):not(.mobile-main-no-banner) {
+ top: 70vh !important; /* 向上移动5vh，部分遮挡banner */
+ min-height: calc(100vh - 70vh) !important;
+ }
+
+ /* 横幅文本覆盖层优化 */
+ .banner-text-overlay {
+ align-items: center !important; /* 垂直居中 */
+ justify-content: center !important; /* 水平居中 */
+ padding: 1.5rem !important;
+ text-align: center !important; /* 文字居中对齐 */
+ }
+
+ /* 文本容器优化 */
+ .banner-text-overlay > div {
+ margin-bottom: 0 !important; /* 移除底部边距，保持居中 */
+ width: 90% !important;
+ text-align: center !important; /* 确保文字居中 */
+ }
+
+ /* 标题字体优化 */
+ .banner-title {
+ font-size: 3.8rem !important; /* 增大字体大小 */
+ line-height: 1.1 !important;
+ margin-bottom: 0.75rem !important;
+ text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8) !important;
+ }
+
+ /* 副标题字体优化 */
+ .banner-subtitle {
+ font-size: 1.125rem !important;
+ line-height: 1.4 !important;
+ text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7) !important;
+ }
+
+ /* 波浪效果高度调整 - 与文章列表提升同步 */
+ .waves {
+ height: 15vh !important;
+ min-height: 110px !important;
+ max-height: 166px !important;
+ }
+}
+
+/* 移动端横幅优化 - 超大屏手机/小平板 (641px - 767px) */
+@media (min-width: 641px) and (max-width: 767px) {
+ /* Banner wrapper 高度优化 - 仅在首页应用 */
+ #banner-wrapper:not(.mobile-hide-banner) {
+ height: 72vh !important;
+ min-height: 520px;
+ max-height: none; /* 移除最大高度限制 */
+ top: 0 !important; /* 移动端从顶部开始，避免被导航栏覆盖 */
+ }
+
+ /* 主内容区域位置调整 - 向上移动以部分遮挡banner */
+ /* 仅在 banner 模式下应用，其他模式（全屏壁纸/纯色）使用默认的 5.5rem */
+ body.enable-banner .absolute.w-full.z-30:not(.no-banner-layout):not(.mobile-main-no-banner) {
+ top: 67vh !important; /* 向上移动5vh，部分遮挡banner */
+ min-height: calc(100vh - 67vh) !important;
+ }
+
+ /* 横幅文本覆盖层优化 */
+ .banner-text-overlay {
+ align-items: center !important; /* 垂直居中 */
+ justify-content: center !important; /* 水平居中 */
+ padding: 1.75rem !important;
+ text-align: center !important; /* 文字居中对齐 */
+ }
+
+ /* 文本容器优化 */
+ .banner-text-overlay > div {
+ margin-bottom: 0 !important; /* 移除底部边距，保持居中 */
+ width: 88% !important;
+ text-align: center !important; /* 确保文字居中 */
+ }
+
+ /* 标题字体优化 */
+ .banner-title {
+ font-size: 3.9rem !important;
+ line-height: 1.1 !important;
+ margin-bottom: 0.85rem !important;
+ text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8) !important;
+ }
+
+ /* 副标题字体优化 */
+ .banner-subtitle {
+ font-size: 1.25rem !important;
+ line-height: 1.4 !important;
+ text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7) !important;
+ }
+
+ /* 波浪效果高度调整 - 与文章列表提升同步 */
+ .waves {
+ height: 16vh !important;
+ min-height: 115px !important;
+ max-height: 190px !important;
+ }
+}
+
+/* 平板设备横幅优化 (768px - 1023px) - Tailwind md 断点 */
+@media (min-width: 768px) and (max-width: 1023px) {
+ /* Banner wrapper 高度优化 - 仅在首页应用 */
+ #banner-wrapper:not(.mobile-hide-banner) {
+ height: 70vh !important;
+ min-height: 500px;
+ top: 0 !important; /* 移动端从顶部开始，避免被导航栏覆盖 */
+ }
+
+ /* 主内容区域位置调整 - 向上移动以部分遮挡banner */
+ /* 仅在 banner 模式下应用，其他模式（全屏壁纸/纯色）使用默认的 5.5rem */
+ body.enable-banner .absolute.w-full.z-30:not(.no-banner-layout):not(.mobile-main-no-banner) {
+ top: 65vh !important; /* 向上移动5vh，部分遮挡banner */
+ min-height: calc(100vh - 65vh) !important;
+ }
+
+ /* 横幅文本覆盖层优化 */
+ .banner-text-overlay {
+ align-items: center !important; /* 垂直居中 */
+ justify-content: center !important; /* 水平居中 */
+ padding: 2rem !important;
+ text-align: center !important; /* 文字居中对齐 */
+ }
+
+ /* 文本容器优化 */
+ .banner-text-overlay > div {
+ margin-bottom: 0 !important; /* 移除底部边距，保持居中 */
+ width: 85% !important;
+ text-align: center !important; /* 确保文字居中 */
+ }
+
+ /* 标题字体优化 */
+ .banner-title {
+ font-size: 4rem !important;
+ line-height: 1.1 !important;
+ margin-bottom: 1rem !important;
+ text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8) !important;
+ }
+
+ /* 副标题字体优化 */
+ .banner-subtitle {
+ font-size: 1.5rem !important;
+ line-height: 1.4 !important;
+ text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7) !important;
+ }
+
+ /* 波浪效果高度调整 - 与文章列表提升同步 */
+ .waves {
+ height: 17vh !important;
+ min-height: 120px !important;
+ max-height: 216px !important;
+ }
+}
+
+/* 桌面端保持居中 (1024px+) - Tailwind lg 断点 */
+@media (min-width: 1024px) {
+ .banner-text-overlay {
+ align-items: center !important; /* 垂直居中 */
+ justify-content: center !important; /* 水平居中 */
+ padding: 2rem !important;
+ text-align: center !important; /* 文字居中对齐 */
+ }
+
+ .banner-text-overlay > div {
+ margin-bottom: 0 !important;
+ width: 75% !important;
+ text-align: center !important; /* 确保文字居中 */
+ }
+
+ /* 背景图片优化 */
+ #banner img {
+ transition: transform 1s ease-out !important;
+ }
+
+ /* 波浪效果恢复默认 */
+ .waves {
+ height: 15vh !important;
+ min-height: 80px !important;
+ max-height: 150px !important;
+ }
+}
+
+/* 移动端图片优化 */
+@media (max-width: 1023px) {
+ /* 移动端背景图片优化 */
+ #banner img {
+ transition: transform 0.5s ease-out !important;
+ }
+
+ /* 移动端banner加载动画优化 */
+ .onload-animation-fade-in {
+ animation: mobile-fade-in 0.8s ease-out forwards !important;
+ }
+}
+
+/* 移动端专用淡入动画 - 与电脑端保持一致 */
+@keyframes mobile-fade-in {
+ 0% {
+ opacity: 0;
+ transform: scale(1.1);
+ }
+ 100% {
+ opacity: 1;
+ transform: scale(1); /* 与电脑端当前图片缩放保持一致 */
+ }
+}
+
+/* 平板和手机端非首页隐藏banner - 改进的分阶段动画 (1024px以下) */
+@media (max-width: 1023px) {
+ #banner-wrapper {
+ transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s ease-out;
+ transform-origin: top center;
+ /* 硬件加速优化 */
+ will-change: transform, opacity;
+ backface-visibility: hidden;
+ -webkit-backface-visibility: hidden;
+ transform: translateZ(0);
+ -webkit-transform: translateZ(0);
+ }
+
+ .mobile-hide-banner {
+ transform: translateY(-100%) translateZ(0) !important;
+ opacity: 0 !important;
+ pointer-events: none !important;
+ /* 快速消失 */
+ transition: transform 0.3s ease-in, opacity 0.2s ease-in !important;
+ }
+
+ /* 手机端非首页时主内容区域从顶部开始 - 延迟出现的动画 */
+ .absolute.w-full.z-30 {
+ transition: top 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;
+ /* 硬件加速优化 */
+ will-change: top;
+ /* 禁用transform以保证back to top 按钮可以显示
+ transform: translateZ(0);
+ -webkit-transform: translateZ(0);
+ */
+ }
+
+ .absolute.w-full.z-30.mobile-main-no-banner {
+ top: 5.5rem !important;
+ min-height: calc(100vh - 5.5rem) !important;
+ /* 内容区域快速上移 */
+ transition: top 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s !important;
+ }
+}
+
+/* 移动端banner性能优化 */
+@media (max-width: 1023px) {
+ .banner-container {
+ /* 启用硬件加速 */
+ transform: translateZ(0);
+ -webkit-transform: translateZ(0);
+ will-change: transform, opacity;
+
+ /* 优化渲染性能 */
+ contain: layout style paint;
+
+ /* 减少重绘 */
+ backface-visibility: hidden;
+ -webkit-backface-visibility: hidden;
+ }
+
+ .carousel-item {
+ /* 硬件加速 */
+ transform: translateZ(0);
+ -webkit-transform: translateZ(0);
+ will-change: transform, opacity;
+
+ /* 优化触摸响应 */
+ touch-action: pan-y;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ user-select: none;
+ }
+
+ .banner-text-overlay {
+ /* 文字渲染优化 */
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ text-rendering: optimizeLegibility;
+
+ /* 减少重排 */
+ contain: layout style;
+ }
+
+ /* 移动端图片优化 - 只针对装饰性图片 */
+ .banner-container img:not(.interactive):not([onclick]):not([data-clickable]) {
+ /* 图片渲染优化 */
+ image-rendering: -webkit-optimize-contrast;
+ image-rendering: crisp-edges;
+
+ /* 防止图片拖拽 */
+ -webkit-user-drag: none;
+ -khtml-user-drag: none;
+ -moz-user-drag: none;
+ -o-user-drag: none;
+ user-drag: none;
+
+ /* 触摸优化 - 只针对装饰性图片 */
+ pointer-events: none;
+ }
+
+ /* 交互式图片保持可点击 */
+ .banner-container img.interactive,
+ .banner-container img[onclick],
+ .banner-container img[data-clickable] {
+ pointer-events: auto;
+ cursor: pointer;
+ }
+}
+
+/* 当banner被禁用时的布局样式 */
+.no-banner-layout {
+ top: 5.5rem !important;
+ min-height: calc(100vh - 5.5rem) !important;
+}
+
+/* 移动端当banner被禁用时的布局样式 */
+@media (max-width: 1023px) {
+ .absolute.w-full.z-30.no-banner-layout {
+ top: 5.5rem !important;
+ min-height: calc(100vh - 5.5rem) !important;
+ transition: none !important; /* 移除过渡动画，立即应用位置 */
+ }
+}
+
+/* 小屏手机当banner被禁用时的布局样式 */
+@media (max-width: 480px) {
+ .absolute.w-full.z-30.no-banner-layout {
+ top: 5.5rem !important;
+ min-height: calc(100vh - 5.5rem) !important;
+ transition: none !important;
+ }
+}
+
+/* 平板设备当banner被禁用时的布局样式 */
+@media (min-width: 768px) and (max-width: 1023px) {
+ .absolute.w-full.z-30.no-banner-layout {
+ top: 5.5rem !important;
+ min-height: calc(100vh - 5.5rem) !important;
+ transition: none !important;
+ }
+}
+
+/* 移动端横屏优化 */
+@media (max-width: 1023px) and (orientation: landscape) {
+ #banner-wrapper:not(.mobile-hide-banner) {
+ top: 0 !important; /* 横屏模式从顶部开始，避免被导航栏覆盖 */
+ height: 60vh !important;
+ }
+
+ /* 主内容区域位置调整 - 确保在banner下面，但不影响非首页 */
+ /* 仅在 banner 模式下应用，其他模式（全屏壁纸/纯色）使用默认的 5.5rem */
+ body.enable-banner .absolute.w-full.z-30:not(.mobile-main-no-banner):not(.no-banner-layout) {
+ top: 60vh !important; /* 与banner高度对应 */
+ min-height: calc(100vh - 60vh) !important;
+ }
+
+ .banner-container {
+ height: 60vh;
+ min-height: 300px;
+ }
+
+ .banner-text-overlay {
+ padding: 1rem 1.5rem;
+ align-items: center !important; /* 垂直居中 */
+ justify-content: center !important; /* 水平居中 */
+ text-align: center !important; /* 文字居中对齐 */
+ }
+
+ .banner-title {
+ font-size: 2.2rem !important; /* 增大字体大小 */
+ line-height: 1.3;
+ }
+
+ .banner-subtitle {
+ font-size: 0.9rem;
+ margin-top: 0.5rem;
+ }
+}
+
+/* 移动端暗色模式优化 */
+@media (max-width: 1023px) and (prefers-color-scheme: dark) {
+ .banner-text-overlay {
+ background: linear-gradient(
+ to top,
+ rgba(0, 0, 0, 0.8) 0%,
+ rgba(0, 0, 0, 0.4) 50%,
+ transparent 100%
+ );
+ }
+
+ .banner-title {
+ text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
+ }
+
+ .banner-subtitle {
+ text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
+ }
+}
+
+/* 水波纹显示优化 */
+.waves {
+ /* 确保水波纹完整显示 */
+ overflow: visible;
+ z-index: 5;
+ /* 硬件加速，确保与背景同步渲染 */
+ transform: translateZ(0);
+ will-change: transform;
+ /* 移除contain属性，避免限制动画渲染范围 */
+ contain: none;
+}
+
+.waves svg {
+ /* 确保SVG完整渲染 */
+ width: 100%;
+ height: 100%;
+ display: block;
+ /* SVG硬件加速 */
+ transform: translateZ(0);
+ backface-visibility: hidden;
+}
+
+/* 波浪填充色主题切换优化 */
+.waves use {
+ /* 确保填充色与页面背景同步更新 */
+ will-change: fill;
+}
+
+/* 波浪与背景同步切换优化 - 解决交界线闪烁 */
+#header-waves {
+ /* 确保波浪容器与页面背景在同一合成层 */
+ isolation: isolate;
+ /* 移除contain属性，避免限制波浪动画 */
+ contain: none;
+ /* 精确对齐 */
+ margin-bottom: -1px;
+}
+
+/* 主题切换时的额外保护 */
+.theme-changing #header-waves,
+.theme-changing #header-waves svg,
+.theme-changing #header-waves use {
+ /* 在主题切换期间禁用所有可能的渲染延迟 */
+ will-change: auto;
+ transform: translateZ(0);
+ backface-visibility: hidden;
+}
+
+/* 移动端水波纹特殊优化 */
+@media (max-width: 1023px) {
+ #header-waves {
+ /* 确保水波纹容器不被裁剪 */
+ overflow: visible;
+ z-index: 5;
+ /* 水波纹快速消失动画 */
+ transition: transform 0.3s ease-in, opacity 0.2s ease-in;
+ }
+
+ /* 当banner隐藏时，水波纹也隐藏 */
+ .mobile-hide-banner #header-waves {
+ display: none !important;
+ transform: translateY(-100%);
+ opacity: 0;
+ /* 水波纹比banner更快消失 */
+ transition: transform 0.25s ease-in, opacity 0.15s ease-in;
+ }
+
+ .waves svg {
+ /* 移动端SVG优化 */
+ min-height: 60px;
+ }
+
+ /* 确保水波纹在banner底部正确定位 */
+ .waves {
+ bottom: -1px !important;
+ position: absolute !important;
+ }
+}
+
+/* 超小屏幕水波纹优化 */
+@media (max-width: 360px) {
+ .waves {
+ height: 6vh !important;
+ min-height: 50px !important;
+ max-height: 70px !important;
+ }
+}
+
+/* 基于屏幕高度的banner优化 - 优先显示banner */
+/* 极小高度屏幕 (高度 ≤ 500px) */
+@media (max-height: 500px) {
+ #banner-wrapper {
+ height: 85vh !important; /* 占用更多高度确保banner显示 */
+ min-height: 350px !important;
+ }
+
+ .banner-text-overlay {
+ padding: 1rem !important;
+ align-items: center !important; /* 垂直居中 */
+ justify-content: center !important; /* 水平居中 */
+ text-align: center !important; /* 文字居中对齐 */
+ }
+
+ .banner-title {
+ font-size: 2.8rem !important; /* 增大字体大小 */
+ line-height: 1.1 !important;
+ margin-bottom: 0.5rem !important;
+ }
+
+ .banner-subtitle {
+ font-size: 0.9rem !important;
+ line-height: 1.2 !important;
+ }
+
+ .waves {
+ height: 5vh !important;
+ min-height: 40px !important;
+ max-height: 50px !important;
+ }
+}
+
+/* 小高度屏幕 (高度 501px - 600px) */
+@media (min-height: 501px) and (max-height: 600px) {
+ #banner-wrapper {
+ height: 80vh !important;
+ min-height: 400px !important;
+ }
+
+ .banner-text-overlay {
+ padding: 1.5rem !important;
+ align-items: center !important; /* 垂直居中 */
+ justify-content: center !important; /* 水平居中 */
+ text-align: center !important; /* 文字居中对齐 */
+ }
+
+ .banner-title {
+ font-size: 3.2rem !important; /* 增大字体大小 */
+ line-height: 1.1 !important;
+ margin-bottom: 0.75rem !important;
+ }
+
+ .banner-subtitle {
+ font-size: 1rem !important;
+ line-height: 1.3 !important;
+ }
+
+ .waves {
+ height: 6vh !important;
+ min-height: 50px !important;
+ max-height: 60px !important;
+ }
+}
+
+/* 中等高度屏幕 (高度 601px - 700px) */
+@media (min-height: 601px) and (max-height: 700px) {
+ #banner-wrapper {
+ height: 75vh !important;
+ min-height: 450px !important;
+ }
+
+ .banner-text-overlay {
+ padding: 2rem !important;
+ align-items: center !important; /* 垂直居中 */
+ justify-content: center !important; /* 水平居中 */
+ text-align: center !important; /* 文字居中对齐 */
+ }
+
+ .banner-title {
+ font-size: 3.8rem !important; /* 增大字体大小 */
+ line-height: 1.1 !important;
+ margin-bottom: 1rem !important;
+ }
+
+ .banner-subtitle {
+ font-size: 1.125rem !important;
+ line-height: 1.4 !important;
+ }
+
+ .waves {
+ height: 8vh !important;
+ min-height: 60px !important;
+ max-height: 80px !important;
+ }
+}
+
+/* 横屏模式特殊处理 - 优先显示banner */
+@media (orientation: landscape) and (max-height: 500px) {
+ #banner-wrapper {
+ height: 90vh !important; /* 横屏时占用更多高度 */
+ min-height: 300px !important;
+ }
+
+ .banner-text-overlay {
+ padding: 1rem 2rem !important;
+ align-items: center !important; /* 垂直居中 */
+ justify-content: center !important; /* 水平居中 */
+ text-align: center !important; /* 文字居中对齐 */
+ }
+
+ .banner-title {
+ font-size: 2.8rem !important; /* 增大字体大小 */
+ line-height: 1.1 !important;
+ margin-bottom: 0.5rem !important;
+ }
+
+ .banner-subtitle {
+ font-size: 1rem !important;
+ line-height: 1.2 !important;
+ }
+
+ .waves {
+ height: 4vh !important;
+ min-height: 30px !important;
+ max-height: 40px !important;
+ }
+}
diff --git a/src/styles/main.css b/src/styles/main.css
new file mode 100644
index 0000000..c066676
--- /dev/null
+++ b/src/styles/main.css
@@ -0,0 +1,534 @@
+/* 导入统一变量 */
+@import './variables-unified.styl';
+/* 导入统一动画样式 */
+@import './animation-enhancements.css';
+@import './transition.css';
+/* 导入统一导航栏样式 */
+@import './navbar.css';
+
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* 确保平滑滚动 */
+html {
+ scroll-behavior: smooth;
+}
+
+/* 页面顶部渐变高光效果 */
+.top-gradient-highlight {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 180px;
+ background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0.15) 60%, rgba(255, 255, 255, 0.05) 80%, transparent 100%);
+ pointer-events: none;
+ z-index: 20;
+ transition: all var(--duration-medium) var(--ease-standard);
+}
+
+/* 暗色主题下的渐变高光效果 */
+:root.dark .top-gradient-highlight {
+ background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0.15) 60%, rgba(0, 0, 0, 0.05) 80%, transparent 100%);
+}
+
+@layer components {
+ /* View Transitions API 主题切换动画 */
+ /* 为整个文档根元素设置视图过渡 */
+ ::view-transition-old(root),
+ ::view-transition-new(root) {
+ animation-duration: 0.5s;
+ animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+ /* 使用混合模式使颜色过渡更平滑 */
+ mix-blend-mode: normal;
+ }
+
+ /* 视图过渡组 - 使用交叉淡化效果 */
+ ::view-transition-group(root) {
+ animation-duration: 0.5s;
+ animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+ }
+
+ /* 淡出旧视图 - 使用更平滑的曲线 */
+ ::view-transition-old(root) {
+ animation-name: theme-fade-out;
+ /* 确保背景色同步切换 */
+ z-index: 2;
+ }
+
+ /* 淡入新视图 - 使用更平滑的曲线 */
+ ::view-transition-new(root) {
+ animation-name: theme-fade-in;
+ /* 确保新视图在上层 */
+ z-index: 1;
+ }
+
+ /* 定义淡出动画 - 使用更平滑的缓动函数 */
+ @keyframes theme-fade-out {
+ 0% {
+ opacity: 1;
+ }
+ 100% {
+ opacity: 0;
+ }
+ }
+
+ /* 定义淡入动画 - 从下层淡入 */
+ @keyframes theme-fade-in {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+ }
+
+ /* 确保边框和分隔线元素在主题切换时有更明确的过渡时长 */
+ .transition,
+ [class*="border"],
+ [class*="transition"] {
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+ transition-duration: 0.15s;
+ }
+
+ /* 主题过渡保护类 - 仅在非 View Transitions 模式下使用 */
+ /* 当使用 View Transitions API 时，浏览器会自动处理过渡，不需要禁用 transition */
+ .is-theme-transitioning:not(.use-view-transition) *,
+ .is-theme-transitioning:not(.use-view-transition) *::before,
+ .is-theme-transitioning:not(.use-view-transition) *::after {
+ transition: none !important;
+ animation: none !important;
+ }
+
+ /* 在主题切换时禁用代码块的复杂效果以提升性能 */
+ /* 使用 View Transitions 时也需要禁用代码块动画，因为它们太多了 */
+ .is-theme-transitioning .expressive-code,
+ .is-theme-transitioning .expressive-code * {
+ transition: none !important;
+ animation: none !important;
+ will-change: auto !important;
+ }
+
+ /* 禁用复杂选择器元素的过渡 - 仅在非 View Transitions 模式下 */
+ .is-theme-transitioning:not(.use-view-transition) .float-panel,
+ .is-theme-transitioning:not(.use-view-transition) .float-panel *,
+ .is-theme-transitioning:not(.use-view-transition) .music-player,
+ .is-theme-transitioning:not(.use-view-transition) .music-player *,
+ .is-theme-transitioning:not(.use-view-transition) .widget,
+ .is-theme-transitioning:not(.use-view-transition) .widget *,
+ .is-theme-transitioning:not(.use-view-transition) .dropdown-content,
+ .is-theme-transitioning:not(.use-view-transition) .dropdown-content * {
+ transition: none !important;
+ animation: none !important;
+ }
+
+ /* 强制使用 contain 隔离渲染上下文 - 仅在非 View Transitions 模式下 */
+ .is-theme-transitioning:not(.use-view-transition) .post-card,
+ .is-theme-transitioning:not(.use-view-transition) .widget,
+ .is-theme-transitioning:not(.use-view-transition) .float-panel {
+ contain: layout style paint !important;
+ }
+
+ /* 波浪效果精确同步处理 - 仅在非 View Transitions 模式下 */
+ .is-theme-transitioning:not(.use-view-transition) svg use {
+ /* 禁用过渡但保持动画 */
+ transition: none;
+ /* 强制立即继承页面背景色 */
+ fill: currentColor;
+ }
+
+ /* 导航栏主题切换保护 - 仅在非 View Transitions 模式下禁用过渡 */
+ .is-theme-transitioning:not(.use-view-transition) #navbar > div,
+ .is-theme-transitioning:not(.use-view-transition) #navbar[data-transparent-mode] > div,
+ .is-theme-transitioning:not(.use-view-transition) #navbar[data-transparent-mode].scrolled > div,
+ .is-theme-transitioning:not(.use-view-transition) body.wallpaper-transparent #navbar > div,
+ .is-theme-transitioning:not(.use-view-transition) body.wallpaper-transparent #navbar[data-transparent-mode] > div,
+ .is-theme-transitioning:not(.use-view-transition) body.wallpaper-transparent #navbar[data-transparent-mode].scrolled > div,
+ .is-theme-transitioning:not(.use-view-transition) #banner-wrapper ~ * #navbar > div,
+ .is-theme-transitioning:not(.use-view-transition) #banner-wrapper ~ * #navbar[data-transparent-mode] > div,
+ .is-theme-transitioning:not(.use-view-transition) body:has(#banner-wrapper) #navbar > div,
+ .is-theme-transitioning:not(.use-view-transition) body:has(#banner-wrapper) #navbar[data-transparent-mode] > div {
+ transition: none !important;
+ backdrop-filter: none !important;
+ }
+
+ /* 导航栏相关浮动面板的过渡禁用 */
+ .is-theme-transitioning .dropdown-content,
+ .is-theme-transitioning .float-panel,
+ .is-theme-transitioning #display-setting,
+ .is-theme-transitioning #nav-menu-panel,
+ .is-theme-transitioning #translate-panel,
+ .is-theme-transitioning #mobile-toc-panel,
+ .is-theme-transitioning #search-panel {
+ transition: none !important;
+ backdrop-filter: none !important;
+ }
+
+ /* 波浪容器的颜色传递 */
+ .is-theme-transitioning #header-waves {
+ /* 设置当前颜色为页面背景色，供SVG继承 */
+ color: var(--page-bg);
+ /* 确保与页面在同一合成层 */
+ isolation: isolate;
+ /* 优化渲染性能 */
+ contain: layout style paint;
+ /* GPU层合成 */
+ transform: translateZ(0);
+ /* 确保没有背景色 */
+ background: transparent;
+ }
+
+ .is-theme-transitioning #header-waves use {
+ /* 保持动画连续性 */
+ will-change: transform;
+ /* GPU优化 */
+ transform: translateZ(0);
+ }
+
+ .card-base {
+ @apply rounded-[var(--radius-large)] overflow-hidden bg-[var(--card-bg)] transition-colors duration-150;
+ }
+ .card-base-transparent {
+ @apply rounded-[var(--radius-large)] overflow-hidden bg-[var(--card-bg-transparent)] backdrop-blur-sm transition-colors duration-150;
+ }
+
+ /* 全屏壁纸模式下的半透明效果 */
+ .wallpaper-transparent .card-base {
+ @apply bg-[var(--card-bg-transparent)];
+ /* 移除高斯模糊以提升性能，大量重叠的 backdrop-filter 会导致 GPU 占用过高 */
+ /* @apply backdrop-blur-sm; */
+ }
+
+ .wallpaper-transparent .float-panel {
+ @apply bg-[var(--card-bg-transparent)];
+ /* 移除高斯模糊以提升性能 */
+ /* @apply backdrop-blur-sm; */
+ }
+
+ .wallpaper-transparent #navbar > div {
+ @apply bg-[var(--card-bg-transparent)] backdrop-blur-sm;
+ border-radius: 0 0 var(--radius-large) var(--radius-large) !important;
+}
+
+ .wallpaper-transparent .btn-card {
+ @apply bg-[var(--card-bg-transparent)];
+ /* 移除高斯模糊以提升性能 */
+ /* @apply backdrop-blur-sm; */
+ }
+
+ h1, h2, h3, h4, h5, h6, p, a, span, li, ul, ol, blockquote, code, pre, table, th, td, strong {
+ @apply transition-colors duration-150;
+ }
+ .card-shadow {
+ @apply drop-shadow-[0_2px_4px_rgba(0,0,0,0.005)]
+ }
+ .expand-animation {
+ @apply relative before:ease-out before:transition active:bg-none hover:before:bg-[var(--btn-plain-bg-hover)] active:before:bg-[var(--btn-plain-bg-active)] z-0
+ before:absolute before:rounded-[inherit] before:inset-0 before:scale-[0.85] hover:before:scale-100 before:-z-10
+ }
+ .link {
+ @apply transition-colors duration-150 rounded-md p-1 -m-1 expand-animation;
+ }
+ .link-lg {
+ @apply transition-colors duration-150 rounded-md p-1.5 -m-1.5 expand-animation;
+ }
+ .float-panel {
+ @apply top-[5.25rem] rounded-[var(--radius-large)] overflow-hidden bg-[var(--float-panel-bg)] transition-colors duration-150 shadow-xl dark:shadow-none
+ }
+ .float-panel-closed {
+ @apply -translate-y-1 opacity-0 pointer-events-none
+ }
+ .float-panel-closed * {
+ @apply pointer-events-none
+ }
+ .search-panel mark {
+ @apply bg-transparent text-[var(--primary)]
+ }
+
+ .btn-card {
+ @apply transition-colors duration-150 flex items-center justify-center bg-[var(--card-bg)] hover:bg-[var(--btn-card-bg-hover)]
+ active:bg-[var(--btn-card-bg-active)]
+ }
+ .btn-card.disabled {
+ @apply pointer-events-none text-black/10 dark:text-white/10
+ }
+ .btn-plain {
+ @apply transition-colors duration-150 relative flex items-center justify-center bg-none
+ text-black/75 hover:text-[var(--primary)] dark:text-white/75 dark:hover:text-[var(--primary)];
+ &:not(.scale-animation) {
+ @apply hover:bg-[var(--btn-plain-bg-hover)] active:bg-[var(--btn-plain-bg-active)]
+ }
+ &.scale-animation {
+ @apply expand-animation;
+ }
+ }
+ .current-theme-btn {
+ @apply bg-[var(--btn-plain-bg-hover)] text-[var(--primary)];
+ }
+ .btn-regular {
+ @apply transition-colors duration-150 flex items-center justify-center bg-[var(--btn-regular-bg)] hover:bg-[var(--btn-regular-bg-hover)] active:bg-[var(--btn-regular-bg-active)]
+ text-[var(--btn-content)] dark:text-white/75
+ }
+
+ .link-underline {
+ @apply transition-colors duration-150 underline decoration-2 decoration-dashed decoration-[var(--link-underline)]
+ hover:decoration-[var(--link-hover)] active:decoration-[var(--link-active)] underline-offset-[0.25rem]
+ }
+
+ .toc-hide,
+ .toc-not-ready {
+ @apply opacity-0 pointer-events-none
+ }
+
+ /* #toc-inner-wrapper {
+ mask-image: linear-gradient(to bottom, transparent 0%, black 2rem, black calc(100% - 2rem), transparent 100%);
+ } */
+
+ .hide-scrollbar {
+ scrollbar-width: none;
+ -ms-overflow-style: none;
+ }
+ .hide-scrollbar::-webkit-scrollbar {
+ display: none;
+ }
+
+ .text-90 {
+ @apply text-black/90 dark:text-white/90
+ }
+ .text-75 {
+ @apply text-black/75 dark:text-white/75
+ }
+ .text-50 {
+ @apply text-black/50 dark:text-white/50
+ }
+ .text-30 {
+ @apply text-black/30 dark:text-white/30
+ }
+ .text-25 {
+ @apply text-black/25 dark:text-white/25
+ }
+
+ /* 下拉菜单样式 */
+ .dropdown-container {
+ @apply relative;
+ }
+
+ .dropdown-menu {
+ @apply absolute top-full left-0 pt-2 opacity-0 invisible pointer-events-none transition-all duration-200 ease-out transform translate-y-[-8px] z-50;
+ }
+
+ .dropdown-container:hover .dropdown-menu,
+ .dropdown-container:focus-within .dropdown-menu {
+ @apply opacity-100 visible pointer-events-auto translate-y-0;
+ }
+
+ .dropdown-container:hover .dropdown-arrow,
+ .dropdown-container:focus-within .dropdown-arrow {
+ @apply rotate-180;
+ }
+
+ .dropdown-content {
+ @apply bg-[var(--float-panel-bg)] rounded-[var(--radius-large)] shadow-xl dark:shadow-none border border-black/5 dark:border-white/10 py-2 min-w-[12rem];
+ }
+
+ .dropdown-item {
+ @apply flex items-center justify-between px-4 py-2.5 text-black/75 dark:text-white/75 hover:text-[var(--primary)] hover:bg-[var(--btn-plain-bg-hover)] transition-colors duration-150 font-medium;
+ }
+
+ .dropdown-item:first-child {
+ @apply rounded-t-[calc(var(--radius-large)-0.5rem)];
+ }
+
+ .dropdown-item:last-child {
+ @apply rounded-b-[calc(var(--radius-large)-0.5rem)];
+ }
+
+ /* 移动端菜单样式 */
+ .mobile-submenu {
+ @apply max-h-0 overflow-hidden transition-all duration-300 ease-in-out;
+ }
+
+ .mobile-dropdown[data-expanded="true"] .mobile-submenu {
+ @apply max-h-96;
+ }
+
+ .mobile-dropdown[data-expanded="true"] .mobile-dropdown-arrow {
+ @apply rotate-180;
+ }
+
+ /* 响应式隐藏 */
+ @media (max-width: 768px) {
+ .dropdown-container {
+ @apply hidden;
+ }
+ }
+
+ /* 无障碍支持 */
+ .dropdown-container:focus-within .dropdown-menu {
+ @apply opacity-100 visible pointer-events-auto translate-y-0;
+ }
+
+ .dropdown-item:focus {
+ @apply outline-none;
+ }
+
+ .mobile-dropdown button:focus {
+ @apply outline-none;
+ }
+
+ .meta-icon {
+ @apply w-8 h-8 transition-colors duration-150 rounded-md flex items-center justify-center bg-[var(--btn-regular-bg)]
+ text-[var(--btn-content)] mr-2
+ }
+ .with-divider {
+ @apply before:content-['/'] before:ml-1.5 before:mr-1.5 before:text-[var(--meta-divider)] before:text-sm
+ before:font-medium before:first-of-type:hidden before:transition-colors before:duration-150
+ }
+
+ .btn-regular-dark {
+ @apply flex items-center justify-center
+ bg-[oklch(0.45_0.01_var(--hue))] hover:bg-[oklch(0.50_0.01_var(--hue))] active:bg-[oklch(0.55_0.01_var(--hue))]
+ dark:bg-[oklch(0.30_0.02_var(--hue))] dark:hover:bg-[oklch(0.35_0.03_var(--hue))] dark:active:bg-[oklch(0.40_0.03_var(--hue))]
+ }
+ .btn-regular-dark.success {
+ @apply bg-[oklch(0.75_0.14_var(--hue))] dark:bg-[oklch(0.75_0.14_var(--hue))]
+ }
+}
+
+.custom-md img, #post-cover img {
+ @apply cursor-zoom-in
+}
+
+::selection {
+ background-color: var(--selection-bg)
+}
+
+.dash-line {
+ position: relative;
+}
+
+.dash-line::before {
+ content: "";
+ position: absolute;
+ width: 10%;
+ height: 100%;
+ left: calc(50% - 1px);
+ border-left: 2px dashed var(--line-color);
+ pointer-events: none;
+ transition: all 0.3s;
+ transform: translateY(-50%);
+}
+
+
+/*剧透效果*/
+.custom-md spoiler {
+ --_spoiler-mask: var(--primary);
+ @apply hover:bg-transparent px-1 py-0.5 overflow-hidden rounded-md transition-all duration-150;
+ background-color: var(--_spoiler-mask);
+ box-decoration-break: clone;
+ &:not(:hover) {
+ color: var(--_spoiler-mask);
+ * {
+ color: var(--_spoiler-mask);
+ }
+ }
+}
+
+/* 浅色模式：使用更浅的主题色且完全不透明 */
+:root:not(.dark) .custom-md spoiler {
+ --_spoiler-mask: color-mix(in oklch, var(--primary) 55%, white 45%);
+}
+
+/* 文章列表布局切换样式 */
+.post-list-layout-switch {
+ @apply flex items-center gap-2 mb-6 p-3 bg-[var(--card-bg)] rounded-lg border border-[var(--line-divider)];
+}
+
+.post-list-layout-switch span {
+ @apply text-sm text-[var(--text-secondary)];
+}
+
+.post-list-layout-switch .layout-buttons {
+ @apply flex gap-1;
+}
+
+.post-list-layout-switch button {
+ @apply px-3 py-1.5 text-sm rounded-md transition-colors;
+}
+
+.post-list-layout-switch button.active {
+ @apply bg-[var(--primary)] text-white;
+}
+
+.post-list-layout-switch button:not(.active) {
+ @apply bg-[var(--bg-secondary)] text-[var(--text-secondary)] hover:bg-[var(--bg-hover)];
+}
+
+/* 网格模式下的文章卡片样式调整 */
+.post-list-container.grid-mode .post-card-item {
+ @apply w-full;
+}
+
+.post-list-container.grid-mode .post-card-item a[href] {
+ @apply text-xl before:h-4 before:top-[28px] before:left-[-18px] truncate;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ line-height: 1.4;
+ max-height: 2.8em; /* 2行的高度 */
+}
+
+.post-list-container.grid-mode .post-card-item a[aria-label] {
+ @apply hidden;
+}
+
+.post-list-container.grid-mode .post-card-item .btn-regular {
+ @apply hidden;
+}
+
+.post-list-container.grid-mode .post-card-item .line-clamp-1 {
+ @apply line-clamp-2;
+}
+
+/* 网格模式下的卡片内容区域调整 */
+.post-list-container.grid-mode .post-card-item > div {
+ @apply p-4;
+}
+
+/* 网格模式下的元数据样式调整 */
+.post-list-container.grid-mode .post-card-item .post-meta {
+ @apply mb-2;
+}
+
+/* 网格模式下的描述文本调整 */
+.post-list-container.grid-mode .post-card-item .description {
+ @apply text-sm mb-2 line-clamp-2;
+}
+
+/* 网格模式下的统计信息调整 */
+.post-list-container.grid-mode .post-card-item .stats {
+ @apply text-xs;
+}
+
+/* 响应式分页样式 */
+.device-mobile .pagination-info {
+ @apply text-xs;
+}
+
+.device-tablet .pagination-info {
+ @apply text-sm;
+}
+
+.device-desktop .pagination-info {
+ @apply text-base;
+}
+
+/* 分页信息样式 */
+.pagination-info {
+ @apply text-sm text-[var(--text-secondary)] text-center mb-2;
+}
\ No newline at end of file
diff --git a/src/styles/markdown-extend.styl b/src/styles/markdown-extend.styl
new file mode 100644
index 0000000..c792edb
--- /dev/null
+++ b/src/styles/markdown-extend.styl
@@ -0,0 +1,331 @@
+.custom-md
+
+ blockquote.admonition
+ .bdm-title
+ display: flex
+ align-items: center
+ margin-bottom: -.9rem
+ font-weight: bold
+
+ &:before
+ content: ' '
+ display: inline-block
+ font-size: inherit
+ overflow: visible
+ margin-right: .6rem
+ height: 1em
+ width: 1em
+ vertical-align: -.126em
+ mask-size: contain
+ mask-position: center
+ mask-repeat: no-repeat
+ transform: translateY(-0.0625rem)
+ &.bdm-tip
+ .bdm-title
+ color: var(--admonitions-color-tip)
+
+ &:before
+ background: var(--admonitions-color-tip)
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' width='16' height='16' aria-hidden='true'%3E%3Cpath d='M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z'%3E%3C/path%3E%3C/svg%3E")
+
+ &:before
+ background: var(--admonitions-color-tip)
+ &.bdm-note
+ .bdm-title
+ color: var(--admonitions-color-note)
+
+ &:before
+ background: var(--admonitions-color-note)
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' width='16' height='16' aria-hidden='true'%3E%3Cpath fill='var(--admonitions-color-tip)' d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'%3E%3C/path%3E%3C/svg%3E")
+
+ &:before
+ background: var(--admonitions-color-note)
+ &.bdm-important
+ .bdm-title
+ color: var(--admonitions-color-important)
+
+ &:before
+ background: var(--admonitions-color-important)
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' width='16' height='16' aria-hidden='true'%3E%3Cpath d='M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z'%3E%3C/path%3E%3C/svg%3E")
+
+ &:before
+ background: var(--admonitions-color-important)
+ &.bdm-warning
+ .bdm-title
+ color: var(--admonitions-color-warning)
+
+ &:before
+ background: var(--admonitions-color-warning)
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' width='16' height='16' aria-hidden='true'%3E%3Cpath d='M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z'%3E%3C/path%3E%3C/svg%3E")
+
+ &:before
+ background: var(--admonitions-color-warning)
+ &.bdm-caution
+ .bdm-title
+ color: var(--admonitions-color-caution)
+
+ &:before
+ background: var(--admonitions-color-caution)
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' width='16' height='16' aria-hidden='true'%3E%3Cpath d='M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'%3E%3C/path%3E%3C/svg%3E")
+
+ &:before
+ background: var(--admonitions-color-caution)
+
+ img
+ border-radius: 0.75rem
+
+ hr
+ border-color: var(--line-divider)
+ border-style: dashed
+
+ iframe
+ border-radius: 0.75rem
+ margin-left: auto
+ margin-right: auto
+ max-width: 100%
+
+a.card-github
+ display: block
+ background: var(--license-block-bg)
+ position: relative
+ margin: 0.5rem 0
+ padding: 1.1rem 1.5rem 1.1rem 1.5rem
+ color: var(--tw-prose-body)
+ border-radius: var(--radius-large)
+ text-decoration-thickness: 0px
+ text-decoration-line: none
+
+ &:hover
+ background-color: var(--btn-regular-bg-hover)
+
+ .gc-titlebar
+ color: var(--btn-content)
+
+ .gc-stars, .gc-forks, .gc-license, .gc-description
+ color: var(--tw-prose-headings)
+
+ &:before
+ background-color: var(--tw-prose-headings)
+
+ &:active
+ scale: .98
+ background-color: var(--btn-regular-bg-active);
+
+ .gc-titlebar
+ display: flex
+ align-items: center
+ justify-content: space-between
+ margin-bottom: 0.5rem
+ color: var(--tw-prose-headings)
+ font-size: 1.25rem
+ font-weight: 500
+
+ .gc-titlebar-left
+ display: flex
+ flex-flow: row nowrap
+ gap: 0.5rem
+
+ .gc-repo
+ font-weight: bold
+
+ .gc-owner
+ font-weight: 300
+ position: relative
+ display: flex
+ flex-flow: row nowrap
+ gap: 0.5rem
+ align-items: center
+
+ .gc-avatar
+ display: block
+ overflow: hidden
+ width: 1.5rem
+ height: 1.5rem
+ margin-top: -0.1rem
+ background-color: var(--primary)
+ background-size: cover
+ border-radius: 50%
+
+ .gc-description
+ margin-bottom: 0.7rem
+ font-size: 1rem
+ font-weight: 300
+ line-height: 1.5rem
+ color: var(--tw-prose-body)
+
+ .gc-infobar
+ display: flex
+ flex-flow: row nowrap
+ gap: 1.5rem
+ color: var(--tw-prose-body)
+ width: fit-content
+
+ .gc-language
+ display: none
+
+ .gc-stars, .gc-forks, .gc-license, .github-logo
+ font-weight: 500
+ font-size: 0.875rem
+ opacity: 0.9;
+
+ &:before
+ content: ' '
+ display: inline-block
+ height: 1.3em
+ width: 1.3em
+ margin-right: .4rem
+ vertical-align: -.24em
+ font-size: inherit
+ background-color: var(--tw-prose-body)
+ overflow: visible
+ mask-size: contain
+ mask-position: center
+ mask-repeat: no-repeat
+ transition-property: background-color, background;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
+ transition-duration: 0.15s
+
+ .gc-stars
+ &:before
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='16' viewBox='0 0 16 16' version='1.1' width='16'%3E%3Cpath d='M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Zm0 2.445L6.615 5.5a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 2.694Z'%3E%3C/path%3E%3C/svg%3E")
+
+ .gc-license
+ &:before
+ margin-right: .5rem
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='16' viewBox='0 0 16 16' version='1.1' width='16'%3E%3Cpath d='M8.75.75V2h.985c.304 0 .603.08.867.231l1.29.736c.038.022.08.033.124.033h2.234a.75.75 0 0 1 0 1.5h-.427l2.111 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.006.005-.01.01-.045.04c-.21.176-.441.327-.686.45C14.556 10.78 13.88 11 13 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L12.178 4.5h-.162c-.305 0-.604-.079-.868-.231l-1.29-.736a.245.245 0 0 0-.124-.033H8.75V13h2.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1 0-1.5h2.5V3.5h-.984a.245.245 0 0 0-.124.033l-1.289.737c-.265.15-.564.23-.869.23h-.162l2.112 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.016.015-.045.04c-.21.176-.441.327-.686.45C4.556 10.78 3.88 11 3 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L2.178 4.5H1.75a.75.75 0 0 1 0-1.5h2.234a.249.249 0 0 0 .125-.033l1.288-.737c.265-.15.564-.23.869-.23h.984V.75a.75.75 0 0 1 1.5 0Zm2.945 8.477c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327Zm-10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327Z'%3E%3C/path%3E%3C/svg%3E")
+
+ .gc-forks
+ &:before
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='16' viewBox='0 0 16 16' version='1.1' width='16'%3E%3Cpath d='M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z'%3E%3C/path%3E%3C/svg%3E")
+
+ .github-logo
+ font-size: 1.25rem
+
+ &:before
+ background-color: var(--tw-prose-headings)
+ margin-right: 0
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='32' viewBox='0 0 496 512'%3E%3Cpath fill='%23a1f7cb' d='M165.9 397.4c0 2-2.3 3.6-5.2 3.6c-3.3.3-5.6-1.3-5.6-3.6c0-2 2.3-3.6 5.2-3.6c3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9c2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9c.3 2 2.9 3.3 5.9 2.6c2.9-.7 4.9-2.6 4.6-4.6c-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2c12.8 2.3 17.3-5.6 17.3-12.1c0-6.2-.3-40.4-.3-61.4c0 0-70 15-84.7-29.8c0 0-11.4-29.1-27.8-36.6c0 0-22.9-15.7 1.6-15.4c0 0 24.9 2 38.6 25.8c21.9 38.6 58.6 27.5 72.9 20.9c2.3-16 8.8-27.1 16-33.7c-55.9-6.2-112.3-14.3-112.3-110.5c0-27.5 7.6-41.3 23.6-58.9c-2.6-6.5-11.1-33.3 2.6-67.9c20.9-6.5 69 27 69 27c20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27c13.7 34.7 5.2 61.4 2.6 67.9c16 17.7 25.8 31.5 25.8 58.9c0 96.5-58.9 104.2-114.8 110.5c9.2 7.9 17 22.9 17 46.4c0 33.7-.3 75.4-.3 83.6c0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252C496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2c1.6 1.6 3.9 2.3 5.2 1c1.3-1 1-3.3-.7-5.2c-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9c1.6 1 3.6.7 4.3-.7c.7-1.3-.3-2.9-2.3-3.9c-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2c2.3 2.3 5.2 2.6 6.5 1c1.3-1.3.7-4.3-1.3-6.2c-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9c1.6 2.3 4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2c-1.4-2.3-4-3.3-5.6-2'/%3E%3C/svg%3E")
+
+a.card-github.fetch-waiting
+ pointer-events: none
+ opacity: 0.7
+ transition: opacity 0.15s ease-in-out
+
+ .gc-description, .gc-infobar, .gc-avatar
+ background-color: var(--tw-prose-body)
+ color: transparent
+ opacity: 0.5;
+ animation: pulsate 2s infinite linear
+ user-select: none
+
+ &:before
+ background-color: transparent
+
+ .gc-repo
+ margin-left: -0.1rem
+
+ .gc-description, .gc-infobar
+ border-radius: 0.5rem
+
+a.card-github.fetch-error
+ pointer-events: all
+ opacity: 1
+
+@keyframes pulsate
+ 0%
+ opacity: 0.15
+ 50%
+ opacity: 0.25
+ 100%
+ opacity: 0.15
+
+.card-github, .gc-description, .gc-titlebar, .gc-stars, .gc-forks, .gc-license, .gc-avatar, .github-logo
+ transition-property: all
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
+ transition-duration: 0.15s
+
+// Mermaid 图表样式
+.mermaid-diagram-container
+ margin: 1rem 0
+ border-radius: 0.75rem
+ overflow: hidden
+ background: var(--card-bg)
+ transition: all 0.3s ease
+
+ &:hover
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1)
+
+.mermaid-wrapper
+ padding: 1.5rem
+ text-align: center
+
+.mermaid
+ display: flex
+ justify-content: center
+ align-items: center
+ min-height: 100px
+ font-family: inherit
+
+ svg
+ max-width: 100%
+ height: auto
+ border-radius: 0.5rem
+
+.mermaid-loading
+ display: flex
+ align-items: center
+ justify-content: center
+ padding: 2rem
+ color: var(--text-color-secondary)
+ font-style: italic
+
+ &::before
+ content: ""
+ width: 20px
+ height: 20px
+ border: 2px solid var(--primary)
+ border-top: 2px solid transparent
+ border-radius: 50%
+ animation: spin 1s linear infinite
+ margin-right: 0.5rem
+
+@keyframes spin
+ 0%
+ transform: rotate(0deg)
+ 100%
+ transform: rotate(360deg)
+
+.mermaid-error
+ color: var(--admonitions-color-warning)
+ background: rgba(239, 68, 68, 0.1)
+ border: 1px solid var(--admonitions-color-warning)
+ border-radius: 0.5rem
+ padding: 1rem
+ margin: 1rem 0
+ text-align: center
+ font-weight: 500
+
+ p
+ margin: 0 0 0.5rem 0
+
+ button
+ transition: all 0.2s ease
+
+ &:hover
+ background: var(--primary-hover) !important
+ transform: translateY(-1px)
+
+// 深色模式下的 Mermaid 样式
+.dark .mermaid-diagram-container
+ background: var(--card-bg)
+
+ svg
+ filter: brightness(0.9) contrast(1.1)
+
+// 响应式设计
+@media (max-width: 768px)
+ .mermaid-wrapper
+ padding: 1rem
+
+ .mermaid svg
+ max-height: 400px
diff --git a/src/styles/markdown.css b/src/styles/markdown.css
new file mode 100644
index 0000000..5422014
--- /dev/null
+++ b/src/styles/markdown.css
@@ -0,0 +1,147 @@
+.custom-md {
+ h1 {
+ @apply text-3xl;
+ }
+
+ h1, h2, h3, h4, h5, h6 {
+ .anchor {
+ @apply transition -m-0.5 ml-[0.2ch] p-0.5 select-none opacity-0 no-underline !important;
+
+ .anchor-icon {
+ @apply mx-[0.45ch] !important;
+ }
+ }
+
+ &:hover {
+ .anchor {
+ @apply opacity-100 !important;
+ }
+ }
+ }
+
+ a:not(.no-styling) {
+ @apply relative bg-none font-medium text-[var(--primary)]
+ underline decoration-[var(--link-underline)] decoration-1 decoration-dashed underline-offset-4;
+ box-decoration-break: clone;
+ -webkit-box-decoration-break: clone;
+
+ &:hover, &:active {
+ @apply decoration-transparent;
+ background: var(--btn-plain-bg-hover);
+ border-bottom: 1px dashed var(--link-hover);
+ text-decoration: none;
+ }
+ }
+
+ code {
+ @apply bg-[var(--inline-code-bg)] text-[var(--inline-code-color)] px-1 py-0.5 rounded-md overflow-hidden;
+
+ font-family: 'JetBrains Mono Variable', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
+ &:before {
+ content:none;
+ }
+ &:after {
+ content:none;
+ }
+
+ counter-reset: line;
+ span.line {
+ &:before {
+ @apply text-white/25 mr-4 w-4 inline-block;
+ content: counter(line);
+ counter-increment: line;
+ direction: rtl;
+ }
+ &:last-child:empty, &:last-child:has(> span:empty:only-child) {
+ display: none;
+ }
+ }
+ }
+
+ .copy-btn {
+ @apply opacity-0 shadow-md shadow-black/30 absolute active:scale-90 h-8 w-8 top-3 right-3 text-sm rounded-lg transition-all ease-in-out z-20 cursor-pointer border-0;
+ background: var(--btn-regular-bg);
+ }
+ .copy-btn:hover {
+ background: var(--btn-regular-bg-hover);
+ }
+ .frame:hover .copy-btn {
+ opacity: 1;
+ }
+
+ .copy-btn-icon {
+ @apply absolute top-1/2 left-1/2 transition -translate-x-1/2 -translate-y-1/2 w-4 h-4 fill-white pointer-events-none;
+ fill: var(--btn-content);
+ }
+ .copy-btn .copy-icon {
+ @apply opacity-100 fill-white dark:fill-white/75;
+ fill: var(--btn-content);
+ }
+ .copy-btn.success .copy-icon {
+ @apply opacity-0 fill-[var(--deep-text)]
+
+ }
+ .copy-btn .success-icon {
+ @apply opacity-0 fill-white;
+ fill: var(--btn-content);
+
+ }
+ .copy-btn.success .success-icon {
+ @apply opacity-100
+
+ }
+
+ .expressive-code {
+ @apply my-4;
+ }
+
+
+ ul, ol {
+ li::marker {
+ @apply text-[var(--primary)];
+ }
+ }
+
+ blockquote {
+ @apply not-italic border-transparent relative;
+ font-weight: inherit;
+
+ &:before {
+ @apply content-[''] absolute -left-1 block transition bg-[var(--btn-regular-bg)] h-full w-1 rounded-full;
+ }
+
+ /* Remove the double quotes from default styles */
+ p:before, p:after {
+ @apply content-none;
+ }
+
+ }
+
+ .katex-display-container {
+ max-width: 100%;
+ overflow-x: auto;
+ margin: 1em 0;
+ }
+
+}
+
+/* 修复代码块内列表项标记颜色问题 */
+.custom-md .expressive-code ul li::marker,
+.custom-md .expressive-code ol li::marker {
+ @apply text-inherit;
+}
+
+/* 修复表格对齐问题 */
+.custom-md {
+ table {
+ th[align="left"], td[align="left"] {
+ text-align: left;
+ }
+ th[align="center"], td[align="center"] {
+ text-align: center;
+ }
+ th[align="right"], td[align="right"] {
+ text-align: right;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/styles/navbar.css b/src/styles/navbar.css
new file mode 100644
index 0000000..3c0398e
--- /dev/null
+++ b/src/styles/navbar.css
@@ -0,0 +1,804 @@
+/**
+ * 统一导航栏样式
+ *
+ * 模式说明：
+ * ============================================
+ * 1. 壁纸模式 (backgroundWallpaper.mode):
+ * - "banner": 横幅壁纸模式 (有 #banner-wrapper)
+ * - "overlay": 全屏壁纸模式 (body.wallpaper-transparent)
+ * - "none": 纯色背景无壁纸
+ *
+ * 2. 导航栏透明模式 (transparentMode):
+ * - "semi": 半透明加圆角 (始终半透明)
+ * - "full": 完全透明 (始终透明)
+ * - "semifull": 动态透明 (未滚动时透明，滚动后变半透明)
+ *
+ * 3. 其他条件:
+ * - 桌面端: min-width: 1024px
+ * - 移动端: max-width: 1023px
+ * - 首页: data-is-home="true" (移动端仅在首页生效)
+ * - 滚动状态: .scrolled (仅 semifull 模式)
+ * - 亮色/暗色主题: :root.dark
+ * ============================================
+ */
+
+/* ============================================
+ * 基础导航栏样式
+ * 适用: 所有模式，所有设备
+ * ============================================ */
+ #navbar > div {
+ background: var(--card-bg);
+ border: 1px solid transparent;
+ border-radius: 0 0 0.75rem 0.75rem;
+ transition: all var(--duration-medium) var(--ease-standard);
+}
+
+/* ============================================
+ * 桌面端 - 亮色主题 - Banner模式
+ * 适用: 桌面端(≥1024px) + Banner模式 + 亮色主题
+ * ============================================ */
+@media (min-width: 1024px) {
+ /*
+ * 透明模式: "semi" (半透明)
+ * 条件: Banner模式 + transparentMode="semi"
+ * 效果: 半透明背景 + 模糊 + 圆角 + 阴影
+ */
+ #banner-wrapper ~ * #navbar[data-transparent-mode="semi"] > div,
+ body:has(#banner-wrapper) #navbar[data-transparent-mode="semi"] > div {
+ backdrop-filter: blur(var(--blur-2xl)) !important;
+ background: rgba(255, 255, 255, var(--opacity-55)) !important;
+ border: 1px solid rgba(255, 255, 255, var(--opacity-55)) !important;
+ border-radius: 0 0 0.75rem 0.75rem !important;
+ box-shadow: var(--shadow-navbar) !important;
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+ }
+
+ /*
+ * 透明模式: "full" (完全透明)
+ * 条件: Banner模式 + transparentMode="full"
+ * 效果: 完全透明，无背景、无边框、无阴影
+ */
+ #banner-wrapper ~ * #navbar[data-transparent-mode="full"] > div,
+ body:has(#banner-wrapper) #navbar[data-transparent-mode="full"] > div {
+ backdrop-filter: none !important;
+ background: transparent !important;
+ border: none !important;
+ border-radius: 0 !important;
+ box-shadow: none !important;
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+ }
+
+ /*
+ * 透明模式: "semifull" (动态透明 - 未滚动状态)
+ * 条件: Banner模式 + transparentMode="semifull" + 未滚动
+ * 效果: 完全透明，有圆角但无背景
+ */
+ #banner-wrapper ~ * #navbar[data-transparent-mode="semifull"] > div,
+ body:has(#banner-wrapper) #navbar[data-transparent-mode="semifull"] > div {
+ backdrop-filter: none !important;
+ background: transparent !important;
+ border: 1px solid transparent !important;
+ border-radius: 0 0 0.75rem 0.75rem !important;
+ box-shadow: none !important;
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+ }
+
+ /*
+ * 透明模式: "semifull" (动态透明 - 滚动状态)
+ * 条件: Banner模式 + transparentMode="semifull" + .scrolled
+ * 效果: 滚动后变为半透明背景 + 模糊 + 圆角 + 阴影
+ */
+ #banner-wrapper ~ * #navbar[data-transparent-mode="semifull"].scrolled > div,
+ body:has(#banner-wrapper) #navbar[data-transparent-mode="semifull"].scrolled > div {
+ backdrop-filter: blur(var(--blur-2xl)) !important;
+ background: rgba(255, 255, 255, var(--opacity-55)) !important;
+ border: 1px solid rgba(255, 255, 255, var(--opacity-55)) !important;
+ border-radius: 0 0 0.75rem 0.75rem !important;
+ box-shadow: var(--shadow-navbar) !important;
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+ }
+}
+
+/* ============================================
+ * 桌面端 - 亮色主题 - 壁纸模式 (Overlay)
+ * 适用: 桌面端(≥1024px) + 壁纸模式 + 亮色主题
+ * ============================================ */
+@media (min-width: 1024px) {
+ /*
+ * 透明模式: "semi" (半透明)
+ * 条件: 壁纸模式 (body.wallpaper-transparent) + transparentMode="semi"
+ * 效果: 半透明背景 + 模糊 + 圆角 + 阴影
+ */
+ body.wallpaper-transparent #navbar[data-transparent-mode="semi"] > div {
+ backdrop-filter: blur(var(--blur-2xl)) !important;
+ background: rgba(255, 255, 255, var(--opacity-55)) !important;
+ border: 1px solid rgba(255, 255, 255, var(--opacity-55)) !important;
+ border-radius: 0 0 0.75rem 0.75rem !important;
+ box-shadow: var(--shadow-navbar) !important;
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+ }
+
+ /*
+ * 透明模式: "full" (完全透明)
+ * 条件: 壁纸模式 + transparentMode="full"
+ * 效果: 完全透明，无背景、无边框、无阴影
+ */
+ body.wallpaper-transparent #navbar[data-transparent-mode="full"] > div {
+ backdrop-filter: none !important;
+ background: transparent !important;
+ border: none !important;
+ border-radius: 0 !important;
+ box-shadow: none !important;
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+ }
+
+ /*
+ * 透明模式: "semifull" (动态透明 - 未滚动状态)
+ * 条件: 壁纸模式 + transparentMode="semifull" + 未滚动
+ * 效果: 半透明背景 + 模糊 (壁纸模式下始终半透明)
+ */
+ body.wallpaper-transparent #navbar[data-transparent-mode="semifull"] > div {
+ backdrop-filter: blur(var(--blur-2xl)) !important;
+ background: rgba(255, 255, 255, var(--opacity-55)) !important;
+ border: 1px solid rgba(255, 255, 255, var(--opacity-55)) !important;
+ border-radius: 0 0 0.75rem 0.75rem !important;
+ box-shadow: var(--shadow-navbar) !important;
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+ }
+
+ /*
+ * 透明模式: "semifull" (动态透明 - 滚动状态)
+ * 条件: 壁纸模式 + transparentMode="semifull" + .scrolled
+ * 效果: 滚动后保持半透明 (与未滚动状态相同)
+ */
+ body.wallpaper-transparent #navbar[data-transparent-mode="semifull"].scrolled > div {
+ backdrop-filter: blur(var(--blur-2xl)) !important;
+ background: rgba(255, 255, 255, var(--opacity-55)) !important;
+ border: 1px solid rgba(255, 255, 255, var(--opacity-55)) !important;
+ border-radius: 0 0 0.75rem 0.75rem !important;
+ box-shadow: var(--shadow-navbar) !important;
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+ }
+}
+
+/* ============================================
+ * 移动端 - 亮色主题 - Banner模式
+ * 适用: 移动端(≤1023px) + Banner模式 + 亮色主题 + 仅首页生效
+ * 注意: 移动端透明效果仅在首页 (data-is-home="true") 生效
+ * ============================================ */
+@media (max-width: 1023px) {
+ /*
+ * 透明模式: "semi" (半透明)
+ * 条件: Banner模式 + transparentMode="semi" + 首页
+ * 效果: 半透明背景 + 模糊 + 圆角 + 阴影
+ */
+ #banner-wrapper ~ * #navbar[data-transparent-mode="semi"][data-is-home="true"] > div,
+ body:has(#banner-wrapper) #navbar[data-transparent-mode="semi"][data-is-home="true"] > div {
+ backdrop-filter: blur(var(--blur-2xl)) !important;
+ background: rgba(255, 255, 255, var(--opacity-55)) !important;
+ border: 1px solid rgba(255, 255, 255, var(--opacity-55)) !important;
+ border-radius: 0 0 0.75rem 0.75rem !important;
+ box-shadow: var(--shadow-navbar) !important;
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+ }
+
+ /*
+ * 透明模式: "full" (完全透明)
+ * 条件: Banner模式 + transparentMode="full" + 首页
+ * 效果: 完全透明，无背景、无边框、无阴影
+ */
+ #banner-wrapper ~ * #navbar[data-transparent-mode="full"][data-is-home="true"] > div,
+ body:has(#banner-wrapper) #navbar[data-transparent-mode="full"][data-is-home="true"] > div {
+ backdrop-filter: none !important;
+ background: transparent !important;
+ border: none !important;
+ border-radius: 0 !important;
+ box-shadow: none !important;
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+ }
+
+ /*
+ * 透明模式: "semifull" (动态透明 - 未滚动状态)
+ * 条件: Banner模式 + transparentMode="semifull" + 首页 + 未滚动
+ * 效果: 完全透明，有圆角但无背景
+ */
+ #banner-wrapper ~ * #navbar[data-transparent-mode="semifull"][data-is-home="true"] > div,
+ body:has(#banner-wrapper) #navbar[data-transparent-mode="semifull"][data-is-home="true"] > div {
+ backdrop-filter: none !important;
+ background: transparent !important;
+ border: 1px solid transparent !important;
+ border-radius: 0 0 0.75rem 0.75rem !important;
+ box-shadow: none !important;
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+ }
+
+ /*
+ * 透明模式: "semifull" (动态透明 - 滚动状态)
+ * 条件: Banner模式 + transparentMode="semifull" + 首页 + .scrolled
+ * 效果: 滚动后变为半透明背景 + 模糊 + 圆角 + 阴影
+ */
+ #banner-wrapper ~ * #navbar[data-transparent-mode="semifull"][data-is-home="true"].scrolled > div,
+ body:has(#banner-wrapper) #navbar[data-transparent-mode="semifull"][data-is-home="true"].scrolled > div {
+ backdrop-filter: blur(var(--blur-2xl)) !important;
+ background: rgba(255, 255, 255, var(--opacity-55)) !important;
+ border: 1px solid rgba(255, 255, 255, var(--opacity-55)) !important;
+ border-radius: 0 0 0.75rem 0.75rem !important;
+ box-shadow: var(--shadow-navbar) !important;
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+ }
+}
+
+/* ============================================
+ * 移动端 - 亮色主题 - 壁纸模式 (Overlay)
+ * 适用: 移动端(≤1023px) + 壁纸模式 + 亮色主题 + 仅首页生效
+ * ============================================ */
+@media (max-width: 1023px) {
+ /*
+ * 透明模式: "semi" (半透明)
+ * 条件: 壁纸模式 + transparentMode="semi" + 首页
+ * 效果: 半透明背景 + 模糊 + 圆角 + 阴影
+ */
+ body.wallpaper-transparent #navbar[data-transparent-mode="semi"][data-is-home="true"] > div {
+ backdrop-filter: blur(var(--blur-2xl)) !important;
+ background: rgba(255, 255, 255, var(--opacity-55)) !important;
+ border: 1px solid rgba(255, 255, 255, var(--opacity-55)) !important;
+ border-radius: 0 0 0.75rem 0.75rem !important;
+ box-shadow: var(--shadow-navbar) !important;
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+ }
+
+ /*
+ * 透明模式: "full" (完全透明)
+ * 条件: 壁纸模式 + transparentMode="full" + 首页
+ * 效果: 完全透明，无背景、无边框、无阴影
+ */
+ body.wallpaper-transparent #navbar[data-transparent-mode="full"][data-is-home="true"] > div {
+ backdrop-filter: none !important;
+ background: transparent !important;
+ border: none !important;
+ border-radius: 0 !important;
+ box-shadow: none !important;
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+ }
+
+ /*
+ * 透明模式: "semifull" (动态透明 - 未滚动状态)
+ * 条件: 壁纸模式 + transparentMode="semifull" + 首页 + 未滚动
+ * 效果: 半透明背景 + 模糊 (壁纸模式下始终半透明)
+ */
+ body.wallpaper-transparent #navbar[data-transparent-mode="semifull"][data-is-home="true"] > div {
+ backdrop-filter: blur(var(--blur-2xl)) !important;
+ background: rgba(255, 255, 255, var(--opacity-55)) !important;
+ border: 1px solid rgba(255, 255, 255, var(--opacity-55)) !important;
+ border-radius: 0 0 0.75rem 0.75rem !important;
+ box-shadow: var(--shadow-navbar) !important;
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+ }
+
+ /*
+ * 透明模式: "semifull" (动态透明 - 滚动状态)
+ * 条件: 壁纸模式 + transparentMode="semifull" + 首页 + .scrolled
+ * 效果: 滚动后保持半透明 (与未滚动状态相同)
+ */
+ body.wallpaper-transparent #navbar[data-transparent-mode="semifull"][data-is-home="true"].scrolled > div {
+ backdrop-filter: blur(var(--blur-2xl)) !important;
+ background: rgba(255, 255, 255, var(--opacity-55)) !important;
+ border: 1px solid rgba(255, 255, 255, var(--opacity-55)) !important;
+ border-radius: 0 0 0.75rem 0.75rem !important;
+ box-shadow: var(--shadow-navbar) !important;
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+ }
+}
+
+/* ============================================
+ * 桌面端 - 暗色主题 - Banner模式
+ * 适用: 桌面端(≥1024px) + Banner模式 + 暗色主题 (:root.dark)
+ * ============================================ */
+@media (min-width: 1024px) {
+ /*
+ * 透明模式: "semi" (半透明) - 暗色主题
+ * 条件: Banner模式 + transparentMode="semi" + 暗色主题
+ * 效果: 暗色半透明背景 + 模糊 + 圆角 + 阴影
+ */
+ :root.dark #banner-wrapper ~ * #navbar[data-transparent-mode="semi"] > div,
+ :root.dark body:has(#banner-wrapper) #navbar[data-transparent-mode="semi"] > div {
+ background: rgba(0, 0, 0, var(--opacity-55)) !important;
+ border: 1px solid rgba(0, 0, 0, var(--opacity-55)) !important;
+ box-shadow: var(--shadow-navbar-dark) !important;
+ }
+
+ /*
+ * 透明模式: "full" (完全透明) - 暗色主题
+ * 条件: Banner模式 + transparentMode="full" + 暗色主题
+ * 效果: 完全透明，无背景、无边框、无阴影
+ */
+ :root.dark #banner-wrapper ~ * #navbar[data-transparent-mode="full"] > div,
+ :root.dark body:has(#banner-wrapper) #navbar[data-transparent-mode="full"] > div {
+ background: transparent !important;
+ border: none !important;
+ box-shadow: none !important;
+ }
+
+ /*
+ * 透明模式: "semifull" (动态透明 - 未滚动状态) - 暗色主题
+ * 条件: Banner模式 + transparentMode="semifull" + 暗色主题 + 未滚动
+ * 效果: 完全透明，有圆角但无背景
+ */
+ :root.dark #banner-wrapper ~ * #navbar[data-transparent-mode="semifull"] > div,
+ :root.dark body:has(#banner-wrapper) #navbar[data-transparent-mode="semifull"] > div {
+ background: transparent !important;
+ border: 1px solid transparent !important;
+ box-shadow: none !important;
+ }
+
+ /*
+ * 透明模式: "semifull" (动态透明 - 滚动状态) - 暗色主题
+ * 条件: Banner模式 + transparentMode="semifull" + 暗色主题 + .scrolled
+ * 效果: 滚动后变为暗色半透明背景 + 模糊 + 圆角 + 阴影
+ */
+ :root.dark #banner-wrapper ~ * #navbar[data-transparent-mode="semifull"].scrolled > div,
+ :root.dark body:has(#banner-wrapper) #navbar[data-transparent-mode="semifull"].scrolled > div {
+ background: rgba(0, 0, 0, var(--opacity-55)) !important;
+ border: 1px solid rgba(0, 0, 0, var(--opacity-55)) !important;
+ box-shadow: var(--shadow-navbar-dark) !important;
+ }
+}
+
+/* ============================================
+ * 桌面端 - 暗色主题 - 壁纸模式 (Overlay)
+ * 适用: 桌面端(≥1024px) + 壁纸模式 + 暗色主题 (:root.dark)
+ * ============================================ */
+@media (min-width: 1024px) {
+ /*
+ * 透明模式: "semi" (半透明) - 暗色主题
+ * 条件: 壁纸模式 + transparentMode="semi" + 暗色主题
+ * 效果: 暗色半透明背景 + 模糊 + 圆角 + 阴影
+ */
+ :root.dark body.wallpaper-transparent #navbar[data-transparent-mode="semi"] > div {
+ background: rgba(0, 0, 0, var(--opacity-55)) !important;
+ border: 1px solid rgba(0, 0, 0, var(--opacity-55)) !important;
+ box-shadow: var(--shadow-navbar-dark) !important;
+ }
+
+ /*
+ * 透明模式: "full" (完全透明) - 暗色主题
+ * 条件: 壁纸模式 + transparentMode="full" + 暗色主题
+ * 效果: 完全透明，无背景、无边框、无阴影
+ */
+ :root.dark body.wallpaper-transparent #navbar[data-transparent-mode="full"] > div {
+ background: transparent !important;
+ border: none !important;
+ box-shadow: none !important;
+ }
+
+ /*
+ * 透明模式: "semifull" (动态透明 - 未滚动状态) - 暗色主题
+ * 条件: 壁纸模式 + transparentMode="semifull" + 暗色主题 + 未滚动
+ * 效果: 暗色半透明背景 + 模糊 (壁纸模式下始终半透明)
+ */
+ :root.dark body.wallpaper-transparent #navbar[data-transparent-mode="semifull"] > div {
+ background: rgba(0, 0, 0, var(--opacity-55)) !important;
+ border: 1px solid rgba(0, 0, 0, var(--opacity-55)) !important;
+ box-shadow: var(--shadow-navbar-dark) !important;
+ }
+
+ /*
+ * 透明模式: "semifull" (动态透明 - 滚动状态) - 暗色主题
+ * 条件: 壁纸模式 + transparentMode="semifull" + 暗色主题 + .scrolled
+ * 效果: 滚动后保持暗色半透明 (与未滚动状态相同)
+ */
+ :root.dark body.wallpaper-transparent #navbar[data-transparent-mode="semifull"].scrolled > div {
+ background: rgba(0, 0, 0, var(--opacity-55)) !important;
+ border: 1px solid rgba(0, 0, 0, var(--opacity-55)) !important;
+ box-shadow: var(--shadow-navbar-dark) !important;
+ }
+}
+
+/* ============================================
+ * 移动端 - 暗色主题 - Banner模式
+ * 适用: 移动端(≤1023px) + Banner模式 + 暗色主题 + 仅首页生效
+ * ============================================ */
+@media (max-width: 1023px) {
+ /*
+ * 透明模式: "semi" (半透明) - 暗色主题
+ * 条件: Banner模式 + transparentMode="semi" + 暗色主题 + 首页
+ * 效果: 暗色半透明背景 + 模糊 + 圆角 + 阴影
+ */
+ :root.dark #banner-wrapper ~ * #navbar[data-transparent-mode="semi"][data-is-home="true"] > div,
+ :root.dark body:has(#banner-wrapper) #navbar[data-transparent-mode="semi"][data-is-home="true"] > div {
+ background: rgba(0, 0, 0, var(--opacity-55)) !important;
+ border: 1px solid rgba(0, 0, 0, var(--opacity-55)) !important;
+ box-shadow: var(--shadow-navbar-dark) !important;
+ }
+
+ /*
+ * 透明模式: "full" (完全透明) - 暗色主题
+ * 条件: Banner模式 + transparentMode="full" + 暗色主题 + 首页
+ * 效果: 完全透明，无背景、无边框、无阴影
+ */
+ :root.dark #banner-wrapper ~ * #navbar[data-transparent-mode="full"][data-is-home="true"] > div,
+ :root.dark body:has(#banner-wrapper) #navbar[data-transparent-mode="full"][data-is-home="true"] > div {
+ background: transparent !important;
+ border: none !important;
+ box-shadow: none !important;
+ }
+
+ /*
+ * 透明模式: "semifull" (动态透明 - 未滚动状态) - 暗色主题
+ * 条件: Banner模式 + transparentMode="semifull" + 暗色主题 + 首页 + 未滚动
+ * 效果: 完全透明，有圆角但无背景
+ */
+ :root.dark #banner-wrapper ~ * #navbar[data-transparent-mode="semifull"][data-is-home="true"] > div,
+ :root.dark body:has(#banner-wrapper) #navbar[data-transparent-mode="semifull"][data-is-home="true"] > div {
+ background: transparent !important;
+ border: 1px solid transparent !important;
+ box-shadow: none !important;
+ }
+
+ /*
+ * 透明模式: "semifull" (动态透明 - 滚动状态) - 暗色主题
+ * 条件: Banner模式 + transparentMode="semifull" + 暗色主题 + 首页 + .scrolled
+ * 效果: 滚动后变为暗色半透明背景 + 模糊 + 圆角 + 阴影
+ */
+ :root.dark #banner-wrapper ~ * #navbar[data-transparent-mode="semifull"][data-is-home="true"].scrolled > div,
+ :root.dark body:has(#banner-wrapper) #navbar[data-transparent-mode="semifull"][data-is-home="true"].scrolled > div {
+ background: rgba(0, 0, 0, var(--opacity-55)) !important;
+ border: 1px solid rgba(0, 0, 0, var(--opacity-55)) !important;
+ box-shadow: var(--shadow-navbar-dark) !important;
+ }
+}
+
+/* ============================================
+ * 移动端 - 暗色主题 - 壁纸模式 (Overlay)
+ * 适用: 移动端(≤1023px) + 壁纸模式 + 暗色主题 + 仅首页生效
+ * ============================================ */
+@media (max-width: 1023px) {
+ /*
+ * 透明模式: "semi" (半透明) - 暗色主题
+ * 条件: 壁纸模式 + transparentMode="semi" + 暗色主题 + 首页
+ * 效果: 暗色半透明背景 + 模糊 + 圆角 + 阴影
+ */
+ :root.dark body.wallpaper-transparent #navbar[data-transparent-mode="semi"][data-is-home="true"] > div {
+ background: rgba(0, 0, 0, var(--opacity-55)) !important;
+ border: 1px solid rgba(0, 0, 0, var(--opacity-55)) !important;
+ box-shadow: var(--shadow-navbar-dark) !important;
+ }
+
+ /*
+ * 透明模式: "full" (完全透明) - 暗色主题
+ * 条件: 壁纸模式 + transparentMode="full" + 暗色主题 + 首页
+ * 效果: 完全透明，无背景、无边框、无阴影
+ */
+ :root.dark body.wallpaper-transparent #navbar[data-transparent-mode="full"][data-is-home="true"] > div {
+ background: transparent !important;
+ border: none !important;
+ box-shadow: none !important;
+ }
+
+ /*
+ * 透明模式: "semifull" (动态透明 - 未滚动状态) - 暗色主题
+ * 条件: 壁纸模式 + transparentMode="semifull" + 暗色主题 + 首页 + 未滚动
+ * 效果: 暗色半透明背景 + 模糊 (壁纸模式下始终半透明)
+ */
+ :root.dark body.wallpaper-transparent #navbar[data-transparent-mode="semifull"][data-is-home="true"] > div {
+ background: transparent !important;
+ border: none !important;
+ box-shadow: none !important;
+ }
+
+ /*
+ * 透明模式: "semifull" (动态透明 - 滚动状态) - 暗色主题
+ * 条件: 壁纸模式 + transparentMode="semifull" + 暗色主题 + 首页 + .scrolled
+ * 效果: 滚动后变为暗色半透明背景 + 模糊 + 圆角 + 阴影
+ */
+ :root.dark body.wallpaper-transparent #navbar[data-transparent-mode="semifull"][data-is-home="true"].scrolled > div {
+ background: rgba(0, 0, 0, var(--opacity-55)) !important;
+ border: 1px solid rgba(0, 0, 0, var(--opacity-55)) !important;
+ box-shadow: var(--shadow-navbar-dark) !important;
+ }
+}
+
+/* ============================================
+ * 响应式优化
+ * ============================================ */
+
+/* 平板设备优化 (768px - 1279px) */
+@media (min-width: 768px) and (max-width: 1279px) {
+ #navbar > div {
+ border-radius: 0 0 1rem 1rem !important;
+ }
+
+ /* 隐藏导航栏主导航项的图标，只显示文字 */
+ /* 只隐藏主导航栏按钮和链接中的图标，保留下拉菜单中的图标 */
+ #navbar .dropdown-container > .btn-plain .navbar-icon,
+ #navbar .dropdown-container > a.btn-plain .navbar-icon {
+ display: none !important;
+ }
+}
+
+/* 小屏手机优化 (≤480px) */
+@media (max-width: 480px) {
+ #navbar > div {
+ border-radius: 0 0 0.5rem 0.5rem !important;
+ margin: 0 !important;
+ padding-left: 1rem !important;
+ padding-right: 1rem !important;
+ max-width: none !important;
+ width: 100% !important;
+ }
+}
+
+/* 手机端导航栏全宽优化 (≤768px) */
+/* 修复768px断点问题：确保在≤768px时菜单隐藏，按钮显示 */
+@media (max-width: 768px) {
+ #navbar > div {
+ max-width: none !important;
+ width: 100% !important;
+ margin-left: 0 !important;
+ margin-right: 0 !important;
+ }
+
+ /* 强制隐藏导航菜单（覆盖Tailwind的md:flex） */
+ /* 直接选择包含导航链接的div容器（第二个直接子元素） */
+ #navbar > div > div:nth-child(2) {
+ display: none !important;
+ }
+
+ /* 强制显示菜单按钮（覆盖Tailwind的md:!hidden） */
+ #navbar #nav-menu-switch {
+ display: flex !important;
+ }
+}
+
+/* ============================================
+ * 下拉菜单和面板样式 - 亮色主题
+ * 适用: 所有模式、所有设备 + 亮色主题
+ * 说明: 下拉菜单和面板在所有模式下样式统一，只需区分亮色/暗色主题
+ * ============================================ */
+/* 桌面端 - 所有面板样式 */
+@media (min-width: 1024px) {
+ /* 二级菜单 (下拉菜单内容) */
+ .dropdown-content {
+ backdrop-filter: blur(var(--blur-2xl)) !important;
+ background: rgba(255, 255, 255, var(--opacity-90)) !important;
+ border: 1px solid rgba(255, 255, 255, var(--opacity-90)) !important;
+ box-shadow: var(--shadow-navbar) !important;
+ }
+
+ /* 主题色设置面板 */
+ #display-setting {
+ backdrop-filter: blur(var(--blur-2xl)) !important;
+ background: rgba(255, 255, 255, var(--opacity-90)) !important;
+ border: 1px solid rgba(255, 255, 255, var(--opacity-90)) !important;
+ box-shadow: var(--shadow-navbar) !important;
+ }
+
+ /* 壁纸模式切换面板 */
+ #wallpaper-mode-panel .float-panel {
+ backdrop-filter: blur(var(--blur-2xl)) !important;
+ background: rgba(255, 255, 255, var(--opacity-90)) !important;
+ border: 1px solid rgba(255, 255, 255, var(--opacity-90)) !important;
+ box-shadow: var(--shadow-navbar) !important;
+ }
+
+ /* 主题切换面板 */
+ #theme-mode-panel .float-panel {
+ backdrop-filter: blur(var(--blur-2xl)) !important;
+ background: rgba(255, 255, 255, var(--opacity-90)) !important;
+ border: 1px solid rgba(255, 255, 255, var(--opacity-90)) !important;
+ box-shadow: var(--shadow-navbar) !important;
+ }
+
+ /* 手机端导航菜单面板 */
+ #nav-menu-panel {
+ backdrop-filter: blur(var(--blur-2xl)) !important;
+ background: rgba(255, 255, 255, var(--opacity-90)) !important;
+ border: 1px solid rgba(255, 255, 255, var(--opacity-90)) !important;
+ box-shadow: var(--shadow-navbar) !important;
+ }
+
+ /* 手机端MD导航菜单面板 (目录) */
+ #mobile-toc-panel {
+ backdrop-filter: blur(var(--blur-2xl)) !important;
+ background: rgba(255, 255, 255, var(--opacity-90)) !important;
+ border: 1px solid rgba(255, 255, 255, var(--opacity-90)) !important;
+ box-shadow: var(--shadow-navbar) !important;
+ }
+
+ /* 搜索面板 */
+ #search-panel {
+ backdrop-filter: blur(var(--blur-2xl)) !important;
+ background: rgba(255, 255, 255, var(--opacity-90)) !important;
+ border: 1px solid rgba(255, 255, 255, var(--opacity-90)) !important;
+ box-shadow: var(--shadow-navbar) !important;
+ }
+}
+
+/* 移动端 - 所有面板样式(仅在首页生效) */
+@media (max-width: 1023px) {
+ /* 二级菜单 (下拉菜单内容) - 仅在首页生效 */
+ #navbar[data-is-home="true"] .dropdown-content {
+ backdrop-filter: blur(var(--blur-2xl)) !important;
+ background: rgba(255, 255, 255, var(--opacity-90)) !important;
+ border: 1px solid rgba(255, 255, 255, var(--opacity-90)) !important;
+ box-shadow: var(--shadow-navbar) !important;
+ }
+
+ /* 主题色设置面板 - 仅在首页生效 */
+ #navbar[data-is-home="true"] ~ * #display-setting,
+ #navbar[data-is-home="true"] #display-setting {
+ backdrop-filter: blur(var(--blur-2xl)) !important;
+ background: rgba(255, 255, 255, var(--opacity-90)) !important;
+ border: 1px solid rgba(255, 255, 255, var(--opacity-90)) !important;
+ box-shadow: var(--shadow-navbar) !important;
+ }
+
+ /* 壁纸模式切换面板 - 仅在首页生效 */
+ #navbar[data-is-home="true"] #wallpaper-mode-panel .float-panel {
+ backdrop-filter: blur(var(--blur-2xl)) !important;
+ background: rgba(255, 255, 255, var(--opacity-90)) !important;
+ border: 1px solid rgba(255, 255, 255, var(--opacity-90)) !important;
+ box-shadow: var(--shadow-navbar) !important;
+ }
+
+ /* 主题切换面板 - 仅在首页生效 */
+ #navbar[data-is-home="true"] #theme-mode-panel .float-panel {
+ backdrop-filter: blur(var(--blur-2xl)) !important;
+ background: rgba(255, 255, 255, var(--opacity-90)) !important;
+ border: 1px solid rgba(255, 255, 255, var(--opacity-90)) !important;
+ box-shadow: var(--shadow-navbar) !important;
+ }
+
+ /* 手机端导航菜单面板 - 仅在首页生效 */
+ #navbar[data-is-home="true"] #nav-menu-panel {
+ backdrop-filter: blur(var(--blur-2xl)) !important;
+ background: rgba(255, 255, 255, var(--opacity-90)) !important;
+ border: 1px solid rgba(255, 255, 255, var(--opacity-90)) !important;
+ box-shadow: var(--shadow-navbar) !important;
+ }
+
+ /* 手机端MD导航菜单面板 (目录) - 仅在首页生效 */
+ #navbar[data-is-home="true"] #mobile-toc-panel {
+ backdrop-filter: blur(var(--blur-2xl)) !important;
+ background: rgba(255, 255, 255, var(--opacity-90)) !important;
+ border: 1px solid rgba(255, 255, 255, var(--opacity-90)) !important;
+ box-shadow: var(--shadow-navbar) !important;
+ }
+
+ /* 搜索面板 - 仅在首页生效 */
+ #navbar[data-is-home="true"] #search-panel {
+ backdrop-filter: blur(var(--blur-2xl)) !important;
+ background: rgba(255, 255, 255, var(--opacity-90)) !important;
+ border: 1px solid rgba(255, 255, 255, var(--opacity-90)) !important;
+ box-shadow: var(--shadow-navbar) !important;
+ }
+}
+
+/* ============================================
+ * 下拉菜单和面板样式 - 暗色主题
+ * 适用: 所有模式、所有设备 + 暗色主题 (:root.dark)
+ * ============================================ */
+
+/* 桌面端 - 所有面板样式 - 暗色主题 */
+@media (min-width: 1024px) {
+ /* 二级菜单 (下拉菜单内容) */
+ :root.dark .dropdown-content {
+ background: rgba(0, 0, 0, var(--opacity-90)) !important;
+ border: 1px solid rgba(0, 0, 0, var(--opacity-90)) !important;
+ box-shadow: var(--shadow-navbar-dark) !important;
+ }
+
+ /* 主题色设置面板 */
+ :root.dark #display-setting {
+ background: rgba(0, 0, 0, var(--opacity-90)) !important;
+ border: 1px solid rgba(0, 0, 0, var(--opacity-90)) !important;
+ box-shadow: var(--shadow-navbar-dark) !important;
+ }
+
+ /* 壁纸模式切换面板 */
+ :root.dark #wallpaper-mode-panel .float-panel {
+ background: rgba(0, 0, 0, var(--opacity-90)) !important;
+ border: 1px solid rgba(0, 0, 0, var(--opacity-90)) !important;
+ box-shadow: var(--shadow-navbar-dark) !important;
+ }
+
+ /* 主题切换面板 */
+ :root.dark #theme-mode-panel .float-panel {
+ background: rgba(0, 0, 0, var(--opacity-90)) !important;
+ border: 1px solid rgba(0, 0, 0, var(--opacity-90)) !important;
+ box-shadow: var(--shadow-navbar-dark) !important;
+ }
+
+ /* 手机端导航菜单面板 */
+ :root.dark #nav-menu-panel {
+ background: rgba(0, 0, 0, var(--opacity-90)) !important;
+ border: 1px solid rgba(0, 0, 0, var(--opacity-90)) !important;
+ box-shadow: var(--shadow-navbar-dark) !important;
+ }
+
+ /* 手机端MD导航菜单面板 (目录) */
+ :root.dark #mobile-toc-panel {
+ background: rgba(0, 0, 0, var(--opacity-90)) !important;
+ border: 1px solid rgba(0, 0, 0, var(--opacity-90)) !important;
+ box-shadow: var(--shadow-navbar-dark) !important;
+ }
+
+ /* 搜索面板 */
+ :root.dark #search-panel {
+ background: rgba(0, 0, 0, var(--opacity-90)) !important;
+ border: 1px solid rgba(0, 0, 0, var(--opacity-90)) !important;
+ box-shadow: var(--shadow-navbar-dark) !important;
+ }
+}
+
+/* 移动端 - 所有面板样式 - 暗色主题 (仅在首页生效) */
+@media (max-width: 1023px) {
+ /* 二级菜单 (下拉菜单内容) - 仅在首页生效 */
+ :root.dark #navbar[data-is-home="true"] .dropdown-content {
+ background: rgba(0, 0, 0, var(--opacity-90)) !important;
+ border: 1px solid rgba(0, 0, 0, var(--opacity-90)) !important;
+ box-shadow: var(--shadow-navbar-dark) !important;
+ }
+
+ /* 主题色设置面板 - 仅在首页生效 */
+ :root.dark #navbar[data-is-home="true"] ~ * #display-setting,
+ :root.dark #navbar[data-is-home="true"] #display-setting {
+ background: rgba(0, 0, 0, var(--opacity-90)) !important;
+ border: 1px solid rgba(0, 0, 0, var(--opacity-90)) !important;
+ box-shadow: var(--shadow-navbar-dark) !important;
+ }
+
+ /* 壁纸模式切换面板 - 仅在首页生效 */
+ :root.dark #navbar[data-is-home="true"] #wallpaper-mode-panel .float-panel {
+ background: rgba(0, 0, 0, var(--opacity-90)) !important;
+ border: 1px solid rgba(0, 0, 0, var(--opacity-90)) !important;
+ box-shadow: var(--shadow-navbar-dark) !important;
+ }
+
+ /* 主题切换面板 - 仅在首页生效 */
+ :root.dark #navbar[data-is-home="true"] #theme-mode-panel .float-panel {
+ background: rgba(0, 0, 0, var(--opacity-90)) !important;
+ border: 1px solid rgba(0, 0, 0, var(--opacity-90)) !important;
+ box-shadow: var(--shadow-navbar-dark) !important;
+ }
+
+ /* 手机端导航菜单面板 - 仅在首页生效 */
+ :root.dark #navbar[data-is-home="true"] #nav-menu-panel {
+ background: rgba(0, 0, 0, var(--opacity-90)) !important;
+ border: 1px solid rgba(0, 0, 0, var(--opacity-90)) !important;
+ box-shadow: var(--shadow-navbar-dark) !important;
+ }
+
+ /* 手机端MD导航菜单面板 (目录) - 仅在首页生效 */
+ :root.dark #navbar[data-is-home="true"] #mobile-toc-panel {
+ background: rgba(0, 0, 0, var(--opacity-90)) !important;
+ border: 1px solid rgba(0, 0, 0, var(--opacity-90)) !important;
+ box-shadow: var(--shadow-navbar-dark) !important;
+ }
+
+ /* 搜索面板 - 仅在首页生效 */
+ :root.dark #navbar[data-is-home="true"] #search-panel {
+ background: rgba(0, 0, 0, var(--opacity-90)) !important;
+ border: 1px solid rgba(0, 0, 0, var(--opacity-90)) !important;
+ box-shadow: var(--shadow-navbar-dark) !important;
+ }
+}
+
+/* ============================================
+ * 全宽导航栏适配 (Full Width Navbar)
+ * 确保在开启全宽模式时覆盖所有圆角和宽度限制
+ * 针对所有模式（Banner模式、壁纸模式、透明模式）统一去除圆角
+ * 使用高优先级选择器确保覆盖原主题样式
+ * 仅在桌面端 (min-width: 1024px) 生效，移动端保留圆角
+ * ============================================ */
+@media (min-width: 1024px) {
+ #navbar-wrapper #navbar[data-full-width="true"] > div,
+ body:has(#banner-wrapper) #navbar-wrapper #navbar[data-full-width="true"] > div,
+ body.wallpaper-transparent #navbar-wrapper #navbar[data-full-width="true"] > div,
+ #navbar-wrapper #navbar[data-full-width="true"].scrolled > div {
+ border-radius: 0 !important;
+ width: 100% !important;
+ max-width: none !important;
+ margin: 0 !important;
+ }
+}
\ No newline at end of file
diff --git a/src/styles/photoswipe.css b/src/styles/photoswipe.css
new file mode 100644
index 0000000..1b112b6
--- /dev/null
+++ b/src/styles/photoswipe.css
@@ -0,0 +1,15 @@
+
+
+/* PhotoSwipe 按钮样式 */
+.pswp__button {
+ @apply transition bg-black/40 hover:bg-black/50 active:bg-black/60 flex items-center justify-center mr-0 w-12 h-12 !important;
+}
+.pswp__button--zoom, .pswp__button--close {
+ @apply mt-4 rounded-xl active:scale-90 !important;
+}
+.pswp__button--zoom {
+ @apply mr-2.5 !important;
+}
+.pswp__button--close {
+ @apply mr-4 !important;
+}
diff --git a/src/styles/scrollbar.css b/src/styles/scrollbar.css
new file mode 100644
index 0000000..c874683
--- /dev/null
+++ b/src/styles/scrollbar.css
@@ -0,0 +1,84 @@
+.scrollbar-base.os-scrollbar {
+ transition:
+ width 0.15s ease-in-out,
+ height 0.15s ease-in-out,
+ opacity 0.15s,
+ visibility 0.15s,
+ top 0.15s,
+ right 0.15s,
+ bottom 0.15s,
+ left 0.15s;
+ pointer-events: unset;
+}
+
+.scrollbar-base.os-scrollbar.os-scrollbar-horizontal {
+ padding-top: 4px;
+ padding-bottom: 4px;
+ height: 16px;
+}
+
+.scrollbar-base.os-scrollbar.os-scrollbar-horizontal
+ .os-scrollbar-track
+ .os-scrollbar-handle {
+ height: 4px;
+ border-radius: 4px;
+}
+
+.scrollbar-base.os-scrollbar.os-scrollbar-horizontal:hover
+ .os-scrollbar-track
+ .os-scrollbar-handle {
+ height: 8px;
+}
+
+.scrollbar-base.os-scrollbar.os-scrollbar-horizontal.px-2 {
+ padding-left: 8px;
+ padding-right: 8px;
+}
+
+.scrollbar-base.os-scrollbar.os-scrollbar-vertical {
+ padding-left: 4px;
+ padding-right: 4px;
+ width: 16px;
+}
+
+.scrollbar-base.os-scrollbar.os-scrollbar-vertical
+ .os-scrollbar-track
+ .os-scrollbar-handle {
+ width: 4px;
+ border-radius: 4px;
+}
+
+.scrollbar-base.os-scrollbar.os-scrollbar-vertical:hover
+ .os-scrollbar-track
+ .os-scrollbar-handle {
+ width: 8px;
+}
+
+.scrollbar-base.os-scrollbar.os-scrollbar-vertical.py-1 {
+ padding-top: 4px;
+ padding-bottom: 4px;
+}
+
+:root {
+ --os-handle-bg-custom: rgba(0, 0, 0, 0.3);
+ --os-handle-bg-custom-hover: rgba(0, 0, 0, 0.5);
+ --os-handle-bg-custom-active: rgba(0, 0, 0, 0.6);
+}
+
+:root.dark {
+ --os-handle-bg-custom: rgba(255, 255, 255, 0.4);
+ --os-handle-bg-custom-hover: rgba(255, 255, 255, 0.6);
+ --os-handle-bg-custom-active: rgba(255, 255, 255, 0.7);
+}
+
+.scrollbar-auto.os-scrollbar {
+ --os-handle-bg: var(--os-handle-bg-custom);
+ --os-handle-bg-hover: var(--os-handle-bg-custom-hover);
+ --os-handle-bg-active: var(--os-handle-bg-custom-active);
+}
+
+.scrollbar-dark.os-scrollbar {
+ --os-handle-bg: rgba(255, 255, 255, 0.4);
+ --os-handle-bg-hover: rgba(255, 255, 255, 0.6);
+ --os-handle-bg-active: rgba(255, 255, 255, 0.7);
+}
\ No newline at end of file
diff --git a/src/styles/transition.css b/src/styles/transition.css
new file mode 100644
index 0000000..06d3fd9
--- /dev/null
+++ b/src/styles/transition.css
@@ -0,0 +1,270 @@
+/* Page transition animations with Swup*/
+
+/* 主要内容区域的过渡动画 */
+.transition-main {
+ transition:
+ opacity 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
+ transform 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+/* 离开动画 - 内容向右上滑出并淡出 */
+.transition-leaving {
+ transition:
+ transform 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19),
+ opacity 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
+}
+
+html.is-changing .transition-main {
+ transition:
+ opacity 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
+ transform 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+html.is-leaving .transition-main {
+ transition:
+ opacity 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19),
+ transform 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
+}
+
+/* 进入动画 - 从右下角轻微滑入 */
+html.is-animating .transition-main {
+ opacity: 0;
+ transform: translateY(1.5rem) translateX(0.5rem);
+}
+
+/* 离开动画 - 向左上角滑出 */
+html.is-animating.is-leaving .transition-leaving {
+ transform: translateY(-1rem) translateX(-0.5rem);
+ opacity: 0;
+}
+
+/* Swup fade 动画 - 保持兼容性 */
+html.is-changing .transition-swup-fade {
+ transition: all 300ms ease-out;
+}
+
+html.is-animating .transition-swup-fade {
+ opacity: 0;
+ transform: translateY(1.5rem);
+}
+
+/* 增强的淡入动画 - 添加侧滑效果 */
+@keyframes fade-in-up {
+ from {
+ opacity: 0;
+ transform: translateY(1.5rem) translateX(0.5rem);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0) translateX(0);
+ }
+}
+
+@keyframes fade-out-down {
+ from {
+ opacity: 1;
+ transform: translateY(0) translateX(0);
+ }
+ to {
+ opacity: 0;
+ transform: translateY(-1rem) translateX(-0.5rem);
+ }
+}
+
+/* 页面加载动画 */
+.onload-animation {
+ opacity: 0;
+ animation: fade-in-up 300ms ease-out forwards;
+}
+
+.onload-animation-fade-in {
+ opacity: 0;
+ animation: fade-in 300ms ease-in forwards;
+}
+
+@keyframes fade-in {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+/* 渐进式动画延迟 */
+.onload-animation:nth-child(1) { animation-delay: 0ms; }
+.onload-animation:nth-child(2) { animation-delay: 50ms; }
+.onload-animation:nth-child(3) { animation-delay: 100ms; }
+.onload-animation:nth-child(4) { animation-delay: 150ms; }
+.onload-animation:nth-child(5) { animation-delay: 200ms; }
+
+/* 特殊元素的动画 */
+.transition-slide-in {
+ opacity: 0;
+ transform: translateY(20px) translateX(8px);
+ transition: all 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.transition-slide-in.active {
+ opacity: 1;
+ transform: translateY(0) translateX(0);
+}
+
+/* 卡片动画 */
+.card-animation {
+ opacity: 0;
+ transform: translateY(30px) translateX(10px) scale(0.98);
+ transition: all 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.card-animation.visible {
+ opacity: 1;
+ transform: translateY(0) translateX(0) scale(1);
+}
+
+/* 导航动画 */
+.nav-animation {
+ opacity: 0;
+ transform: translateX(-20px);
+ transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.nav-animation.loaded {
+ opacity: 1;
+ transform: translateX(0);
+}
+
+/* 性能优化 */
+.transition-main,
+.transition-leaving,
+.onload-animation,
+.transition-slide-in,
+.card-animation {
+ backface-visibility: hidden;
+ -webkit-font-smoothing: antialiased;
+}
+
+/* 移动端页面切换性能优化 */
+@media (max-width: 768px) {
+ /* 为所有动画元素添加硬件加速 */
+ .transition-main,
+ .transition-leaving,
+ .onload-animation,
+ .transition-slide-in,
+ .card-animation,
+ .nav-animation,
+ #dynamic-sidebar,
+ .widget-container {
+ -webkit-transform: translateZ(0);
+ transform: translateZ(0);
+ -webkit-backface-visibility: hidden;
+ backface-visibility: hidden;
+ -webkit-perspective: 1000;
+ perspective: 1000;
+ will-change: transform, opacity;
+ }
+
+ /* 优化页面切换动画 */
+ html.is-changing .transition-main {
+ transition:
+ opacity 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
+ transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+ }
+
+ html.is-leaving .transition-main {
+ transition:
+ opacity 200ms cubic-bezier(0.55, 0.055, 0.675, 0.19),
+ transform 200ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
+ }
+
+ /* 减少移动端动画幅度 */
+ html.is-animating .transition-main {
+ opacity: 0;
+ transform: translateY(0.5rem) translateX(0.2rem);
+ }
+
+ html.is-animating.is-leaving .transition-leaving {
+ transform: translateY(-0.4rem) translateX(-0.2rem);
+ opacity: 0;
+ }
+
+ /* 优化侧边栏动画 */
+ #dynamic-sidebar {
+ transition: all 0.2s ease-in-out;
+ }
+
+ .widget-container {
+ transition: all 0.2s ease-in-out;
+ }
+
+ /* 防止页面加载时的闪烁 */
+ body {
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ }
+
+ /* 优化网格布局切换 */
+ #main-grid {
+ transition: all 0.3s ease-in-out;
+ }
+
+ /* 防止图片加载时的闪烁 */
+ img {
+ -webkit-transform: translateZ(0);
+ transform: translateZ(0);
+ }
+
+ /* 优化滚动行为 */
+ html {
+ scroll-behavior: smooth;
+ }
+
+ /* 减少动画元素的数量 */
+ .onload-animation {
+ animation-duration: 0.3s;
+ }
+
+ /* 优化字体渲染 */
+ * {
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ text-rendering: optimizeLegibility;
+ }
+}
+
+/* 超小屏幕设备优化 */
+@media (max-width: 480px) {
+ /* 进一步减少动画效果 */
+ html.is-animating .transition-main {
+ transform: translateY(0.3rem) translateX(0.1rem);
+ }
+
+ html.is-animating.is-leaving .transition-leaving {
+ transform: translateY(-0.2rem) translateX(-0.1rem);
+ }
+
+ /* 简化侧边栏动画 */
+ #dynamic-sidebar {
+ transition: all 0.15s ease-in-out;
+ }
+
+ .widget-container {
+ transition: all 0.15s ease-in-out;
+ }
+}
+
+/* 性能优化：为减少动画的用户提供支持 */
+@media (prefers-reduced-motion: reduce) {
+ .transition-main,
+ .transition-leaving,
+ .onload-animation,
+ .transition-slide-in,
+ .card-animation,
+ .nav-animation,
+ #dynamic-sidebar,
+ .widget-container {
+ animation-duration: 0.01ms !important;
+ animation-iteration-count: 1 !important;
+ transition-duration: 0.01ms !important;
+ }
+}
\ No newline at end of file
diff --git a/src/styles/twikoo.css b/src/styles/twikoo.css
new file mode 100644
index 0000000..ae62b1d
--- /dev/null
+++ b/src/styles/twikoo.css
@@ -0,0 +1,297 @@
+:root {
+ --tk-text: black;
+ --code-block-text: #333; /* 调整为深色但在浅色背景下仍然舒适的值 */
+}
+
+html.dark {
+ --tk-text: #d1d5db;
+ --code-block-text: #d1d5db; /* 在深色模式下使用更亮的颜色 */
+}
+
+.tk-comments {
+ @apply text-[var(--tk-text)];
+}
+
+.tk-submit {
+ .tk-avatar {
+ @apply hidden;
+ }
+}
+
+/* Text Area */
+.tk-row {
+ .tk-col {
+ @apply flex-col-reverse;
+ .tk-input {
+ textarea {
+ @apply rounded-[var(--radius-large)] py-4 px-6 !min-h-[150px] focus:border-[var(--primary)]
+ border-[var(--line-divider)] bg-[var(--card-bg)] text-[var(--btn-content)]
+ placeholder:text-[var(--content-meta)] transition-all duration-300
+ focus:ring-2 focus:ring-[var(--primary)] focus:ring-opacity-20;
+ resize: vertical;
+ }
+ }
+ }
+}
+
+/* 表情和图片按钮位置调整 */
+.tk-row .tk-col .tk-actions {
+ @apply order-1 mt-4 mb-2 flex gap-2;
+}
+
+.tk-row .tk-col .tk-meta-input {
+ @apply order-2;
+}
+
+/* 表情和图片按钮样式优化 */
+.tk-owo,
+.tk-upload {
+ @apply rounded-lg p-2 hover:bg-[var(--btn-plain-bg-hover)] transition-colors duration-200
+ border border-[var(--line-divider)] bg-[var(--card-bg)] text-[var(--btn-content)]
+ hover:border-[var(--primary)] hover:shadow-sm;
+}
+
+.tk-owo:hover,
+.tk-upload:hover {
+ @apply bg-[var(--btn-plain-bg-hover)] border-[var(--primary)] shadow-sm;
+}
+
+/* Meta */
+.tk-meta-input {
+ @apply relative mt-4;
+ div {
+ @apply min-h-12 rounded-lg border border-[var(--line-divider)] bg-[var(--card-bg)] overflow-hidden
+ hover:border-[var(--primary)] hover:shadow-sm transition-all duration-200 flex items-center;
+
+ .el-input-group__prepend {
+ @apply !bg-[var(--btn-regular-bg)] !text-[var(--btn-content)] px-4 font-medium text-sm
+ border-r border-[var(--line-divider)] flex items-center justify-center min-w-[80px] flex-shrink-0
+ rounded-l-lg rounded-r-none;
+ min-height: inherit;
+ }
+
+ input {
+ @apply px-4 bg-transparent text-[var(--btn-content)] placeholder:text-[var(--content-meta)]
+ focus:!border-[var(--primary)] transition-all duration-200 flex-1
+ rounded-r-lg rounded-l-none;
+ min-height: inherit;
+
+ &::placeholder {
+ @apply text-[var(--content-meta)] opacity-70;
+ }
+
+ &:focus {
+ @apply outline-none;
+ }
+ }
+
+ &:focus-within {
+ @apply border-[var(--primary)] shadow-md;
+ }
+ }
+}
+
+/* Button */
+.tk-row.actions {
+ @apply w-full !ml-0 !mt-6 flex gap-3 justify-end;
+ .__markdown {
+ @apply !hidden;
+ }
+ .tk-send,
+ .tk-cancel {
+ @apply border-none rounded-lg px-6 py-2 h-10 font-medium transition-all duration-300
+ !bg-[var(--btn-regular-bg)] hover:!bg-[var(--btn-regular-bg-hover)]
+ active:!bg-[var(--btn-regular-bg-active)] disabled:!bg-[var(--btn-regular-bg)]
+ !text-[var(--btn-content)] disabled:!text-[var(--content-meta)]
+ hover:scale-105 active:scale-95 shadow-sm hover:shadow-md;
+ }
+}
+
+/* 隐藏预览按钮 */
+.tk-preview {
+ display: none !important;
+}
+
+/* 强制统一按钮样式 */
+.tk-send,
+.tk-cancel {
+ background: var(--btn-regular-bg) !important;
+ color: var(--btn-content) !important;
+ border: none !important;
+ border-radius: 0.5rem !important;
+ padding: 0.5rem 1.5rem !important;
+ height: 2.5rem !important;
+ font-weight: 500 !important;
+ transition: all 0.3s ease !important;
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+}
+
+.tk-send:hover,
+.tk-cancel:hover {
+ background: var(--btn-regular-bg-hover) !important;
+ transform: scale(1.05) !important;
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
+}
+
+.tk-send:active,
+.tk-cancel:active {
+ background: var(--btn-regular-bg-active) !important;
+ transform: scale(0.95) !important;
+}
+
+.tk-send:disabled,
+.tk-cancel:disabled {
+ background: var(--btn-regular-bg) !important;
+ color: var(--content-meta) !important;
+ transform: none !important;
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+}
+
+/* Comment title */
+.tk-comments-title {
+ @apply hidden; /* 隐藏默认标题，使用自定义标题 */
+
+ .__comments svg {
+ @apply fill-[var(--primary)];
+ }
+}
+
+.tk-comment {
+ @apply border-[1px] border-[var(--line-divider)] p-4 rounded-2xl hover:shadow-lg hover:border-[var(--primary)] transition-all duration-300;
+ background: linear-gradient(135deg, var(--card-bg) 0%, rgba(var(--primary), 0.02) 100%);
+
+ .tk-action-icon svg {
+ @apply fill-[var(--primary)] hover:scale-110 transition-transform duration-200;
+ }
+
+ &:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+ z-index: 2;
+ }
+}
+
+.tk-meta {
+ .tk-tag {
+ @apply border-none rounded-lg text-[var(--btn-content)];
+ }
+
+ .tk-tag-green {
+ @apply bg-[var(--btn-regular-bg)] dark:bg-[var(--primary)] dark:text-[var(--deep-text)];
+ }
+}
+
+/* Content & Preview */
+.tk-content,
+.tk-preview-container {
+ /* by @microsic
+ Make the picture type emoticons display without wrapping
+ */
+ img {
+ @apply inline !align-bottom;
+ }
+
+ a {
+ @apply underline text-[var(--primary)] font-medium;
+ }
+
+ .tk-ruser {
+ @apply no-underline;
+ }
+
+ :not(pre) > code {
+ @apply bg-[var(--inline-code-bg)] rounded-md text-[--inline-code-color] px-1 py-0.5 font-semibold;
+ }
+
+ li {
+ @apply before:content-["•"] before:text-[var(--primary)];
+ }
+}
+
+/* Replies */
+.tk-replies {
+
+
+ .tk-comment {
+ @apply border-l-4 border-l-[var(--btn-regular-bg)] p-3 border-opacity-30 hover:border-[var(--primary)] transition-all duration-300;
+ .tk-content {
+ > span:first-of-type {
+ @apply text-xs text-[var(--content-meta)];
+ }
+ }
+ }
+
+ /* 回复层级指示器 */
+ &::before {
+ content: '';
+ @apply absolute left-0 top-0 w-0.5 h-full bg-gradient-to-b to-transparent opacity-30;
+ }
+}
+
+.twikoo .code-block {
+ pre {
+ @apply !rounded-xl;
+ }
+
+ /* Code block fall back */
+ pre:not([class]) {
+ @apply bg-[var(--codeblock-bg)] overflow-auto p-2 text-[var(--code-block-text)];
+ }
+
+ .copy-btn-icon {
+ width: inherit !important;
+ height: inherit !important;
+ }
+}
+
+.tk-expand-wrap .tk-expand,
+.tk-collapse-wrap .tk-expand {
+ @apply border-[1px] border-[var(--line-divider)] rounded-lg mt-1 bg-[var(--btn-regular-bg)] text-[var(--btn-content)] hover:text-[var(--primary)] hover:bg-[var(--btn-regular-bg-hover)];
+}
+
+/* by @SirTamago
+Make the emoji component display correctly when there are too many emoji packs
+*/
+.card-base {
+ overflow: visible;
+}
+
+/* 防止 Twikoo 操作时的意外滚动 */
+.tk-action-icon,
+.tk-owo,
+.tk-submit,
+.tk-cancel,
+.tk-admin,
+.tk-delete,
+.tk-edit {
+ cursor: pointer;
+ transition: all 0.2s ease;
+}
+
+/* 确保点击区域足够大 */
+.tk-action {
+ min-height: 24px;
+ display: flex;
+ align-items: center;
+}
+
+/* 防止表单提交时的意外跳转 */
+.tk-submit-wrapper {
+ position: relative;
+}
+
+/* 管理面板样式优化 */
+.tk-admin-panel {
+ position: relative;
+ z-index: 100;
+}
+
+
+
+.el-loading-spinner {
+ display: flex !important;
+ justify-content: center !important;
+
+}
+
+
diff --git a/src/styles/variables-unified.styl b/src/styles/variables-unified.styl
new file mode 100644
index 0000000..0fbe5c1
--- /dev/null
+++ b/src/styles/variables-unified.styl
@@ -0,0 +1,366 @@
+/**
+ * 统一变量定义 - 合并所有重复的CSS变量和常量
+ * Unified Variables - Merged all duplicate CSS variables and constants
+ */
+
+/* ===== 基础变量定义 ===== */
+:root {
+ --radius-large: 1rem;
+ --content-delay: 150ms;
+}
+
+/* ===== 主题相关变量 ===== */
+:root {
+ --primary: oklch(0.70 0.14 var(--hue));
+ --page-bg: oklch(0.95 0.01 var(--hue));
+ --card-bg: white;
+ --card-bg-transparent: rgba(255, 255, 255, 0.8);
+
+ --btn-content: oklch(0.55 0.12 var(--hue));
+ --btn-regular-bg: oklch(0.95 0.025 var(--hue));
+ --btn-regular-bg-hover: oklch(0.9 0.05 var(--hue));
+ --btn-regular-bg-active: oklch(0.85 0.08 var(--hue));
+
+ --btn-plain-bg-hover: oklch(0.95 0.025 var(--hue));
+ --btn-plain-bg-active: oklch(0.98 0.01 var(--hue));
+
+ --btn-card-bg-hover: oklch(0.98 0.005 var(--hue));
+ --btn-card-bg-active: oklch(0.9 0.03 var(--hue));
+
+ --enter-btn-bg: var(--btn-regular-bg);
+ --enter-btn-bg-hover: var(--btn-regular-bg-hover);
+ --enter-btn-bg-active: var(--btn-regular-bg-active);
+
+ --deep-text: oklch(0.25 0.02 var(--hue));
+ --title-active: oklch(0.6 0.1 var(--hue));
+
+ --line-divider: rgba(0, 0, 0, 0.08);
+ --line-color: rgba(0, 0, 0, 0.1);
+ --meta-divider: rgba(0, 0, 0, 0.2);
+ --content-meta: rgba(0, 0, 0, 0.7);
+
+ --inline-code-bg: var(--btn-regular-bg);
+ --inline-code-color: var(--btn-content);
+ --selection-bg: oklch(0.90 0.05 var(--hue));
+ --codeblock-bg: oklch(0.17 0.015 var(--hue));
+ --codeblock-topbar-bg: oklch(0.3 0.02 var(--hue));
+
+ --license-block-bg: rgba(0, 0, 0, 0.03);
+
+ --link-underline: oklch(0.93 0.04 var(--hue));
+ --link-hover: oklch(0.95 0.025 var(--hue));
+ --link-active: oklch(0.90 0.05 var(--hue));
+
+ --float-panel-bg: white;
+
+ --scrollbar-bg-light: rgba(0, 0, 0, 0.4);
+ --scrollbar-bg-hover-light: rgba(0, 0, 0, 0.5);
+ --scrollbar-bg-active-light: rgba(0, 0, 0, 0.6);
+
+ --scrollbar-bg-dark: rgba(255, 255, 255, 0.4);
+ --scrollbar-bg-hover-dark: rgba(255, 255, 255, 0.5);
+ --scrollbar-bg-active-dark: rgba(255, 255, 255, 0.6);
+
+ --scrollbar-bg: var(--scrollbar-bg-light);
+ --scrollbar-bg-hover: var(--scrollbar-bg-hover-light);
+ --scrollbar-bg-active: var(--scrollbar-bg-active-light);
+
+ --display-light-icon: 1;
+ --display-dark-icon: 0;
+
+ --admonitions-color-tip: oklch(0.7 0.14 180);
+ --admonitions-color-note: oklch(0.7 0.14 250);
+ --admonitions-color-important: oklch(0.7 0.14 310);
+ --admonitions-color-warning: oklch(0.7 0.14 60);
+ --admonitions-color-caution: oklch(0.6 0.2 25);
+
+ /* TOC相关变量 */
+ --toc-badge-bg: oklch(0.9 0.045 var(--hue));
+ --toc-btn-hover: oklch(0.92 0.015 var(--hue));
+ --toc-btn-active: oklch(0.90 0.015 var(--hue));
+ --toc-width: calc((100vw - var(--page-width)) / 2 - 1rem);
+ --toc-item-active: oklch(0.70 0.13 var(--hue));
+
+ /* 主题色选择条渐变 */
+ --color-selection-bar: linear-gradient(to right,
+ oklch(0.80 0.10 0),
+ oklch(0.80 0.10 30),
+ oklch(0.80 0.10 60),
+ oklch(0.80 0.10 90),
+ oklch(0.80 0.10 120),
+ oklch(0.80 0.10 150),
+ oklch(0.80 0.10 180),
+ oklch(0.80 0.10 210),
+ oklch(0.80 0.10 240),
+ oklch(0.80 0.10 270),
+ oklch(0.80 0.10 300),
+ oklch(0.80 0.10 330),
+ oklch(0.80 0.10 360)
+ );
+}
+
+/* 暗色主题变量 */
+:root.dark {
+ --primary: oklch(0.75 0.14 var(--hue));
+ --page-bg: oklch(0.16 0.014 var(--hue));
+ --card-bg: oklch(0.23 0.015 var(--hue));
+ --card-bg-transparent: rgba(23, 23, 23, 0.8);
+
+ --btn-content: oklch(0.75 0.1 var(--hue));
+ --btn-regular-bg: oklch(0.33 0.035 var(--hue));
+ --btn-regular-bg-hover: oklch(0.38 0.04 var(--hue));
+ --btn-regular-bg-active: oklch(0.43 0.045 var(--hue));
+
+ --btn-plain-bg-hover: oklch(0.30 0.035 var(--hue));
+ --btn-plain-bg-active: oklch(0.27 0.025 var(--hue));
+
+ --btn-card-bg-hover: oklch(0.3 0.03 var(--hue));
+ --btn-card-bg-active: oklch(0.35 0.035 var(--hue));
+
+ --line-divider: rgba(255, 255, 255, 0.08);
+ --line-color: rgba(255, 255, 255, 0.1);
+ --meta-divider: rgba(255, 255, 255, 0.2);
+ --content-meta: rgba(255, 255, 255, 0.6);
+
+ --selection-bg: oklch(0.40 0.08 var(--hue));
+ --codeblock-bg: oklch(0.17 0.015 var(--hue));
+ --codeblock-topbar-bg: oklch(0.12 0.015 var(--hue));
+
+ --license-block-bg: var(--codeblock-bg);
+
+ --link-underline: oklch(0.40 0.08 var(--hue));
+ --link-hover: oklch(0.40 0.08 var(--hue));
+ --link-active: oklch(0.35 0.07 var(--hue));
+
+ --float-panel-bg: oklch(0.19 0.015 var(--hue));
+
+ --scrollbar-bg: var(--scrollbar-bg-dark);
+ --scrollbar-bg-hover: var(--scrollbar-bg-hover-dark);
+ --scrollbar-bg-active: var(--scrollbar-bg-active-dark);
+
+ --display-light-icon: 0;
+ --display-dark-icon: 1;
+
+ --admonitions-color-tip: oklch(0.75 0.14 180);
+ --admonitions-color-note: oklch(0.75 0.14 250);
+ --admonitions-color-important: oklch(0.75 0.14 310);
+ --admonitions-color-warning: oklch(0.75 0.14 60);
+ --admonitions-color-caution: oklch(0.65 0.2 25);
+
+ /* TOC相关变量 - 暗色主题 */
+ --toc-badge-bg: var(--btn-regular-bg);
+ --toc-btn-hover: oklch(0.28 0.04 var(--hue));
+ --toc-btn-active: oklch(0.32 0.05 var(--hue));
+ --toc-item-active: oklch(0.35 0.07 var(--hue));
+
+ /* 主题色选择条渐变 - 暗色主题 */
+ --color-selection-bar: linear-gradient(to right,
+ oklch(0.70 0.10 0),
+ oklch(0.70 0.10 30),
+ oklch(0.70 0.10 60),
+ oklch(0.70 0.10 90),
+ oklch(0.70 0.10 120),
+ oklch(0.70 0.10 150),
+ oklch(0.70 0.10 180),
+ oklch(0.70 0.10 210),
+ oklch(0.70 0.10 240),
+ oklch(0.70 0.10 270),
+ oklch(0.70 0.10 300),
+ oklch(0.70 0.10 330),
+ oklch(0.70 0.10 360)
+ );
+}
+
+/* ===== 响应式断点变量 ===== */
+:root {
+ /* 断点定义 */
+ --breakpoint-xs: 320px;
+ --breakpoint-sm: 480px;
+ --breakpoint-md: 768px;
+ --breakpoint-lg: 1024px;
+ --breakpoint-xl: 1280px;
+ --breakpoint-2xl: 1536px;
+
+ /* 容器宽度 */
+ --container-xs: 100%;
+ --container-sm: 100%;
+ --container-md: 100%;
+ --container-lg: 1024px;
+ --container-xl: 1280px;
+ --container-2xl: 1536px;
+}
+
+/* ===== 动画变量 ===== */
+:root {
+ /* 缓动函数 */
+ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+ --ease-decelerate: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+ --ease-accelerate: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+ --ease-sharp: cubic-bezier(0.4, 0, 0.6, 1);
+
+ /* 动画时长 */
+ --duration-fast: 150ms;
+ --duration-normal: 200ms;
+ --duration-medium: 300ms;
+ --duration-slow: 400ms;
+ --duration-slower: 500ms;
+
+ /* 动画延迟 */
+ --delay-none: 0ms;
+ --delay-short: 50ms;
+ --duration-medium: 100ms;
+ --delay-long: 150ms;
+ --delay-longer: 200ms;
+}
+
+/* ===== 间距变量 ===== */
+:root {
+ /* 基础间距 */
+ --spacing-xs: 0.25rem; /* 4px */
+ --spacing-sm: 0.5rem; /* 8px */
+ --spacing-md: 0.75rem; /* 12px */
+ --spacing-lg: 1rem; /* 16px */
+ --spacing-xl: 1.25rem; /* 20px */
+ --spacing-2xl: 1.5rem; /* 24px */
+ --spacing-3xl: 2rem; /* 32px */
+ --spacing-4xl: 2.5rem; /* 40px */
+ --spacing-5xl: 3rem; /* 48px */
+
+ /* 组件间距 */
+ --widget-gap-mobile: var(--spacing-md);
+ --widget-gap-tablet: var(--spacing-lg);
+ --widget-gap-desktop: var(--spacing-xl);
+
+ /* 侧边栏宽度 */
+ --sidebar-width-mobile: 100%;
+ --sidebar-width-tablet: 280px;
+ --sidebar-width-desktop: 320px;
+}
+
+/* ===== 阴影变量 ===== */
+:root {
+ /* 基础阴影 */
+ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+ --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+ --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
+ --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
+ --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
+
+ /* 特殊阴影 */
+ --shadow-navbar: 0 4px 16px rgba(0, 0, 0, 0.1);
+ --shadow-navbar-dark: 0 4px 16px rgba(0, 0, 0, 0.2);
+ --shadow-button: 0 4px 12px rgba(0, 0, 0, 0.15);
+ --shadow-button-dark: 0 4px 12px rgba(255, 255, 255, 0.1);
+}
+
+/* ===== 边框半径变量 ===== */
+:root {
+ --radius-sm: 0.25rem; /* 4px */
+ --radius-md: 0.375rem; /* 6px */
+ --radius-lg: 0.5rem; /* 8px */
+ --radius-xl: 0.75rem; /* 12px */
+ --radius-2xl: 1rem; /* 16px */
+ --radius-3xl: 1.5rem; /* 24px */
+ --radius-full: 9999px;
+}
+
+/* ===== 透明度变量 ===== */
+:root {
+ --opacity-0: 0;
+ --opacity-5: 0.05;
+ --opacity-10: 0.1;
+ --opacity-20: 0.2;
+ --opacity-25: 0.25;
+ --opacity-30: 0.3;
+ --opacity-40: 0.4;
+ --opacity-50: 0.5;
+ --opacity-55: 0.55;
+ --opacity-60: 0.6;
+ --opacity-70: 0.7;
+ --opacity-75: 0.75;
+ --opacity-80: 0.8;
+ --opacity-90: 0.9;
+ --opacity-95: 0.95;
+ --opacity-100: 1;
+}
+
+/* ===== 模糊效果变量 ===== */
+:root {
+ --blur-sm: 4px;
+ --blur-md: 8px;
+ --blur-lg: 12px;
+ --blur-xl: 16px;
+ --blur-2xl: 20px;
+ --blur-3xl: 24px;
+}
+
+/* ===== 变换变量 ===== */
+:root {
+ /* 平移 */
+ --translate-xs: 0.125rem; /* 2px */
+ --translate-sm: 0.25rem; /* 4px */
+ --translate-md: 0.5rem; /* 8px */
+ --translate-lg: 0.75rem; /* 12px */
+ --translate-xl: 1rem; /* 16px */
+ --translate-2xl: 1.5rem; /* 24px */
+ --translate-3xl: 2rem; /* 32px */
+
+ /* 缩放 */
+ --scale-95: 0.95;
+ --scale-98: 0.98;
+ --scale-100: 1;
+ --scale-105: 1.05;
+ --scale-110: 1.1;
+}
+
+/* ===== 层级变量 ===== */
+:root {
+ --z-dropdown: 1000;
+ --z-sticky: 1020;
+ --z-fixed: 1030;
+ --z-modal-backdrop: 1040;
+ --z-modal: 1050;
+ --z-popover: 1060;
+ --z-tooltip: 1070;
+ --z-toast: 1080;
+ --z-navbar: 20;
+ --z-banner: 10;
+ --z-content: 30;
+}
+
+/* ===== 性能优化变量 ===== */
+:root {
+ /* GPU加速 */
+ --gpu-transform: translateZ(0);
+ --gpu-backface: hidden;
+
+ /* 动画性能 */
+ --animation-fill-mode: both;
+ --animation-timing: var(--ease-standard);
+ --animation-duration: var(--duration-medium);
+}
+
+/* ===== 响应式工具类 ===== */
+@media (max-width: 767px) {
+ :root {
+ --container-width: var(--container-sm);
+ --widget-gap: var(--widget-gap-mobile);
+ --sidebar-width: var(--sidebar-width-mobile);
+ }
+}
+
+@media (min-width: 768px) and (max-width: 1279px) {
+ :root {
+ --container-width: var(--container-md);
+ --widget-gap: var(--widget-gap-tablet);
+ --sidebar-width: var(--sidebar-width-tablet);
+ }
+}
+
+@media (min-width: 1280px) {
+ :root {
+ --container-width: var(--container-lg);
+ --widget-gap: var(--widget-gap-desktop);
+ --sidebar-width: var(--sidebar-width-desktop);
+ }
+}
\ No newline at end of file
diff --git a/src/styles/waves.css b/src/styles/waves.css
new file mode 100644
index 0000000..501d5f4
--- /dev/null
+++ b/src/styles/waves.css
@@ -0,0 +1,80 @@
+/* Water waves animation - 恢复原始效果 */
+.waves > .parallax use {
+ animation: wave-default 25s cubic-bezier(0.5, 0.5, 0.45, 0.5) infinite;
+}
+
+/* 性能优化：低质量模式 */
+[data-wave-quality="low"] .waves > .parallax use {
+ animation: wave-slow 30s linear infinite;
+ animation-fill-mode: both;
+}
+
+/* 性能优化：中等质量模式 */
+[data-wave-quality="medium"] .waves > .parallax use {
+ animation: wave 20s cubic-bezier(0.4, 0.4, 0.6, 0.4) infinite;
+}
+
+/* 性能优化：高质量模式 */
+[data-wave-quality="high"] .waves > .parallax use {
+ animation: wave 15s cubic-bezier(0.5, 0.5, 0.45, 0.5) infinite;
+}
+
+/* 硬件加速控制 */
+[data-hardware-acceleration="true"] .waves > .parallax use {
+ transform: translateZ(0);
+ will-change: transform;
+ backface-visibility: hidden;
+}
+
+[data-hardware-acceleration="false"] .waves > .parallax use {
+ will-change: auto;
+ backface-visibility: visible;
+}
+
+@keyframes wave-default {
+ 0% {
+ transform: translate3d(-90px, 0, 0);
+ }
+ 100% {
+ transform: translate3d(85px, 0, 0);
+ }
+}
+
+@keyframes wave-slow {
+ 0% {
+ transform: translate(-90px, 0);
+ }
+ 100% {
+ transform: translate(85px, 0);
+ }
+}
+
+@keyframes wave {
+ 0% {
+ transform: translate3d(-90px, 0, 0);
+ }
+ 100% {
+ transform: translate3d(85px, 0, 0);
+ }
+}
+
+/* 低质量模式的额外优化 */
+.wave-low-quality {
+ animation-timing-function: linear !important;
+ animation-iteration-count: infinite !important;
+}
+
+/* 性能优化：减少重绘 */
+[data-wave-quality="low"] .waves {
+ /* 移除contain属性，避免限制波浪动画 */
+ contain: none;
+}
+
+[data-wave-quality="medium"] .waves {
+ /* 移除contain属性，避免限制波浪动画 */
+ contain: none;
+}
+
+[data-wave-quality="high"] .waves {
+ contain: none;
+}
diff --git a/src/styles/widget-responsive.css b/src/styles/widget-responsive.css
new file mode 100644
index 0000000..e6c51f4
--- /dev/null
+++ b/src/styles/widget-responsive.css
@@ -0,0 +1,488 @@
+/**
+ * 组件响应式布局样式
+ * Widget Responsive Layout Styles
+ */
+
+/* CSS 自定义属性定义 */
+:root {
+ /* 断点变量 */
+ --breakpoint-mobile: 768px;
+ --breakpoint-tablet: 1024px;
+ --breakpoint-desktop: 1025px;
+
+ /* 间距变量 */
+ --widget-gap-mobile: 0.75rem;
+ --widget-gap-tablet: 1rem;
+ --widget-gap-desktop: 1.25rem;
+
+ /* 动画变量 */
+ --widget-animation-duration: 0.3s;
+ --widget-animation-timing: ease-in-out;
+
+ /* 侧边栏宽度 */
+ --sidebar-width-mobile: 100%;
+ --sidebar-width-tablet: 280px;
+ --sidebar-width-desktop: 320px;
+
+ /* 组件最小高度 */
+ --widget-min-height: 60px;
+ --widget-max-height-mobile: 200px;
+ --widget-max-height-tablet: 300px;
+ --widget-max-height-desktop: 400px;
+}
+
+/* 基础侧边栏样式 */
+#dynamic-sidebar {
+ width: var(--sidebar-width-desktop);
+ transition: all var(--widget-animation-duration) var(--widget-animation-timing);
+ position: relative;
+}
+
+/* 组件容器基础样式 */
+.widget-container {
+ min-height: var(--widget-min-height);
+ transition: all var(--widget-animation-duration) var(--widget-animation-timing);
+ overflow: hidden;
+}
+
+/* 组件悬停效果 */
+.widget-container:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.widget-container.widget-hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+/* 移动端样式 (< 768px) */
+@media (max-width: 767px) {
+ #dynamic-sidebar {
+ width: var(--sidebar-width-mobile);
+ padding: 0.5rem;
+ }
+
+ .sidebar-top-section,
+ .sidebar-sticky-section {
+ gap: var(--widget-gap-mobile);
+ }
+
+ .widget-container {
+ max-height: var(--widget-max-height-mobile);
+ }
+
+ /* 移动端隐藏的组件 */
+ .widget-container[data-mobile-hidden="true"] {
+ display: none;
+ }
+
+ /* 移动端特殊布局 */
+ .sidebar-sticky-section {
+ position: static !important;
+ top: auto !important;
+ }
+
+ /* 移动端组件简化显示 */
+ .widget-container[data-widget-type="announcement"] {
+ order: -1; /* 公告优先显示 */
+ }
+
+ .widget-container[data-widget-type="categories"],
+ .widget-container[data-widget-type="tags"] {
+ /* 分类和标签在移动端可折叠 */
+ max-height: 120px;
+ overflow-y: auto;
+ }
+}
+
+/* 平板端样式 (768px - 1023px) */
+@media (min-width: 768px) and (max-width: 1023px) {
+ #dynamic-sidebar {
+ width: var(--sidebar-width-tablet);
+ padding: 0.75rem;
+ }
+
+ .sidebar-top-section,
+ .sidebar-sticky-section {
+ gap: var(--widget-gap-tablet);
+ }
+
+ .widget-container {
+ max-height: var(--widget-max-height-tablet);
+ }
+
+ /* 平板端隐藏的组件 */
+ .widget-container[data-tablet-hidden="true"] {
+ display: none;
+ }
+
+
+}
+
+/* 桌面端样式 (>= 1024px) */
+@media (min-width: 1024px) {
+ #dynamic-sidebar {
+ width: var(--sidebar-width-desktop);
+ padding: 1rem;
+ }
+
+ .sidebar-top-section,
+ .sidebar-sticky-section {
+ gap: var(--widget-gap-desktop);
+ }
+
+ .widget-container {
+ max-height: var(--widget-max-height-desktop);
+ }
+
+ /* 桌面端隐藏的组件 */
+ .widget-container[data-desktop-hidden="true"] {
+ display: none;
+ }
+
+ /* 桌面端增强效果 */
+ .widget-container:hover {
+ transform: translateY(-4px);
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+ }
+}
+
+/* 超宽屏样式 (> 1440px) */
+@media (min-width: 1441px) {
+ #dynamic-sidebar {
+ width: 360px;
+ }
+
+ .widget-container {
+ max-height: 500px;
+ }
+}
+
+/* 组件位置特定样式 */
+.sidebar-top-section {
+ /* 顶部组件区域 */
+ margin-bottom: 1rem;
+}
+
+.sidebar-sticky-section {
+ /* 粘性组件区域 */
+ position: sticky;
+ top: 1rem;
+ z-index: 10;
+}
+
+/* 组件类型特定的响应式样式 */
+
+/* Profile 组件 */
+.widget-container[data-widget-type="profile"] {
+ /* 用户资料组件始终保持固定高度 */
+ min-height: 120px;
+}
+
+@media (max-width: 767px) {
+ .widget-container[data-widget-type="profile"] {
+ min-height: 100px;
+ }
+}
+
+/* Announcement 组件 */
+.widget-container[data-widget-type="announcement"] {
+ /* 公告组件可以动态调整高度 */
+ min-height: 80px;
+}
+
+@media (max-width: 767px) {
+ .widget-container[data-widget-type="announcement"] {
+ min-height: 60px;
+ font-size: 0.875rem;
+ }
+}
+
+/* Categories 和 Tags 组件 */
+.widget-container[data-widget-type="categories"],
+.widget-container[data-widget-type="tags"] {
+ /* 分类和标签组件支持滚动 */
+ overflow-y: auto;
+ scrollbar-width: thin;
+ scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
+}
+
+.widget-container[data-widget-type="categories"]::-webkit-scrollbar,
+.widget-container[data-widget-type="tags"]::-webkit-scrollbar {
+ width: 4px;
+}
+
+.widget-container[data-widget-type="categories"]::-webkit-scrollbar-track,
+.widget-container[data-widget-type="tags"]::-webkit-scrollbar-track {
+ background: transparent;
+}
+
+.widget-container[data-widget-type="categories"]::-webkit-scrollbar-thumb,
+.widget-container[data-widget-type="tags"]::-webkit-scrollbar-thumb {
+ background-color: rgba(156, 163, 175, 0.5);
+ border-radius: 2px;
+}
+
+/* TOC 组件 */
+.widget-container[data-widget-type="toc"] {
+ /* 目录组件在移动端隐藏 */
+ max-height: 400px;
+ overflow-y: auto;
+}
+
+@media (max-width: 767px) {
+ .widget-container[data-widget-type="toc"] {
+ display: none;
+ }
+}
+
+
+
+/* 动画效果 */
+
+/* 淡入动画 */
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+/* 滑入动画 */
+@keyframes slideIn {
+ from {
+ opacity: 0;
+ transform: translateX(-30px);
+ }
+ to {
+ opacity: 1;
+ transform: translateX(0);
+ }
+}
+
+/* 缩放动画 */
+@keyframes scaleIn {
+ from {
+ opacity: 0;
+ transform: scale(0.8);
+ }
+ to {
+ opacity: 1;
+ transform: scale(1);
+ }
+}
+
+/* 动画类 */
+.widget-animation-fade {
+ animation: fadeIn var(--widget-animation-duration) var(--widget-animation-timing) forwards;
+}
+
+.widget-animation-slide {
+ animation: slideIn var(--widget-animation-duration) var(--widget-animation-timing) forwards;
+}
+
+.widget-animation-scale {
+ animation: scaleIn var(--widget-animation-duration) var(--widget-animation-timing) forwards;
+}
+
+/* 初始状态 */
+.widget-container {
+ opacity: 0;
+}
+
+.widget-container.widget-animated {
+ opacity: 1;
+}
+
+/* 加载状态 */
+.widget-loading {
+ position: relative;
+ overflow: hidden;
+}
+
+.widget-loading::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: -100%;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(
+ 90deg,
+ transparent,
+ rgba(255, 255, 255, 0.2),
+ transparent
+ );
+ animation: shimmer 1.5s infinite;
+}
+
+@keyframes shimmer {
+ 0% {
+ left: -100%;
+ }
+ 100% {
+ left: 100%;
+ }
+}
+
+/* 错误状态 */
+.widget-error {
+ border: 2px dashed #ef4444;
+ background-color: #fef2f2;
+ color: #dc2626;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 80px;
+ text-align: center;
+ font-size: 0.875rem;
+}
+
+/* 空状态 */
+.widget-empty {
+ border: 2px dashed #d1d5db;
+ background-color: #f9fafb;
+ color: #6b7280;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 80px;
+ text-align: center;
+ font-size: 0.875rem;
+}
+
+/* 暗色主题适配 */
+@media (prefers-color-scheme: dark) {
+ .widget-container:hover {
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+ }
+
+ .widget-container.widget-hover {
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+ }
+
+ .widget-error {
+ border-color: #f87171;
+ background-color: #450a0a;
+ color: #fca5a5;
+ }
+
+ .widget-empty {
+ border-color: #4b5563;
+ background-color: #111827;
+ color: #9ca3af;
+ }
+
+ .widget-loading::before {
+ background: linear-gradient(
+ 90deg,
+ transparent,
+ rgba(255, 255, 255, 0.1),
+ transparent
+ );
+ }
+}
+
+/* 高对比度模式 */
+@media (prefers-contrast: high) {
+ .widget-container {
+ border: 2px solid currentColor;
+ }
+
+ .widget-container:hover {
+ border-width: 3px;
+ }
+}
+
+/* 减少动画模式 */
+@media (prefers-reduced-motion: reduce) {
+ .widget-container,
+ .widget-animation-fade,
+ .widget-animation-slide,
+ .widget-animation-scale {
+ animation: none;
+ transition: none;
+ }
+
+ .widget-container {
+ opacity: 1;
+ transform: none;
+ }
+
+ .widget-container:hover {
+ transform: none;
+ }
+}
+
+/* 打印样式 */
+@media print {
+ #dynamic-sidebar {
+ display: none;
+ }
+}
+
+/* 容器查询支持 (现代浏览器) */
+@supports (container-type: inline-size) {
+ #dynamic-sidebar {
+ container-type: inline-size;
+ }
+
+ @container (max-width: 280px) {
+ .widget-container {
+ font-size: 0.875rem;
+ }
+
+ .widget-container[data-widget-type="categories"],
+ .widget-container[data-widget-type="tags"] {
+ max-height: 150px;
+ }
+ }
+
+ @container (min-width: 360px) {
+ .widget-container {
+ padding: 1.25rem;
+ }
+ }
+}
+
+/* 工具类 */
+.widget-hidden {
+ display: none !important;
+}
+
+.widget-visible {
+ display: block !important;
+}
+
+.widget-compact {
+ padding: 0.5rem !important;
+ font-size: 0.875rem !important;
+}
+
+.widget-expanded {
+ padding: 1.5rem !important;
+ font-size: 1rem !important;
+}
+
+/* 调试样式 (开发环境) */
+[data-debug="true"] .widget-container {
+ border: 1px solid #3b82f6;
+ position: relative;
+}
+
+[data-debug="true"] .widget-container::before {
+ content: attr(data-widget-type) ' [' attr(data-widget-order) ']';
+ position: absolute;
+ top: -1px;
+ left: -1px;
+ background: #3b82f6;
+ color: white;
+ font-size: 10px;
+ padding: 2px 4px;
+ z-index: 1000;
+}
\ No newline at end of file
diff --git a/src/types/bangumi.ts b/src/types/bangumi.ts
new file mode 100644
index 0000000..2a98f74
--- /dev/null
+++ b/src/types/bangumi.ts
@@ -0,0 +1,56 @@
+export type UserSubjectCollectionResponse = {
+ data: UserSubjectCollection[];
+ total: number;
+ limit: number;
+ offset: number;
+};
+
+export type UserSubjectCollection = {
+ subject_id: number; // 条目 ID
+ subject_type: SubjectType; // 条目类型
+ rate: number; // 评分
+ type: CollectionType; // 收藏类型
+ comment?: string | null; // 评价
+ tags: string[]; // 标签
+ ep_status: number; // 章节进度
+ vol_status: number; // 卷进度
+ updated_at: string; // 更新时间（ISO 8601 格式）
+ private: boolean; // 是否私有
+ subject: SlimSubject; // 条目信息
+};
+
+// 1: 想看，2: 看过，3: 在看，4: 搁置，5: 抛弃
+export type CollectionType = 1 | 2 | 3 | 4 | 5;
+
+export type SlimSubject = {
+ id: number; // ID
+ type: SubjectType; // 类型
+ name: string; // 名称
+ name_cn: string; // 中文名
+ short_summary: string; // 简介
+ date?: string | null; // 日期 YYYY-MM-DD
+ images: SubjectImages; // 图片
+ volumes: number; // 卷数
+ eps: number; // 集数
+ collection_total: number; // 收藏人数
+ score: number; // 评分
+ rank: number; // 排名
+ tags: SubjectTag[]; // 标签
+};
+
+// 1: 书籍，2: 动画，3: 音乐，4: 游戏，6: 三次元
+export type SubjectType = 1 | 2 | 3 | 4 | 6;
+
+export type SubjectTag = {
+ name: string;
+ count: number;
+ total_cont: number;
+};
+
+export type SubjectImages = {
+ large: string;
+ common: string;
+ medium: string;
+ small: string;
+ grid: string;
+};
diff --git a/src/types/config.ts b/src/types/config.ts
new file mode 100644
index 0000000..9c0665f
--- /dev/null
+++ b/src/types/config.ts
@@ -0,0 +1,730 @@
+import type {
+ DARK_MODE,
+ LIGHT_MODE,
+ SYSTEM_MODE,
+ WALLPAPER_BANNER,
+ WALLPAPER_NONE,
+ WALLPAPER_OVERLAY,
+} from "../constants/constants";
+
+export type SiteConfig = {
+ title: string;
+ subtitle: string;
+ site_url: string;
+ description?: string; // 网站描述，用于生成 ; // 字体库，以ID为键的对象
+ fallback?: string[]; // 全局字体回退列表
+ preload?: boolean; // 是否预加载字体文件以提高性能
+};
+
+export type FooterConfig = {
+ enable: boolean; // 是否启用Footer HTML注入功能
+ customHtml?: string; // 自定义HTML内容，用于添加备案号等信息
+};
+
+export type CoverImageConfig = {
+ enableInPost: boolean; // 是否在文章详情页显示封面图
+ randomCoverImage: {
+ enable: boolean; // 是否启用随机图功能
+ apis: string[]; // 随机图API列表，支持 {seed} 占位符，会替换为文章slug或时间戳
+ fallback?: string; // 当API请求失败时的备用图片路径
+ // 加载指示器配置
+ loading?: {
+ // 加载指示器开关
+ enable: boolean;
+ image?: string; // 自定义加载图片路径（相对于public目录），默认 "/assets/images/loading.gif"
+ backgroundColor?: string; // 加载指示器背景颜色，默认与loading.gif背景色一致 (#fefefe)
+ };
+ watermark?: {
+ enable: boolean; // 是否显示水印
+ text?: string; // 水印文本，默认为"随机图"
+ position?:
+ | "top-left"
+ | "top-right"
+ | "bottom-left"
+ | "bottom-right"
+ | "center"; // 水印位置
+ opacity?: number; // 水印透明度 0-1，默认0.6
+ fontSize?: string; // 字体大小，默认"0.75rem"
+ color?: string; // 文字颜色，默认为白色
+ backgroundColor?: string; // 背景颜色，默认为半透明黑色
+ };
+ };
+};
+
+// 组件配置类型定义
+export type WidgetComponentType =
+ | "profile"
+ | "announcement"
+ | "categories"
+ | "tags"
+ | "sidebarToc"
+ | "advertisement"
+ | "stats"
+ | "calendar"
+ | "custom";
+
+export type WidgetComponentConfig = {
+ type: WidgetComponentType; // 组件类型
+ enable: boolean; // 是否启用该组件
+ order: number; // 显示顺序，数字越小越靠前
+ position: "top" | "sticky"; // 组件位置：top=固定在顶部，sticky=粘性定位（可滚动）
+ class?: string; // 自定义CSS类名
+ style?: string; // 自定义内联样式
+ animationDelay?: number; // 动画延迟时间（毫秒）
+ configId?: string; // 配置ID，用于广告组件指定使用哪个配置
+ showOnPostPage?: boolean; // 是否在文章详情页显示（仅右侧边栏组件有效）
+ responsive?: {
+ hidden?: ("mobile" | "tablet" | "desktop")[]; // 在指定设备上隐藏
+ collapseThreshold?: number; // 折叠阈值
+ };
+ customProps?: Record; // 自定义属性，用于扩展组件功能
+};
+
+export type SidebarLayoutConfig = {
+ enable: boolean; // 是否启用侧边栏
+ position: "left" | "both"; // 侧边栏位置：左侧或双侧
+ showRightSidebarOnPostPage?: boolean; // 当position为left时，是否在文章详情页显示右侧边栏
+ leftComponents: WidgetComponentConfig[]; // 左侧边栏组件配置列表
+ rightComponents: WidgetComponentConfig[]; // 右侧边栏组件配置列表
+ defaultAnimation: {
+ enable: boolean; // 是否启用默认动画
+ baseDelay: number; // 基础延迟时间（毫秒）
+ increment: number; // 每个组件递增的延迟时间（毫秒）
+ };
+ responsive: {
+ layout: {
+ mobile: "hidden" | "bottom" | "drawer" | "sidebar"; // 移动端布局模式
+ tablet: "hidden" | "sidebar" | "bottom" | "drawer"; // 平板端布局模式
+ desktop: "sidebar"; // 桌面端布局模式
+ };
+ };
+};
+
+export type SakuraConfig = {
+ enable: boolean; // 是否启用樱花特效
+ sakuraNum: number; // 樱花数量，默认21
+ limitTimes: number; // 樱花越界限制次数，-1为无限循环
+ size: {
+ min: number; // 樱花最小尺寸倍数
+ max: number; // 樱花最大尺寸倍数
+ };
+ opacity: {
+ min: number; // 樱花最小不透明度
+ max: number; // 樱花最大不透明度
+ };
+ speed: {
+ horizontal: {
+ min: number; // 水平移动速度最小值
+ max: number; // 水平移动速度最大值
+ };
+ vertical: {
+ min: number; // 垂直移动速度最小值
+ max: number; // 垂直移动速度最大值
+ };
+ rotation: number; // 旋转速度
+ fadeSpeed: number; // 消失速度，不应大于最小不透明度
+ };
+ zIndex: number; // 层级，确保樱花在合适的层级显示
+};
+
+// Spine 看板娘配置
+export type SpineModelConfig = {
+ enable: boolean; // 是否启用 Spine 看板娘
+ model: {
+ path: string; // 模型文件路径 (.json)
+ scale?: number; // 模型缩放比例，默认1.0
+ x?: number; // X轴偏移，默认0
+ y?: number; // Y轴偏移，默认0
+ };
+ position: {
+ corner: "bottom-left" | "bottom-right" | "top-left" | "top-right"; // 显示位置
+ offsetX?: number; // 水平偏移量，默认20px
+ offsetY?: number; // 垂直偏移量，默认20px
+ };
+ size: {
+ width?: number; // 容器宽度，默认280px
+ height?: number; // 容器高度，默认400px
+ };
+ interactive?: {
+ enabled?: boolean; // 是否启用交互功能，默认true
+ clickAnimations?: string[]; // 点击时随机播放的动画列表
+ clickMessages?: string[]; // 点击时随机显示的文字消息
+ messageDisplayTime?: number; // 文字显示时间（毫秒），默认3000
+ idleAnimations?: string[]; // 待机动画列表
+ idleInterval?: number; // 待机动画切换间隔（毫秒），默认10000
+ };
+ responsive?: {
+ hideOnMobile?: boolean; // 是否在移动端隐藏，默认false
+ mobileBreakpoint?: number; // 移动端断点，默认768px
+ };
+ zIndex?: number; // 层级，默认1000
+ opacity?: number; // 透明度，0-1，默认1.0
+};
+
+// Live2D 看板娘配置
+export type Live2DModelConfig = {
+ enable: boolean; // 是否启用 Live2D 看板娘
+ model: {
+ path: string; // 模型文件夹路径或model3.json文件路径
+ };
+ position?: {
+ corner?: "bottom-left" | "bottom-right" | "top-left" | "top-right"; // 显示位置，默认bottom-right
+ offsetX?: number; // 水平偏移量，默认20px
+ offsetY?: number; // 垂直偏移量，默认20px
+ };
+ size?: {
+ width?: number; // 容器宽度，默认280px
+ height?: number; // 容器高度，默认250px
+ };
+ interactive?: {
+ enabled?: boolean; // 是否启用交互功能，默认true
+ // motions 和 expressions 将从模型 JSON 文件中自动读取
+ clickMessages?: string[]; // 点击时随机显示的文字消息
+ messageDisplayTime?: number; // 文字显示时间（毫秒），默认3000
+ };
+ responsive?: {
+ hideOnMobile?: boolean; // 是否在移动端隐藏，默认false
+ mobileBreakpoint?: number; // 移动端断点，默认768px
+ };
+};
+
+export type BackgroundWallpaperConfig = {
+ mode: "banner" | "overlay" | "none"; // 壁纸模式：banner横幅模式、overlay全屏透明覆盖模式或none纯色背景
+ switchable?: boolean; // 是否允许用户通过导航栏切换壁纸模式，默认true
+ src:
+ | string
+ | string[]
+ | {
+ desktop?: string | string[];
+ mobile?: string | string[];
+ }; // 支持单个图片、图片数组或分别设置桌面端和移动端图片
+
+ // Banner模式特有配置
+ banner?: {
+ position?:
+ | "top"
+ | "center"
+ | "bottom"
+ | "top left"
+ | "top center"
+ | "top right"
+ | "center left"
+ | "center center"
+ | "center right"
+ | "bottom left"
+ | "bottom center"
+ | "bottom right"
+ | "left top"
+ | "left center"
+ | "left bottom"
+ | "right top"
+ | "right center"
+ | "right bottom"
+ | string; // 壁纸位置，支持CSS object-position的所有值，包括百分比和像素值
+ homeText?: {
+ enable: boolean; // 是否在首页显示自定义文字（全局开关）
+ title?: string; // 主标题
+ subtitle?: string | string[]; // 副标题，支持单个字符串或字符串数组
+ titleSize?: string; // 主标题字体大小，如 "3.5rem"
+ subtitleSize?: string; // 副标题字体大小，如 "1.5rem"
+ typewriter?: {
+ enable: boolean; // 是否启用打字机效果
+ speed: number; // 打字速度（毫秒）
+ deleteSpeed: number; // 删除速度（毫秒）
+ pauseTime: number; // 完整显示后的暂停时间（毫秒）
+ };
+ };
+ credit?: {
+ enable:
+ | boolean
+ | {
+ desktop: boolean; // 桌面端是否显示横幅图片来源文本
+ mobile: boolean; // 移动端是否显示横幅图片来源文本
+ }; // 是否显示横幅图片来源文本，支持布尔值或分别设置桌面端和移动端
+ text:
+ | string
+ | {
+ desktop: string; // 桌面端显示的来源文本
+ mobile: string; // 移动端显示的来源文本
+ }; // 横幅图片来源文本，支持字符串或分别设置桌面端和移动端
+ url?:
+ | string
+ | {
+ desktop: string; // 桌面端原始艺术品或艺术家页面的 URL 链接
+ mobile: string; // 移动端原始艺术品或艺术家页面的 URL 链接
+ }; // 原始艺术品或艺术家页面的 URL 链接，支持字符串或分别设置桌面端和移动端
+ };
+ navbar?: {
+ transparentMode?: "semi" | "full" | "semifull"; // 导航栏透明模式
+ };
+ waves?: {
+ enable:
+ | boolean
+ | {
+ desktop: boolean; // 桌面端是否启用波浪动画效果
+ mobile: boolean; // 移动端是否启用波浪动画效果
+ }; // 是否启用波浪动画效果，支持布尔值或分别设置桌面端和移动端
+ performance?: {
+ quality: "high" | "medium" | "low"; // 渲染质量：high=高质量，medium=中等质量，low=低质量
+ hardwareAcceleration: boolean; // 是否启用硬件加速
+ }; // 波浪效果性能优化配置
+ };
+ };
+ // 全屏透明覆盖模式特有配置
+ overlay?: {
+ zIndex?: number; // 层级，确保壁纸在合适的层级显示
+ opacity?: number; // 壁纸透明度，0-1之间
+ blur?: number; // 背景模糊程度，单位px
+ };
+};
+
+// 广告栏配置
+export type AdConfig = {
+ title?: string; // 广告栏标题
+ content?: string; // 广告栏文本内容
+ image?: {
+ src: string; // 图片地址
+ alt?: string; // 图片描述
+ link?: string; // 图片点击链接
+ external?: boolean; // 是否外部链接
+ };
+ link?: {
+ text: string; // 链接文本
+ url: string; // 链接地址
+ external?: boolean; // 是否外部链接
+ };
+ padding?: {
+ top?: string; // 上边距，如 "0", "1rem", "16px"
+ right?: string; // 右边距
+ bottom?: string; // 下边距
+ left?: string; // 左边距
+ all?: string; // 统一边距，会覆盖单独设置
+ };
+ closable?: boolean; // 是否可关闭
+ displayCount?: number; // 显示次数限制，-1为无限制
+ expireDate?: string; // 过期时间 (ISO 8601 格式)
+};
+
+// 友链配置
+export type FriendLink = {
+ title: string; // 友链标题
+ imgurl: string; // 头像图片URL
+ desc: string; // 友链描述
+ siteurl: string; // 友链地址
+ tags?: string[]; // 标签数组
+ weight: number; // 权重，数字越大排序越靠前
+ enabled: boolean; // 是否启用
+};
+
+export type FriendsPageConfig = {
+ columns: 2 | 3; // 显示列数：2列或3列
+};
+
+// 音乐播放器配置
+export type MusicPlayerConfig = {
+ // 基础功能开关
+ enable: boolean; // 启用音乐播放器功能
+
+ // 使用方式：'meting' 或 'local'
+ mode?: "meting" | "local"; // "meting" 使用 Meting API，"local" 使用本地音乐列表
+
+ // Meting API 配置
+ meting?: {
+ // Meting API 地址
+ api?: string;
+
+ // 音乐平台：netease=网易云音乐, tencent=QQ音乐, kugou=酷狗音乐, xiami=虾米音乐, baidu=百度音乐
+ server?: "netease" | "tencent" | "kugou" | "xiami" | "baidu";
+
+ // 类型：song=单曲, playlist=歌单, album=专辑, search=搜索, artist=艺术家
+ type?: "song" | "playlist" | "album" | "search" | "artist";
+
+ // 歌单/专辑/单曲 ID 或搜索关键词
+ id?: string;
+
+ // 认证 token（可选）
+ auth?: string;
+
+ // 备用 API 配置（当主 API 失败时使用）
+ fallbackApis?: string[];
+
+ // MetingJS 脚本路径（默认使用 CDN，也可配置为本地路径）
+ jsPath?: string;
+ };
+
+ // 本地音乐配置（当 mode 为 'local' 时使用）
+ local?: {
+ playlist?: Array<{
+ name: string; // 歌曲名称
+ artist: string; // 艺术家
+ url: string; // 音乐文件路径（相对于 public 目录）
+ cover?: string; // 封面图片路径（相对于 public 目录）
+ lrc?: string; // 歌词内容，支持 LRC 格式
+ }>;
+ };
+
+ // APlayer 配置选项
+ player?: {
+ // 是否固定模式（固定在页面底部）
+ fixed?: boolean;
+
+ // 是否迷你模式
+ mini?: boolean;
+
+ // 是否自动播放
+ autoplay?: boolean;
+
+ // 主题色
+ theme?: string;
+
+ // 循环模式：'all'=列表循环, 'one'=单曲循环, 'none'=不循环
+ loop?: "all" | "one" | "none";
+
+ // 播放顺序：'list'=列表顺序, 'random'=随机播放
+ order?: "list" | "random";
+
+ // 预加载：'none'=不预加载, 'metadata'=预加载元数据, 'auto'=自动
+ preload?: "none" | "metadata" | "auto";
+
+ // 默认音量 (0-1)
+ volume?: number;
+
+ // 是否互斥播放（同时只能播放一个播放器）
+ mutex?: boolean;
+
+ // 歌词类型：0=不显示, 1=显示（需要提供 lrc 字段）, 2=显示（从 HTML 内容读取）, 3=异步加载（从 API 获取）
+ lrcType?: 0 | 1 | 2 | 3;
+
+ // 歌词是否默认隐藏（当 lrcType 不为 0 时，可以通过此选项控制初始显示状态）
+ lrcHidden?: boolean;
+
+ // 播放列表是否默认折叠
+ listFolded?: boolean;
+
+ // 播放列表最大高度
+ listMaxHeight?: string;
+
+ // localStorage 存储键名
+ storageName?: string;
+ };
+
+ // 响应式配置
+ responsive?: {
+ // 移动端配置
+ mobile?: {
+ // 在移动端是否隐藏
+ hide?: boolean;
+
+ // 移动端断点（小于此宽度时应用移动端配置）
+ breakpoint?: number;
+ };
+ };
+};
+
+// 赞助方式类型
+export type SponsorMethod = {
+ name: string; // 赞助方式名称，如 "支付宝"、"微信"、"PayPal"
+ icon?: string; // 图标名称（Iconify 格式），如 "fa6-brands:alipay"
+ qrCode?: string; // 收款码图片路径（相对于 public 目录），可选
+ link?: string; // 赞助链接 URL，可选。如果提供，会显示跳转按钮
+ description?: string; // 描述文本
+ enabled: boolean; // 是否启用
+};
+
+// 赞助者列表项
+export type SponsorItem = {
+ name: string; // 赞助者名称，如果想显示匿名，可以直接设置为"匿名"或使用 i18n
+ amount?: string; // 赞助金额（可选）
+ date?: string; // 赞助日期（可选，ISO 格式）
+ message?: string; // 留言（可选）
+};
+
+// 赞助配置
+export type SponsorConfig = {
+ title?: string; // 页面标题，默认使用 i18n
+ description?: string; // 页面描述文本
+ usage?: string; // 赞助用途说明
+ methods: SponsorMethod[]; // 赞助方式列表
+ sponsors?: SponsorItem[]; // 赞助者列表（可选）
+ showSponsorsList?: boolean; // 是否显示赞助者列表，默认 true
+ showButtonInPost?: boolean; // 是否在文章详情页底部显示赞助按钮，默认 true
+};
diff --git a/src/utils/code-copy-utils.ts b/src/utils/code-copy-utils.ts
new file mode 100644
index 0000000..585f01d
--- /dev/null
+++ b/src/utils/code-copy-utils.ts
@@ -0,0 +1,151 @@
+/**
+ * 代码复制工具函数
+ */
+
+/**
+ * 从代码块中提取代码文本
+ * @param codeElement 代码元素
+ * @returns 提取的代码文本
+ */
+export function extractCodeText(codeElement: Element): string {
+ // 获取所有代码行元素
+ const lineElements = codeElement.querySelectorAll("span.line");
+ if (lineElements.length > 0) {
+ // 对于有行结构的代码块，精确处理每一行
+ const lines: string[] = [];
+ for (let i = 0; i < lineElements.length; i++) {
+ const lineElement = lineElements[i];
+ // 直接获取文本内容，不添加额外处理
+ const lineText = lineElement.textContent || "";
+ lines.push(lineText);
+ }
+ // 重要：使用 \n 连接行，而不是 \n\n 或其他方式
+ return lines.join("\n");
+ }
+ // 对于没有行结构的代码块
+ const codeElements = codeElement.querySelectorAll(".code:not(summary *)");
+ if (codeElements.length > 0) {
+ const lines: string[] = [];
+ for (let i = 0; i < codeElements.length; i++) {
+ const el = codeElements[i];
+ const lineText = el.textContent || "";
+ lines.push(lineText);
+ }
+ return lines.join("\n");
+ }
+ // 最后回退到直接使用整个code元素的文本内容
+ return codeElement.textContent || "";
+}
+
+/**
+ * 处理连续空行
+ * @param code 原始代码文本
+ * @returns 处理后的代码文本
+ */
+export function processEmptyLines(code: string): string {
+ return code.replace(/\n\n\n+/g, (match) => {
+ // 计算连续换行符的数量
+ const newlineCount = match.length;
+ // 计算空行数量（换行符数量减1）
+ const emptyLineCount = newlineCount - 1;
+
+ // 偶数空行：除以2
+ // 奇数空行：(空行数+1)/2 向下取整
+ let resultEmptyLines: number;
+ if (emptyLineCount % 2 === 0) {
+ // 偶数
+ resultEmptyLines = emptyLineCount / 2;
+ } else {
+ // 奇数
+ resultEmptyLines = Math.floor((emptyLineCount + 1) / 2);
+ }
+
+ // 至少保留一个空行
+ if (resultEmptyLines < 1) resultEmptyLines = 1;
+
+ // 返回对应数量的换行符
+ return "\n".repeat(resultEmptyLines + 1);
+ });
+}
+
+/**
+ * 复制文本到剪贴板
+ * @param text 要复制的文本
+ * @returns Promise 复制是否成功
+ */
+export async function copyToClipboard(text: string): Promise {
+ try {
+ // 优先使用 Clipboard API
+ await navigator.clipboard.writeText(text);
+ return true;
+ } catch (clipboardErr) {
+ console.warn("Clipboard API 失败，尝试备用方案:", clipboardErr);
+
+ // 备用方案：使用 document.execCommand
+ const textArea = document.createElement("textarea");
+ textArea.value = text;
+ textArea.style.position = "fixed";
+ textArea.style.left = "-999999px";
+ textArea.style.top = "-999999px";
+ document.body.appendChild(textArea);
+ textArea.focus();
+ textArea.select();
+
+ try {
+ // biome-ignore lint/suspicious/noExplicitAny: Deprecated API fallback
+ const successful = (document as any).execCommand("copy");
+ if (!successful) {
+ throw new Error("execCommand 返回 false");
+ }
+ return true;
+ } catch (execErr) {
+ console.error("execCommand 也失败了:", execErr);
+ throw new Error("所有复制方法都失败了");
+ } finally {
+ document.body.removeChild(textArea);
+ }
+ }
+}
+
+/**
+ * 处理代码复制按钮点击事件
+ * @param target 点击的按钮元素
+ */
+export async function handleCodeCopy(target: Element): Promise {
+ const preEle = target.closest("pre");
+ const codeEle = preEle?.querySelector("code");
+
+ if (!codeEle) {
+ console.warn("未找到代码元素");
+ return;
+ }
+
+ // 提取代码文本
+ let code = extractCodeText(codeEle);
+
+ // 处理连续空行
+ code = processEmptyLines(code);
+
+ try {
+ // 复制到剪贴板
+ await copyToClipboard(code);
+
+ // 处理成功状态
+ const timeoutId = target.getAttribute("data-timeout-id");
+ if (timeoutId) {
+ clearTimeout(Number.parseInt(timeoutId, 10));
+ }
+
+ target.classList.add("success");
+
+ // 设置新的timeout并保存ID到按钮的自定义属性中
+ const newTimeoutId = setTimeout(() => {
+ target.classList.remove("success");
+ }, 1000);
+
+ target.setAttribute("data-timeout-id", newTimeoutId.toString());
+ } catch (err) {
+ console.error("复制失败:", err);
+ // 可以在这里添加用户提示
+ }
+}
diff --git a/src/utils/content-utils.ts b/src/utils/content-utils.ts
new file mode 100644
index 0000000..179eddd
--- /dev/null
+++ b/src/utils/content-utils.ts
@@ -0,0 +1,119 @@
+import { type CollectionEntry, getCollection } from "astro:content";
+import I18nKey from "@i18n/i18nKey";
+import { i18n } from "@i18n/translation";
+import { getCategoryUrl } from "@utils/url-utils";
+
+// // Retrieve posts and sort them by publication date
+async function getRawSortedPosts() {
+ const allBlogPosts = await getCollection("posts", ({ data }) => {
+ return import.meta.env.PROD ? data.draft !== true : true;
+ });
+
+ const sorted = allBlogPosts.sort((a, b) => {
+ // 首先按置顶状态排序，置顶文章在前
+ if (a.data.pinned && !b.data.pinned) return -1;
+ if (!a.data.pinned && b.data.pinned) return 1;
+
+ // 如果置顶状态相同，则按发布日期排序
+ const dateA = new Date(a.data.published);
+ const dateB = new Date(b.data.published);
+ return dateA > dateB ? -1 : 1;
+ });
+ return sorted;
+}
+
+export async function getSortedPosts() {
+ const sorted = await getRawSortedPosts();
+
+ for (let i = 1; i < sorted.length; i++) {
+ sorted[i].data.nextSlug = sorted[i - 1].id;
+ sorted[i].data.nextTitle = sorted[i - 1].data.title;
+ }
+ for (let i = 0; i < sorted.length - 1; i++) {
+ sorted[i].data.prevSlug = sorted[i + 1].id;
+ sorted[i].data.prevTitle = sorted[i + 1].data.title;
+ }
+
+ return sorted;
+}
+export type PostForList = {
+ id: string;
+ data: CollectionEntry<"posts">["data"];
+};
+export async function getSortedPostsList(): Promise {
+ const sortedFullPosts = await getRawSortedPosts();
+
+ // delete post.body
+ const sortedPostsList = sortedFullPosts.map((post) => ({
+ id: post.id,
+ data: post.data,
+ }));
+
+ return sortedPostsList;
+}
+export type Tag = {
+ name: string;
+ count: number;
+};
+
+export async function getTagList(): Promise 
+
+
+
+>[!TIP]
+>In important layouts, Firefly innovatively adds dual sidebars, article grid (multi-column) layout, masonry layout,
+>
+>Includes site statistics, calendar component, table of contents and other widgets to enrich the sidebar,
+>
+>While also retaining fuwari layout system, freely switchable in the configuration file.
+>
+>**For more layout configurations and demos, please see: [Firefly Layout System Details](https://firefly.cuteleaf.cn/posts/firefly-layout-system/)**
+
+## ✨ Features
+
+### Core Features
+
+- [x] **Astro + Tailwind CSS** - Ultra-fast static site generation based on modern tech stack
+- [x] **Smooth Animations** - Swup page transition animations for silky smooth browsing experience
+- [x] **Responsive Design** - Perfect adaptation for desktop, tablet and mobile devices
+- [x] **Multi-language Support** - i18n internationalization, supports Simplified Chinese, Traditional Chinese, English, Japanese, Russian
+- [x] **Full-text Search** - Client-side search based on Pagefind, supports article content indexing. Also supports MeiliSearch search engine
+
+### Personalization
+- [x] **Sidebar** - Supports single sidebar, dual sidebar configuration, freely switchable in frontend
+- [x] **Article Layout** - Supports list (single column) and grid (multi-column/masonry) layout, freely switchable in frontend
+- [x] **Font Management** - Custom font support with rich font selector
+- [x] **Footer Configuration** - HTML content injection, fully customizable
+- [x] **Navbar Customization** - Logo, title, links fully customizable
+- [x] **Wallpaper Mode Switching** - Banner wallpaper, fullscreen wallpaper, solid background, freely switchable in frontend
+- [x] **Theme Color Customization** - 360° hue adjustment, supports light/dark/system three modes, freely switchable in frontend
+
+### Page Components
+- [x] **Guestbook** - Supports guestbook page with integrated comment system
+- [x] **Announcement Bar** - Top announcement notification, supports closing and custom styles
+- [x] **Mascot** - Supports both Spine and Live2D animation engines
+- [x] **Site Statistics** - Displays article, category, tag counts, total word count, running time, last update time
+- [x] **Site Calendar** - Displays current month calendar and published articles for the month
+- [x] **Sponsor Page** - Multiple payment methods, payment QR codes, sponsor list, in-article sponsor button
+- [x] **Share Poster** - Supports generating beautiful article share posters containing article summary, QR code, etc.
+- [x] **Sakura Effect** - Supports sakura effect, fullscreen sakura animation
+- [x] **Friend Links** - Beautiful friend link display cards
+- [x] **Ad Component** - Supports custom sidebar advertising content
+- [x] **Bangumi** - Display anime and game tracking based on Bangumi API
+- [x] **Comment System** - Integrates Twikoo, Waline, Giscus, Disqus, Artalk comment systems
+- [x] **Visit Counter** - Supports calling Waline, Twikoo built-in visit tracking
+- [x] **Music Player** - Based on APlayer, supports local music and Meting API online music
+
+### Content Enhancement
+- [x] **Image Lightbox** - Fancybox image preview functionality
+- [x] **Floating TOC** - Dynamically displays article table of contents, supports anchor jumping, shown when sidebar TOC is hidden
+- [x] **Email Protection** - Prevent automated crawlers from directly scraping email addresses to avoid spam
+- [x] **Sidebar TOC** - Dynamically displays article table of contents, supports anchor jumping
+- [x] **Enhanced Code Blocks** - Based on Expressive Code, supports code folding, line numbers, language identification
+- [x] **Math Formula Support** - KaTeX rendering engine, supports inline and block formulas
+- [x] **Markdown Extensions** - [Markdown extended features](https://github.com/saicaca/fuwari?tab=readme-ov-file#-markdown-extended-syntax), also includes [Admonitions](https://firefly.cuteleaf.cn/posts/markdown-extended/#%E6%8F%90%E9%86%92%E6%A1%86), [GitHub repository cards](https://firefly.cuteleaf.cn/posts/markdown-extended/#github-%E4%BB%93%E5%BA%93%E5%8D%A1%E7%89%87), [Expressive Code](http://firefly.cuteleaf.cn/posts/code-examples/)
+- [x] **Random Cover Images** - Supports fetching random cover images via API
+
+### SEO
+- [x] **SEO Optimization** - Complete meta tags and structured data
+- [x] **RSS Feed** - Automatically generates RSS Feed
+- [x] **Sitemap** - Automatically generates XML Sitemap with page filtering configuration
+
+
+## 📝 Planned...
+
+- [ ] **Refactor Live2D Mascot**
+- [ ] **Continuous Animation Smoothness Optimization**
+- [ ] More features in continuous development...
+
+If you have useful features and optimizations, please submit a [Pull Request](https://github.com/CuteLeaf/Firefly/pulls)
+
+## 🚀 Quick Start
+
+### Requirements
+
+- Node.js ≤ 22
+- pnpm ≤ 9
+
+### Local Development
+
+1. **Clone the repository:**
+ ```bash
+ git clone https://github.com/Cuteleaf/Firefly.git
+ cd Firefly
+ ```
+ **First [Fork](https://github.com/CuteLeaf/Firefly/fork) to your own repository then clone (recommended)**
+ ```bash
+ git clone https://github.com/you-github-name/Firefly.git
+ cd Firefly
+ ```
+3. **Install dependencies:**
+ ```bash
+ # Install pnpm if not installed
+ npm install -g pnpm
+
+ # Install project dependencies
+ pnpm install
+ ```
+
+4. **Configure blog:**
+ - Edit configuration files in `src/config/` directory to customize blog settings
+
+5. **Start development server:**
+ ```bash
+ pnpm dev
+ ```
+ Blog will be available at `http://localhost:4321`
+
+### Platform Hosting Deployment
+- **Refer to the [official guide](https://docs.astro.build/en/guides/deploy/) to deploy your blog to Vercel, Netlify, GitHub Pages, Cloudflare Pages, EdgeOne Pages, etc.**
+
+ Framework Preset: `Astro`
+
+ Root Directory: `./`
+
+ Output Directory: `dist`
+
+ Build Command: `pnpm run build`
+
+ Install Command: `pnpm install`
+
+## 📖 Configuration
+
+> 📚 **Detailed Configuration Documentation**: Check [Firefly Documentation](https://docs-firefly.cuteleaf.cn/) for complete configuration guide
+
+### Setting Website Language
+
+To set the default language for your blog, edit the `src/config/siteConfig.ts` file:
+
+```typescript
+// Define site language
+const SITE_LANG = "zh_CN";
+```
+
+**Supported language codes:**
+- `zh_CN` - Simplified Chinese
+- `zh_TW` - Traditional Chinese
+- `en` - English
+- `ja` - Japanese
+- `ru` - Russian
+
+
+### Configuration File Structure
+
+```
+src/
+├── config/
+│ ├── index.ts # Configuration index file
+│ ├── siteConfig.ts # Site basic configuration
+│ ├── backgroundWallpaper.ts # Background wallpaper configuration
+│ ├── profileConfig.ts # User profile configuration
+│ ├── commentConfig.ts # Comment system configuration
+│ ├── announcementConfig.ts # Announcement configuration
+│ ├── licenseConfig.ts # License configuration
+│ ├── footerConfig.ts # Footer configuration
+│ ├── FooterConfig.html # Footer HTML content
+│ ├── expressiveCodeConfig.ts # Code highlighting configuration
+│ ├── sakuraConfig.ts # Sakura effect configuration
+│ ├── fontConfig.ts # Font configuration
+│ ├── sidebarConfig.ts # Sidebar layout configuration
+│ ├── navBarConfig.ts # Navbar configuration
+│ ├── musicConfig.ts # Music player configuration
+│ ├── pioConfig.ts # Mascot configuration
+│ ├── adConfig.ts # Ad configuration
+│ ├── friendsConfig.ts # Friend links configuration
+│ ├── sponsorConfig.ts # Sponsor configuration
+│ └── coverImageConfig.ts # Article cover image configuration
+```
+
+
+## ⚙️ Article Frontmatter
+
+```yaml
+---
+title: My First Blog Post
+published: 2023-09-09
+description: This is the first post of my new Astro blog.
+image: ./cover.jpg # Or use "api" to enable random cover images
+tags: [Foo, Bar]
+category: Front-end
+draft: false
+lang: zh-CN # Only set when article language differs from site language in `siteConfig.ts`
+---
+```
+
+## 🧞 Commands
+
+All commands need to be executed in the project root directory:
+
+| Command | Action |
+|:---------------------------|:----------------------------------------------------|
+| `pnpm install` | Install dependencies |
+| `pnpm dev` | Start local development server at `localhost:4321` |
+| `pnpm build` | Build site to `./dist/` |
+| `pnpm preview` | Preview built site locally |
+| `pnpm check` | Check for errors in code |
+| `pnpm format` | Format your code using Biome |
+| `pnpm new-post 
+
+
+
+>[!TIP]
+>重要なレイアウトでは、Fireflyは革新的に左右のデュアルサイドバー、記事グリッド（多列）レイアウト、メーソンリーレイアウトを追加し、
+>
+>サイト統計、カレンダーコンポーネント、記事目次などの小さなウィジェットを追加してサイドバーをより豊かにし、
+>
+>同時にfuwariのレイアウトシステムも保持しており、設定ファイルで自由に切り替えられます。
+>
+>**レイアウト設定とデモの詳細については、[Fireflyレイアウトシステム詳細](https://firefly.cuteleaf.cn/posts/firefly-layout-system/)をご覧ください**
+
+## ✨ 機能
+
+### コア機能
+
+- [x] **Astro + Tailwind CSS** - モダンな技術スタックベースの超高速静的サイト生成
+- [x] **スムーズなアニメーション** - Swupページトランジションアニメーションで滑らかなブラウジング体験
+- [x] **レスポンシブデザイン** - デスクトップ、タブレット、モバイルデバイスに完璧に対応
+- [x] **多言語サポート** - i18n国際化、簡体字中国語、繁体字中国語、英語、日本語、ロシア語をサポート
+- [x] **全文検索** - Pagefindベースのクライアントサイド検索、記事コンテンツのインデックスをサポート。MeiliSearch検索エンジンもサポート
+
+### パーソナライゼーション
+- [x] **サイドバー** - シングルサイドバー、デュアルサイドバー設定をサポート、フロントエンドで自由に切り替え可能
+- [x] **記事レイアウト** - リスト（単列）、グリッド（多列/メーソンリー）レイアウトをサポート、フロントエンドで自由に切り替え可能
+- [x] **フォント管理** - カスタムフォントをサポート、豊富なフォントセレクター
+- [x] **フッター設定** - HTMLコンテンツ注入、完全カスタマイズ可能
+- [x] **ナビゲーションバーのカスタマイズ** - ロゴ、タイトル、リンクを完全カスタマイズ
+- [x] **壁紙モード切り替え** - バナー壁紙、フルスクリーン壁紙、単色背景、フロントエンドで自由に切り替え可能
+- [x] **テーマカラーのカスタマイズ** - 360°色相調整、ライト/ダーク/システム追従の3モードをサポート、フロントエンドで自由に切り替え可能
+
+### ページコンポーネント
+- [x] **ゲストブック** - ゲストブックページをサポート、コメントシステム統合
+- [x] **お知らせバー** - トップお知らせ通知、閉じる機能とカスタムスタイルをサポート
+- [x] **マスコット** - SpineとLive2Dの2つのアニメーションエンジンをサポート
+- [x] **サイト統計** - 記事、カテゴリ、タグ数、総文字数、稼働時間、最終更新時刻を表示
+- [x] **サイトカレンダー** - 今月のカレンダーと今月公開された記事を表示
+- [x] **スポンサーページ** - 複数の支払い方法、支払いQRコード、スポンサーリスト、記事内スポンサーボタン
+- [x] **シェアポスター** - 記事の要約やQRコードなどを含む美しい記事シェアポスターの生成をサポート
+- [x] **桜エフェクト** - 桜エフェクトをサポート、フルスクリーン桜アニメーション
+- [x] **友人リンク** - 美しい友人リンク表示カード
+- [x] **広告コンポーネント** - カスタムサイドバー広告コンテンツをサポート
+- [x] **Bangumi** - Bangumi APIベースのアニメとゲーム記録表示
+- [x] **コメントシステム** - Twikoo、Waline、Giscus、Disqus、Artalkコメントシステムを統合
+- [x] **訪問者数統計** - Waline、Twikoo組み込みの訪問追跡を呼び出し可能
+- [x] **音楽プレーヤー** - APlayerベース、ローカル音楽とMeting APIオンライン音楽をサポート
+
+### コンテンツ拡張
+- [x] **画像ライトボックス** - Fancybox画像プレビュー機能
+- [x] **フローティング目次** - 記事の目次を動的に表示、アンカージャンプをサポート、サイドバー目次非表示時に表示
+- [x] **メールアドレス保護** - 自動クローラーによるメールアドレスの収集を防ぎ、スパムメールを回避
+- [x] **サイドバー目次** - 記事の目次を動的に表示、アンカージャンプをサポート
+- [x] **強化されたコードブロック** - Expressive Codeベース、コード折りたたみ、行番号、言語識別をサポート
+- [x] **数式サポート** - KaTeXレンダリングエンジン、インラインとブロック数式をサポート
+- [x] **Markdown拡張** - [Markdown拡張機能](https://github.com/saicaca/fuwari?tab=readme-ov-file#-markdown-extended-syntax)、[Admonitions](https://firefly.cuteleaf.cn/posts/markdown-extended/#%E6%8F%90%E9%86%92%E6%A1%86)、[GitHubリポジトリカード](https://firefly.cuteleaf.cn/posts/markdown-extended/#github-%E4%BB%93%E5%BA%93%E5%8D%A1%E7%89%87)、[Expressive Code](http://firefly.cuteleaf.cn/posts/code-examples/)も含まれています
+- [x] **ランダムカバー画像** - APIを介してランダムカバー画像の取得をサポート
+
+### SEO
+- [x] **SEO最適化** - 完全なメタタグと構造化データ
+- [x] **RSS購読** - RSSフィードを自動生成
+- [x] **サイトマップ** - XMLサイトマップを自動生成、ページフィルタリング設定をサポート
+
+
+## 📝 予定...
+
+- [ ] **Live2Dマスコットのリファクタリング**
+- [ ] **アニメーションの滑らかさの継続的な最適化**
+- [ ] より多くの機能が継続的に改善中...
+
+便利な機能や最適化があれば、[Pull Request](https://github.com/CuteLeaf/Firefly/pulls)を提出してください
+
+## 🚀 クイックスタート
+
+### 環境要件
+
+- Node.js ≤ 22
+- pnpm ≤ 9
+
+### ローカル開発
+
+1. **リポジトリのクローン：**
+ ```bash
+ git clone https://github.com/Cuteleaf/Firefly.git
+ cd Firefly
+ ```
+ **まず自分のリポジトリに[Fork](https://github.com/CuteLeaf/Firefly/fork)してからクローン（推奨）**
+ ```bash
+ git clone https://github.com/you-github-name/Firefly.git
+ cd Firefly
+ ```
+3. **依存関係のインストール：**
+ ```bash
+ # pnpmがインストールされていない場合、まずインストール
+ npm install -g pnpm
+
+ # プロジェクトの依存関係をインストール
+ pnpm install
+ ```
+
+4. **ブログの設定：**
+ - `src/config/`ディレクトリ内の設定ファイルを編集してブログをカスタマイズ
+
+5. **開発サーバーの起動：**
+ ```bash
+ pnpm dev
+ ```
+ ブログは`http://localhost:4321`で利用可能になります
+
+### プラットフォームホスティングデプロイ
+- **[公式ガイド](https://docs.astro.build/ja/guides/deploy/)を参照して、Vercel、Netlify、GitHub Pages、Cloudflare Pages、EdgeOne Pagesなどにブログをデプロイしてください。**
+
+ フレームワークプリセット： `Astro`
+
+ ルートディレクトリ： `./`
+
+ 出力ディレクトリ： `dist`
+
+ ビルドコマンド： `pnpm run build`
+
+ インストールコマンド： `pnpm install`
+
+## 📖 設定説明
+
+> 📚 **詳細な設定ドキュメント**：[Fireflyドキュメント](https://docs-firefly.cuteleaf.cn/)で完全な設定ガイドを確認してください
+
+### ウェブサイトの言語設定
+
+ブログのデフォルト言語を設定するには、`src/config/siteConfig.ts`ファイルを編集します：
+
+```typescript
+// サイト言語を定義
+const SITE_LANG = "zh_CN";
+```
+
+**サポートされている言語コード：**
+- `zh_CN` - 簡体字中国語
+- `zh_TW` - 繁体字中国語
+- `en` - 英語
+- `ja` - 日本語
+- `ru` - ロシア語
+
+
+### 設定ファイル構造
+
+```
+src/
+├── config/
+│ ├── index.ts # 設定インデックスファイル
+│ ├── siteConfig.ts # サイト基本設定
+│ ├── backgroundWallpaper.ts # 背景壁紙設定
+│ ├── profileConfig.ts # ユーザープロフィール設定
+│ ├── commentConfig.ts # コメントシステム設定
+│ ├── announcementConfig.ts # お知らせ設定
+│ ├── licenseConfig.ts # ライセンス設定
+│ ├── footerConfig.ts # フッター設定
+│ ├── FooterConfig.html # フッターHTMLコンテンツ
+│ ├── expressiveCodeConfig.ts # コードハイライト設定
+│ ├── sakuraConfig.ts # 桜エフェクト設定
+│ ├── fontConfig.ts # フォント設定
+│ ├── sidebarConfig.ts # サイドバーレイアウト設定
+│ ├── navBarConfig.ts # ナビゲーションバー設定
+│ ├── musicConfig.ts # 音楽プレーヤー設定
+│ ├── pioConfig.ts # マスコット設定
+│ ├── adConfig.ts # 広告設定
+│ ├── friendsConfig.ts # 友人リンク設定
+│ ├── sponsorConfig.ts # スポンサー設定
+│ └── coverImageConfig.ts # 記事カバー画像設定
+```
+
+
+## ⚙️ 記事のFrontmatter
+
+```yaml
+---
+title: My First Blog Post
+published: 2023-09-09
+description: This is the first post of my new Astro blog.
+image: ./cover.jpg # または「api」を使用してランダムカバー画像を有効化
+tags: [Foo, Bar]
+category: Front-end
+draft: false
+lang: zh-CN # 記事の言語が`siteConfig.ts`のサイト言語と異なる場合のみ設定
+---
+```
+
+## 🧞 コマンド
+
+すべてのコマンドはプロジェクトルートディレクトリで実行する必要があります：
+
+| Command | Action |
+|:---------------------------|:----------------------------------------------------|
+| `pnpm install` | 依存関係をインストール |
+| `pnpm dev` | `localhost:4321`でローカル開発サーバーを起動 |
+| `pnpm build` | `./dist/`にサイトをビルド |
+| `pnpm preview` | ビルドされたサイトをローカルでプレビュー |
+| `pnpm check` | コード内のエラーをチェック |
+| `pnpm format` | Biomeを使用してコードをフォーマット |
+| `pnpm new-post 
+
+ ) : (
+ )
+ 
+