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

feat: 新版ui

Browse Source
This commit is contained in:
21 Guns
2026-07-08 18:11:58 +08:00
parent 4fe81f1e48
commit bbacb11bce
7 changed files with 149 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
src/pages/posts/[...slug].astro
View File

@@ -10,73 +10,80 @@ import {formatDatetime} from "@/lib/format.ts";
const {slug} = Astro.params;
interface Post {
title: string;
summary: string;
slug: string;
cover: string;
published_at: string;
content: string;
title: string;
summary: string;
slug: string;
cover: string;
published_at: string;
content: string;
}
const {data} = await http.get<ApiResponse<Post>>(`post/${slug}`);
const content = await highlightHtmlWithJsdom(data.content)
data.published_at = formatDatetime(data.published_at, 'YYYY 年 M 月 D 日')
---
<Layout>
<h1 class="post-title">{data.title}</h1>
<h1 class="post-title">{data.title}</h1>
<div class="published-at">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-calendar-days-icon lucide-calendar-days">
<path d="M8 2v4"/>
<path d="M16 2v4"/>
<rect width="18" height="18" x="3" y="4" rx="2"/>
<path d="M3 10h18"/>
<path d="M8 14h.01"/>
<path d="M12 14h.01"/>
<path d="M16 14h.01"/>
<path d="M8 18h.01"/>
<path d="M12 18h.01"/>
<path d="M16 18h.01"/>
</svg>
{formatDatetime(data.published_at,'YYYY 年 MM 月 DD 日')}
</div>
<div class="published-at">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-calendar-days-icon lucide-calendar-days">
<path d="M8 2v4"/>
<path d="M16 2v4"/>
<rect width="18" height="18" x="3" y="4" rx="2"/>
<path d="M3 10h18"/>
<path d="M8 14h.01"/>
<path d="M12 14h.01"/>
<path d="M16 14h.01"/>
<path d="M8 18h.01"/>
<path d="M12 18h.01"/>
<path d="M16 18h.01"/>
</svg>
{data.published_at}
</div>
<div class="post markdown-body" set:html={content}></div>
<div class="post markdown-body" set:html={content}></div>
</Layout>
<style>
.post-title{
margin-bottom: 16px;
}
.post-title {
margin-bottom: 16px;
font-size: 24px;
}
@media (max-width: 768px) {
.post-title {
font-size: 24px;
}
}
.published-at {
display: flex;
align-items: center;
gap: 8px;
color: #6b7280;
font-size: 14px;
margin-bottom: 20px;
}
.published-at{
display: flex;
align-items: center;
gap: 8px;
color: #6b7280;
font-size: 16px;
margin-bottom: 24px;
}
.published-at svg {
width: 18px;
height: 18px;
}
.published-at svg{
width: 18px;
height: 18px;
.post {
background: #fff;
border-radius: 16px;
overflow: auto;
padding: 24px;
box-shadow: rgba(149, 157, 165, 0.2) 0 2px 14px -4px;
}
@media (max-width: 768px) {
.post-title {
font-size: 20px;
}
.post {
background: #fff;
border-radius: 16px;
overflow: auto;
padding: 24px;
box-shadow: rgba(149, 157, 165, 0.2) 0 2px 14px -4px;
padding: 12px;
}
}
</style>