- 起步
- 核心概念
- 教程
- 基础内容
- 内置功能
- 集成
- 操作指南
- 使用指南
- 配置
- 参考
- 社区资源
- 其他
- 为文档做出贡献
- 手动安装 Astro
- 升级到 Astro v4
- 升级到 Astro v3
- 升级到 Astro v2
- Legacy v0.x Upgrade Guide
- 从 Create React App(CRA)迁移
- 关于本教程
- 第一单元:前期准备
- 准备开发环境
- 创建你的第一个 Astro 项目
- 你的第一行 Astro 代码
- 创建在线代码仓库
- 将你的网站部署到网络
- 第二单元:页面
- 创建你的第一个 Astro 页面
- 编写你的第一篇 Markdown 博客文章
- 添加「关于你」的动态内容
- 给你的「关于」页面添加样式
- 应用全局样式
- 第三单元:组件
- 创建一个可重复使用的导航组件
- 创建社交媒体 footer
- 自己动手搭建导航 Header
- 编写你的第一个浏览器脚本
- 第四单元:布局
- 编写你的第一个布局
- 创建并传递数据到博客布局
- 布局结合,两全其美
- 第五单元 - Astro API
- 创建文章存档页
- 生成标签页面
- 编写标签索引页面
- 添加 RSS 订阅源
- 第六单元 - Astro 群岛
- 搭建你的第一个 Astro 岛屿
- 回到干燥的陆地。让你的博客从白天到黑夜,无需岛屿!
- 恭喜你!
- @astrojs/mdx
- 添加阅读时间
- 创建开发者工具栏应用
- @astrojs/alpinejs
- @astrojs/lit
- @astrojs/preact
- @astrojs/react
- @astrojs/solid-js
- @astrojs/svelte
- @astrojs/vue
- @astrojs/cloudflare
- @astrojs/netlify
- @astrojs/node
- @astrojs/vercel
- @astrojs/db
- @astrojs/markdoc
- @astrojs/partytown
- @astrojs/sitemap
- @astrojs/tailwind
- 使用流式处理来提升页面性能
- 从 Gatsby 迁移
- 从 Next.js 迁移
- 从 NuxtJS 迁移
- 从 Docusaurus 迁移到 Astro
- 从 Eleventy 迁移到 Astro
- 从 GitBook 迁移到 Astro
- 从Gridsome迁移到Astro
- 从 Hugo 迁移
- 从 Jekyll 迁移
- 从 Pelican 迁移
- 从 SvelteKit 迁移
- 从VuePress迁移
- 从 WordPress 迁移
- 状态共享
- Storyblok 与 Astro
- Contentful 与 Astro
- ButterCMS & Astro
- Builder.io & Astro
- Cosmic 与 Astro
- DatoCMS 与 Astro
- Front Matter CMS 与 Astro
- Ghost & Astro
- Hashnode & Astro
- Hygraph 与 Astro
- Keystatic & Astro
- Kontent.ai 与 Astro
- 无头模式的 Statamic 与 Astro
- Strapi 与 Astro
- Tina CMS 与 Astro
- Umbraco & Astro
- 无头(headless)模式的 WordPress 与 Astro
- ApostropheCMS 与 Astro
- Caisy & Astro
- CloudCannon与Astro
- Crystallize 与 Astro
- Decap CMS 与 Astro
- Directus 与 Astro
- KeystoneJS 与 Astro
- microCMS & Astro
- Payload CMS 与 Astro
- Prepr CMS & Astro
- Prismic & Astro
- Sanity & Astro
- Sitecore 体验管理器 & Astro
- Spinal & Astro
- 创作内容
- Firebase 与 Astro
- Supabase 与 Astro
- Turso 和 Astro
- Xata 与 Astro
- Appwrite & Astro
- 部署你的 Astro 站点至 Netlify
- 部署你的 Astro 站点至 Vercel
- 如何将你的 Astro 网站部署到 Deno
- 部署你的 Astro 站点至 GitHub Pages
- 部署你的 Astro 站点至 GitLab Pages
- 部署你的 Astro 站点至 Cloudflare Pages
- 将你的 Astro 网站部署到 AWS
- 将你的 Astro 网站通过 Flightcontrol 部署到 AWS
- 将你的 Astro 网站通过 SST 部署到 AWS
- 将你的 Astro 网站部署至 Google Cloud
- 部署你的 Astro 站点至 Google Firebase 托管
- 将你的 Astro 网站部署到 Heroku
- 将你的 Astro 网站部署到 Microsoft Azure
- 部署你的 Astro 站点至 Buddy
- 将你的 Astro 网站部署到 Edgio
- 将你的 Astro 站点部署到 Fly.io
- 将你的 Astro 网站部署到 Render
- 将你的 Astro 网站部署到 Stormkit
- 将你的 Astro 网站部署到 Surge
- 通过 Cleavr 部署你的 Astro 网站
- 将你的 Astro 站点部署到 Kinsta 应用托管
- 将你的 Astro 网站部署到 Space
- 将你的 Astro 站点部署到 Zeabur
- 将你的 Astro 网站部署到 Zerops
- 添加 RSS 摘要
- 安装一个 Vite 或 Rollup 插件
- 构建自定义图像组件
- 使用 API 路由构建表单
- 在 Astro 页面中构建 HTML 表单
- 在 Astro 中使用 Bun
- 调用服务器端点
- 校验验证码
- 用 Docker 来构建你的 Astro 网站
- 动态导入图片
- 为链接添加图标
- 添加 i18n 功能
- 添加最后修改时间
- 在 Astro 组件中共享状态
- 使用 Tailwind Typography 美化渲染后的 Markdown
- Unknown compiler error.
- Astro.redirect is not available in static mode.
- Astro.clientAddress is not available in current adapter.
- Astro.clientAddress cannot be used inside prerendered routes.
- Astro.clientAddress is not available in static mode.
- No static path found for requested path.
- Invalid type returned by Astro page.
- Missing value for client:media directive.
- No matching renderer found.
- No client entrypoint specified in renderer.
- Missing hint on client:only directive.
- Invalid value returned by a getStaticPaths path.
- Invalid entry inside getStaticPath's return value
- Invalid value returned by getStaticPaths.
- getStaticPaths RSS helper is not available anymore.
- Missing params property on getStaticPaths route.
- Invalid value for getStaticPaths route parameter.
- getStaticPaths() function required for dynamic routes.
- Invalid slot name.
- Cannot use Server-side Rendering without an adapter.
- No import found for component.
- Invalid prerender export.
- Invalid component arguments.
- Page number param not found.
- Image missing required "alt" property.
- Error while loading image service.
- Missing image dimensions
- Failed to retrieve remote image dimensions
- Unsupported image format
- Unsupported image conversion
- Prerendered dynamic endpoint has path collision.
- Expected src to be an image.
- Expected image options.
- Cannot set both densities and widths
- Image not found.
- Could not process image metadata.
- Image not found.
- Could not transform image.
- Unable to set response.
- The middleware didn't return a Response.
- The middleware returned something that is not a Response object.
- The endpoint did not return a Response.
- Value assigned to locals is not accepted.
- Astro.response.headers must not be reassigned.
- Can't load the middleware.
- Local images must be imported.
- Astro.glob() used outside of an Astro file.
- Astro.glob() did not match any files.
- A redirect must be given a location with the Location header.
- Invalid dynamic route.
- Could not find Sharp.
- Unknown Vite Error.
- Could not import file.
- Invalid glob pattern.
- Astro couldn't find the correct page to render
- The provided locale does not exist.
- Index page not found.
- You can't use the current function with the current strategy
- Prerendered routes aren't supported when internationalization domains are enabled.
- 启用了手动国际化路由但没有提供中间件。
- Astro can't render the route.
- Unhandled rejection
- i18n Not Enabled
- Route not found.
- Unknown CSS Error
- CSS Syntax Error
- Unknown Markdown Error.
- Failed to parse Markdown frontmatter.
- Invalid frontmatter injection.
- MDX integration missing.
- Unknown configuration error.
- Specified configuration file not found.
- Legacy configuration detected.
- Unknown CLI Error.
- Failed to generate content types.
- Unknown Content Collection Error.
- Content entry frontmatter does not match schema.
- Invalid content entry slug.
- Content Schema should not contain slug.
- Collection does not exist
- Content and data cannot be in same collection.
- Collection contains entries of a different type.
- Data collection entry failed to parse.
- Duplicate content entry slug.
- Actions must be used with server output.
- Unsupported transform in content config.
编辑器配置
自定义你的代码编辑器,以改善 Astro 开发体验并解锁新功能。
VS Code
VS Code 是由 Microsoft 构建,受网页开发者欢迎的代码编辑器。VS Code 引擎还对云端代码编辑器像 GitHub Codespaces 和 Gitpod 提供了支持。
Astro 可以和任意编辑器一同工作。但是,VS Code 是我们推荐的 Astro 项目编辑器。我们维护着一个官方 Astro VS Code 扩展,为 Astro 项目提供了几个关键特性并改善开发者体验。
- 为
.astro
文件提供语法高亮 - 为
.astro
文件提供 TypeScript 类型信息。 - VS Code 智能提示提供代码补全和提示
开始前需要先安装 Astro VS Code 扩展。
查看如何在你的 Astro 项目中设置 TypeScript。Zed
Zed 是一个开源代码编辑器,在 0.123.2 版本中增加了对 Astro 的支持。你可以在 IDE 的扩展标签页中安装 Astro 扩展。此扩展包括语法高亮、代码补全和格式化等功能。
JetBrains IDE
Astro 的初始支持已经在 WebStorm 2023.1 中推出。你可以通过 JetBrains Marketplace 或在 IDE 的插件选项卡中搜索“Astro”来安装官方插件。此插件包括诸如语法高亮、代码补全和格式化之类的功能,并计划在未来添加更多高级功能。它还可用于所有其他支持 JavaScript 的 JetBrains IDE。
其他代码编辑器
我们令人惊喜的社区为其他受欢迎的编辑器维护了几个扩展,它们包括:
- Open VSX 上的 VS Code 扩展 官方 - 官方 Astro VS Code 扩展,同时在 Open VSX registry 上分发,为其他开发平台如 VSCodium 提供支持
- Nova 扩展社区 - 为 Astro 提供语法高亮、智能提示、自动补全
- Vim 插件 社区 - 在 Vim 或 Neovim 中为 Astro 提供语法高亮、缩进和代码折叠支持
- Neovim LSP 和 TreeSitter 插件 社区 - 为 Neovim 内的 Astro 提供语法高亮、treesitter 解析和代码补全。
- Emacs - 查看 配置 Emacs 和 Eglot 的指南社区 - 与 Astro 协作
- 适用于 Sublime Text 的 Astro 语法高亮 社区 - 适用于 Sublime Text 的 Astro 包可在 Sublime Text 包管理器上获取
云端编辑器
除本地编辑器外,Astro 同样适用于云端托管编辑器,包括:
- StackBlitz 和 CodeSandbox - 运行在你浏览器中的编辑器,并为
.astro
文件提供支持并内置语法高亮。无需安装或配置! - GitHub.dev - 可以将 Astro VS Code 扩展安装为网页 extension 只能使用部分功能,目前仅支持语法高亮。
- Gitpod - 云上的完整开发环境,可以从 Open VSX 上安装官方 Astro VS Code 扩展。
其他工具
ESLint
ESLint 是流行的 JavaScript 和 JSX 的 linter。为了支持 Astro,需要安装一个由社区维护的插件。
关于如何为你的项目安装和设置 ESLint 的更多信息,请参见此插件的用户指南。
Stylelint
Stylelint 是流行的 CSS 代码检查工具。为了支持 Astro,需要安装一个由社区维护的 Stylelint 配置文件。
有关安装说明、编辑器集成和其他信息,请参阅该工具的 README 文件。
Prettier
Prettier 是一个流行的 JavaScript、HTML、CSS 等格式化工具。如果你使用 Astro VS Code 扩展或支持 Astro 语言服务器的其他编辑器,Prettier 格式化功能已经内置。
要在编辑器之外(例如 CLI)或者在不支持我们的编辑器工具的编辑器中为 .astro
文件添加格式化支持,请安装官方 Astro Prettier 插件。
要开始使用,首先要安装 Prettier 和该插件:
- npm
- pnpm
- Yarn
npm install --save-dev prettier prettier-plugin-astro
pnpm add -D prettier prettier-plugin-astro
yarn add --dev prettier prettier-plugin-astro
然后 Prettier 会自动检测到这个插件,并在运行时使用它来处理 .astro
文件:
prettier --write .
参见 Prettier 插件的 README,以获得更多关于其支持的选项、如何在 VS Code 内设置 Prettier 等信息。
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论