若云博客 · Knowledge Base

Appearance

🌐 ruoyun.vip 个人数字化主页 - 架构逻辑与 LLM 上下文开发手册 ​

💡 文档定位与使用须知：
本文档是为 ruoyun.vip 官网主页 专属打造的系统架构、设计美学、代码逻辑与工程规范档案。
当你在未来需要使用 AI 大模型（如 Antigravity / Claude / ChatGPT / Gemini 等）对主页进行功能迭代、UI 改版或添加新项目时，直接将本文档作为背景上下文（Context）上传或复制给大模型，大模型即可瞬间理解整个项目的技术栈、文件映射与运维规范，实现零偏差的高质量二次开发！

🏗️ 一、 技术架构选型与极客美学理念 ​

1. 技术栈选型 (Tech Stack) ​

  • 核心理念：拒绝臃肿，追求极致轻量与光速加载。不采用 React / Vue / TailwindCSS 等重型编译框架，全站基于原生前沿 Web 标准构建。
  • 结构层 (HTML5)：采用高度语义化的 HTML5 标签 (<header>, <nav>, <main>, <section>, <footer>)，原生支持最佳 SEO 与无障碍阅读。
  • 表现层 (Vanilla CSS3)：采用 CSS Variables 变量化设计系统，原生实现毛玻璃玻璃拟态 (Glassmorphism)、发光微动画、响应式 CSS Grid / Flex 布局与深色赛博朋克主题。
  • 逻辑与交互层 (Vanilla JS)：无任何第三方依赖库。完全原生编写 HTML5 Canvas 神经网络粒子系统、打字机特效、DOM 3D 透视跟随、项目过滤与剪贴板交互。

2. 设计美学系统 (Design System Tokens) ​

主页视觉基于 赛博朋克极客风 + 玻璃拟态光影 打造，核心设计 Token 均在 style.css 的 :root 中声明：

  • 色彩映射：
    • 深黑底色：--bg-dark: #07090e; (深邃黑曜石，突出霓虹高光)
    • 玻璃面板：--bg-panel: rgba(18, 24, 38, 0.6); + backdrop-filter: blur(16px);
    • 青蓝高光：--accent-cyan: #00f2fe; (主品牌色，标识技术与极速)
    • 电光蓝紫：--accent-blue: #4facfe; / --accent-purple: #9f55ff; (渐变与连线)
    • 在线绿色：--accent-green: #00e676; (用于状态灯与 A+ 标识)
  • 字体排版：
    • 主标题与正文：引入 Google Fonts 特质现代无衬线字体 'Outfit' 与 'Noto Sans SC'。
    • 代码与极客指标：使用等宽编程字体 'JetBrains Mono', monospace，强化极客硬核气场。

📁 二、 文件结构与服务器物理映射 ​

1. 目录架构 ​

项目在本地开发机的存储路径为：/Users/erwin/Downloads/deepsearch/tengxunyun/ruoyun_homepage/
服务器端（腾讯云主机 txcloud）部署路径为：/var/www/ruoyun.vip/

text
ruoyun_homepage/                    <-- 本地项目工程根目录
 ├── index.html                     # 网站首页主结构（包含页面骨架、全栈技能图谱、项目实验室卡片）
 ├── style.css                      # 赛博朋克毛玻璃样式表（包含全局主题变量、响应式布局、高光微动画）
 ├── script.js                      # 交互引擎脚本（包含 Canvas 粒子星空、打字机、筛选器、3D 悬浮移位）
 ├── avatar.jpg                     # 男性极客云架构师专属全息定制头像（已压缩优化）
 ├── favicon.png                    # 21KB 高清赛博朋克六边形电路云图标（优先被现代浏览器加载）
 └── favicon.ico                    # 6KB 多尺寸微型标准图标（用于兼容传统浏览器抓取）

2. 跨站点图标协同 ​

为了保证主站与博客子站 (blog.ruoyun.vip) 的品牌视觉统一，每次发布主页时，自动化部署脚本会将 favicon.png 和 favicon.ico 同时复制一份到 /var/www/blog/ 目录下。

🧠 三、 核心模块制作逻辑与代码解析 ​

1. HTML5 神经网络粒子交互引擎 (script.js -> initParticleCanvas) ​

  • 实现逻辑：利用绝对定位的 <canvas id="particle-canvas"> 作为页面最底层底图。
  • 物理引力场：初始化时根据窗口分辨率动态生成 60~80 个悬浮节点（Particle 类）。当两点间距离小于 120px 时，通过 ctx.lineTo 绘制渐变透明度的青蓝色连线，模拟数据神经网络。
  • 鼠标磁吸交互：监听 window.onmousemove。当用户鼠标进入粒子周围 150px 半径时，施加斥力/引力缓冲算法，使四周的粒子跟随指针优雅飘动。

