AIOVTUE-雪

Fri, 03 Jul 2026 00:00:00 +0000

对hugo-aiovtue主题进行版本大更新，优化和新增部分功能 以下是本次更新内容

新增动态页面，双样式
文章新增画板（excalidraw）样式
文章新增画廊样式
文章新增MATH支持
文章新增视频格式支持
文章新增AI总结
所有页面头图视频支持
新增番剧页面
新增看板娘组件
新增网页特效
新增网页鼠标样式
新增友链页样式
新增主页文章列表样式
新增左下角音乐播放器
新增友链页朋友动态功能
新增字体大小自定义功能
新增移动端顶栏自动隐藏（手动开启）
新增页脚出友链显示功能
留言页增加弹幕功能

Thu, 02 Jul 2026 00:00:00 +0000

这是一个纯文字动态demo
支持部分markdown语法

Wed, 01 Jul 2026 00:00:00 +0000

以下是图片动态示例：

关于我

Fri, 05 Jun 2026 00:00:00 +0000

🌟 关于本站 | About This Blog

我的邮箱：crqgxs@qq.com 或 1044192982@qq.com

大家好！我是一名在校学生，自初中起便热衷于在网络世界里探索未知，这份对互联网的好奇与热爱，多年来从未消减。同时，我也是一名怀揣光影梦却受限于预算的“穷学生”——正是这份对摄影的执着，叠加对个人表达与成长记录的渴望，最终让我与博客结下了不解之缘。

WorkBuddy 部署与使用，微信、QQ、飞书直连！腾讯版 OpenClaw

Wed, 18 Mar 2026 00:00:00 +0000

WorkBuddy 部署与使用，微信、QQ、飞书直连！腾讯版 OpenClaw

基本介绍

WorkBuddy 是腾讯推出的一款类 OpenClaw 的桌面智能体工作台，支持在手机主流 IM 平台下发指令，兼容 Windows、Mac 系统，可接入微信、企业微信、QQ、钉钉、飞书等应用。

超详细！OpenClaw 本地部署保姆级实战教学

Wed, 18 Mar 2026 00:00:00 +0000

超详细！OpenClaw 本地部署保姆级实战教学

1. 简介

什么是 OpenClaw？

OpenClaw/Moltbot/Clawdbot 是一个 AI 助手框架，支持：

🤖 多模型支持（MiniMax、Claude、GLM、GPT等）
💬 多平台集成（WhatsApp、Telegram、Discord等）
🛠️ 强大的工具生态（浏览器、文件系统、代码生成等）
🔧 可扩展的技能系统

版本说明

OpenClaw: 官方名称，最新版本使用的命令
Moltbot/Clawdbot: 旧版本命令，部分用户可能仍在使用

本教程以 openclaw 为准，clawdbot 用户可将命令替换使用。

2026马年春晚邓男子《惊喜定格》魔术计算器同款代码

Wed, 04 Mar 2026 00:00:00 +0000

2026马年春晚邓男子《惊喜定格》魔术计算器同款代码

2026年马年春晚邓男子表演的计算器魔术《惊喜定格》同款代码

魔术的精髓从来不在于技术，而在于表演表演环节

第一步：请路人余先生随意给我一个四位数的数字：得到 a = 1106

使用Docker部署哪吒监控v1 CloudFlare Tunnel版面板端

Tue, 03 Mar 2026 00:00:00 +0000

使用Docker部署哪吒监控v1 CloudFlare Tunnel版面板端

哪吒面板简介

哪吒监控是一款自托管、轻量级的服务器和网站监控运维工具。支持监控系统状态、HTTP（SSL 证书更改、即将过期、过期）、TCP、Ping，并支持推送警报、运行计划任务和 Web 终端。

2026 免费托管平台合集｜静态/动态/AI全覆盖（真实体验）

Sun, 01 Mar 2026 00:00:00 +0000

2026 免费托管平台合集｜静态/动态/AI全覆盖（真实体验）

作为长期折腾个人站、AI 项目的博主，我把目前真免费、有额度、能长期用的托管平台整理成一篇合集，包含大家常问的 CF（Cloudflare）、EO（EdgeOne）等静态托管，也有能跑 Ollama、WordPress 的动态平台，新手直接照着选就行。 CF/EO/Vercel/Netlify/GitHub Pages等主流静态托管，Kinsta、Surge、GitLab Pages、上码、CloudBase、Render、Railway、Zeabur、Hugging Face、Supabase等，全部实测可用、长期白嫖无套路。

实测推荐！免费虚拟主机+超便宜服务器，学习建站测试必备

Sat, 28 Feb 2026 00:00:00 +0000

实测推荐！免费虚拟主机+超便宜服务器，学习建站测试必备

官网直达：https://www.moebun.com/aff/CPMKQYVR

平时想搭个轻量博客、做网站测试、练手建站，又不想花大钱？给大家分享我自用很久的一家靠谱平台，有免费主机，价格还巨实惠。

免费虚拟主机，直接白嫖用

平台提供免费虚拟主机，不用花钱就能用来：

Minecraft高级备份Advanced Backups 使用教程

Sat, 21 Feb 2026 00:00:00 +0000

Minecraft高级备份Advanced Backups 使用教程

转载至MC百科 ZZYDD 仅供学习交流！ https://www.mcmod.cn/post/4786.html

在MC百科中下载高级备份: https://www.mcmod.cn/class/10769.html

前言

这是我根据个人实际使用经验制作的教程。

配置文件为3.7.1版本的mod生成，结合ChatGPT、DeepSeek辅助进行翻译。

Shadowsocks 四版本一键安装脚本使用教程

Sat, 21 Feb 2026 00:00:00 +0000

Shadowsocks 四版本一键安装脚本使用教程

本脚本适用环境

系统支持：CentOS 6+，Debian 7+，Ubuntu 12+ 内存要求：≥128M 日期：2020 年 06 月 01 日

默认配置

服务器端口：自己设定（如不设定，默认从 9000-19999 之间随机生成）密码：自己设定（如不设定，默认为 teddysun.com）加密方式：自己设定（如不设定，Python 和 libev 版默认为 aes-256-gcm，R 和 Go 版默认为 aes-256-cfb）协议（protocol）：自己设定（如不设定，默认为 origin）（仅限 ShadowsocksR 版）混淆（obfs）：自己设定（如不设定，默认为 plain）（仅限 ShadowsocksR 版）

BinNav-静态导航有后台，免费部署EdgeOne Pages和Cloudflare Pages

Thu, 19 Feb 2026 00:00:00 +0000

BinNav-静态导航有后台，免费部署EdgeOne Pages和Cloudflare Pages

一个现代化的网站导航页面，支持可视化管理后台、智能图标获取、拖拽排序、自动提交和邮件发送功能和自动部署更新。部署至EdgeOne Pages无需服务器。

免费图床 CloudFlare ImgBed 部署教程

Thu, 12 Feb 2026 00:00:00 +0000

免费图床 CloudFlare ImgBed 部署教程

CloudFlare ImgBed 是一个基于 Cloudflare Pages 的开源文件托管解决方案，为用户提供免费、稳定、高效的文件存储服务。

项目支持多种存储渠道，支持无服务器和有服务器部署方式，满足不同用户的需求。

Mizuki 博客免费搭建指南

Fri, 06 Feb 2026 00:00:00 +0000

Mizuki 博客免费搭建指南

一、前期准备

核心能力：具备基础问题解决能力，遇到疑问优先思考、主动搜索，搜索无果可借助AI工具，避免盲目提问；能同时处理简单多任务。

必备工具

Git：最常用的版本控制器，用于操作GitHub（推荐官网安装：Git - Downloads）。
- 补充：可尝试 GitHub Desktop。
Node.js：Fuwari 博客的运行基础，必须安装（官网：Node.js — Run JavaScript Everywhere）。
GitHub账号：用于创建代码仓库，存放Fuwari博客的所有文件（注册地址：GitHub）。
Cloudflare账号：用于创建Pages服务，绑定域名实现博客公开访问（注册地址：Cloudflare）。
黑曜石（Obsidian）：可视化Markdown编辑器，用于编写博客文章（Fuwari文章均为Markdown格式，官网：Obsidian）。
基础技能：掌握Markdown基础语法（用于编写博客文章），不会可参考：Markdown 基本语法 | Markdown 官方教程。

