Avancé on Martijn's Notes

Remplacement des mises en page

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

Selon le Ordre de recherche des mises en page Hugo, il est facile de remplacer les mises en page et les partiels de Hugo et du thème. C’est utile pour les utilisateurs qui souhaitent personnaliser certains éléments de mises en page ou de partiels particuliers.

Utilisation

Créez simplement une mise en page ou un fichier partiel avec le même nom de fichier que vous souhaitez remplacer sous la racine du site.

PurgerCSS

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

PurgeCSS est un outil génial qui supprime les CSS inutilisés de votre site. Dans cette section, nous verrons comment fonctionne PurgeCSS et à quoi devons-nous prêter attention.

Comment ça marche ?

Le PurgeCSS nécessite que la configuration suivante soit définie.

config.toml

Performance

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

Dans cet article, nous allons parler de comment améliorer les performances de vos sites.

Le moyen le plus simple d’améliorer les performances consiste à réduire la taille du fichier pour un transfert plus rapide.

Environnement

Le thème s’appuie sur l’environnement production pour réduire les ressources JavaScript et CSS et purger les CSS inutilisés.

Environnement par défaut	Valeur
`hugo`	`production`
`hugo server`	`development`

En général, vous n’avez besoin d’apporter aucune modification, sauf si vous envisagez d’utiliser hugo server dans un environnement production. Vous pouvez modifier l’environnement par défaut avec l’indicateur -e.

Événements

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

Cet article répertorie certains événements personnalisés émis par le thème. Vous pouvez capturer ces événements via des écouteurs d’événements.

Événement du mode couleur

HBS émettra un événement personnalisé appelé hbs:mode en cas de changement du mode couleur, il est utile d’ajuster le style de votre widget au mode couleur du thème. Les moteurs de commentaires intégrés Utterances et Giscus s’appuient sur cet événement pour ajuster leur thème sur clair ou sombre.

Variables SCSS

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

Grâce à assets/main/scss/_variables.scss, nous avons la possibilité de changer les variables SCSS par défaut du thème et de Bootstrap.

Pourquoi les variables SCSS ?

Bien que nous puissions remplacer le CSS via assets/main/scss/_custom.scss, cela finira par augmenter la taille du bundle CSS, mais ce n’est pas le cas de la variable SCSS dans la plupart des cas.

Par exemple, il existe une animation par défaut pour le logo en survol.

Snack-bar

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

Les utilisateurs ayant utilisé le bouton de copie en bloc ne sont pas étrangers au Snackbar, qui informe l’utilisateur des résultats de l’exécution de l’application. Cet article donnera un exemple de la façon d’utiliser Snackbar pour répondre au besoin d’interaction personnalisée de l’utilisateur.

##API

Fonction	Descriptif
`show(body: String, duration: number = 2000)`	`body` : le corps du message, `duration` : la durée du message, en millisecondes.

Exporter

Grâce à assets/main/js/custom.ts, on peut personnaliser le JavaScript, ici on exporte l’intégralité du Snackbar en variable globale :

Actifs personnalisés

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

En tant que thème personnalisable, il offre la possibilité de personnaliser les actifs, qu’il s’agisse de personnaliser CSS et JS ou d’introduire des CSS et JS tiers.

Actifs internes

Créez et modifiez simplement les fichiers assets/main/scss/_variables.scss, assets/main/scss/_custom.scss et assets/main/js/custom.ts.

Ces fichiers seront regroupés en un seul pour réduire les requêtes HTTP.

Actifs externes

Toutes les ressources CSS et JS externes peuvent être importées par les paramètres customCSS et customJS.

Crochets

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

En tant que thème flexible, il devrait avoir la possibilité de personnaliser le code et d’intégrer des services tiers. Par conséquent, nous avons apporté une fonctionnalité appelée hook.

Dans cet article, nous présenterons tous les hooks et proposerons quelques cas d’utilisation.

Aperçu

Crochet	Descriptif
`head-end`	Avant la fin de
`body-begin`	Suivez le
`body-end`	Avant la fin du
`main-begin`	Au-dessus du
`main-end`	Suivez le
`list-begin`	Au-dessus de la liste des messages
`list-end`	Suivez la liste des publications
`sidebar-begin`	Tout en haut de la barre latérale
`sidebar-end`	Avant la fin de la barre latérale
`content-begin`	Au-dessus du contenu du message
`content-end`	Suivez le contenu de l’article
`comments-begin`	Au-dessus des commentaires
`comments-end`	Suivez les commentaires
`footer-begin`	Tout en haut du pied de page
`footer-end`	Avant la fin du pied de page
`post-panel-begin`	Tout en haut du panneau de publication
`post-panel-end`	Avant la fin du panneau de publication
`docs/sidebar-begin`	Tout en haut de la barre latérale `docs`
`docs/sidebar-end`	Avant la fin de la barre latérale `docs`
`docs/nav-begin`	Tout en haut de la navigation
`docs/nav-end`	Avant la fin de la navigation
`contact/form-field-begin`	Tout en haut du champ du formulaire de contact
`contact/form-field-end`	Avant la fin du champ du formulaire de contact
`search/sidebar-begin`	Tout en haut de la barre latérale `search`
`search/sidebar-end`	Avant la fin de la barre latérale `search`

Utilisations

Il est facile d’utiliser un hook, ce que vous devez faire est de créer un fichier HTML avec le même nom que hook dans le répertoire layouts/partials/hooks.