beggin/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 归档页面

Browse Source
This commit is contained in:
21 Guns
2026-08-15 22:23:32 +08:00
parent 390437b4bb
commit 4a224b58f4
10 changed files with 215 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/components/IndexPage.astro
View File

@@ -1,11 +1,7 @@
--- ---
import {siteConfig} from "@/consts.ts";
import PostList from "@/components/Post/List.astro"; import PostList from "@/components/Post/List.astro";
import Pagination from "@/components/Post/Pagination.astro"; import Pagination from "@/components/Post/Pagination.astro";
import type {Post} from "@/types"; import type {Post} from "@/types";
import PageHeader from "@/components/PageHeader.astro";
const {siteTitle} = siteConfig;
interface Props { interface Props {
posts: Post[] posts: Post[]
@@ -15,42 +11,18 @@ interface Props {
const {posts, page, totalPage} = Astro.props const {posts, page, totalPage} = Astro.props
--- ---
<main>
<div class="page-content">
<PageHeader/>
<div class="intro"> <div class="intro">
<p>did you stand too close to the fire?<br> <p>did you stand too close to the fire?<br>
like a liar looking for forgiveness from a stone.</p> like a liar looking for forgiveness from a stone.</p>
</div> </div>
<main>
<PostList posts={posts}/> <PostList posts={posts}/>
<Pagination page={page} totalPage={totalPage}/> <Pagination page={page} totalPage={totalPage}/>
</main> </main>
<footer>
<div>© 2026 Uroboros</div>
<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">备案号：鄂ICP备2023000060号-2</a>
</footer>
</div>
<style> <style>
.page-content {
min-height: 100%;
height: 100%;
display: flex;
flex-direction: column;
gap: 24px;
}
nav {
display: flex;
gap: 12px;
font-size: 14px;
color: var(--text-secondary);
}
.intro { .intro {
border-bottom: var(--border-secondary); border-bottom: var(--border-secondary);
line-height: 2; line-height: 2;
@@ -60,33 +32,9 @@ const {posts, page, totalPage} = Astro.props
margin-bottom: 12px; margin-bottom: 12px;
} }
main {
flex: 1;
flex-shrink: 0;
margin-bottom: 24px;
}
footer {
flex-shrink: 0;
min-height: 0;
height: 84px;
padding-bottom: 24px;
display: flex;
justify-content: center;
align-items: center;
font-size: 13px;
gap: 12px;
color: var(--text-tertiary);
}
@media (max-width: 640px) { @media (max-width: 640px) {
.intro{ .intro{
padding-bottom: 24px; padding-bottom: 24px;
} }
footer {
height: 64px;
padding-bottom: 0;
}
} }
</style> </style>

6
src/components/Post/List.astro
View File

@@ -67,4 +67,10 @@ const {posts} = Astro.props
.post:hover .arrow { .post:hover .arrow {
color: #334155; color: #334155;
} }
@media (max-width: 640px) {
.post .d {
min-width: 64px;
}
}
</style> </style>

3
src/consts.ts
View File

@@ -2,5 +2,6 @@ export const siteConfig = {
site: "https://ua42.com", site: "https://ua42.com",
siteTitle: "Uroboros", siteTitle: "Uroboros",
postPageSize: 7, postPageSize: 7,
description: "Uroboros is a blog about programming, technology, and life." description: "一个人的自留地 ，不欢迎我，也不欢迎你。",
git: "https://git.ua42.com"
} }

19
src/layouts/Layout.astro
View File

@@ -1,6 +1,9 @@
--- ---
import "@/styles/global.css"; import "@/styles/global.css";
import {siteConfig} from "@/consts.ts"; import {siteConfig} from "@/consts.ts";
import PageHeader from "./PageHeader.astro";
import PageFooter from "./PageFooter.astro";
const {siteTitle} = siteConfig; const {siteTitle} = siteConfig;
interface Props { interface Props {
@@ -28,7 +31,11 @@ const pageTitle = title ? `${title} - ${siteTitle}` : siteTitle;
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<PageHeader/>
<main>
<slot></slot> <slot></slot>
</main>
<PageFooter />
</div> </div>
</body> </body>
</html> </html>
@@ -39,11 +46,19 @@ const pageTitle = title ? `${title} - ${siteTitle}` : siteTitle;
} }
.container { .container {
width: 100%;
max-width: var(--layout-width); max-width: var(--layout-width);
margin: 0 auto;
padding: 24px;
height: 100%; height: 100%;
min-height: 100%; min-height: 100%;
margin: 0 auto;
padding: 24px;
display: flex;
flex-direction: column;
}
main {
flex: 1;
padding: 24px 0;
} }
@media (max-width: 640px) { @media (max-width: 640px) {

26
src/layouts/PageFooter.astro Normal file
View File

@@ -0,0 +1,26 @@
<footer>
<div>© 2026 Uroboros</div>
<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">备案号：鄂ICP备2023000060号-2</a>
</footer>
<style>
footer {
flex-shrink: 0;
min-height: 0;
height: 84px;
padding-bottom: 24px;
display: flex;
justify-content: center;
align-items: center;
font-size: 13px;
gap: 12px;
color: var(--text-tertiary);
}
@media (max-width: 640px) {
footer {
height: 64px;
padding-bottom: 0;
}
}
</style>

24
src/components/PageHeader.astro → src/layouts/PageHeader.astro
View File

@@ -1,17 +1,14 @@
--- ---
import {siteConfig} from "@/consts.ts"; import {siteConfig} from "@/consts.ts";
const {siteTitle} = siteConfig; const {siteTitle,git} = siteConfig;
--- ---
<header> <header>
<a href="/"><h1>{siteTitle}</h1></a> <a href="/"><h1>{siteTitle}</h1></a>
<!--<nav>--> <nav>
<!-- <span>归档</span>--> <a href="/archive">归档</a>
<!-- <span>/</span>--> <a target="_blank" href={git}>git</a>
<!-- <span>标签</span>--> </nav>
<!-- <span>/</span>-->
<!-- <span>关于</span>-->
<!--</nav>-->
</header> </header>
<style> <style>
@@ -24,6 +21,17 @@ const {siteTitle} = siteConfig;
padding-bottom: 24px; padding-bottom: 24px;
} }
nav {
display: flex;
gap: 12px;
font-size: 14px;
color: var(--text-secondary);
}
nav a:hover {
color: var(--text-primary);
}
h1 { h1 {
font-size: 24px; font-size: 24px;
font-weight: 600; font-weight: 600;

119
src/pages/archive.astro
View File

@@ -0,0 +1,119 @@
---
import Layout from "@/layouts/Layout.astro";
import type {Archive} from "@/types/archive";
import {createHttp} from "@/lib/request";
const http = createHttp(Astro.request.headers);
const {data} = await http.get<ApiResponse<Archive>>("posts/archives");
---
<Layout title="归档" description="">
<div class="archive">
{
data.map((year) => (
<div class="archive-year">
<h2 class="year-title">
<span class="year-badge">{year.year}年</span>
<span class="year-count">共 {year.total} 篇</span>
</h2>
<div>
{year.list.map((month) => (
<div class="month-group">
<h3 class="month-title">{month.month} 月</h3>
<ul class="post-list">
{month.list.map((post) => (
<li class="post-item">
<span class="post-date">
{post.published_at_display}
</span>
<a class="post-title" href={`/post/${post.slug}`}>{post.title}</a>
<span class="post-cat">{post.category_name}</span>
</li>
))}
</ul>
</div>
))}
</div>
</div>
))
}
</div>
</Layout>
<style>
.archive {
}
.archive-year {
}
.year-title {
display: flex;
align-items: center;
gap: 12px;
color: var(--text-primary);
font-size: 32px;
margin-bottom: 24px;
}
.year-badge {
}
.year-count {
font-size: 14px;
font-weight: normal;
}
.month-group {
padding: 12px 0;
}
.month-title {
color: #60a5fa;
font-weight: normal;
}
.post-list {
padding: 12px 0;
display: flex;
flex-direction: column;
}
.post-item {
display: flex;
gap: 24px;
font-size: 14px;
border-bottom: var(--border-secondary);
padding: 18px 0;
align-items: center;
}
.post-item:last-child {
border-bottom: none;
}
.post-date {
color: var(--text-tertiary);
}
.post-title {
flex: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--text-primary);
}
.post-title:hover{
text-decoration: underline;
}
.post-cat {
color: var(--text-tertiary);
}
</style>

32
src/pages/post/[...slug].astro
View File

@@ -4,7 +4,6 @@ import "@/styles/github-markdown-reset.css";
import "photoswipe/dist/photoswipe.css"; import "photoswipe/dist/photoswipe.css";
import Layout from '@/layouts/Layout.astro'; import Layout from '@/layouts/Layout.astro';
import PageHeader from '@/components/PageHeader.astro';
import {createHttp} from "@/lib/request.ts"; import {createHttp} from "@/lib/request.ts";
import type {Post} from "@/types"; import type {Post} from "@/types";
import {processHtmlWithJsdom} from "@/lib/processHtml.ts"; import {processHtmlWithJsdom} from "@/lib/processHtml.ts";
@@ -30,10 +29,7 @@ const content = await processHtmlWithJsdom(data.content);
const published_at = formatDatetime(data.published_at, "YYYY.MM.DD"); const published_at = formatDatetime(data.published_at, "YYYY.MM.DD");
--- ---
<Layout title={data.title} description=""> <Layout title={data.title} description={data.summary}>
<div class="page-container">
<PageHeader />
<article> <article>
<div class="meta"> <div class="meta">
<div class="meta-left"> <div class="meta-left">
@@ -58,23 +54,9 @@ const published_at = formatDatetime(data.published_at, "YYYY.MM.DD");
</div> </div>
} }
</article> </article>
<footer>
<div>© {siteTitle}</div>
</footer>
</div>
</Layout> </Layout>
<style> <style>
.page-container {
width: 100%;
height: 100%;
min-height: 100%;
display: flex;
flex-direction: column;
}
article { article {
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
@@ -139,18 +121,6 @@ const published_at = formatDatetime(data.published_at, "YYYY.MM.DD");
border-radius: 20px; border-radius: 20px;
padding: 8px 16px; padding: 8px 16px;
} }
footer{
flex-shrink: 0;
width: 100%;
margin-top: 24px;
border-top: var(--border-secondary);
height: 66px;
display: flex;
align-items: center;
color: var(--text-tertiary);
font-size: 13px;
}
</style> </style>
<script> <script>

1
src/pages/sitemap-pages.xml.ts
View File

@@ -5,6 +5,7 @@ const site = siteConfig.site
const staticUrls = [ const staticUrls = [
'', '',
'/archive'
]; ];
export const GET: APIRoute = async () => { export const GET: APIRoute = async () => {

4
src/styles/css-reset.css
View File

@@ -28,3 +28,7 @@ a {
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background: #94a3b8; background: #94a3b8;
} }
ul,li{
list-style: none;
}