hello astro

你好-astro

Hello Astro 是一个功能齐全的 Astro 多功能入门主题，用 Typescript 和 TailwindCSS 编写。它支持基于 Markdown 和 MDX 的页面和博客文章。

Hello Astro 可用于以下任何/所有用途：

• 企业/营销网站
• 博客
• 文档站点
• 支持照片库的作品集网站

使用以下集成：

• @astrojs/mdx
• @astrojs/markdoc
• @astrojs/站点地图
• @astrojs/rss
• @astrojs/顺风
• @astrojs/alpinejs
• 天文图标
• astro 搜索引擎优化
• astro-机器人-txt

此外，SVG 和 PNG 插图源自 Undraw

该项目最初是作为 hello-gatsby-starter 的一个简单的端口开始的，但现在包含更多功能（明/暗模式、类别页面、搜索、图表、数学等等！）

特征

• 带有 frontmatter 的全功能博客（标题、描述、作者、日期、图像、标签）
• 高性能、低开销、最少的 Javascript (AlpineJS)
• 通过 lunrjs 基于客户端的博客页面全文搜索（搜索索引仅在页面上第一次调用搜索时加载）
• 作者、类别和标签的索引页和单独页面，包括分页
• 支持 RSS feed、站点地图和 robots.txt
• SVG 设计（unDraw、Hero Patterns、Iconify）
• 支持代码语法高亮
• 全面的 SEO 支持，包括通过 JSON-LD 的 Open Graph、Twitter Cards 和 Schema.org
• 根据 TailwindCSS 推荐，完全支持浅色和深色 UI 模式以及以下系统首选项
• 定制404错误页面
• 通过 remark-math/rehype-katex 使用 KaTeX 显示数学方程（包含在$ ... $或$$ ... $$中）
• 显示 Mermaid、Markmap、PlantUML 图（使用mermaid 、 markmap和plantuml语言编写为代码块）
• 使用Map组件以地理坐标和缩放级别显示地图（还需要包含extra: ['map']是加载页面 CSS/JS 资源的 frontmatter）
• 计算并显示博客文章的阅读时间
• 仅在需要时在每个页面和每个包的基础上加载外部库的 CSS/JS 资源 - 没有不必要的膨胀
• 使用 PhotoSwipe 的照片库和灯箱（包括 EXIF 标签的显示）
• 使用 Swiper 的轮播组件
• 文档页面（以 astro 文档 starter 为模型，但使用 Tailwind）

外部封装

启动使用以下外部包：

• 阿斯特罗
• 打字稿
• TailwindCSS 和 TailwindUI
• 图标化
• 英雄图案
• 取消绘制插图
• MDX 和 Markdown
• 用于链接数据的 Schema.org 和 JSON，使用 schema-dts 进行类型检查
• Facebook 使用的 Open Graph
• 推特卡
• 阿尔派JS
• 使用 Lunr 进行本地全文搜索
• 通过 remark-math 和 rehype-katex 使用 KaTeX 的数学方程
• 使用 Mermaid、Markmap 和 PlantUML 绘制图表
• 使用传单打开街道地图
• 阅读时间
• 照片滑动
• 埃西弗
• 刷卡器
• 备注表情符号

它遵循 JAMstack 架构，自动从 Git 存储库构建静态版本。该演示部署在 Github Pages 上。

项目结构

在此启动器中，您将看到以下文件夹和文件：

 /
├── public/
│   └── favicon.ico
├── src/
│   ├── assets/
│   │   ├── image.png
│   │   └── gallery/
│   │       └── gallery-name/
│   │           └── image.jpg
│   ├── components/
│   │   └── header.astro
│   ├── content/
│   │   ├── blog/
│   │   |   └── 2022-08-01-post.md
│   │   ├── doc/
│   │   |   └── documentation-page.md
|   │   └── config.ts
│   ├── layouts/
│   │   ├── base.astro
│   │   ├── blog.astro
│   │   └── doc.astro
│   ├── pages/
│   │   ├── index.astro
│   │   └── contact.astro
│   └── config.ts
└── package.json

Astro 在src/pages/目录中查找.astro 、 .md或.mdx文件。每个页面都根据其文件名公开为路径。

src/components/是我们放置任何 Astro 组件的地方，类似的src/layouts/是放置布局的地方。

图像可以放置在src/assets/中。

博客和文档内容在src/content中创建为 Markdown 或 MDX 文件的集合。

任何静态资产，例如。图片，可以放在public/目录下。

？命令

所有命令都从项目的根目录的终端运行：

命令	行动
pnpm install	安装依赖项
pnpm dev	在localhost:3000启动本地开发服务器
pnpm build	将您的生产站点构建到./dist/
pnpm preview	在部署之前在本地预览您的构建
pnpm lint	漂亮地打印源代码
pnpm check	检查源代码是否有错误
pnpm astro ...	运行 CLI 命令，例如astro add 、 astro preview
pnpm astro --help	使用 Astro CLI 获取帮助

