Files
kazoottt-blog-v2/src/pages/index.astro
KazooTTT 1f48dedb16 feat: 首页增加查看更多文章的链接
- 在首页的文章列表下方添加了一个“查看更多 →”的链接,指向 /posts/ 页面,方便用户浏览所有文章。
2025-04-02 12:40:09 +08:00

96 lines
2.6 KiB
Plaintext

---
import SocialList from "@/components/SocialList.astro";
import PostPreview from "@/components/blog/PostPreview.astro";
import { getAllFixedToTopPosts, getAllNotes, getAllPosts } from "@/data/post";
import PageLayout from "@/layouts/Base.astro";
import { collectionDateSort } from "@/utils/date";
import SelfIntro from "@/pages/self-intro.astro";
import ContentFooter from "@/components/ContentFooter.astro";
import GiscusComment from "@/components/componentsBefore/GiscusComment";
import Tools from "@/components/tools/index.astro";
// Posts
const MAX_POSTS = 10;
const allPosts = await getAllPosts();
const allPostsByDate = allPosts.sort(collectionDateSort).slice(0, MAX_POSTS);
// Fixed to top Posts
const allFixedToTopPosts = await getAllFixedToTopPosts();
const allFixedToTopPostsByDate = allFixedToTopPosts.sort(collectionDateSort).slice(0, MAX_POSTS);
// Notes
const MAX_NOTES = 6;
const allNotes = await getAllNotes();
const latestNotes = allNotes.sort(collectionDateSort).slice(0, MAX_NOTES);
---
<PageLayout meta={{ title: "Home" }}>
<section>
<div class="">
<h1 class="title mb-6">About</h1>
<SelfIntro />
</div>
<div class="my-2">
<a href="https://wakatime.com/@d3dc2570-e4bf-4469-b0c2-127b495e8b91"
><img
src="https://wakatime.com/badge/user/d3dc2570-e4bf-4469-b0c2-127b495e8b91.svg"
alt="Total time coded since Nov 4 2017"
/></a
>
</div>
<SocialList />
<Tools enableCollapse={true} defaultOpen={false} />
</section>
{
allFixedToTopPostsByDate.length > 0 && (
<section class="mt-16">
<h2 class="title text-accent mb-6 text-xl">
<a href="/posts/">置顶文章</a>
</h2>
<ul class="space-y-4" role="list">
{allFixedToTopPostsByDate.map((p) => (
<li class="grid gap-2 sm:grid-cols-[auto_1fr]">
<PostPreview post={p} />
</li>
))}
</ul>
</section>
)
}
<section class="mt-16">
<h2 class="title text-accent mb-6 text-xl"><a href="/posts/">Posts</a></h2>
<ul class="space-y-4" role="list">
{
allPostsByDate.map((p) => (
<li class="grid gap-2 sm:grid-cols-[auto_1fr]">
<PostPreview post={p} />
</li>
))
}
</ul>
<a href="/posts/" class="hover:text-accent block text-right">查看更多 →</a>
</section>
<!-- {
latestNotes.length > 0 && (
<section class="mt-16">
<h2 class="title text-accent mb-6 text-xl">
<a href="/notes/">Notes</a>
</h2>
<ul class="columns-1 gap-4 md:columns-2" role="list">
{latestNotes.map((note) => (
<li>
<Note note={note} as="h3" isPreview enableLineClamp />
</li>
))}
</ul>
</section>
)
} -->
<ContentFooter />
<GiscusComment client:load />
</PageLayout>