---
import GoogleAnalytics from "@components/analytics/GoogleAnalytics.astro";
import MicrosoftClarity from "@components/analytics/MicrosoftClarity.astro";
import FancyboxManager from "@components/features/FancyboxManager.astro";
import FontManager from "@components/features/FontManager.astro";
import SakuraEffect from "@components/features/SakuraEffect.astro";
import ConfigCarrier from "@components/layout/ConfigCarrier.astro";
import {
backgroundWallpaper,
expressiveCodeConfig,
profileConfig,
siteConfig,
} from "@/config";
import {
BANNER_HEIGHT,
BANNER_HEIGHT_EXTEND,
BANNER_HEIGHT_HOME,
PAGE_WIDTH,
} from "@/constants/constants";
import { defaultFavicons } from "@/constants/icon";
import type { Favicon } from "@/types/config";
import { getDefaultBackground, isHomePage } from "@/utils/layout-utils";
import { url } from "@/utils/url-utils";
import "@/styles/main.css";
import "@/styles/variables.styl";
import "@/styles/markdown-extend.styl";
import "@rehype-callouts-theme";
interface Props {
title?: string;
banner?: string;
description?: string;
lang?: string;
setOGTypeArticle?: boolean;
postSlug?: string;
}
let { title, banner, description, lang, setOGTypeArticle, postSlug } =
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 isHomePageCheck = isHomePage(Astro.url.pathname);
// 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;
// 获取导航栏透明模式配置
const navbarTransparentMode =
backgroundWallpaper.banner?.navbar?.transparentMode || "semi";
// 判断是否应该显示顶部高光效果（只在full和semifull模式下显示）
const shouldShowTopHighlight =
navbarTransparentMode === "full" || navbarTransparentMode === "semifull";
if (!banner || typeof banner !== "string" || banner.trim() === "") {
banner = getDefaultBackground();
}
// TODO don't use post cover as banner for now
banner = getDefaultBackground();
const enableBanner = backgroundWallpaper.mode === "banner";
let pageTitle: string;
if (title) {
pageTitle = `${title} - ${siteConfig.title}`;
} else {
pageTitle = siteConfig.subtitle
? `${siteConfig.title} - ${siteConfig.subtitle}`
: siteConfig.title;
}
let ogImageUrl: string | undefined;
if (siteConfig.generateOgImages && postSlug) {
ogImageUrl = new URL(`/og/${postSlug}.png`, Astro.site).toString();
}
const favicons: Favicon[] =
siteConfig.favicon.length > 0 ? siteConfig.favicon : defaultFavicons;
// const siteLang = siteConfig.lang.replace('_', '-')
if (!lang) {
lang = `${siteConfig.lang}`;
}
const siteLang = lang.replace("_", "-");
// 使用固定的banner偏移量，position配置用于图片定位
const bannerOffset = `${BANNER_HEIGHT_EXTEND / 2}vh`;
---
{siteConfig.analytics?.googleAnalyticsId && (
)}
{siteConfig.analytics?.microsoftClarityId && (
)}
{pageTitle}
{
siteConfig.keywords && siteConfig.keywords.length > 0 && (
)
}
{ogImageUrl && }
{
setOGTypeArticle ? (
) : (
)
}
{
favicons.map((favicon) => (
))
}
`font-${fontId}-enabled`)
: []),
]}
>
{shouldShowTopHighlight && }