- 极客终端美学：全局采用纯粹的 Terminal 风格设计，包含代码高亮框、闪烁光标与特殊的命令行提示符修饰。
- 现代化字体排版：中英混排自动适配（英文字符强制等宽 Monospace，中文字符 fallback 优雅的思源宋体 Noto Serif SC）。
- 丝滑过渡动效：原生接入 Astro ViewTransitions API，辅以悬停发光（Glow Hover）特效，提供堪比 SPA 的极致顺滑路由体验。
- 双语国际化 (i18n)：支持全局在中文
/与英文/en/语言界面之间无缝切换。 - 内容集合模块化：博客文章基于 Astro 6 Content Collections 强大的类型校验与 MDX 自动渲染。
- 开源生态索引：项目页面集成并展示个人核心开源项目库的最新动态与信息。
- 极客生活志：收录了诸如极简护肤、人体工学配置等提升极客生产力的高质量生活好物与指南。
- Astro 6
- TypeScript
- 原生 CSS (CSS Variables)
- Astro View Transitions API
- 安装依赖
npm install- 启动开发服务器
npm run dev默认地址为 http://localhost:4321。
- 构建生产静态页面
npm run build.
├── public/ # 静态资源（图标、字体等）
├── src/
│ ├── content/
│ │ ├── blog/ # Markdown 博客文章存放处
│ │ └── config.ts # Content Collections 集合配置
│ ├── i18n/
│ │ ├── ui.ts # 多语言文本字典
│ │ └── utils.ts # 语言解析与切换工具函数
│ ├── layouts/
│ │ ├── BaseLayout.astro # 基础页面骨架结构
│ │ └── PostLayout.astro # 博客文章专用骨架
│ ├── pages/
│ │ ├── blog/ # 中文博客列表与动态路由
│ │ ├── en/ # 全局英文页面路由
│ │ ├── index.astro # 中文首页
│ │ ├── projects.astro # 项目索引页
│ │ ├── bookmarks.astro # 收藏页
│ │ └── life.astro # 个人生活页
│ └── styles/
│ └── global.css # 全局样式、动画及极客主题设定
├── .node-version # Cloudflare 自动化部署 Node 环境配置
├── astro.config.mjs # Astro i18n 及插件配置
└── package.json
博客文章文件统一位于：src/content/blog/
以 Markdown (.md 或 .mdx) 格式编写文章。支持在文章正文中直接使用 Markdown 或 HTML 语法插入网络图片，前端已全局配置自适应防溢出与圆角边框样式。
标准的 Frontmatter 结构规范要求如下：
---
title: "你的文章核心标题"
description: "文章的外部摘要与简短描述"
pubDate: 2026-03-24
heroImage: "https://example.com/cover.jpg" # 可选，博客文章封面图（支持本地绝对路径或网络链接）
----
2026-03-25:
- 🚀 性能与 SEO 优化：将
cover.png无损压缩为 WebP 格式（体积缩小 90%+）；新增全局 OG Meta 与 Twitter Card 标签；内置自动化 RSS 源与站点地图（Sitemap）生成。 - 🌐 国际化架构重构：抽取 100% 冗余的中英文硬编码页面为统一的
.astro模板组件，数据由纯净的 TypeScript 归档进行注入（Data-Driven UI）。 - 🌗 全局双摄主题：彻底消除硬编码的暗色 CSS 属性，引入数据驱动的
--secondary-text与--heading-color原生变量，重构成熟的暗色/亮色（Dark/Light）双规制无缝切换能力。
- 🚀 性能与 SEO 优化：将
-
2026-03-24:
- 🎨 视觉升级：新增全局鼠标跟随光晕（Cursor Glow Orb），并在所有卡片和列表项组件中实装悬停发光（Hover Glow）交互动效。
- 🖼️ 文章封面：重构了博客文章渲染引擎与布局，全面支持通过 Frontmatter 的
heroImage字段为文章详情页及列表首图展示自适应比例的高质量封面。 - 📋 导航与交互：跨终端新增“联系我”悬浮展开组件，并升级双语生活志栏目（拆分习惯与好物），大幅扩展了极客开发与架构设计资源导航。
- Home (ZH): https://jayyu.top/
- English: https://jayyu.top/en/
- Hacker Terminal Aesthetic: Designed with a pure terminal style, featuring code blocks, a blinking cursor, and command-line prompts.
- Modern Typography: Smart font subsetting (Monospace for English digits/code, falling back to elegant Noto Serif SC for Chinese characters).
- Smooth Page Transitions: Uses the Astro ViewTransitions API and hover-glow effects to provide an incredibly smooth, SPA-like navigation experience.
- Bilingual i18n: Built-in logic bridging Chinese
/and English/en/localization paths natively. - Content Collections: Fully strictly typed Markdown/MDX blog generation backed by Astro 6.
- Open Source Catalog: Project views showcasing my core external open-source projects on GitHub.
- Geek Lifestyle Handbook: A curated collection of productivity-boosting routines and goodies, including minimalist skincare and ergonomic sets.
- Astro 6
- TypeScript
- Vanilla CSS (Variables & Keyframes)
- Astro View Transitions API
- Install dependencies:
npm install- Start the dev server:
npm run devRuns locally at http://localhost:4321.
- Build for production:
npm run buildMarkdown blog configurations and paths are located in: src/content/blog/. You can embed remote images in your articles seamlessly using standard Markdown syntax, as the global styles will automatically apply rounded borders and maintain responsive width constraints.
Required Frontmatter structure:
---
title: "Your Post Title"
description: "Summary of the post content"
pubDate: 2026-03-24
heroImage: "/images/blog/cover.png" # Optional cover image (supports local path or remote URL)
----
2026-03-25:
- 🚀 Performance & SEO: Compressed the hefty
cover.pnginto a lightweight WebP format (90%+ reduction). Added complete OG Meta and Twitter Card implementations alongside automated RSS and Sitemap builds. - 🌐 i18n Architecture Rewrite: Completely eliminated all hardcoded English duplicate pages, switching everything into a unified Component template driven purely by TypeScript data stores.
- 🌗 True Theming Engine: Eradicated hardcoded dark CSS properties in favor of robust logical primitives like
--secondary-textand--heading-color. Added flawless, persistent Dark/Light mode toggling capabilities without text-color breakage.
- 🚀 Performance & SEO: Compressed the hefty
-
2026-03-24:
- 🎨 Aesthetic Overhaul: Implemented a global cursor-following ambient radial glow and interactive hover glow effects across all item cards.
- 🖼️ Cover Images: Refactored the blog post layout and index page to natively support robust, 16:9 responsive thumbnails utilizing the
heroImagefrontmatter property. - 📋 Navigation & Content: Appended a sleek "Contact Me" dropdown to the primary navigation, restructured the 'Life' guide into Habits & Goodies arrays, and heavily expanded the developer bookmark toolkit.