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

85
src/pages/index.astro
View File

@@ -14,24 +14,27 @@ interface Post {
}
const {list} = await http.get<ApiPageResponse<Post>>("post");
list.map((post) => {
post.published_at = formatDatetime(post.published_at, 'YYYY 年 M 月 D 日')
})
---
<Layout>
<div class="posts">
{
list.map((post) => (
<a
class="post"
href={`/posts/${post.slug}`}
>
<div class="cover">
<img src={post.cover} alt={post.title}/>
</div>
<div class="post-content">
<h2>{post.title}</h2>
<p class="summary">summary:{post.summary}</p>
<p class="summary">category_name:{post.category_name}</p>
<div>{formatDatetime(post.published_at, 'YYYY 年 MM 月 DD 日')}</div>
<a class="post" href={`/posts/${post.slug}`}>
<div class="published-at">{post.published_at}</div>
<div class="category-name">{post.category_name}</div>
<div class="post-title">{post.title}</div>
<div class="link">
<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-arrow-up-right-icon lucide-arrow-up-right">
<path d="M7 7h10v10"/>
<path d="M7 17 17 7"/>
</svg>
</div>
</a>
))
@@ -50,31 +53,59 @@ const {list} = await http.get<ApiPageResponse<Post>>("post");
background: #fff;
padding: 16px;
border-radius: 12px;
box-shadow: rgba(149, 157, 165, 0.2) 0px 2px 14px -4px;
box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
display: flex;
gap: 20px;
align-items: center;
transition: transform 0.2s linear;
}
.post-content {
.post:hover {
box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
}
.published-at {
white-space: nowrap;
font-size: 14px;
color: #4b5563;
min-width: 130px;
margin-right: 20px;
}
.category-name {
border-radius: 999px;
background: #fceeda;
padding: 4px 12px;
font-size: 14px;
margin-right: 24px;
}
.post-title {
flex: 1;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.summary {
font-size: 16px;
color: rgb(66, 63, 63);
.link {
}
.cover {
width: 250px;
height: 150px;
border-radius: 8px;
overflow: hidden;
.link svg {
width: 16px;
height: 16px;
color: #6b7280;
}
.cover img {
width: 100%;
height: 100%;
object-fit: cover;
@media (max-width: 640px) {
.posts {
gap: 12px;
}
.published-at {
margin-right: 8px;
}
.category-name {
display: none;
}
}
</style>

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>