[{"content":"欢迎来到测试文章 这是一篇用于测试博客主页效果的文章。通过这篇文章，你可以看到：\n彩色阴影效果在文章卡片上的应用 渐变文字和动画效果 背景图片的视差滚动效果 玻璃态设计的现代感 现代网页设计趋势 现代网页设计越来越注重视觉层次和用户体验。一些流行的设计元素包括：\n1. 玻璃态效果（Glassmorphism） 玻璃态设计通过半透明背景和模糊效果，创造出类似磨砂玻璃的视觉效果。这种设计风格既现代又优雅。\n2. 渐变色彩 大胆的渐变色彩可以为页面增添活力和深度。从紫色到粉色的渐变，从蓝色到青绿色的过渡，都能创造出令人印象深刻的视觉效果。\n3. 微交互动画 细微的动画效果可以提升用户体验，让界面更加生动有趣。悬停效果、过渡动画、加载动画等都是常见的微交互设计。\n技术实现 这个博客使用了以下技术：\nHugo - 快速的静态网站生成器 PaperMod - 简洁优雅的 Hugo 主题 自定义 CSS - 实现现代化的视觉效果 总结 通过合理运用现代设计元素，我们可以创建出既美观又实用的网站。希望这个博客的设计能给你带来灵感！\n这是一篇测试文章，用于展示博客效果。\n","permalink":"/posts/life/test-article/","summary":"这是一篇测试文章，用于展示博客主页的视觉效果和滚动体验。让我们一起探索现代网页设计的魅力。","title":"测试文章：探索现代网页设计"},{"content":"为什么选择 Hugo Hugo 是一个用 Go 语言编写的静态网站生成器，具有以下优势：\n极快的构建速度 - 毫秒级别生成整个网站 简单易用 - 无需数据库，纯静态文件 主题丰富 - 社区提供大量精美主题 Markdown 支持 - 专注于内容创作 快速开始 安装 Hugo 非常简单：\n1 2 3 4 5 6 7 8 9 # macOS brew install hugo # 创建新站点 hugo new site my-blog cd my-blog # 添加主题 git submodule add https://github.com/adityatelange/hugo-PaperMod themes/PaperMod 配置优化 在 hugo.toml 中进行基础配置，设置网站标题、语言、主题参数等。\n部署方案 可以选择多种部署方式：\nGitHub Pages Netlify Vercel Cloudflare Pages 开始你的博客之旅吧！\n","permalink":"/posts/tools/hugo-guide/","summary":"从零开始搭建一个基于 Hugo 的个人博客，包括主题选择、配置优化和部署方案。","title":"Hugo 博客搭建指南"},{"content":"CSS 动画基础 CSS 动画主要有两种实现方式：\nTransition（过渡） 适合简单的状态变化：\n1 2 3 4 5 6 7 .button { transition: transform 0.3s ease; } .button:hover { transform: translateY(-2px); } Animation（关键帧动画） 适合复杂的动画序列：\n1 2 3 4 5 6 7 8 9 10 11 12 @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .element { animation: float 3s ease-in-out infinite; } 性能优化技巧 使用 transform 和 opacity - 这些属性不会触发重排 添加 will-change - 提示浏览器优化 使用 GPU 加速 - transform: translate3d(0, 0, 0) 实用动画效果 悬停抬升效果 渐变背景动画 加载动画 页面过渡效果 掌握这些技巧，让你的网页动起来！\n","permalink":"/posts/frontend/css-animation-tips/","summary":"分享一些实用的 CSS 动画技巧，让你的网页更加生动有趣。包括过渡、关键帧动画和性能优化。","title":"CSS 动画技巧分享"},{"content":"编辑器与 IDE VS Code 我的主力编辑器，配合以下插件：\nPrettier - 代码格式化 ESLint - 代码检查 GitLens - Git 增强 Auto Rename Tag - 标签自动重命名 主题配置 使用 One Dark Pro 主题，搭配 Fira Code 字体，开启连字功能。\n终端工具 iTerm2 - macOS 终端增强 Oh My Zsh - Shell 配置框架 Fig - 终端自动补全 浏览器扩展 开发必备的浏览器扩展：\nReact DevTools - React 调试 Vue DevTools - Vue 调试 Wappalyzer - 技术栈识别 ColorZilla - 取色工具 设计工具 Figma - UI 设计与原型 Excalidraw - 手绘风格图表 其他工具 Notion - 笔记和知识管理 Raycast - macOS 效率启动器 CleanShot X - 截图工具 好的工具能让开发事半功倍！\n","permalink":"/posts/tools/my-dev-tools/","summary":"分享我日常使用的开发工具和效率软件，帮助提升开发体验和工作效率。","title":"我的开发工具箱"},{"content":"异步编程的演进 JavaScript 异步编程经历了几个阶段：\n1. 回调函数时代 最早的异步处理方式，但容易陷入\u0026quot;回调地狱\u0026quot;：\n1 2 3 4 5 6 7 getData(function(a) { getMoreData(a, function(b) { getMoreData(b, function(c) { // 回调地狱... }); }); }); 2. Promise 的出现 Promise 让异步代码更加优雅：\n1 2 3 4 5 getData() .then(a =\u0026gt; getMoreData(a)) .then(b =\u0026gt; getMoreData(b)) .then(c =\u0026gt; console.log(c)) .catch(err =\u0026gt; console.error(err)); 3. Async/Await 最现代的异步编程方式：\n1 2 3 4 5 6 7 8 9 10 async function fetchData() { try { const a = await getData(); const b = await getMoreData(a); const c = await getMoreData(b); console.log(c); } catch (err) { console.error(err); } } 最佳实践 优先使用 async/await - 代码更清晰易读 正确处理错误 - 使用 try/catch 或 .catch() 并行执行 - 使用 Promise.all() 提升性能 避免阻塞 - 合理使用异步操作 常见陷阱 忘记 await 关键字 在循环中使用 await 错误处理不当 掌握异步编程，写出更优雅的 JavaScript 代码！\n","permalink":"/posts/frontend/js-async-best-practices/","summary":"深入理解 JavaScript 异步编程，从回调函数到 Promise，再到 async/await，掌握现代异步编程模式。","title":"JavaScript 异步编程最佳实践"},{"content":" Rouxi Builder · Writer · Curious Learner 📧 rouxirossweisse@gmail.com 🐙 github.com/Rosweise 🐦 @xrossweisse SUMMARY Passionate technologist and lifelong learner dedicated to exploring new technologies, sharing knowledge, and building meaningful projects. I document my journey through practical tutorials, tool reviews, and reflections on continuous learning.\nAREAS OF FOCUS Technology \u0026 Development Web development and modern frameworks Practical coding tutorials and technical notes Real-world project lessons and best practices Tools \u0026 Productivity Developer tools and workflow optimization Productivity systems and methodologies Software recommendations and reviews Learning \u0026 Growth Reading notes and book summaries Personal development insights Reflections on everyday life and learning SKILLS \u0026 INTERESTS Technical: Web Development, Open Source, System Design, API Development\nCreative: Technical Writing, Documentation, Content Creation\nPersonal: Reading, Continuous Learning, Knowledge Sharing\nPHILOSOPHY \"Stay curious, keep learning, and share generously.\"\nI believe in the power of continuous learning and the importance of sharing knowledge with the community. Every project is an opportunity to grow, and every challenge is a chance to learn something new.\nCONNECT I'm always open to connecting with fellow developers, learners, and curious minds. Feel free to reach out through any of the channels listed above. Whether you want to discuss technology, collaborate on projects, or just chat about ideas, I'd love to hear from you!\n","permalink":"/about/","summary":"About Rouxi","title":"About Me"}]