Administración Del Blog on kenji.blog

Usar etiquetas HTML en HUGO

Tue, 17 Jan 2023 19:20:32 +0900

De manera predeterminada, el uso de etiquetas HTML en los artículos está deshabilitado en HUGO, pero puedes habilitarlo agregando la siguiente configuración en config.toml.

1
2


[markup.goldmark.renderer]
 unsafe = true

Referencia: Configure Markup

'Cambio de disposición de imágenes en PaperMod'

Sun, 11 Sep 2022 18:50:40 +0900

El diseño por defecto coloca las imágenes en el centro con un 100% de ancho, pero como a veces sentía que eran demasiado grandes, intenté hacer que la imagen se acomodara debajo del título y cambiar el ancho a unos 150px.

Los cambios en los archivos son los siguientes.

blank.css

Para cambiar los márgenes, el tamaño de la imagen y las líneas de visualización de texto, agregamos el siguiente código a blank.css.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


.entry-content {
 -webkit-line-clamp: 4;
}

.entry-footer {
 text-align: right;
}

.entry-cover {
 margin-bottom: initial;
 text-align: center;
}

.entry-cover img {
 border-radius: 4px;
 display: inline;
 max-width: 100%;
}

.post-meta {
 display: block;
 text-align: right;
}

post-entry.css

Como no se pudo eliminar la definición en el lado de blank.css, eliminamos una línea de post-entry.css en la siguiente ubicación.

1
2
3
4
5
6


.entry-cover img {
 border-radius: var(--radius);
 pointer-events: none;
 /* width: 100%; */ ← Eliminar esta línea
 height: auto;
}

list.html

Para cambiar la disposición de las imágenes, modificamos las siguientes partes de list.html.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


<article class="{{ $class }}">
 <!-- {{- $isHidden := (site.Params.cover.hidden | default site.Params.cover.hiddenInList) }} --><!-- Mover abajo -->
 <!-- {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }} --><!-- Mover abajo -->
 <header class="entry-header">
 <h2>
 {{- .Title }}
 {{- if .Draft }}<sup><span class="entry-isdraft">&nbsp;&nbsp;[draft]</span></sup>{{- end }}
 </h2>
 </header>
 <div style="display:flex;"><!-- Añadido -->
 <div style="max-width:150px;margin:11px 15px 0px 0px;"><!-- Añadido -->
 {{- $isHidden := (site.Params.cover.hidden | default site.Params.cover.hiddenInList) }}<!-- Movido desde arriba -->
 {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }}<!-- Movido desde arriba -->
 </div><!-- Añadido -->
 <div style="width:100%;"><!-- Añadido -->
 {{- if (ne (.Param "hideSummary") true) }}
 <div class="entry-content">
 <p>{{ .Summary | plainify | htmlUnescape }}{{ if .Truncated }}...{{ end }}</p>
 </div>
 {{- end }}
 {{- if not (.Param "hideMeta") }}
 <footer class="entry-footer">
 {{- partial "post_meta.html" . -}}
 </footer>
 {{- end }}
 <a class="entry-link" aria-label="post link to {{ .Title | plainify }}" href="{{ .Permalink }}"></a>
 </div><!-- Añadido -->
 </div><!-- Añadido -->
</article>

Parece que hay bastantes peticiones similares.

https://github.com/adityatelange/hugo-PaperMod/discussions/159#discussioncomment-247844

Sería de agradecer que lo soportaran en la versión original.

Cómo configurar Twitter Card en PaperMod

Sat, 10 Sep 2022 18:41:22 +0900

Introducción

El tema PaperMod soporta Twitter Cards. Sin embargo, la configuración de Twitter Card debe escribirse en config.toml o en la información de cabecera de los archivos *.md de cada artículo. Si se configura tanto en cada artículo como en config.toml, la información de cabecera de cada artículo tendrá prioridad.

Método de configuración

config.toml

En config.toml, agrega un elemento llamado images bajo [params]. En images, escribe la ruta de la imagen que se mostrará en la Twitter Card. Si colocas la imagen en la carpeta static, solo necesitas especificar el nombre del archivo.

1
2


[params]
 images = ["twitter_card.jpg"]

Estructura de carpetas

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


root
│ config.toml (Escribir aquí)
├─content
│ └─posts
│ └─carpeta del artículo
│ │ index.md (Escribir aquí)
│ └─images
│ cover.png (Colocar aquí)
└─static
 twitter_card.jpg (Colocar aquí)

Información de cabecera de cada artículo

En la información de cabecera de cada artículo, agrega un elemento llamado image bajo cover. Si configuras relative como true, puedes especificarlo con una ruta relativa desde el archivo *.md del artículo.

1
2
3


cover:
 image: "images/cover.jpg"
 relative: true

Si no deseas que se muestre en la parte superior del artículo

Si no deseas mostrar la imagen de portada en la parte superior del artículo, agrega un elemento llamado hidden bajo cover y configúralo como true.

1
2
3
4


cover:
 image: "images/cover.jpg"
 relative: true
 hidden: true

Sobre el tamaño de la imagen

En la especificación actual de PaperMod, parece que el tamaño de Twitter Card solo soporta summary_large_image. El tamaño adecuado (resolución) para summary_large_image tiene varias opiniones, pero parece que alrededor de 800 x 418 (proporción de imagen 1.91:1) es una buena opción.

Sitio de referencia 1 Sitio de referencia 2

Si es posible, se recomienda redimensionar la imagen antes de publicarla.

Método de confirmación de la configuración

Para confirmar la configuración de Twitter Card, utiliza el Twitter Card Validator. Sin embargo, en mi entorno la vista previa no se mostraba correctamente, por lo que si no se muestra la vista previa, se recomienda verificarlo una vez antes de publicar usando una cuenta privada, etc.

Cambio de paleta de colores de PaperMod

Wed, 07 Sep 2022 15:30:21 +0900

He cambiado la paleta de colores del tema PaperMod. Me referí al siguiente enlace para saber cómo hacerlo:

https://github.com/adityatelange/hugo-PaperMod/discussions/645

La ruta del CSS es la siguiente:

themes/PaperMod/assets/css/extended/blank.css

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


:root {
 --entry: #fbf7ef;
 --primary: rgba(113, 103, 91, 1.00);
 --secondary: rgba(113, 103, 91, 0.95);
 --tertiary: rgba(113, 103, 91, 0.50);
 --content: rgba(113, 103, 91, 0.85);
 --hljs-bg: #34231B;
 --code-bg: #ebe4d7;
 --border: #fdfaf5;
 --theme: #fbf7ef;
}
.dark {
}

Por ahora, no hay cambios en el modo oscuro.