| 项目信息 | 详情 |
|---|---|
| 原始项目地址 | AstroPaper |
| 原始项目Star |  |
以下是原始项目的 README 内容：
AstroPaper 是一款极简、响应迅速、可访问且 SEO 友好的 Astro 博客主题。此主题是根据 我的个人博客 设计和制作的。
此主题遵循最佳实践并提供开箱即用的可访问性。默认情况下支持浅色和深色模式。此外，还可以配置其他配色方案。
此主题是自文档化的 _ 这意味着此主题中的文章/帖子也可以视为文档。阅读博客文章 或查看README 文档部分 了解更多信息。
- 类型安全 markdown
- 超快性能
- 可访问（键盘/VoiceOver）
- 响应式（移动 ~ 桌面）
- SEO 友好
- 明暗模式
- 模糊搜索
- 草稿帖子和分页
- 站点地图和 RSS 源
- 遵循最佳实践
- 高度可定制
- 动态 OG 图像生成用于博客文章 #15 (博客文章)
注意：我已经使用 Mac 上的 VoiceOver 和 Android 上的 TalkBack 测试了 AstroPaper 的屏幕阅读器可访问性。我无法测试所有其他的屏幕阅读器。但是，AstroPaper 中的可访问性增强功能在其他版本上也应该可以正常工作。
在 AstroPaper 内部，您将看到以下文件夹和文件：
/
═── public/
│ ═── assets/
│ │ └── logo.svg
│ │ └── logo.png
│ └── favicon.svg
│ └── astropaper-og.jpg
│ └── robots.txt
│ └── toggle-theme.js
│ └── toggle-theme.js
│ └── src/
│ └── assets/
│ │ └── socialIcons.ts
│ └── components/
│ └── content/
│ │ | blog/
│ │ | └── some-blog-posts.md
│ │ └── config.ts
│ └── layouts/
│ └── pages/
│ └── style/
│ └── utils/
│ └── config.ts
│ └── types.ts
└── package.jsonAstro 在 src/pages/ 目录中查找 .astro 或 .md 文件。每个页面都根据其文件名显示为路由。
任何静态资产（如图像）都可以放在 public/ 目录中。
所有博客文章都存储在src/content/blog目录中。
文档可以以两种格式阅读_ markdown 和 blog post。
- 配置 - markdown | blog post
- 添加帖子 - markdown | blog post
- 自定义配色方案 - markdown | 博客文章
- 预定义配色方案 - markdown | 博客文章
主框架 - Astro 类型检查 - TypeScript 组件框架 - ReactJS 样式 - TailwindCSS UI/UX - Figma 设计文件 模糊搜索 - FuseJS 图标 - Boxicons | Tablers 代码格式化 - Prettier 部署 - Cloudflare Pages 关于页面中的插图 - https://freesvgillustration.com Linting - ESLint
您可以通过在所需目录中运行以下命令开始在本地使用此项目：
# npm 6.x
npm create astro@latest --template satnaing/astro-paper
# npm 7+，需要额外的双破折号：
npm create astro@latest -- --template satnaing/astro-paper
# yarn
yarn create astro --template satnaing/astro-paper
# pnpm
pnpm dlx create-astro --template satnaing/astro-paper然后通过运行以下命令启动项目：
# prepare commit hook & install dependency
npm run prepare && npm run install
# start running the project
npm run dev作为替代方法，如果您已安装 Docker，则可以使用 Docker 在本地运行此项目。方法如下：
# 构建 Docker 映像
docker build -t astropaper 。
# 运行 Docker 容器
docker run -p 4321:80 astropaper您可以使用环境变量在 AstroPaper 中轻松添加 Google 站点验证 HTML 标签。此步骤是可选的。如果您不添加以下环境变量，google-site-verification 标签将不会出现在 html <head> 部分中。
# 在您的环境变量文件 (.env) 中
PUBLIC_GOOGLE_SITE_VERIFICATION=your-google-site-verification-value所有命令均从项目根目录的终端运行：
注意！ 对于
Docker命令，我们必须在您的机器上 安装。
| 命令 | 操作 |
|---|---|
npm install |
安装依赖项 |
npm run dev |
在 localhost:4321 启动本地开发服务器 |
npm run build |
将您的生产站点构建到 ./dist/ |
npm run preview |
在部署之前在本地预览您的构建 |
npm run format:check |
使用 Prettier 检查代码格式 |
npm run format |
使用 Prettier 格式化代码 |
npm run sync |
为所有 Astro 模块生成 TypeScript 类型。了解更多。 |
npm run cz |
使用 commitizen 提交代码更改 |
npm run lint |
使用 ESLint 进行 Lint |
docker compose up -d |
在 docker 上运行 AstroPaper，您可以使用在 dev 命令中告知的相同主机名和端口进行访问。 |
docker compose run app npm install |
您可以在 docker 容器中运行上述任何命令。 |
docker build -t astropaper . |
为 AstroPaper 构建 Docker 映像。 |
docker run -p 4321:80 astropaper |
在 Docker 上运行 AstroPaper。该网站将可通过 http://localhost:4321 访问。 |
警告！ 如果 Windows PowerShell 用户想要在开发期间 运行诊断程序（
astro check --watch & astro dev），则可能需要安装 concurrently 包。有关更多信息，请参阅 此问题。
如果您有任何建议/反馈，您可以通过 我的电子邮件 与我联系。或者，如果您发现错误或想要请求新功能，请随时打开问题。
根据 MIT 许可证授权，版权所有 © 2023