diff --git a/src/content/docs/es/editor-setup.mdx b/src/content/docs/es/editor-setup.mdx index 77e82ab0bebc7..c6bcc5e294cb5 100644 --- a/src/content/docs/es/editor-setup.mdx +++ b/src/content/docs/es/editor-setup.mdx @@ -36,6 +36,7 @@ Nuestra increíble comunidad mantiene extensiones para otros editores de código - [Extensión de Nova](https://extensions.panic.com/extensions/sciencefidelity/sciencefidelity.astro/)Comunidad - Provee resaltado de sintaxis y autocompletado para Astro en Nova. - [Vim Plugin](https://github.com/wuelnerdotexe/vim-astro) Comunidad - Provee resaltado de sintaxis, indentación y compatibilidad con folding de código para Astro en Vim o Neovim. - Neovim [LSP](https://github.com/neovim/nvim-lspconfig/blob/master/doc/server_configurations.md#astro) y [TreeSitter](https://github.com/virchau13/tree-sitter-astro) Plugins Comunidad - Provee resaltado de sintaxis, análisis de árboles y autocompletado para Astro en Neovim. +- Emacs - Ve las instrucciones para [Configurar Emacs y Eglot](https://medium.com/@jrmjrm/configuring-emacs-and-eglot-to-work-with-astro-language-server-9408eb709ab0) Comunidad para trabajar con Astro ## Editores de código del navegador diff --git a/src/content/docs/fr/core-concepts/astro-pages.mdx b/src/content/docs/fr/core-concepts/astro-pages.mdx index 07bd429bde95e..560d24e4e145c 100644 --- a/src/content/docs/fr/core-concepts/astro-pages.mdx +++ b/src/content/docs/fr/core-concepts/astro-pages.mdx @@ -4,6 +4,8 @@ description: Une introduction aux pages Astro i18nReady: true --- +import Since from '~/components/Since.astro' + Les **pages** sont des fichiers qui se trouvent dans le sous-répertoire `src/pages/` de votre projet Astro. Ils sont responsables de la gestion du routage, du chargement des données et de la mise en page globale de chaque page de votre site Web. ## Fichiers de page pris en charge @@ -51,6 +53,8 @@ Les pages Astro utilisent l'extension de fichier `.astro` et prennent en charge ``` +Une page doit produire un document HTML complet. S'il n'est pas explicitement inclus, Astro ajoutera la déclaration `` et le contenu `` nécessaires à tout composant `.astro` situé dans `src/pages/` par défaut. Vous pouvez renoncer à ce comportement pour chaque composant en le marquant comme une page [partial](#page-partielle). + Pour éviter de répéter les mêmes éléments HTML sur chaque page, vous pouvez déplacer les éléments communs `` et `` dans vos propres [composants de mise en page](/fr/core-concepts/layouts/). Vous pouvez utiliser autant, ou aussi peu de composants de mise en page que vous le souhaitez. ```astro {3} // @@ -96,3 +100,75 @@ Les fichiers portant l'extension `.html` peuvent être placés dans le répertoi Pour une page d'erreur 404 personnalisée, vous pouvez créer un fichier `404.astro` ou `404.md` dans `/src/pages`. Il sera construit en une page `404.html`. La plupart des [services de déploiement](/fr/guides/deploy/) le trouveront et l'utiliseront. + +## Page Partielle + + + +:::caution +Les pages partielles sont destinées à être utilisées en conjonction avec une bibliothèque front-end, telle que [htmx](https://htmx.org/) ou [Unpoly](https://unpoly.com/). Vous pouvez également les utiliser si vous êtes à l'aise avec l'écriture d'un JavaScript front-end de bas niveau. C'est pourquoi il s'agit d'une fonctionnalité avancée. + +En outre, les pages partielles ne doivent pas être utilisées si le composant contient des styles ou des scripts, car ces éléments seront supprimés de la sortie HTML. Si vous avez besoin de styles délimités, il est préférable d'utiliser des pages régulières, non partielles, ainsi qu'une bibliothèque front-end qui sait comment fusionner le contenu dans l'en-tête. +::: + +Les partiels sont des composants de page situés dans `src/pages/` qui ne sont pas destinés à être affichés comme des pages complètes. + +Comme les composants situés en dehors de ce dossier, ces fichiers n'incluent pas automatiquement la déclaration ``, ni aucun contenu `` tel que les styles et les scripts. + +Cependant, parce qu'ils sont situés dans le répertoire spécial `src/pages/`, le HTML généré est disponible à une URL correspondant à son chemin de fichier. Cela permet à une bibliothèque de rendu (par exemple htmx, Stimulus, jQuery) d'y accéder sur le client et de charger des sections de HTML dynamiquement sur une page sans rafraîchissement du navigateur ni navigation dans la page. + +Les partiels, lorsqu'ils sont associés à une bibliothèque de rendu, constituent une alternative aux [îles Astro](/fr/concepts/islands/) et aux [balises ` + + +
+
Target here
+ +
+``` + +Le fichier partiel `.astro` doit exister dans le chemin d'accès correspondant et inclure une exportation définissant la page comme un fichier partiel : + +```astro title="src/pages/partials/clicked.astro" {2} +--- +export const partial = true; +--- +
J'ai été cliqué!
+``` + +Voir la [documentation htmx](https://htmx.org/docs/) pour plus de détails sur l'utilisation de htmx. diff --git a/src/content/docs/fr/editor-setup.mdx b/src/content/docs/fr/editor-setup.mdx index 33d239f8f3026..c2e74657b9be8 100644 --- a/src/content/docs/fr/editor-setup.mdx +++ b/src/content/docs/fr/editor-setup.mdx @@ -36,6 +36,7 @@ Notre incroyable communauté gère plusieurs extensions pour d'autres éditeurs - [Nova Extension](https://extensions.panic.com/extensions/sciencefidelity/sciencefidelity.astro/) Community - Fournit la coloration syntaxique et la complétion de code pour Astro à l'intérieur de Nova - [Vim Plugin](https://github.com/wuelnerdotexe/vim-astro) Community - Fournit la coloration syntaxique, l'indentation et le support de pliage de code pour Astro à l'intérieur de Vim ou Neovim. - Neovim [LSP](https://github.com/neovim/nvim-lspconfig/blob/master/doc/server_configurations.md#astro) and [TreeSitter](https://github.com/virchau13/tree-sitter-astro) Plugins Community - Fournit la coloration syntaxique, l'analyse des repertoires et l'achèvement du code pour Astro dans Neovim. +- Emacs - Voir les instructions pour [Configurer Emacs et Eglot](https://medium.com/@jrmjrm/configuring-emacs-and-eglot-to-work-with-astro-language-server-9408eb709ab0) Community pour travailler avec Astro ## Éditeur de code "In-Browser" @@ -75,7 +76,7 @@ Pour commencer, installez d'abord Prettier et le plugin : ```shell - pnpm install -D prettier prettier-plugin-astro + pnpm add -D prettier prettier-plugin-astro ``` diff --git a/src/content/docs/fr/guides/deploy/microsoft-azure.mdx b/src/content/docs/fr/guides/deploy/microsoft-azure.mdx index d57c0ad76029b..0e7ed27c6869a 100644 --- a/src/content/docs/fr/guides/deploy/microsoft-azure.mdx +++ b/src/content/docs/fr/guides/deploy/microsoft-azure.mdx @@ -7,8 +7,9 @@ i18nReady: true [Azure](https://azure.microsoft.com/) est une plateforme cloud de Microsoft. Vous pouvez déployer votre site Astro avec le service [Static Web Apps](https://aka.ms/staticwebapps) de Microsoft Azure. -## Conditions préalables +Ce guide vous explique comment déployer votre site Astro stocké dans GitHub à l'aide de Visual Studio Code. Veuillez vous référer aux guides Microsoft pour l'utilisation d'une [tâche Azure Pipelines](https://learn.microsoft.com/en-us/azure/devops/pipelines/tasks/reference/azure-static-web-app-v0?view=azure-pipelines) pour d'autres configurations. +## Conditions préalables Pour suivre ce guide, vous aurez besoin de : - Un compte Azure et une clé d'abonnement. Vous pouvez créer un [compte Azure gratuit ici](https://azure.microsoft.com/free). @@ -21,6 +22,24 @@ Pour suivre ce guide, vous aurez besoin de : 2. Ouvrez l'extension Static Web Apps, connectez-vous à Azure et cliquez sur le bouton **+** pour créer une nouvelle Static Web App. Vous serez invité à désigner la clé d'abonnement à utiliser. -3. Suivez l'assistant lancé par l'extension pour donner un nom à votre application, choisir un préréglage de cadre et désigner la racine de l'application (généralement `/`) et l'emplacement du fichier construit `/dist`. L'assistant s'exécutera et créera une [Action GitHub](https://github.com/features/actions) dans le dossier `.github` de votre dépôt. (Ce dossier sera automatiquement créé s'il n'existe pas déjà). +3. Suivez l'assistant lancé par l'extension pour donner un nom à votre application, choisir un préréglage de cadre et désigner la racine de l'application (généralement `/`) et l'emplacement du fichier construit (utilisez `/dist`). Astro n'est pas listé dans les modèles intégrés dans Azure, vous devrez donc sélectionner `custom`. L'assistant s'exécutera et créera une [Action GitHub](https://github.com/features/actions) dans le dossier `.github` de votre dépôt. (Ce dossier sera automatiquement créé s'il n'existe pas déjà.) L'action GitHub va déployer votre application (vous pouvez voir sa progression dans l'onglet Actions de votre repo sur GitHub). Une fois le déploiement terminé, vous pouvez visualiser votre application à l'adresse indiquée dans la fenêtre de progression de l'extension SWA en cliquant sur le bouton **Browse Website** (qui apparaîtra après l'exécution de l'action GitHub). + + +## Problèmes connus +L'action GitHub yaml qui est créée pour vous, suppose l'utilisation de node 14. Cela signifie que la construction d'Astro échoue. Pour résoudre ce problème, mettez à jour le fichier package.json de votre projet avec cet extrait. + +``` + "engines": { + "node": ">=18.0.0" + }, +``` + +## Ressources officielles + +- [Documentation de Microsoft Azure Static Web Apps](https://learn.microsoft.com/fr-fr/azure/static-web-apps/ + +## Ressources de la communauté + +- [Déploiement d'un site web Astro vers Azure Static Web Apps](https://www.blueboxes.co.uk/deploying-an-astro-website-to-azure-static-web-apps) diff --git a/src/content/docs/fr/guides/integrations-guide/cloudflare.mdx b/src/content/docs/fr/guides/integrations-guide/cloudflare.mdx index 717e589423af5..2812024d532fe 100644 --- a/src/content/docs/fr/guides/integrations-guide/cloudflare.mdx +++ b/src/content/docs/fr/guides/integrations-guide/cloudflare.mdx @@ -2,7 +2,7 @@ type: integration title: '@astrojs/cloudflare' description: Apprendre à utiliser l'adaptateur SSR @astrojs/cloudflare pour déployer votre projet Astro. -githubURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/cloudflare/' +githubURL: 'https://github.com/withastro/adapters/tree/main/packages/cloudflare/' hasREADME: true category: adapter i18nReady: true @@ -11,8 +11,6 @@ i18nReady: true import Video from '~/components/Video.astro'; import DontEditWarning from '~/components/DontEditWarning.astro'; - - Un adaptateur SSR pour utiliser les fonctionnalités de Cloudflare Pages. Écrivez votre code en Astro/Javascript et déployez-le sur Cloudflare Pages. ## Installation @@ -183,7 +181,7 @@ Par défaut: `false` Importer ou non les fichiers `.wasm` directement en tant que [modules ES](https://github.com/WebAssembly/esm-integration/tree/main/proposals/esm-integration). -Ajouter `wasmModuleImports: true` à `astro.config.mjs` pour l'activer à la fois dans la version Cloudflare et dans le serveur de développement Astro. En savoir plus sur l'[utilisation des modules Wasm](#utilisation-des-modules-wasm) +Ajouter `wasmModuleImports: true` à `astro.config.mjs` pour l'activer à la fois dans la version Cloudflare et dans le serveur de développement Astro. En savoir plus sur l'[utilisation des modules Wasm](#utilisation-des-modules-wasm). ```diff lang="ts" // astro.config.mjs @@ -200,15 +198,25 @@ Ajouter `wasmModuleImports: true` à `astro.config.mjs` pour l'activer à la foi ### `runtime` -`runtime: "off" | "local"` +`runtime: { mode: "off" | "local", persistTo: string }` -Par défaut `"off"` +Par défaut `{ mode: 'off', persistTo: '' }` Détermine si et comment le Cloudflare Runtime est ajouté à `astro dev`. +Le moteur d'exécution Cloudflare comprend les [liaisons Cloudflare](https://developers.cloudflare.com/pages/platform/functions/bindings), les [variables d'environment](https://developers.cloudflare.com/pages/platform/functions/bindings/#environment-variables), et l'[objet cf](https://developers.cloudflare.com/workers/runtime-apis/request/#incomingrequestcfproperties). En savoir plus sur [l'accès au moteur d'exécution Cloudflare](#cloudflare-runtime). + +La propriété `mode` définit comment le moteur d'exécution est ajouté à `astro dev` : + * `local`: utilise des bindings mocking et des placeholders statiques localement. * `off`: pas d'accès au runtime Cloudflare en utilisant `astro dev`. Vous pouvez également utiliser [Prévisualisation avec Wrangler](#prévisualisation-avec-wrangler) +La propriété `persistTo` définit l'endroit où le moteur d'exécution local est installé lors de l'utilisation de `mode : local`. Cette valeur est un répertoire relatif à votre chemin d'exécution `astro dev`. + +La valeur par défaut est `.wrangler/state/v3` pour correspondre au chemin par défaut utilisé par Wrangler. Cela signifie que les deux outils sont capables d'accéder et d'utiliser l'état local. + +Quel que soit le répertoire défini dans `persistTo`, `.wrangler` ou votre valeur personnalisée, il doit être ajouté à `.gitignore`. + ```js // astro.config.mjs import { defineConfig } from 'astro/config'; @@ -217,7 +225,7 @@ import cloudflare from '@astrojs/cloudflare'; export default defineConfig({ output: 'server', adapter: cloudflare({ - runtime: 'local', ++ runtime: { mode: 'local' }, }), }); ``` @@ -351,6 +359,7 @@ L'adaptateur Cloudflare d'Astro vous permet d'utiliser n'importe quelle API d'ex * assert * AsyncLocalStorage * Buffer +* Crypto * Diagnostics Channel * EventEmitter * path @@ -369,6 +378,10 @@ import { Buffer } from 'node:buffer'; En plus, vous devez activer l'option de compatibilité (Compatibility Flag) dans Cloudflare. La configuration de cette option peut varier en fonction de l'endroit où vous déployez votre site Astro. Pour des conseils détaillés, consulter la [documentation Cloudflare (EN)](https://developers.cloudflare.com/workers/runtime-apis/nodejs). +## Support des modules Cloudflare + +Tous les paquets Cloudflare (par exemple `cloudflare:sockets`) sont autorisés à être utilisés. Notez que le paquet `cloudflare:sockets` ne fonctionne pas localement sans utiliser le mode dev de Wrangler. + ## Prévisualisation avec Wrangler Pour utiliser [`wrangler`](https://developers.cloudflare.com/workers/wrangler/) afin d'exécuter votre application localement, mettez à jour le script de prévisualisation : diff --git a/src/content/docs/fr/guides/middleware.mdx b/src/content/docs/fr/guides/middleware.mdx index 936649a8d6787..bc86bc38a0989 100644 --- a/src/content/docs/fr/guides/middleware.mdx +++ b/src/content/docs/fr/guides/middleware.mdx @@ -30,13 +30,13 @@ Le middleware est disponible dans les projets SSG et SSR Astro. 3. Dans n'importe quel fichier `.astro`, accédez aux données de réponse en utilisant `Astro.locals`. -```astro title="src/components/Component.astro" ---- -const data = Astro.locals; ---- -

{data.title}

-

Cette {data.property} provient du middleware.

-``` + ```astro title="src/components/Component.astro" + --- + const data = Astro.locals; + --- +

{data.title}

+

This {data.property} provient du middleware.

+ ``` ### Types de middleware @@ -53,7 +53,7 @@ export const onRequest = defineMiddleware((context, next) => { }); ``` -A la place, si vous utilisez JsDoc pour profiter de la sécurité des types, vous pouvez utiliser `MiddlewareRequestHandler` : +A la place, si vous utilisez JsDoc pour profiter de la sécurité des types, vous pouvez utiliser `MiddlewareResponseHandler`: ```js // src/middleware.js diff --git a/src/content/docs/fr/reference/errors/collection-does-not-exist-error.mdx b/src/content/docs/fr/reference/errors/collection-does-not-exist-error.mdx index 8fb14799d0348..e6f2d7baf0462 100644 --- a/src/content/docs/fr/reference/errors/collection-does-not-exist-error.mdx +++ b/src/content/docs/fr/reference/errors/collection-does-not-exist-error.mdx @@ -3,9 +3,10 @@ title: Collection does not exist i18nReady: true githubURL: https://github.com/withastro/astro/blob/main/packages/astro/src/core/errors/errors-data.ts --- +import DontEditWarning from '~/components/DontEditWarning.astro' :::caution[Obsolète] -Les collections qui n'existent pas n'entraînent plus d'erreur. Un avertissement est omis à la place. +Les collections qui n'existent pas n'entraînent plus d'erreur. Un avertissement est donné à la place. ::: > Aucune collection n'a été trouvée lors de l'appel à `getCollection()`. diff --git a/src/content/docs/fr/reference/publish-to-npm.mdx b/src/content/docs/fr/reference/publish-to-npm.mdx index 6d2892208a464..4d8517205a6b0 100644 --- a/src/content/docs/fr/reference/publish-to-npm.mdx +++ b/src/content/docs/fr/reference/publish-to-npm.mdx @@ -258,7 +258,7 @@ Partagez votre travail en ajoutant votre intégration à notre [bibliothèque d' ### Données du fichier `package.json` -La bibliothèque est mise à jour tous les jours automatiquement; chaque Paquet publié sur NPM avec le mot-clé `astro-component` est extrait. +La bibliothèque est automatiquement mise à jour chaque semaine; chaque paquet publié sur NPM avec le mot-clé `astro-component` est extrait. La bibliothèque d'intégration lit les données `name`, `description`, `repository`, et `homepage` de votre `package.json`. @@ -283,4 +283,4 @@ En plus du mot-clé obligatoire `astro-component` ou `withastro`, des mots-clés ## Partagez -Nous vous encourageons à partager votre travail, nous apprécions vraiment de voir ce que nos talentueux Astronautes créent. Partagez ce que vous créez avec nous dans notre [Discord](https://discord.gg/YQRVveAgED) ou mentionnez [@astrodotbuild](https://twitter.com/astrodotbuild) dans un Tweet ! +Nous vous encourageons à partager votre travail, nous apprécions vraiment de voir ce que nos talentueux Astronautes créent. Venez partager vos créations avec nous sur notre [Discord](https://astro.build/chat) ou mentionnez [@astrodotbuild](https://twitter.com/astrodotbuild) dans un Tweet ! diff --git a/src/content/docs/zh-cn/core-concepts/rendering-modes.mdx b/src/content/docs/zh-cn/core-concepts/rendering-modes.mdx new file mode 100644 index 0000000000000..1e49b0b917d53 --- /dev/null +++ b/src/content/docs/zh-cn/core-concepts/rendering-modes.mdx @@ -0,0 +1,54 @@ +--- +title: "渲染模式" +i18nReady: true +--- +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; +import RecipeLinks from '~/components/RecipeLinks.astro'; + +你的 Astro 项目代码必须被**渲染**为 HTML 才能在网页上显示。 + +Astro 页面、路由和 API 端点可以在[构建时预渲染](#预渲染)或者在请求路由时[由服务器按需渲染](#按需渲染)。通过 [Astro 群岛](/zh-cn/concepts/islands/)，你也可以在必要时包含一些客户端渲染。 + +在 Astro 中，大部分处理都是在服务器上进行，而非浏览器中。这通常使你的网站或应用在性能羸弱的设备或在较慢的互联网连接上查看时比客户端渲染更快。同时，服务端渲染的 HTML 不仅快速、对 SEO 友好，并且还默认支持无障碍。 + +## 服务器 `output` 模式 + +你可以在你的 [`output` 配置](/zh-cn/reference/configuration-reference/#output)中设置你的页面如何渲染。 + +### 预渲染 + +**默认的渲染模式是 __`output: 'static'`__**，它在构建时为你的所有页面路由创建 HTML。 + +在这种模式下，**你的整个站点将被预渲染**，服务器将提前构建所有页面，并准备好发送给浏览器。对于每个访问者，都会发送相同的 HTML 文档，而更新页面内容需要全站重新构建。这种方法也被称为**静态站点生成（SSG）**。 + +默认情况下，所有 Astro 项目都被配置为在构建时预渲染（静态生成），以提供最轻量级的浏览器体验。浏览器无需等待任何 HTML 构建，因为服务器无需按需生成任何页面。你的网站不依赖后端数据源的性能，一旦构建完成，只要你的服务器正常运行，它就会作为静态站点一直对访问者开放。 + +静态站点可以包含 [Astro 群岛](/zh-cn/concepts/islands/)。比如在其他静态的、预渲染的页面中，你也可以选择你喜欢的 [UI 框架](/zh-cn/core-concepts/framework-components/) 来编写用于交互式 UI 组件（或者甚至是完全嵌入的客户端渲染应用！）。 + +Astro 的 [视图过渡动画 API](/zh-cn/guides/view-transitions/) 在 `static` 模式下也可用，用于在页面导航中进行动画和状态持久化。静态网站也可以使用 [中间件](/zh-cn/guides/middleware/) 来拦截和转换请求的响应数据。 + +:::tip +Astro 的默认 `static` 模式是一个强大的、有现代感的选择，适用于内容优先的网站，这些网站通常更新并不频繁，并向所有访问者显示相同的页面内容。 +::: + +### 按需渲染 + +Astro 的其他两种输出模式可以配置为**按需渲染你的部分或所有页面、路由或 API 端点**： + - __`output: 'server'`__ 用于大部分或全部按需路由的高度动态网站。 + - __`output: 'hybrid'`__ 用于大部分静态网站，但仍有一些按需路由。 + +由于它们是按访问生成的，所以这些路由可以为每个访客定制。例如，按需渲染的页面可以向已登录的用户显示他们的账户信息，或者显示最新更新的数据，而无需全站重建。请求时，在服务器上按需渲染也被称为**服务端渲染（SSR）**。 + +如果你需要以下功能，[可以考虑在你的 Astro 项目中启用 `server` 或 `hybrid` 模式](/zh-cn/guides/server-side-rendering/#启用按需服务器渲染)： + +- **API 端点**：创建作为 API 端点的特定页面，用于数据库访问、身份验证和授权等任务，同时将敏感数据隐藏在服务端。 + +- **受保护的页面**：通过在服务器上处理用户访问，以限制对页面的访问。 + +- **频繁更改的内容**：生成单个页面时无需静态重建你的网站。当页面的内容频繁更新时，这是非常有用的，例如动态调用 `fetch()` 从 API 获取的数据。 + +`server` 和 `hybrid` 输出模式都允许你在你选择的 [UI 框架](/zh-cn/core-concepts/framework-components/) 中包含 [Astro 群岛](/zh-cn/concepts/islands/) 以增加交互性（甚至可以嵌入整个客户端渲染的应用！）。通过 [中间件](/zh-cn/guides/middleware/) 和 Astro 的 [视图过渡动画 API](/zh-cn/guides/view-transitions/)，用于动画和在路由导航中保持状态，甚至可以创建高度交互的应用。 + +:::tip +Astro 的按需服务器渲染提供了真正的应用体验，而无需客户端单页应用的 JavaScript 开销。 +::: \ No newline at end of file diff --git a/src/content/docs/zh-cn/editor-setup.mdx b/src/content/docs/zh-cn/editor-setup.mdx index 67d623a5f1963..c51fc2bd338fb 100644 --- a/src/content/docs/zh-cn/editor-setup.mdx +++ b/src/content/docs/zh-cn/editor-setup.mdx @@ -35,6 +35,7 @@ JetBrains 即将推出的 [Fleet IDE](https://www.jetbrains.com/fleet/) 将支 - [Nova 扩展](https://extensions.panic.com/extensions/sciencefidelity/sciencefidelity.astro/)社区 - 为 Astro 提供语法高亮、智能提示、自动补全 - [Vim 插件](https://github.com/wuelnerdotexe/vim-astro) 社区 - 在 Vim 或 Neovim 中为 Astro 提供语法高亮、缩进和代码折叠支持 - Neovim [LSP](https://github.com/neovim/nvim-lspconfig/blob/master/doc/server_configurations.md#astro) 和 [TreeSitter](https://github.com/virchau13/tree-sitter-astro) 插件 社区 - 为 Neovim 内的 Astro 提供语法高亮、treesitter 解析和代码补全。 +- Emacs - 查看 [配置 Emacs 和 Eglot](https://medium.com/@jrmjrm/configuring-emacs-and-eglot-to-work-with-astro-language-server-9408eb709ab0) 的指南社区 - 与 Astro 协作 ## 云端编辑器 @@ -74,7 +75,7 @@ JetBrains 即将推出的 [Fleet IDE](https://www.jetbrains.com/fleet/) 将支 ```shell - pnpm install -D prettier prettier-plugin-astro + pnpm add -D prettier prettier-plugin-astro ``` diff --git a/src/content/docs/zh-cn/guides/content-collections.mdx b/src/content/docs/zh-cn/guides/content-collections.mdx index 0b07df4fd7af2..184f2a01483a9 100644 --- a/src/content/docs/zh-cn/guides/content-collections.mdx +++ b/src/content/docs/zh-cn/guides/content-collections.mdx @@ -8,6 +8,7 @@ import FileTree from '~/components/FileTree.astro' import Since from '~/components/Since.astro' import TypeScriptSettingTabs from '~/components/tabs/TypeScriptSettingTabs.astro' import RecipeLinks from "~/components/RecipeLinks.astro" +import Badge from "~/components/Badge.astro"

@@ -544,6 +545,20 @@ const { Content } = await entry.render(); 请参考我们的[手把手教程](/zh-cn/tutorials/add-content-collections/)中的示例，了解如何将位于 `src/pages/posts/` 的基本博客示例转换为 `src/content/posts` 目录下的示例。该教程使用了[构建博客教程的完整项目](https://github.com/withastro/blog-tutorial-demo)的代码库。 +## 启用构建缓存 + +

实验性

+ +如果你正在处理大量的集合，你可能希望通过 [`experimental.contentCollectionCache`](/zh-cn/reference/configuration-reference/#experimentalcontentcollectioncache) 标志启用缓存的构建。这个实验性的功能优化了 Astro 的构建过程，使得未改变的集合能够在构建之间被存储和复用。 + +在许多情况下，这可以导致显著的构建性能提升。 + +虽然这个功能正在稳定中，但你也可能会遇到与存储缓存有关的问题。所以你始终可以通过运行以下命令重置你的构建缓存： + +``` +npm run astro build -- --force +``` + ## 用 Remark 修改 Frontmatter :::caution diff --git a/src/content/docs/zh-cn/guides/integrations-guide/prefetch.mdx b/src/content/docs/zh-cn/guides/integrations-guide/prefetch.mdx index 6f2fcdbf16e96..90fa8a8c2fbef 100644 --- a/src/content/docs/zh-cn/guides/integrations-guide/prefetch.mdx +++ b/src/content/docs/zh-cn/guides/integrations-guide/prefetch.mdx @@ -8,6 +8,8 @@ category: other i18nReady: true --- +> 注意：`@astrojs/prefetch` 已被弃用。请使用 Astro 3.5 中的 `prefetch` 功能。可查看 [迁移指南](/zh-cn/guides/prefetch/#从-astrojsprefetch-迁移)。 + ## 什么是预请求？ 页面加载时间对于网站的可用性和整体体验起着至关重要的作用。通过在屏幕上可见时预请求页面链接，此集成将近乎即时的页面导航的优点带到了你的多页应用程序（MPA）中。 diff --git a/src/content/docs/zh-cn/guides/prefetch.mdx b/src/content/docs/zh-cn/guides/prefetch.mdx new file mode 100644 index 0000000000000..b5404fd4a6784 --- /dev/null +++ b/src/content/docs/zh-cn/guides/prefetch.mdx @@ -0,0 +1,185 @@ +--- +title: 预获取 +description: 预获取链接以在页面间实现更快的导航。 +i18nReady: true +--- + +页面加载时间在网站的可用性和整体体验中扮演着重要角色。当你的访问者与网站进行交互时，Astro 的**可选预获取**功能能在你的多页面应用（MPA）中带来几乎瞬时的页面导航的好处。 + +## 启用预获取 + +你可以使用 `prefetch` 配置来启用预获取： + +```js title="astro.config.js" ins={4} +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + prefetch: true +}) +``` + +一个预获取脚本将被添加到你网站的所有页面。然后你可以在你网站的任何 `` 链接上添加 `data-astro-prefetch` 属性来选择预获取。当你将鼠标悬停在链接上时，脚本将在后台获取页面。 + +```html + +``` + +注意，预获取只适用于你的网站内的链接，不适用于外部链接。 + +## 预获取配置 + +`prefetch` 配置也接受一个选项对象，以进一步自定义预获取。 + +### 预获取策略 + +Astro 支持 3 种预获取策略，以适应各种用例： + +- `hover`（默认）：当你将鼠标悬停在链接上或聚焦在链接上时预获取。 +- `tap`：在你点击链接之前预获取。 +- `viewport`：当链接进入视口时预获取。 + +你可以通过将其传递给 `data-astro-prefetch` 属性来为单个链接指定策略： + +```html +About +``` + +每种策略都经过了微调，只有在需要时才预获取，以节省用户的带宽。例如： + +- 如果访问者使用[流量节省模式](https://developer.mozilla.org/zh-CN/docs/Web/API/NetworkInformation/saveData)或者有[慢速连接](https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation/effectiveType)，则预获取将被关闭。 +- 快速悬停或滚动链接不会预获取它们。 +- 使用 `viewport` 策略的链接会以较低的优先级预获取，以避免堵塞网络。 + +### 默认预获取策略 + +添加 `data-astro-prefetch` 属性时的默认预获取策略是 `hover`。要更改它，你可以在你的 `astro.config.js` 文件中配置 [`prefetch.defaultStrategy`](/zh-cn/reference/configuration-reference/#prefetchdefaultstrategy)： + +```js title="astro.config.js" ins={4-6} +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + prefetch: { + defaultStrategy: 'viewport' + } +}) +``` + +### 默认预获取所有链接 + +如果你想预获取所有链接，包括那些没有 `data-astro-prefetch` 属性的链接，你可以将 [`prefetch.prefetchAll`](/zh-cn/reference/configuration-reference/#prefetchprefetchall) 设置为 `true`： + +```js title="astro.config.js" ins={4-6} +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + prefetch: { + prefetchAll: true + } +}) +``` + +然后你可以通过设置 `data-astro-prefetch="false"` 来为单个链接选择不进行预获取： + +```html +About +``` + +所有链接的默认预获取策略可以通过 `prefetch.defaultStrategy` 更改，如 [默认预获取策略部分](#默认预获取策略) 所示。 + +## 可编程的预获取 + +由于一些导航可能不总是以 `` 链接的形式出现，你也可以使用 `astro:prefetch` 模块中的 `prefetch()` API 进行程序化预获取： + +```astro + + + +``` + +你还可以通过传递 `with` 选项来配置预获取的优先级： + +```js +// 使用 `fetch()` 预获取，它具有更高的优先级。 +prefetch('/about', { with: 'fetch' }); + +// 使用 `` 预获取，它具有较低的优先级 +// 并由浏览器手动调度。（默认） +prefetch('/about', { with: 'link' }); +``` + +`prefetch()` API 包括相同的[流量节省模式](https://developer.mozilla.org/zh-CN/docs/Web/API/NetworkInformation/saveData)和[慢速连接](https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation/effectiveType)检测，因此只有在需要时才预获取。 + +确保只在客户端脚本中导入 `prefetch()`，因为它依赖于浏览器 API。 + +## 与视图过渡动画一起使用 + +当你在页面上使用 [视图过渡动画](/zh-cn/guides/view-transitions/) 时，预获取也将默认启用。它设置了一个默认配置 `{ prefetchAll: true }`，在页面上启用 [所有链接的预获取](#默认预获取所有链接)。 + +你可以在 `astro.config.js` 中自定义预获取配置以覆盖默认设置。例如： + +```js title="astro.config.js" +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + // 完全禁用预获取 + prefetch: false +}) +``` + +```js title="astro.config.js" +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + // 保留预获取，但只对带有 `data-astro-prefetch` 的链接进行预获取 + prefetch: { + prefetchAll: false + } +}) +``` + +## 从 `@astrojs/prefetch` 迁移 + +`@astrojs/prefetch` 集成在 v3.5.0 中被弃用，最终将被完全移除。使用以下说明将 `@astrojs/prefetch` 迁移到 Astro 的内置预获取，这将替代这个集成。 + +1. 删除 `@astrojs/prefetch` 集成，并在 `astro.config.js` 中启用 `prefetch` 配置： + + ```js title="astro.config.js" ins={6} del={2,5} + import { defineConfig } from 'astro/config'; + import prefetch from '@astrojs/prefetch'; + + export default defineConfig({ + integrations: [prefetch()], + prefetch: true + }) + ``` + +2. 从 `@astrojs/prefetch` 的配置选项转换： + + - 已弃用的集成使用 `selector` 配置选项来指定哪些链接应在进入视口时被预获取。 + + 而现在，你需要在这些单独的链接上添加 `data-astro-prefetch="viewport"`。 + + ```html + + ``` + + - 已弃用的集成使用 `intentSelector` 配置选项来指定哪些链接在被悬停或聚焦时应被预获取。 + + 现在，你需要在这些单独的链接上添加 `data-astro-prefetch` 或 `data-astro-prefetch="hover"`： + + ```html + + + + + + ``` + + - `@astrojs/prefetch` 的 `throttles` 选项不再需要，因为新的预获取特性将自动调度和优化预获取。 \ No newline at end of file diff --git a/src/content/docs/zh-cn/guides/server-side-rendering.mdx b/src/content/docs/zh-cn/guides/server-side-rendering.mdx index e57e202a88526..4ae44c4b8faf2 100644 --- a/src/content/docs/zh-cn/guides/server-side-rendering.mdx +++ b/src/content/docs/zh-cn/guides/server-side-rendering.mdx @@ -1,44 +1,68 @@ --- -title: 服务端渲染 +title: 按需渲染适配器 i18nReady: true --- -import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro' +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; +import RecipeLinks from '~/components/RecipeLinks.astro'; -服务器端渲染（SSR）是指按需在服务器上生成 HTML 页面并将其发送到客户端。 +Astro 允许你为部分或所有页面和端点选择**按需渲染**。这也被称为**服务器端渲染 (SSR)**：在服务器上根据请求生成 HTML 页面，并将其发送给客户端。一个**适配器**被用来在服务器上运行你的项目并处理这些请求。 -SSR 允许你： +这种按需渲染允许你： - 在应用中实现登录状态的会话。 -- 从使用 `fetch` 动态调用的 API 呈现数据。 +- 从使用 `fetch()` 动态调用的 API 呈现数据。 - 使用 *适配器* 将站点部署到主机。 -如果需要，请考虑在 Astro 项目中启用服务器端渲染： +如果你需要以下功能，可以考虑在你的 Astro 项目中启用按需服务器渲染： -- **API 端点**：SSR 使你能够创建特定页面，这些页面充当数据库访问、身份验证和授权等任务的 API 端点，同时对客户端隐藏敏感数据。 -- **受保护的页面**：如果需要根据用户权限限制对页面的访问，可以启用 SSR 来处理服务器上的用户访问。 -- **频繁更改的内容**：启用 SSR 可让你生成单个页面，而无需静态重建站点。当页面内容频繁更新时，这很有用。 +- **API 端点**：创建作为 API 端点的特定页面，用于数据库访问、身份验证和授权等任务，同时将敏感数据隐藏在服务端。 -## 启用 SSR +- **受保护的页面**：通过在服务器上处理用户访问，以限制对页面的访问。 -首先，在开发模式使用`output: server`配置选项来启用 SSR 功能： -要为生产部署启用 SSR 功能，请将 `输出` 配置更新为 `服务器` 或 `混合`（在 **v2.6.0** 中引入）。这两种模式都控制哪些[页面](/zh-cn/core-concepts/astro-pages/)或[服务器端点](/zh-cn/core-concepts/endpoints/#服务器端点api-路由)应该呈现服务器。每个配置选项都有不同的默认行为，并允许各个路由相应地选择退出默认值： +- **频繁更改的内容**：生成单个页面时无需静态重建你的网站。当页面的内容频繁更新时，这是非常有用的，例如动态调用 `fetch()` 从 API 获取的数据。 -- __`output: 'server'`__：默认情况下服务器渲染。当大部分或全部网站应由服务器渲染时，请使用此选项。任何单个页面或端点都可以*选择加入*预渲染。 +## 启用按需服务器渲染 - ```js ins={3,6,7} - // astro.config.mjs - import { defineConfig } from 'astro/config'; - import nodejs from '@astrojs/node'; +Astro 的两种按需渲染输出模式（`server` 和 `hybrid`）都允许你通过尽可能预渲染单个路由来利用静态站点的性能优势，不论你是拥有一个完全动态的应用，还是大部分都是静态的网站，只需要为选定的路由进行按需渲染。 - export default defineConfig({ - output: 'server', - adapter: nodejs(), - }); - ``` +为了决定在你的项目中使用哪一个，清选择一个 `output` 选项，这个选项代表了你的**大部分**页面和路由将如何被渲染： + +- __`output: 'server'`__：默认按需渲染。当你的网站或应用的大部分或全部应该在请求时进行服务器渲染时使用这个选项。任何单独的页面或端点都可以*选择加入*预渲染。 +- __`output: 'hybrid'`__：默认预渲染为 HTML。在你的网站大部分应该是静态的时候使用这个选项。任何单独的页面或端点都可以*选择退出*预渲染。 + +因为服务器需要按需生成至少一些页面，所以这两种模式都需要你[添加一个适配器](#添加一个适配器)来执行服务器功能。 + + +### 配置 `sever` 或 `hybrid` 模式 -- __`output: 'hybrid'`__：默认预渲染为 HTML。当网站的大部分内容应该是静态的时，请使用此选项。任何单个页面或端点都可以*选择退出*预渲染。 +要启用按需渲染，首先更新你的 `output` 配置为两种服务器渲染模式之一。 -然后，你可以在任何页面或路由中使用 export 语句选择退出默认渲染行为： +例如，要配置一个高度动态的应用，其中每个页面默认都由服务器按需渲染，将 `output: 'server'` 添加到你的 Astro 配置中： + +```js ins={5} title="astro.config.mjs" +import { defineConfig } from 'astro/config'; +import nodejs from '@astrojs/nodejs'; + +export default defineConfig({ + output: 'server', +}); +``` + +然后，你也可以选择在任何页面或路由上通过导出 `const prerender = true` 来覆盖 `server` 模式的默认按需渲染： + +```astro title="src/pages/my-static-page.astro" ins={2} +--- +export const prerender = true; +// ... +--- + + + +``` + +### 在 `server` 模式中选择加入预渲染 + +对于大部分以 `output: server` 配置的服务器渲染应用，添加 `export const prerender = true` 到任何页面或路由，以预渲染一个静态页面或端点： ```astro title="src/pages/mypage.astro" {2} --- @@ -46,36 +70,54 @@ export const prerender = true; // ... --- - + ``` -查看更多[配置单个路由](#配置单个路由)的使用示例。 -### 将静态网站转换为混合渲染 +```mdx title="src/pages/mypage.mdx" {5} +--- +layout: '../layouts/markdown.astro' +title: 'My page' +--- +export const prerender = true; -要将现有的静态 Astro 站点转换为允许混合渲染，请将 `output` 更改为 `hybrid` 并添加适配器： +# 这是我的静态的、预渲染的页面 +``` -```js title="astro.config.mjs" ins={2,5-8} -import { defineConfig } from 'astro/config'; -import nodejs from '@astrojs/node'; +```js title="src/pages/myendpoint.js" {1} +export const prerender = true; -export default defineConfig({ - adapter: nodejs({ - mode: 'middleware' // or 'standalone' - }), - output: 'hybrid', -}); +export async function GET() { + return { + body: JSON.stringify({ message: `这是我的静态端点` }), + }; +} +``` + +### 在 `hybrid` 模式中选择退出预渲染 + +对于大部分以 `output: hybrid` 配置的静态网站，添加 `export const prerender = false` 到任何应该按需服务器渲染的文件： + +```js title="src/pages/randomnumber.js" {1} +export const prerender = false; + +export async function GET() { + let number = Math.random(); + return { + body: JSON.stringify({ number, message: `这是一个随机数：${number}` }), + }; +} ``` ### 添加一个适配器 -当需要部署 SSR 项目时，你还需要添加一个适配器。这是因为 SSR 需要一个服务器 _运行时_：运行服务器端代码的环境。每个适配器都允许 Astro 输出在特定运行时运行项目的脚本。 +要在 `server` 或 `hybrid` 模式下部署项目，你还需要添加一个**适配器**。这是因为这两种模式都需要一个服务器 _运行时_：在服务器上运行代码以在请求时生成页面的环境。每个适配器都允许 Astro 输出一个在特定运行时（如 Vercel、Netlify 或 Cloudflare）上运行你的项目的脚本。 -你可以在我们的 [集成目录](https://astro.build/integrations/?search=&categories%5B%5D=adapters) 中找到官方和社区 SSR 适配器。 +你可以在我们的 [集成目录](https://astro.build/integrations/?search=&categories%5B%5D=adapters) 中找到官方和社区的适配器。然后选择与你的 [部署环境](/zh-cn/guides/deploy/) 相对应的适配器。 #### 使用 `astro add` 安装 -你可以使用以下 `astro add` 命令添加任何 [官方 Astro 适配器集成](/zh-cn/guides/integrations-guide/)。这将安装一步适配器并对你的 `astro.config.mjs` 文件进行适当的更改。例如，要安装 Vercel 适配器，请运行： +你可以使用以下 `astro add` 命令添加任何 [由 Astro 维护的官方适配器](/zh-cn/guides/integrations-guide/)。这将安装一步适配器并对你的 `astro.config.mjs` 文件进行适当的更改。例如，要安装 Vercel 适配器，请运行： @@ -97,137 +139,59 @@ export default defineConfig({ #### 手动安装 -你还可以通过自己手动安装软件包和更新 `astro.config.mjs` 来手动添加一个适配器。（请参阅上面的链接以获取特定于适配器的说明，以完成以下两个步骤以启用 SSR。）使用 `my-adapter` 作为示例占位符，说明将类似于： +你也可以通过手动安装包并更新 `astro.config.mjs` 自己添加适配器。例如，要手动安装 Vercel 适配器： 1. 使用你首选的包管理器将适配器安装到你的项目依赖项： ```shell - npm install @astrojs/my-adapter + npm install @astrojs/vercel ``` ```shell - pnpm install @astrojs/my-adapter + pnpm install @astrojs/vercel ``` ```shell - yarn add @astrojs/my-adapter + yarn add @astrojs/vercel ``` -2. [添加一个适配器](/zh-cn/reference/configuration-reference/#adapter)到你的 `astro.config.mjs` 文件的导入和默认导出： +2. [添加一个适配器](/zh-cn/reference/configuration-reference/#adapter)到你的 `astro.config.mjs` 文件的导入和默认导出，以及你想要的 `output` 模式： - ```js ins={3,6-7} + ```js ins={3,7} {6} // astro.config.mjs import { defineConfig } from 'astro/config'; - import myAdapter from '@astrojs/my-adapter'; + import vercel from '@astrojs/vercel'; export default defineConfig({ output: 'server', - adapter: myAdapter(), + adapter: vercel(), }); ``` + 注意，不同的适配器可能也有不同的配置设置。请阅读每个适配器的文档，并将任何必要的配置选项应用到 `astro.config.mjs` 中你选择的适配器。 -## 特性 - -Astro 在默认情况下仍是静态网站生成器。但是一旦你启用了服务器端渲染适配器，**你的页面目录中的每条路由都会成为服务器渲染的路由**，一些新的功能就可以为你所用。 +## 按需渲染功能特性 -### 配置单个路由 +### HTML 流式处理 -`server` 和 `hybrid` 模式都允许服务器渲染的页面和端点，并将根据其默认行为渲染。但是，这两种模式都允许你将单个页面标记为 opt-out 此默认行为。 +在 HTML 流式传输中，一个文档会被分割成多个块，然后按顺序通过网络发送，并按该顺序在页面上渲染。在 `server` 或 `hybrid` 模式下，Astro 使用 HTML 流式传输将每个组件在渲染时发送到浏览器。尽管网络条件可能导致大文档下载缓慢，等待数据获取可能会阻塞页面渲染，但这确保用户能尽快地看到你的 HTML。 -### 选择退出服务端渲染 - -对于配置为 `output: server` 的服务器渲染的应用，请将 `export const prerender = true` 添加到任何页面或路由以预渲染静态页面或端点： - -```astro title="src/pages/mypage.astro" {2} ---- -export const prerender = true; -// ... ---- - - - -``` - -```mdx title="src/pages/mypage.mdx" {5} ---- -layout: '../layouts/markdown.astro' -title: 'My page' ---- -export const prerender = true; - -# 这是我的静态预渲染页面 -``` - -对于端点： - -```js title="src/pages/myendpoint.js" {1} -export const prerender = true; - -export async function GET() { - return { - body: JSON.stringify({ message: `这是我的静态端点` }), - }; -} -``` - -### 选择退出预渲染 - -对于配置为 `output: hybrid` 的静态站点，将 `export const prerender = false` 添加到应由服务器渲染的任何文件中： - -```js title="src/pages/randomnumber.js" {1} -export const prerender = false; - -export async function GET() { - let number = Math.random(); - return { - body: JSON.stringify({ number, message: `这是一个随机数： ${number}` }), - }; -} -``` - -### `Astro.request.headers` - -请求的标头可在 `Astro.request.headers` 上找到。这就像浏览器的 [`Request.headers`](https://developer.mozilla.org/zh-CN/docs/Web/API/Request/headers)。它是一个 [Headers](https://developer.mozilla.org/zh-CN/docs/Web/API/Headers) 对象，一个类似 Map 的对象，你可以在其中检索标头，例如 cookie。 - -```astro title="src/pages/index.astro" {2} ---- -const cookie = Astro.request.headers.get('cookie'); -// ... ---- - - - -``` - -### `Astro.request.method` - -The HTTP method used in the request is available as `Astro.request.method`. This works like the browser's [`Request.method`](https://developer.mozilla.org/en-US/docs/Web/API/Request/method). It returns the string representation of the HTTP method used in the request. -请求中使用的 HTTP 方法可用作 `Astro.request.method`。这就像浏览器的 [`Request.method`](https://developer.mozilla.org/zh-CN/docs/Web/API/Request/method) 一样。它返回请求中使用的 HTTP 方法的字符串表示形式。 - -```astro title="src/pages/index.astro" ---- -console.log(Astro.request.method) // GET (在浏览器中导航到时) ---- -``` + :::caution -以下功能仅在页面级别可用。（不能在组件（包括布局组件）中使用它们。 +修改 [响应头](https://developer.mozilla.org/zh-CN/docs/Glossary/Response_header) 的功能只在**页面级别**可用。（你不能在组件内部使用它们，包括布局组件。）当 Astro 运行你的组件代码时，它已经发送了响应头，无法进行修改。 -这是因为这些功能会修改 [响应标头](https://developer.mozilla.org/zh-CN/docs/Glossary/Response_header)，这些功能在发送到浏览器后无法修改。在 SSR 模式下，Astro 使用 HTML 流将每个组件发送到浏览器，因为它渲染它们。这确保了用户尽可能快地看到你的 HTML，但这也意味着当 Astro 运行你的组件代码时，它已经发送了响应标头。 ::: -### `Astro.cookies` +### Cookies 这是一个用于读取和修改单个 cookie 的工具方法。它允许你检查、设置、获取和删除 cookie。 -在 API 参考中查看有关 [`Astro.cookies` 和 `AstroCookie` 类型](/zh-cn/reference/api-reference/#astrocookies)的更多详细信息。 - 下面的示例更新了页面显示的计数器的 cookie 值。 ```astro title="src/pages/index.astro" {4,5,9} @@ -246,9 +210,13 @@ Astro.cookies.set("counter",counter) ``` +在 API 参考中查看有关 [`Astro.cookies` 和 `AstroCookie` 类型](/zh-cn/reference/api-reference/#astrocookies) 的更多详细信息。 + ### `Response` -任何页面都可以返回 [Response](https://developer.mozilla.org/zh-CN/docs/Web/API/Response)。可以在数据库中查找 ID 后，再动态返回 404 页面。 +你也可以从使用按需渲染的任何页面返回一个 [响应](https://developer.mozilla.org/zh-CN/docs/Web/API/Response)。 + +下面的例子在数据库中查找 id 后在动态页面上返回 404： ```astro title="src/pages/[id].astro" {8-11} --- @@ -269,106 +237,44 @@ if(!product) { ``` -### 服务器端点 - -服务器端点，也称为 **API 路由**，是从 `src/pages/` 文件夹中的 `.js`或 `.ts` 文件导出的特殊函数。 -该函数接收一个[端点上下文对象](/zh-cn/reference/api-reference/#端点上下文)并返回一个 [Response](https://developer.mozilla.org/zh-CN/docs/Web/API/Response)。这是 SSR 的一个强大功能，API 路由能够在服务器上安全地执行代码。要了解更多信息，请参阅我们的[端点指南](/zh-cn/core-concepts/endpoints/#服务器端点api-路由)。 +### `Request` -### 流式处理 +`Astro.request` 是一个标准的 [请求](https://developer.mozilla.org/zh-CN/docs/Web/API/Request) 对象。它可以用来获取请求的 `url`、`headers`、`method`，甚至是请求的主体。 -浏览器本身支持 HTTP 流，其中文档被分解为块，按顺序通过网络发送，并按该顺序呈现在页面上。 +在 `server` 和 `hybrid` 模式下，对于非静态生成的页面，你可以从这个对象中获取更多信息。 -在此过程中，浏览器以增量方式使用 HTML：解析、呈现到 DOM 中和绘制。无论你是否有意流式传输 HTML，都会发生这种情况。网络状况可能会导致大型文档下载缓慢，等待数据获取可能会阻止页面呈现。 -### 使用流式处理提高页面性能 +### `Astro.request.headers` -下面 `await` 其 frontmatter 中的一些数据。Astro 将等待所有 `fetch` 调用解析，然后再将任何 HTML 发送到浏览器。 +请求的标头可在 `Astro.request.headers` 上找到。这就像浏览器的 [`Request.headers`](https://developer.mozilla.org/zh-CN/docs/Web/API/Request/headers)。它是一个 [标头](https://developer.mozilla.org/zh-CN/docs/Web/API/Headers) 对象，你可以在其中检索标头，例如 cookie。 -```astro title="src/pages/index.astro" +```astro title="src/pages/index.astro" {2} --- -const personResponse = await fetch('https://randomuser.me/api/'); -const personData = await personResponse.json(); -const randomPerson = personData.results[0]; -const factResponse = await fetch('https://catfact.ninja/fact'); -const factData = await factResponse.json(); +const cookie = Astro.request.headers.get('cookie'); +// ... --- - - 一个名字和一个事实 - - -

