Avanzado on Martijn's Notes

Anulación de diseños

Wed, 27 Jul 2022 16:05:37 +0800

Según Orden de búsqueda de diseños de Hugo, es fácil anular los diseños y parciales de Hugo y del tema. Es útil para los usuarios que desean personalizar algunas cosas de diseños o parciales particulares.

Uso

Simplemente cree un diseño o un archivo parcial con el mismo nombre de archivo que desea anular en la raíz del sitio.

Así trabaja nuestro Manos.

Por ejemplo, podemos anular la página de inicio parital diseños/index.html creando la nuestra propia en la raíz del sitio.

PurgarCSS

Mon, 25 Jul 2022 12:06:00 +0800

PurgeCSS es una herramienta increíble que elimina el CSS no utilizado de su sitio. En esta sección, profundizaremos en cómo funciona PurgeCSS y a qué debemos prestar atención.

¿Cómo funciona?

PurgeCSS requiere que se establezca la siguiente configuración.

config.toml

Actuación

Sat, 23 Jul 2022 18:30:48 +0800

En este artículo vamos a hablar sobre cómo mejorar el rendimiento de sus sitios.

La forma más sencilla de mejorar el rendimiento es reducir el tamaño del archivo para transferirlo más rápido.

Medio ambiente

El tema se basa en el entorno production para minimizar los activos de JavaScript y CSS, y eliminar el CSS no utilizado.

Entorno predeterminado	Valor
`hugo`	`production`
`hugo server`	`development`

En general, no es necesario realizar ningún cambio a menos que planee utilizar hugo server en un entorno production. Puede cambiar el entorno predeterminado con el indicador -e.

Eventos

Sat, 23 Jul 2022 17:33:59 +0800

En este artículo se enumeran algunos eventos personalizados emitidos por el tema; puede detectar esos eventos a través de detectores de eventos.

Evento de modo de color

HBS emitirá un evento personalizado llamado hbs:mode cuando se cambie el modo de color; es útil para ajustar el estilo de su widget al modo de color del tema. Los motores integrados de comentarios de Utterances y Giscus dependen de este evento para ajustar su tema a claro u oscuro.

Variables SCSS

Sat, 23 Jul 2022 17:23:28 +0800

Gracias a assets/main/scss/_variables.scss, tenemos la capacidad de cambiar las variables SCSS predeterminadas del tema y Bootstrap.

¿Por qué variables SCSS?

Aunque podemos anular el CSS a través de assets/main/scss/_custom.scss, esto eventualmente aumentará el tamaño del paquete de CSS; sin embargo, la variable SCSS no lo hace en la mayoría de los casos.

Por ejemplo, hay una animación predeterminada para el logotipo al pasar el mouse.

1.top-app-bar .logo:hover {
2    transform: rotate(-5deg) scale(1.1);
3}

Puede desactivarlo mediante SCSS personalizado.

Barra de snacks

Sat, 02 Jul 2022 21:14:37 +0800

Los usuarios que han utilizado el botón bloquear copia no son ajenos al Snackbar, que informa al usuario de los resultados de la ejecución de la aplicación. Este artículo dará un ejemplo de cómo utilizar Snackbar para satisfacer la necesidad de interacción personalizada del usuario.

##API

Función	Descripción
`show(body: String, duration: number = 2000)`	`body`: el cuerpo del mensaje, `duration`: la duración del mensaje, en milisegundos.

Exportar

Gracias a assets/main/js/custom.ts, podemos personalizar el JavaScript, aquí exportamos todo el Snackbar como una variable global:

Activos personalizados

Sun, 28 Nov 2021 16:00:49 +0800

Como tema personalizable, brinda la capacidad de personalizar activos, ya sea personalizando CSS y JS o introduciendo CSS y JS de terceros.

Activos internos

Simplemente cree y edite los archivos assets/main/scss/_variables.scss, assets/main/scss/_custom.scss y assets/main/js/custom.ts.

Estos archivos se agruparán en uno para reducir las solicitudes HTTP.

Activos externos

Cualquier recurso CSS y JS externo se puede importar mediante los parámetros customCSS y customJS.

1customCSS = [
2  "external-foo.css",
3  "external-bar.css"
4]
5
6customJS = [
7  "external-foo.js",
8  "external-bar.js"
9]

Manos

Sat, 27 Nov 2021 19:54:29 +0800

Como tema flexible, debería tener la capacidad de personalizar el código e integrar servicios de terceros. Por lo tanto, trajimos una función llamada gancho.

En este artículo, presentaremos todos los ganchos y brindaremos algunos casos de uso.

Descripción general

Gancho	Descripción
`head-end`	Antes del final
`body-begin`	Sigue el
`body-end`	Antes del final del
`main-begin`	Arriba del
`main-end`	Sigue el
`list-begin`	Arriba de la lista de publicaciones
`list-end`	Sigue la lista de publicaciones
`sidebar-begin`	En la parte superior de la barra lateral
`sidebar-end`	Antes del final de la barra lateral
`content-begin`	Arriba del contenido de la publicación
`content-end`	Sigue el contenido de la publicación
`comments-begin`	Arriba de los comentarios
`comments-end`	Sigue los comentarios
`footer-begin`	En la parte superior del pie de página
`footer-end`	Antes del final del pie de página
`post-panel-begin`	En la parte superior del panel de publicaciones
`post-panel-end`	Antes de que finalice el panel de publicaciones
`docs/sidebar-begin`	En la parte superior de la barra lateral `docs`
`docs/sidebar-end`	Antes del final de la barra lateral `docs`
`docs/nav-begin`	En la parte superior de la navegación
`docs/nav-end`	Antes del final de la navegación
`contact/form-field-begin`	En la parte superior del campo del formulario de contacto
`contact/form-field-end`	Antes de que finalice el campo del formulario de contacto
`search/sidebar-begin`	En la parte superior de la barra lateral `search`
`search/sidebar-end`	Antes del final de la barra lateral `search`

Usos

Es fácil usar un gancho, lo que debe hacer es crear un archivo HTML con el mismo nombre que el gancho en el directorio layouts/partials/hooks.