性能、逻辑、结构优化 ✅

2025-04-02 19:14:32 +08:00
parent 7dab27d0a3
commit f333964d10
50 changed files with 1674 additions and 1259 deletions
@@ -1,19 +0,0 @@
---
-// 公共 Layout
-import Layout from "@/layouts/Layout/Layout.astro";
-// Aside组件
-import Aside from "@/components/Aside/Aside.astro";
-// 文章页面样式
-import "@/styles/Article.less";
---
-
-<Layout title="404 Not Found" keywords={[404]} description="404 Not Found">
-	<section class="vh-container">
-		<article class="vh-article-main vh-animation vh-animation-init">
-			<header>
-				<h1 class="error-title">404 Not Found</h1>
-			</header>
-		</article>
-		<Aside />
-	</section>
-</Layout>
@@ -0,0 +1,10 @@
+---
+title: "404 Not Found"
+h1: "404 Not Found"
+layout: "@/layouts/PageLayout/PageLayout.astro"
+comment: false
+---
+
+:::note{type="error"}
+你来到了一个不存在的页面。
+:::
@@ -26,21 +26,18 @@ const { Description } = SITE_CONFIG;
 import ArticleCard from "@/components/ArticleCard/ArticleCard.astro";
 // 公共 Layout
 import Layout from "@/layouts/Layout/Layout.astro";
-// Aside组件
-import Aside from "@/components/Aside/Aside.astro";
 // 分页组件
 import Pagination from "@/components/Pagination/Pagination.astro";
 const currentPage = page_data.url.current.replace("/", "");
 ---

 <Layout title={currentPage ? `第${currentPage}页文章` : ""} description={Description}>
-	<section class="vh-container">
-		<section class="article-list vh-animation vh-animation-init">
+	<section class="article-list-main">
+		<section class="article-list">
 			<!-- 文章列表 -->
 			{data.map((post, index) => <ArticleCard post={post} index={index} />)}
 			<!-- 分页 -->
-			<Pagination data={page_data.url} />
 		</section>
-		<Aside />
+		<Pagination data={page_data.url} />
 	</section>
 </Layout>
@@ -3,23 +3,42 @@ title: "关于"
 h1: "关于我"
 desc: "Hi there, I’m Han 👋"
 layout: "@/layouts/PageLayout/PageLayout.astro"
+type: "about"
 ---

 :::note{type="success"}
-我是一名热爱前端开发并拥有丰富经验的工程师，喜欢探索新技术并应用于实际项目中。
+我是韩小韩，一位对技术充满热情、涉猎广泛的探索者，同时也是一名热衷于探索前沿技术的实践者。

-我始终保持对新技术的热情，并将我的知识与经验分享在我的博客中。我期待在这里与你分享我的见解、经验和最新的技术动态。
+我始终保持对新技术的热情，并将我的知识与经验分享在我的博客中。
+
+我的技术兴趣广泛，涵盖前端工程、云计算、自托管服务、AI 应用以及网络架构优化。我始终相信，优秀的技术人不仅要有深度，更要有广度，因此我不断学习新知识，并将其转化为实际解决方案。
+
+我期待在这里与你分享我的见解、经验和最新的技术动态。
 :::

-## Hi there, I'm Han 👋

