添加圈子页面👭
This commit is contained in:
Han
parent
68d5f36a26
commit
c2f12f9abe
1
public/assets/images/svg/Navs/friends.svg
Normal file
1
public/assets/images/svg/Navs/friends.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304l91.4 0C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7L29.7 512C13.3 512 0 498.7 0 482.3zM609.3 512l-137.8 0c5.4-9.4 8.6-20.3 8.6-32l0-8c0-60.7-27.1-115.2-69.8-151.8c2.4-.1 4.7-.2 7.1-.2l61.4 0C567.8 320 640 392.2 640 481.3c0 17-13.8 30.7-30.7 30.7zM432 256c-31 0-59-12.6-79.3-32.9C372.4 196.5 384 163.6 384 128c0-26.8-6.6-52.1-18.3-74.3C384.3 40.1 407.2 32 432 32c61.9 0 112 50.1 112 112s-50.1 112-112 112z"/></svg>
|
||||
|
After Width: | Height: | Size: 581 B |
@ -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' },
|
||||
|
||||
42
src/page_data/Friends.ts
Normal file
42
src/page_data/Friends.ts
Normal file
@ -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请"
|
||||
}
|
||||
]
|
||||
}
|
||||
24
src/pages/friends/index.astro
Normal file
24
src/pages/friends/index.astro
Normal file
@ -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";
|
||||
---
|
||||
|
||||
<Layout title="朋友的新动态" description={Description}>
|
||||
<section class="vh-container">
|
||||
<section class="vh-friends vh-animation vh-animation-init">
|
||||
<header class="vh-page-header">
|
||||
<h1>朋友的新动态 🎴</h1>
|
||||
<p>来看看我的朋友们都在干嘛.</p>
|
||||
</header>
|
||||
<main><section class="vh-space-loading white"><span></span><span></span><span></span></section></main>
|
||||
</section>
|
||||
<Aside />
|
||||
</section>
|
||||
</Layout>
|
||||
23
src/scripts/Friends.ts
Normal file
23
src/scripts/Friends.ts
Normal file
@ -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) => `<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('');
|
||||
} catch {
|
||||
vh.Toast('获取数据失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 朋友圈 RSS 初始化
|
||||
import FRIENDS_DATA from "../page_data/Friends";
|
||||
const { api, data } = FRIENDS_DATA;
|
||||
export default () => FriendsInit(api || data);
|
||||
@ -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;
|
||||
|
||||
89
src/styles/Friends.less
Normal file
89
src/styles/Friends.less
Normal file
@ -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) {}
|
||||
Loading…
x
Reference in New Issue
Block a user