Códigos cortos útiles de Hugo - Conceptos de codificación N

Si está utilizando Hugo como su herramienta de creación de sitios estáticos, es posible que haya utilizado códigos abreviados integrados de hugo, pero aquí hay algunos códigos abreviados de hugo sorprendentes que se pueden usar en los archivos de rebajas de su sitio web de hugo.

Códigos cortos son fragmentos simples en sus archivos de contenido que requieren plantillas integradas o personalizadas.

Índice
  1. Crear un código abreviado personalizado
  2. Ejemplos de código abreviado de Hugo
    1. Año corriente
    2. Enlace para abrir en la ventana del navegador
    3. Agregar elementos HTML en el bloque de código
    4. Marcatextos
    5. La huelga
    6. Salida de bloque de código
  3. Código corto de escape de Hugo

Crear un código abreviado personalizado

Para crear un shortcode, coloque una plantilla HTML en el layouts/shortcodes directorio de su organización de origen. Considere el nombre del archivo con cuidado ya que el nombre del código abreviado reflejará el nombre del archivo pero sin la extensión .html. Por ejemplo, layouts/shortcodes/myshortcode.html será llamado con {{< myshortcode >}}

Ejemplos de código abreviado de Hugo

Año corriente

Esto es útil cuando desea mostrar el año actual en rebajas.

pequeño código

diseños/códigos cortos/año.html

{{ now.Format "2006" }}
utilizar

content/post/myblogpost.md

---
# front-matter
---

Top 10 things you should know in {{< year >}}
resultados

post/miblogpost.html

Top 10 things you should know in 2022

De forma predeterminada, cuando crea un enlace en las páginas de hugo, se abre en la misma ventana del navegador. Puede usar este código abreviado para abrir enlaces en una nueva ventana o pestaña del navegador.

pequeño código

diseños/códigos cortos/a_blank.html

<a href="{{ .Get "url" }}" target="_blank">{{ with .Get "title" }}{{.}}{{else}}{{.Get "url"}}{{end}}</a>
utilizar

content/post/myblogpost.md

---
# front-matter
---
[Coding N Concepts](https://codingnconcepts.com/) opens in same browser window

{{< a_blank title="Coding N Concepts" url="https://codingnconcepts.com/" >}} opens in new browser window.
resultados

post/miblogpost.html

Coding N Concepts se abre en la misma ventana del navegador

Coding N Concepts se abre en una nueva ventana del navegador.

Agregar elementos HTML en el bloque de código

A veces necesitamos ayuda para agregar un estilo específico a nuestro archivo de rebajas. Hugo no admite agregar HTML sin formato a los archivos de Markdown de forma predeterminada, pero puede habilitarlo haciendo unsafe propiedad como verdadera en config.toml expediente:

[markup]
  [markup.goldmark.renderer]
    unsafe= true

Ahora puede usar elementos HTML sin procesar en sus archivos de rebajas, pero aún existe la limitación de que no puede usar HTML sin procesar en bloques de código. Aquí es donde span el código abreviado de hugo es útil. el crea un </span> elemento con atributos de estilo dados.

pequeño código

diseños/códigos cortos/span.html

<span {{ with .Get "style"}} style="{{ . | safeCSS }}"{{ end }}>{{ .Get "text" }}</span>
utilizar

content/post/myblogpost.md

---
# front-matter
---

    ```
    ▼ The trace
      first         @ {{< span style="color:red;" text="test:1" >}}
      second        @ {{< span style="color:orange;font-style:italic;" text="test:2" >}}
      third         @ {{< span style="color:green;background-color:yellow;" text="test:3" >}}
      fourth        @ {{< span style="color:blue;border:1px solid blue;" text="test:4" >}}
      (anonymous)   @ {{< span style="color:black;font-weight:bold;" text="test:5" >}}
    ```
resultados

post/miblogpost.html

▼ The trace
  first         @ test:1
  second        @ test:2
  third         @ test:3
  fourth        @ test:4
  (anonymous)   @ test:5

Marcatextos

Esto es útil cuando desea resaltar parte del contenido en el descuento.

pequeño código

diseños/códigos cortos/highlight.html

<mark>{{ with .Get 0 }}{{.}}{{end}}</mark>
utilizar

content/post/myblogpost.md

---
# front-matter
---

This is the {{< highlight "most trending" >}} post of the decade.
resultados

post/miblogpost.html

This is the most trending post of the decade.

La huelga

Esto es útil cuando desea tachar parte del contenido en el descuento.

pequeño código

diseños/códigos cortos/strike.html

<strike>{{ with .Get 0 }}{{.}}{{end}}</strike>
utilizar

content/post/myblogpost.md

---
# front-matter
---

This is {{< strike "not trending" >}} trending post of the decade.
resultados

post/miblogpost.html

This is the not trending trending post of the decade.

Salida de bloque de código

Esto es útil cuando desea ver la salida de ciertos códigos. Da un buen título "Salida".

pequeño código

diseños/códigos cortos/code_output.html

<div class="code_output">Output</div>
utilizar

content/post/myblogpost.md

---
# front-matter
---

    ```
    {{< code_output >}}
    1
    2
    3
    ```
resultados

post/miblogpost.html

Output

1 2 3

Código corto de escape de Hugo

A veces, es posible que deba escapar (es decir, evitar la ejecución) de un código abreviado en un archivo Hugo Markdown (.md) y mostrar el código abreviado tal como está. {{< myshortcode >}}

Un método simple que funciona al momento de escribir es agregar /* después de las llaves dobles de apertura y el paréntesis angular o el signo de porcentaje (es decir, {{< Donde {{%/*) y añadiendo */ después del corchete de cierre o signo de porcentaje y llaves dobles (es decir, >}} Donde */%}}). Por ejemplo, esto en el archivo Markdown (.md)

{ {</* myshortcode */>}}

se verá así en el HTML generado

{{< myshortcode >}}

Si quieres conocer otros artículos parecidos a Códigos cortos útiles de Hugo - Conceptos de codificación N puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas