Skip to content

Commit cfeb978

Browse files
LingLambdaLingLambda
committed
优化大量细节
1 parent 33040e1 commit cfeb978

File tree

18 files changed

+196
-132
lines changed

18 files changed

+196
-132
lines changed

‎src/components/TitileCard.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const { title, date, wordNum, description } = Astro.props;
3232
flex-direction: column;
3333
gap: 0.7rem; /* 行间距 */
3434
align-items: center;
35-
max-width: 90vw;
35+
width: auto;
3636
height: 8rem;
3737
margin: 20px 20px 10px 20px;
3838
border: 1px solid rgba(0, 0, 0, 0.2); /* 添加黑色的边框，宽度为 2px */

‎src/layouts/BaseLayout.astro‎

Lines changed: 36 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,21 @@ const { description, keywords, title, canonical, ogType } = Astro.props;
1212
<meta charset="utf-8" />
1313
<link rel="icon" href="/icon/favicon.svg" type="image/svg" />
1414
<link rel="sitemap" href="/sitemap-index.xml" />
15-
<link rel="preload" href="/fonts/MapleMono-Regular.woff2" as="font" type="font/woff2" crossorigin>
16-
<link rel="preload" href="/assets/images/chair.webp" as="image" type="image/webp" crossorigin>
17-
{canonical?<link rel="canonical" href={canonical}>:""}
15+
<link
16+
rel="preload"
17+
href="/fonts/MapleMono-Regular.woff2"
18+
as="font"
19+
type="font/woff2"
20+
crossorigin
21+
/>
22+
<link
23+
rel="preload"
24+
href="/assets/images/chair.webp"
25+
as="image"
26+
type="image/webp"
27+
crossorigin
28+
/>
29+
{canonical ? <link rel="canonical" href={canonical} /> : ""}
1830
<script src="../scripts/swUnregister.ts"></script>
1931
<ClientRouter />
2032
<!-- base meta -->
@@ -26,8 +38,8 @@ const { description, keywords, title, canonical, ogType } = Astro.props;
2638
<meta property="og:title" content={title} />
2739
<meta property="og:description" content={description} />
2840
<meta property="og:image" content="/icon/favicon.svg" />
29-
{canonical?<meta property="og:url" content={canonical} />:""}
30-
<meta property="og:type" content={ogType?ogType:"website"} />
41+
{canonical ? <meta property="og:url" content={canonical} /> : ""}
42+
<meta property="og:type" content={ogType ? ogType : "website"} />
3143
<!-- twitter cards -->
3244
<meta name="twitter:card" content=`Ling的小窝 - ${title}` />
3345
<meta name="twitter:title" content={title} />
@@ -49,7 +61,9 @@ const { description, keywords, title, canonical, ogType } = Astro.props;
4961
<header id="menu">
5062
<HeadMenu />
5163
</header>
52-
<slot>暂时还没有内容哦</slot>
64+
<main>
65+
<slot>暂时还没有内容哦</slot>
66+
</main>
5367
<!-- <hr style="width:600px;color:#808080; margin-top: 1rem;" /> -->
5468
<footer>
5569
<Image
@@ -146,6 +160,16 @@ const { description, keywords, title, canonical, ogType } = Astro.props;
146160
box-sizing: border-box; /* 确保所有元素的宽高包含 padding 和 border */
147161
}
148162

