syhily/yufan.me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: new page style for better display on wide screen.

Browse Source
This commit is contained in:
Yufan Sheng 2024-11-27 23:44:44 +08:00
parent 4cefde38b0
commit 6e6cc73c5b
Signed by: syhily
GPG Key ID: DEB186763C308C31
16 changed files with 30 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.vscode/settings.json vendored
View File

@ -20,6 +20,7 @@
"ameho", "ameho",
"amehochan", "amehochan",
"aplayer", "aplayer",
"arrowup",
"artalk", "artalk",
"astro", "astro",
"astrojs", "astrojs",
@ -53,6 +54,7 @@
"forencrypt", "forencrypt",
"giscus", "giscus",
"gogogo", "gogogo",
"googlebot",
"gotop", "gotop",
"gungseo", "gungseo",
"hefei", "hefei",

BIN
public/images/2024/11/2024112723135900.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 250 KiB

BIN
public/images/2024/11/2024112723183300.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 215 KiB

BIN
public/images/2024/11/2024112723215500.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 278 KiB

BIN
public/images/2024/11/2024112723242700.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 511 KiB

BIN
public/images/2024/11/2024112723270800.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 272 KiB

BIN
public/images/2024/11/2024112723303500.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 274 KiB

BIN
public/images/2024/11/2024112723314900.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 376 KiB

BIN
public/images/2024/11/2024112723400500.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 263 KiB

1
src/content/config.ts
View File

@ -108,6 +108,7 @@ const pagesCollection = defineCollection({
comments: z.boolean().optional().default(true), comments: z.boolean().optional().default(true),
cover: image(defaultCover), cover: image(defaultCover),
published: z.boolean().optional().default(true), published: z.boolean().optional().default(true),
summary: z.string().optional().default(''),
friend: z.boolean().optional().default(false), friend: z.boolean().optional().default(false),
toc: toc(), toc: toc(),
}), }),

7
src/content/pages/about.mdx
View File

@ -3,11 +3,12 @@ title: 关于我
slug: about slug: about
date: 2010-03-25 02:20:11 date: 2010-03-25 02:20:11
updated: 2024-04-08 19:27:27 updated: 2024-04-08 19:27:27
cover: /images/2019/05/2019051406433394.jpg summary: 雨帆，以及这个博客的故事。
cover: /images/2024/11/2024112723215500.jpg
published: true published: true
--- ---
![いつまでも変わらずに by ふーらい](/images/2019/05/2019051406433394.jpg) ![ライブペイント by mocha@新刊委託中](/images/2024/11/2024112723242700.jpg)
<MusicPlayer netease={22705492} /> <MusicPlayer netease={22705492} />
@ -37,4 +38,4 @@ published: true
雨帆就是我，一直很年轻的孩子。 雨帆就是我，一直很年轻的孩子。
![ホーム by くちびる](/images/2019/05/2019051406483929.jpg) ![天使のはしご by mocha@新刊委託中](/images/2024/11/2024112723270800.jpg)

9
src/content/pages/guestbook.mdx
View File

@ -3,13 +3,14 @@ title: 留言簿
slug: guestbook slug: guestbook
date: 2012-01-25 02:20:11 date: 2012-01-25 02:20:11
updated: 2024-04-08 12:27:27 updated: 2024-04-08 12:27:27
cover: /images/2019/05/2019051406592297.jpg summary: 匆匆的网络过客们啊，欢迎来此留下您的足迹。
cover: /images/2024/11/2024112723314900.jpg
published: true published: true
--- ---
![ホンノムシ by La-na](/images/2019/05/2019051406592297.jpg) ![春の陽 by 防人](/images/2024/11/2024112723303500.jpg)
<MusicPlayer netease={2109088527} /> <MusicPlayer netease={2166180181} />
耳机里面单曲循环着《水中花》。曾经，很长的一段时间我喜欢听这首歌。 耳机里面单曲循环着《水中花》。曾经，很长的一段时间我喜欢听这首歌。
@ -22,3 +23,5 @@ published: true
草木无情，有时飘零，人生易老天难老。飞花易逝，岁月无情，有些博客就这么消失了，而又有着新的博主到来…… 草木无情，有时飘零，人生易老天难老。飞花易逝，岁月无情，有些博客就这么消失了，而又有着新的博主到来……
人生似飞花匆匆，飞花也有过绚丽。只是，当多年后的你再次看到这些留言时，是否能像飞花一样泰然。 人生似飞花匆匆，飞花也有过绚丽。只是，当多年后的你再次看到这些留言时，是否能像飞花一样泰然。
![色なき風 by 防人](/images/2024/11/2024112723400500.jpg)

7
src/content/pages/links.mdx
View File

