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

60
src/components/IndexPage.astro
View File

@@ -1,11 +1,7 @@
---
import {siteConfig} from "@/consts.ts";
import PostList from "@/components/Post/List.astro";
import Pagination from "@/components/Post/Pagination.astro";
import type {Post} from "@/types";
import PageHeader from "@/components/PageHeader.astro";
const {siteTitle} = siteConfig;
interface Props {
posts: Post[]
@@ -15,42 +11,18 @@ interface Props {
const {posts, page, totalPage} = Astro.props
---
<div class="page-content">
<PageHeader/>
<main>
<div class="intro">
<p>did you stand too close to the fire?<br>
like a liar looking for forgiveness from a stone.</p>
</div>
<main>
<PostList posts={posts}/>
<Pagination page={page} totalPage={totalPage}/>
</main>
<PostList posts={posts}/>
<Pagination page={page} totalPage={totalPage}/>
</main>
<footer>
<div>© 2026 Uroboros</div>
<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">备案号：鄂ICP备2023000060号-2</a>
</footer>
</div>
<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 {
border-bottom: var(--border-secondary);
line-height: 2;
@@ -60,33 +32,9 @@ const {posts, page, totalPage} = Astro.props
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) {
.intro{
padding-bottom: 24px;
}
footer {
height: 64px;
padding-bottom: 0;
}
}
</style>

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

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

3
src/consts.ts
View File

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

21
src/layouts/Layout.astro
View File

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

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

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

@@ -4,7 +4,6 @@ import "@/styles/github-markdown-reset.css";
import "photoswipe/dist/photoswipe.css";
import Layout from '@/layouts/Layout.astro';
import PageHeader from '@/components/PageHeader.astro';
import {createHttp} from "@/lib/request.ts";
import type {Post} from "@/types";
import {processHtmlWithJsdom} from "@/lib/processHtml.ts";
@@ -30,51 +29,34 @@ const content = await processHtmlWithJsdom(data.content);
const published_at = formatDatetime(data.published_at, "YYYY.MM.DD");
---
<Layout title={data.title} description="">
<div class="page-container">
<PageHeader />
<article>
<div class="meta">
<div class="meta-left">
<span>{data.category_name} · {data.category_code.toUpperCase()}</span>
<span>{published_at}</span>
</div>
<div class="meta-view-count">{data.view_count} 次阅读</div>
<Layout title={data.title} description={data.summary}>
<article>
<div class="meta">
<div class="meta-left">
<span>{data.category_name} · {data.category_code.toUpperCase()}</span>
<span>{published_at}</span>
</div>
<h1>{data.title}</h1>
<p class="summary">{data.summary}</p>
<div class="meta-view-count">{data.view_count} 次阅读</div>
</div>
<h1>{data.title}</h1>
<div class="divider"></div>
<p class="summary">{data.summary}</p>
<div class="markdown-body" data-color-mode="dark" set:html={content}/>
<div class="divider"></div>
{
data.tags.length > 0 &&
<div class="tags">
{data.tags.map(tag => <span>{tag.name}</span>)}
</div>
}
</article>
<div class="markdown-body" data-color-mode="dark" set:html={content}/>
<footer>
<div>© {siteTitle}</div>
</footer>
</div>
{
data.tags.length > 0 &&
<div class="tags">
{data.tags.map(tag => <span>{tag.name}</span>)}
</div>
}
</article>
</Layout>
<style>
.page-container {
width: 100%;
height: 100%;
min-height: 100%;
display: flex;
flex-direction: column;
}
article {
width: 100%;
margin: 0 auto;
@@ -139,18 +121,6 @@ const published_at = formatDatetime(data.published_at, "YYYY.MM.DD");
border-radius: 20px;
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>
<script>

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

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

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

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