一个名字

-

{randomPerson.name.first}

-

一个事实

-

{factData.fact}

- + ``` -将 `await` 调用移动到较小的组件中，你可以利用 Astro 的流式传输。使用以下组件执行数据获取，Astro 可以先渲染一些 HTML，例如标题，然后在数据准备就绪时呈现段落。 +### `Astro.request.method` -```astro title="src/components/RandomName.astro" ---- -const personResponse = await fetch('https://randomuser.me/api/'); -const personData = await personResponse.json(); -const randomPerson = personData.results[0]; ---- -

{randomPerson.name.first}

-``` +请求中使用的 HTTP 方法可用作 `Astro.request.method`。这就像浏览器的 [`Request.method`](https://developer.mozilla.org/zh-CN/docs/Web/API/Request/method) 一样。它返回请求中使用的 HTTP 方法的字符串表示形式。 -```astro title="src/components/RandomFact.astro" +```astro title="src/pages/index.astro" --- -const factResponse = await fetch('https://catfact.ninja/fact'); -const factData = await factResponse.json(); +console.log(Astro.request.method) // GET (在浏览器中导航到时) --- -

{factData.fact}

``` -下面使用这些组件的 Astro 页面可以更快地呈现页面的某些部分。数据提取不再阻止 ``、`` 和 `

` 标记。然后，服务器将并行获取 `RandomName` 和 `RandomFact` 的数据，并将生成的 HTML 流式传输到浏览器。 +在 API 参考中查看有关 [`Astro.request`](/zh-cn/reference/api-reference/#astrorequest) 的更多详细信息。 -```astro title="src/pages/index.astro" ---- -import RandomName from '../components/RandomName.astro' -import RandomFact from '../components/RandomFact.astro' ---- - - - 一个名字和一个事实 - - -

一个名字

- -

一个事实

- - - -``` +### 服务器端点 -#### 直接包括 Promises +服务器端点，也称为 **API 路由**，是从 `src/pages/` 文件夹中的 `.js`或 `.ts` 文件导出的特殊函数。按需服务器端渲染的一个强大特性是，API 路由能够在服务器上安全地执行代码。 -你还可以直接在模板中包含 promises。它不会阻止整个组件，而是并行解析 promise，并且只阻止它后面的标记。 -```astro title="src/pages/index.astro" ---- -const personPromise = fetch('https://randomuser.me/api/') - .then(response => response.json()) - .then(arr => arr[0].name.first); -const factPromise = fetch('https://catfact.ninja/fact') - .then(response => response.json()) - .then(factData => factData.fact); ---- - - - 一个名字和一个事实 - - -

一个名字

-

{personPromise}

-

一个事实

-

{factPromise}

- - -``` +该函数接收一个[端点上下文对象](/zh-cn/reference/api-reference/#端点上下文)并返回一个 [Response](https://developer.mozilla.org/zh-CN/docs/Web/API/Response)。 -在此示例中，`一个名称`将在加载 `personPromise` 和 `factPromise` 时渲染。 -一旦 `personPromise` 解决，`一个事实`就会出现，`factpromise` 将在加载完成后呈现。 +要了解更多信息，请参阅我们的[端点指南](/zh-cn/core-concepts/endpoints/#服务器端点api-路由)。 diff --git a/src/content/docs/zh-cn/guides/view-transitions.mdx b/src/content/docs/zh-cn/guides/view-transitions.mdx index 6072d0f0c0ba4..8d043ecd25f72 100644 --- a/src/content/docs/zh-cn/guides/view-transitions.mdx +++ b/src/content/docs/zh-cn/guides/view-transitions.mdx @@ -250,7 +250,7 @@ const myFade = { 只有关联的两个页面都使用了 `` 路由器才能通过客户端路由进行导航，防止重新加载全页面。你可能也不希望在每次导航更改时都使用客户端路由，而是更希望在特定路由上进行传统的页面导航。 -你可以通过将 `data-astro-reload` 属性添加到任何 `` 标签中，为单个链接选择不使用客户端路由器。此属性将覆盖任何现有的 `` 组件，而是在导航期间触发浏览器刷新。 +你可以通过将 `data-astro-reload` 属性添加到任何 `` 或 `
` 标签中，为单个链接选择不使用客户端路由器。此属性将覆盖任何现有的 `` 组件，而是在导航期间触发浏览器刷新。 以下示例显示了仅从主页导航到文章时如何阻止客户端路由器。这样，当从文章列表页面导航到同一页面时，仍然可以对共享元素（例如主视觉图）进行动画处理： @@ -340,6 +340,7 @@ import { ViewTransitions } from "astro:transitions"; - `'push'`: 路由器将使用 `history.pushState` 在浏览器历史中创建一个新条目。 - `'replace'`: 路由器将使用 `history.replaceState` 更新 URL，而不向导航添加新条目。 - `'auto'`（默认）: 路由器将尝试使用 `history.pushState`，但如果无法转换到指定的 URL，则当前 URL 将保持不变，浏览器历史不会发生变化。 + - `formData`: 一个 `POST` 请求的 FormData 对象。 要想通过浏览器的历史记录进行后退和前进导航，你可以将 `navigate()` 与浏览器内置的 `history.back()`、`history.forward()` 和 `history.go()` 等函数结合使用。如果 `navigate()` 在服务器渲染时被调用，它不会有任何效果。 @@ -364,6 +365,34 @@ import { ViewTransitions } from "astro:transitions"; 这样做的效果是，如果你从 `/main` 页面返回，则浏览器不会显示 `/confirmation` 页面，而是显示该页面之前的页面。 +### 表单的视图过渡动画 + + + +默认情况下，`` 路由器只在由 `` 点击触发的导航上进行视图过渡。你也可以通过在路由器上添加 `handleForms` 选项来允许表单提交时的视图过渡。 + +```astro title="src/pages/index.astro" +--- +import { ViewTransitions } from "astro:transitions"; +--- + + + + + + + + +``` + +有了这个选项，路由器将从 `` 元素触发页面内的转换，支持 `GET` 和 `POST` 请求。你可以使用 `data-astro-reload` 属性在任何单独的表单上选择退出路由器视图过渡动画： + +```astro title="src/components/Form.astro" + + + +``` + ## 回退控制 `` 路由器在支持视图过渡动画的浏览器（如 Chromium 浏览器）中表现最佳，但也包含了对其他浏览器的默认回退支持。即当浏览器不支持视图过渡动画 API 时，Astro 仍将提供基于浏览器的导航，使用其中一种回退选项来实现类似的效果。 diff --git a/src/content/docs/zh-cn/recipes/streaming-improve-page-performance.mdx b/src/content/docs/zh-cn/recipes/streaming-improve-page-performance.mdx new file mode 100644 index 0000000000000..4b62bd4ac2bae --- /dev/null +++ b/src/content/docs/zh-cn/recipes/streaming-improve-page-performance.mdx @@ -0,0 +1,100 @@ +--- +title: "使用流式处理来提升页面性能" +description: "了解如何使用流式处理来提升页面性能" +type: recipe +i18nReady: true +--- + +Astro 的 SSR 使用 HTML 流式处理来在组件可用时将其发送到浏览器，以便更快地加载页面。为了进一步提升你的页面性能，你可以策略性地构建你的组件，即通过避免阻塞的数据获取来优化它们的加载速度。 + +如下的重构示例演示了如何通过将获取调用移动到其他组件，并将它们从阻塞页面渲染的组件中迁移出来，以提高页面性能。 + +以下页面在 frontmatter 中会 `await` 一些数据。而 Astro 会等待所有的 fetch 调用解决后，再将 HTML 发送到浏览器。 + +```astro title="src/pages/index.astro" +--- +const personResponse = await fetch('https://randomuser.me/api/'); +const personData = await personResponse.json(); +const randomPerson = personData.results[0]; +const factResponse = await fetch('https://catfact.ninja/fact'); +const factData = await factResponse.json(); +--- + + + A name and a fact + + +

A name

+

{randomPerson.name.first}

+

A fact

+

{factData.fact}

+ + +``` + +现在可将 `await` 调用移入粒度较小的组件可以让你充分利用 Astro 的流式处理。使用以下组件来执行数据获取，Astro 可以先渲染一些 HTML，例如标题，然后在数据准备好时渲染段落。 + +```astro title="src/components/RandomName.astro" +--- +const personResponse = await fetch('https://randomuser.me/api/'); +const personData = await personResponse.json(); +const randomPerson = personData.results[0]; +--- +

{randomPerson.name.first}

+``` + +```astro title="src/components/RandomFact.astro" +--- +const factResponse = await fetch('https://catfact.ninja/fact'); +const factData = await factResponse.json(); +--- +

{factData.fact}

+``` + +下面的 Astro 页面使用这些组件可以更早地渲染页面的部分内容。``、`` 和 `

` 标签则不再被数据获取所阻塞。接着，服务器将并行获取 `RandomName` 和 `RandomFact` 的数据，并将生成的 HTML 流式传输到浏览器上。 + +```astro title="src/pages/index.astro" +--- +import RandomName from '../components/RandomName.astro' +import RandomFact from '../components/RandomFact.astro' +--- + + + A name and a fact + + +

A name

+ +

A fact

+ + + +``` + +#### 直接包含 Promises + +你也可以直接在模板中包含 promises。它不会阻塞整个组件，而是会并行地解决 promise，并只阻塞其后的标记。 + +```astro title="src/pages/index.astro" +--- +const personPromise = fetch('https://randomuser.me/api/') + .then(response => response.json()) + .then(arr => arr[0].name.first); +const factPromise = fetch('https://catfact.ninja/fact') + .then(response => response.json()) + .then(factData => factData.fact); +--- + + + A name and a fact + + +

A name

+

{personPromise}

+

A fact

+

{factPromise}

+ + +``` + +在这个例子中，`A name` 会在 `personPromise` 和 `factPromise` 加载时渲染。一旦 `personPromise` 解决了，`A fact` 就会出现，`factPromise` 也将在完成加载时渲染。 \ No newline at end of file diff --git a/src/content/docs/zh-cn/reference/cli-reference.mdx b/src/content/docs/zh-cn/reference/cli-reference.mdx index 1de6cc49853e6..816e22f6291cb 100644 --- a/src/content/docs/zh-cn/reference/cli-reference.mdx +++ b/src/content/docs/zh-cn/reference/cli-reference.mdx @@ -188,13 +188,9 @@ Global Flags #### `--watch` -该命令将监听 `.astro` 文件的任何更改，并报告任何错误。 +该命令将监听你项目中的任何更改，并报告任何错误。 -:::note -该命令只检测 `.astro` 文件中的类型。 -::: - -📚 阅读更多关于 [Astro 的 TypeScript 支持](/zh-cn/guides/typescript/)的信息。 +📚 阅读更多关于 [在 Astro 中类型检查](/zh-cn/guides/typescript/) 的信息。 ## `astro sync` diff --git a/src/content/docs/zh-cn/reference/configuration-reference.mdx b/src/content/docs/zh-cn/reference/configuration-reference.mdx index 646075cf38c36..0d5242e09ab22 100644 --- a/src/content/docs/zh-cn/reference/configuration-reference.mdx +++ b/src/content/docs/zh-cn/reference/configuration-reference.mdx @@ -562,6 +562,65 @@ export default defineConfig({ 请查看你的 [SSR 适配器文档](/zh-cn/guides/integrations-guide/#官方集成) 以了解如何使用 `functionPerRoute` 来定义你的 SSR 代码如何打包。 +### prefetch + +

+ +**类型：** `boolean | object` +

+ +在你的网站上为链接启用预获取，以提供更快的页面视图过渡效果。（在使用 `` 路由器的页面上默认启用。设置 `prefetch: false` 可以选择退出此行为。） + +此配置自动将预获取脚本添加到项目中的每个页面上，让你可以访问 `data-astro-prefetch` 属性。将此属性添加到页面上的任何 `
` 链接，以启用该页面的预获取。 + +```html +about +``` + +使用 [`prefetch.defaultStrategy`](#prefetchdefaultstrategy) 和 [`prefetch.prefetchAll`](#prefetchprefetchall) 选项进一步自定义默认的预获取行为。 + +查看 [预获取指南](/zh-cn/guides/prefetch/) 获取更多信息。 + +### prefetch.prefetchAll + +

+ +**类型：** `boolean` +

+ +为所有链接启用预获取，包括那些没有 `data-astro-prefetch` 属性的链接。当使用 `` 路由器时，此值默认为 `true`。否则，默认值为 `false`。 + +```js +prefetch: { + prefetchAll: true +} +``` + +当设置为 `true` 时，你可以通过在任何单独的链接上设置 `data-astro-prefetch="false"` 来单独禁用预获取。 + +```html +About +``` + +### prefetch.defaultStrategy + +

+ +**类型：** `'tap' | 'hover' | 'viewport'`
+**默认值：** `'hover'` +

+ +当链接上设置了 `data-astro-prefetch` 属性但没有值时，使用的默认预获取策略。 + +- `'tap'`：在你点击链接之前进行预获取。 +- `'hover'`：当你悬停或聚焦在链接上时进行预获取。（默认） +- `'viewport'`：当链接进入视口时进行预获取。 + +你可以通过在属性上设置值来覆盖此默认值，并为任何单独的链接选择不同的策略。 + +```html +About +``` ## 服务器选项 @@ -851,7 +910,6 @@ Astro 默认使用 [GitHub-flavored Markdown](https://github.com/remarkjs/remark } ``` - ### markdown.smartypants

@@ -983,3 +1041,107 @@ Astro 提供了实验性标志，以便用户提前使用新功能。这些标 }, } ``` + +### experimental.i18n + +

+ +**类型：** `object`
+ +

+ +配置实验性的 i18n 路由，并允许你指定一些自定义选项。 + +查看我们的指南以获取更多关于 [Astro 的国际化](/zh-cn/guides/internationalization/) 的信息。 + +### experimental.i18n.defaultLocale + +

+ +**类型：** `string`
+ +

+ +你的网站（或应用）的默认语言环境。这是一个必填字段。 + +我们并未强制要求使用特定的语言格式或语法，但为了最大程度的兼容性，我们建议在需要的时候使用小写字母和连字符（例如 "es"、"pt-br"）。 + +### experimental.i18n.locales + +

+ +**类型：** `Array.`
+ +

+ +网站支持的所有语言环境的列表（例如 `['en', 'es', 'pt-br']`）。这个列表也应该包含 `defaultLocale`。这是一个必填字段。 + +没有强制执行特定的语言格式或语法，但你的文件夹结构必须与列表中的语言环境完全匹配。 + +### experimental.i18n.fallback + +

+ +**类型：** `Record.`
+ +

+ +当导航到不存在的页面时（例如，尚未创建翻译页面）的回退策略。 + +使用这个对象为你支持的每种语言声明一个回退的 `locale` 路由。如果没有指定回退，那么无法访问的页面将返回 404。 + +#### 示例 + +以下示例配置你的内容回退策略，将 `/pt-br/` 中无法访问的页面重定向到它们的 `es` 版本，将 `/fr/` 中无法访问的页面重定向到它们的 `en` 版本。无法访问的 `/es/` 页面将返回 404。 + +```js +export defualt defineConfig({ + experimental: { + i18n: { + defaultLocale: "en", + locales: ["en", "fr", "pt-br", "es"], + fallback: { + pt: "es", + fr: "en" + } + } + } +}) +``` + +### experimental.i18n.routingStrategy + +

+ +**类型：** `'prefix-always' | 'prefix-other-locales'`
+**默认值：** 'prefix-other-locales'
+ +

+ +控制路由策略以确定你的网站 URL。请根据你的默认语言的文件夹（或 URL）路径配置来进行设置： + +- `prefix-other-locales`（默认）：只有非默认语言会显示语言前缀。 + `defaultLocale` 不会显示语言前缀，且内容文件不存在于本地化的文件夹中。 + 对于所有非默认语言，URL 的形式将为 `example.com/[lang]/content/`，但对于默认语言环境，URL 的形式将为 `example.com/content/`。 +- `prefix-always`：所有 URL 都会显示语言前缀。 + 对于每个路由，包括默认语言，URL 的形式将为 `example.com/[lang]/content/`。 + 每种语言，包括默认语言，都使用本地化文件夹。 + +### experimental.contentCollectionCache + +

+ +**类型：** `boolean`
+**默认值：** `false`
+ +

+ +在静态模式下构建时，启用内容集合的持久性缓存。 + +```js +{ + experimental: { + contentCollectionCache: true, + }, +} +``` diff --git a/src/content/docs/zh-cn/reference/integrations-reference.mdx b/src/content/docs/zh-cn/reference/integrations-reference.mdx index 61984f2a13b78..4e66e4ff2d2f3 100644 --- a/src/content/docs/zh-cn/reference/integrations-reference.mdx +++ b/src/content/docs/zh-cn/reference/integrations-reference.mdx @@ -30,6 +30,8 @@ interface AstroIntegration { addRenderer: (renderer: AstroRenderer) => void; addWatchFile: (path: URL | string) => void; addClientDirective: (directive: ClientDirectiveConfig) => void; + addMiddleware: (middleware: AstroIntegrationMiddleware) => void; + addDevOverlayPlugin: (pluginEntrypoint: string) => void; injectScript: (stage: InjectedScriptStage, content: string) => void; injectRoute: ({ pattern: string, entryPoint: string }) => void; }) => void; @@ -72,6 +74,9 @@ interface AstroIntegration { isRestart: boolean; updateConfig: (newConfig: Record) => void; addRenderer: (renderer: AstroRenderer) => void; + addClientDirective: (directive: ClientDirectiveConfig) => void; + addMiddleware: (middleware: AstroIntegrationMiddleware) => void; + addDevOverlayPlugin: (pluginEntrypoint: string) => void; addWatchFile: (path: URL | string) => void; injectScript: (stage: InjectedScriptStage, content: string) => void; injectRoute: ({ pattern: string, entryPoint: string }) => void; @@ -211,6 +216,96 @@ declare module 'astro' { } ``` +#### `addDevOverlayPlugin` 选项 + + + +**类型：** `(pluginEntrypoint: string) => void;` + +添加一个[自定义的开发模式浮动面板插件](/zh-cn/reference/dev-overlay-plugin-reference/)。 + +使用示例： + +```js title="astro.config.mjs" +import { defineConfig } from 'astro/config'; +import devOverlayIntegration from './astro-dev-overlay-plugin/integration.js' + +// https://astro.build/config +export default defineConfig({ + integrations: [ + devOverlayIntegration() + ], +}); +``` + +```js title="astro-dev-overlay-plugin/integration.js" +/** + * @type {() => import('astro').AstroIntegration} + */ +export default () => ({ + name: "dev-overlay-plugin", + hooks: { + "astro:config:setup": ({ addDevOverlayPlugin }) => { + addDevOverlayPlugin("./astro-dev-overlay-plugin/plugin.js"); + }, + }, +}); +``` + +```js title="astro-dev-overlay-plugin/plugin.js" + +/** + * @type {import('astro').DevOverlayPlugin} + */ +export default { + id: "my-plugin", + name: "My Plugin", + icon: "...", + init() { + console.log("I'm a dev overlay plugin!") + }, +}; +``` + +#### `addMiddleware` 选项 + + + +**类型：** `(middleware:` [`AstroIntegrationMiddleware`](https://github.com/withastro/astro/blob/852ac0f75dfca1b2602e9cdbfa0447d9998e2449/packages/astro/src/%40types/astro.ts#L2124-L2127) `) => void;` + +添加[中间件](/zh-cn/guides/middleware/)以在每个请求上运行。接受包含中间件的 `entrypoint` 模块，以及一个 `order` 参数来指定它应该在其他中间件之前（`pre`）运行还是之后（`post`）运行。 + +```js title="@my-package/integration.js" +/** + * @type {() => import('astro').AstroIntegration} + */ +export default () => ({ + name: "my-middleware-package", + hooks: { + "astro:config:setup": ({ addMiddleware }) => { + addMiddleware({ + entrypoint: '@my-package/middleware', + order: 'pre' + }); + }, + }, +}); +``` + +中间件在一个包中定义，它有一个对应的 `onRequest` 函数，就像用户定义的中间件一样。 + +```js title="@my-package/middleware.js" +import { defineMiddleware } from 'astro:middleware'; + +export const onRequest = defineMiddleware(async (context, request) => { + if(context.url.pathname === '/some-test-path') { + return Response.json({ + ok: true + }); + } +}); +``` + #### `injectRoute` 选项 **类型**：`({ pattern: string, entryPoint: string }) => void;` @@ -613,3 +708,8 @@ integrations: [ examplePreset() ] ``` + + +## 社区资源 + +[构建你自己的 Astro 集成](https://www.freecodecamp.org/news/how-to-use-the-astro-ui-framework/#chapter-8-build-your-own-astro-integrations-1) - 由 FreeCodeCamp 的 Emmanuel Ohans 撰写 diff --git a/src/i18n/fr/nav.ts b/src/i18n/fr/nav.ts index a7744640f52b9..59ae390b35a5e 100644 --- a/src/i18n/fr/nav.ts +++ b/src/i18n/fr/nav.ts @@ -20,7 +20,17 @@ export default [ { text: 'Tutoriels', header: true, type: 'learn', key: 'tutorials' }, { text: 'Construire un Blog', slug: 'tutorial/0-introduction', key: 'blog-tutorial' }, - // { text: 'Thinking with Islands', slug: 'tutorial/0-introduction', key: 'island-tutorial' }, + { + text: 'Extension avec les collections de contenu', + slug: 'tutorials/add-content-collections', + key: 'add-collections-tutorial', + }, + { + text: 'Extension avec les transitions de vue', + slug: 'tutorials/add-view-transitions', + key: 'add-transitions-tutorial', + }, + // { text: 'Penser avec les îles', slug: 'tutorial/0-introduction', key: 'island-tutorial' }, { text: 'Les Bases', header: true, type: 'learn', key: 'basics' }, @@ -36,33 +46,57 @@ export default [ }, { text: 'Pages', slug: 'core-concepts/astro-pages', key: 'core-concepts/astro-pages' }, { text: 'Layouts', slug: 'core-concepts/layouts', key: 'core-concepts/layouts' }, - - { text: 'Méthodes', header: true, type: 'learn', key: 'examples' }, - { text: 'Migrer vers Astro', slug: 'guides/migrate-to-astro', key: 'guides/migrate-to-astro' }, - { text: 'Connecter un CMS', slug: 'guides/cms', key: 'guides/cms' }, - { text: 'Ajouter des services Backend', slug: 'guides/backend', key: 'guides/backend' }, - { text: 'Intégrations', slug: 'guides/integrations-guide', key: 'guides/integrations-guide' }, - { text: 'Déployez votre site', slug: 'guides/deploy', key: 'guides/deploy' }, - { text: 'Plus de méthodes', slug: 'recipes', key: 'guides/recipes' }, - - { text: 'Guides', header: true, type: 'learn', key: 'features' }, { text: 'Syntaxe de Template Astro', slug: 'core-concepts/astro-syntax', key: 'core-concepts/astro-syntax', }, { - text: "Framework d'interface", - slug: 'core-concepts/framework-components', - key: 'core-concepts/framework-components', + text: 'Les modes de rendu', + slug: 'core-concepts/rendering-modes', + key: 'core-concepts/rendering-modes', }, - { text: 'Routage', slug: 'core-concepts/routing', key: 'core-concepts/routing' }, - { text: 'Markdown & MDX', slug: 'guides/markdown-content', key: 'guides/markdown-content' }, + + { text: 'Éléments encastrés', header: true, type: 'learn', key: 'builtins' }, { text: 'Collections de Contenu', slug: 'guides/content-collections', key: 'guides/content-collections', }, + { + text: 'Voir les Transitions', + slug: 'guides/view-transitions', + key: 'guides/view-transitions', + }, + { + text: 'Prefetch', + slug: 'guides/prefetch', + key: 'guides/prefetch', + }, + + { text: 'Add-ons', header: true, type: 'learn', key: 'addons' }, + { text: 'Intégrations', slug: 'guides/integrations-guide', key: 'guides/integrations-guide' }, + { + text: "Framework d'interface", + slug: 'core-concepts/framework-components', + key: 'core-concepts/framework-components', + }, + { + text: 'Rendu Côté Serveur (SSR)', + slug: 'guides/server-side-rendering', + key: 'guides/server-side-rendering', + }, + + { text: 'Méthodes', header: true, type: 'learn', key: 'examples' }, + { text: 'Migrer vers Astro', slug: 'guides/migrate-to-astro', key: 'guides/migrate-to-astro' }, + { text: 'Connecter un CMS', slug: 'guides/cms', key: 'guides/cms' }, + { text: 'Ajouter des services Backend', slug: 'guides/backend', key: 'guides/backend' }, + { text: 'Déployez votre site', slug: 'guides/deploy', key: 'guides/deploy' }, + { text: 'Plus de méthodes', slug: 'recipes', key: 'guides/recipes' }, + + { text: 'Guides', header: true, type: 'learn', key: 'features' }, + { text: 'Routage', slug: 'core-concepts/routing', key: 'core-concepts/routing' }, + { text: 'Markdown', slug: 'guides/markdown-content', key: 'guides/markdown-content' }, { text: "Scripts & gestion d'évènements", slug: 'guides/client-side-scripts', @@ -72,24 +106,19 @@ export default [ { text: 'Images', slug: 'guides/images', key: 'guides/images' }, { text: "Polices d'écritures", slug: 'guides/fonts', key: 'guides/fonts' }, { text: 'Imports', slug: 'guides/imports', key: 'guides/imports' }, - { - text: 'Rendu Côté Serveur (SSR)', - slug: 'guides/server-side-rendering', - key: 'guides/server-side-rendering', - }, { text: 'Points de terminaison', slug: 'core-concepts/endpoints', key: 'core-concepts/endpoints', }, { text: 'Récupération de Données', slug: 'guides/data-fetching', key: 'guides/data-fetching' }, - { text: 'Middleware', slug: 'guides/middleware', key: 'guides/middleware' }, - { text: 'Test', slug: 'guides/testing', key: 'guides/testing' }, { - text: 'Voir les Transitions', - slug: 'guides/view-transitions', - key: 'guides/view-transitions', + text: 'Internationalisation', + slug: 'guides/internationalization', + key: 'guides/internationalization', }, + { text: 'Middleware', slug: 'guides/middleware', key: 'guides/middleware' }, + { text: 'Test', slug: 'guides/testing', key: 'guides/testing' }, { text: 'Dépannage', slug: 'guides/troubleshooting', key: 'guides/troubleshooting' }, { text: 'Configuration', header: true, type: 'learn', key: 'configuration' }, @@ -128,6 +157,11 @@ export default [ slug: 'reference/image-service-reference', key: 'reference/image-service-reference', }, + { + text: 'API du plugin Overlay Dev', + slug: 'reference/dev-overlay-plugin-reference', + key: 'reference/dev-overlay-plugin-reference', + }, { text: 'Utilisation des Directives', slug: 'reference/directives-reference', diff --git a/src/i18n/hi/nav.ts b/src/i18n/hi/nav.ts index e67af10858739..6e85ff66e097c 100644 --- a/src/i18n/hi/nav.ts +++ b/src/i18n/hi/nav.ts @@ -1,11 +1,77 @@ import { NavDictionary } from '../translation-checkers'; export default NavDictionary({ - // Start Here startHere: 'यहाँ से शुरू करे', 'getting-started': 'पहले कदम', - // Core Concepts - coreConcepts: 'मूल अवधारणाएं', + install: 'स्थापित करें', + 'editor-setup': 'एडिटर सेटअप', + 'guides/upgrade-to/v3': 'v3 में अपग्रेड करें', + + coreConcepts: 'मूल अवधारणाएँ', 'concepts/why-astro': 'क्यों Astro', + 'concepts/islands': 'Astro द्वीप', + + tutorials: 'शिक्षण सत्र', + 'blog-tutorial': 'ब्लॉग बनाएं', + 'add-collections-tutorial': 'सामग्री संग्रह बढ़ाएं', + 'add-transitions-tutorial': 'व्यू-ट्रांज़िशन्स बढ़ाएं', + + basics: 'मौलिक अवधारणाएँ', + 'core-concepts/project-structure': 'परियोजना संरचना', + 'core-concepts/astro-components': 'अवयव', + 'core-concepts/astro-pages': 'पृष्ठ', + 'core-concepts/layouts': 'नक़्शे', + 'core-concepts/astro-syntax': 'Astro की सिंटैक्स', + 'core-concepts/rendering-modes': 'अनुवाद मध्यम', + + builtins: 'बिल्ट-इंस ', + 'guides/content-collections': 'सामग्री संग्रह', + 'guides/view-transitions': 'व्यू-ट्रांज़िशन्स ', + 'guides/prefetch': 'प्रीफ़ेच', + + addons: 'एड-ऑन्स', + 'guides/integrations-guide': 'एकीकरण जानकारी', + 'core-concepts/framework-components': 'UI फ़्रेमवर्क्स', + 'guides/server-side-rendering': 'सर्वर-साइड रेंडरिंग (SSR)', + + examples: 'उदाहरण', + 'guides/migrate-to-astro': 'Astro में माइग्रेट करें', + 'guides/cms': 'एक CMS से जुड़े', + 'guides/backend': 'बैकएंड सेवाओं को जोड़ें', + 'guides/deploy': 'अपनी साइट को डिप्लॉय करें', + 'guides/recipes': 'अधिक रेसिपी', + + features: 'गाइड्स', + 'core-concepts/routing': 'रूटिंग', + 'guides/markdown-content': 'Markdown और MDX', + 'guides/client-side-scripts': 'स्क्रिप्ट और घटना संचालन', + 'guides/styling': 'स्टाइल और CSS', + 'guides/images': 'छवियाँ', + 'guides/fonts': 'फ़ॉन्ट्स', + 'guides/imports': 'आयात', + 'core-concepts/endpoints': 'एंडपॉइंट्स', + 'guides/data-fetching': 'डेटा फ़ेचिंग', + 'guides/internationalization': 'अंतर्राष्ट्रीयकरण', + 'guides/middleware': 'मिडलवेयर', + 'guides/testing': 'परिक्षण', + 'guides/troubleshooting': 'समस्या समाधान', + + configuration: 'कॉन्फ़िगरेशन', + 'guides/configuring-astro': 'Astro कॉन्फ़िग फ़ाइल', + 'guides/typescript': 'Typescript', + 'guides/aliases': 'आयात उपनाम', + 'guides/environment-variables': 'पर्यावरण चर', + + reference: 'संदर्भ', + 'reference/configuration-reference': 'कॉन्फ़िगरेशन', + 'reference/api-reference': 'रनटाइम API', + 'reference/integrations-reference': 'एकीकरण API', + 'reference/adapter-reference': 'एडाप्टर API', + 'reference/image-service-reference': 'छवि सेवा API', + 'reference/dev-overlay-plugin-reference': 'डेवलपर ओवरले प्लगइन API', + 'reference/directives-reference': 'टेम्पलेट निर्देशिकाएँ', + 'reference/cli-reference': 'Astro CLI', + 'reference/error-reference': 'त्रुटि संदर्भ', + 'guides/publish-to-npm': 'NPM पैकेज प्रारूप', }); diff --git a/src/i18n/zh-cn/nav.ts b/src/i18n/zh-cn/nav.ts index 9b85fe06f67ac..ff1e2e6c7835d 100644 --- a/src/i18n/zh-cn/nav.ts +++ b/src/i18n/zh-cn/nav.ts @@ -21,6 +21,7 @@ export default NavDictionary({ 'core-concepts/astro-components': '组件', 'core-concepts/astro-pages': '页面', 'core-concepts/layouts': '布局', + 'core-concepts/rendering-modes': '渲染模式', examples: '操作指南', 'guides/migrate-to-astro': '迁移到 Astro', @@ -48,6 +49,8 @@ export default NavDictionary({ 'guides/testing': '测试', 'guides/view-transitions': '视图过渡动画', 'guides/troubleshooting': '故障排除', + 'guides/prefetch': '预获取', + 'guides/internationalization': '国际化', configuration: '配置', 'guides/configuring-astro': 'Astro 配置文件',