二、本地部署Mizuki

Fork仓库：访问 Mizuki 官方仓库，点击右上角「Fork」，将仓库复制到自己的GitHub账号下。
克隆仓库到本地：
- 打开Git终端，输入命令：git clone <你的仓库URL>（推荐使用SSH链接，无需科学上网即可推送更改）。
- 提示：仓库URL可在自己Fork的仓库页面，点击「Code」获取。
安装依赖工具：
- 全局安装pnpm（包管理工具）：输入命令
bash
```
npm install -g pnpm
```
- 补充：若npm国内下载速度过慢，可替换为cnpm（镜像），参考：npmmirror 镜像站。
安装项目依赖：进入克隆后的项目根目录，依次输入以下两条命令：
bash
```
pnpm install
pnpm add sharp
```

✅ 至此，Fuwari 已成功在本地部署完成，可开始后续个性化配置。

使用AI提示词，让AI快速修改符合规范的文章

Mon, 05 Jan 2026 00:00:00 +0000

使用AI提示词，让AI快速修改符合规范的文章

使用Firefly Astro这个博客时，快速转移文章内容是个问题。使用AI就会快很多，同时写的新文章也可以直接用AI修改格式。

Linux服务器性能网络测试脚本合集转载

Tue, 23 Dec 2025 00:00:00 +0000

1. 来自 tyooe.com 的 Linux 服务器性能/网络测试脚本合集(转载)

互联网创作，仅供个人使用，如有侵权，请联系删除来源：https://tyooe.com/linux-benchmark-scripts

用途：适用于新购 Linux 服务器后，快速评估硬件性能、网络连通性、流媒体解锁状态等，包含综合测试、专项性能测试、网络测试、解锁检测四大类脚本，可直接复制命令执行。

通过 Cloudflare warp 为纯IPv6 添加IPV4出口 1Panel搭建网站

Tue, 25 Nov 2025 00:00:00 +0000

尽量使用Ubuntu-22.04及以上或者Debian11及以上，以防在纯IPV6访问面板出现问题。操作步骤

1.连接服务器

首先需要判断本机是否有 IPv6 地址，可以通过访问 https://ip.gs 检测是否拥有 IPv6

SillyTaverm酒馆实用插件&资源推荐

Mon, 20 Oct 2025 00:00:00 +0000

SillyTaverm实用插件&资源推荐

1. 酒馆助手 (Tavern-Helper)

作者：@𝚔𝚊𝚔𝚊𝚊🫠、@青空莉正辟谣简介：为 SillyTavern 设计的多功能扩展，支持：

在对话中渲染交互式界面（从按钮到复杂游戏界面）
用 jQuery 操作 SillyTavern DOM（修改样式、绑定事件等）
作为中间层连接 SillyTavern 与外部应用，实现数据/功能联动

安装文档： https://n0vi028.github.io/JS-Slash-Runner-Doc/guide/%E5%85%B3%E4%BA%8E%E9%85%92%E9%A6%86%E5%8A%A9%E6%89%8B/%E4%BB%8B%E7%BB%8D.html

VPS快速部署酒馆（SillyTavern）教程

Tue, 30 Sep 2025 00:00:00 +0000

VPS快速部署酒馆（SillyTavern）教程面板推荐使用宝塔面板

1.新建目录sillytavern

text

mkdir sillytavern

text

cd sillytavern

2.在文件夹内新建一个文件

快速启动AstrBot及NapCatQQ脚本

Sat, 30 Aug 2025 00:00:00 +0000

一个AstrBot在Termux容器部署时快速启动AstrBot及NapCatQQ脚本

第一步：创建管理脚本

bash

# 创建脚本文件
nano ~/bot-manager.sh

第二步：复制粘贴内容

将以下内容完整复制粘贴到 nano 编辑器中：

一些壁纸

Mon, 18 Aug 2025 00:00:00 +0000

秘密哦

Sun, 15 Jun 2025 00:00:00 +0000

《“躺平”也是一种艺术》

Fri, 31 Jan 2025 00:00:00 +0000

躺平也是一种艺术近年来，一种新生代的生活态度在年轻人中逐渐兴起，那就是“躺平”。躺平一词被广泛解读为平凡而安于现状的生活态度，不过度奋斗，追求内心的平静与舒适。虽然这种态度引发了许多争议和质疑，但人们不可否认，躺平也是一种艺术。

B站批量取消关注移除粉丝

Fri, 31 Jan 2025 00:00:00 +0000

浏览器打开B站关注页面，打开浏览器（Console）控制台，输入以下脚本即可。如果有报错或繁忙刷新重新开始就行。

批量取消关注

版本一，自动翻页

text

(async () => {
 // 等待函数
 const sleep = (s) => new Promise(resolve => setTimeout(resolve, s * 1000));
 
 // 取消关注当前页的所有用户
 const unfollowAll = async () => {
 let items = document.querySelectorAll('.follow-btn__trigger.gray');
 console.log('本页待取消关注数量:', items.length);
 
 for (let i = 0; i < items.length; i++) {
 console.log(`取消第 ${i+1}/${items.length} 个`);
 
 // 创建真实鼠标事件模拟点击
 const event = new MouseEvent('click', {
 view: window,
 bubbles: true,
 cancelable: true
 }); // 修正：添加了右括号
 items[i].dispatchEvent(event);
 
 await sleep(1.5); // 增加等待时间降低风控风险
 }
 
 return items.length;
 };
 
 // 查找并点击下一页按钮
 const clickNextPage = async () => {
 console.log('正在寻找下一页按钮...');
 
 // 针对B站实际页面结构优化的选择器
 const nextPageSelectors = [
 '.be-pager-next', // B站分页组件的下一页按钮
 '.be-pager-item:last-child a', // 分页区域的最后一个按钮
 'a[title="下一页"]', // 带title属性的按钮
 'button:contains("下一页")' // 包含"下一页"文本的按钮
 ];
 
 let nextButton = null;
 
 // 尝试多种选择器
 for (const selector of nextPageSelectors) {
 try {
 if (selector.includes(':contains')) {
 // 文本内容匹配
 const elements = document.querySelectorAll(selector.split(':contains')[0]);
 for (const el of elements) {
 if (el.textContent.includes('下一页')) {
 nextButton = el;
 break;
 }
 }
 } else {
 // 常规选择器
 nextButton = document.querySelector(selector);
 }
 
 if (nextButton && nextButton.offsetParent !== null) {
 console.log(`找到下一页按钮: ${selector}`);
 break;
 }
 } catch (e) {
 console.warn(`选择器 ${selector} 执行失败:`, e);
 }
 }
 
 if (nextButton) {
 // 检查按钮是否被禁用
 if (nextButton.classList.contains('disabled') || 
 nextButton.getAttribute('disabled') === 'disabled') {
 console.log('已到达最后一页，任务完成！');
 return false;
 }
 
 console.log('点击下一页按钮');
 
 // 创建真实鼠标事件模拟点击
 const event = new MouseEvent('click', {
 view: window,
 bubbles: true,
 cancelable: true
 }); // 修正：添加了右括号
 nextButton.dispatchEvent(event);
 
 await sleep(3); // 等待新页面加载
 return true;
 } else {
 console.log('未找到下一页按钮，尝试备用方案...');
 
 // 备用方案：直接获取分页按钮列表
 const paginationItems = document.querySelectorAll('.be-pager-item');
 if (paginationItems.length > 0) {
 const lastItem = paginationItems[paginationItems.length - 1];
 if (lastItem.textContent.includes('下一页')) {
 console.log('通过分页列表找到下一页按钮');
 
 const event = new MouseEvent('click', {
 view: window,
 bubbles: true,
 cancelable: true
 }); // 修正：添加了右括号
 lastItem.dispatchEvent(event);
 
 await sleep(3); // 等待新页面加载
 return true;
 }
 }
 
 console.log('未找到下一页按钮，任务可能已完成或需要手动检查');
 return false;
 }
 };
 
 // 主执行流程
 try {
 let pageCount = 1;
 
 while (true) {
 console.log(`\n===== 开始处理第 ${pageCount} 页 =====`);
 
 const processedCount = await unfollowAll();
 
 if (processedCount > 0) {
 console.log(`第 ${pageCount} 页已清理完毕！`);
 } else {
 console.log(`第 ${pageCount} 页没有需要取消关注的用户`);
 }
 
 // 等待页面稳定
 await sleep(2);
 
 // 尝试翻页
 const hasNext = await clickNextPage();
 
 if (!hasNext) {
 console.log('没有更多页面，任务完成！');
 break;
 }
 
 // 等待新页面内容加载
 console.log('等待新页面加载...');
 await sleep(4);
 
 pageCount++;
 }
 } catch (error) {
 console.error('执行过程中出错:', error);
 console.log('建议刷新页面后重新执行脚本');
 }
})();