2. 首屏极客打字机特效 (script.js -> initTypewriter) ​

  • 实现逻辑：通过 setTimeout 递归控制字符的截取与追加。
  • 内容矩阵：自动在以下极客身份标签中循环切换：
    • "Cloud & DevOps Architect." (云原生与 DevOps 架构师)
    • "High-Concurrency Nginx Specialist." (高并发 Nginx 专家)
    • "Linux Kernel 7.0 Performance Tuner." (Linux 7.0 内核调优师)
    • "Full-Stack Modern Web Developer." (现代全栈开发者)

3. 项目实验室多维度筛选器 (script.js -> initProjectFiltering) ​

  • 实现逻辑：前端零开销 DOM 过滤。在 HTML 中为每个卡片标注自定义属性 data-category="cloud security" 等。
  • 平滑过渡：用户点击按钮时，JS 结合 CSS 的 opacity 与 transform: scale(0.95) 实现 300ms 缩放消隐动画，再改变 display 属性，彻底告别生硬的页面闪烁。

4. 3D 名片透视跟随 (script.js -> init3DTilt) ​

  • 实现逻辑：监听桌面端鼠标在 .tilt-effect 卡片上的坐标。
  • 透视计算：计算鼠标相对于卡片中心的偏移比，利用 CSS transform: perspective(1000px) rotateX() rotateY() 动态计算旋转角，赋予名片真实光影立体感。

🚀 四、 一键部署流水线与运维指南 ​

当你在本地修改完任意代码或图片素材后，无需手动 FTP 上传。可以直接在终端执行以下组合管道命令，完成从本地压缩、SSH 穿透、服务器远程解压、权限归属设定到 macOS 垃圾文件清理的全套自动化发布：

bash
# 在本地直接执行此命令，一键极速发布到云服务器：
tar czf - -C /Users/erwin/Downloads/deepsearch/tengxunyun/ruoyun_homepage . | ssh txcloud 'sudo tar xzf - -C /var/www/ruoyun.vip/ && sudo cp -f /var/www/ruoyun.vip/favicon* /var/www/blog/ && sudo chown -R root:root /var/www/ruoyun.vip/ /var/www/blog/ && sudo rm -f /var/www/ruoyun.vip/._* /var/www/ruoyun.vip/.DS_Store'

💡 缓存清理技巧：
云服务器上的 Nginx 针对静态资源配置了长达 30 天的强缓存。如果你在浏览器看到旧样式或旧图片，请使用 Cmd + Shift + R (Mac Chrome/Edge) 或 Option + Cmd + E (Safari) 清理缓存强制刷新。

🤖 五、 给予下一次大模型 (LLM) 迭代的黄金提示词模板 ​

当你想让大模型帮你修改本主页时，请复制并发送以下指令提示词：

场景 A：想在“技术实验室”中新增一个实战项目卡片 ​

提示词给大模型：
“请参考我上传的《ruoyun_vip_homepage_llm_context.md》架构文档。我需要在 index.html 的 ‘技术实验室 (lab-section)’ 中新增一个项目卡片。
项目名称：【这里填写名称，例如：高可用 K8s 集群部署】；
项目标签分类 (data-category)：【例如：cloud】；
项目亮点描述：【这里填写描述】；
底部指标标签 (metric)：【填写2-3个指标，如 ⚡ Pods 零宕机】。
请严格保持现有毛玻璃 .glass-panel 样式和设计 Token，输出修改后的 HTML 片段，并通过一键 deployment 命令帮我上线。”

场景 B：想调整主页的配色或新增交互动效 ​

提示词给大模型：
“请参考我上传的《ruoyun_vip_homepage_llm_context.md》架构文档。我想对主页的视觉进行优化：【例如：把主高光色青蓝 --accent-cyan 换成极客翡翠绿，或者在导航栏右侧增加一个日夜间主题切换按钮】。
请修改 style.css 和 script.js，保持原生 JS 无框架依赖，确保页面性能依旧保持 A+ 水准并执行上线命令。”

场景 C：更新个人历程时间轴 (Milestones) ​

提示词给大模型：
“请参考我上传的《ruoyun_vip_homepage_llm_context.md》架构文档。我需要在 index.html 的历程轨迹 (.timeline) 最上方插入一条新的成长记录。时间：【如 2026.08】，事件标题：【填写标题】，详细内容：【填写说明】。请帮我修改 HTML 并同步发布到云端。”

Powered by VitePress & High-Concurrency Nginx Engine · SSL Labs A+ Certified

Copyright © 2026 若云 (RuoYun). All Rights Reserved. Domain: blog.ruoyun.vip