From c2f12f9abe5cbaa0b4a26ac74da886f168faf8c6 Mon Sep 17 00:00:00 2001 From: Han <1655466387@qq.com> Date: Sat, 8 Mar 2025 14:36:43 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=9C=88=E5=AD=90=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=F0=9F=91=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/assets/images/svg/Navs/friends.svg | 1 + src/config.ts | 1 + src/page_data/Friends.ts | 42 +++++++++++ src/pages/friends/index.astro | 24 ++++++ src/scripts/Friends.ts | 23 ++++++ src/scripts/Header.ts | 2 +- src/styles/Friends.less | 89 +++++++++++++++++++++++ 7 files changed, 181 insertions(+), 1 deletion(-) create mode 100644 public/assets/images/svg/Navs/friends.svg create mode 100644 src/page_data/Friends.ts create mode 100644 src/pages/friends/index.astro create mode 100644 src/scripts/Friends.ts create mode 100644 src/styles/Friends.less diff --git a/public/assets/images/svg/Navs/friends.svg b/public/assets/images/svg/Navs/friends.svg new file mode 100644 index 0000000..9a26c27 --- /dev/null +++ b/public/assets/images/svg/Navs/friends.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/config.ts b/src/config.ts index 60e613a..3c9043f 100644 --- a/src/config.ts +++ b/src/config.ts @@ -9,6 +9,7 @@ export default { // 导航栏 (新窗口打开 newWindow: true) Navs: [ { text: '朋友', link: '/links', icon: '/assets/images/svg/Navs/links.svg' }, + { text: '圈子', link: '/friends', icon: '/assets/images/svg/Navs/friends.svg' }, { text: '动态', link: '/talking', icon: '/assets/images/svg/Navs/talking.svg' }, { text: '昔日', link: '/archives', icon: '/assets/images/svg/Navs/archives.svg' }, { text: '留言', link: '/message', icon: '/assets/images/svg/Navs/message.svg' }, diff --git a/src/page_data/Friends.ts b/src/page_data/Friends.ts new file mode 100644 index 0000000..96d8876 --- /dev/null +++ b/src/page_data/Friends.ts @@ -0,0 +1,42 @@ +export default { + // API 接口请求优先，数据格式保持和 data 一致 + api: '', + // api 为空则使用 data 静态数据 + data: [ + { + "title": "Astro 中使用 Lenis 增加鼠标滚动阻尼感", + "auther": "韩小韩博客", + "date": "2025-03-06", + "link": "https://www.vvhan.com/article/Lenis-in-Astro", + "content": "在移动端触控交互中，惯性滚动带来的丝滑体验已成为标配，但鼠标滚轮受限于机械结构，滚动时难免产生生硬的段落感。如何让传统滚轮操作也能获得如触控板般的阻尼反馈？Lenis库通过JavaScript模拟惯性算法，成功将”物理惯性”引入网页滚动，本文将解析其实现原理与实战应用。核心技术原理​滚轮事件拦截与目" + }, + { + "title": "一组手机和电脑动态壁纸分享【分享】", + "auther": "韩小韩博客", + "date": "2025-03-05", + "link": "https://www.vvhan.com/article/pc-mobile-video-wallpaper", + "content": "本文精选一组电脑及手机动态壁纸，让你的设备秒变沉浸式视觉盛宴。壁纸下载壁纸下载壁纸下载" + }, + { + "title": "Astro 添加 Twikoo 评论组件", + "auther": "韩小韩博客", + "date": "2025-03-03", + "link": "https://www.vvhan.com/article/astro-twikoo", + "content": "Astro在使用视图过渡路由时，在跳转路由时，会导致JS文件只有在第一次进入页面时生效，所以Astro在使用视图过渡路由下Twikoo时无法正常使用的，我是单独写了一个评论组件，对Twikoo进行动态加载，然后在需要评论的页面引入的。创建Twikoo评论组件<!--Comment.astr" + }, + { + "title": "Astro主题-优雅的vhAstro-Theme【使用文档】", + "auther": "韩小韩博客", + "date": "2025-03-02", + "link": "https://www.vvhan.com/article/astro-theme-vhastro-theme", + "content": "🥝从Z-Blog到Emlog，从Typecho到Hexo，从动态博客到静态博客，作为一个前端，我深入了解了多种SSG工具，如Hexo、Vitepress、Hugo等，并最终锁定了Astro作为重构博客的选择。🍇Astro活跃的社区支持、广泛的现代框架兼容性、高效的性能优化、优秀的开发体验以及原生" + }, + { + "title": "Fetch的GET、POST简单HTTP请求封装", + "auther": "韩小韩博客", + "date": "2025-02-24", + "link": "https://www.vvhan.com/article/fetch-get-post", + "content": "在现代Web开发中，FetchAPI已经可以完全替代Ajax，是处理HTTP请求的利器，且支持异步操作和Promise链式调用。本文将详细介绍如何使用FetchAPI封装GET和POST请求。通过封装，代码可复用性更高，逻辑更清晰，同时还能简化错误处理和请求配置，大大提升开发效率和代码质量。GET请" + } + ] +} \ No newline at end of file diff --git a/src/pages/friends/index.astro b/src/pages/friends/index.astro new file mode 100644 index 0000000..2b438f7 --- /dev/null +++ b/src/pages/friends/index.astro @@ -0,0 +1,24 @@ +--- +// 页面 Info +import SITE_CONFIG from "../../config"; +const { Description } = SITE_CONFIG; +// Aside组件 +import Aside from "../../components/Aside.astro"; +// 公共 Layout +import Layout from "../../layouts/Layout.astro"; +// 动态说说样式 +import "../../styles/Friends.less"; +--- + + +
+
+
+

朋友的新动态 🎴

+

来看看我的朋友们都在干嘛.

+
+
+
+
+ diff --git a/src/scripts/Friends.ts b/src/scripts/Friends.ts new file mode 100644 index 0000000..e64c5a5 --- /dev/null +++ b/src/scripts/Friends.ts @@ -0,0 +1,23 @@ + +import vh from 'vh-plugin' +import { fmtDate } from '../utils/index' +import { $GET } from '../utils/index' + +const FriendsInit = async (data: any) => { + const friendsDOM = document.querySelector('.vh-container>.vh-friends>main') + if (!friendsDOM) return; + try { + let res = data; + if (typeof data === 'string') { + res = await $GET(api); + } + friendsDOM.innerHTML = res.map((i: any) => `

${i.title}

${i.content}

`).join(''); + } catch { + vh.Toast('获取数据失败') + } +} + +// 朋友圈 RSS 初始化 +import FRIENDS_DATA from "../page_data/Friends"; +const { api, data } = FRIENDS_DATA; +export default () => FriendsInit(api || data); \ No newline at end of file diff --git a/src/scripts/Header.ts b/src/scripts/Header.ts index 92a741b..c567d5d 100644 --- a/src/scripts/Header.ts +++ b/src/scripts/Header.ts @@ -1,4 +1,4 @@ -const linkListArr = ['links', 'talking', 'archives', 'message', 'about'] +const linkListArr = ['links', 'friends', 'talking', 'archives', 'message', 'about'] export default () => { const linkARR = document.querySelectorAll('.vh-link-list>a'); if (!linkARR.length) return; diff --git a/src/styles/Friends.less b/src/styles/Friends.less new file mode 100644 index 0000000..862f8c8 --- /dev/null +++ b/src/styles/Friends.less @@ -0,0 +1,89 @@ + // 说说页评论 + .vh-friends { + min-height: 56vh; + + &>main { + margin: 1.25rem 0; + box-sizing: border-box; + display: flex; + flex-direction: column; + gap: 1.25rem; + + &>article { + box-sizing: border-box; + padding: 1rem; + width: 100%; + height: max-content; + border-radius: 0.5rem; + box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05); + background: #fff linear-gradient(90deg, #EDEEF388, #fff) no-repeat 100% 100% / 0 1px; + background-position: 0 100%; + background-size: 0 100%; + transition: .7s cubic-bezier(.6, .1, 0, 1), background-position 0s; + overflow: hidden; + + &:hover { + background-size: 100% 100%; + } + + &>a { + display: flex; + flex-direction: column; + gap: 0.5rem; + width: 100%; + height: max-content; + + &>header { + &>h2 { + font-size: 1.08rem; + } + } + + &>p { + color: #26262680; + font-size: 0.875rem; + line-height: 1.8; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + text-overflow: ellipsis; + word-break: break-all; + overflow: hidden; + } + + &>footer { + box-sizing: border-box; + display: flex; + justify-content: space-between; + width: 100%; + height: max-content; + + &>span, + &>time { + box-sizing: border-box; + display: flex; + align-items: center; + gap: 0.5rem; + width: max-content; + height: 1.56rem; + font-size: 0.8rem; + + &>img { + width: 1.56rem; + height: 1.56rem; + border-radius: 50%; + } + } + + &>time { + padding: 0.5rem; + background: #F7F7F7; + border-radius: 0.8rem; + } + } + } + } + } + } + + @media screen and (max-width: 888px) {} \ No newline at end of file