优化性能、逻辑、冗余代码【2.0 版本】✅

astro.config.mjs

@@ -1,8 +1,10 @@
-// @ts-check
+import path from "path";
 import mdx from '@astrojs/mdx';
 import sitemap from '@astrojs/sitemap';
-import { defineConfig } from 'astro/config';
 import Compress from "@playform/compress";
+import { defineConfig } from 'astro/config';
+import { fileURLToPath } from 'url';
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 // Markdown 配置================
 import remarkMath from "remark-math";
 import rehypeSlug from "rehype-slug";
@@ -16,47 +18,31 @@ import swup from '@swup/astro';
 export default defineConfig({
 	site: SITE_INFO.Site,
 	build: { assets: 'vh_static' },
-	integrations: [
+	integrations: [swup({
-		swup({
+		theme: false,
-			theme: false,
+		animationClass: "vh-animation-",
-			animationClass: "vh-animation-",
+		containers: [".vh-animation"],
-			containers: [".vh-animation"],
+		smoothScrolling: true,
-			smoothScrolling: true,
+		progress: true,
-			progress: true,
+		cache: true,
-			cache: true,
+		preload: true,
-			preload: true,
+		accessibility: true,
-			accessibility: true,
+		updateHead: true,
-			updateHead: true,
+		updateBodyClass: false,
-			updateBodyClass: false,
+		globalInstance: true
-			globalInstance: true
+	}),
-		}),
+	Compress({ CSS: false, Image: false, Action: { Passed: async () => true } }),
-		Compress({
+	sitemap({
-			CSS: false,
+		changefreq: 'weekly', priority: 0.7, lastmod: new Date(),
-			Image: false,
+		// 处理末尾带 / 的 url
-			Action: { Passed: async () => true },
+		serialize: (item) => ({ ...item, url: item.url.endsWith('/') ? item.url.slice(0, -1) : item.url })
-		}),
+	}), mdx({ extendMarkdownConfig: false })],
-		sitemap({
-			changefreq: 'weekly',
-			priority: 0.7,
-			lastmod: new Date(),
-			// 处理末尾带 / 的 url
-			serialize: (item) => ({ ...item, url: item.url.endsWith('/') ? item.url.slice(0, -1) : item.url })
-		}),
-		mdx({ extendMarkdownConfig: false })
-	],
 	markdown: {
-		remarkPlugins: [
+		remarkPlugins: [remarkMath, remarkDirective, remarkNote,],
-			remarkMath,
+		rehypePlugins: [rehypeKatex, rehypeSlug, addClassNames],
-			remarkDirective,
-			remarkNote,
-		],
-		rehypePlugins: [
-			rehypeKatex,
-			rehypeSlug,
-			addClassNames
-		],
 		syntaxHighlight: 'shiki',
 		shikiConfig: { theme: 'github-light' },
 	},
+	vite: { resolve: { alias: { "@": path.resolve(__dirname, "./src"), "@public": path.resolve(__dirname, "./public") } } },
 	server: { host: '0.0.0.0' }
-});
+});

package.json

