cloverta/SanYeCao-blog
1
0
Fork 0
mirror of https://github.com/ClovertaTheTrilobita/SanYeCao-blog.git synced 2026-04-02 01:54:50 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

updated transistion

Browse source
This commit is contained in:
ClovertaTheTrilobita 2026-03-25 00:50:33 +02:00
parent 80e2e1b156
commit f837ae5fb5
7 changed files with 56 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/Header.astro
View file

@ -24,6 +24,10 @@ const t = getTranslations(lang);
padding-top: 0.5rem; padding-top: 0.5rem;
} }
.site-header .header-nav h1 {
font-size: 2.5rem;
}
.theme-icon-wrap { .theme-icon-wrap {
position: absolute; position: absolute;
top: 0; top: 0;

5
src/components/Posts/PostList.astro
View file

@ -1,7 +1,10 @@
--- ---
import { getCollection } from "astro:content"; import { getCollection } from "astro:content";
import PostItem from "./PostItem.astro"; import PostItem from "./PostItem.astro";
import { getLangFromUrl, getTranslations, type Lang } from "@/i18n";
const lang = getLangFromUrl(Astro.url);
const t = getTranslations(lang);
const allPosts = await getCollection("blog"); const allPosts = await getCollection("blog");
--- ---
@ -14,7 +17,7 @@ const allPosts = await getCollection("blog");
return ( return (
<PostItem <PostItem
url={`/posts/${post.id}/`} url={`/${lang}/posts/${post.id}/`}
title={post.data.title} title={post.data.title}
date={formattedDate} date={formattedDate}
/> />

3
src/i18n/en.ts
View file

@ -40,6 +40,9 @@ export default {
"In addition, this blog is fully open source. You can find its source code through the link in the footer.", "In addition, this blog is fully open source. You can find its source code through the link in the footer.",
] ]
}, },
tags: {
title: "Tags"
},
footer: { footer: {
githubIntro: 'See more on <a href="https://www.github.com/ClovertaTheTrilobita">GitHub</a>!', githubIntro: 'See more on <a href="https://www.github.com/ClovertaTheTrilobita">GitHub</a>!',
repoIntro: 'This blog is fully open source at <a href="https://www.github.com/ClovertaTheTrilobita/SanYeCao-blog">ClovertaTheTrilobita/SanYeCao-blog</a>' repoIntro: 'This blog is fully open source at <a href="https://www.github.com/ClovertaTheTrilobita/SanYeCao-blog">ClovertaTheTrilobita/SanYeCao-blog</a>'

3
src/i18n/zh.ts
View file

@ -40,6 +40,9 @@ export default {
"此外，这个博客完全开源，你可以从页脚的链接处获取它的源代码。", "此外，这个博客完全开源，你可以从页脚的链接处获取它的源代码。",
] ]
}, },
tags: {
title: "标签"
},
footer: { footer: {
githubIntro: '在 <a href="https://www.github.com/ClovertaTheTrilobita">GitHub</a> 查看更多！', githubIntro: '在 <a href="https://www.github.com/ClovertaTheTrilobita">GitHub</a> 查看更多！',
repoIntro: '这个博客完全开源于 <a href="https://www.github.com/ClovertaTheTrilobita/SanYeCao-blog">ClovertaTheTrilobita/SanYeCao-blog</a>' repoIntro: '这个博客完全开源于 <a href="https://www.github.com/ClovertaTheTrilobita/SanYeCao-blog">ClovertaTheTrilobita/SanYeCao-blog</a>'

38
src/layouts/BaseLayout.astro
View file

@ -1,6 +1,7 @@
--- ---
import Footer from "@/components/Footer.astro"; import Footer from "@/components/Footer.astro";
import Header from "@/components/Header.astro"; import Header from "@/components/Header.astro";
import { ClientRouter } from "astro:transitions";
const { pageTitle } = Astro.props; const { pageTitle } = Astro.props;
--- ---
@ -14,10 +15,13 @@ const { pageTitle } = Astro.props;
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<title>{pageTitle}</title> <title>{pageTitle}</title>
<ClientRouter />
</head> </head>
<body> <body>
<Header /> <Header />
<slot /> <main class="page-content" transition:name="page">
<slot />
</main>
<Footer /> <Footer />
</body> </body>
</html> </html>
@ -29,4 +33,36 @@ const { pageTitle } = Astro.props;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
::view-transition-old(page),
::view-transition-new(page) {
animation-duration: 0.35s;
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;
}
}
</style> </style>

5
src/pages/[lang]/tags/index.astro
View file

@ -1,14 +1,14 @@
--- ---
import BaseLayout from "@/layouts/BaseLayout.astro"; import BaseLayout from "@/layouts/BaseLayout.astro";
import { getCollection } from "astro:content"; import { getCollection } from "astro:content";
import { getTranslations } from "@/i18n"; import { getTranslations, type Lang } from "@/i18n";
import "@/styles/global.css"; import "@/styles/global.css";
export function getStaticPaths() { export function getStaticPaths() {
return [{ params: { lang: "zh" } }, { params: { lang: "en" } }]; return [{ params: { lang: "zh" } }, { params: { lang: "en" } }];
} }
const { lang } = Astro.params; const lang: Lang = Astro.params.lang === "en" ? "en" : "zh";
const t = getTranslations(lang); const t = getTranslations(lang);
const allPosts = await getCollection("blog"); const allPosts = await getCollection("blog");
const tags = [...new Set(allPosts.map((post: any) => post.data.tags).flat())]; const tags = [...new Set(allPosts.map((post: any) => post.data.tags).flat())];
@ -16,6 +16,7 @@ const pageTitle = lang === "zh" ? "标签索引" : "Tag Index";
--- ---
<BaseLayout pageTitle={pageTitle}> <BaseLayout pageTitle={pageTitle}>
<h1>{t.tags.title}</h1>
<div class="tags"> <div class="tags">
{ {
tags.map((tag) => ( tags.map((tag) => (

3
src/styles/global.css
View file

@ -66,10 +66,11 @@ body {
h1 { h1 {
margin: 1rem 0; margin: 1rem 0;
font-size: 2.5rem; font-size: 1.5rem;
line-height: 1.2; line-height: 1.2;
} }
a { a {
color: #7fb3ff; color: #7fb3ff;
font-weight: 700; font-weight: 700;