mirror of
https://github.com/KazooTTT/kazoottt-blog-v2.git
synced 2025-06-24 11:11:29 +08:00
feat: Enhance notes display with multi-column layout and line clamping
This commit is contained in:
KazooTTT
@ -15,7 +15,7 @@ const allPostsByDate = allPosts
|
||||
.slice(0, MAX_POSTS) as CollectionEntry<"post">[];
|
||||
|
||||
// Notes
|
||||
const MAX_NOTES = 5;
|
||||
const MAX_NOTES = 6;
|
||||
const allNotes = await getCollection("note");
|
||||
const latestNotes = allNotes.sort(collectionDateSort).slice(0, MAX_NOTES);
|
||||
---
|
||||
@ -44,10 +44,10 @@ const latestNotes = allNotes.sort(collectionDateSort).slice(0, MAX_NOTES);
|
||||
<h2 class="title text-accent mb-6 text-xl">
|
||||
<a href="/notes/">Notes</a>
|
||||
</h2>
|
||||
<ul class="space-y-4" role="list">
|
||||
<ul class="columns-1 gap-4 md:columns-2" role="list">
|
||||
{latestNotes.map((note) => (
|
||||
<li>
|
||||
<Note note={note} as="h3" isPreview />
|
||||
<Note note={note} as="h3" isPreview enableLineClamp />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
@ -59,17 +59,24 @@ function calculateIndex(index: number, page: Page<CollectionEntry<"note">>) {
|
||||
<Icon aria-hidden="true" class="h-6 w-6" focusable="false" name="mdi:rss" />
|
||||
</a>
|
||||
<div class="flex-1"></div>
|
||||
<a href={`/notes/list/${page.currentPage}`} class="cactus-link text-sm">list</a>
|
||||
<a
|
||||
href={`/notes/list/${page.currentPage === 1 ? "" : page.currentPage}`}
|
||||
class="cactus-link text-sm">flow</a
|
||||
>
|
||||
</h1>
|
||||
<ul class="mt-6 space-y-8 text-start">
|
||||
<div class="columns-1 gap-4 md:columns-2">
|
||||
{
|
||||
page.data.map((note, index) => (
|
||||
<li class="">
|
||||
<Note note={note} as="h2" isPreview index={calculateIndex(index, page)} />
|
||||
</li>
|
||||
<Note
|
||||
note={note}
|
||||
as="h2"
|
||||
isPreview
|
||||
index={calculateIndex(index, page)}
|
||||
enableLineClamp={true}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
<Pagination {...paginationProps} />
|
||||
</section>
|
||||
</PageLayout>
|
||||
|
||||
@ -1,53 +1,33 @@
|
||||
---
|
||||
import { getCollection, type CollectionEntry } from "astro:content";
|
||||
import { type CollectionEntry, getCollection } from "astro:content";
|
||||
import Pagination from "@/components/Paginator.astro";
|
||||
import PostPreview from "@/components/blog/PostPreview.astro";
|
||||
import Note from "@/components/note/Note.astro";
|
||||
import PageLayout from "@/layouts/Base.astro";
|
||||
import { collectionDateSort } from "@/utils/date";
|
||||
import { collectionModifiedDateSort } from "@/utils/date";
|
||||
import type { GetStaticPaths, Page } from "astro";
|
||||
import { Icon } from "astro-icon/components";
|
||||
|
||||
// 添加新的类型定义
|
||||
type NoteEntry = CollectionEntry<"note">;
|
||||
|
||||
// 创建一个新的groupNotesByYear函数
|
||||
function groupNotesByYear(notes: NoteEntry[]) {
|
||||
return notes.reduce(
|
||||
(acc, note) => {
|
||||
const year = note.data.date.getFullYear().toString();
|
||||
acc[year] = acc[year] || [];
|
||||
acc[year].push(note);
|
||||
return acc;
|
||||
},
|
||||
{} as Record<string, NoteEntry[]>
|
||||
);
|
||||
}
|
||||
|
||||
export const getStaticPaths = (async ({ paginate }) => {
|
||||
const MAX_POSTS_PER_PAGE = 10;
|
||||
const MAX_NOTES_PER_PAGE = 10;
|
||||
const allNotes = await getCollection("note");
|
||||
const postsCount = allNotes.length;
|
||||
return paginate(allNotes.sort(collectionDateSort), {
|
||||
pageSize: MAX_POSTS_PER_PAGE,
|
||||
props: { postsCount },
|
||||
const notesCount = allNotes.length;
|
||||
return paginate(allNotes.sort(collectionModifiedDateSort), {
|
||||
pageSize: MAX_NOTES_PER_PAGE,
|
||||
props: { notesCount },
|
||||
});
|
||||
}) satisfies GetStaticPaths;
|
||||
|
||||
interface Props {
|
||||
page: Page<CollectionEntry<"note">>;
|
||||
uniqueTags: string[];
|
||||
uniqueCategories: string[];
|
||||
postsCount: number;
|
||||
notesCount: number;
|
||||
}
|
||||
|
||||
const { page, postsCount } = Astro.props;
|
||||
|
||||
// 添加默认布局状态
|
||||
const defaultLayout = "list"; // 或 "grid"
|
||||
const { page, notesCount } = Astro.props;
|
||||
|
||||
const meta = {
|
||||
description: "Read my collection of posts and the things that interest me",
|
||||
title: "Posts",
|
||||
description: "Read my collection of notes",
|
||||
title: "Notes",
|
||||
};
|
||||
|
||||
const paginationProps = {
|
||||
@ -65,78 +45,38 @@ const paginationProps = {
|
||||
}),
|
||||
};
|
||||
|
||||
// 使用新的groupNotesByYear函数替换原来的groupPostsByYear
|
||||
const groupedByYear = groupNotesByYear(page.data);
|
||||
const descYearKeys = Object.keys(groupedByYear).sort((a, b) => +b - +a);
|
||||
function calculateIndex(index: number, page: Page<CollectionEntry<"note">>) {
|
||||
return index + page.start;
|
||||
}
|
||||
---
|
||||
|
||||
<PageLayout meta={meta}>
|
||||
<div class="mb-6 flex items-center gap-3">
|
||||
<h1 class="title">Notes({postsCount})</h1>
|
||||
<a class="text-accent" href="/notes/rss.xml" target="_blank">
|
||||
<span class="sr-only">RSS feed</span>
|
||||
<Icon aria-hidden="true" class="h-6 w-6" focusable="false" name="mdi:rss" />
|
||||
</a>
|
||||
<div class="flex-1"></div>
|
||||
<a href={"/notes/" + page.currentPage} class="cactus-link">see the preview</a>
|
||||
</div>
|
||||
<div class="grid sm:grid-cols-[3fr_1fr] sm:gap-x-8 sm:gap-y-16">
|
||||
<div>
|
||||
<section>
|
||||
<h1 class="title mb-6 flex items-center gap-3">
|
||||
Notes({notesCount})
|
||||
<a class="text-accent" href="/notes/rss.xml" target="_blank">
|
||||
<span class="sr-only">RSS feed</span>
|
||||
<Icon aria-hidden="true" class="h-6 w-6" focusable="false" name="mdi:rss" />
|
||||
</a>
|
||||
<div class="flex-1"></div>
|
||||
<a
|
||||
href={`/notes/${page.currentPage === 1 ? "" : page.currentPage}`}
|
||||
class="cactus-link text-sm">preview</a
|
||||
>
|
||||
</h1>
|
||||
<div class="columns-1">
|
||||
{
|
||||
descYearKeys.map((yearKey) => (
|
||||
<section aria-labelledby={`year-${yearKey}`}>
|
||||
<h2 id={`year-${yearKey}`} class="title text-lg">
|
||||
<span class="sr-only">Posts in</span>
|
||||
{yearKey}
|
||||
</h2>
|
||||
<ul
|
||||
id="posts-container"
|
||||
class="mt-5 mb-16 space-y-4 text-start"
|
||||
data-layout={defaultLayout}
|
||||
>
|
||||
{groupedByYear[yearKey]?.map((p) => (
|
||||
<li class="grid gap-2 sm:grid-cols-[auto_1fr] sm:[&_q]:col-start-2">
|
||||
<PostPreview post={p} />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
page.data.map((note, index) => (
|
||||
<Note
|
||||
note={note}
|
||||
as="h2"
|
||||
isPreview
|
||||
index={calculateIndex(index, page)}
|
||||
enableLineClamp={false}
|
||||
/>
|
||||
))
|
||||
}
|
||||
<Pagination {...paginationProps} />
|
||||
</div>
|
||||
</div>
|
||||
<Pagination {...paginationProps} />
|
||||
</section>
|
||||
</PageLayout>
|
||||
|
||||
<script>
|
||||
const layoutToggle = document.getElementById("layout-toggle");
|
||||
const postsContainer = document.getElementById("posts-container");
|
||||
const listIcon = document.getElementById("list-icon");
|
||||
const gridIcon = document.getElementById("grid-icon");
|
||||
|
||||
// 从 localStorage 获取保存的布局偏好
|
||||
const savedLayout = localStorage.getItem("notesLayout") || "list";
|
||||
postsContainer?.setAttribute("data-layout", savedLayout);
|
||||
|
||||
// 根据当前布局更新图标显示
|
||||
function updateIcons(layout: string) {
|
||||
if (layout === "grid") {
|
||||
listIcon?.classList.remove("hidden");
|
||||
gridIcon?.classList.add("hidden");
|
||||
} else {
|
||||
listIcon?.classList.add("hidden");
|
||||
gridIcon?.classList.remove("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
updateIcons(savedLayout);
|
||||
|
||||
layoutToggle?.addEventListener("click", () => {
|
||||
const currentLayout = postsContainer?.getAttribute("data-layout");
|
||||
const newLayout = currentLayout === "list" ? "grid" : "list";
|
||||
|
||||
postsContainer?.setAttribute("data-layout", newLayout);
|
||||
localStorage.setItem("notesLayout", newLayout);
|
||||
updateIcons(newLayout);
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user