版本二

text

(async () => {
 const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms * 1000));
 let data = document.querySelectorAll('.follow-btn__trigger.gray');
 console.log('获取本页关注数量:', data.length);
 let dataIndex = 0;
 let pageIndex = 0;
 while (dataIndex < data.length) {
 const x = data[dataIndex];
 console.log(`正在取消第:${dataIndex + 1} 个关注`);
 x.click();
 await sleep(1);
 if (data.length - 1 === dataIndex) {
 let pages = document.querySelectorAll('.vui_button.vui_button--no-transition.vui_pagenation--btn.vui_pagenation--btn-num');
 await sleep(0.5);
 if (pages.length > 1) {
 pageIndex = pageIndex === 1 ? 0 : 1;
 } else {
 console.log(`没有更多的页面了`);
 break;
 }
 pages[pageIndex].click();
 await sleep(1);
 data = document.querySelectorAll('.follow-btn__trigger.gray');
 console.log('重新获取本页数量:', data.length);
 dataIndex = 0;
 } else {
 dataIndex++;
 }
 }
 console.log('已取消全部关注');
})();

批量移除粉丝

text

(async () => {
 const sleep = (s) => new Promise(resolve => setTimeout(resolve, s * 1000));
 for (var i = 0; i < 100; i++) {
 try {
 var parent = document.getElementsByClassName('vui_icon sic-BDC-more_vertical_fill icon')[0];
 var enterEvent = new MouseEvent('mouseenter', {
 bubbles: true, // 允许事件冒泡
 cancelable: true, // 事件可被取消
 view: window // 关联当前窗口
 });
 parent.dispatchEvent(enterEvent);
 var menuItems = document.getElementsByClassName('menu-popover__panel-item');
 for (var j = 0; j < menuItems.length; j++) {
 if (menuItems[j].innerText === '移除粉丝') {
 console.log("成功移除粉丝");
 menuItems[j].click();
 }
 }
 // 模拟鼠标离开（可选）
 const leaveEvent = new MouseEvent('mouseleave', { bubbles: true, cancelable: true });
 parent.dispatchEvent(leaveEvent);
 document.getElementsByClassName('vui_checkbox--label')[0].click();
 document.getElementsByClassName('vui_button vui_button--blue vui_dialog--btn vui_dialog--btn-confirm')[0].click();
 } catch (error) {
 }
 await sleep(1); // 等待1秒防触发风控
 }
 console.log('清理完毕！重新执行脚本');
})();

如果是服务器挂可以用这个持续窗口bat

Hello&Qgxs引导页

Fri, 31 Jan 2025 00:00:00 +0000

Hello&Qgxs引导页 html单页 AI写的自适应页面可以托管Cloudflare

当做小页面放在博客里面，挺不错的我的演示页面dh.20210701.xyz

