kazoottt-blog-v2/src/components/ArticleContainer.astro

---
import { Icon } from "astro-icon/components";
import { cn } from "@/utils/tailwind";

export interface Props {
	className?: string;
	dataPagefindBody?: boolean;
}
const { className = "", dataPagefindBody = true } = Astro.props;
---

<article
	class={cn("mx-auto max-w-3xl overflow-x-hidden px-4", className)}
	data-pagefind-body={dataPagefindBody}
>
	<slot />

	<div id="myModal" class="modal">
		<span class="close">
			<Icon aria-hidden="true" class="h-6 w-6" focusable="false" name="mdi:close" />
		</span>
		<img class="modal-content" id="img01" />
		<div id="caption"></div>
	</div>
</article>

<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>