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

5
astro.config.mjs
View File

@@ -1,5 +1,5 @@
// @ts-check
import { defineConfig } from 'astro/config';
import {defineConfig} from 'astro/config';
import solidJs from '@astrojs/solid-js';
import node from '@astrojs/node';
@@ -7,6 +7,9 @@ import node from '@astrojs/node';
export default defineConfig({
site: 'https://ua42.com',
output: 'server',
server: {
host: "0.0.0.0",
},
integrations: [solidJs()],
adapter: node({
mode: 'standalone'

2
src/components/BaseFooter.astro
View File

@@ -4,7 +4,7 @@
height: 70px;
overflow: hidden;
flex-shrink: 0;
box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 2px;
}
.content {

25
src/components/BaseHeader.astro
View File

@@ -8,7 +8,7 @@ import { metadata } from "../consts";
position: sticky;
top: 0;
z-index: 99999;
box-shadow: rgba(17, 17, 26, 0.1) 0 1px 0;
box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
flex-shrink: 0;
background: #fff;
}
@@ -23,6 +23,12 @@ import { metadata } from "../consts";
justify-content: space-between;
}
@media (max-width: 768px) {
.main-nav{
padding: 16px;
}
}
.main-nav h1 {
user-select: none;
cursor: pointer;
@@ -37,11 +43,16 @@ import { metadata } from "../consts";
align-items: center;
}
.menu-item{
text-align: center;
}
.main-nav .menu-item a {
text-decoration: none;
}
.main-nav .menu-item a:hover {
color: #64748b;
}
</style>
@@ -50,11 +61,11 @@ import { metadata } from "../consts";
<h1>
<a href="/">{metadata.siteTitle}</a>
</h1>
<!--<ul class="menu">-->
<!-- <li class="menu-item"><a href="/">首页</a></li>-->
<!-- <li class="menu-item"><a href="/">文章</a></li>-->
<!-- <li class="menu-item"><a href="/">分类</a></li>-->
<!-- <li class="menu-item"><a href="/">关于</a></li>-->
<!--</ul>-->
<ul class="menu">
<li class="menu-item"><a href="/">首页</a></li>
<!--<li class="menu-item"><a href="/">文章</a></li>-->
<li class="menu-item"><a href="/">分类</a></li>
<!--<li class="menu-item"><a href="/">关于</a></li>-->
</ul>
</nav>
</header>

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>

5
src/styles/github-markdown.css
View File

@@ -16,3 +16,8 @@ h1{
border-bottom: none ;
}
@media (max-width: 768px) {
.markdown-body pre code{
font-size: inherit;
}
}

8
src/styles/global.css
View File

@@ -24,4 +24,10 @@ main {
width: 100%;
margin: 0 auto;
padding: 32px;
}
}
@media (max-width: 768px) {
main{
padding: 16px;
}
}