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-01 01:45:07 +08:00
parent 93b2853d30
commit a69d3f81ce
4 changed files with 329 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

175
src/pages/index.astro
View File

@ -4,8 +4,10 @@ export const prerender = false
// import BoringLayout from '../layout/BoringLayout.astro'
import FullLayoutV1 from '../layout/FullLayoutV1.astro'
import MainpageButton from '../components/MainpageButton.svelte'
import MainpageComments from '../components/MainpageComments.astro'
import MainpageTypewriter from '../components/MainpageTypewriter.svelte'
import { Image } from 'astro:assets'
import { Icon } from 'astro-icon/components'
import { mainpageGetClick } from '../lib/apis/legacy/mainpage'
@ -24,13 +26,6 @@ try {
}
---
<!--<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>-->
<FullLayoutV1 title="首页 - 小帕的小窝">
<!-- 就像写幻灯片一样的逻辑写它吧！ -->
<section class="slide">
@ -67,43 +62,74 @@ try {
class="thsx">涂黑书信</a
>
</p>
<p class="animation-error-warning">
⁴你的系统设置中似乎禁用了动画效果，而 Firefox
在禁用动画效果时，网页的表现会很奇怪
</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">
<div class="slide-title-design1" aria-hidden="true">
<svg 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>
<div class="slide-title-design2" aria-hidden="true">
<Icon name="mdi:comment-quote" />
</div>
<div class="comment-page-container">
<h1>来自大家的留言</h1>
<div class="comment-container">
<MainpageComments />
</div>
</div>
</section>
<section class="slide">
<div class="slide-title-design1">
<svg aria-hidden="true" width="800" height="240" viewBox="0 0 800 240">
<div class="slide-title-design1" aria-hidden="true">
<svg 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>
<div class="slide-title-design2" aria-hidden="true">
<Icon name="mdi:link-variant" />
</div>
<h1>当前页面还在开发中......</h1>
</section>
</FullLayoutV1>
<script>
const setupObserver = () => {
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.intersectionRatio > 0.5) {
entry.target.classList.add('slide-visible')
} else {
entry.target.classList.remove('slide-visible')
}
})
},
{ threshold: 0.5 },
)
document.querySelectorAll('section.slide').forEach((ele) => {
observer.observe(ele)
})
}
document.addEventListener('astro:page-load', setupObserver)
</script>
<style>
:global(html) {
scroll-snap-type: y proximity;
scroll-behavior: smooth;
}
@-moz-document url-prefix() {
:global(html) {
scroll-snap-type: none;
scroll-behavior: auto;
}
}
.slide {
scroll-snap-align: start;
height: 100dvh;
@ -112,6 +138,7 @@ try {
justify-content: center;
position: relative;
overflow: hidden;
isolation: isolate;
& > .notation {
position: absolute;
@ -133,6 +160,28 @@ try {
}
}
}
& h1 {
font-size: clamp(2.5rem, 6vw, 3rem);
font-weight: 800;
}
}
.animation-error-warning {
display: none;
}
@media (prefers-reduced-motion: reduce) {
@-moz-document url-prefix() {
.animation-error-warning {
display: block;
}
:global(html) {
scroll-snap-type: none;
scroll-behavior: auto;
}
}
}
/* 自我介绍部分 */
@ -151,9 +200,17 @@ try {
& > .avatar {
margin: 0;
border-radius: 50%;
width: clamp(160px, 30vw, 240px);
--final-width: clamp(160px, 30vw, 240px);
transition: all cubic-bezier(0.4, 1, 0.4, 1) 1.2s;
transform: rotate(10deg);
aspect-ratio: 1 / 1;
overflow: hidden;
width: 0;
section.slide.slide-visible & {
width: var(--final-width);
transform: rotate(0);
}
}
& > .descriptions {
@ -192,6 +249,7 @@ try {
}
}
/* 涂黑书信的特殊处理 */
.thsx {
cursor: pointer;
text-decoration: underline;
@ -235,11 +293,20 @@ try {
filter: grayscale(100%);
}
/* 一个特殊设计的标题元素，呼呼 */
.slide-title-design1 {
position: absolute;
inset-inline-start: -1rem;
inset-block-start: -5rem;
opacity: 0.6;
inset-inline-start: -3rem;
inset-block-end: -2rem;
opacity: 0;
user-select: none;
z-index: -1;
transition: all ease 1.5s;
section.slide.slide-visible & {
opacity: 0.2;
inset-inline-start: -1rem;
}
& > svg {
font-weight: 900;
@ -250,11 +317,71 @@ try {
stroke: var(--color-fg-0);
stroke-width: 1px;
stroke-linejoin: round;
user-select: none;
}
& > .main-layer {
fill: var(--color-fg-0);
}
}
}
.slide-title-design2 {
position: absolute;
inset-inline-end: -5rem;
inset-block-start: -2rem;
opacity: 0;
user-select: none;
z-index: -1;
transition: all ease 1.5s;
section.slide.slide-visible & {
opacity: 0.2;
inset-inline-end: -3rem;
}
& > svg {
font-size: 288px;
transform: rotate(-12deg);
}
}
/* 评论页 */
.comment-page-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
& > .comment-container {
height: 0;
padding: 0;
margin: 0;
transition: all cubic-bezier(0.4, 1, 0.4, 1) 1.2s;
border-radius: 1rem;
background-color: var(--color-bg-n);
width: calc(min(100dvw - 2rem, 40rem));
position: relative;
&::before {
content: '';
display: block;
width: 100%;
height: 100%;
border-radius: 1rem;
transition: all cubic-bezier(0.4, 1, 0.4, 1) 1.2s;
position: absolute;
transform: rotate(0deg);
z-index: -1;
background-color: rgb(from var(--color-fg-0) r g b / 0.05);
}
section.slide.slide-visible & {
margin-block-start: 2rem;
height: 60dvh;
&::before {
transform: rotate(-6deg);
}
}
}
}
</style>