---
import "katex/dist/katex.css";
import { siteConfig, profileConfig, umamiConfig, musicPlayerConfig, pioConfig } from "@/config";
import type { Favicon } from "@/types/config";
import { defaultFavicons } from "@constants/icon";
import {
BANNER_HEIGHT,
BANNER_HEIGHT_EXTEND,
BANNER_HEIGHT_HOME,
LIGHT_MODE,
DARK_MODE,
SYSTEM_MODE,
PAGE_WIDTH,
NAVBAR_HEIGHT,
} from "@constants/constants";
import { pathsEqual, url } from "@utils/url";
import FontLoader from "@components/fontLoader.astro";
import LoadingOverlay from "@components/loadingOverlay.astro";
import ConfigCarrier from "@components/configCarrier.astro";
import MusicPlayer from "@components/musicPlayer.svelte";
import Pio from "@components/pio.svelte";
import "@styles/navbar.css";
import "@styles/banner.css";
import "@styles/fancybox.css";
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
const isHomePage = pathsEqual(Astro.url.pathname, url("/"));
// defines global css variables
// why doing this in BaseLayout instead of GlobalStyles: https://github.com/withastro/astro/issues/6728#issuecomment-1502203757
const configHue = siteConfig.themeColor.hue;
// 获取导航栏透明模式配置
const navbarTransparentMode =
siteConfig.wallpaper.banner?.navbar?.transparentMode || "semi";
// 判断是否应该显示顶部高光效果（只在full和semifull模式下显示）
const shouldShowTopHighlight =
navbarTransparentMode === "full" || navbarTransparentMode === "semifull";
// 获取默认banner图片的辅助函数
const getDefaultBanner = (): string => {
const src = siteConfig.wallpaper.src;
if (typeof src === "string") {
return src;
}
if (Array.isArray(src)) {
return src[0] || "";
}
if (src && typeof src === "object") {
// 优先使用desktop，如果没有则使用mobile
const desktopSrc = src.desktop;
const mobileSrc = src.mobile;
if (typeof desktopSrc === "string") {
return desktopSrc;
}
if (Array.isArray(desktopSrc) && desktopSrc.length > 0) {
return desktopSrc[0];
}
if (typeof mobileSrc === "string") {
return mobileSrc;
}
if (Array.isArray(mobileSrc) && mobileSrc.length > 0) {
return mobileSrc[0];
}
}
return "";
};
// TODO don't use post cover as banner for now
banner = getDefaultBanner();
const enableBanner = siteConfig.wallpaper.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("_", "-");
const bannerOffsetByPosition = {
top: `${BANNER_HEIGHT_EXTEND}vh`,
center: `${BANNER_HEIGHT_EXTEND / 2}vh`,
bottom: "0",
};
const bannerOffset =
bannerOffsetByPosition[siteConfig.wallpaper.position || "center"];
const umamiEnabled = umamiConfig.enabled || false;
const umamiScripts = umamiConfig.scripts || ""; // 获取Umami scripts配置
---
{pageTitle}
{siteConfig.keywords && siteConfig.keywords.length > 0 && (
)}
{ogImageUrl && }
{
setOGTypeArticle ? (
) : (
)
}
{favicons.map(favicon => (
))}
{pioConfig.enable && }
{umamiEnabled && umamiScripts && }
{shouldShowTopHighlight && }
{musicPlayerConfig.enable && }
{pioConfig.enable && }