mirror of https://github.com/vapor/docs.git
Add Spanish translation for custom-tag.md (#929)
Add Spanish translation for custom-tag.md --------- Co-authored-by: Jorge Acosta <104621044+jacostaf10@users.noreply.github.com>
This commit is contained in:
parent
81fb2b2b35
commit
e40ba07ba7
|
|
@ -0,0 +1,128 @@
|
||||||
|
# Etiquetas Personalizadas
|
||||||
|
|
||||||
|
Puedes crear etiquetas personalizadas de Leaf utilizando el protocolo [`LeafTag`](https://api.vapor.codes/leafkit/documentation/leafkit/leaftag).
|
||||||
|
|
||||||
|
Para demostrarlo, vamos a crear una etiqueta personalizada `#now` que muestra la marca de tiempo actual. La etiqueta también soportará un único parámetro opcional para especificar el formato de fecha.
|
||||||
|
|
||||||
|
!!! tip "Consejo"
|
||||||
|
Si tu etiqueta personalizada muestra HTML, deberías hacer que tu etiqueta personalizada cumpla con `UnsafeUnescapedLeafTag` para que el HTML no se escape. Recuerda verificar o sanear cualquier entrada del usuario.
|
||||||
|
|
||||||
|
## `LeafTag`
|
||||||
|
|
||||||
|
Primero, crea una clase llamada `NowTag` y hazla cumplir con `LeafTag`.
|
||||||
|
|
||||||
|
```swift
|
||||||
|
struct NowTag: LeafTag {
|
||||||
|
func render(_ ctx: LeafContext) throws -> LeafData {
|
||||||
|
...
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Ahora implementemos el método `render(_:)`. El contexto `LeafContext` pasado a este método tiene todo lo que deberíamos necesitar.
|
||||||
|
|
||||||
|
```swift
|
||||||
|
enum NowTagError: Error {
|
||||||
|
case invalidFormatParameter
|
||||||
|
case tooManyParameters
|
||||||
|
}
|
||||||
|
|
||||||
|
struct NowTag: LeafTag {
|
||||||
|
func render(_ ctx: LeafContext) throws -> LeafData {
|
||||||
|
let formatter = DateFormatter()
|
||||||
|
switch ctx.parameters.count {
|
||||||
|
case 0: formatter.dateFormat = "yyyy-MM-dd HH:mm:ss"
|
||||||
|
case 1:
|
||||||
|
guard let string = ctx.parameters[0].string else {
|
||||||
|
throw NowTagError.invalidFormatParameter
|
||||||
|
}
|
||||||
|
|
||||||
|
formatter.dateFormat = string
|
||||||
|
default:
|
||||||
|
throw NowTagError.tooManyParameters
|
||||||
|
}
|
||||||
|
|
||||||
|
let dateAsString = formatter.string(from: Date())
|
||||||
|
return LeafData.string(dateAsString)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Configurar la Etiqueta
|
||||||
|
|
||||||
|
Ahora que hemos implementado `NowTag`, sólo necesitamos informar a Leaf sobre ella. Puedes añadir cualquier etiqueta de esta manera - incluso si provienen de un paquete separado. Típicamente haces esto en `configure.swift`:
|
||||||
|
|
||||||
|
```swift
|
||||||
|
app.leaf.tags["now"] = NowTag()
|
||||||
|
```
|
||||||
|
|
||||||
|
¡Y eso es todo! Ahora podemos usar nuestra etiqueta personalizada en Leaf.
|
||||||
|
|
||||||
|
```leaf
|
||||||
|
The time is #now()
|
||||||
|
```
|
||||||
|
|
||||||
|
## Propiedades de Contexto
|
||||||
|
|
||||||
|
El `LeafContext` contiene dos propiedades importantes. `parameters` y `data` que tienen todo lo que deberíamos necesitar.
|
||||||
|
|
||||||
|
- `parameters`: Un array que contiene los parámetros de la etiqueta.
|
||||||
|
- `data`: Un diccionario que contiene los datos de la vista pasados a `render(_:_:)` como contexto.
|
||||||
|
|
||||||
|
### Ejemplo de Etiqueta Hello
|
||||||
|
|
||||||
|
Para ver cómo usar esto, implementemos una simple etiqueta hello usando ambas propiedades.
|
||||||
|
|
||||||
|
#### Usando Parámetros
|
||||||
|
|
||||||
|
Podemos acceder al primer parámetro que contendría `name`.
|
||||||
|
|
||||||
|
```swift
|
||||||
|
enum HelloTagError: Error {
|
||||||
|
case missingNameParameter
|
||||||
|
}
|
||||||
|
|
||||||
|
struct HelloTag: UnsafeUnescapedLeafTag {
|
||||||
|
func render(_ ctx: LeafContext) throws -> LeafData {
|
||||||
|
guard let name = ctx.parameters[0].string else {
|
||||||
|
throw HelloTagError.missingNameParameter
|
||||||
|
}
|
||||||
|
|
||||||
|
return LeafData.string("<p>Hello \(name)</p>")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
```leaf
|
||||||
|
#hello("John")
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Usando Data
|
||||||
|
|
||||||
|
Podemos acceder al valor `name` usando la clave "name" dentro de la propiedad data.
|
||||||
|
|
||||||
|
```swift
|
||||||
|
enum HelloTagError: Error {
|
||||||
|
case nameNotFound
|
||||||
|
}
|
||||||
|
|
||||||
|
struct HelloTag: UnsafeUnescapedLeafTag {
|
||||||
|
func render(_ ctx: LeafContext) throws -> LeafData {
|
||||||
|
guard let name = ctx.data["name"]?.string else {
|
||||||
|
throw HelloTagError.nameNotFound
|
||||||
|
}
|
||||||
|
|
||||||
|
return LeafData.string("<p>Hello \(name)</p>")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
```leaf
|
||||||
|
#hello()
|
||||||
|
```
|
||||||
|
|
||||||
|
_Controlador_:
|
||||||
|
|
||||||
|
```swift
|
||||||
|
return try await req.view.render("home", ["name": "John"])
|
||||||
|
```
|
||||||
Loading…
Reference in New Issue