163+
main {
164+
width: 100%;
165+
max-width: 43rem;
166+
flex-grow: 1; /* 使 main 占据剩余空间 */
167+
font-size: 1rem;
168+
line-height: 1.6;
169+
margin-left: auto;
170+
margin-right: auto;
171+
padding: .25rem 2rem;
172+
}
149173
html {
150174
background-color: rgb(250, 252, 254);
151175
/* scrollbar-gutter: stable; */ /* 防止滚动条导致页面宽度不一致 */
@@ -220,4 +244,10 @@ const { description, keywords, title, canonical, ogType } = Astro.props;
220244
.gopher:hover {
221245
transform: rotate(36000deg);
222246
}
247+
248+
@media (max-width: 768px) {
249+
main {
250+
padding: .25rem 0;
251+
}
252+
}
223253
</style>

‎src/layouts/BlogLayout.astro‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,20 @@ import BaseLayout from "./BaseLayout.astro";
33
const { description, keywords, title, canonical } = Astro.props;
44
---
55

6-
<BaseLayout description={description} keywords={keywords} title={title} canonical={canonical} ogType="article">
6+
<BaseLayout
7+
description={description}
8+
keywords={keywords}
9+
title={title}
10+
canonical={canonical}
11+
ogType="article"
12+
>
713
<section>
814
<slot>暂时还没有内容哦</slot>
915
</section>
1016
</BaseLayout>
1117

1218
<style>
1319
section {
14-
max-width: 65ch;
15-
padding: 0;
16-
/* padding:8% */
17-
width: 85%;
20+
padding: 0 1.5rem;
1821
}
1922
</style>

‎src/layouts/ErrorLayout.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const { title, canonical } = Astro.props;
99
<meta charset="utf-8" />
1010
<link rel="icon" href="/icon/favicon.svg" type="image/svg" />
1111
<link rel="sitemap" href="/sitemap-index.xml" />
12-
{canonical?<link rel="canonical" href={canonical}>:""}
12+
{canonical ? <link rel="canonical" href={canonical} /> : ""}
1313
<script src="../scripts/swUnregister.ts"></script>
1414
<ClientRouter />
1515
<meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -27,7 +27,7 @@ const { title, canonical } = Astro.props;
2727
<title>Ling的小窝{title ? ` - ${title}` : ""}</title>
2828
</head>
2929
<body>
30-
<div id="container">
30+
<div class="content-wrapper">
3131
<slot>出错了！</slot>
3232
<!-- <hr style="width:600px;color:#808080; margin-top: 1rem;" /> -->
3333
</div>

‎src/layouts/MainLayout.astro‎

Lines changed: 0 additions & 20 deletions
This file was deleted.

‎src/pages/404.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import ErrorLayout from "../layouts/ErrorLayout.astro";
33
---
44

5-
<ErrorLayout title="404" canonical="https://blog.llma.top/404/">
5+
<ErrorLayout title="404" canonical=`${import.meta.env.SITE}/404/`
66
<div class="main">
77
<h1>这里啥都没有 - 404</h1>
88
<a href="/">点我返回主页</a>

‎src/pages/500.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import ErrorLayout from "../layouts/ErrorLayout.astro";
33
---
44

5-
<ErrorLayout title="500" canonical="https://blog.llma.top/500/">
5+
<ErrorLayout title="500" canonical=`${import.meta.env.SITE}/500/`>
66
<div class="main">
77
<h1>爆炸了！- 500</h1>
88
<p>

‎src/pages/about.astro‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
11
---
2-
import MainLayout from "../layouts/MainLayout.astro";
32
import Prose from "../components/Prose.astro";
43
import { Content } from "../posts/about.md";
4+
import BaseLayout from "../layouts/BaseLayout.astro";
55
---
66

7-
<MainLayout description='本页面记录了关于我的信息' keywords="关于,Ling,LingLambda" title="关于" canonical="https://blog.llma.top/about/">
7+
<BaseLayout
8+
description="本页面记录了关于我的信息"
9+
keywords="关于,Ling,LingLambda"
10+
title="关于"
11+
canonical=`${import.meta.env.SITE}/about/`
12+
>
813
<Prose>
914
<Content />
1015
</Prose>
11-
</MainLayout>
16+
</BaseLayout>

‎src/pages/blog.astro‎

Lines changed: 31 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,40 @@
11
---
22
import TitleCard from "../components/TitileCard.astro";
33
import { getCollectionOrderByDate, getWordCount } from "../utils/utils.ts";
4-
import MainLayout from "../layouts/MainLayout.astro";
4+
import BaseLayout from "../layouts/BaseLayout.astro";
55
const blogs = await getCollectionOrderByDate("blog", ({ data }) => {
66
return data.published === true;
77
});
88
---
99

10-
<MainLayout description="本页面列出了所有blog页面" keywords="blog" title="文章" canonical="https://blog.llma.top/blog/">
11-
{
12-
blogs.map(async (blog) => {
13-
const { title, date, description } = blog.data;
14-
const wordNum = getWordCount(blog.body ? blog.body : "");
15-
return (
16-
<TitleCard
17-
title={title}
18-
wordNum={wordNum}
19-
date={date}
20-
description={description}
21-
></TitleCard>
22-
);
23-
})
24-
}
25-
</MainLayout>
10+
<BaseLayout
11+
description="本页面列出了所有blog页面"
12+
keywords="blog"
13+
title="文章"
14+
canonical=`${import.meta.env.SITE}/blog/`
15+
>
16+
<div class="content-wrapper">
17+
{
18+
blogs.map(async (blog) => {
19+
const { title, date, description } = blog.data;
20+
const wordNum = getWordCount(blog.body ? blog.body : "");
21+
return (
22+
<TitleCard
23+
title={title}
24+
wordNum={wordNum}
25+
date={date}
26+
description={description}
27+
/>
28+
);
29+
})
30+
}
31+
</div>
32+
</BaseLayout>
2633

27-
<style></style>
34+
<style>
35+
.content-wrapper {
36+
display: flex;
37+
flex-direction: column;
38+
padding: 0 1.5rem;
39+
}
40+
</style>

‎src/pages/blog/[page].astro‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,12 @@ const MIN_READ_COUNT = 350;
4040
const readTimeMin = Math.ceil(fontNum / MIN_READ_COUNT);
4141
---
4242

43-
<BlogLayout description={description} keywords={tags} title={title} canonical=`https://blog.llma.top/blog/${titleToPinyin(title)}/`>
43+
<BlogLayout
44+
description={description}
45+
keywords={tags}
46+
title={title}
47+
canonical=`${import.meta.env.SITE}/blog/${titleToPinyin(title)}/`
48+
>
4449
<div class="blog-head">
4550
<h1 class="title">{title}</h1>
4651
<p class="description">{description}</p>
@@ -107,7 +112,7 @@ const readTimeMin = Math.ceil(fontNum / MIN_READ_COUNT);
107112
}
108113

109114
#text {
110-
margin: 3.5rem 0;
115+
padding: 1.5rem 0;
111116
}
112117

113118
@media (max-width: 768px) {

0 commit comments

Comments
 (0)