Passthem/blog-frontend-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加格式化相关
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
钟晓帕
2026-04-07 03:27:22 +08:00
parent 2a71d714e8
commit d605131bda
13 changed files with 904 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/assets/fonts.css
View File

@ -1,6 +1,7 @@
@font-face {
font-family: 'Maple Mono';
src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-Bold.woff2') format('woff2');
src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-Bold.woff2')
format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
@ -8,7 +9,8 @@
@font-face {
font-family: 'Maple Mono';
src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-BoldItalic.woff2') format('woff2');
src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-BoldItalic.woff2')
format('woff2');
font-weight: 700;
font-style: italic;
font-display: swap;
@ -16,7 +18,8 @@
@font-face {
font-family: 'Maple Mono';
src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-ExtraBold.woff2') format('woff2');
src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-ExtraBold.woff2')
format('woff2');
font-weight: 800;
font-style: normal;
font-display: swap;
@ -24,7 +27,8 @@
@font-face {
font-family: 'Maple Mono';
src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-ExtraBoldItalic.woff2') format('woff2');
src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-ExtraBoldItalic.woff2')
format('woff2');
font-weight: 800;
font-style: italic;
font-display: swap;
@ -32,7 +36,8 @@
@font-face {
font-family: 'Maple Mono';
src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-ExtraLight.woff2') format('woff2');
src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-ExtraLight.woff2')
format('woff2');
font-weight: 200;
font-style: normal;
font-display: swap;
@ -40,7 +45,8 @@
@font-face {
font-family: 'Maple Mono';
src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-ExtraLightItalic.woff2') format('woff2');
src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-ExtraLightItalic.woff2')
format('woff2');
font-weight: 200;
font-style: italic;
font-display: swap;
@ -48,7 +54,8 @@
@font-face {
font-family: 'Maple Mono';
src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-Italic.woff2') format('woff2');
src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-Italic.woff2')
format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
@ -56,7 +63,8 @@
@font-face {
font-family: 'Maple Mono';
src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-Light.woff2') format('woff2');
src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-Light.woff2')
format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
@ -64,7 +72,8 @@
@font-face {
font-family: 'Maple Mono';
src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-LightItalic.woff2') format('woff2');
src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-LightItalic.woff2')
format('woff2');
font-weight: 300;
font-style: italic;
font-display: swap;
@ -72,7 +81,8 @@
@font-face {
font-family: 'Maple Mono';
src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-Medium.woff2') format('woff2');
src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-Medium.woff2')
format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
@ -80,7 +90,8 @@
@font-face {
font-family: 'Maple Mono';
src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-MediumItalic.woff2') format('woff2');
src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-MediumItalic.woff2')
format('woff2');
font-weight: 500;
font-style: italic;
font-display: swap;
@ -88,7 +99,8 @@
@font-face {
font-family: 'Maple Mono';
src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-Regular.woff2') format('woff2');
src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-Regular.woff2')
format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
@ -96,7 +108,8 @@
@font-face {
font-family: 'Maple Mono';
src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-SemiBold.woff2') format('woff2');
src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-SemiBold.woff2')
format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
@ -104,7 +117,8 @@
@font-face {
font-family: 'Maple Mono';
src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-SemiBoldItalic.woff2') format('woff2');
src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-SemiBoldItalic.woff2')
format('woff2');
font-weight: 600;
font-style: italic;
font-display: swap;
@ -112,7 +126,8 @@
@font-face {
font-family: 'Maple Mono';
src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-Thin.woff2') format('woff2');
src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-Thin.woff2')
format('woff2');
font-weight: 100;
font-style: normal;
font-display: swap;
@ -120,19 +135,23 @@
@font-face {
font-family: 'Maple Mono';
src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-ThinItalic.woff2') format('woff2');
src: url('https://cdn.passthem.top/fonts/MapleMonoNormal-NF-CN-ThinItalic.woff2')
format('woff2');
font-weight: 100;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "ZLabsRoundPix 16px M CN";
src: url('https://cdn.passthem.top/fonts/ZLabsRoundPix_16px_M_CN.ttf.woff2') format('woff2');
font-family: 'ZLabsRoundPix 16px M CN';
src: url('https://cdn.passthem.top/fonts/ZLabsRoundPix_16px_M_CN.ttf.woff2')
format('woff2');
font-display: swap;
}
:root {
--font-mono: 'Maple Mono NF CN', 'Maple Mono', monospace, var(--font-sans);
--font-sans: 'HarmonyOS Sans SC', 'Source Han Sans SC', 'Noto Sans CJK SC', sans-serif;
--font-sans:
'HarmonyOS Sans SC', 'Source Han Sans SC', 'Noto Sans CJK SC',
sans-serif;
}

18
src/assets/prose.css
View File

@ -2,7 +2,7 @@
line-height: 1.6em;
& p {
margin-block: .6em;
margin-block: 0.6em;
}
& h1,
@ -44,16 +44,16 @@
background-color: var(--color-bg-1);
color: var(--color-fg-1);
border-radius: .5rem;
padding-block: .5rem;
border-radius: 0.5rem;
padding-block: 0.5rem;
padding-inline: 1.25rem;
margin-block: 1.25rem;
border-inline-start: solid .25rem;
border-inline-start: solid 0.25rem;
}
& pre.shiki {
border-radius: .5rem;
border-radius: 0.5rem;
padding-block: 1rem;
padding-inline: 1.25rem;
margin-block: 1.25rem;
@ -69,13 +69,13 @@
}
& img {
border-radius: .5rem;
border-radius: 0.5rem;
margin-block: 1.25rem;
}
& p>code {
& p > code {
background-color: var(--color-bg-1);
padding: .25rem;
border-radius: .25rem;
padding: 0.25rem;
border-radius: 0.25rem;
}
}

2
src/assets/style.css
View File

@ -47,7 +47,7 @@ body {
/* == 配置默认字体 == */
code {
font-family: var(--font-mono);
font-size: .9rem;
font-size: 0.9rem;
}
/* == 支持 Shiki 的高亮 == */

72
src/components/BlogCard.astro
View File

@ -16,8 +16,8 @@ interface Props {
const { link, title, featureImage, author, createdAt, updatedAt } = Astro.props
const formatDate = (date: Date) => `${date.getFullYear()} 年 ${date.getMonth() + 1} 月 ${date.getDate()} 日`
const formatDate = (date: Date) =>
`${date.getFullYear()} 年 ${date.getMonth() + 1} 月 ${date.getDate()} 日`
---
<a class="card" href={link}>
@ -35,25 +35,38 @@ const formatDate = (date: Date) => `${date.getFullYear()} 年 ${date.getMonth()
}
<div class="info">
<h1 class="title">{title}</h1>
{author && <div class="author">
<Image
class="image"
src={author.avatar ?? ""}
alt=`用户 ${author.name} 的头像`
width={24}
height={24}
densities={[1.5, 2]}
/>
<span class="content">{author.name}</span>
</div>}
{createdAt && <div class="iconinfo">
<Icon class="icon" name="material-symbols:calendar-add-on-rounded" />
<span class="content">{formatDate(createdAt)}</span>
</div>}
{updatedAt && (!createdAt || formatDate(createdAt) != formatDate(updatedAt)) && <div class="iconinfo">
<Icon class="icon" name="material-symbols:calendar-check-rounded" />
<span class="content">{formatDate(updatedAt)}</span>
</div>}
{
author && (
<div class="author">
<Image
class="image"
src={author.avatar ?? ''}
alt={`用户 ${author.name} 的头像`}
width={24}
height={24}
densities={[1.5, 2]}
/>
<span class="content">{author.name}</span>
</div>
)
}
{
createdAt && (
<div class="iconinfo">
<Icon class="icon" name="material-symbols:calendar-add-on-rounded" />
<span class="content">{formatDate(createdAt)}</span>
</div>
)
}
{
updatedAt &&
(!createdAt || formatDate(createdAt) != formatDate(updatedAt)) && (
<div class="iconinfo">
<Icon class="icon" name="material-symbols:calendar-check-rounded" />
<span class="content">{formatDate(updatedAt)}</span>
</div>
)
}
</div>
</a>
@ -116,34 +129,35 @@ const formatDate = (date: Date) => `${date.getFullYear()} 年 ${date.getMonth()
}
}
&>.author, &>.iconinfo {
& > .author,
& > .iconinfo {
margin-inline: 0.5rem;
display: flex;
align-items: center;
gap: .5rem;
gap: 0.5rem;
margin-block: 0.1rem;
&>.image {
& > .image {
aspect-ratio: 1;
object-fit: cover;
width: var(--icon-size);
border-radius: 50%;
}
&>.icon {
& > .icon {
width: var(--icon-size);
height: var(--icon-size);
padding: 2px;
opacity: .5;
opacity: 0.5;
}
&>.content {
opacity: .5;
& > .content {
opacity: 0.5;
font-size: 0.9rem;
}
}
&>.author {
& > .author {
margin-block: 0.25rem;
}
}

41
src/pages/blogs/[blog_id].astro
View File

@ -23,7 +23,8 @@ if (blogData === null) {
}
const tree = await toMarkdocTree(blogData.content)
const formatDate = (date: Date) => `${date.getFullYear()} 年 ${date.getMonth() + 1} 月 ${date.getDate()} 日`
const formatDate = (date: Date) =>
`${date.getFullYear()} 年 ${date.getMonth() + 1} 月 ${date.getDate()} 日`
---
<FullLayoutV1 title={blogData.title} withGap>
@ -43,22 +44,34 @@ const formatDate = (date: Date) => `${date.getFullYear()} 年 ${date.getMonth()
<main>
<h1>{blogData.title}</h1>
{
blogData.author && <div class="blog-info">
<a class="author" href=`https://legacy.passthem.top/user/${blogData.author.username}`>
<div class="avatar">
<Image class="image" src={blogData.author.avatar.image_url}
width={32} height={32} alt=`用户 ${blogData.author.nickname} 的头像` />
blogData.author && (
<div class="blog-info">
<a
class="author"
href={`https://legacy.passthem.top/user/${blogData.author.username}`}
>
<div class="avatar">
<Image
class="image"
src={blogData.author.avatar.image_url}
width={32}
height={32}
alt={`用户 ${blogData.author.nickname} 的头像`}
/>
</div>
<div class="username">{blogData.author.nickname}</div>
</a>
<span class="split">・</span>
<span>{formatDate(blogData.updated_at)} 更新</span>
</div>
<div class="username">{blogData.author.nickname}</div>
</a>
<span class="split">・</span>
<span>{ formatDate(blogData.updated_at) } 更新</span>
</div>
)
}
<article>
<MarkdocTreeRender tree={tree} client:load />
</article>
<h1 class="comment-title"><Icon name="material-symbols:chat-rounded" /> 评论区</h1>
<h1 class="comment-title">
<Icon name="material-symbols:chat-rounded" /> 评论区
</h1>
<Artalk client:idle />
</main>
</FullLayoutV1>
@ -123,7 +136,7 @@ const formatDate = (date: Date) => `${date.getFullYear()} 年 ${date.getMonth()
display: flex;
flex-direction: row;
align-items: center;
gap: .25rem;
gap: 0.25rem;
& > .avatar {
& > .image {
@ -149,7 +162,7 @@ const formatDate = (date: Date) => `${date.getFullYear()} 年 ${date.getMonth()
display: flex;
flex-direction: row;
align-items: center;
gap: .25rem;
gap: 0.25rem;
&.comment-title {
margin-block-start: 3rem;

44
src/pages/index.astro
View File

@ -96,7 +96,12 @@ try {
<Icon name="mdi:email" />
</div>
<div class="contact-container">
<h1><div class="text">联系我<div class="animation-before"></div></div><div class="animation"></div></h1>
<h1>
<div class="text">联系我<div class="animation-before"></div></div><div
class="animation"
>
</div>
</h1>
<table>
<tbody>
<tr>
@ -188,22 +193,26 @@ try {
[
'https://legacy.passthem.top/assets/ydt-DIeb2Djx.png',
'https://qm.qq.com/q/nDnHUy9KQo',
'有顶天变电站 (QQ)'
'有顶天变电站 (QQ)',
],
[
'https://legacy.passthem.top/assets/lfxdxy-BogfTZvz.png',
'https://qm.qq.com/q/QOpCVZcvyS',
'六方相的新月 (QQ)'
'六方相的新月 (QQ)',
],
].map(b => <a href={b[1]} class="friend">
<div class="avatar">
<Image src={b[0]} width={60} height={60} alt=`网站「${b[2]}」的图标` />
</div>
<div class="description">
{b[2]}
</div>
</a>
)
].map((b) => (
<a href={b[1]} class="friend">
<div class="avatar">
<Image
src={b[0]}
width={60}
height={60}
alt={`网站「${b[2]}」的图标`}
/>
</div>
<div class="description">{b[2]}</div>
</a>
))
}
</div>
</section>
@ -567,7 +576,6 @@ try {
& > .text {
background-color: var(--color-fg-0);
position: relative;
}
& .animation-before {
@ -603,8 +611,7 @@ try {
background-repeat: repeat;
background-size: var(--bg-width) 100%;
animation: bg-contact-roll infinite linear 2s;
transform: skewX(var(--skew-angle))
translateX(calc(var(--unit) - 1px));
transform: skewX(var(--skew-angle)) translateX(calc(var(--unit) - 1px));
}
}
@ -678,7 +685,7 @@ try {
}
/* 友链页 */
.slide:has(>.friends) {
.slide:has(> .friends) {
flex-direction: column;
gap: 1rem;
}
@ -695,7 +702,7 @@ try {
overflow-y: auto;
margin-inline: 1rem;
/* background-color: rgb(from var(--color-bg-0) r g b / .3); */
background-color: rgb(from var(--color-bg-2) r g b / .5);
background-color: rgb(from var(--color-bg-2) r g b / 0.5);
border-radius: 2rem;
backdrop-filter: blur(5px);
@ -751,7 +758,8 @@ try {
outline-offset: 3px;
}
&:hover, &:focus {
&:hover,
&:focus {
transform: scale(1.1);
}