From 1801c87cde1c443f1cbbd4fca67a38d85cae28ae Mon Sep 17 00:00:00 2001 From: QIU SHENGMING Date: Thu, 20 Nov 2025 12:34:53 +0800 Subject: [PATCH] =?UTF-8?q?=E5=88=A0=E9=99=A4google=E5=B9=BF=E5=91=8A?= =?UTF-8?q?=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 太耗资源了！ --- src/layouts/Layout.astro | 116 ++++++++++++++++++++++++++++++++++----- 1 file changed, 103 insertions(+), 13 deletions(-) diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 1914f55..a11603f 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -30,13 +30,19 @@ interface Props { let { title, banner, description, lang, setOGTypeArticle } = Astro.props; +// apply a class to the body element to decide the height of the banner, only used for initial page load +// Swup can update the body for each page visit, but it's after the page transition, causing a delay for banner height change +// so use Swup hooks instead to change the height immediately when a link is clicked const isHomePage = pathsEqual(Astro.url.pathname, url("/")); +// defines global css variables +// why doing this in Layout instead of GlobalStyles: https://github.com/withastro/astro/issues/6728#issuecomment-1502203757 const configHue = siteConfig.themeColor.hue; if (!banner || typeof banner !== "string" || banner.trim() === "") { banner = siteConfig.banner.src; } +// TODO don't use post cover as banner for now banner = siteConfig.banner.src; const enableBanner = siteConfig.banner.enable; @@ -51,6 +57,7 @@ if (title) { const favicons: Favicon[] = siteConfig.favicon.length > 0 ? siteConfig.favicon : defaultFavicons; +// const siteLang = siteConfig.lang.replace('_', '-') if (!lang) { lang = `${siteConfig.lang}`; } @@ -102,7 +109,9 @@ const bannerOffset = /> ))} + + - - @@ -153,6 +163,7 @@ const bannerOffset = + @@ -196,6 +207,9 @@ const bannerOffset = import 'overlayscrollbars/overlayscrollbars.css'; import { OverlayScrollbars, + // ScrollbarsHidingPlugin, + // SizeObserverPlugin, + // ClickScrollPlugin } from 'overlayscrollbars'; import {getHue, getStoredTheme, setHue, setTheme} from "../utils/setting-utils"; import {pathsEqual, url} from "../utils/url-utils"; @@ -207,13 +221,57 @@ import { } from "../constants/constants"; import { siteConfig } from '../config'; +/* Preload fonts */ +// (async function() { +// try { +// await Promise.all([ +// document.fonts.load("400 1em Roboto"), +// document.fonts.load("700 1em Roboto"), +// ]); +// document.body.classList.remove("hidden"); +// } catch (error) { +// console.log("Failed to load fonts:", error); +// } +// })(); + +/* TODO This is a temporary solution for style flicker issue when the transition is activated */ +/* issue link: https://github.com/withastro/astro/issues/8711, the solution get from here too */ +/* update: fixed in Astro 3.2.4 */ +/* +function disableAnimation() { + const css = document.createElement('style') + css.appendChild( + document.createTextNode( + `*{ + -webkit-transition:none!important; + -moz-transition:none!important; + -o-transition:none!important; + -ms-transition:none!important; + transition:none!important + }` + ) + ) + document.head.appendChild(css) + + return () => { + // Force restyle + ;(() => window.getComputedStyle(document.body))() + + // Wait for next tick before removing + setTimeout(() => { + document.head.removeChild(css) + }, 1) + } +} +*/ + const bannerEnabled = !!document.getElementById('banner-wrapper') function setClickOutsideToClose(panel: string, ignores: string[]) { document.addEventListener("click", event => { let panelDom = document.getElementById(panel); let tDom = event.target; - if (!(tDom instanceof Node)) return; + if (!(tDom instanceof Node)) return; // Ensure the event target is an HTML Node for (let ig of ignores) { let ie = document.getElementById(ig) if (ie == tDom || (ie?.contains(tDom))) { @@ -241,10 +299,12 @@ function initCustomScrollbar() { const bodyElement = document.querySelector('body'); if (!bodyElement) return; OverlayScrollbars( + // docs say that a initialization to the body element would affect native functionality like window.scrollTo + // but just leave it here for now { target: bodyElement, cancel: { - nativeScrollbarsOverlaid: true, + nativeScrollbarsOverlaid: true, // don't initialize the overlay scrollbar if there is a native one } }, { scrollbars: { @@ -312,25 +372,48 @@ function showBanner() { banner.classList.remove('opacity-0', 'scale-105'); } +// 专用于创建loadComment的事件，即通知评论组件进行一次加载 + function initCommentComponent() { + const event = new Event("loadComment"); + document.dispatchEvent(event); + } +// twikoo评论 + function init() { + // disableAnimation()() // TODO loadTheme(); loadHue(); initCustomScrollbar(); showBanner(); - initCommentComponent(); + initCommentComponent(); // 调用initCommentComponent()函数，twikoo } +/* Load settings when entering the site */ init(); const setup = () => { + // TODO: temp solution to change the height of the banner +/* + window.swup.hooks.on('animation:out:start', () => { + const path = window.location.pathname + const body = document.querySelector('body') + if (path[path.length - 1] === '/' && !body.classList.contains('is-home')) { + body.classList.add('is-home') + } else if (path[path.length - 1] !== '/' && body.classList.contains('is-home')) { + body.classList.remove('is-home') + } + }) +*/ window.swup.hooks.on('link:click', () => { + // Remove the delay for the first time page load document.documentElement.style.setProperty('--content-delay', '0ms') + // prevent elements from overlapping the navbar if (!bannerEnabled) { return } @@ -343,13 +426,17 @@ const setup = () => { navbar.classList.add('navbar-hidden') } }) + // window.swup.hooks.on('content:replace', initCustomScrollbar) window.swup.hooks.on("content:replace", () => { + initCustomScrollbar(); - initCommentComponent(); + + initCommentComponent(); // 添加代码调用 + }); - window.swup.hooks.on('visit:start', (visit: {to: {url: string}}) => { + // change banner height immediately when a link is clicked const bodyElement = document.querySelector('body') if (pathsEqual(visit.to.url, url('/'))) { bodyElement!.classList.add('lg:is-home'); @@ -357,24 +444,25 @@ const setup = () => { bodyElement!.classList.remove('lg:is-home'); } + // increase the page height during page transition to prevent the scrolling animation from jumping const heightExtend = document.getElementById('page-height-extend') if (heightExtend) { heightExtend.classList.remove('hidden') } + // Hide the TOC while scrolling back to top let toc = document.getElementById('toc-wrapper'); if (toc) { toc.classList.add('toc-not-ready') } }); - window.swup.hooks.on('page:view', () => { + // hide the temp high element when the transition is done const heightExtend = document.getElementById('page-height-extend') if (heightExtend) { heightExtend.classList.remove('hidden') } }); - window.swup.hooks.on('visit:end', (_visit: {to: {url: string}}) => { setTimeout(() => { const heightExtend = document.getElementById('page-height-extend') @@ -382,6 +470,7 @@ const setup = () => { heightExtend.classList.add('hidden') } + // Just make the transition looks better const toc = document.getElementById('toc-wrapper'); if (toc) { toc.classList.remove('toc-not-ready') @@ -420,7 +509,7 @@ function scrollFunction() { if (!bannerEnabled) return if (navbar) { const NAVBAR_HEIGHT = 72 - const MAIN_PANEL_EXCESS_HEIGHT = MAIN_PANEL_OVERLAPS_BANNER_HEIGHT * 16 + const MAIN_PANEL_EXCESS_HEIGHT = MAIN_PANEL_OVERLAPS_BANNER_HEIGHT * 16 // The height the main panel overlaps the banner let bannerHeight = BANNER_HEIGHT if (document.body.classList.contains('lg:is-home') && window.innerWidth >= 1024) { @@ -437,6 +526,7 @@ function scrollFunction() { window.onscroll = scrollFunction window.onresize = () => { + // 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`); @@ -504,4 +594,4 @@ if (window.swup) { } else { document.addEventListener("swup:enable", setup) } - + \ No newline at end of file