超级加倍优化✅

2025-03-12 15:51:11 +08:00 · 2025-03-12 15:51:11 +08:00 · 5da1f4b21b
commit 5da1f4b21b
parent a019180b73
25 changed files with 142 additions and 69 deletions
--- a/README.md
+++ b/README.md
@ -14,6 +14,7 @@

 - [x] 简洁的响应式设计
 - [x] 流畅的动画和页面过渡
+- [x] 丝滑的阻尼滚动效果（自定义开启/关闭）
 - [x] 两列布局
 - [x] 阅读时间
 - [x] 字数统计
@ -27,9 +28,12 @@
 - [x] 分类
 - [x] 归档
 - [x] 动态
+- [x] 圈子
 - [x] 关于
+- [x] 留言板
 - [x] 友情链接
 - [x] 推荐文章
+- [x] 置顶文章
 - [x] 谷歌广告
 - [x] 内置 404 页面
 - [x] Sitemap 支持
@ -114,6 +118,7 @@ date: 文章创建日期
 updated: 文章更新日期
 cover: "封面图URL (为空默认随机内置封面 /public/assets/images/banner)"
 recommend: false # 是否推荐文章
+top: false # 是否置顶文章
 hide: false # 是否隐藏文章
 ---
 ```
--- a/astro.config.mjs
+++ b/astro.config.mjs
@ -14,6 +14,7 @@ import swup from '@swup/astro';
 // https://astro.build/config
 export default defineConfig({
 	site: 'https://www.vvhan.com',
+	build: { assets: 'vh_static' },
 	integrations: [
 		swup({
 			theme: false,
--- a/package.json
+++ b/package.json
@ -15,8 +15,7 @@
    "@astrojs/sitemap": "^3.2.1",
    "@swup/astro": "^1.5.0",
    "aplayer": "^1.10.1",
-    "astro": "^5.4.1",
-    "lenis": "^1.2.1",
+    "astro": "^5.4.2",
    "overlayscrollbars": "^2.11.1",
    "vanilla-lazyload": "^19.1.3",
    "vh-plugin": "^1.2.2"
--- a/src/components/ArticleCard.astro
+++ b/src/components/ArticleCard.astro
@ -12,7 +12,7 @@ import "../styles/components/ArticleCard.less";
 ---

 <article class="vh-article-item vh-animation vh-animation-init">
-	<a class="vh-article-link" href={`/article/${post.data.id}`}>
+	<a class={`vh-article-link${post.data.top ? " active" : ""}`} 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">
 			<header>
--- a/src/content.config.ts
+++ b/src/content.config.ts
@ -14,7 +14,8 @@ const blog = defineCollection({
 		id: z.union([z.string(), z.number()]),
 		cover: z.string().optional(),
 		recommend: z.boolean().optional(),
-		hide: z.boolean().optional()
+		hide: z.boolean().optional(),
+		top: z.boolean().optional()
 	}),
 });

--- a/src/pages/[...page].astro
+++ b/src/pages/[...page].astro
@ -2,12 +2,14 @@
 import { getCollection } from "astro:content";
 import type { GetStaticPathsOptions } from "astro";
 import setSearchJson from "../utils/vhSearch";
+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());
-	// 生成 Search JSON 文件 ======
+	// 置顶文章功能
+	moveTopToFirst(posts);
+	// 生成 Search JSON 文件
 	await setSearchJson(posts);
-	// 生成 Search JSON 文件 ======
 	// 隐藏的文章不显示
 	return paginate(
 		posts.filter(i => !i.data.hide),
--- a/src/scripts/BackTop.ts
+++ b/src/scripts/BackTop.ts
@ -15,7 +15,7 @@ const scrollChangeFn = () => {
 const backTopFn = () => {
  (window as any).vhlenis && (window as any).vhlenis.stop();
  window.scrollTo({ top: 0, behavior: "smooth" });
-  (window as any).vhlenis.start();
+  (window as any).vhlenis && (window as any).vhlenis.start();
 };
 // 页面更新，初始化函数======
 // 回顶部DOM
--- a/src/scripts/Friends.ts
+++ b/src/scripts/Friends.ts
@ -11,7 +11,7 @@ const FriendsInit = async (data: any) => {
 		if (typeof data === 'string') {
 			res = await $GET(api);
 		}
-		friendsDOM.innerHTML = res.map((i: any) => `<article><a href="${i.link}" target="_blank" rel="noopener nofollow"><header><h2>${i.title}</h2></header><p>${i.content}</p><footer><span><img src="https://icon.bqb.cool/?url=${i.link.split('//')[1].split('/')[0]}" />${i.auther}</span><time>${fmtDate(i.date)}前</time></footer></a></article>`).join('');
+		friendsDOM.innerHTML = res.map((i: any) => `<article><a href="${i.link}" target="_blank" rel="noopener nofollow"><header><h2>${i.title}</h2></header><p>${i.content}</p><footer><span><img src="https://icon.bqb.cool/?url=${i.link.split('//')[1].split('/')[0]}" /><em>${i.auther}</em></span><time>${fmtDate(i.date, false)}前</time></footer></a></article>`).join('');
 	} catch {
 		vh.Toast('获取数据失败')
 	}
--- a/src/scripts/HanAnalytics.ts
+++ b/src/scripts/HanAnalytics.ts
@ -0,0 +1,9 @@
+
+// Han Analytics 统计
+import SITE_INFO from "../config";
+import { LoadScript } from "../utils/index";
+
+export default async () => {
+  const { HanAnalytics } = SITE_INFO;
+  HanAnalytics.enable && LoadScript(`${HanAnalytics.server}/tracker.min.js`, [{ k: "data-website-id", v: HanAnalytics.siteId }]);
+}
--- a/src/scripts/Init.ts
+++ b/src/scripts/Init.ts
@ -1,6 +1,4 @@
 import { inRouter, outRouter } from "../utils/updateRouter";
-// 鼠标滚动阻尼效果
-import LenisInit from './Lenis';
 // 初始化文章代码块
 import codeInit from "../scripts/Code";
 // 初始化视频播放器
@ -30,9 +28,9 @@ import initMobileSidebar from "../scripts/MobileSidebar";
 // Google 广告
 import GoogleAdInit from "../scripts/GoogleAd";
 // Han Analytics 统计
-import SITE_INFO from "../config";
-const { HanAnalytics } = SITE_INFO;
-import { LoadScript } from "../utils/index";
+import HanAnalyticsInit from "../scripts/HanAnalytics";
+// SmoothScroll 滚动优化
+import SmoothScroll from "../scripts/Smoothscroll";

 // ============================================================

@ -40,8 +38,6 @@ import { LoadScript } from "../utils/index";
 const videoList: any[] = [];
 const MusicList: any[] = [];
 const indexInit = async (only: boolean = true) => {
-  // 鼠标滚动阻尼效果
-  only && LenisInit();
  // 预加载搜索数据
  only && searchFn("");
  // 初始化搜索功能
@ -52,6 +48,8 @@ const indexInit = async (only: boolean = true) => {
  only && BackTopInitFn();
  // 移动端侧边栏初始化
  only && initMobileSidebar();
+  // SmoothScroll 滚动优化
+  only && SmoothScroll();
  // 顶部导航 Current 状态
  initLinkCurrent()
  // 初始化文章代码块
@ -68,12 +66,12 @@ const indexInit = async (only: boolean = true) => {
  initTalking();
  // Google 广告
  GoogleAdInit();
+  // Han Analytics 统计
+  HanAnalyticsInit();
  // 文章视频播放器初始化
  videoInit(videoList);
  // 文章音乐播放器初始化
  musicInit(MusicList);
-  // Han Analytics 统计
-  HanAnalytics.enable && LoadScript(`${HanAnalytics.server}/tracker.min.js`, [{ k: "data-website-id", v: HanAnalytics.siteId }]);
 };

 export default () => {
--- a/src/scripts/Lenis.ts
+++ b/src/scripts/Lenis.ts
@ -1,18 +0,0 @@
-import Lenis from "lenis";
-
-const IncludeClassName = ['vh-code-box', 'vh-search-list'];
-(window as any).vhlenis = new Lenis({
-  prevent: (node) => IncludeClassName.some((i: string) => node.className.includes(i))
-});
-const lenisInit = (time: any) => {
-  (window as any).vhlenis.raf(time)
-  requestAnimationFrame(lenisInit)
-}
-(window as any).vhlenis.on('scroll', () => {
-  if (window.scrollY + window.innerHeight >= document.documentElement.scrollHeight) {
-    (window as any).vhlenis.stop();
-    (window as any).vhlenis.start();
-  }
-});
-
-export default () => requestAnimationFrame(lenisInit)
--- a/src/scripts/Music.ts
+++ b/src/scripts/Music.ts
@ -4,7 +4,6 @@ import { $GET } from '../utils/index'
 import 'aplayer/dist/APlayer.min.css';
 import APlayer from 'aplayer';

-declare const APlayer: any;
 // 初始化音乐播放器
 export default async (MusicList: any[]) => {
  const musicDOM: any = document.querySelectorAll(".vh-node.vh-vhMusic");
--- a/src/scripts/Smoothscroll.ts
+++ b/src/scripts/Smoothscroll.ts
@ -0,0 +1,7 @@
+// SmoothScroll 滚动优化
+import { LoadScript } from "../utils/index";
+declare const SmoothScroll: any;
+export default async () => {
+  await LoadScript("/assets/js/smoothscroll.min.js");
+  SmoothScroll({ stepSize: 118, animationTime: 666 })
+};
--- a/src/styles/Article.less
+++ b/src/styles/Article.less
@ -3,7 +3,6 @@ section.vh-container {
    flex: 1;
    min-width: 0;

-
    &>header {
      box-sizing: border-box;
      padding: 2rem 1rem 1rem;
@ -70,6 +69,14 @@ section.vh-container {
      box-shadow: 0 12px 8px 6px rgba(7, 17, 27, 0.05);
      overflow: hidden;

+      .aplayer-list {
+        max-height: max-content !important;
+
+        &>ol {
+          max-height: 566px !important;
+        }
+      }
+
      &>.tag-list {
        box-sizing: border-box;
        padding-top: 2rem;
--- a/src/styles/Base.less
+++ b/src/styles/Base.less
@ -62,6 +62,8 @@ img {
 	// 隐藏滚动条
 	scrollbar-width: none;
 	-ms-overflow-style: none;
+	// 平滑滚动
+	scroll-behavior: smooth;
 	// 消除边框
 	outline: none; // 隐藏滚动条

--- a/src/styles/Friends.less
+++ b/src/styles/Friends.less
@ -57,6 +57,7 @@
            justify-content: space-between;
            width: 100%;
            height: max-content;
+            overflow: hidden;

            &>span,
            &>time {
@ -64,18 +65,33 @@
              display: flex;
              align-items: center;
              gap: 0.5rem;
-              width: max-content;
              height: 1.56rem;
              font-size: 0.8rem;
+              overflow: hidden;
+
+              &>em {
+                font-style: normal;
+                flex: 1;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+              }

              &>img {
+                flex-shrink: 0;
                width: 1.56rem;
                height: 1.56rem;
                border-radius: 50%;
              }
            }

+            &>span {
+              flex: 1;
+            }
+
            &>time {
+              flex-shrink: 0;
+              width: max-content;
              padding: 0.5rem;
              background: #F7F7F7;
              border-radius: 0.8rem;
--- a/src/styles/components/ArticleCard.less
+++ b/src/styles/components/ArticleCard.less
@ -20,6 +20,7 @@ section.article-list {
    overflow: hidden;

    &>a.vh-article-link {
+      position: relative;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
@ -38,7 +39,48 @@ section.article-list {
        }
      }

+      &.active {
+        &::before {
+          content: "置顶";
+          position: absolute;
+          top: 1.6rem;
+          left: 0.66rem;
+          box-sizing: border-box;
+          padding: 0.18rem 1rem;
+          width: max-content;
+          height: max-content;
+          font-size: 1rem;
+          color: #fff;
+          border-radius: 0.66rem;
+          transform: rotate(-45deg);
+          /* 确保元素有半透明背景 */
+          background: #00000033;
+          box-shadow: 0 2rem 1rem rgba(0, 0, 0, 0.1);
+          z-index: 1;
+          /* 高斯模糊效果 */
+          backdrop-filter: blur(6px);
+          -webkit-backdrop-filter: blur(6px);
+          /* 兼容旧版浏览器 */
+        }
+
+        &>.vh-article-banner {
+          &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.06);
+            z-index: 1;
+            pointer-events: none;
+          }
+        }
+      }
+
+
      &>.vh-article-banner {
+        position: relative;
        flex-shrink: 0;
        box-sizing: border-box;
        width: 100%;
--- a/src/styles/components/Comment.less
+++ b/src/styles/components/Comment.less
@ -71,6 +71,21 @@
      }
    }

+    .tk-admin {
+
+      .tk-login {
+        box-sizing: border-box;
+      }
+
+      p {
+        color: #fff;
+      }
+
+      .tk-admin-warn p {
+        color: #000;
+      }
+    }
+
    // 评论输入框Focus边框颜色
    .el-input__inner:focus,
    .el-textarea__inner:focus {
--- a/src/type/aplayer.d.ts
+++ b/src/type/aplayer.d.ts
@ -0,0 +1 @@
+declare module 'aplayer';
--- a/src/utils/getCover.ts
+++ b/src/utils/getCover.ts
@ -59,10 +59,8 @@ async function* createImageIterator(dir: string) {

 const targetDir = path.resolve(__dirname, '../../public/assets/images/banner/'); // 目标目录
 const fileIter = createImageIterator(targetDir);
-const getCover = async (filename: string | null | undefined) => {
+export default async (filename: string | null | undefined) => {
  if (filename) return filename;
  const { value } = await fileIter.next();
  return SITE_INFO.Site + `/assets/images/banner/${value}`
-}
-
-export default getCover;
+}
--- a/src/utils/getFileTime.ts
+++ b/src/utils/getFileTime.ts
@ -1,17 +0,0 @@
-import { execSync } from "child_process";
-
-const COMMITER_DATE_ISO_FORMAT = "%cI";
-
-export default function getFileCreateTime(filePath: string, type: string): Date {
-  try {
-    const result = execSync(`git log --pretty=format:"${COMMITER_DATE_ISO_FORMAT}" ${filePath}`).toString();
-    if (!result) {
-      throw new Error('Git command failed to execute');
-    }
-    const commits = result.split(/\r?\n/g);
-    return new Date(commits[type == 'create' ? commits.length - 1 : 0]);
-  } catch (e) {
-    // not committed yet
-    return new Date();
-  }
-}
--- a/src/utils/getPostInfo.ts
+++ b/src/utils/getPostInfo.ts
@ -24,8 +24,8 @@ const getTags = () => {

 // 获取推荐文章 (给文章添加 recommend: true 字段)
 const getRecommendArticles = () => {
-  const recommendList = posts.filter(i => i.data.recommend).slice(0, 6);
-  return (recommendList.length ? recommendList : posts).slice(0, 6).map(async i => ({ title: i.data.title, date: i.data.date, id: i.data.id, cover: await getCover(i.data.cover) }))
+  const recommendList = posts.filter(i => i.data.recommend);
+  return (recommendList.length ? recommendList : posts.slice(0, 6)).map(async i => ({ title: i.data.title, date: i.data.date, id: i.data.id, cover: await getCover(i.data.cover) }))
 };

 export { getCategories, getTags, getRecommendArticles };
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@ -11,7 +11,7 @@ const getDescription = (post: any, num: number = 150) => (post.rendered ? post.r
 //处理时间
 const fmtTime = (time: any, fmt: string = 'MMMM D, YYYY') => dayjs(time).utc().format(fmt)
 // 处理日期
-const fmtDate = (time: string | Date) => {
+const fmtDate = (time: string | Date, hours_status = true) => {
  const now = dayjs();
  const past = dayjs(time);
  // 计算各时间单位，逐步扣除已计算的部分
@ -31,9 +31,9 @@ const fmtDate = (time: string | Date) => {
    years && `${years}年`,
    months && `${months}月`,
    days && `${days}天`,
-    hours && !years && !months && `${hours}小时`,
-    minutes && !years && !months && !days && `${minutes}分`,
-    seconds && !years && !months && !days && !hours && `${seconds}秒`
+    hours_status ? hours && !years && !months && `${hours}小时` : 0,
+    hours_status ? minutes && !years && !months && !days && `${minutes}分` : '',
+    hours_status ? seconds && !years && !months && !days && !hours && `${seconds}秒` : ''
  ].filter(Boolean).join('');
 };

--- a/src/utils/moveTopToFirst.ts
+++ b/src/utils/moveTopToFirst.ts
@ -0,0 +1,8 @@
+export default (arr: Array<any>) => {
+  const index = arr.findIndex((item: any) => item.data.top === true);
+  if (index !== -1) {
+    const [item] = arr.splice(index, 1);
+    arr.unshift(item);
+  }
+  return arr;
+}
--- a/src/utils/vhSearch.ts
+++ b/src/utils/vhSearch.ts
@ -2,7 +2,7 @@ import fs from 'fs/promises';
 import path from 'path';
 import * as cheerio from 'cheerio';

-const setSearchJson = async (posts: any[]) => {
+export default async (posts: any[]) => {
  const searchIndex = posts.map(i => {
    const $ = cheerio.load(`<body>${i.rendered.html}</body>`);
    return {
@ -25,6 +25,4 @@ const setSearchJson = async (posts: any[]) => {
  } catch (error) {
    console.error('Error writing search index file:', error);
  }
-};
-
-export default setSearchJson;
+};