参界 - 基于 Astro + Starlight 的现代化个人博客系统 - 优雅、高效、安全
- 基于 Astro 的静态站点生成，提供极致的性能
- 使用 Starlight 主题，提供优雅的默认设计
- 完整的博客功能，包括文章管理、分类、标签等
- 良好的开发体验，支持 TypeScript 和热更新
- 注重安全性和性能优化
- 支持主题定制和响应式设计
框架架构及主题
Section titled “框架架构及主题”本系统是基于 Astro 框架构建的。Astro 是一款现代、高性能的网站构建框架，专注于为内容驱动的项目（如文档系统、知识库、博客等）提供极快的加载速度和优秀的开发体验。它通过智能的前端优化，让系统具有轻量、快速、易扩展的特性。
在 Astro 之上，本系统采用了 Starlight 作为文档系统的核心架构。Starlight 是专为文档类项目打造的解决方案，内置侧边栏导航、全文搜索、多语言支持、版本管理等功能，可以帮助我们快速搭建起完整的文档体系。这不仅节省了开发时间，也为系统的扩展和维护提供了极大的便利。
为了进一步提升系统的视觉表现和用户体验，我们选择了 starlight-theme-flexoki 主题。它基于 Flexoki 设计体系，提供了温和、简洁、优雅的配色方案和排版风格，使系统在保持专业性的同时，也具备了友好的阅读体验。
总结来说，本系统的技术栈构成如下：
-
Astro → 核心框架，负责系统构建和性能优化
-
Starlight → 文档架构，提供系统的主要功能模块
-
starlight-theme-flexoki → 主题插件，赋予系统独特而美观的外观设计
选择这套组合，是希望打造一个性能卓越、功能完备、界面友好的系统，为用户带来高效流畅的使用体验。
为了让本系统更强大、更易用、更具表现力，系统集成了以下四个精选插件，每一个都在不同层面为系统赋能：
- Starlight Blog
官网： Starlight Blog
这个插件为 Starlight 系统引入了博客功能，使系统不仅限于文档展示，还可以扩展为内容创作和分享平台。
- Starlight Image Zoom
这个插件为文档和博客页面提供了优雅的 图片缩放 功能。
- Expressive Code
官网： Expressive Code
这是一个专注于 代码高亮和代码展示优化 的插件。
- Starlight Giscus
官网： Starlight Giscus
为系统引入 评论和讨论功能，基于 GitHub Discussions 构建的 Giscus。
修复的BUG及增加的功能
Section titled “修复的BUG及增加的功能”- 修复Tags如果有大写（英文），点击tags链接返回404的问题
- 修复Starlight Blog和Starlight Image Zoom插件同时导入时的冲突问题
- 新增外链中转功能
- 修改主题切换由官方的下拉框选择变更为直接点击
- 新增404页面
- 代码块新增行号
- 新增归档页面
- 新增分类页面
- 新增返回页顶按钮
- astro.config.mjs
- package.json
文件夹src/
文件夹components/
- BlogArchive.astro
- CategoryList.astro
- ExternalLinkRedirect.astro
- Footer.astro
- Head.astro
- HomePage.astro
- MarkdownContent.astro
- Page.astro
- PageTitle.astro
- ThemeSelect.astro
文件夹content/
文件夹docs/
文件夹blog/
- …
文件夹categories/
- index.mdx
- 404.mdx
- archives.mdx
- index.mdx
- link.mdx
文件夹page/
- index.mdx
文件夹pages/
文件夹api/
- redirect.js
文件夹scripts/
- generate-pagination.js
- content.config.ts
内容展示
- 响应式设计：自适应移动端和桌面端，提供最佳阅读体验
- 文章分类：支持多级分类，可按技术、生活等主题组织文章
- 文章归档：按年月归档，方便历史文章查找
- 标签系统：支持多标签，便于文章分类和检索
- 置顶文章：支持文章置顶功能，突出重要内容
- 推荐文章：支持精选文章标记，使用星标突出显示
阅读体验
- 代码块：支持代码高亮显示
- 图片优化：支持图片懒加载和图片缩放功能
- 主题切换：支持深色/浅色主题切换，自动跟随系统主题
- 平滑滚动：实现丝滑的页面滚动效果
- 返回顶部：智能显示返回顶部按钮
交互功能
- 评论系统：集成 Giscus 评论系统，支持 GitHub 账号登录
- 外部链接：智能处理外部链接，提供安全跳转确认
- 分页功能：自动生成分页，优化长列表展示
- 搜索功能：支持全站内容搜索
性能优化
- 静态生成：基于 Astro 的静态站点生成，提供极速加载体验
- 按需加载：组件和资源按需加载，优化首屏加载速度
- 图片优化：自动优化图片大小和格式
- 缓存策略：合理的缓存策略，提升访问速度
SEO 优化
- 自动生成 Sitemap：支持搜索引擎收录
- Meta 信息：自动生成页面描述和关键词
- 规范链接：支持规范链接，避免重复内容
- 结构化数据：支持文章结构化数据
安全特性
- 外部链接保护：自动检测并处理外部链接，防止恶意跳转
- XSS 防护：内置 XSS 防护机制
- CSP 支持：支持内容安全策略
开发体验
- 组件化开发：基于 Astro 组件系统，便于维护和扩展
- 热更新：支持开发环境热更新
- TypeScript 支持：完整的 TypeScript 类型支持
- 构建优化：优化的构建流程，支持增量构建
特色功能
- 运行时间：显示网站运行天数
- 文章统计：显示文章总数和分类统计
- 自定义 404：精美的 404 页面设计
- 主题定制：支持自定义主题颜色和样式
- 响应式布局：完美适配各种设备屏幕
技术栈
- 前端框架：Astro + Starlight
- 构建工具：Vite
- 样式处理：CSS Modules
- 内容管理：MDX
- 部署支持：支持多种部署平台
平台部署方案
Section titled “平台部署方案”在开始部署前，请确保您已经拥有 Cloudflare 和 GitHub 账号。
-
登录 Cloudflare 后台，点击左侧的 Compute > Workers，在右侧点击 Pages，然后点击 “Import an existing Git repository” 旁边的 Get Started。
-
在弹出的界面中点击 Connect GitHub。
-
如果您尚未登录 GitHub，请先完成登录。
登录后，在授权界面中找到 Repository access，选择 Only select repositories，然后点击 Select repositories，勾选刚刚 Fork 的项目，点击 Save 保存授权。授权成功后系统会自动返回 Cloudflare。
-
返回 Cloudflare 后，在 “Select a repository” 中选择刚授权的仓库，点击激活后的 Begin setup 继续。
-
设置构建参数：
- Project name：填写任意项目名称
- Build command：
npm run build - Build output directory：
dist
然后点击 Save and Deploy，Cloudflare 将自动构建并部署项目。
Cloudflare 演示
- Fork 本项目
- GitHub 授权方式与 Cloudflare 相同
- 在 Netlify 项目的 Build settings 中填写以下内容：
- Build command：
npm run build - Publish directory：
dist - 然后点击构建部署
- Build command：
Netlify 演示
npm create astro@latest -- --template canjieorg/canjie blog && cd blog && npm installnpm run devnpm run buildpnpm create astro@latest -- --template canjieorg/canjie blog && cd blog && pnpm installpnpm devpnpm buildyarn create astro --template canjieorg/canjie blog && cd blog && yarn installyarn devyarn build