diff --git a/package.json b/package.json index dde9e19..6ed1507 100644 --- a/package.json +++ b/package.json @@ -15,15 +15,15 @@ "@astrojs/mdx": "^4.2.3", "@astrojs/rss": "^4.0.11", "@astrojs/sitemap": "^3.3.0", - "@swup/astro": "^1.5.0", + "@swup/astro": "^1.6.0", "aplayer": "^1.10.1", - "astro": "^5.5.6", + "astro": "^5.6.0", "overlayscrollbars": "^2.11.1", "vanilla-lazyload": "^19.1.3", "vh-plugin": "^1.2.2" }, "devDependencies": { - "@playform/compress": "^0.1.8", + "@playform/compress": "^0.1.9", "@types/dplayer": "^1.25.5", "@types/nprogress": "^0.2.3", "@waline/client": "^3.5.6", diff --git a/public/assets/images/background.png b/public/assets/images/background.png deleted file mode 100644 index 4aca614..0000000 Binary files a/public/assets/images/background.png and /dev/null differ diff --git a/public/assets/js/vhPaopao.js b/public/assets/js/vhPaopao.js index 8d03916..4d62ca1 100644 --- a/public/assets/js/vhPaopao.js +++ b/public/assets/js/vhPaopao.js @@ -1,54 +1,50 @@ -document.addEventListener('DOMContentLoaded', () => { - const vhPaopaoInit = (element, options) => { - const config = Object.assign({ radius: 10, density: 0.3, clearOffset: 0.2 }, options); - let width, height, ctx, active = true; - const canvas = document.createElement('canvas'); - const particles = []; - // 初始化画布 - const initCanvas = () => { - width = element.offsetWidth; - height = element.offsetHeight; - Object.assign(canvas.style, { top: '0', zIndex: '0', position: 'absolute', 'pointer-events': 'none' }); - element.append(canvas); - element.parentElement.style.overflow = 'hidden'; - canvas.width = width; - canvas.height = height; - ctx = canvas.getContext('2d'); - }; - - // 粒子类 - class Particle { - constructor() { this.reset() } - reset() { - this.x = Math.random() * width; - this.y = height + 100 * Math.random(); - this.alpha = 0.1 + Math.random() * config.clearOffset; - this.scale = 0.1 + 0.3 * Math.random(); - this.speed = Math.random(); - this.color = config.color === "random" ? `rgba(${Math.random() * 255 | 0},0,0,${Math.random().toFixed(2)})` : config.color; - } - draw() { - if (this.alpha <= 0) this.reset(); - this.y -= this.speed; - this.alpha -= 0.0005; - ctx.beginPath(); - ctx.arc(this.x, this.y, this.scale * config.radius, 0, Math.PI * 2); - ctx.fillStyle = this.color; - ctx.fill(); - } - } - // 初始化 - initCanvas(); - // 动画循环 - const animate = () => { active && ctx.clearRect(0, 0, width, height); particles.forEach(p => p.draw()); requestAnimationFrame(animate); }; - Array.from({ length: width * config.density | 0 }, () => particles.push(new Particle())); - animate(); - // 事件监听 - window.addEventListener('scroll', () => active = document.documentElement.scrollTop <= height); - window.addEventListener('resize', () => { width = element.clientWidth; height = element.clientHeight; canvas.width = width; canvas.height = height; }); +export default (element, options) => { + document.querySelectorAll('.vh-paopao').forEach(item => setTimeout(() => item.remove())); + const config = Object.assign({ radius: 10, density: 0.3, clearOffset: 0.2 }, options); + let width, height, ctx, active = true; + const canvas = document.createElement('canvas'); + const particles = []; + // 初始化画布 + const initCanvas = () => { + width = element.offsetWidth; + height = element.offsetHeight; + Object.assign(canvas.style, { top: '0', zIndex: '0', position: 'absolute', 'pointer-events': 'none' }); + element.append(canvas); + element.parentElement.style.overflow = 'hidden'; + canvas.width = width; + canvas.height = height; + canvas.classList.add('vh-paopao'); + ctx = canvas.getContext('2d'); }; - // 调用 - const target = document.querySelector('main.main > .header-main'); - target && vhPaopaoInit(target, { radius: 10, density: 0.2, color: "rgba(255,255,255,.4)", clearOffset: 0.99 }); -}); \ No newline at end of file + // 粒子类 + class Particle { + constructor() { this.reset() } + reset() { + this.x = Math.random() * width; + this.y = height + 100 * Math.random(); + this.alpha = 0.1 + Math.random() * config.clearOffset; + this.scale = 0.1 + 0.3 * Math.random(); + this.speed = Math.random(); + this.color = config.color === "random" ? `rgba(${Math.random() * 255 | 0},0,0,${Math.random().toFixed(2)})` : config.color; + } + draw() { + if (this.alpha <= 0) this.reset(); + this.y -= this.speed; + this.alpha -= 0.0005; + ctx.beginPath(); + ctx.arc(this.x, this.y, this.scale * config.radius, 0, Math.PI * 2); + ctx.fillStyle = this.color; + ctx.fill(); + } + } + // 初始化 + initCanvas(); + // 动画循环 + const animate = () => { active && ctx.clearRect(0, 0, width, height); particles.forEach(p => p.draw()); requestAnimationFrame(animate); }; + Array.from({ length: width * config.density | 0 }, () => particles.push(new Particle())); + animate(); + // 事件监听 + window.addEventListener('scroll', () => active = document.documentElement.scrollTop <= height); + window.addEventListener('resize', () => { width = element.clientWidth; height = element.clientHeight; canvas.width = width; canvas.height = height; }); +}; \ No newline at end of file diff --git a/src/components/Aside/Aside.less b/src/components/Aside/Aside.less index b949815..2ed397c 100644 --- a/src/components/Aside/Aside.less +++ b/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; diff --git a/src/components/MainHeader/MainHeader.less b/src/components/MainHeader/MainHeader.less index 32020f8..9050617 100644 --- a/src/components/MainHeader/MainHeader.less +++ b/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; } diff --git a/src/config.ts b/src/config.ts index df84bc2..cd59360 100644 --- a/src/config.ts +++ b/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: { diff --git a/src/layouts/Layout/Layout.astro b/src/layouts/Layout/Layout.astro index e166b06..7b49f89 100644 --- a/src/layouts/Layout/Layout.astro +++ b/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"; {ad_Client && (asideAD_Slot || articleAD_Slot) && :root {${Object.entries(Theme) .map(([key, value]) => `${key}:${value};`) - .join("")}--vh-home-banner:url('${HomeBanner.cover}')}`} + .join("")}--vh-main-header-height:${Home ? HomeBanner.HomeHeight : HomeBanner.PageHeight};--vh-home-banner:${HomeBanner.background}}`} /> @@ -46,7 +44,7 @@ import "./Layout.less";
{HomeBanner.enable && } -
+
diff --git a/src/pages/[...page].astro b/src/pages/[...page].astro index 9496340..1bd56a6 100644 --- a/src/pages/[...page].astro +++ b/src/pages/[...page].astro @@ -31,7 +31,7 @@ import Pagination from "@/components/Pagination/Pagination.astro"; const currentPage = page_data.url.current.replace("/", ""); --- - +
diff --git a/src/scripts/Init.ts b/src/scripts/Init.ts index 502c217..161a2ef 100644 --- a/src/scripts/Init.ts +++ b/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(""); // 初始化搜索功能 diff --git a/src/scripts/PaoPao.ts b/src/scripts/PaoPao.ts new file mode 100644 index 0000000..db653df --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/src/styles/ArticleBase.less b/src/styles/ArticleBase.less index 41b1be2..72aa2d3 100644 --- a/src/styles/ArticleBase.less +++ b/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; } } diff --git a/src/styles/Base.less b/src/styles/Base.less index e3bdaee..177fdbb 100644 --- a/src/styles/Base.less +++ b/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%);