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 1

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;
}
.site-header .header-nav h1 {
font-size: 2.5rem;
}
.theme-icon-wrap {
position: absolute;
top: 0;

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

@ -1,7 +1,10 @@
---
import { getCollection } from "astro:content";
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");
---
@ -14,7 +17,7 @@ const allPosts = await getCollection("blog");
return (
<PostItem
url={`/posts/${post.id}/`}
url={`/${lang}/posts/${post.id}/`}
title={post.data.title}
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.",
]
},
tags: {
title: "Tags"
},
footer: {
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>'

3
src/i18n/zh.ts
View file

@ -40,6 +40,9 @@ export default {
"此外，这个博客完全开源，你可以从页脚的链接处获取它的源代码。",
]
},
tags: {
title: "标签"
},
footer: {
githubIntro: '在 <a href="https://www.github.com/ClovertaTheTrilobita">GitHub</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 Header from "@/components/Header.astro";
import { ClientRouter } from "astro:transitions";
const { pageTitle } = Astro.props;
---
@ -14,10 +15,13 @@ const { pageTitle } = Astro.props;
<link rel="icon" href="/favicon.ico" />
<meta name="generator" content={Astro.generator} />
<title>{pageTitle}</title>
<ClientRouter />
</head>
<body>
<Header />
<slot />
<main class="page-content" transition:name="page">
<slot />
</main>
<Footer />
</body>
</html>
@ -29,4 +33,36 @@ const { pageTitle } = Astro.props;
width: 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>

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

@ -1,14 +1,14 @@
---
import BaseLayout from "@/layouts/BaseLayout.astro";
import { getCollection } from "astro:content";
import { getTranslations } from "@/i18n";
import { getTranslations, type Lang } from "@/i18n";
import "@/styles/global.css";
export function getStaticPaths() {
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 allPosts = await getCollection("blog");
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}>
<h1>{t.tags.title}</h1>
<div class="tags">
{
tags.map((tag) => (

3
src/styles/global.css
View file

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