@@ -10,12 +10,12 @@
     "newpost": "node ./script/newpost.js"
   },
   "dependencies": {
-    "@astrojs/mdx": "^4.1.1",
+    "@astrojs/mdx": "^4.2.1",
     "@astrojs/rss": "^4.0.11",
-    "@astrojs/sitemap": "^3.2.1",
+    "@astrojs/sitemap": "^3.3.0",
     "@swup/astro": "^1.5.0",
     "aplayer": "^1.10.1",
-    "astro": "^5.4.3",
+    "astro": "^5.5.3",
     "overlayscrollbars": "^2.11.1",
     "vanilla-lazyload": "^19.1.3",
     "vh-plugin": "^1.2.2"

src/components/Archive/Archive.astro

@@ -1,8 +1,8 @@
 ---
-import { fmtTime } from "../utils/index";
+import { fmtTime } from "@/utils/index";
 const { articleList } = Astro.props;
 // 文章页面样式
-import "../styles/Archive.less";
+import "./Archive.less";
 ---
 
 <section class="vh-archive-main vh-animation vh-animation-init">

src/components/ArticleCard/ArticleCard.astro

@@ -1,14 +1,14 @@
 ---
 import { Image } from "astro:assets";
-import { getDescription, fmtTime } from "../utils/index";
+import { getDescription, fmtTime } from "@/utils/index";
-const { post, index } = Astro.props;
+const { post } = Astro.props;
 // 获取文章的摘要
 const description = getDescription(post);
 // 获取封面图
-import getCover from "../utils/getCover";
+import getCover from "@/utils/getCover";
 const ARTICLE_COVER: string = await getCover(post.data.cover);
 // 文章Item组件样式
-import "../styles/components/ArticleCard.less";
+import "./ArticleCard.less";
 ---
 
 <article class="vh-article-item vh-animation vh-animation-init">

src/components/Aside/Aside.astro

@@ -2,12 +2,12 @@
 // 静态图片
 import { Image } from "astro:assets";
 // 时间处理
-import { fmtTime } from "../utils/index";
+import { fmtTime } from "@/utils/index";
 // 获取用户配置数据
-import SITE_CONFIG from "../config";
+import SITE_CONFIG from "@/config";
 const { Avatar, Author, Motto, WebSites, GoogleAds } = SITE_CONFIG;
 // 获取文章数据
-import { getCategories, getTags, getRecommendArticles } from "../utils/getPostInfo";
+import { getCategories, getTags, getRecommendArticles } from "@/utils/getPostInfo";
 // 分类列表
 const categories = getCategories();
 // 热门标签
@@ -15,9 +15,9 @@ const tags = getTags();
 // 最新文章
 const recommendArticles = getRecommendArticles();
 // Google 广告组件
-import GoogleAd from "../components/GoogleAd.astro";
+import GoogleAd from "@/components/GoogleAd/GoogleAd.astro";
 // 侧边栏样式
-import "../styles/components/Aside.less";
+import "./Aside.less";
 ---
 
 <aside class="vh-aside">

src/components/BackTop/BackTop.astro

@@ -1,5 +1,5 @@
 ---
-import "../styles/components/BackTop.less";
+import "./BackTop.less";
 ---
 
 <section class="vh-back-top">

src/components/Comment/Comment.astro

@@ -1,5 +1,5 @@
 ---
-import "../styles/components/Comment.less";
+import "./Comment.less";
 ---
 
 <section class="vh-comment"><section><section class="vh-space-loading"><span></span><span></span><span></span></section></section></section>

src/components/Copyright/Copyright.astro

@@ -1,7 +1,7 @@
 ---
 const { time, sitename, title, site, id, auther } = Astro.props;
 const articleURL = `${site}/article/${id}`;
-import "../styles/components/Copyright.less";
+import "./Copyright.less";
 ---
 
 <section class="vh-copyright">

src/components/Footer/Footer.astro

@@ -2,7 +2,7 @@
 // 静态图片
 import { Image } from "astro:assets";
 // 基础 样式
-import "../styles/Footer.less";
+import "./Footer.less";
 ---
 
 <footer class="vh-footer">

src/components/Head/Head.astro

@@ -1,5 +1,5 @@
 ---
-import SITE_CONFIG from "../config";
+import SITE_CONFIG from "@/config";
 // 当前页面的 URL 元地址
 const canonicalData = new URL(Astro.url.pathname, Astro.site);
 const canonicalURL = canonicalData.href.replace(/\/+$/, "");
@@ -13,7 +13,7 @@ const WebCover = PageCover || SiteCover;
 const WebSiteData = { "@context": "https://schema.org", "@type": "WebSite", name: WebTitle, url: canonicalURL, image: { "@type": "ImageObject", url: SiteCover } };
 const ArticleData = { "@context": "https://schema.org", "@type": "BlogPosting", mainEntityOfPage: { "@type": "WebPage", "@id": canonicalURL }, headline: WebTitle, image: [WebCover], author: { "@type": "Person", name: Author, url: Site }, publisher: { "@type": "Organization", name: SiteName, logo: { "@type": "ImageObject", url: SiteCover } } };
 // 基础 样式
-import "../styles/Base.less";
+import "@/styles/Base.less";
 ---
 
 <head>

src/components/Header/Header.astro

@@ -1,12 +1,12 @@
 ---
-import SITE_CONFIG from "../config";
+import SITE_CONFIG from "@/config";
 const { Navs } = SITE_CONFIG;
 // 原生图片
 import { Image } from "astro:assets";
 // 搜索框组件
-import Search from "./Search.astro";
+import Search from "@/components/Search/Search.astro";
 // 顶部 Header 样式
-import "../styles/components/Header.less";
+import "./Header.less";
 ---
 
 <header class="vh-header">

src/components/MobileSidebar/MobileSidebar.astro

@@ -1,8 +1,8 @@
 ---
-import SITE_CONFIG from "../config";
+import SITE_CONFIG from "@/config";
 const { Navs, Title } = SITE_CONFIG;
 // 侧边栏 MobileSidebar 样式
-import "../styles/components/MobileSidebar.less";
+import "./MobileSidebar.less";
 ---
 
 <nav class="vh-mobilesidebar">

src/components/Pagination/Pagination.astro

@@ -1,9 +1,9 @@
 ---
 const { data } = Astro.props;
 // 处理页码
-import { fmtPage } from "../utils/index";
+import { fmtPage } from "@/utils/index";
 // 翻页组件样式
-import "../styles/components/Pagination.less";
+import "./Pagination.less";
 ---
 
 <section class="vh-article-pagination">

src/components/Reward/Reward.astro

@@ -0,0 +1,9 @@
+---
+import SITE_INFO from "@/config";
+import "./Reward.less";
+---
+
+<section class="vh-reward">
+	<p>喜欢这篇文章嘛，觉得文章不错的话，奖励奖励我！</p>
+	<div class="reward-list"><span class="alipay"><i style={`background-image: url(${SITE_INFO.Reward.AliPay})`}></i>支付宝</span><span class="wechat"><i style={`background-image: url(${SITE_INFO.Reward.WeChat})`}></i>微信</span></div>
+</section>

src/components/Reward/Reward.less

@@ -0,0 +1,83 @@
+.vh-reward {
+  margin-top: 1rem;
+  box-sizing: border-box;
+  padding: 1.88rem 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.88rem;
+  width: 100%;
+  height: max-content;
+  background-color: #fff;
+  box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
+
+  &>p {
+    padding: 0 !important;
+    width: 100%;
+    font-size: 0.75rem !important;
+    color: #7a7a7a;
+    text-align: center;
+  }
+
+  &>.reward-list {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1.18rem;
+    width: 100%;
+
+    &>span {
+      position: relative;
+      box-sizing: border-box;
+      padding: 0 0.5rem;
+      padding-left: 1.88rem;
+      display: flex;
+      align-items: center;
+      width: max-content;
+      height: 2rem;
+      border-radius: 0.28rem;
+      color: #fff;
+      cursor: pointer;
+      transition: opacity 0.16s, transform 0.16s;
+      user-select: none;
+
+      &>i {
+        opacity: 0;
+        pointer-events: none;
+        position: absolute;
+        left: 50%;
+        bottom: 100%;
+        transform: translate(-50%, 0);
+        width: 258px;
+        max-width: calc(100vw - 1rem);
+        border-radius: 0.588rem;
+        aspect-ratio: 6/8;
+        background-size: cover;
+        z-index: 1;
+        overflow: hidden;
+        box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
+        transition: opacity 0.16s, transform 0.16s;
+      }
+
+      &:hover {
+        transform: translateY(-0.12rem);
+
+        &>i {
+          opacity: 1;
+          transform: translate(-50%, -1rem);
+        }
+      }
+
+      &.alipay {
+        background: #00a0e8 url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M377.7%2032H70.3C31.4%2032%200%2063.4%200%20102.3v307.5C0%20448.6%2031.4%20480%2070.3%20480h307.5c38.5%200%2069.8-31.1%2070.3-69.6-46-25.6-110.6-60.3-171.6-88.4-32.1%2044-84.1%2081-148.6%2081-70.6%200-93.7-45.3-97-76.4-4-39%2014.9-81.5%2099.5-81.5%2035.4%200%2079.4%2010.3%20127.1%2025%2016.5-30.1%2026.5-60.3%2026.5-60.3h-178.2v-16.7h92.1v-31.2H88.3v-19h109.4V92.3h50.9v50.4h109.4v19H248.6v31.2h88.8s-15.2%2046.6-38.4%2090.9c48.9%2016.7%20100%2036%20148.6%2052.7V102.3C447.8%2063.6%20416.4%2032%20377.7%2032zM47.3%20323c1%2020.2%2010.3%2053.7%2069.9%2053.7%2052.1%200%2092.6-39.7%20117.9-72.9-44.6-18.7-84.5-31.4-109.4-31.4-67.5%200-79.4%2033.1-78.4%2050.6z%22%2F%3E%3C%2Fsvg%3E') no-repeat;
+        background-size: 0.88rem auto;
+        background-position: 0.56rem center;
+      }
+
+      &.wechat {
+        background: #1aad19 url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20576%20512%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M385.2%20167.6c6.4%200%2012.6%20.3%2018.8%201.1C387.4%2090.3%20303.3%2032%20207.7%2032%20100.5%2032%2013%20104.8%2013%20197.4c0%2053.4%2029.3%2097.5%2077.9%20131.6l-19.3%2058.6%2068-34.1c24.4%204.8%2043.8%209.7%2068.2%209.7%206.2%200%2012.1-.3%2018.3-.8-4-12.9-6.2-26.6-6.2-40.8-.1-84.9%2072.9-154%20165.3-154zm-104.5-52.9c14.5%200%2024.2%209.7%2024.2%2024.4%200%2014.5-9.7%2024.2-24.2%2024.2-14.8%200-29.3-9.7-29.3-24.2%20.1-14.7%2014.6-24.4%2029.3-24.4zm-136.4%2048.6c-14.5%200-29.3-9.7-29.3-24.2%200-14.8%2014.8-24.4%2029.3-24.4%2014.8%200%2024.4%209.7%2024.4%2024.4%200%2014.6-9.6%2024.2-24.4%2024.2zM563%20319.4c0-77.9-77.9-141.3-165.4-141.3-92.7%200-165.4%2063.4-165.4%20141.3S305%20460.7%20397.6%20460.7c19.3%200%2038.9-5.1%2058.6-9.9l53.4%2029.3-14.8-48.6C534%20402.1%20563%20363.2%20563%20319.4zm-219.1-24.5c-9.7%200-19.3-9.7-19.3-19.6%200-9.7%209.7-19.3%2019.3-19.3%2014.8%200%2024.4%209.7%2024.4%2019.3%200%2010-9.7%2019.6-24.4%2019.6zm107.1%200c-9.7%200-19.3-9.7-19.3-19.6%200-9.7%209.7-19.3%2019.3-19.3%2014.5%200%2024.4%209.7%2024.4%2019.3%20.1%2010-9.9%2019.6-24.4%2019.6z%22%2F%3E%3C%2Fsvg%3E') no-repeat;
+        background-size: 1.08rem auto;
+        background-position: 0.56rem center;
+      }
+    }
+  }
+}

src/components/Search/Search.astro

@@ -1,6 +1,6 @@
 ---
 // 搜索样式
-import "../styles/components/Search.less";
+import "./Search.less";
 ---
 
 <section class="vh-search">

src/config.ts

@@ -38,7 +38,7 @@ export default {
     'https://npm.elemecdn.com'
   ],
   // 博客音乐组件解析接口
-  vhMusicApi: 'https://meting-dd.2333332.xyz/api',
+  vhMusicApi: 'https://music.zhheo.com/meting-api/',
   // 评论组件 Twikoo
   Twikoo: { envId: '' },
   // Han Analytics 统计（https://github.com/uxiaohan/HanAnalytics）
@@ -50,5 +50,12 @@ export default {
     asideAD_Slot: `<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-xxxxxx" data-ad-slot="xxxxxx" data-ad-format="auto" data-full-width-responsive="true"></ins>`,
     // 文章页广告(不填不开启)
     articleAD_Slot: `<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-xxxxxx" data-ad-slot="xxxxxx" data-ad-format="auto" data-full-width-responsive="true"></ins>`
+  },
+  // 文章内赞赏码
+  Reward: {
+    // 支付宝收款码
+    AliPay: '/assets/images/alipay.webp',
+    // 微信收款码
+    WeChat: '/assets/images/wechat.webp'
   }
 }

