2026-03-24 17:33:01 +00:00
|
|
|
---
|
2026-03-24 22:28:23 +00:00
|
|
|
import Footer from "@/components/Footer.astro";
|
2026-03-24 18:01:45 +00:00
|
|
|
import Header from "@/components/Header.astro";
|
2026-03-24 22:50:33 +00:00
|
|
|
import { ClientRouter } from "astro:transitions";
|
2026-03-25 15:26:22 +00:00
|
|
|
import SEO from "@/components/SEO.astro";
|
2026-03-24 19:32:44 +00:00
|
|
|
|
2026-03-25 15:26:22 +00:00
|
|
|
const { pageTitle, description = "我的个人博客", image } = Astro.props;
|
2026-03-24 17:33:01 +00:00
|
|
|
---
|
|
|
|
|
|
2026-03-24 14:19:09 +00:00
|
|
|
<!doctype html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
<meta name="viewport" content="width=device-width" />
|
2026-03-25 15:26:22 +00:00
|
|
|
<SEO title={pageTitle} description={description} image={image} />
|
2026-03-24 14:19:09 +00:00
|
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
|
|
|
<link rel="icon" href="/favicon.ico" />
|
|
|
|
|
<meta name="generator" content={Astro.generator} />
|
2026-03-24 17:33:01 +00:00
|
|
|
<title>{pageTitle}</title>
|
2026-03-24 22:50:33 +00:00
|
|
|
<ClientRouter />
|
2026-03-24 14:19:09 +00:00
|
|
|
</head>
|
|
|
|
|
<body>
|
2026-03-24 18:01:45 +00:00
|
|
|
<Header />
|
2026-03-24 22:50:33 +00:00
|
|
|
<main class="page-content" transition:name="page">
|
|
|
|
|
<slot />
|
|
|
|
|
</main>
|
2026-03-24 17:33:01 +00:00
|
|
|
<Footer />
|
2026-03-24 14:19:09 +00:00
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
html,
|
|
|
|
|
body {
|
|
|
|
|
margin: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
2026-03-24 22:50:33 +00:00
|
|
|
|
|
|
|
|
::view-transition-old(page),
|
|
|
|
|
::view-transition-new(page) {
|
2026-03-25 08:12:49 +00:00
|
|
|
animation-duration: 0.05s;
|
2026-03-24 22:50:33 +00:00
|
|
|
animation-timing-function: ease;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
::view-transition-old(page) {
|
|
|
|
|
animation-name: fade-out;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
::view-transition-new(page) {
|
|
|
|
|
animation-name: fade-in;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes fade-out {
|
|
|
|
|
from {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
to {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes fade-in {
|
|
|
|
|
from {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
}
|
|
|
|
|
to {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
}
|
2026-03-24 14:19:09 +00:00
|
|
|
</style>
|
