Skip to content

Commit

Permalink
Merge branch 'main' into sidebar-new-sections
Browse files Browse the repository at this point in the history
  • Loading branch information
sarah11918 authored Oct 27, 2023
2 parents e18f385 + 9e49a16 commit 2a84059
Show file tree
Hide file tree
Showing 12 changed files with 51 additions and 23 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ Gatsby and Astro share some similarities that will help you migrate your project

- Astro has support for [installing NPM packages](/en/guides/imports/#npm-packages), including React libraries. Many of your existing dependencies will work in Astro.

- Like Gatsby, Astro projects can be SSG or [SSR with page-level prerendering](/en/guides/server-side-rendering/#configuring-individual-routes).
- Like Gatsby, Astro projects can be SSG or [SSR with page-level prerendering](/en/guides/server-side-rendering/).

## Key Differences between Gatsby and Astro

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ Here are some key concepts and migration strategies to help you get started. Use
Next.js and Astro share some similarities that will help you migrate your project:

- The [syntax of `.astro` files is similar to JSX](/en/core-concepts/astro-syntax/#differences-between-astro-and-jsx). Writing Astro should feel familiar.
- Astro projects can also be SSG or [SSR with page-level prerendering](/en/guides/server-side-rendering/#configuring-individual-routes).
- Astro projects can also be SSG or [SSR with page-level prerendering](/en/guides/server-side-rendering/).
- Astro uses file-based routing, and [allows specially named pages to create dynamic routes](/en/core-concepts/routing/#dynamic-routes).
- Astro is [component-based](/en/core-concepts/astro-components/), and your markup structure will be similar before and after your migration.
- Astro has [official integrations for React, Preact, and Solid](/en/guides/integrations-guide/react/) so you can use your existing JSX components. Note that in Astro, these files **must** have a `.jsx` or `.tsx` extension.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ Here are some key concepts and migration strategies to help you get started. Use

Nuxt and Astro share some similarities that will help you migrate your project:

- Astro projects can also be SSG or [SSR with page level prerendering](/en/guides/server-side-rendering/#configuring-individual-routes).
- Astro projects can also be SSG or [SSR with page level prerendering](/en/guides/server-side-rendering/).
- Astro uses file-based routing, and [allows specially named pages to create dynamic routes](/en/core-concepts/routing/#dynamic-routes).
- Astro is [component-based](/en/core-concepts/astro-components/), and your markup structure will be similar before and after your migration.
- Astro has [an official integration for using Vue components](/en/guides/integrations-guide/vue/).
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ Gatsby y Astro comparten algunas similitudes que te ayudarán a migrar tu proyec

- Astro tiene soporte para [instalar paquetes de NPM](/es/guides/imports/#paquetes-npm), incluyendo bibliotecas de React. Muchas de tus dependencias existentes funcionarán en Astro.

- Al igual que en Gatsby, los proyectos de Astro pueden SSG o [SSR con prerrenderizado a nivel de página](/es/guides/server-side-rendering/#configuración-de-rutas-individuales).
- Al igual que en Gatsby, los proyectos de Astro pueden SSG o [SSR con prerrenderizado a nivel de página](/es/guides/server-side-rendering/).

## Principales diferencias entre Gatsby y Astro

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ Aquí hay algunos conceptos clave y estrategias de migración para ayudarte a em
Next.js y Astro comparten algunas similitudes que te ayudarán a migrar tu proyecto:

- La [sintaxis de los archivos `.astro` es similar a la de JSX](/es/core-concepts/astro-syntax/#diferencias-entre-astro-y-jsx). Escribir en Astro debería resultarte familiar.
- Los proyectos de Astro también pueden ser SSG o [SSR con prerenderización a nivel de página](/es/guides/server-side-rendering/#configuración-de-rutas-individuales).
- Los proyectos de Astro también pueden ser SSG o [SSR con prerenderización a nivel de página](/es/guides/server-side-rendering/).
- Astro utiliza el enrutamiento basado en archivos, y [permite que las páginas con nombre especiales creen rutas dinámicas](/es/core-concepts/routing/#rutas-dinámicas).
- Astro está [basado en componentes](/es/core-concepts/astro-components/), y la estructura de tu marcado será similar antes y después de la migración.
- Astro tiene [integraciones oficiales para React, Preact, y Solid](/es/guides/integrations-guide/react/) por lo que puedes utilizar tus componentes JSX existentes. Ten en cuenta que en Astro, estos archivos **deben** tener una extensión `.jsx` o `.tsx`.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ Aquí hay algunos conceptos clave y estragias de migración para ayudarte a come

Nuxt y Astro comparten algunas similitudes que te ayudarán a migrar tu proyecto:

- Los proyectos de Astro también pueden ser SSG o [SSR con prerenderizado a nivel de página](/es/guides/server-side-rendering/#configuración-de-rutas-individuales).
- Los proyectos de Astro también pueden ser SSG o [SSR con prerenderizado a nivel de página](/es/guides/server-side-rendering/).
- Astro usa un enrutamiento basado en archivos y [permite que las páginas con nombres creen rutas dinámicas](/es/core-concepts/routing/#rutas-dinámicas)
- Astro es [basado en componentes](/es/core-concepts/astro-components/) y la estructura de tu marcado será similar antes y después de tu migración.
- Astro tiene [una integración oficial para usar componentes de Vue](/es/guides/integrations-guide/vue/).
Expand Down
10 changes: 5 additions & 5 deletions src/content/docs/zh-cn/guides/deploy.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import DeployGuidesNav from '~/components/DeployGuidesNav.astro';

:::note[部署设置]
- **构建命令:** `astro build``npm run build`
- **发布目录:** `dist'
- **发布目录:** `dist`
:::

1. 点击 `Deploy`,你的新网站将在该服务商所提供的唯一链接上创建好了(例如:`new-astro-site.netlify.app`)。
Expand All @@ -48,11 +48,11 @@ import DeployGuidesNav from '~/components/DeployGuidesNav.astro';

1. 构建站点并部署到服务商

许多服务商会帮你构建和部署站点。它们通常也能识别出你的项目是 Astro 站点,会选择相应的配置设置进行构建和部署,就像下面一一。(如果不是,那么这些设置也可以进行修改)
许多服务商会帮你构建和部署站点。它们通常也能识别出你的项目是 Astro 站点,会选择相应的配置设置进行构建和部署,就像下面一样。(如果不是,那么这些设置也可以进行修改)

:::note[部署设置]
- **构建命令:** `astro build``npm run build`
- **发布目录:** `dist`
- **构建命令** `astro build``npm run build`
- **发布目录** `dist`
:::


Expand All @@ -70,7 +70,7 @@ import DeployGuidesNav from '~/components/DeployGuidesNav.astro';
npm run build
```

默认情况下,构建输出将会被放在 `dist/`. 你可以修改 [`outDir` 配置项](/zh-cn/reference/configuration-reference/#outdir)改变存储位置。
默认情况下,构建输出将会被放在 `dist/`你可以修改 [`outDir` 配置项](/zh-cn/reference/configuration-reference/#outdir)改变存储位置。

## 添加 SSR 适配器

Expand Down
34 changes: 34 additions & 0 deletions src/content/docs/zh-cn/guides/integrations-guide/markdoc.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -453,6 +453,40 @@ Astro Markdoc 集成处理了在 `markdoc.config.js` 文件中不可用的 Markd
`allowHTML` 被启用时,Markdoc 文档中的 HTML 标记将被渲染为实际的 HTML 元素(包括 `<script>`),这将使 XSS 等攻击向量成为可能。确保任何 HTML 标记来自可信的来源。
:::
### `ignoreIndentation`
默认情况下,任何使用四个空格缩进的内容都会被视为代码块。不幸的是,这种行为使得在具有复杂结构的文档中用任意级别的缩进来提高可读性变得困难。
在使用 Markdoc 的嵌套标签时,将标签内的内容缩进可以帮助清楚地显示层级深度。为了支持任意缩进,我们需要禁用基于缩进的代码块,并修改几个其他的 markdown-it 解析规则,以忽略缩进的代码块。即通过启用 ignoreIndentation 选项可以应用这些修改。
```diff lang="js" "ignoreIndentation: true"
// astro.config.mjs
import { defineConfig } from 'astro/config';
import markdoc from '@astrojs/markdoc';

export default defineConfig({
// ...
+ integrations: [markdoc({ ignoreIndentation: true })],
// ^^^^^^^^^^^^^^^^^^^^^^^
});
```
```md
# Welcome to Markdoc with indented tags 👋

# Note: Can use either spaces or tabs for indentation

{% custom-tag %}
{% custom-tag %} ### Tags can be indented for better readability

{% another-custom-tag %}
This is easier to follow when there is a lot of nesting
{% /another-custom-tag %}

{% /custom-tag %}
{% /custom-tag %}
```
## 示例
* [Astro Markdoc 入门模板](https://github.com/withastro/astro/tree/latest/examples/with-markdoc) 展示了如何在你的 Astro 项目中使用 Markdoc 文件。
Expand Down
12 changes: 3 additions & 9 deletions src/content/docs/zh-cn/guides/integrations-guide/mdx.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -56,15 +56,9 @@ npm install @astrojs/mdx

### 编辑器集成

[VS Code](https://code.visualstudio.com/)默认支持 Markdown。然而,为了支持 MDX 编辑器,你可能希望在你的 VSCode 配置中添加以下设置,这可以确保编写 MDX 文件时提供类似 Markdown 的编辑体验。

```json title=".vscode/settings.json"
{
"files.associations": {
"*.mdx": "markdown"
}
}
```
对于 [VS Code](https://code.visualstudio.com/) 的编辑器支持,请安装[官方的 MDX 扩展](https://marketplace.visualstudio.com/items?itemName=unifiedjs.vscode-mdx)

对于其他编辑器,请使用 [MDX 语言服务器](https://github.com/mdx-js/mdx-analyzer/tree/main/packages/language-server)

## 使用

Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/zh-cn/guides/integrations-guide/vue.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ export default defineConfig({
});
```

```js
```ts
// src/pages/_app.ts
import type { App } from 'vue';
import i18nPlugin from 'my-vue-i18n-plugin';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
Next.js 和 Astro 有一些相似之处,可以帮助你迁移你的项目:

- [`.astro` 文件的语法类似于 JSX](/zh-cn/core-concepts/astro-syntax/#astro-和-jsx-间的差异)。编写 Astro 应该会感觉很熟悉。
- Astro 项目也可以是 SSG 或[具有页面预渲染功能的 SSR](/zh-cn/guides/server-side-rendering/#配置单个路由)
- Astro 项目也可以是 SSG 或[具有页面预渲染功能的 SSR](/zh-cn/guides/server-side-rendering/)
- Astro 使用基于文件的路由,并[允许特定命名的页面创建动态路由](/zh-cn/core-concepts/routing/#动态路由)
- Astro 是[基于组件](/zh-cn/core-concepts/astro-components/)的,标签在迁移前后会很相似。
- Astro 具有针对 [React、Preact 和 Solid 的官方集成](/zh-cn/guides/integrations-guide/react/),因此可以使用现有的 JSX 组件。请注意,在 Astro 中,这些文件**必须**具有 `.jsx``.tsx` 扩展名。
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import FileTree from '~/components/FileTree.astro'

Nuxt 和 Astro 有一些相似之处,这些相似性能够帮助你完成迁移:

- Astro 项目可以是 SSG(静态网站生成)或 [支持页面级预渲染的 SSR(服务端渲染)](/zh-cn/guides/server-side-rendering/#配置单个路由)
- Astro 项目可以是 SSG(静态网站生成)或 [支持页面级预渲染的 SSR(服务端渲染)](/zh-cn/guides/server-side-rendering/)
- Astro 使用基于文件的路由,并且 [允许特定命名的页面创建动态路由](/zh-cn/core-concepts/routing/#动态路由)
- Astro 是 [基于组件的](/zh-cn/core-concepts/astro-components/),因此在迁移前后,你的标记结构将保持相似。
- Astro [官方支持使用 Vue 组件](/zh-cn/guides/integrations-guide/vue/)
Expand Down

0 comments on commit 2a84059

Please sign in to comment.