src/layouts/Layout/Layout.astro

@@ -1,21 +1,21 @@
 ---
 const { title, keywords, description, pagecover } = Astro.props;
 // 网站配置
-import SITE_INFO from "../config";
+import SITE_INFO from "@/config";
-const { GoogleAds, Twikoo } = SITE_INFO;
+const { GoogleAds } = SITE_INFO;
 const { ad_Client, asideAD_Slot, articleAD_Slot } = GoogleAds;
 // Head 依赖
-import Head from "../components/Head.astro";
+import Head from "@/components/Head/Head.astro";
 // 顶部 Header
-import Header from "../components/Header.astro";
+import Header from "@/components/Header/Header.astro";
 // 底部 Footer
-import Footer from "../components/Footer.astro";
+import Footer from "@/components/Footer/Footer.astro";
 // 返回顶部
-import BackTop from "../components/BackTop.astro";
+import BackTop from "@/components/BackTop/BackTop.astro";
 // 手机端侧边栏
-import MobileSidebar from "../components/MobileSidebar.astro";
+import MobileSidebar from "@/components/MobileSidebar/MobileSidebar.astro";
 // Layout 样式
-import "../styles/Layout.less";
+import "./Layout.less";
 ---
 
 <html lang="zh-CN">
@@ -32,7 +32,7 @@ import "../styles/Layout.less";
 		<Footer />
 		<BackTop />
 		<script>