@ -3,14 +3,15 @@ title: 友人帐
slug: links slug: links
date: 2012-01-25 02:20:11 date: 2012-01-25 02:20:11
updated: 2024-04-08 12:27:27 updated: 2024-04-08 12:27:27
cover: /images/2019/05/2019051407200569.jpg cover: /images/2024/11/2024112723135900.jpg
summary: 这里展示了我的网上邻居们，欢迎前去串门。
friend: true friend: true
published: true published: true
--- ---
![closer by K.Hati](/images/2019/05/2019051407200569.jpg) ![新作《天空的翅膀》 by 画师JW](/images/2024/11/2024112723183300.jpg)
<MusicPlayer netease={26192704} /> <MusicPlayer netease={28306936} />
生活有很多面。经历、遭遇、过去、未来。正发生的、曾经发生的、或即将发生的。感情的迁移、心态的改变、外貌的成熟。这些都是。 生活有很多面。经历、遭遇、过去、未来。正发生的、曾经发生的、或即将发生的。感情的迁移、心态的改变、外貌的成熟。这些都是。

4
src/layouts/BaseLayout.astro
View File

@ -16,6 +16,7 @@ import options from '@/options';
interface Props { interface Props {
title?: string; title?: string;
description?: string; description?: string;
footer?: boolean;
} }
const title = const title =
@ -23,6 +24,7 @@ const title =
? `${options.title} - ${options.description}` ? `${options.title} - ${options.description}`
: `${Astro.props.title} - ${options.title}`; : `${Astro.props.title} - ${options.title}`;
const description = Astro.props.description || options.description; const description = Astro.props.description || options.description;
const showFooter = Astro.props.footer || false;
--- ---
<!doctype html> <!doctype html>
@ -53,7 +55,7 @@ const description = Astro.props.description || options.description;
<Header /> <Header />
<main class="site-main"> <main class="site-main">
<slot /> <slot />
<Footer /> {showFooter && <Footer />}
</main> </main>
<ul class="site-fixed-widget"> <ul class="site-fixed-widget">
<li class="fixed-gotop"> <li class="fixed-gotop">

13
src/layouts/PageLayout.astro
View File

@ -1,5 +1,6 @@
--- ---
import Comments from '@/components/comment/Comments.astro'; import Comments from '@/components/comment/Comments.astro';
import Footer from '@/components/footer/Footer.astro';
import Image from '@/components/image/Image.astro'; import Image from '@/components/image/Image.astro';
import LikeButton from '@/components/like/LikeButton.astro'; import LikeButton from '@/components/like/LikeButton.astro';
import PageMeta from '@/components/meta/PageMeta.astro'; import PageMeta from '@/components/meta/PageMeta.astro';
@ -19,12 +20,12 @@ const { page } = Astro.props;
const { Content, headings } = await page.render(); const { Content, headings } = await page.render();
--- ---
<BaseLayout title={page.title}> <BaseLayout title={page.title} footer={false}>
<PageMeta slot="og" title={page.title} ogImageUrl={`/og/${page.slug}.png`} /> <PageMeta slot="og" title={page.title} ogImageUrl={`/og/${page.slug}.png`} />
<div class="px-lg-2 px-xxl-5 py-3 py-md-4 py-xxl-5"> <div class="row gx-0">
<div class="container"> <div class="col-lg-8 col-xl-7">
<div class="post"> <div class="post p-3 p-md-5">
<h1 class="post-title mb-3 mb-xl-4">{page.title}</h1> <h1 class="post-title mb-3 mb-xl-4">{page.title}</h1>
<TableOfContents {headings} toc={page.toc} /> <TableOfContents {headings} toc={page.toc} />
<div class="post-content"> <div class="post-content">
@ -36,6 +37,10 @@ const { Content, headings } = await page.render();
<LikeButton permalink={page.permalink} /> <LikeButton permalink={page.permalink} />
{page.comments && <Comments commentKey={urlJoin(options.website, page.permalink, '/')} title={page.title} />} {page.comments && <Comments commentKey={urlJoin(options.website, page.permalink, '/')} title={page.title} />}
</div> </div>
<Footer />
</div>
<div class="col-lg-4 col-xl-5 d-none d-lg-block sticky-top hv">
<div class="bg-img hv" style={{ backgroundImage: `url('${page.cover.src}')` }}></div>
</div> </div>
</div> </div>
</BaseLayout> </BaseLayout>

2
src/pages/og/[slug].png.ts
View File

@ -29,7 +29,7 @@ export const GET: APIRoute = async ({ params }) => {
} }
title = page.title; title = page.title;
summary = ''; summary = page.summary;
cover = page.cover.src; cover = page.cover.src;
} else { } else {
title = post.title; title = post.title;