[ci] yarn format
This commit is contained in:
matthewp
GitHub Actions
parent
6813106a5d
commit
d59b657395
6 changed files with 28 additions and 15 deletions
|
|
@ -59,12 +59,21 @@ export const SIDEBAR = {
|
|||
{ text: 'Astro vs. X', link: 'es/comparing-astro-vs-other-tools' },
|
||||
|
||||
{ text: 'Fundamentos', header: true },
|
||||
{ text: 'Estructura del Proyecto', link: 'es/core-concepts/project-structure' },
|
||||
{ text: 'Sintaxis del Componente', link: 'es/core-concepts/astro-components' },
|
||||
{
|
||||
text: 'Estructura del Proyecto',
|
||||
link: 'es/core-concepts/project-structure',
|
||||
},
|
||||
{
|
||||
text: 'Sintaxis del Componente',
|
||||
link: 'es/core-concepts/astro-components',
|
||||
},
|
||||
{ text: 'Páginas', link: 'es/core-concepts/astro-pages' },
|
||||
{ text: 'Maquetas', link: 'es/core-concepts/layouts' },
|
||||
{ text: 'Enrutamiento', link: 'es/core-concepts/routing' },
|
||||
{ text: 'Hidratación parcial', link: 'es/core-concepts/component-hydration' },
|
||||
{
|
||||
text: 'Hidratación parcial',
|
||||
link: 'es/core-concepts/component-hydration',
|
||||
},
|
||||
|
||||
{ text: 'Guías', header: true },
|
||||
{ text: 'Estilo y CSS', link: 'es/guides/styling' },
|
||||
|
|
@ -79,14 +88,20 @@ export const SIDEBAR = {
|
|||
{ text: 'Publicar en npm', link: 'es/guides/publish-to-npm' },
|
||||
|
||||
{ text: 'Referencia', header: true },
|
||||
{ text: 'Componentes incorporados', link: 'es/reference/builtin-components' },
|
||||
{
|
||||
text: 'Componentes incorporados',
|
||||
link: 'es/reference/builtin-components',
|
||||
},
|
||||
{ text: 'Referencia de API', link: 'es/reference/api-reference' },
|
||||
{ text: 'Referencia de CLI', link: 'es/reference/cli-reference' },
|
||||
{
|
||||
text: 'Referencia de configuración',
|
||||
link: 'es/reference/configuration-reference',
|
||||
},
|
||||
{ text: 'Referencia de renderizador', link: 'es/reference/renderer-reference' },
|
||||
{
|
||||
text: 'Referencia de renderizador',
|
||||
link: 'es/reference/renderer-reference',
|
||||
},
|
||||
],
|
||||
'zh-CN': [
|
||||
{ text: '起步', header: true },
|
||||
|
|
|
|||
|
|
@ -37,7 +37,6 @@ Las reglas CSS dentro de una etiqueta `<style>` se ajustan automáticamente a es
|
|||
|
||||
Para obtener los mejores resultados, solo debes tener una etiqueta `<style>` por componente Astro. Esto no es necesariamente una limitación, pero a menudo dará como resultado un CSS mejor optimizado en su compilación final. Cuando trabajas con páginas, la etiqueta `<style>` puede ir anidada dentro de tu página `<head>`. Para los componentes independientes, la etiqueta `<style>` puede ir al nivel superior de su plantilla.
|
||||
|
||||
|
||||
```html
|
||||
<!-- Ejemplo de CSS del componente Astro -->
|
||||
<style>
|
||||
|
|
@ -75,7 +74,7 @@ Sass (una alternativa a CSS) está también disponible mediante `<style lang="sc
|
|||
|
||||
Para construir componentes dinámicos, presentamos la idea de un script preliminar del componente. [Frontmatter](https://jekyllrb.com/docs/front-matter/) es un patrón común en Markdown, donde algunos config/metadata están contenidos dentro de una valla de código (`---`) en la parte superior del archivo . Astro hace algo similar, pero con soporte completo para JavaScript y TypeScript en sus componentes.
|
||||
|
||||
Recuerda que Astro es un lenguaje de plantillas del lado del servidor, por lo que el script de su componente se ejecutará durante la compilación, pero solo el HTML se representará en el navegador. Para enviar JavaScript al navegador, puedes usar una etiqueta `<script>` en su plantilla HTML o [convertir tu componente para usar un framework de frontend](/es/core-concept/component-hydration) como React, Svelte, Vue, etc.
|
||||
Recuerda que Astro es un lenguaje de plantillas del lado del servidor, por lo que el script de su componente se ejecutará durante la compilación, pero solo el HTML se representará en el navegador. Para enviar JavaScript al navegador, puedes usar una etiqueta `<script>` en su plantilla HTML o [convertir tu componente para usar un framework de frontend](/es/core-concept/component-hydration) como React, Svelte, Vue, etc.
|
||||
|
||||
```astro
|
||||
---
|
||||
|
|
|
|||
|
|
@ -26,7 +26,6 @@ src/pages/posts/1.md -> mysite.com/posts/1
|
|||
|
||||
Todos los componentes de Astro son responsables de devolver HTML. Las páginas de Astro también devuelven HTML, pero tienen la responsabilidad única de devolver una respuesta de página completa `<html> ... </html>`, incluyendo `<head>` ([MDN <span class = "sr-only">- head</span>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head)) y `<body>` ([MDN <span class = "sr-only ">- body</span>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body)).
|
||||
|
||||
|
||||
`<! doctype html>` es opcional y se agregará automáticamente.
|
||||
|
||||
```astro
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ En Astro, depende de ti, como desarrollador, "habilitar" explícitamente cualqui
|
|||
|
||||
**Hidratación parcial**, el acto de solo hidratar los componentes individuales que requieren JavaScript y dejar el resto de su sitio como HTML estático, puede parecer relativamente sencillo. ¡Debería! Los sitios web se han construido de esta manera durante décadas. Recientemente, las aplicaciones de una sola página (SPA) introdujeron la idea de que todo su sitio web está escrito en JavaScript y compilado/renderizado por cada usuario en el navegador.
|
||||
|
||||
_Nota: La hidratación parcial a veces se denomina "mejora progresiva" o "hidratación progresiva". Si bien hay ligeros matices entre los términos, para nuestros propósitos, puede pensar en todos ellos como sinónimos del mismo concepto.
|
||||
\_Nota: La hidratación parcial a veces se denomina "mejora progresiva" o "hidratación progresiva". Si bien hay ligeros matices entre los términos, para nuestros propósitos, puede pensar en todos ellos como sinónimos del mismo concepto.
|
||||
|
||||
**La hidratación parcial es el secreto de la historia de rendimiento rápido por defecto de Astro.** Next.js, Gatsby y otros marcos de JavaScript no pueden admitir la hidratación parcial porque imaginan todo su sitio web/página como una sola aplicación de JavaScript.
|
||||
|
||||
|
|
@ -61,7 +61,7 @@ Astro procesa todos los componentes en el servidor **en el momento de la compila
|
|||
// Ejemplo: hidratación de un componente React en el navegador.
|
||||
import MyReactComponent from '../components/MyReactComponent.jsx';
|
||||
---
|
||||
<!-- "client:visible" significa que el componente no cargará ningún Javascript
|
||||
<!-- "client:visible" significa que el componente no cargará ningún Javascript
|
||||
del lado del cliente hasta que sea visible en el navegador del usuario. -->
|
||||
<MyReactComponent client:visible />
|
||||
```
|
||||
|
|
@ -86,7 +86,7 @@ Hidrata el componente tan pronto como el navegador coincida con la consulta de m
|
|||
|
||||
Hidrata el componente en la carga de la página, similar a `client:load`. El componente se **omitirá** en el momento de la compilación, lo que resulta útil para los componentes que dependen por completo de las API del lado del cliente. Es mejor evitar esto a menos que sea absolutamente necesario; en la mayoría de los casos, es mejor representar el contenido del marcador de posición en el servidor y retrasar las llamadas a la API del navegador hasta que el componente se hidrate en el navegador.
|
||||
|
||||
Si se incluye más de un renderizador en Astro [config](/es/reference/configuration-reference), `client:only` necesita una pista para saber qué renderizador usar para el componente. Por ejemplo, `client:only="react"` aseguraría que el componente esté hidratado en el navegador con el renderizador React. Para los renderizadores personalizados no proporcionados por `@astrojs`, use el nombre completo del renderizador proporcionado en su configuración de Astro, es decir,` <client: only="my-custom-renderer" /> `.
|
||||
Si se incluye más de un renderizador en Astro [config](/es/reference/configuration-reference), `client:only` necesita una pista para saber qué renderizador usar para el componente. Por ejemplo, `client:only="react"` aseguraría que el componente esté hidratado en el navegador con el renderizador React. Para los renderizadores personalizados no proporcionados por `@astrojs`, use el nombre completo del renderizador proporcionado en su configuración de Astro, es decir,`<client: only="my-custom-renderer" />`.
|
||||
|
||||
## ¿Puedo hidratar los componentes de Astro?
|
||||
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ Tus componentes de UI que no son de Astro (React, Preact, Svelte, Vue, etc.) tam
|
|||
|
||||
### `src/layouts`
|
||||
|
||||
Las [maquetas](/es/core-concepts/layouts) son componentes reutilizables para diseños de páginas HTML. Se recomienda (pero no es obligatorio) que coloques tus componentes de maqueta en este directorio. La forma en que los organices dentro de este directorio depende de ti.
|
||||
Las [maquetas](/es/core-concepts/layouts) son componentes reutilizables para diseños de páginas HTML. Se recomienda (pero no es obligatorio) que coloques tus componentes de maqueta en este directorio. La forma en que los organices dentro de este directorio depende de ti.
|
||||
|
||||
### `src/pages`
|
||||
|
||||
|
|
|
|||
|
|
@ -183,7 +183,7 @@ jobs:
|
|||
|
||||
## Netlify
|
||||
|
||||
**Nota:** Si está utilizando una [imagen de compilación](https://docs.netlify.com/configure-builds/get-started/#build-image-selection) antigua en Netlify, asegúrate de configurar tu versión de Node.js en un archivo [`.nvmrc`](https://github.com/nvm-sh/nvm#nvmrc) (ejemplo:` node v14.17.6`) o una variable de entorno `NODE_VERSION`. Este paso ya no es necesario de forma predeterminada.
|
||||
**Nota:** Si está utilizando una [imagen de compilación](https://docs.netlify.com/configure-builds/get-started/#build-image-selection) antigua en Netlify, asegúrate de configurar tu versión de Node.js en un archivo [`.nvmrc`](https://github.com/nvm-sh/nvm#nvmrc) (ejemplo:` node v14.17.6`) o una variable de entorno `NODE_VERSION`. Este paso ya no es necesario de forma predeterminada.
|
||||
|
||||
Puedes configurar tu implementación de dos maneras, a través del sitio web de Netlify o con un archivo de proyecto local `netlify.toml`.
|
||||
|
||||
|
|
@ -344,8 +344,8 @@ Puedes desplegar tu proyecto Astro en [Render](https://render.com/) siguiendo es
|
|||
2. Haz clic en el botón **Nuevo +** de tu panel y selecciona **Sitio estático**.
|
||||
3. Conecta tu repositorio de [GitHub](https://github.com/) o [GitLab](https://about.gitlab.com/) o, alternativamente, introduce la URL pública de un repositorio público.
|
||||
4. Asigna un nombre a tu sitio web, selecciona la rama y especifique el comando de compilación y el directorio de publicación.
|
||||
- **comando de compilación**: `npm run build`
|
||||
- **directorio de publicación**: `dist`
|
||||
- **comando de compilación**: `npm run build`
|
||||
- **directorio de publicación**: `dist`
|
||||
5. Haz clic en el botón **Crear sitio estático**.
|
||||
|
||||
## Créditos
|
||||
|
|
|
|||
Loading…
Reference in a new issue