-			import InitFn from "../scripts/Init";
+			import InitFn from "@/scripts/Init";
 			// 全局初始化
 			InitFn();
 		</script>

src/layouts/PageLayout/PageLayout.astro

@@ -1,18 +1,18 @@
 ---
 const { frontmatter } = Astro.props;
 // 页面 Info
-import SITE_CONFIG from "../config";
+import SITE_CONFIG from "@/config";
 const { Description, Twikoo, Title } = SITE_CONFIG;
 // Aside组件
-import Aside from "../components/Aside.astro";
+import Aside from "@/components/Aside/Aside.astro";
 // 公共 Layout
-import Layout from "../layouts/Layout.astro";
+import Layout from "@/layouts/Layout/Layout.astro";
 // 评论组件
-import Comment from "../components/Comment.astro";
+import Comment from "@/components/Comment/Comment.astro";
-// 动态说说样式
+// 关于样式
-import "../styles/About.less";
+import "@/styles/About.less";
 // 文章内容基础样式
-import "../styles/ArticleBase.less";
+import "@/styles/ArticleBase.less";
 ---
 
 <Layout title={frontmatter.title || Title} description={Description}>

src/layouts/ToolLayout/ToolLayout.astro

@@ -1,18 +1,18 @@
 ---
 const { frontmatter } = Astro.props;
 // 页面 Info
-import SITE_CONFIG from "../config";
+import SITE_CONFIG from "@/config";
 const { Description, Twikoo, Title } = SITE_CONFIG;
 // Aside组件
-import Aside from "../components/Aside.astro";
+import Aside from "@/components/Aside/Aside.astro";
 // 公共 Layout
-import Layout from "../layouts/Layout.astro";
+import Layout from "@/layouts/Layout/Layout.astro";
 // 评论组件
-import Comment from "../components/Comment.astro";
+import Comment from "@/components/Comment/Comment.astro";
 // ToolLayout 布局样式
-import "../styles/ToolLayout.less";
+import "./ToolLayout.less";
 // 文章内容基础样式
-import "../styles/ArticleBase.less";
+import "@/styles/ArticleBase.less";
 ---
 
 <Layout title={frontmatter.title || Title} description={Description}>

src/pages/404.astro

@@ -1,10 +1,10 @@
 ---
 // 公共 Layout
-import Layout from "../layouts/Layout.astro";
+import Layout from "@/layouts/Layout/Layout.astro";
 // Aside组件
