添加大标题

Author: fishcpy

src/components/misc/BannerWrapper.astro

@@ -0,0 +1,40 @@
+---
+import ImageWrapper from "./ImageWrapper.astro";
+import { siteConfig } from "../../config";
+
+interface Props {
+	id?: string;
+	class?: string;
+	alt?: string;
+}
+
+const { id, alt } = Astro.props;
+const className = Astro.props.class;
+const bannerConfig = siteConfig.banner;
+---
+
+<div id={id} class:list={[className, 'relative overflow-hidden']}>
+    <ImageWrapper 
+        src={bannerConfig.src} 
+        position={bannerConfig.position}
+        alt={alt || "Banner image of the blog"}
+        class="w-full h-full"
+    />
+    
+    {bannerConfig.text?.enable && (
+        <div class="absolute inset-0 flex items-center justify-center z-20">
+            <div class="text-center text-white px-6 py-4">
+                {bannerConfig.text.title && (
+                    <h1 class="text-3xl md:text-5xl font-bold mb-2 drop-shadow-lg">
+                        {bannerConfig.text.title}
+                    </h1>
+                )}
+                {bannerConfig.text.subtitle && (
+                    <p class="text-lg md:text-xl opacity-90 drop-shadow-md">
+                        {bannerConfig.text.subtitle}
+                    </p>
+                )}
+            </div>
+        </div>
+    )}
+</div>

src/config.ts

@@ -1,3 +1,4 @@
+import { AUTO_MODE, DARK_MODE, LIGHT_MODE } from "./constants/constants";
 import type {
 	CommentConfig,
 	ExpressiveCodeConfig,
@@ -7,7 +8,6 @@ import type {
 	SiteConfig,
 } from "./types/config";
 import { LinkPreset } from "./types/config";
-import { AUTO_MODE, DARK_MODE, LIGHT_MODE } from "./constants/constants";
 
 export const siteConfig: SiteConfig = {
 	title: "fishcpy的小破站",
@@ -28,6 +28,11 @@ export const siteConfig: SiteConfig = {
 			text: "", // 要显示的版权文本
 			url: "", // (可选) 原作品或艺术家页面的URL链接
 		},
+		text: {
+			enable: true, // 是否在banner中显示文字
+			title: "非淡泊无以明志，非宁静无以致远", // banner主标题
+			subtitle: "Welcome to my blog", // banner副标题
+		},
 	},
 	toc: {
 		enable: true, // 在文章右侧显示目录

src/constants/constants.ts

@@ -6,8 +6,8 @@ export const LIGHT_MODE = "light",
 export const DEFAULT_THEME = AUTO_MODE;
 
 // Banner height unit: vh
-export const BANNER_HEIGHT = 35;
-export const BANNER_HEIGHT_EXTEND = 30;
+export const BANNER_HEIGHT = 45;
+export const BANNER_HEIGHT_EXTEND = 35;
 export const BANNER_HEIGHT_HOME = BANNER_HEIGHT + BANNER_HEIGHT_EXTEND;
 
 // The height the main panel overlaps the banner, unit: rem

src/layouts/MainGridLayout.astro

@@ -7,6 +7,7 @@ import Twikoo from "@components/comment/Twikoo.astro";
 import type { MarkdownHeading } from "astro";
 import { Icon } from "astro-icon/components";
 import ImageWrapper from "../components/misc/ImageWrapper.astro";
+import BannerWrapper from "../components/misc/BannerWrapper.astro";
 import TOC from "../components/widget/TOC.astro";
 import { siteConfig } from "../config";
 import {
@@ -38,7 +39,7 @@ const hasBannerCredit =
 const hasBannerLink = !!siteConfig.banner.credit.url;
 
 const mainPanelTop = siteConfig.banner.enable
-	? `calc(${BANNER_HEIGHT}vh - ${MAIN_PANEL_OVERLAPS_BANNER_HEIGHT}rem)`
+	? `calc(${BANNER_HEIGHT}vh - ${MAIN_PANEL_OVERLAPS_BANNER_HEIGHT}rem + 6rem)`
 	: "5.5rem";
 ---
 
@@ -54,10 +55,9 @@ const mainPanelTop = siteConfig.banner.enable
 
 <!-- Banner -->
 {siteConfig.banner.enable && <div id="banner-wrapper" class={`absolute z-10 w-full transition duration-700 overflow-hidden`} style={`top: calc(-1 * var(--banner-height-extend))`}>
-    <ImageWrapper id="banner" alt="Banner image of the blog" class:list={["object-cover h-full transition duration-700 opacity-0 scale-105"]}
-                  src={siteConfig.banner.src} position={siteConfig.banner.position}
+    <BannerWrapper id="banner" alt="Banner image of the blog" class:list={["object-cover h-full transition duration-700 opacity-0 scale-105"]}
     >
-    </ImageWrapper>
+    </BannerWrapper>
 </div>}
 
 <!-- Main content -->

src/types/config.ts

@@ -20,6 +20,11 @@ export type SiteConfig = {
 			text: string;
 			url?: string;
 		};
+		text?: {
+			enable: boolean;
+			title?: string;
+			subtitle?: string;
+		};
 	};
 	toc: {
 		enable: boolean;