发布历史

• 1.0.0：初始版本
• 1.0.1：将社交图像移至 src，改进 coverImage 处理
• 1.0.2：升级软件包到最新
• 1.1.0：更新至 astro v2.x，现在适用于节点 18 和 19
• 2.0.0：新版本支持Astro收藏！还澄清这是一个多用途主题。搜索现在可以包括 Markdown 和 MDX 页面！
• 2.0.1：更新了屏幕截图，并改进了登陆页面。
• 2.1.0：更新到最新的软件包，修复了开发链接，从个人博客向后移植功能，包括下一个/上一个链接，Markdown 中的照片库支持以及改进的分页控制。
• 2.2.0：修复了 lint 错误，重新实现了地图、lightbox 和 carousel，以使用 leaflet、photoswipe 和 swiper 包，而不是依赖外部 CDN。
• 2.2.1：更新至 astro 2.0.10，修复了基础资源加载问题
• 2.3.0：删除了博客和文档内容的布局
• 2.4.0： @astrojs/images现在支持svg ，因此无需特殊处理
• 2.4.1：在博客和文档帖子中使用渲染的 frontmatter，修复图表未渲染的问题。
• 2.4.2：更新包
• 3.0.0：主要更新：
  • 使用新的 Astro 优化资产支持
  • 新天文标志
  • 优化后草稿过滤
  • 清理画廊
  • 修复了 SEO 错误
  • 清除了 lint 错误
  • 将作者和类别迁移到集合并使用基于 Astro 2.5.0 的引用完整性
  • 将社交链接转换为数据集合（需要 Astro >2.5.0）
  • 更新了网站图标和标题元数据
  • 改进搜索以包含文档
• 3.1.0：增强更新：
  • 将包管理器从yarn迁移到pnpm
  • 头部链接的参考基础
  • 添加了 eslint 和 prettier 插件
  • 修复 seo 组件中的图像属性错误
  • 更新了 tsconfig 以匹配 astro strict
  • 更新 Katex CSS 链接
  • 修复了作者未出现在博客卡中的问题
  • 添加了 Markdoc 支持
• 3.1.1：小更新：
  • 延迟加载图像
  • 通过 remark-emoji 支持 Github 表情符号
• 3.1.2：小修复：
  • 检查空类别
  • 稍微改进了联系页面
  • 改进了下一个/上一个处理
  • 更新包
  • 减小搜索按钮的大小以适应最小宽度
  • 将页面的图像选项从 object-contain 更改为 object-cover
  • 固定 site.webmanifest
• 3.1.3：小修复：
  • 升级到@astrojs/markdoc 0.4.x 和最新的 astro
  • 修复了 [slug].astro 中的 Props 声明
  • 由于此问题禁用了 Markdoc 示例文件：withastro/astro#7520
• 3.1.4：小幅增强：
  • svg 和位图的统一图像处理
  • 启用视图转换
• 3.1.5：小幅增强：
  • 升级到最新版本的软件包
  • 修复了较小的 astro 检查错误
• 3.2.0：主要增强：
  • 更新至 Astro 3.x
  • 实施宽松的内容安全策略
• 3.2.1：小幅增强：
  • 更新了软件包，解决了 astro 检查错误
• 3.2.2：小幅增强：
  • 更新包
  • 修复了搜索的 json.ts 返回类型
• 3.2.3：维护：
  • 修复了 mermaid v9 不再通过升级到最新版本的 mermaid 工作的问题
  • 升级包
• 3.2.4：小幅增强：
  • 升级到 Astro 4.x
• 3.2.5：小幅增强：
  • 升级包
  • 删除 mermaid.initialize()
• 3.2.6：维护：
  • 禁用 ViewTransition，因为它不适用于美人鱼
• 3.3.0：维护：
  • 升级到最新的软件包和 astro-icon 1.x
• 3.3.1：维护：
  • 升级到最新的软件包并修复了 astro 检查错误
• 3.3.2：维护：
  • 升级到最新的软件包
  • 修复了由于更严格的高山检查而导致搜索不起作用的问题
  • 迁移到标准 astro tsconfig.json
  • 修复了 astro 检查错误
• 3.4.0：小改动：
  • 更新包
  • 将英雄图标替换为 v2
  • 改进了 RSS 和搜索索引，包括作者姓名和电子邮件
  • 让 BlogHero 接受帖子作为 props 而不是 frontmatter
  • 将 Markdown 页面移至内容集合
  • 消除 Frontmatter 类型
• 4.0.0：主要变化：
  • 更新包
  • 删除了 @types/photoswipe 和 photoswipe tsconfig
  • 已移至 RSS 架构
  • getPosts() 函数
  • 模式标签
  • 自动生成侧边栏链接
  • 改进的 RSS 和搜索元数据