-import Aside from "../components/Aside.astro";
+import Aside from "@/components/Aside/Aside.astro";
 // 文章页面样式
-import "../styles/Article.less";
+import "@/styles/Article.less";
 ---
 
 <Layout title="404 Not Found" keywords={[404]} description="404 Not Found">

src/pages/[...page].astro

@@ -1,8 +1,8 @@
 ---
 import { getCollection } from "astro:content";
 import type { GetStaticPathsOptions } from "astro";
-import setSearchJson from "../utils/vhSearch";
+import setSearchJson from "@/utils/vhSearch";
-import moveTopToFirst from "../utils/moveTopToFirst";
+import moveTopToFirst from "@/utils/moveTopToFirst";
 export async function getStaticPaths(options: GetStaticPathsOptions) {
 	const { paginate } = options;
 	const posts = (await getCollection("blog")).sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
@@ -20,16 +20,16 @@ export async function getStaticPaths(options: GetStaticPathsOptions) {
 const { page } = Astro.props;
 const { data, ...page_data } = page;
 // 页面 Info
-import SITE_CONFIG from "../config";
+import SITE_CONFIG from "@/config";
 const { Description } = SITE_CONFIG;
 // 博客列表组件
-import ArticleCard from "../components/ArticleCard.astro";
+import ArticleCard from "@/components/ArticleCard/ArticleCard.astro";
 // 公共 Layout
-import Layout from "../layouts/Layout.astro";
+import Layout from "@/layouts/Layout/Layout.astro";
 // Aside组件
-import Aside from "../components/Aside.astro";
+import Aside from "@/components/Aside/Aside.astro";
 // 分页组件
-import Pagination from "../components/Pagination.astro";
+import Pagination from "@/components/Pagination/Pagination.astro";
 const currentPage = page_data.url.current.replace("/", "");
 ---
 

src/pages/about/index.md

@@ -2,11 +2,12 @@
 title: "关于"
 h1: "关于我"
 desc: "Hi there, I’m Han 👋"
-layout: "../../layouts/PageLayout.astro"
+layout: "@/layouts/PageLayout/PageLayout.astro"
 ---
 
-:::note{type="info"}
+:::note{type="success"}
 我是一名热爱前端开发并拥有丰富经验的工程师，喜欢探索新技术并应用于实际项目中。
+
 我始终保持对新技术的热情，并将我的知识与经验分享在我的博客中。我期待在这里与你分享我的见解、经验和最新的技术动态。
 :::
 

src/pages/archives/index.astro

@@ -1,16 +1,16 @@
 ---
-import { getArchiveList } from "../../utils/getArchive";
+import { getArchiveList } from "@/utils/getArchive";
 // 获取归档列表
 const articleList = await getArchiveList();
 // 页面 Info
-import SITE_CONFIG from "../../config";
+import SITE_CONFIG from "@/config";
 const { Description } = SITE_CONFIG;
 // 公共 Layout
-import Layout from "../../layouts/Layout.astro";
+import Layout from "@/layouts/Layout/Layout.astro";
 // Aside组件
-import Aside from "../../components/Aside.astro";
+import Aside from "@/components/Aside/Aside.astro";
 // 文章列表组件
-import Archive from "../../components/Archive.astro";
+import Archive from "@/components/Archive/Archive.astro";
 ---
 
 <Layout title="归档" description={Description}>

src/pages/article/[...article].astro

@@ -1,5 +1,5 @@
 ---
-import { getDescription, fmtTime } from "../../utils/index";
+import { getDescription, fmtTime } from "@/utils/index";
 import { type CollectionEntry, getCollection } from "astro:content";
 import { render } from "astro:content";
 export async function getStaticPaths() {
@@ -10,10 +10,10 @@ export async function getStaticPaths() {
 type Props = CollectionEntry<"blog">;
 const post: any = Astro.props;
 // 获取封面图
-import getCover from "../../utils/getCover";
+import getCover from "@/utils/getCover";
 const ARTICLE_COVER: string = await getCover(post.data.cover);
 // 页面 Info
-import SITE_CONFIG from "../../config";
+import SITE_CONFIG from "@/config";
 const { Site, Title, Author, Twikoo, GoogleAds } = SITE_CONFIG;
 // 处理文章内容
 const description = getDescription(post);
@@ -21,19 +21,21 @@ const { Content, remarkPluginFrontmatter } = await render(post);
 // 文章字数和阅读时间
 const { reading_time, article_word_count } = remarkPluginFrontmatter;
 // 公共 Layout
-import Layout from "../../layouts/Layout.astro";
+import Layout from "@/layouts/Layout/Layout.astro";
 // Aside组件
-import Aside from "../../components/Aside.astro";
+import Aside from "@/components/Aside/Aside.astro";
-// Footer 组件
+// Copyright 组件
-import Copyright from "../../components/Copyright.astro";
+import Copyright from "@/components/Copyright/Copyright.astro";
+// Reward 组件
+import Reward from "@/components/Reward/Reward.astro";
 // 评论组件
-import Comment from "../../components/Comment.astro";
+import Comment from "@/components/Comment/Comment.astro";
 // Google 广告组件
-import GoogleAd from "../../components/GoogleAd.astro";
+import GoogleAd from "@/components/GoogleAd/GoogleAd.astro";
 // 文章页面样式
-import "../../styles/Article.less";
+import "@/styles/Article.less";
 // 文章内容基础样式
-import "../../styles/ArticleBase.less";
+import "@/styles/ArticleBase.less";
 ---
 
 <Layout title={post.data.title} keywords={post.data.tags} description={description} pagecover={ARTICLE_COVER}>
@@ -61,9 +63,12 @@ import "../../styles/ArticleBase.less";
 				</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} />}
-				<Copyright site={Site} id={post.data.id} title={post.data.title} sitename={Title} time={fmtTime(post.data.date, "YYYY-MM-DD A")} auther={Author} />
 			</footer>
 			{Twikoo.envId && <Comment envId={Twikoo.envId} />}
 		</article>

src/pages/categories/[...categories].astro

@@ -1,5 +1,5 @@
 ---
-import { getCategoriesList } from "../../utils/getArchive";
+import { getCategoriesList } from "@/utils/getArchive";
 import { getCollection } from "astro:content";
 export async function getStaticPaths(): Promise<any> {
 	const posts = await getCollection("blog");
@@ -9,14 +9,14 @@ export async function getStaticPaths(): Promise<any> {
 const { categories } = Astro.params;
 const articleList = await getCategoriesList(categories);
 // 页面 Info
-import SITE_CONFIG from "../../config";
+import SITE_CONFIG from "@/config";
 const { Description } = SITE_CONFIG;
 // 公共 Layout
-import Layout from "../../layouts/Layout.astro";
+import Layout from "@/layouts/Layout/Layout.astro";
 // Aside组件
-import Aside from "../../components/Aside.astro";
+import Aside from "@/components/Aside/Aside.astro";
 // 文章列表组件
-import Archive from "../../components/Archive.astro";
+import Archive from "@/components/Archive/Archive.astro";
 ---
 
 <Layout title={`分类 ${categories} 下的文章`} description={Description}>

src/pages/friends/index.md

@@ -2,7 +2,7 @@
 title: "朋友的新动态"
 h1: "朋友的新动态 🎴"
 desc: "来看看我的朋友们都在干嘛."
-layout: "../../layouts/ToolLayout.astro"
+layout: "@/layouts/ToolLayout/ToolLayout.astro"
 type: "friends"
 ---
 

src/pages/links/index.md

@@ -2,7 +2,7 @@
 title: "友情链接"
 h1: "朋友圈 👭"
 desc: "天下快意之事莫若友。"
-layout: "../../layouts/ToolLayout.astro"
+layout: "@/layouts/ToolLayout/ToolLayout.astro"
 type: "links"
 ---
 

src/pages/message/index.md

@@ -2,7 +2,7 @@
 title: "留言"
 h1: "留言板 🌸"
 desc: "快友之事莫若谈。"
-layout: "../../layouts/ToolLayout.astro"
+layout: "@/layouts/ToolLayout/ToolLayout.astro"
 type: "message"
 ---
 

src/pages/rss.xml.ts

@@ -1,7 +1,7 @@
 import rss from '@astrojs/rss';
 import { getCollection } from 'astro:content';
-import { getDescription } from '../utils/index'
+import { getDescription } from '@/utils/index'
-import SITE_CONFIG from '../config';
+import SITE_CONFIG from '@/config';
 const { Title, Description } = SITE_CONFIG;
 
 

src/pages/tag/[...tags].astro

@@ -1,5 +1,5 @@
 ---
-import { getTagsList } from "../../utils/getArchive";
+import { getTagsList } from "@/utils/getArchive";
 import { getCollection } from "astro:content";
 export async function getStaticPaths(): Promise<any> {
 	const posts = await getCollection("blog");
@@ -11,14 +11,14 @@ export async function getStaticPaths(): Promise<any> {
 const { tags } = Astro.params;
 const articleList = await getTagsList(tags);
 // 页面 Info
-import SITE_CONFIG from "../../config";
+import SITE_CONFIG from "@/config";
 const { Description } = SITE_CONFIG;
 // 公共 Layout
-import Layout from "../../layouts/Layout.astro";
+import Layout from "@/layouts/Layout/Layout.astro";
 // Aside组件
-import Aside from "../../components/Aside.astro";
+import Aside from "@/components/Aside/Aside.astro";
 // 文章列表组件
-import Archive from "../../components/Archive.astro";
+import Archive from "@/components/Archive/Archive.astro";
 ---
 
 <Layout title={`标签 ${tags} 下的文章`} description={Description}>

src/pages/talking/index.md

@@ -2,7 +2,7 @@
 title: "动态"
 h1: "动态 🥫"
 desc: "记录美好生活."
-layout: "../../layouts/ToolLayout.astro"
+layout: "@/layouts/ToolLayout/ToolLayout.astro"
 type: "talking"
 ---
 

src/scripts/Comment.ts

@@ -1,8 +1,8 @@
-import SITE_INFO from "../config";
+import SITE_INFO from "@/config";
 // 图片灯箱
-import "../../public/assets/js/view-image.min.js";
+import "@public/assets/js/view-image.min.js";
 declare const ViewImage: any;
-import { LoadScript } from "../utils/index";
+import { LoadScript } from "@/utils/index";
 declare const twikoo: any;
 
 // 处理评论区数据

src/scripts/Footer.ts

@@ -1,7 +1,7 @@
 // 格式化时间
-import { fmtDate } from "../utils/index";
+import { fmtDate } from "@/utils/index";
 // 页面内容的元数据
-import SITE_CONFIG from "../config";
+import SITE_CONFIG from "@/config";
 const { CreateTime } = SITE_CONFIG;
 // 初始化 网站运行时间
 export default () => (document.querySelector("em.web_time")!.textContent = fmtDate(CreateTime))

src/scripts/Friends.ts

@@ -1,7 +1,7 @@
 
 import vh from 'vh-plugin'
-import { fmtDate } from '../utils/index'
+import { fmtDate } from '@/utils/index'
-import { $GET } from '../utils/index'
+import { $GET } from '@/utils/index'
 
 const FriendsInit = async (data: any) => {
 	const friendsDOM = document.querySelector('.vh-container>.vh-tools-main>main.friends-main')
@@ -18,6 +18,6 @@ const FriendsInit = async (data: any) => {
 }
 
 // 朋友圈 RSS 初始化
-import FRIENDS_DATA from "../page_data/Friends";
+import FRIENDS_DATA from "@/page_data/Friends";
 const { api, data } = FRIENDS_DATA;
 export default () => FriendsInit(api || data);

src/scripts/GoogleAd.ts

@@ -5,7 +5,7 @@ declare global {
     adsbygoogle: any[];
   }
 }
-import SITE_INFO from '../config'
+import SITE_INFO from '@/config'
 const { GoogleAds } = SITE_INFO
 export default () => {
   const asideAD: any = document.querySelector('.vh-aside-ad')

src/scripts/HanAnalytics.ts

@@ -1,7 +1,7 @@
 
 // Han Analytics 统计
-import SITE_INFO from "../config";
+import SITE_INFO from "@/config";
-import { LoadScript } from "../utils/index";
+import { LoadScript } from "@/utils/index";
 
 export default async () => {
   const { HanAnalytics } = SITE_INFO;

src/scripts/Init.ts

@@ -1,38 +1,38 @@
-import { inRouter, outRouter } from "../utils/updateRouter";
+import { inRouter, outRouter } from "@/utils/updateRouter";
 // 初始化文章代码块
-import codeInit from "../scripts/Code";
+import codeInit from "@/scripts/Code";
 // 初始化视频播放器
-import videoInit from "../scripts/Video";
+import videoInit from "@/scripts/Video";
 // 初始化音乐播放器
-import musicInit from "../scripts/Music";
+import musicInit from "@/scripts/Music";
 // 初始化 LivePhoto
-import livePhotoInit from './LivePhoto'
+import livePhotoInit from '@/scripts/LivePhoto'
 // 初始化BackTop组件
-import BackTopInitFn from "../scripts/BackTop";
+import BackTopInitFn from "@/scripts/BackTop";
 // 搜索
-import { searchFn, vhSearchInit } from "../scripts/Search";
+import { searchFn, vhSearchInit } from "@/scripts/Search";
 // 图片懒加载
-import vhLzImgInit from "../scripts/vhLazyImg";
+import vhLzImgInit from "@/scripts/vhLazyImg";
 // 顶部导航 Current 状态
-import initLinkCurrent from "../scripts/Header";
+import initLinkCurrent from "@/scripts/Header";
 // 底部网站运行时间
-import initWebSiteTime from "../scripts/Footer";
+import initWebSiteTime from "@/scripts/Footer";
 // 友情链接初始化
-import initLinks from "../scripts/Links";
+import initLinks from "@/scripts/Links";
 // 朋友圈 RSS 初始化
-import initFriends from "../scripts/Friends";
+import initFriends from "@/scripts/Friends";
 // 动态说说初始化
-import initTalking from "../scripts/Talking";
+import initTalking from "@/scripts/Talking";
 // 文章评论初始化
-import initComment from "../scripts/Comment";
+import initComment from "@/scripts/Comment";
 // 移动端侧边栏初始化
-import initMobileSidebar from "../scripts/MobileSidebar";
+import initMobileSidebar from "@/scripts/MobileSidebar";
 // Google 广告
-import GoogleAdInit from "../scripts/GoogleAd";
+import GoogleAdInit from "@/scripts/GoogleAd";
 // Han Analytics 统计
-import HanAnalyticsInit from "../scripts/HanAnalytics";
+import HanAnalyticsInit from "@/scripts/HanAnalytics";
 // SmoothScroll 滚动优化
-import SmoothScroll from "../scripts/Smoothscroll";
+import SmoothScroll from "@/scripts/Smoothscroll";
 
 // ============================================================
 

src/scripts/Links.ts

@@ -1,7 +1,7 @@
 import vh from 'vh-plugin'
-import { $GET } from '../utils/index'
+import { $GET } from '@/utils/index'
 // 图片懒加载
-import vhLzImgInit from "../scripts/vhLazyImg";
+import vhLzImgInit from "@/scripts/vhLazyImg";
 // 渲染
 const LinksInit = async (data: any) => {
   const linksDOM = document.querySelector('.vh-container>.vh-tools-main>main.links-main')
@@ -20,6 +20,6 @@ const LinksInit = async (data: any) => {
 }
 
 // 友情链接初始化
-import LINKS_DATA from "../page_data/Link";
+import LINKS_DATA from "@/page_data/Link";
 const { api, data } = LINKS_DATA;
 export default () => LinksInit(api || data)

src/scripts/LivePhoto.ts

@@ -1,5 +1,5 @@
 // SmoothScroll 滚动优化
-import { LoadScript } from "../utils/index";
+import { LoadScript } from "@/utils/index";
 declare const LivePhotosKit: any;
 export default async () => {
   const livePhotoList = document.querySelectorAll('.vh-node.vh-vhLivePhoto');

src/scripts/Music.ts

@@ -1,6 +1,6 @@
-import SITE_CONFIG from "../config";
+import SITE_CONFIG from "@/config";
 const { vhMusicApi } = SITE_CONFIG;
-import { $GET } from '../utils/index'
+import { $GET } from '@/utils/index'
 import 'aplayer/dist/APlayer.min.css';
 import APlayer from 'aplayer';
 

src/scripts/Search.ts

@@ -1,4 +1,4 @@
-import { $GET } from '../utils/index'
+import { $GET } from '@/utils/index'
 
 // 更新数据
 let searchJson: any[] = [];

src/scripts/Smoothscroll.ts

@@ -1,5 +1,5 @@
 // SmoothScroll 滚动优化
-import { LoadScript } from "../utils/index";
+import { LoadScript } from "@/utils/index";
 declare const SmoothScroll: any;
 export default async () => {
   await LoadScript("/assets/js/smoothscroll.min.js");

src/scripts/Talking.ts

@@ -1,11 +1,11 @@
 
 import vh from 'vh-plugin'
-import { fmtDate } from '../utils/index'
+import { fmtDate } from '@/utils/index'
-import { $GET } from '../utils/index'
+import { $GET } from '@/utils/index'
 // 图片懒加载
-import vhLzImgInit from "../scripts/vhLazyImg";
+import vhLzImgInit from "@/scripts/vhLazyImg";
 // 灯箱JS初始化======
-import "../../public/assets/js/view-image.min.js";
+import "@public/assets/js/view-image.min.js";
 declare const ViewImage: any;
 // 灯箱JS初始化======
 
@@ -30,6 +30,6 @@ const TalkingInit = async (data: any) => {
 
 
 // 动态说说初始化
-import TALKING_DATA from "../page_data/Talking";
+import TALKING_DATA from "@/page_data/Talking";
 const { api, data } = TALKING_DATA;
 export default () => TalkingInit(api || data);

src/scripts/Video.ts

@@ -1,4 +1,4 @@
-import { LoadScript } from "../utils/index";
+import { LoadScript } from "@/utils/index";
 // 初始化视频播放器
 declare const DPlayer: any;
 declare const Hls: any;

src/styles/Base.less

@@ -215,9 +215,9 @@ html.is-animating {
 	z-index: 1;
 
 	&.vh-article-ad {
+		margin-bottom: 1rem;
 		box-sizing: border-box;
 		padding: 0.75rem;
-		margin-top: 1rem;
 		border-radius: 0.5rem;
 		background-color: #fff;
 		box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);

src/styles/components/MainHeader.less

@@ -1,18 +0,0 @@
-// main.vh-main {
-
-//   &>header.main-header {
-//     box-sizing: border-box;
-//     width: 100%;
-//     height: 10rem;
-//     overflow: hidden;
-//     transition: all 2s ease-in-out;
-//   }
-
-
-//   &.vh-index {
-//     &>header.main-header {
-//       height: 20rem;
-//       transition: all 2s ease-in-out;
-//     }
-//   }
-// }

src/utils/getCover.ts

@@ -2,7 +2,7 @@ import path from 'path';
 import _fs from 'fs';
 const fs = _fs.promises;
 import { fileURLToPath } from 'url';
-import SITE_INFO from '../config';
+import SITE_INFO from '@/config';
 // 获取当前模块的目录路径
 const __filename = fileURLToPath(import.meta.url); // 当前文件的绝对路径
 const __dirname = path.dirname(__filename); // 当前文件所在的目录

src/utils/getPostInfo.ts

@@ -1,6 +1,6 @@
 import { getCollection } from "astro:content";
 // 获取封面图
-import getCover from "../utils/getCover";
+import getCover from "@/utils/getCover";
 const posts = (await getCollection("blog")).sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
 // 获取文章分类
 const getCategories = () => {

tsconfig.json

@@ -1,13 +1,22 @@
 {
   "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+    "strictNullChecks": true,
+    "jsx": "preserve",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ],
+      "@public/*": [
+        "./public/*"
+      ],
+    }
+  },
   "include": [
     ".astro/types.d.ts",
     "**/*"
   ],
   "exclude": [
     "dist"
-  ],
+  ]
-  "compilerOptions": {
-    "strictNullChecks": true
-  }
 }