正式版1.0✅

2025-03-02 18:38:46 +08:00
parent 60f5296dcb
commit e7117f0903
52 changed files with 794 additions and 513 deletions
@@ -5,7 +5,7 @@ const { articleList } = Astro.props;
 import "../styles/Archive.less";
 ---

-<section class="vh-animation vh-archive-main">
+<section class="vh-archive-main vh-animation vh-animation-init">
 	<div class="archive-list">
 		{
 			articleList.map((i: any) => (
@@ -13,7 +13,7 @@ import "../styles/Archive.less";
 					<p class="title">
 						<em>{i.name}</em>
 						<i />
-						<span>{i.data.length} total</span>
+						<span>{i.data.length}篇文章</span>
 					</p>
 					{i.data.map((_: any) => (
 						<a href={`/article/${_.id}`}>
@@ -11,7 +11,7 @@ const ARTICLE_COVER: string = await getCover(post.data.cover);
 import "../styles/components/ArticleCard.less";
 ---

-<article class="vh-article-item vh-animation" style={`animation-delay:calc(var(--vh-animation-delay) + ${index * 50}ms)`}>
+<article class="vh-article-item vh-animation vh-animation-init">
 	<a class="vh-article-link" href={`/article/${post.data.id}`}>
 		<section class="vh-article-banner"><Image src="/assets/images/lazy-loading.webp" data-vh-lz-src={ARTICLE_COVER} alt={post.data.title} width="10" height="10" /></section>
 		<section class="vh-article-desc">
@@ -1,8 +1,11 @@
 ---
+// 静态图片
+import { Image } from "astro:assets";
+// 时间处理
+import { fmtTime } from "../utils/index";
 // 获取用户配置数据
 import SITE_CONFIG from "../config";
-import { fmtTime } from "../utils/index";
-const { Avatar, Author, Motto, WebSites } = SITE_CONFIG;
+const { Avatar, Author, Motto, WebSites, GoogleAds } = SITE_CONFIG;
 // 获取文章数据
 import { getCategories, getTags, getRecommendArticles } from "../utils/getPostInfo";
 // 分类列表
@@ -11,8 +14,8 @@ const categories = getCategories();
 const tags = getTags();
 // 最新文章
 const recommendArticles = getRecommendArticles();
-// 静态图片
-import { Image } from "astro:assets";
+// Google 广告组件
+import GoogleAd from "../components/GoogleAd.astro";
 // 侧边栏样式
 import "../styles/components/Aside.less";
 ---
@@ -20,10 +23,7 @@ import "../styles/components/Aside.less";
 <aside class="vh-aside">
 	<!-- 头像块 -->
 	<section class="vh-aside-item user">
-		<div onclick="window.history.back()" class="vh-aside-avatar">
-			<Image class="vh-aside-avatar" src={Avatar} alt={Author} width="1" height="1" />
-			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path d="M512 256A256 256 0 1 0 0 256a256 256 0 1 0 512 0zM116.7 244.7l112-112c4.6-4.6 11.5-5.9 17.4-3.5s9.9 8.3 9.9 14.8l0 64 96 0c17.7 0 32 14.3 32 32l0 32c0 17.7-14.3 32-32 32l-96 0 0 64c0 6.5-3.9 12.3-9.9 14.8s-12.9 1.1-17.4-3.5l-112-112c-6.2-6.2-6.2-16.4 0-22.6z"></path></svg>
-		</div>
+		<Image class="vh-aside-avatar" src="/assets/images/lazy-loading.webp" data-vh-lz-src={Avatar} alt={Author} width="1" height="1" />
 		<span class="vh-aside-auther">{Author}</span>
 		<p class="vh-aside-motto">{Motto}</p>
 		<section class="vh-aside-links">
@@ -60,7 +60,7 @@ import "../styles/components/Aside.less";
 		<div class="vh-aside-tags">
 			{
 				tags.map(i => (
-					<a href={`/tags/${i}`}>
+					<a href={`/tag/${i}`}>
 						<span>{i}</span>
 					</a>
 				))
@@ -68,23 +68,37 @@ import "../styles/components/Aside.less";
 		</div>
 	</section>

-	<!-- 最新文章块 -->
-	<section class="vh-aside-item articles">
-		<h3>推荐文章</h3>
-		<div class="vh-aside-articles">
-			{
-				recommendArticles.map(async i => (
-					<a href={`/article/${(await i).id}`}>
-						<p class="cover">
-							<Image src={(await i).cover} alt={(await i).title} width="1" height="1" />
-						</p>
-						<p class="info">
-							<span>{(await i).title}</span>
-							<time>{fmtTime((await i).date, "YYYY-MM-DD A")}</time>
-						</p>
-					</a>
-				))
-			}
-		</div>
+	<section class="sticky-aside">
+		<!-- 最新文章块 -->
+		{
+			recommendArticles.length && (
+				<section class="vh-aside-item articles">
+					<h3>推荐文章</h3>
+					<div class="vh-aside-articles">
+						{recommendArticles.map(async i => (
+							<a href={`/article/${(await i).id}`}>
+								<p class="cover">
+									<Image src="/assets/images/lazy-loading.webp" data-vh-lz-src={(await i).cover} alt={(await i).title} width="1" height="1" />
+								</p>
+								<p class="info">
+									<span>{(await i).title}</span>
+									<time>{fmtTime((await i).date, "YYYY-MM-DD A")}</time>
+								</p>
+							</a>
+						))}
+					</div>
+				</section>
+			)
+		}
+
+		<!-- 谷歌广告块 -->
+		{
+			GoogleAds.ad_Client && GoogleAds.asideAD_Slot && (
+				<section class="vh-aside-item ad">
+					<h3>广而告之</h3>
+					<GoogleAd className="vh-aside-ad" slotID={GoogleAds.asideAD_Slot} />
+				</section>
+			)
+		}
 	</section>
 </aside>
@@ -14,10 +14,4 @@ import "../styles/components/BackTop.less";
 		<circle stroke="url(#Gradient)" cx="12" cy="12" r="10" fill="none" stroke-width="2" stroke-linecap="round" transform="rotate(-90, 12, 12)"></circle>
 	</svg>
 	<svg class="icon" viewBox="0 0 24 24"><path fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 15l6-6l6 6"></path></svg>
-</section>
-<script>
-	import updateRouter from "../utils/updateRouter";
-	import BackTopInitFn from "../scripts/BackTop";
-	// 初始化BackTop组件
-	updateRouter("afterMount", BackTopInitFn);
-</script>
+</section>
@@ -3,16 +3,3 @@ import "../styles/components/Comment.less";
 ---

 <section class="vh-comment"><section></section></section>
-<script>
-	import updateRouter from "../utils/updateRouter";
-	import { LoadScript } from "../utils/index";
-	import SITE_INFO from "../config";
-	declare const twikoo: any;
-	// 初始化评论插件
-	SITE_INFO.Twikoo.envId &&
-		updateRouter("afterMount", async () => {
-			if (!document.querySelector(".vh-comment>section")) return;
-			await LoadScript("https://registry.npmmirror.com/twikoo/1.6.41/files/dist/twikoo.all.min.js");
-			twikoo.init({ envId: SITE_INFO.Twikoo.envId, el: ".vh-comment>section" });
-		});
-</script>
@@ -11,15 +11,3 @@ import "../styles/Footer.less";
 		<p><a href="https://astro.build/" target="_blank" rel="noopener noreferrer"><Image width="1" height="1" alt="Astro" src="/assets/images/footer/astro.svg" /></a><a href="https://github.com/uxiaohan/vhAstro-Theme" target="_blank" rel="noopener noreferrer"><Image width="1" height="1" alt="vhAstro-Theme" src="/assets/images/footer/theme.svg" /></a><a href="/sitemap-index.xml" target="_blank"><Image width="1" height="1" alt="sitemap" src="/assets/images/footer/sitemap.svg" /></a><a href="/rss.xml" target="_blank"><Image width="1" height="1" alt="rss" src="/assets/images/footer/rss.svg" /></a><a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer"><Image width="1" height="1" alt="icp" src="/assets/images/footer/icp.svg" /></a></p>
 	</main>
 </footer>
-<script>
-	import updateRouter from "../utils/updateRouter";
-	// 格式化时间
-	import { fmtDate } from "../utils/index";
-	// 页面内容的元数据
-	import SITE_CONFIG from "../config";
-	const { CreateTime } = SITE_CONFIG;
-	// 初始化 网站运行时间
-	updateRouter("afterMount", () => {
-		document.querySelector("em.web_time")!.textContent = fmtDate(CreateTime);
-	});
-</script>
@@ -0,0 +1,5 @@
+---
+const { slotID, className } = Astro.props;
+---
+
+<div class={`vh-ad ${className}`} set:html={slotID} />
@@ -1,6 +1,4 @@
 ---
-// 导航高亮
-const { activeNav } = Astro.props;
 import SITE_CONFIG from "../config";
 const { Navs } = SITE_CONFIG;
 // 原生图片
@@ -17,10 +15,10 @@ import "../styles/components/Header.less";
 			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"> <path d="M543.8 287.6c17 0 32-14 32-32.1c1-9-3-17-11-24L309.5 7c-6-5-14-7-21-7s-15 1-22 8L10 231.5c-7 7-10 15-10 24c0 18 14 32.1 32 32.1l32 0 0 160.4c0 35.3 28.7 64 64 64l102.3 0-31.3-52.2c-4.1-6.8-2.6-15.5 3.5-20.5L288 368l-60.2-82.8c-10.9-15 8.2-33.5 22.8-22l117.9 92.6c8 6.3 8.2 18.4 .4 24.9L288 448l38.4 64 122.1 0c35.5 0 64.2-28.8 64-64.3l-.7-160.2 32 0z"></path></svg>
 			Home
 		</a>
-		<div class="link-list">
+		<div class="link-list vh-link-list">
 			{
 				Navs.map(i => (
-					<a class={i.link.includes(activeNav) ? "active" : ""} href={i.link} target={i.target ? "_blank" : "_self"}>
+					<a class={i.link.replace("/", "")} href={i.link} target={i.target ? "_blank" : "_self"}>
 						{i.text}
 						<Image src={i.icon} alt={i.text} width="10" height="10" />
 					</a>
@@ -1,6 +1,4 @@
 ---
-// 导航高亮
-const { activeNav } = Astro.props;
 import SITE_CONFIG from "../config";
 const { Navs, Title } = SITE_CONFIG;
 // 侧边栏 MobileSidebar 样式
@@ -13,10 +11,10 @@ import "../styles/components/MobileSidebar.less";
 			<h3>{Title}</h3>
 		</div>

-		<div class="vh-mobilesidebar-list">
+		<div class="vh-mobilesidebar-list vh-link-list">
 			{
 				Navs.map(i => (
-					<a class={i.link.includes(activeNav) ? "active" : ""} href={i.link} target={i.target ? "_blank" : "_self"}>
+					<a class={i.link.replace("/", "")} href={i.link} target={i.target ? "_blank" : "_self"}>
 						<object data={i.icon} type="image/svg+xml" />
 						{i.text}
 					</a>
@@ -25,18 +23,3 @@ import "../styles/components/MobileSidebar.less";
 		</div>
 	</section>
 </nav>
-
-<script>
-	import updateRouter from "../utils/updateRouter";
-	// 初始化搜索框
-	const vhSearchInit = () => {
-		const menuDOM: any = document.querySelector(".vh-header>.main>.nav-btn>span.menu-btn");
-		const mobileSidebarDOM: any = document.querySelector("body>.vh-mobilesidebar");
-		const addActive = () => setTimeout(() => mobileSidebarDOM.classList.add("active"));
-		const removeActive = () => setTimeout(() => mobileSidebarDOM.classList.remove("active"));
-		menuDOM.addEventListener("click", addActive);
-		mobileSidebarDOM.addEventListener("click", removeActive);
-	};
-	// 初始化
-	updateRouter("afterMount", vhSearchInit);
-</script>
@@ -11,25 +11,4 @@ import "../styles/components/Search.less";
 		</div>
 		<section class="vh-search-list"></section>
 	</main>
-</section>
-
-<script>
-	import updateRouter from "../utils/updateRouter";
-	import { searchInputChange } from "../scripts/Search";
-	// 初始化搜索框
-	const vhSearchInit = () => {
-		const searchDOM: any = document.querySelector(".vh-header>.main>.nav-btn>span.search-btn");
-		const searchMainDOM: any = document.querySelector(".vh-header>.main>.vh-search>main");
-		const searchListDOM: any = document.querySelector(".vh-header>.main>.vh-search");
-		const addActive = () => setTimeout(() => searchListDOM.classList.add("active"));
-		const removeActive = () => setTimeout(() => searchListDOM.classList.remove("active"));
-		// 禁止默认事件
-		searchMainDOM.addEventListener("click", (e: Event) => e.stopPropagation());
-		searchDOM.addEventListener("click", addActive);
-		searchListDOM.addEventListener("click", removeActive);
-		// 搜索框初内容变化
-		searchListDOM.querySelector(".search-input>input").addEventListener("input", searchInputChange);
-	};
-	// 初始化
-	updateRouter("afterMount", vhSearchInit);
-</script>
+</section>