This commit is contained in:
@ -1,6 +1,5 @@
|
||||
---
|
||||
import BaseLayout from '../layout/BaseLayout.astro'
|
||||
|
||||
import FullLayoutV1 from '../layout/FullLayoutV1.astro'
|
||||
import { listBlogs } from '../lib/apis/legacy/blog'
|
||||
|
||||
export const prerender = false
|
||||
@ -11,12 +10,34 @@ const page = isNaN(_page) ? 1 : Math.max(1, _page)
|
||||
const blogs = await listBlogs({ page })
|
||||
---
|
||||
|
||||
<BaseLayout>
|
||||
{
|
||||
blogs.map((blog) => (
|
||||
<div>
|
||||
<a href={`/blogs/${blog.id}`}>{blog.title}</a>
|
||||
</div>
|
||||
))
|
||||
<FullLayoutV1>
|
||||
<div class="__dev__caution">
|
||||
<h1>仍在开发中，界面会崩坏</h1>
|
||||
</div>
|
||||
<section>
|
||||
<ul>
|
||||
{
|
||||
blogs.map((blog) => (
|
||||
<li>
|
||||
<a href={`/blogs/${blog.id}`}>{blog.title}</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</section>
|
||||
</FullLayoutV1>
|
||||
|
||||
<style>
|
||||
.__dev__caution {
|
||||
width: 100dvw;
|
||||
height: 100dvh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
& > h1 {
|
||||
font-size: 72px;
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
</BaseLayout>
|
||||
</style>
|
||||
|
||||
@ -1,13 +1,19 @@
|
||||
---
|
||||
export const prerender = false
|
||||
|
||||
import BoringLayout from '../layout/BoringLayout.astro'
|
||||
// import BoringLayout from '../layout/BoringLayout.astro'
|
||||
import FullLayoutV1 from '../layout/FullLayoutV1.astro'
|
||||
import MainpageButton from '../components/MainpageButton.svelte'
|
||||
import MainpageTypewriter from '../components/MainpageTypewriter.svelte'
|
||||
import { Image } from 'astro:assets'
|
||||
|
||||
import { mainpageGetClick } from '../lib/apis/legacy/mainpage'
|
||||
|
||||
// 无用按钮的数字预注入
|
||||
// 常量定义
|
||||
const AVATAR_URL =
|
||||
'https://cdn.passthem.top/sharex/2026/03/%E6%93%A6%E6%B1%97%E5%90%8E_%E6%96%B9%E5%BD%A2.png.upscale.png'
|
||||
|
||||
// 无用按钮的数字预注入
|
||||
let initialClicks = 0
|
||||
|
||||
try {
|
||||
@ -18,10 +24,220 @@ try {
|
||||
}
|
||||
---
|
||||
|
||||
<BoringLayout>
|
||||
<!--<BoringLayout>
|
||||
<h1>博客系统翻新中...</h1>
|
||||
<p>点击 <a href="https://legacy.passthem.top">这里</a> 查看旧版博客</p>
|
||||
<p>或者了解更多 <a href="/about">关于这里</a></p>
|
||||
<p>也欢迎你来 <a href="/contact">联络我</a></p>
|
||||
<p><MainpageButton initialClicks={initialClicks} client:load /></p>
|
||||
</BoringLayout>
|
||||
</BoringLayout>-->
|
||||
<FullLayoutV1 title="首页 - 小帕的小窝">
|
||||
<!-- 就像写幻灯片一样的逻辑写它吧！ -->
|
||||
<section class="slide">
|
||||
<!-- 自我介绍部分 -->
|
||||
<div class="self-introduction">
|
||||
<figure class="avatar">
|
||||
<Image
|
||||
src={AVATAR_URL}
|
||||
alt="passthem 的头像，一个戴眼镜的男孩"
|
||||
loading="eager"
|
||||
width={240}
|
||||
height={240}
|
||||
/>
|
||||
</figure>
|
||||
<div class="descriptions">
|
||||
<div class="motto">
|
||||
<p>passthem¹</p>
|
||||
<p>一个<MainpageTypewriter client:load />的</p>
|
||||
<p>个人势创作者</p>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<MainpageButton initialClicks={initialClicks} client:load />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="notation">
|
||||
<p>¹我在各个平台的惯用 ID，开头字母大小写无所谓</p>
|
||||
<p>
|
||||
²头像由 <a href="https://space.bilibili.com/2017869">Yscao@bilibili</a> 绘制
|
||||
</p>
|
||||
<p>
|
||||
³有人说这个配色像 <a
|
||||
href="https://www.bilibili.com/video/av383664698/"
|
||||
class="thsx">涂黑书信</a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="slide" style="background-color: var(--color-bg-1);">
|
||||
<div class="slide-title-design1">
|
||||
<svg aria-hidden="true" width="800" height="240" viewBox="0 0 800 240">
|
||||
<text x="10" y="220" class="stroke-layer">留言</text>
|
||||
<text x="0" y="210" class="main-layer">留言</text>
|
||||
</svg>
|
||||
</div>
|
||||
<h1>当前页面还在开发中......</h1>
|
||||
</section>
|
||||
|
||||
<section class="slide">
|
||||
<div class="slide-title-design1">
|
||||
<svg aria-hidden="true" width="800" height="240" viewBox="0 0 800 240">
|
||||
<text x="10" y="220" class="stroke-layer">友链</text>
|
||||
<text x="0" y="210" class="main-layer">友链</text>
|
||||
</svg>
|
||||
</div>
|
||||
<h1>当前页面还在开发中......</h1>
|
||||
</section>
|
||||
</FullLayoutV1>
|
||||
|
||||
<style>
|
||||
.slide {
|
||||
min-height: 100dvh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
& > .notation {
|
||||
position: absolute;
|
||||
width: 100dvw;
|
||||
padding-inline-start: 2rem;
|
||||
padding-block-end: 2rem;
|
||||
inset-inline-start: 0;
|
||||
inset-block-end: 0;
|
||||
font-size: smaller;
|
||||
color: var(--color-fg-0);
|
||||
opacity: 0.3;
|
||||
|
||||
& a {
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-fg-0);
|
||||
color: var(--color-bg-0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 自我介绍部分 */
|
||||
.self-introduction {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
flex-direction: row-reverse;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
& > .avatar {
|
||||
margin: 0;
|
||||
border-radius: 50%;
|
||||
width: clamp(160px, 30vw, 240px);
|
||||
aspect-ratio: 1 / 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
& > .descriptions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3rem;
|
||||
|
||||
& > .motto {
|
||||
font-size: clamp(2rem, 4vw, 4rem);
|
||||
font-weight: 800;
|
||||
|
||||
display: grid;
|
||||
grid-template-rows: repeat(3, 1fr);
|
||||
align-items: center;
|
||||
width: 11em;
|
||||
|
||||
& > p {
|
||||
margin: 0;
|
||||
width: max-content;
|
||||
}
|
||||
}
|
||||
|
||||
& > .buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.thsx {
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.motto > p {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
background-color: var(--color-fg-0);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
inset-inline-start: -100%;
|
||||
}
|
||||
}
|
||||
|
||||
section:has(.thsx:hover) .motto > p {
|
||||
&:nth-child(1)::before {
|
||||
transition-delay: 0;
|
||||
}
|
||||
&:nth-child(2)::before {
|
||||
transition-delay: 0.1s;
|
||||
}
|
||||
&:nth-child(3)::before {
|
||||
transition-delay: 0.2s;
|
||||
}
|
||||
|
||||
&::before {
|
||||
transition: inset-inline-start cubic-bezier(0.2, 1, 0.17, 1) 1s;
|
||||
inset-inline-start: 0%;
|
||||
}
|
||||
}
|
||||
|
||||
section:has(.thsx:hover) .buttons {
|
||||
transition: filter cubic-bezier(0.2, 1, 0.17, 1) 1s;
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
.slide-title-design1 {
|
||||
position: absolute;
|
||||
inset-inline-start: -1rem;
|
||||
inset-block-start: -5rem;
|
||||
opacity: 0.6;
|
||||
|
||||
& > svg {
|
||||
font-weight: 900;
|
||||
font-size: 10rem;
|
||||
|
||||
& > .stroke-layer {
|
||||
fill: none;
|
||||
stroke: var(--color-fg-0);
|
||||
stroke-width: 1px;
|
||||
stroke-linejoin: round;
|
||||
user-select: none;
|
||||
}
|
||||
& > .main-layer {
|
||||
fill: var(--color-fg-0);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user