Astro Blog Theme

二次开发于伟大开源主题---https://github.com/cojocaru-david/portfolio

一个现代化的 Astro 博客主题，支持博客、项目展示、相册等功能。

✨ 特性

• 🎨 现代化设计 - 简洁美观的界面设计
• 📱 响应式布局 - 完美适配各种设备
• 🌙 深色模式 - 支持明暗主题切换
• 🔍 搜索功能 - 内置博客内容搜索
• 📝 Markdown 支持 - 支持数学公式、代码高亮等
• 🖼️ 相册功能 - 展示你的照片和作品
• 📊 项目展示 - 展示你的开源项目
• 📱 PWA 支持 - 可安装为应用
• 🚀 性能优化 - 快速的加载速度
• 📈 SEO 友好 - 内置 SEO 优化

🚀 快速开始

1. 克隆项目

git clone https://github.com/bx33661/astro-blog-theme.git
cd astro-blog-theme

2. 安装依赖

npm install
# 或
yarn install
# 或
pnpm install

3. 配置个人信息

编辑 src/consts.ts 文件，修改以下内容：

export const SITE: Site = {
  title: '你的博客标题',
  description: '你的博客描述',
  href: 'https://yourdomain.com',
  author: '你的名字',
  locale: 'zh-CN',
  location: '你的位置',
}

export const SOCIAL_PROFILES = {
  github: 'https://github.com/yourusername',
  email: 'mailto:your-email@example.com',
  // 添加更多社交媒体链接
}

4. 配置部署

编辑 astro.config.ts 文件：

export default defineConfig({
  // 修改为你的域名
  site: 'https://yourdomain.com',
  base: '/',
  // ... 其他配置
})

5. 启动开发服务器

npm run dev

访问 http://localhost:3000 查看效果。

📁 项目结构

src/
├── components/          # 组件
│   ├── react/          # React 组件
│   └── ui/             # UI 组件
├── content/            # 内容文件
│   ├── blog/           # 博客文章
│   └── projects/       # 项目展示
├── layouts/            # 布局文件
├── pages/              # 页面文件
└── styles/             # 样式文件

📝 添加内容

添加博客文章

在 src/content/blog/ 目录下创建 .md 文件：

---
title: "文章标题"
description: "文章描述"
pubDate: "2024-01-01"
tags: ["标签1", "标签2"]
---

这里是文章内容...

添加项目

在 src/content/projects/ 目录下创建 .md 文件：

---
title: "项目名称"
description: "项目描述"
pubDate: "2024-01-01"
tags: ["技术栈1", "技术栈2"]
github: "https://github.com/username/project"
demo: "https://demo.com"
---

项目详细介绍...

添加相册图片

将图片文件放在 public/gallery/ 目录下，系统会自动生成相册页面。

🎨 自定义主题

修改颜色主题

编辑 src/styles/global.css 文件中的 CSS 变量：

:root {
  --color-primary: #3b82f6;
  --color-secondary: #64748b;
  /* 更多颜色变量... */
}

修改字体

在 public/fonts/ 目录下添加字体文件，然后在 CSS 中引用。

🚀 部署

Vercel 部署

1. 将代码推送到 GitHub
2. 在 Vercel 中导入项目
3. 配置环境变量（如果需要）
4. 部署完成

GitHub Pages 部署

1. 修改 astro.config.ts 中的 site 和 base 配置
2. 在 GitHub 仓库设置中启用 Pages
3. 选择部署分支和目录

其他平台

本主题支持部署到任何支持静态网站的平台上。

📦 技术栈

• Astro - 静态站点生成器
• React - 用户界面库
• TypeScript - 类型安全
• Tailwind CSS - CSS 框架
• Framer Motion - 动画库

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 许可证

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情。

🙏 致谢

感谢所有为这个项目做出贡献的开发者！

---

如果这个主题对你有帮助，请给个 ⭐️ 支持一下！