buyfakett/kazoottt-blog-v2
1
0
Fork 0
mirror of https://github.com/KazooTTT/kazoottt-blog-v2.git synced 2025-06-23 02:31:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: style error

Browse Source
This commit is contained in:
KazooTTT
2025-02-06 01:38:24 +08:00
parent 53ca702540
commit 353ef191cc
1 changed files with 11 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
src/components/note/Note.astro
View File

@ -3,7 +3,7 @@ import { type CollectionEntry, render } from "astro:content";
import FormattedDate from "@/components/FormattedDate.astro"; import FormattedDate from "@/components/FormattedDate.astro";
import type { HTMLTag, Polymorphic } from "astro/types"; import type { HTMLTag, Polymorphic } from "astro/types";
import GiscusComment from "@/components/componentsBefore/GiscusComment"; import GiscusComment from "@/components/componentsBefore/GiscusComment";
import { Icon } from "astro-icon/components"; import ArticleContainer from "../ArticleContainer.astro";
type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }> & { type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }> & {
note: CollectionEntry<"note">; note: CollectionEntry<"note">;
isPreview?: boolean | undefined; isPreview?: boolean | undefined;
@ -33,12 +33,10 @@ if (modifiedDate && modifiedDate.toDateString() === date.toDateString()) {
} }
--- ---
<article <ArticleContainer
class:list={[ className={isPreview &&
isPreview && "inline-grid w-full rounded-md bg-[rgb(240,240,240)] px-4 py-3 dark:bg-[rgb(33,35,38)]"}
"inline-grid w-full rounded-md bg-[rgb(240,240,240)] px-4 py-3 dark:bg-[rgb(33,35,38)]", dataPagefindBody={isPreview ? false : true}
]}
data-pagefind-body={isPreview ? false : true}
> >
<Tag class="title" class:list={{ "text-base": isPreview }}> <Tag class="title" class:list={{ "text-base": isPreview }}>
{ {
@ -65,109 +63,12 @@ if (modifiedDate && modifiedDate.toDateString() === date.toDateString()) {
) )
} }
</div> </div>
<div class="prose prose-sm prose-cactus mt-4 max-w-none [&>p:last-of-type]:mb-0"> <div class="group w-full overflow-auto">
<Content /> <div
<div id="myModal" class="modal"> class="prose prose-sm prose-headings:font-semibold prose-headings:text-accent-2 prose-headings:before:absolute prose-headings:before:-ms-4 prose-headings:before:text-gray-600 prose-headings:hover:before:text-accent sm:prose-th:before:content-none max-w-[100%]"
<span class="close"> >
<Icon aria-hidden="true" class="h-6 w-6" focusable="false" name="mdi:close" /> <Content />
</span>
<img class="modal-content" id="img01" />
<div id="caption"></div>
</div> </div>
</div> </div>
{!isPreview && <GiscusComment client:load />} {!isPreview && <GiscusComment client:load />}
</article> </ArticleContainer>
<style>
.modal {
display: none;
position: fixed;
z-index: 100;
margin: auto;
padding: 50px;
inset: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.9);
align-items: center;
justify-content: center;
}
.modal-content {
margin: auto;
display: block;
width: 80%;
}
.close {
position: fixed;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 修改图片相关样式 */
:global(article img) {
opacity: 0;
position: relative;
background-color: #f0f0f0;
transition: all 0.5s ease-in-out;
}
:global(article img.loading) {
opacity: 1;
filter: blur(10px);
}
:global(article img.loaded) {
opacity: 1;
filter: blur(0);
}
</style>
<script>
const modal = document.getElementById("myModal");
const modalImg = document.getElementById("img01") as HTMLImageElement;
const imgs = document.querySelectorAll("article img") as NodeListOf<HTMLImageElement>;
imgs.forEach(function (img) {
// 检查图片是否已经加载完成
if (img.complete) {
img.classList.add("loaded");
} else {
img.classList.add("loading");
img.onload = () => {
img.classList.remove("loading");
img.classList.add("loaded");
};
}
img.style.cursor = "pointer";
img.addEventListener("click", () => {
if (modal && modalImg) {
modal.style.display = "flex";
document.body.style.overflow = "hidden";
modalImg.src = img.src;
}
});
});
const span = document.getElementsByClassName("close")[0];
span?.addEventListener("click", () => {
if (modal) {
modal.style.display = "none";
document.body.style.overflow = "auto";
}
});
</script>