mirror of https://github.com/vapor/docs.git
Add Spanish translation for getting-started.md (#927)
Add Spanish translation for getting-started.md --------- Co-authored-by: Jorge Acosta <104621044+jacostaf10@users.noreply.github.com>
This commit is contained in:
parent
c1c708ee06
commit
81fb2b2b35
|
|
@ -0,0 +1,96 @@
|
|||
# Leaf
|
||||
|
||||
Leaf es un potente lenguaje de plantillas con una sintaxis inspirada en Swift. Puedes usarlo para generar páginas HTML dinámicas para el front-end de un sitio web o generar correos electrónicos enriquecidos para enviar desde una API.
|
||||
|
||||
## Paquete
|
||||
|
||||
El primer paso para usar Leaf es agregarlo como una dependencia en tu proyecto en tu archivo de manifiesto del paquete SPM.
|
||||
|
||||
```swift
|
||||
// swift-tools-version:5.2
|
||||
import PackageDescription
|
||||
|
||||
let package = Package(
|
||||
name: "MyApp",
|
||||
platforms: [
|
||||
.macOS(.v10_15)
|
||||
],
|
||||
dependencies: [
|
||||
/// Cualquier otra dependencia ...
|
||||
.package(url: "https://github.com/vapor/leaf.git", from: "4.0.0"),
|
||||
],
|
||||
targets: [
|
||||
.target(name: "App", dependencies: [
|
||||
.product(name: "Leaf", package: "leaf"),
|
||||
// Cualquier otra dependencia
|
||||
]),
|
||||
// Otros targets
|
||||
]
|
||||
)
|
||||
```
|
||||
|
||||
## Configuración
|
||||
|
||||
Una vez agregado el paquete a tu proyecto, puedes configurar Vapor para usarlo. Esto generalmente se hace en [`configure.swift`](../getting-started/folder-structure.md#configureswift).
|
||||
|
||||
```swift
|
||||
import Leaf
|
||||
|
||||
app.views.use(.leaf)
|
||||
```
|
||||
|
||||
Esto le indica a Vapor que use el `LeafRenderer` cuando llames a `req.view` en tu código.
|
||||
|
||||
!!! note "Nota"
|
||||
Leaf tiene un caché interno para renderizar páginas. Cuando el entorno de `Application` está configurado en `.development`, este caché está deshabilitado, de modo que los cambios en las plantillas surten efecto de inmediato. En `.production` y en todos los demás entornos, el caché está habilitado de forma predeterminada; cualquier cambio realizado en las plantillas no surtirá efecto hasta que se reinicie la aplicación.
|
||||
|
||||
!!! warning "Advertencia"
|
||||
Para que Leaf pueda encontrar las plantillas al ejecutar desde Xcode, debes establecer [el directorio de trabajo personalizado](../getting-started/xcode.md#custom-working-directory) para tu espacio de trabajo en Xcode.
|
||||
|
||||
## Estructura de Carpetas
|
||||
|
||||
Una vez que hayas configurado Leaf, deberás asegurarte de tener una carpeta `Views` para almacenar tus archivos `.leaf`. Por defecto, Leaf espera que la carpeta de vistas esté en `./Resources/Views` relativo a la raíz de tu proyecto.
|
||||
|
||||
También es probable que quieras habilitar el [`FileMiddleware`](https://api.vapor.codes/vapor/documentation/vapor/filemiddleware) de Vapor para servir archivos desde tu carpeta `/Public` si planeas servir archivos Javascript y CSS, por ejemplo.
|
||||
|
||||
```
|
||||
VaporApp
|
||||
├── Package.swift
|
||||
├── Resources
|
||||
│ ├── Views
|
||||
│ │ └── hello.leaf
|
||||
├── Public
|
||||
│ ├── images (recursos de imágenes)
|
||||
│ ├── styles (recursos css)
|
||||
└── Sources
|
||||
└── ...
|
||||
```
|
||||
|
||||
## Renderizando una Vista
|
||||
|
||||
Ahora que Leaf está configurado, vamos a renderizar tu primera plantilla. Dentro de la carpeta `Resources/Views`, crea un nuevo archivo llamado `hello.leaf` con el siguiente contenido:
|
||||
|
||||
```leaf
|
||||
Hello, #(name)!
|
||||
```
|
||||
|
||||
!!! tip "Consejo"
|
||||
Si estás usando VSCode como tu editor de código, te recomendamos instalar la extensión de Leaf para habilitar el resaltado de sintaxis: [Leaf HTML](https://marketplace.visualstudio.com/items?itemName=Francisco.html-leaf).
|
||||
|
||||
Luego, registra una ruta (generalmente en `routes.swift` o en un controlador) para renderizar la vista.
|
||||
|
||||
```swift
|
||||
app.get("hello") { req -> EventLoopFuture<View> in
|
||||
return req.view.render("hello", ["name": "Leaf"])
|
||||
}
|
||||
|
||||
// o
|
||||
|
||||
app.get("hello") { req async throws -> View in
|
||||
return try await req.view.render("hello", ["name": "Leaf"])
|
||||
}
|
||||
```
|
||||
|
||||
Esto utiliza la propiedad genérica `view` en `Request` en lugar de llamar directamente a Leaf, permitiéndote cambiar a otro renderizador en tus pruebas.
|
||||
|
||||
Abre tu navegador y visita `/hello`. Deberías ver `Hello, Leaf!`. ¡Felicidades por renderizar tu primera vista Leaf!
|
||||
Loading…
Reference in New Issue