-<div class="enfj-dom">
-  <div class="text">
-    <em>主人公</em>
-    <span>ENFJ-A</span>
-    <a class="more-enfj" href="https://www.16personalities.com/ch/enfj-%E4%BA%BA%E6%A0%BC">在 16personalities 了解更多关于 主人公</a>
-  </div>
-</div>
+**在 Web 开发方面**，我深耕 Vue.js 生态，并且关注了现代 CSS 框架如 Tailwind CSS。同时，对前端构建工具如 Webpack、Rollup 和 Vite 以及代码质量和规范工具如 ESLint 进行了研究，我还关注了前端性能优化，例如代码分割、资源加载策略以及 Astro、Hexo 等现代网站构建工具的使用。
+
+**在后端开发和云计算领域**，我对 Node.js 生态系统非常熟悉，并积极探索 Serverless 架构。我长期使用 Cloudflare Workers、Vercel 和腾讯云 EdgeOne 等平台，优化边缘计算、KV 存储和全球 CDN 加速方案，确保应用的高可用性和低延迟。
+
+**在自托管（Homelab）和个人服务器管理方面**，我对个人服务器运维充满热情，搭建了基于 Jellyfin 的媒体中心、Home Assistant 智能家居系统，并利用 OpenWrt 优化家庭网络。在 Linux 系统管理、Docker 容器化部署和自动化脚本方面积累了丰富经验。
+
+**在人工智能与大型语言模型（LLMs）领域**，我密切关注 AI 领域的发展，尤其是 DeepSeek、Gemini 和 Claude 等大模型的应用。我尝试将 AI 能力整合到开发流程中，例如自动化文档生成、代码优化辅助，并且对 AI SDK 和相关工具保持关注。
+
+**在网络与 DevOps 方面**，我熟悉 DNS 解析、CDN 加速、SSL 证书管理，并研究 TCP/IP、HTTP/3 等协议优化。我实践 Git 工作流、CI/CD 自动化（GitHub Actions / Cloudflare Pages），并利用 Docker 实现开发环境标准化。
+
+**🚀 技术理念**
+
+- **持续学习：** 技术日新月异，我始终保持开放心态，学习新框架、新工具，并评估其适用性。
+- **实践驱动：** 无论是个人项目还是开源贡献，我都倾向于动手实践，而非仅停留在理论层面。
+- **效率优先：** 我注重自动化与工具链优化，减少重复劳动，提升开发体验。
+
+**🎯 未来方向**
+未来，我计划进一步探索：
+
+- **边缘计算与全球化部署**，优化分布式应用的性能。
+- **AI 增强开发**，探索 LLM 在代码生成、调试和文档管理中的应用。
+- **智能家居与自动化**，结合 Home Assistant 打造更高效的家庭 lab。

 ## Languages and Tools

@@ -45,12 +64,12 @@ layout: "@/layouts/PageLayout/PageLayout.astro"

 ## 小站点

-|     主&emsp;页      | <https://www.4ce.cn> |
-| :-----------------: | :-----------------: |
-|   **博&emsp;客** | **<https://www.vvhan.com>** |
-|  **Web&emsp;API** | **<https://api.vvhan.com>** |
-|  **Han Analytics** | **<https://analytics.vvhan.com>** |
-| **Cloudflare 优选** | **<https://cf.vvhan.com>** |
+|     主&emsp;页      |       <https://www.4ce.cn>        |
+| :-----------------: | :-------------------------------: |
+|   **博&emsp;客**    |    **<https://www.vvhan.com>**    |
+|  **Web&emsp;API**   |    **<https://api.vvhan.com>**    |
+|  **Han Analytics**  | **<https://analytics.vvhan.com>** |
+| **Cloudflare 优选** |    **<https://cf.vvhan.com>**     |

 ## 联系我

@@ -13,7 +13,7 @@ import Aside from "@/components/Aside/Aside.astro";
 import Archive from "@/components/Archive/Archive.astro";
 ---

-<Layout title="归档" description={Description}>
+<Layout title="归档" description={Description} activeNav="archives">
 	<section class="vh-container">
 		<Archive articleList={articleList} />
 		<Aside />
@@ -22,8 +22,6 @@ const { Content, remarkPluginFrontmatter } = await render(post);
 const { reading_time, article_word_count } = remarkPluginFrontmatter;
 // 公共 Layout
 import Layout from "@/layouts/Layout/Layout.astro";
-// Aside组件
-import Aside from "@/components/Aside/Aside.astro";
 // Copyright 组件
 import Copyright from "@/components/Copyright/Copyright.astro";
 // Reward 组件
@@ -40,39 +38,47 @@ import "@/styles/ArticleBase.less";
 ---

 <Layout title={post.data.title} keywords={post.data.tags} description={description} pagecover={ARTICLE_COVER}>
