🚀 一个基于 Astro 构建的现代化个人博客主题,具有优雅的设计和丰富的功能
🌐 在线预览 | 📚 文档 | 🛠️ 部署指南 | 🔗 友链申请功能 | 说说后端 | RSS订阅功能
本项目基于 vhAstro-Theme 进行了深度定制和功能增强。这是一个使用 Astro 静态站点生成器构建的现代化博客主题,专为个人博客和技术分享而设计。
感谢 @uxiaohan 提供的优秀基础框架。
- 🌙 暗色/亮色主题切换 - 支持自动、手动主题切换
- 📱 完全响应式设计 - 适配所有设备屏幕
- ⚡ 极速性能 - 基于 Astro 的静态生成,加载速度极快
- 🔍 全文搜索 - 内置搜索功能,快速查找文章
- 📊 数据统计 - 文章数量、分类、标签统计
- 💬 评论系统 - 集成评论功能
- 🏷️ 标签分类 - 完善的文章分类和标签系统
- ✅ 现代化 UI 设计,简洁优雅
- ✅ 暗色/亮色主题自由切换
- ✅ 响应式布局,完美适配移动端
- ✅ 流畅的页面切换动画
- ✅ 自定义字体和图标支持
- ✅ Markdown 文档写作
- ✅ MDX 组件支持
- ✅ 代码高亮显示
- ✅ 数学公式渲染 (KaTeX)
- ✅ 文章字数统计和阅读时间
- ✅ 文章置顶功能
- ✅ 全文搜索功能
- ✅ 文章目录导航
- ✅ 评论系统集成
- ✅ RSS 订阅生成
- ✅ 站点地图自动生成
- ✅ SEO 优化配置
- ✅ 图片懒加载
- ✅ 基于 CloudFlare 的友链管理
- ✅ 基于 CloudFlare 的RSS订阅
- ✅ 文章统计信息
- ✅ 分类和标签管理
- ✅ 访问统计集成
- ✅ 网站运行状态监控
- 框架: Astro - 现代静态站点生成器
- 语言: TypeScript - 类型安全的 JavaScript
- 样式: Less - CSS 预处理器
- 包管理: PNPM - 快速的包管理器
- 部署: 支持 Vercel、Netlify、GitHub Pages
- 工具: ESLint、Prettier 代码格式化
- Node.js 18.0+
- PNPM 8.0+
- 克隆项目
git clone https://github.com/your-username/Blog-Astro.git
cd Blog-Astro- 安装依赖
pnpm install- 启动开发服务器
pnpm dev- 构建生产版本
pnpm build修改 src/config.ts 文件来自定义你的博客设置:
export default {
Site: "https://your-domain.com",
Title: "你的博客标题",
Author: "你的名字",
Description: "博客描述",
// ... 更多配置选项
}Blog-Astro/
├── src/
│ ├── components/ # 组件目录
│ ├── content/ # 博客内容
│ ├── layouts/ # 页面布局
│ ├── pages/ # 页面路由
│ ├── scripts/ # 脚本文件
│ └── styles/ # 样式文件
├── public/ # 静态资源
└── astro.config.mjs # Astro 配置
- 在
src/content/blog/目录下创建.md或.mdx文件 - 使用以下 frontmatter 格式:
---
title: "文章标题"
date: 2025-01-01
categories: "分类"
tags: ["标签1", "标签2"]
cover: "封面图片路径"
---
你的文章内容...👋 你好,我是 HeLong
🎓 目前在 云南大学 攻读计算机科学学士学位
💭 人生格言:无论走得多远,都要记住当初为什么出发
📝 这个博客用来记录我的学习和生活,希望能给每一位访客带来启发
- 📧 邮箱: helong_001@qq.com
- 🐙 GitHub: HeLong
- 📚 知乎: 想再见一面
- 📺 哔哩哔哩: 风吹枫悠落
特别感谢以下项目和开发者:
- vhAstro-Theme - 本项目的基础,由 @uxiaohan 开发
- Astro - 强大的静态站点生成器
- 所有为开源社区贡献力量的开发者们
本项目采用 MIT 开源协议
欢迎提交 Issue 和 Pull Request 来帮助改进这个项目!
如果你觉得这个项目对你有帮助,请给它一个 ⭐️
如果你有任何问题,欢迎随时联系我。我很乐意成为你的朋友!