自定义开启关闭顶部封面✅

src/components/Aside/Aside.less

@@ -138,7 +138,7 @@ aside.vh-aside {
 
         &>.count {
           box-sizing: border-box;
-          padding: 1rem 0;
+          padding: 1rem 0 0;
           display: flex;
           flex-direction: column;
           justify-content: center;

src/components/MainHeader/MainHeader.less

@@ -8,7 +8,7 @@
   gap: 0.88rem;
   width: 100%;
   height: var(--vh-main-header-height);
-  transition: height 0.3s ease-in-out;
+  transition: height 0.58s ease-in-out;
   z-index: 1;
 
   &::before {
@@ -16,8 +16,7 @@
     position: absolute;
     inset: 0;
     pointer-events: none;
-    background: var(--vh-home-banner) no-repeat top center;
-    background-size: cover;
+    background: var(--vh-home-banner);
     z-index: -1;
   }
 

src/config.ts

@@ -18,7 +18,12 @@ export default {
   // 顶部 Banner 配置
   HomeBanner: {
     enable: true,
-    cover: '/assets/images/home-banner.webp'
+    // 首页高度
+    HomeHeight: '38.88rem',
+    // 其他页面高度
+    PageHeight: '28.88rem',
+    // 背景
+    background: "url('/assets/images/home-banner.webp') no-repeat center 60%/cover",
   },
   // 博客主题配置
   Theme: {

src/layouts/Layout/Layout.astro

@@ -1,5 +1,5 @@
 ---
-const { title, keywords, description, pagecover, activeNav } = Astro.props;
+const { title, keywords, description, pagecover, activeNav, Home } = Astro.props;
 // 网站配置
 import SITE_INFO from "@/config";
 const { GoogleAds, Theme, HomeBanner } = SITE_INFO;
@@ -30,15 +30,13 @@ import "./Layout.less";
 	<Head Title={title} Keywords={keywords} Description={description} PageCover={pagecover}>
 		<!-- 谷歌广告JS加载项 -->
 		{ad_Client && (asideAD_Slot || articleAD_Slot) && <script is:inline async src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${ad_Client}`} crossorigin="anonymous" />}
-		<!-- 泡泡🫧 -->
-		<script is:inline src="/assets/js/vhPaopao.js" defer></script>
 		<!-- 彩旗🎈 -->
 		<script is:inline src="/assets/js/vhCaiqi.js" defer></script>
 		<!-- 设置主题颜色 -->
 		<Fragment
 			set:html={`<style>:root {${Object.entries(Theme)
 				.map(([key, value]) => `${key}:${value};`)
-				.join("")}--vh-home-banner:url('${HomeBanner.cover}')}</style>`}
+				.join("")}--vh-main-header-height:${Home ? HomeBanner.HomeHeight : HomeBanner.PageHeight};--vh-home-banner:${HomeBanner.background}}</style>`}
 		/>
 	</Head>
 	<body>
@@ -46,7 +44,7 @@ import "./Layout.less";
 		<Header activeNav={activeNav} />
 		<main class="main">
 			{HomeBanner.enable && <MainHeader />}
-			<section class="main-inner" style={`padding-top:${HomeBanner.enable ? "2rem" : "calc(66px + 0.68rem)"}`}>
+			<section class="main-inner" style={`padding-top:${HomeBanner.enable ? "0.88rem" : "calc(66px + 0.68rem)"}`}>
 				<section class="main-inner-content">
 					<slot />
 				</section>

src/pages/[...page].astro

@@ -31,7 +31,7 @@ import Pagination from "@/components/Pagination/Pagination.astro";
 const currentPage = page_data.url.current.replace("/", "");
 ---
 
-<Layout title={currentPage ? `第${currentPage}页文章` : ""} description={Description}>
+<Layout title={currentPage ? `第${currentPage}页文章` : ""} description={Description} Home={true}>
 	<section class="article-list-main">
 		<section class="article-list">
 			<!-- 文章列表 -->

src/scripts/Init.ts

@@ -1,6 +1,8 @@
 import { inRouter, outRouter } from "@/utils/updateRouter";
 // Banner 打字效果
 import TypeWriteInit from "@/scripts/TypeWrite";
+// 泡泡🫧效果
+import PaoPaoInit from "@/scripts/PaoPao";
 // 初始化文章代码块
 import codeInit from "@/scripts/Code";
 // 初始化视频播放器
@@ -45,8 +47,6 @@ const videoList: any[] = [];
 const MusicList: any[] = [];
 let commentLIst: any = { walineInit: null };
 const indexInit = async (only: boolean = true) => {
-  // 打字效果
-  only && TypeWriteInit();
   // 初始化网站运行时间
   only && initWebSiteTime();
   // 初始化BackTop组件
@@ -79,6 +79,10 @@ const indexInit = async (only: boolean = true) => {
   checkComment() && commentInit(checkComment(), commentLIst)
   // Han Analytics 统计
   HanAnalyticsInit();
+  // 打字效果
+  only && TypeWriteInit();
+  // 泡泡🫧效果
+  PaoPaoInit();
   // 预加载搜索数据
   only && searchFn("");
   // 初始化搜索功能

src/scripts/PaoPao.ts

@@ -0,0 +1,12 @@
+import vhPaopaoInit from '../../public/assets/js/vhPaopao.js';
+let headerMainHeight = 0;
+export default async () => {
+  // 调用
+  const target = document.querySelector('main.main > .header-main');
+  if (!target) return;
+  setTimeout(() => {
+    if (headerMainHeight == target.clientHeight) return;
+    headerMainHeight = target.clientHeight;
+    vhPaopaoInit(target, { radius: 10, density: 0.2, color: "rgba(255,255,255,.4)", clearOffset: 0.99 });
+  }, 688);
+}

src/styles/ArticleBase.less

@@ -201,6 +201,9 @@
 
       // :::note
       &.vh-note {
+        display: flex;
+        flex-direction: column;
+        gap: 0.688rem;
         padding: 0.888rem;
         border-left: 5px solid #eee;
         border-left-color: #777;
@@ -242,9 +245,8 @@
         }
 
         p {
-          padding: 0.38rem 0;
           font-size: 0.875rem;
-          line-height: 1.388rem;
+          line-height: 1.58rem;
           font-weight: 500;
         }
       }

src/styles/Base.less

@@ -8,9 +8,7 @@
 	// Body 背景颜色
 	--vh-body-bg: #F8F8F8;
 	// Back Top 按钮位置
-	--vh-back-top: calc((calc(100vw - 2rem) - min((100vw - 2rem), var(--vh-main-max-width))) / 2);
-	// Main Header 封面高度
-	--vh-main-header-height: 38.88rem;
+	--vh-back-top: calc((calc(100vw - 2rem) - min((100vw - 2rem), var(--vh-main-max-width))) / 2 + 1rem);
 	// 字体颜色
 	--vh-font-88: rgb(from var(--vh-font-color) r g b / 88%);
 	--vh-font-66: rgb(from var(--vh-font-color) r g b / 66%);