-	<section class="vh-container">
-		<article class="vh-article-main vh-animation vh-animation-init">
-			<header>
-				<h1>{post.data.title}</h1>
-				<div class="article-meta">
-					<span class="article-meta-item">
-						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 12h3.5"></path><path d="M12 7v5"></path></svg>
-						<time>{fmtTime(post.data.date, "YYYY-MM-DD A")}</time>
-						<span class="count"><strong>{article_word_count || "一点"}</strong>字</span>
-						<span class="time"><strong>{parseFloat((Number(reading_time) || 0).toFixed(1).replace(/\.0+$/, ""))}</strong>分钟</span>
-					</span>
-					<a class="article-meta-item" href={`/categories/${post.data.categories}`}>
-						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M4 6h16"></path><path d="M7 12h13"></path><path d="M10 18h10"></path></svg>
-						<span>{post.data.categories}</span>
-					</a>
-				</div>
-			</header>
-			<main>
-				<Content />
-				<nav class="tag-list">
-					{post.data.tags.map((i: any) => <a href={`/tag/${i}`}>{i}</a>)}
-				</nav>
-			</main>
-			<footer>
-				<!-- 打赏组件 -->
-				<Reward />
-				<!-- 版权©️信息 -->
-				<Copyright site={Site} id={post.data.id} title={post.data.title} sitename={Title} time={fmtTime(post.data.date, "YYYY-MM-DD A")} auther={Author} />
-				<!-- 底部谷歌广告 -->
-				{GoogleAds.ad_Client && GoogleAds.articleAD_Slot && <GoogleAd className="vh-article-ad" slotID={GoogleAds.articleAD_Slot} />}
-			</footer>
-			{checkComment() && <Comment />}
-		</article>
-		<Aside />
-	</section>
+	<article class="vh-article-main vh-animation vh-animation-init">
+		<header>
+			<h1>{post.data.title}</h1>
+			<div class="article-meta">
+				<span class="article-meta-item">
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path><path d="M12 12h3.5"></path><path d="M12 7v5"></path></svg>
+					<time>{fmtTime(post.data.date, "YYYY-MM-DD A")}</time>
+					<span class="count"><strong>{article_word_count || "一点"}</strong>字</span>
+					<span class="time"><strong>{parseFloat((Number(reading_time) || 0).toFixed(1).replace(/\.0+$/, ""))}</strong>分钟</span>
+				</span>
+				<a class="article-meta-item" href={`/categories/${post.data.categories}`}>
+					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M4 6h16"></path><path d="M7 12h13"></path><path d="M10 18h10"></path></svg>
+					<span>{post.data.categories}</span>
+				</a>
+			</div>
+		</header>
+		<main>
+			<Content />
+			<nav class="tag-list">
+				{
+					post.data.tags.map((i: any) => (
+						<a href={`/tag/${i}`}>
+							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+								<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+								<path d="M7.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+								<path d="M3 6v5.172a2 2 0 0 0 .586 1.414l7.71 7.71a2.41 2.41 0 0 0 3.408 0l5.592 -5.592a2.41 2.41 0 0 0 0 -3.408l-7.71 -7.71a2 2 0 0 0 -1.414 -.586h-5.172a3 3 0 0 0 -3 3z" />
+							</svg>
+							{i}
+						</a>
+					))
+				}
+			</nav>
+		</main>
+		<footer>
+			<!-- 打赏组件 -->
+			<Reward />
+			<!-- 版权©️信息 -->
+			<Copyright site={Site} id={post.data.id} title={post.data.title} sitename={Title} time={fmtTime(post.data.date, "YYYY-MM-DD A")} auther={Author} />
+			<!-- 底部谷歌广告 -->
+			{GoogleAds.ad_Client && GoogleAds.articleAD_Slot && <GoogleAd className="vh-article-ad" slotID={GoogleAds.articleAD_Slot} />}
+		</footer>
+		{checkComment() && <Comment />}
+	</article>
 </Layout>
@@ -13,15 +13,10 @@ import SITE_CONFIG from "@/config";
 const { Description } = SITE_CONFIG;
 // 公共 Layout
 import Layout from "@/layouts/Layout/Layout.astro";
-// Aside组件
-import Aside from "@/components/Aside/Aside.astro";
 // 文章列表组件
 import Archive from "@/components/Archive/Archive.astro";
 ---

-<Layout title={`分类 ${categories} 下的文章`} description={Description}>
-	<section class="vh-container">
-		<Archive articleList={articleList} />
-		<Aside />
-	</section>
+<Layout title={`分类 ${categories} 下的文章`} description={Description} activeNav="categories">
+	<Archive articleList={articleList} />
 </Layout>
@@ -22,8 +22,5 @@ import Archive from "@/components/Archive/Archive.astro";
 ---

 <Layout title={`标签 ${tags} 下的文章`} description={Description}>
-	<section class="vh-container">
-		<Archive articleList={articleList} />
-		<Aside />
-	</section>
+	<Archive articleList={articleList} />
 </Layout>