AstroPaper 是一个极简、响应式、无障碍访问且对 SEO 友好的 Astro 博客主题。这个主题是基于我的个人博客设计和制作的。
查看博客文章或阅读README 文档部分了解更多信息。
- 类型安全的 markdown
- 超快的性能
- 无障碍访问（键盘/屏幕阅读器）
- 响应式设计（适配手机到桌面）
- SEO 友好
- 明暗主题模式
- 模糊搜索
- 草稿文章和分页
- 站点地图和 RSS 订阅
- 遵循最佳实践
- 高度可定制
- 博客文章动态 OG 图片生成 #15 (博客文章)
注：我已经使用 Mac 上的 VoiceOver 和 Android 上的 TalkBack 测试了 AstroPaper 的屏幕阅读器可访问性。虽然我无法测试所有其他屏幕阅读器，但 AstroPaper 的无障碍增强功能应该在其他设备上也能正常工作。
在 AstroPaper 中，你会看到以下文件夹和文件：
/
├── public/
│ ├── assets/
| ├── pagefind/ # 构建时自动生成
│ └── favicon.svg
│ └── astropaper-og.jpg
│ └── favicon.svg
│ └── toggle-theme.js
├── src/
│ ├── assets/
│ │ └── icons/
│ │ └── images/
│ ├── components/
│ ├── data/
│ │ └── blog/
│ │ └── some-blog-posts.md
│ ├── layouts/
│ └── pages/
│ └── styles/
│ └── utils/
│ └── config.ts
│ └── constants.ts
│ └── content.config.ts
└── astro.config.tsAstro 会在 src/pages/ 目录中查找 .astro 或 .md 文件。每个页面都会根据其文件名暴露为一个路由。
任何静态资源（如图片）都可以放在 public/ 目录中。
所有博客文章都存储在 src/data/blog 目录中。
文档可以通过两种格式阅读：markdown 和 博客文章。
主框架 - Astro
类型检查 - TypeScript
样式 - TailwindCSS
UI/UX - Figma 设计文件
静态搜索 - FuseJS
图标 - Tablers
代码格式化 - Prettier
部署 - Cloudflare Pages
关于页面插图 - https://freesvgillustration.com
代码检查 - ESLint
你可以通过在所需目录中运行以下命令来开始使用此项目：
# pnpm
pnpm create astro@latest --template satnaing/astro-paper
# npm
npm create astro@latest -- --template satnaing/astro-paper
# yarn
yarn create astro --template satnaing/astro-paper然后通过运行以下命令启动项目：
# 如果你在前面的步骤中还没有安装依赖，请先安装依赖
pnpm install
# 开始运行项目
pnpm run dev作为替代方案，如果你已安装 Docker，可以使用 Docker 在本地运行此项目：
# 构建 Docker 镜像
docker build -t astropaper .
# 运行 Docker 容器
docker run -p 4321:80 astropaper你可以使用环境变量轻松添加 Google 站点验证 HTML 标签。这一步是可选的。如果你不添加以下环境变量，google-site-verification 标签将不会出现在 HTML 的 <head> 部分。
# 在你的环境变量文件中 (.env)
PUBLIC_GOOGLE_SITE_VERIFICATION=你的-google-站点验证-值所有命令都从项目根目录的终端运行：
注意！ 对于
Docker命令，我们必须在机器上安装 Docker。
| 命令 | 功能 |
|---|---|
pnpm install |
安装依赖 |
pnpm run dev |
在 localhost:4321 启动本地开发服务器 |
pnpm run build |
将你的生产站点构建到 ./dist/ |
pnpm run preview |
在部署之前本地预览你的构建 |
pnpm run format:check |
使用 Prettier 检查代码格式 |
pnpm run format |
使用 Prettier 格式化代码 |
pnpm run sync |
为所有 Astro 模块生成 TypeScript 类型 |
pnpm run lint |
使用 ESLint 检查代码 |
docker compose up -d |
在 Docker 上运行 AstroPaper |
docker compose run app npm install |
在 Docker 容器中运行任何上述命令 |
docker build -t astropaper . |
构建 AstroPaper 的 Docker 镜像 |
docker run -p 4321:80 astropaper |
在 Docker 上运行 AstroPaper |
警告！ Windows PowerShell 用户如果想在开发期间运行诊断（
astro check --watch & astro dev），可能需要安装 concurrently 包。更多信息，请参见此问题。
如果你有任何建议/反馈，可以通过我的邮箱联系我。或者，如果你发现了 bug 或想请求新功能，随时可以开一个 issue。
基于 MIT 许可证，版权所有 © 2025