text

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta name="robots" content="index, follow">
 <meta name="description" content="Hello Qgxs - 欢迎来到我的个人网站">
 <meta name="theme-color" content="#0ea5e9">
 <!-- Cloudflare优化 -->
 <meta http-equiv="Cache-Control" content="public, max-age=31536000, immutable">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>Qgxs&Hello</title>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link rel="preconnect" href="https://events.vercount.one" crossorigin>
 <link rel="preconnect" href="https://www.20210701.xyz" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap&text=Hello%20Qgxs" rel="stylesheet" media="print" onload="this.media='all'">
 <noscript>
 <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
 </noscript>
 <style>*{margin:0;padding:0;box-sizing:border-box}:root{--primary:#0ea5e9;--dark:#0f172a}body{background-color:var(--dark);color:white;font-family:system-ui,-apple-system,sans-serif;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}.text-gradient{background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.glow{filter:drop-shadow(0 0 6px rgba(14,165,233,0.5));-webkit-filter:drop-shadow(0 0 6px rgba(14,165,233,0.5))}.bg-grid{background-size:20px 20px;background-image:linear-gradient(to right,rgba(14,165,233,0.03) 1px,transparent 1px),linear-gradient(to bottom,rgba(14,165,233,0.03) 1px,transparent 1px)}@keyframes sweep{0%{background-position:-200% 0}100%{background-position:200% 0}}.text-sweep{background:linear-gradient(90deg,rgba(255,255,255,0.1),rgba(255,255,255,0.9),rgba(255,255,255,0.1));background-size:200% 100%;animation:sweep 4s ease-in-out infinite;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.compact-stat{background:rgba(14,165,233,0.08);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);border:1px solid rgba(14,165,233,0.15)}.fixed-bg{position:fixed;inset:0;z-index:0}.bg-blob{position:fixed;border-radius:50%;filter:blur(80px);opacity:0.15;pointer-events:none}.bg-blob-1{width:60vh;height:60vh;background-color:var(--primary);transform:translate(-50%,-50%);z-index:0}.bg-blob-2{width:40vh;height:40vh;background-color:var(--primary);opacity:0.1;transform:translate(33%,33%);z-index:0}main{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;text-align:center;padding:1.5rem;width:100%;max-width:32rem;opacity:0;transform:translateY(20px);animation:fadeIn 0.6s ease forwards;animation-delay:0.1s}@keyframes fadeIn{to{opacity:1;transform:translateY(0)}}.avatar-container{margin-bottom:1rem}.avatar{width:6rem;height:6rem;border-radius:50%;overflow:hidden;border:2px solid rgba(14,165,233,0.3)}@media (min-width:768px){.avatar{width:7rem;height:7rem}}.avatar img{width:100%;height:100%;object-fit:cover}h1{font-size:clamp(2rem,5vw,3rem);font-family:'Pacifico',cursive;margin-bottom:0.5rem}.welcome-text{color:#9ca3af;font-size:0.875rem;margin-bottom:1.5rem;max-width:24rem;line-height:1.5;padding:0 1rem}@media (min-width:768px){.welcome-text{font-size:1rem}}.button-group{display:flex;gap:0.75rem;margin-bottom:1.5rem}.btn{padding:0.5rem 1rem;border-radius:9999px;background-color:rgba(255,255,255,0.05);color:white;text-decoration:none;display:flex;align-items:center;gap:0.375rem;font-size:0.875rem;transition:all 0.3s ease}.btn:hover{background-color:rgba(255,255,255,0.1);transform:scale(1.05)}.btn-primary{padding:0.625rem 1.5rem;background:linear-gradient(to right,var(--primary),#38bdf8);color:white;font-weight:500}.btn-primary:hover{background:linear-gradient(to right,#38bdf8,var(--primary));background-color:transparent}.stats{position:relative;z-index:10;margin:0.5rem 0}.compact-stat{padding:0.375rem 0.75rem;border-radius:9999px;display:flex;align-items:center;gap:0.75rem;font-size:0.75rem}.stat-item{display:flex;align-items:center;gap:0.25rem}.stat-divider{color:rgba(14,165,233,0.4)}footer{position:relative;z-index:10;margin-top:0.25rem;padding:1rem;color:#9ca3af;font-size:0.75rem;width:100%;text-align:center}.animate-pulse{animation:pulse 0.5s ease-in-out}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}</style>
</head>
<body>
 <div class="fixed-bg bg-grid"></div>
 <div class="bg-blob bg-blob-1"></div>
 <div class="bg-blob bg-blob-2"></div>

 <main>
 <div class="avatar-container">
 <div class="avatar glow">
 <img src="https://www.20210701.xyz/icon.jpeg" alt="Avatar" loading="lazy" decoding="async">
 </div>
 </div>

 <h1 data-text="Hello Qgxs">
 <span class="text-sweep">Hello Qgxs</span>
 </h1>

 <!-- 紧凑版欢迎文本 -->
 <div class="welcome-text">
 <p>
 <span style="color: rgba(14, 165, 233, 0.9);">欢迎到来。</span>
 愿本站伴我走过春秋岁月，
 </p>
 <p>
 也祝各位访客<span style="color: rgba(14, 165, 233, 0.9); margin-left: 0.25rem;">生活顺心。</span>
 </p>
 </div>

 <div class="button-group">
 <a href="https://www.20210701.xyz/" class="btn glow" aria-label="访问我的博客">
 <span role="img" aria-label="博客">📚</span>
 <span>博客</span>
 </a>
 <a href="https://20210701.xyz/" class="btn glow" aria-label="访问100周年网站">
 <span role="img" aria-label="100周年">🇨🇳</span>
 <span>100周年</span>
 </a>
 </div>

 <a href="https://www.20210701.xyz/about.html" class="btn btn-primary glow" aria-label="了解关于我">
 关于我
 </a>
 </main>

 <!-- 紧凑统计信息 - 使用 Vercount -->
 <div class="stats">
 <div class="compact-stat glow">
 <div class="stat-item">
 <span style="color: #0ea5e9;">⏱️</span>
 <span id="run-days">计算中...</span>
 </div>
 
 <div class="stat-divider">•</div>
 
 <div class="stat-item">
 <span style="color: #0ea5e9;">👁️</span>
 <span>
 浏览 <span id="vercount_value_site_pv">Loading</span>次
 </span>
 </div>
 </div>
 </div>

 <footer>
 © 2025 Hello Qgxs. All rights reserved.
 <br>
 <span style="font-size: 0.625rem; opacity: 0.7;">托管在 <a href="https://www.cloudflare.com" target="_blank" rel="noopener noreferrer" style="color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(255, 255, 255, 0.3);">Cloudflare</a> | 由 <a href="https://www.cloudflare.com" target="_blank" rel="noopener noreferrer" style="color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(255, 255, 255, 0.3);">Cloudflare</a> CDN 提供加速与安全防护</span>
 </footer>

 <!-- Vercount 官方脚本 -->
 <script defer src="https://events.vercount.one/js"></script>

 <script>document.addEventListener('DOMContentLoaded',()=>{function u(){const e=new Date('2025-12-24'),t=new Date(),n=Math.floor((t-e)/(1e3*60*60*24));const o=document.getElementById('run-days');o&&(o.textContent=`${n}天`)}u();const e=document.getElementById('vercount_value_site_pv');if(e){function t(){if(e.textContent&&'Loading'!==e.textContent){const n=parseInt(e.textContent);return isNaN(n)||(e.textContent=n.toLocaleString()),!0}return!1}if(!t()){let n=0;const o=()=>{n++;if(!t()&&n<10)setTimeout(o,500*n);else if(n>=10&&'Loading'===e.textContent)e.textContent='0'};o()}}setInterval(u,30*60*1e3)});</script>
</body>
</html>

一个粉的宝塔默认页面系列

Fri, 31 Jan 2025 00:00:00 +0000

1.站点搭建成功提示

text

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>站点搭建成功 ✧(≖ ◡ ≖✿)</title>
 <style>
 * {margin: 0;padding: 0;box-sizing: border-box;font-family: "Microsoft YaHei", "PingFang SC", sans-serif;}
 body {min-height: 100vh;display: flex;align-items: center;justify-content: center;background: #fff5f8;padding: 20px;position: relative;overflow: hidden;}
 /* 可爱漂浮装饰 */
 .decor {position: absolute;pointer-events: none;z-index: 0;}
 .decor1 {top: 20%;left: 10%;font-size: 24px;color: #ffd6e0;animation: float 6s infinite ease-in-out;}
 .decor2 {bottom: 15%;right: 15%;font-size: 18px;color: #ffb3c6;animation: float 8s infinite ease-in-out 2s;}
 .decor3 {top: 60%;left: 20%;font-size: 20px;color: #ff99cc;animation: float 7s infinite ease-in-out 1s;}
 @keyframes float {
 0% {transform: translateY(0) rotate(0deg);}
 50% {transform: translateY(-15px) rotate(5deg);}
 100% {transform: translateY(0) rotate(0deg);}
 }
 /* 宝塔原生风格容器 */
 .box {
 background: #fff;
 padding: 40px 20px;
 border-radius: 16px;
 box-shadow: 0 3px 15px rgba(255,153,204,0.2);
 text-align: center;
 max-width: 400px;
 width: 100%;
 position: relative;
 z-index: 1;
 border: 2px solid #ffd6e0;
 }
 /* 可爱成功图标（替换原svg） */
 .success-icon {
 width: 64px;
 height: 64px;
 margin: 0 auto 20px;
 position: relative;
 }
 .success-icon::before {
 content: "✧";
 font-size: 64px;
 color: #ff6699;
 animation: bounce 1.5s infinite alternate;
 }
 @keyframes bounce {
 from {transform: scale(1);}
 to {transform: scale(1.1);}
 }
 h1 {
 font-size: 22px; /* 手机端缩小字体 */
 color: #ff6699;
 margin: 0 0 16px;
 font-weight: 600;
 text-shadow: 0 1px 3px rgba(255,102,153,0.15);
 letter-spacing: 0.5px; /* 微调字间距，避免换行 */
 }
 /* 响应式标题优化：小屏幕进一步缩小颜文字占比 */
 @media (max-width: 375px) {
 h1 {
 font-size: 20px;
 padding: 0 10px; /* 增加左右内边距，给文字更多空间 */
 }
 h1 span {
 font-size: 18px; /* 颜文字单独缩小 */
 }
 }
 p {
 color: #999;
 font-size: 15px;
 line-height: 1.6;
 margin-bottom: 28px;
 }
 /* 按钮样式（粉嫩主题） */
 a {
 display: inline-block;
 padding: 12px 30px;
 background: #ff99cc;
 color: #fff;
 text-decoration: none;
 border-radius: 30px;
 font-size: 15px;
 transition: all 0.3s ease;
 box-shadow: 0 2px 8px rgba(255,153,204,0.2);
 }
 a:hover {
 background: #ff6699;
 box-shadow: 0 4px 12px rgba(255,102,153,0.3);
 transform: translateY(-2px);
 }
 /* 底部版权 */
 .footer {
 font-size: 12px;
 color: #ffb3c6;
 margin-top: 30px;
 letter-spacing: 0.5px;
 }
 .footer::after {
 content: " ✧ෆ◞◟˃̶̤⌄˂̶̤⋆biubiu";
 }
 </style>
</head>
<body>
 <!-- 可爱漂浮装饰 -->
 <div class="decor decor1">✿</div>
 <div class="decor decor2">★</div>
 <div class="decor decor3">♡</div>

 <div class="box">
 <div class="success-icon"></div>
 <!-- 标题拆分颜文字，方便响应式调整 -->
 <h1>站点搭建成功啦 <span>✧(≖ ◡ ≖✿)</span></h1>
 <p>粉嫩小站已就绪，快去探索更多可爱玩法吧～</p>
 <a href="https://www.bt.cn/" target="_blank">官方文档</a>
 <div class="footer">© 宝塔面板 服务器管理工具</div>
 </div>
</body>
</html>

2.404提示页面

一个可能有效的防攻击代码….

Fri, 31 Jan 2025 00:00:00 +0000

互联网创作，仅供个人使用，如有侵权，请联系删除来源网络地址:https://loli520.com/286.html 我的演示页面: gj.qqgxs.qzz.io

text

<!DOCTYPE html><html lang="zh">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>求求你手下留情QAQ</title>
 <style>
 body {
 background: linear-gradient(180deg, #ffe4e9, #ffc0cb);
 font-family: "Comic Sans MS", "微软雅黑", cursive;
 margin: 0;
 padding: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 min-height: 100vh;
 }
 .container {
 max-width: 480px;
 width: 100%;
 padding: 20px;
 box-sizing: border-box;
 text-align: center;
 }
 .crying-girl {
 max-width: 240px;
 height: auto;
 animation: shake 1s infinite alternate;
 filter: drop-shadow(0px 5px 10px rgba(255, 77, 109, 0.3));
 margin-bottom: 15px;
 }
 @keyframes shake {
 0% { transform: translateX(-2px); }
 100% { transform: translateX(2px); }
 }
 .text, .small-text, .contact {
 background: rgba(255, 255, 255, 0.9);
 margin: 10px auto;
 padding: 10px;
 border-radius: 12px;
 box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
 max-width: 90%;
 }
 .text {
 font-size: 20px;
 color: #ff5e78;
 font-weight: bold;
 }
 .small-text {
 font-size: 14px;
 color: #666;
 }
 .contact {
 font-size: 16px;
 color: #ff4d6d;
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 6px;
 }
 .qq-icon {
 width: 22px;
 height: 22px;
 }
 .contact a {
 color: #ff4d6d;
 text-decoration: none;
 }
 .contact a:hover {
 text-decoration: underline;
 }
 .love-btn {
 background: linear-gradient(135deg, #ff5e78, #ff2e63);
 color: white;
 font-size: 16px;
 font-weight: bold;
 border: none;
 padding: 10px 20px;
 border-radius: 25px;
 cursor: pointer;
 margin-top: 15px;
 transition: 0.3s ease;
 }
 .love-btn:hover {
 transform: scale(1.05);
 }
 .popup {
 display: none;
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 background: #ffe4e9;
 padding: 20px;
 border-radius: 15px;
 text-align: center;
 box-shadow: 0px 4px 8px rgba(255, 94, 120, 0.2);
 width: 90%;
 max-width: 320px;
 }
 .popup-content p {
 font-size: 16px;
 color: #ff5e78;
 font-weight: bold;
 }
 .popup-content button {
 background: linear-gradient(135deg, #ff5e78, #ff2e63);
 color: white;
 font-size: 14px;
 border: none;
 padding: 8px 16px;
 border-radius: 20px;
 cursor: pointer;
 margin-top: 10px;
 }
 .popup-content button:hover {
 transform: scale(1.05);
 }
 </style>
</head>
<body>
 <div class="container">
 <img src="https://loli520.com/wp-content/uploads/2025/03/20250305085825937-backgrounderaser_1741136243.png" class="crying-girl" alt="可怜的小女孩">
 <div class="text">呜呜... 你真的要攻击人家吗？(つ﹏⊂)</div>
 <div class="small-text">
 人家只是个小小服务器…你这么大力，人家真的要坏掉了QAQ！<br>要不…先停一下，求求你啦~
 </div>
 <div class="contact">
 <img src="https://img.icons8.com/color/48/000000/qq.png" class="qq-icon" alt="QQ">
 <a href="https://qm.qq.com/q/9tcfSwgVNe">联系我: QQ 123456</a>
 </div>
 <button class="love-btn" onclick="showThanks()">💖 点一下手下留情 💖</button>
 </div>
 <div id="cute-popup" class="popup">
 <div class="popup-content">
 <p>谢谢你愿意和我聊聊 💖<br>点下面的按钮就能找到人家啦~<br>(>﹏<)</p>
 <button onclick="goToQQ()">✨ 来找人家玩 ✨</button>
 </div>
 </div>
 <script>
 function showThanks() {
 document.getElementById("cute-popup").style.display = "block";
 }
 function goToQQ() {
 window.location.href = "https://qm.qq.com/q/9tcfSwgVNe";
 }
 document.onkeydown = function (e) {
 if (e.keyCode == 123 || (e.ctrlKey && (e.keyCode == 85 || e.keyCode == 83))) {
 alert("嘤嘤嘤~宝宝，不要扒人家的代码啦！QAQ");
 return false;
 }
 };
 (function () {
 var element = new Image();
 Object.defineProperty(element, 'id', {
 get: function () {
 alert("喵喵喵~你在干嘛呀QAQ？");
 window.location.href = "about:blank";
 }
 });
 console.log('%c ', element);
 })();
 </script>
</body>
</html>

知足者常乐

Fri, 31 Jan 2025 00:00:00 +0000

果然，晚饭后就下起了雨，但我在心里却很开心。因为下雨会凉快。

生活真的好无味，但有时他有像加了盐的糖包，用香甜可口的外壳来掩盖他那痛苦的滋味。

不知从什么时候开始，不知道生活的目的是什么，我现在越来越消极了，没有以前那么热情了。就像躺平，但我怎么也躺不平。

中国共产党成立100周年纪念单页

Fri, 31 Jan 2025 00:00:00 +0000

html单页 AI写的自适应页面可以托管Cloudflare

当做小页面放在博客里面，挺不错的我的演示页面:20210701.xyz

text

<!doctype html>
<html lang="zh-CN">
<head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width,initial-scale=1" />
 <title>百年征程 · 热烈庆祝中国共产党成立100周年</title>

 <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&family=ZCOOL+QingKe+HuangYou&display=swap" rel="stylesheet">

 <style>
 :root{
 --red:#C91F1F;
 --deep-red:#961414;
 --gold:#D9A441;
 --bg:#FFF8F2;
 --text:#3b2f2f;
 --glass: rgba(255,255,255,0.65);
 --lantern-width:120px;
 --max-width:1100px;
 }
 *{box-sizing:border-box}
 html,body{height:100%}
 body{
 margin:0;
 font-family: "Noto Serif SC", "ZCOOL QingKe HuangYou", serif;
 color:var(--text);
 background:linear-gradient(180deg,#fff 0%, #FFF8F2 40%, #FFF1E6 100%);
 -webkit-font-smoothing:antialiased;
 -moz-osx-font-smoothing:grayscale;
 overflow-y:auto;
 }
 .ink-bg{
 position:fixed;
 inset:0;
 background-image:
 radial-gradient(circle at 8% 18%, rgba(0,0,0,0.02) 0 2%, transparent 10%),
 radial-gradient(circle at 88% 78%, rgba(0,0,0,0.02) 0 2%, transparent 12%);
 mix-blend-mode:multiply;
 pointer-events:none;
 z-index:0;
 }

 /* HERO */
 .hero{position:relative;padding:36px 20px;overflow:hidden}
 .hero-inner{
 display:flex;align-items:center;justify-content:space-between;gap:18px;
 max-width:1200px;margin:0 auto;position:relative;z-index:2;transition:transform .12s linear;
 }
 .left-deco,.right-deco{width:110px;flex:0 0 110px}
 .title-wrap{flex:1;text-align:center}
 .title{
 font-family:"ZCOOL QingKe HuangYou","Noto Serif SC",serif;color:var(--deep-red);
 font-size:56px;margin:0;letter-spacing:2px;text-shadow:0 6px 18px rgba(201,31,31,0.12);
 transform-origin:center;animation:float 6s ease-in-out infinite;
 }
 .subtitle{margin:8px 0 18px;color:#5c3e3e;font-size:16px}
 .ribbon{margin-top:14px;display:inline-block;background:linear-gradient(90deg,#D94343,#C22B2B);
 color:#FFF8F2;padding:8px 18px;border-radius:999px;box-shadow:0 6px 18px rgba(201,31,31,0.12);
 font-weight:600;letter-spacing:1px;font-size:14px}

 .clouds{position:absolute;left:0;right:0;bottom:-2px;height:120px;opacity:0.95;z-index:1}

 /* 布局：概览 + 时间轴（Grid 版，增强响应式） */
 .container{max-width:var(--max-width);margin:28px auto;padding:0 20px;display:block;gap:20px}
 .card{
 background:linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,250,245,0.96));
 border-radius:12px;padding:18px;box-shadow:0 8px 30px rgba(0,0,0,0.06);border:1px solid rgba(0,0,0,0.03);
 }
 .card h2{margin:0 0 8px 0}
 .card p{margin:0;font-size:15px;line-height:1.7}

 /* 纵向时间轴（基于 Grid 的行） */
 .timeline{padding:24px 16px 46px}
 .section-title{text-align:center;font-size:24px;margin:8px 0 20px;color:var(--deep-red)}
 .v-timeline{max-width:var(--max-width);margin:0 auto;position:relative;padding:20px 10px}
 .v-timeline::before{
 content:"";
 position:absolute;
 left:50%;
 top:8px;
 bottom:8px;
 width:6px;
 transform:translateX(-50%);
 background:linear-gradient(180deg,var(--gold),rgba(217,175,74,0.6));
 border-radius:6px;
 }
 .v-row{
 display:grid;
 grid-template-columns:1fr 60px 1fr;
 column-gap:20px;
 align-items:start;
 margin:18px 0;
 grid-auto-rows:auto;
 width:100%;
 }
 .v-item{
 padding:14px 18px;border-radius:12px;background:linear-gradient(180deg,#fff,#FFF7F5);
 box-shadow:0 8px 24px rgba(0,0,0,0.06);transition:transform .25s ease;
 width:100%;
 }
 .v-item:hover{transform:translateY(-6px)}
 .v-item .year{display:inline-block;padding:6px 10px;border-radius:999px;background:var(--red);color:#fff;font-weight:700;margin-bottom:8px}
 .v-item h4{margin:6px 0 8px;color:var(--deep-red)}
 .v-item p{margin:0;color:#5b4343;line-height:1.6}
 .v-center{display:flex;align-items:start;justify-content:center}
 .v-dot{
 width:16px;height:16px;border-radius:50%;background:var(--red);
 box-shadow:0 0 0 6px rgba(201,31,31,0.08);
 margin-top:12px;
 position:relative;
 }

 /* 庆祝区：放飞灯笼 */
 .celebrate{padding:32px 16px}
 .celebrate .panel{max-width:var(--max-width);margin:0 auto;background:linear-gradient(180deg,#fff,#FFF8F6);padding:18px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,0.06)}
 .controls{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
 .controls input[type="text"]{flex:1;padding:10px 12px;border-radius:10px;border:1px solid rgba(0,0,0,0.08);font-size:15px}
 .controls .btn{padding:10px 14px;border-radius:10px;cursor:pointer;background:var(--glass);border:1px solid rgba(0,0,0,0.06)}
 .controls .btn.primary{background:linear-gradient(180deg,var(--red),var(--deep-red));color:#fff;border:none}
 .preset-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
 .preset{padding:8px 12px;border-radius:999px;background:linear-gradient(90deg,#FFF4E8,#FFF0E6);border:1px solid rgba(0,0,0,0.04);cursor:pointer}

 /* 放飞容器（覆盖层） */
 .sky{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:visible}
 .lantern{
 position:absolute;width:var(--lantern-width);height:160px;left:50%;transform:translateX(-50%);
 pointer-events:none;will-change:transform,opacity;
 display:flex;align-items:flex-start;justify-content:center;
 font-family:"Noto Serif SC",serif;color:#3b1f1f;text-align:center;
 }
 .lantern .svg-wrap{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
 .lantern .msg{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);font-size:14px;padding:6px 8px;color:#2b100f;background:transparent;white-space:nowrap}
 @keyframes floatUp {
 0%{transform:translate(-50%, 0) scale(1); opacity:1}
 25%{transform:translate(calc(-50% + 20px), -25vh) scale(1.02)}
 60%{transform:translate(calc(-50% - 12px), -65vh) scale(1.04)}
 100%{transform:translate(calc(-50% + 8px), -120vh) scale(1.08); opacity:0}
 }

 /* 花瓣样式 */
 .petal{position:fixed;border-radius:45% 55% 40% 60%;pointer-events:none;mix-blend-mode:screen;will-change:transform,top,left,opacity;z-index:55}

 /* footer */
 .site-footer{padding:18px;text-align:center;color:#6b5656;font-size:14px;border-top:1px solid rgba(0,0,0,0.02);margin-top:28px}
 .site-footer a.footer-link{color:var(--deep-red);text-decoration:none;font-weight:600}
 .site-footer a.footer-link:hover{text-decoration:underline}

 /* 响应式：手机/窄屏下 — 去掉左侧竖线和圆点，保留对齐与触控间距 */
 @media (max-width:900px){
 .v-row{
 grid-template-columns:12px 1fr; /* 保留小间隙用于视觉平衡 */
 column-gap:12px;
 align-items:start;
 }

 /* 隐藏原来的竖线（desktop-only） */
 .v-timeline::before{
 display:none;
 }

 /* 保证第一列（占位）与第二列内容的默认分配 */
 .v-row > div:first-child{
 grid-column:1;
 display:block;
 padding-top:6px;
 }
 .v-row > div:last-child{
 grid-column:2;
 }

 /* 隐藏小屏上的圆点与其伪元素 */
 .v-dot,
 .v-dot::before,
 .v-dot::after {
 display:none !important;
 }

 /* 减小卡片内边距，提升可读性 */
 .v-item{padding:12px 14px;border-radius:10px}
 .v-item h4{font-size:16px}
 .v-item p{font-size:14px}
 .left-deco,.right-deco{display:none}

 /* 触摸友好：让时间轴项可聚焦（便于键盘/屏幕阅读器） */
 .v-item{outline: none}
 .v-item:focus{box-shadow:0 0 0 3px rgba(217,164,68,0.12);transform:none}
 }

 /* prefers-reduced-motion 支持（尊重用户偏好） */
 @media (prefers-reduced-motion: reduce) {
 .title { animation: none !important; }
 .lantern { animation: none !important; transition: none !important; opacity: 1 !important; }
 .petal { transition: none !important; }
 .v-item, .v-item:hover { transform: none !important; }
 }

 /* 限制 hero 视差在超大屏时的偏移（更稳健） */
 @media (min-width:1400px){
 .hero-inner{max-width:1300px}
 }
 </style>
</head>
<body>
 <div class="ink-bg" aria-hidden="true"></div>

 <header class="hero" role="banner">
 <div class="hero-inner" id="heroInner">
 <div class="left-deco" aria-hidden="true">
 <svg viewBox="0 0 200 200" width="110" height="110" aria-hidden="true">
 <defs><linearGradient id="g1" x1="0" x2="1"><stop offset="0" stop-color="#fff" stop-opacity="0.95"/><stop offset="1" stop-color="#FFD7D7"/></linearGradient></defs>
 <g fill="url(#g1)" stroke="#E04B3A" stroke-width="1.5"><path d="M100 20 C92 34,76 34,64 46 C86 44,84 74,100 74 C116 74,114 44,136 46 C124 34,108 34,100 20 Z"/><circle cx="100" cy="88" r="6" fill="#E04B3A"/></g>
 </svg>
 </div>

 <div class="title-wrap">
 <h1 class="title" id="mainTitle">百年征程</h1>
 <p class="subtitle">热烈庆祝中国共产党成立100周年</p>
 <div class="ribbon" aria-hidden="true">1921 — 2021 · 不忘初心 牢记使命</div>
 </div>

 <div class="right-deco" aria-hidden="true">
 <svg viewBox="0 0 120 220" width="110" height="110" aria-hidden="true">
 <g transform="translate(10,10)"><ellipse cx="50" cy="70" rx="42" ry="56" fill="#D92E2E" stroke="#B22222" stroke-width="2"/><rect x="46" y="6" width="8" height="20" fill="#B22222"/><path d="M50 126 L50 150" stroke="#B22222" stroke-width="3" /></g>
 </svg>
 </div>
 </div>

 <svg class="clouds" viewBox="0 0 1400 200" preserveAspectRatio="none" aria-hidden="true">
 <path d="M0 120 C150 40, 350 40, 500 120 C650 200, 850 200, 1000 120 C1150 40, 1250 40, 1400 120 L1400 200 L0 200 Z" fill="#FFF4E8" opacity="0.85"/>
 </svg>
 </header>

 <main>
 <section class="container" aria-label="概览">
 <div class="card" role="region" aria-labelledby="aboutTitle">
 <h2 id="aboutTitle">百年光辉 · 百年征程</h2>
 <p>
 百年，是历史在时光上刻下的深深纹理；百年，也是每一次初心的温热延续。我们以传统纹样为根、以当代版式为形，将峥嵘岁月的厚重与今日希望的光芒并置呈现——柔和的色调、流动的线条与细腻的留白，既缅怀过往的奋斗，也为未来铺陈可能。愿历史的每一段记忆化作照亮前路的灯塔，愿不变的初心继续转化为前行的力量，共同书写新时代的恢弘篇章。
 </p>
 </div>
 </section>

 <section class="timeline" id="timeline" aria-labelledby="timelineTitle">
 <h2 class="section-title" id="timelineTitle">百年时间轴</h2>
 <div class="v-timeline" id="vTimeline" role="list" aria-label="百年时间轴">
 <!-- JS 渲染：基于 Grid 的每行三列（桌面）或两列（移动）-->
 </div>
 </section>

 <section class="celebrate" aria-labelledby="celebrateTitle">
 <h2 id="celebrateTitle" style="text-align:center;color:var(--deep-red)">放飞灯笼 · 致敬百年</h2>
 <div class="celebrate panel" role="region" aria-label="放飞灯笼互动">
 <div class="controls" aria-hidden="false">
 <input id="wishInput" type="text" placeholder="输入你的祝福，最多 24 字（示例：祝福祖国繁荣昌盛）" maxlength="24" />
 <button id="autoBtn" class="btn" title="随机祝福">随机祝福</button>
 <button id="launchBtn" class="btn primary" title="放飞灯笼">放飞灯笼</button>
 </div>

 <div class="preset-row" aria-hidden="true">
 <div class="preset" data-text="祝福祖国繁荣昌盛" tabindex="0">祝福祖国繁荣昌盛</div>
 <div class="preset" data-text="不忘初心，牢记使命" tabindex="0">不忘初心，牢记使命</div>
 <div class="preset" data-text="人民幸福，国泰民安" tabindex="0">人民幸福，国泰民安</div>
 </div>

 <p style="color:#6b5252;margin-top:6px">输入祝福后点击“放飞灯笼”，祝福将以书法风格出现在灯笼上，缓缓升入夜空，具有中国古典氛围。页面支持多次放飞。</p>
 </div>
 </section>

 <footer class="site-footer" role="contentinfo">
 <div>
 托管在
 <a class="footer-link" href="https://www.cloudflare.com/" target="_blank" rel="noopener noreferrer" title="访问 Cloudflare 官网" aria-label="访问 Cloudflare 官网">
 Cloudflare
 </a>
 | 由 Cloudflare CDN 提供加速与安全防护
 </div>
 <div style="margin-top:8px;">
 <a href="https://dh.20210701.xyz/" target="_blank" rel="noopener noreferrer">Hello &amp; Qgxs</a> &nbsp;|&nbsp;
 <a href="https://www.20210701.xyz/" target="_blank" rel="noopener noreferrer">我的博客</a> &nbsp;|&nbsp;
 <a href="https://www.20210701.xyz/about.html" target="_blank" rel="noopener noreferrer">关于我</a>
 </div>
 <div style="margin-top:6px;color:#8a6a6a;font-size:13px">致敬历史，面向未来 · 1921–2021</div>
 </footer>
 </main>

 <!-- 放飞层 & 花瓣容器 -->
 <div class="sky" id="skyLayer" aria-hidden="true"></div>
 <div id="petalContainer" aria-hidden="true"></div>

 <script>
 (function(){
 // 时间轴数据（可按需修改）
 const timelineData = [
 {year:1921, title:'中国共产党成立', desc:'中国共产党在上海和嘉兴南湖成立，开启了中国革命的新纪元。'},
 {year:1949, title:'中华人民共和国成立', desc:'在中国共产党的领导下，中华人民共和国成立，开启民族复兴的新篇章。'},
 {year:1978, title:'改革开放', desc:'实行改革开放，推动经济体制改革与持续发展，实现国家现代化的快速推进。'},
 {year:1997, title:'香港回归', desc:'香港回归祖国怀抱，国家主权与统一得到进一步巩固。'},
 {year:2012, title:'新时代开启', desc:'党的十八大以来，中国进入新时代，提出全面建成小康、奋斗目标与现代化建设。'},
 {year:2021, title:'百年华诞', desc:'庆祝中国共产党成立一百周年，回顾奋斗历程，展望未来的宏伟蓝图。'}
 ];

 // 渲染纵向时间轴（桌面：交错左右；移动：点/线已隐藏，仅内容）
 const vTimeline = document.getElementById('vTimeline');
 function renderTimeline(){
 vTimeline.innerHTML = '';
 timelineData.forEach((item, idx) => {
 const row = document.createElement('div');
 row.className = 'v-row';
 row.setAttribute('role','listitem');
 row.setAttribute('aria-label', item.year + ' ' + item.title);

 // For mobile we use two-column row: small left gap + content on right.
 // For desktop we preserve the original three-column alternating layout.
 if (window.matchMedia('(min-width:901px)').matches) {
 const leftCell = document.createElement('div');
 const middleCell = document.createElement('div'); middleCell.className = 'v-center';
 const rightCell = document.createElement('div');

 const itemEl = document.createElement('div');
 itemEl.className = 'v-item';
 itemEl.setAttribute('tabindex', '0');
 itemEl.innerHTML = '<div class="year">' + item.year + '</div>' +
 '<h4>' + item.title + '</h4>' +
 '<p>' + item.desc + '</p>';

 const dot = document.createElement('div');
 dot.className = 'v-dot';
 dot.setAttribute('aria-hidden','true');

 if (idx % 2 === 0) {
 leftCell.appendChild(itemEl);
 middleCell.appendChild(dot);
 } else {
 rightCell.appendChild(itemEl);
 middleCell.appendChild(dot);
 }
 row.appendChild(leftCell);
 row.appendChild(middleCell);
 row.appendChild(rightCell);
 } else {
 const gapCell = document.createElement('div');
 const contentCell = document.createElement('div');

 const itemEl = document.createElement('div');
 itemEl.className = 'v-item';
 itemEl.setAttribute('tabindex', '0');
 itemEl.innerHTML = '<div class="year">' + item.year + '</div>' +
 '<h4>' + item.title + '</h4>' +
 '<p>' + item.desc + '</p>';

 // Keep a small left cell (gap) for visual balance but hide dots/lines via CSS
 gapCell.appendChild(document.createElement('div'));
 contentCell.appendChild(itemEl);

 row.appendChild(gapCell);
 row.appendChild(contentCell);
 }

 vTimeline.appendChild(row);
 });
 }

 // 视差（小幅），现代化监听并在触摸/粗指针设备禁用
 function enableParallax(){
 const hero = document.getElementById('heroInner');
 if (!hero) return;

 // Disable parallax on touch devices or coarse pointers
 const prefersCoarse = window.matchMedia('(pointer: coarse)').matches;
 if (prefersCoarse) { hero.style.transform = 'none'; return; }

 function onMouseMove(e){
 const cx = window.innerWidth/2, cy = window.innerHeight/2;
 const dx = (e.clientX - cx) / cx;
 const dy = (e.clientY - cy) / cy;
 hero.style.transform = 'translateX(' + (dx*3) + 'px) translateY(' + (dy*2.5) + 'px)';
 }
 window.addEventListener('mousemove', onMouseMove);

 const mq = window.matchMedia('(max-width:900px)');
 function check(e){ if (mq.matches) hero.style.transform='none'; }
 if (typeof mq.addEventListener === 'function') {
 mq.addEventListener('change', check);
 } else if (typeof mq.addListener === 'function') {
 mq.addListener(check);
 }
 check();
 }

 // 花瓣（轻柔）
 const petalContainer = document.getElementById('petalContainer');
 function createPetal(){
 const el = document.createElement('div');
 el.className = 'petal';
 const size = (Math.random()*14 + 10) | 0;
 el.style.width = size + 'px';
 el.style.height = Math.round(size * 1.2) + 'px';
 el.style.left = (Math.random() * 100) + 'vw';
 el.style.top = '-6vh';
 el.style.background = 'radial-gradient(circle at 30% 30%, #fff8f8, #ffcfcf)';
 el.style.opacity = (0.55 + Math.random()*0.45).toFixed(2);
 el.style.transform = 'rotate(' + (Math.random()*360) + 'deg)';
 el.style.transition = 'transform ' + (10+Math.random()*6) + 's linear, top ' + (10+Math.random()*6) + 's linear, left ' + (8+Math.random()*6) + 's linear, opacity 2s';
 petalContainer.appendChild(el);

 requestAnimationFrame(() => {
 el.style.top = (80 + Math.random()*20) + 'vh';
 el.style.left = (Math.random()*100) + 'vw';
 el.style.transform = 'rotate(' + (Math.random()*720 - 360) + 'deg) translateX(' + (Math.random()*40-20) + 'px)';
 });

 setTimeout(()=> el.remove(), 16000);
 }
 let petalTimer = null;
 function startPetals(){
 if (petalTimer) return;
 petalTimer = setInterval(createPetal, 420);
 for (let i=0;i<6;i++) setTimeout(createPetal, i*160);
 }
 function stopPetals(){ clearInterval(petalTimer); petalTimer = null; }

 // 放飞灯笼
 const sky = document.getElementById('skyLayer');
 const wishInput = document.getElementById('wishInput');
 const launchBtn = document.getElementById('launchBtn');
 const autoBtn = document.getElementById('autoBtn');
 const presets = Array.from(document.querySelectorAll('.preset'));

 const autoTexts = [
 '祝福祖国繁荣昌盛',
 '不忘初心，牢记使命',
 '人民幸福，国泰民安',
 '百年辉煌，继往开来',
 '砥砺前行，共创未来'
 ];

 // keyboard support for preset chips
 presets.forEach(p => {
 p.addEventListener('click', ()=> {
 wishInput.value = p.dataset.text || '';
 });
 p.addEventListener('keydown', (e) => {
 if (e.key === 'Enter' || e.key === ' ') {
 e.preventDefault();
 p.click();
 }
 });
 });

 autoBtn.addEventListener('click', ()=> {
 const t = autoTexts[Math.floor(Math.random()*autoTexts.length)];
 wishInput.value = t;
 });

 function createLantern(text){
 const el = document.createElement('div');
 el.className = 'lantern';
 const startX = Math.random()*80 + 10;
 const colorHue = 8 + Math.round(Math.random()*30);
 el.style.left = startX + 'vw';
 el.style.bottom = '-18vh';
 el.style.opacity = '0';
 el.style.zIndex = 65;

 el.innerHTML = '<div class="svg-wrap" aria-hidden="true">'
 + '<svg viewBox="0 0 100 140" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">'
 + '<defs><linearGradient id="lg" x1="0" x2="0" y1="0" y2="1"><stop offset="0" stop-color="#FFD6D6"/><stop offset="1" stop-color="#FFB7B7"/></linearGradient></defs>'
 + '<g transform="translate(0,0)">'
 + '<ellipse cx="50" cy="50" rx="36" ry="46" fill="hsl(' + colorHue + ' 80% 55%)" stroke="#B22222" stroke-width="2"/>'
 + '<rect x="44" y="4" width="12" height="14" fill="#B22222" />'
 + '<path d="M50 96 L50 116" stroke="#8b1a1a" stroke-width="2" />'
 + '</g></svg></div>'
 + '<div class="msg">' + escapeHtml(text) + '</div>';

 const dur = 9000 + Math.random()*7000;
 el.style.transition = 'opacity 600ms ease';
 sky.appendChild(el);

 requestAnimationFrame(()=> {
 el.style.opacity = '1';
 el.style.animation = 'floatUp ' + (dur/1000) + 's linear forwards';
 });

 for (let i=0;i<2;i++) setTimeout(createPetal, Math.random()*800);

 setTimeout(()=> { el.remove(); }, dur + 600);
 }

 function escapeHtml(s){ return String(s || '').replace(/[&<>"']/g, function(m){ return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[m]; }); }

 launchBtn.addEventListener('click', ()=> {
 const text = wishInput.value.trim() || autoTexts[Math.floor(Math.random()*autoTexts.length)];
 createLantern(text);
 });

 wishInput.addEventListener('keydown', function(e){
 if (e.key === 'Enter'){ e.preventDefault(); launchBtn.click(); }
 });

 // 初始化
 function init(){
 renderTimeline();
 enableParallax();
 // 预热花瓣（小批量以避免内存峰值）
 setTimeout(startPetals, 800);
 setTimeout(stopPetals, 7000);
 // 标题入场（将动画禁用于 reduced-motion 首选项）
 const title = document.getElementById('mainTitle');
 try {
 title.animate([{opacity:0, transform:'translateY(18px) scale(0.98)'},{opacity:1, transform:'translateY(0) scale(1)'}], {duration:900, easing:'cubic-bezier(.2,.8,.2,1)'});
 } catch (e) { /* animation not supported */ }
 }

 // Re-render timeline on resize so mobile/desktop layout adapts when device rotated
 let resizeTimer = null;
 window.addEventListener('resize', () => {
 clearTimeout(resizeTimer);
 resizeTimer = setTimeout(renderTimeline, 160);
 });

 init();

 // 暴露少量调试接口（可移除）
 window.__celebrate = {createLantern, startPetals, stopPetals};
 })();
 </script>
</body>
</html>

Fuwari & Mizuki 博客模板简易使用指南

Thu, 30 Jan 2025 00:00:00 +0000

封面图片来源：来源

本博客模板基于 Astro 构建。本指南中未提及的内容，你可前往 Astro 官方文档查阅答案。

文章前置元数据说明

yaml

---
title: 我的第一篇博客文章
published: 2025-01-31
description: 这是我新搭建的 Astro 博客的第一篇文章
image: ./cover.jpg
tags: [分享, 示例标签2]
category: qgxs
draft: false
---

yaml

---
title: 111
published: 2025-01-31
description: 111
tags: ["分享"]
category: qgxs
draft: false
---

配置项	说明
`title`	文章标题
`published`	文章发布日期
`description`	文章简短描述，将在博客首页展示
`image`	文章封面图片路径 1. 以 `http://` 或 `https://` 开头：使用网络图片 2. 以 `/` 开头：引用 `public` 目录下的本地图片 3. 无上述前缀：引用与当前 Markdown 文件同级目录的图片
`tags`	文章标签
`category`	文章分类
`draft`	文章草稿标识，设为 true 时该文章将不会在博客中展示

文章文件的存放位置

文章文件需存放至 src/content/posts/ 目录下。你也可创建子目录，更规范地管理文章及相关资源文件。

画板示例文章

Thu, 02 May 2024 00:00:00 +0000

此处文字会放在页面上方，该目录下的excalidraw文件会自动渲染为画板，名称无所谓
可以通过comment: false开关评论

不留下点什么吗

Mon, 01 Jan 0001 00:00:00 +0000

来加入我们叭

Mon, 01 Jan 0001 00:00:00 +0000

搜索

Mon, 01 Jan 0001 00:00:00 +0000

追番

Mon, 01 Jan 0001 00:00:00 +0000