Razon Yang on Martijn's Notes

Funding Widget

Sun, 29 Jan 2023 19:44:19 +0800

The funding widget, AKA buy me a coffee widget, gives the readers a way to support a creator.

Mise en page de la page de destination

Thu, 15 Sep 2022 10:46:23 +0800

Dans cet article, nous parlerons de la mise en page de la page de destination, cela pourrait vous intéresser si vous envisagez de personnaliser les pages de manière Markdown.

Qu’est-ce que c’est ?

La mise en page de la page de destination n’est qu’un conteneur squelette, le corps est composé de trois parties : la barre supérieure de l’application, le contenu de la page et le pied de page.

Repository Widget

Fri, 09 Sep 2022 21:06:19 +0800

The repository widget shows the commit information about current page, it’s useful for users to view or edit the source code.

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 :

Mise à niveau

Sat, 25 Jun 2022 22:15:02 +0800

Cet article explique comment mettre à niveau correctement le thème.

## versions

Avant la mise à niveau, il est nécessaire de présenter ce qu’est une version. En plus des versions relativement stables répertoriées dans Sorties, vous pouvez utiliser une branche telle que master, develop, ou même choisir une certaine commit.

Cet article utilisera l’espace réservé [version] pour représenter la version, remplacez-le simplement par la version vers laquelle vous souhaitez mettre à niveau.

Migration vers la v1

Mon, 20 Jun 2022 17:46:31 +0800

Suivez et examinez les modifications apportées aux fichiers sources du thème et à la documentation pour vous aider à migrer de v0.* vers v1.

Si vous ne savez pas comment effectuer la mise à niveau, consultez le guide Mise à niveau.

## v1.0

L’ancienne conception de l’interface utilisateur est figée sur la branche v0 qui n’accepte que les corrections de bugs. Vous pouvez continuer à utiliser l’ancienne conception de l’interface utilisateur avec cette branche.

Basculement de code

Mon, 13 Jun 2022 16:54:28 +0800

Le shortcode code-toggle génère des blocs de code de différents formats en fonction du code de configuration de tout format pris en charge.

##Formats

JSON, TOML et YAML sont pris en charge.

Utilisation

1{{< code-toggle >}}
2CODE IN ANY SUPPORTED FORMAT
3{{}}

Avec un nom de fichier :

1{{< filename="config" code-toggle >}}
2CODE IN ANY SUPPORTED FORMAT
3{{}}

Exemple

1{{< code-toggle filename="params" >}}
2{
3    "logo": "/images/logo.png",
4    "customCSS": ["foo.css", "bar.css"],
5    "codeBlock": {
6        "maxLines": 10
7    }
8}
9{{}}

params.toml

Conditions préalables

Mon, 13 Jun 2022 16:32:09 +0800

Veuillez vous assurer de remplir les conditions préalables avant d’installer le thème.

##Configuration

HBS nécessite que les configurations suivantes soient définies.

config.toml

1[build]
2  writeStats = true
3[taxonomies]
4  author = 'authors'
5  category = 'categories'
6  series = 'series'
7  tag = 'tags'

config.yaml

Introduction

Mon, 13 Jun 2022 16:32:09 +0800

Objectifs

Performances
Expérience utilisateur conviviale -Référencement

Fonctionnalités

Pipes Hugo : utilisé pour générer des ressources CSS et JS.
PurgeCSS : supprime les CSS inutilisés.
Flexible et configurable.
Expérience utilisateur rapide et bonne : le score de Informations Google PageSpeed est supérieur à 95.
Prise en charge RTL : Site de démonstration arabe.
Construit sur Amorçage 5.
Icônes FontAwesome.
Réactif.
PWA, AKA applications Web progressives.
Diverses palettes : blue, blue-gray, brown, cyan, green, indigo, orange, pink, purple, red, teal, yellow.
Un Disposition des documents pour publier la documentation du projet, les notes, les jardins numériques, les zettelkastens, etc.
Mode clair/sombre.
Sélecteur de taille de police.
Multilingue (I18N).
Recherche locale.
DocSearch.
Épingler des messages.
Menu de pied de page.
Panneau de bloc de code : copiez le code, le numéro de ligne, le retour à la ligne et développez.
Basculement de code
Fil d’Ariane.
Archive.
Visionneuse d’images.
Traitement d’images : redimensionner et aligner les images.
Chargement paresseux des ressources : image et iframe.
Mise en évidence de la syntaxe.
Widget de récompense, AKA Buy Me a Coffee : toute plate-forme prenant en charge le code QR est prise en charge.
Table des matières.
Commentaires : Disqus, Utterances, Giscus et Staticman peuvent être utilisés directement, vous pouvez également les intégrer à d’autres services de commentaires.
Actifs personnalisés : CSS et JS personnalisés.
Crochets : permet d’ajouter du code personnalisé sur la page.
Liens sociaux.
Divers codes courts.
Cartes Twitter et Open Graph.
Licence Creative Commons.
Formulaire de contact.
Numéroter automatiquement les titres.

Code court de la galerie

Fri, 25 Mar 2022 00:00:00 +0000

Cet article montre comment utiliser le shortcode gallery.

Utilisation

1{{< gallery images="images/foo.png,images/bar.png" >}}

Dépannage

Sat, 19 Mar 2022 13:46:41 +0800

Cet article répertorie certains problèmes courants afin que vous puissiez les résoudre facilement.

Rendu CSS incorrect

Le problème est probablement dû au postcss, HBS a besoin de configurer la configuration suivante, postcss s’appuie sur le fichier hugo_stats.json pour purger les CSS inutilisés.

1[build]
2  writeStats = true

js.Build : Impossible de résoudre les dépendances

 1Start building sites … 
 2hugo v0.94.0-63B23660+extended linux/amd64 BuildDate=2022-03-10T09:46:36Z VendorInfo=gohugoio
 3ERROR 2022/03/19 14:03:50 js.Build failed: Could not resolve "bootstrap/js/src/offcanvas"
 4ERROR 2022/03/19 14:03:50 js.Build failed: Could not resolve "bootstrap/js/src/modal"
 5ERROR 2022/03/19 14:03:50 js.Build failed: Could not resolve "bootstrap/js/src/tab"
 6ERROR 2022/03/19 14:03:50 js.Build failed: "/home/razonyang/Projects/razonyang/hugo-theme-bootstrap/assets/js/collapse/collapse.ts:1:38": Could not resolve "bootstrap/js/src/collapse"
 7ERROR 2022/03/19 14:03:50 js.Build failed: "/home/razonyang/Projects/razonyang/hugo-theme-bootstrap/assets/js/toc/index.ts:1:27": Could not resolve "bootstrap/js/dist/offcanvas"
 8ERROR 2022/03/19 14:03:50 js.Build failed: Could not resolve "@fortawesome/free-solid-svg-icons"
 9ERROR 2022/03/19 14:03:50 js.Build failed: Could not resolve "@fortawesome/free-regular-svg-icons"
10ERROR 2022/03/19 14:03:50 js.Build failed: Could not resolve "@fortawesome/free-brands-svg-icons"
11ERROR 2022/03/19 14:03:50 js.Build failed: Could not resolve "workbox-routing"
12ERROR 2022/03/19 14:03:50 js.Build failed: Could not resolve "workbox-strategies"
13ERROR 2022/03/19 14:03:50 js.Build failed: Could not resolve "workbox-cacheable-response"
14ERROR 2022/03/19 14:03:50 js.Build failed: Could not resolve "workbox-expiration"
15ERROR 2022/03/19 14:03:50 js.Build failed: Could not resolve "workbox-precaching"
16ERROR 2022/03/19 14:03:50 js.Build failed: "/home/razonyang/Projects/razonyang/hugo-theme-bootstrap/assets/search/search.ts:1:21": Could not resolve "mustache"
17ERROR 2022/03/19 14:03:50 js.Build failed: "/home/razonyang/Projects/razonyang/hugo-theme-bootstrap/assets/search/search.ts:1:17": Could not resolve "mark.js/dist/mark.js"
18ERROR 2022/03/19 14:03:50 js.Build failed: Could not resolve "bootstrap/js/src/offcanvas"
19ERROR 2022/03/19 14:03:50 js.Build failed: Could not resolve "bootstrap/js/src/modal"
20ERROR 2022/03/19 14:03:50 js.Build failed: Could not resolve "bootstrap/js/src/tab"
21ERROR 2022/03/19 14:03:50 js.Build failed: "/home/razonyang/Projects/razonyang/hugo-theme-bootstrap/assets/js/collapse/collapse.ts:1:38": Could not resolve "bootstrap/js/src/collapse"
22ERROR 2022/03/19 14:03:50 js.Build failed: "/home/razonyang/Projects/razonyang/hugo-theme-bootstrap/assets/js/toc/index.ts:1:27": Could not resolve "bootstrap/js/dist/offcanvas"
23ERROR 2022/03/19 14:03:50 js.Build failed: Could not resolve "bootstrap/js/src/offcanvas"
24ERROR 2022/03/19 14:03:50 js.Build failed: Could not resolve "bootstrap/js/src/modal"
25ERROR 2022/03/19 14:03:50 js.Build failed: Could not resolve "bootstrap/js/src/tab"
26ERROR 2022/03/19 14:03:50 js.Build failed: "/home/razonyang/Projects/razonyang/hugo-theme-bootstrap/assets/js/collapse/collapse.ts:1:38": Could not resolve "bootstrap/js/src/collapse"
27ERROR 2022/03/19 14:03:50 js.Build failed: "/home/razonyang/Projects/razonyang/hugo-theme-bootstrap/assets/js/toc/index.ts:1:27": Could not resolve "bootstrap/js/dist/offcanvas"
28ERROR 2022/03/19 14:03:51 js.Build failed: Could not resolve "bootstrap/js/src/offcanvas"
29ERROR 2022/03/19 14:03:51 js.Build failed: Could not resolve "bootstrap/js/src/modal"
30ERROR 2022/03/19 14:03:51 js.Build failed: Could not resolve "bootstrap/js/src/tab"
31ERROR 2022/03/19 14:03:51 js.Build failed: "/home/razonyang/Projects/razonyang/hugo-theme-bootstrap/assets/js/collapse/collapse.ts:1:38": Could not resolve "bootstrap/js/src/collapse"
32ERROR 2022/03/19 14:03:51 js.Build failed: "/home/razonyang/Projects/razonyang/hugo-theme-bootstrap/assets/js/toc/index.ts:1:27": Could not resolve "bootstrap/js/dist/offcanvas"
33ERROR 2022/03/19 14:03:51 TOCSS: failed to transform "viewer/scss/index.scss" (text/x-scss): SCSS processing failed: file "stdin", line 1, col 1: File to import not found or unreadable: viewerjs/dist/viewer. 
34ERROR 2022/03/19 14:03:51 JSBUILD: failed to transform "main/js/bundle.ts" (application/typescript): Could not resolve "bootstrap/js/src/dropdown"
35ERROR 2022/03/19 14:03:51 JSBUILD: failed to transform "icons/index.js" (application/javascript): Could not resolve "@fortawesome/fontawesome-svg-core"
36ERROR 2022/03/19 14:03:51 JSBUILD: failed to transform "service-worker/bundle.ts" (application/typescript): Could not resolve "workbox-core"
37ERROR 2022/03/19 14:03:51 JSBUILD: failed to transform "viewer/js/index.ts" (application/typescript): Could not resolve "viewerjs"
38Error: Error building site: JSBUILD: failed to transform "search/index.ts" (application/typescript): "/home/razonyang/Projects/razonyang/hugo-theme-bootstrap/assets/search/search.ts:1:17": Could not resolve "fuse.js"

Cela est dû au manque de dépendances CSS et JS :

Installer via le module Hugo

Sat, 26 Feb 2022 17:10:39 +0200

Cet article fait référence à la méthode d’installation moderne et à jour permettant d’installer le thème localement en tant que module Hugo.

Proxy (facultatif)

Si vous résidez en Chine continentale sans VPN, le téléchargement du module Hugo peut échouer.

Il existe deux proxys pour cela : GOPROXY.CN et GOPROXY.IO.

1$ export HUGO_MODULE_PROXY=https://goproxy.cn

Veuillez noter que Hugo ne respecte pas la variable d’environnement GOPROXY, veuillez utiliser HUGO_MODULE_PROXY à la place.

Disposition des documents

Wed, 12 Jan 2022 10:56:34 -0800

Dans cet article, nous explorerons la mise en page docs, qui peut être utilisée pour rédiger de la documentation de projet, des notes personnelles, etc.

Si vous envisagez d’utiliser la mise en page docs sur d’autres sections (notes), veuillez jeter un œil à la page Contenu.

Mise en page

La mise en page docs se compose de trois sections, du début à la fin : barre de navigation du document, contenu du document et barre latérale.

Propriété	Tapez	Descriptif
`name`	Chaîne	Le nom du menu.
`identifier`	Chaîne	L’ID du menu.
`weight`	Numéro	Le poids du menu utilisé pour le tri par ordre croissant.
`parent`	Chaîne	Le `identifier` de l’entrée du menu parent.
`url`	Chaîne	L’URL du menu.
`pre`	Chaîne	La chaîne de début avant le nom du menu.
`post`	Chaîne	La chaîne de fin après le nom du menu.
`params`	Objet	Paramètres des menus.
`params.divider`	Booléen	`true` signifie diviseur.
`params.icon`	Chaîne	L’icône HTML.
`params.description`	Chaîne	La description des menus déroulants de la barre d’application supérieure uniquement.

Voir aussi Propriétés de l’entrée de menu.

Disposition de la FAQ

Tue, 07 Dec 2021 21:46:43 +0800

La page FAQ est une collection de questions fréquemment posées.

Prérequis

Nous devons créer une page appelée faq/index.md dans le répertoire content.

1+++
2title = "Frequently Asked Questions"
3layout = "faq"
4+++

Données

Les données sont stockées dans le répertoire data, la structure des répertoires est la suivante :

1data
2  /en
3    /faq
4      foo.json
5      bar.json
6  /zh-cn
7    /faq
8      foo.json
9      bar.json

Comme vous pouvez le constater, nous classons les questions selon leur langue. Et chaque fichier représente un groupe de questions, qui a le même format comme suit :

Ajout de contenu

Sat, 04 Dec 2021 10:43:39 +0800

Sections principales

Le paramètre mainSections est utilisé pour filtrer les pages, par défaut ["posts", "docs"].

1mainSections = ["blog", "posts", "docs", "notes"]

Questions préliminaires

Front Matter est l’endroit où nous mettons les métadonnées et les paramètres de la page, tels que le titre, la date, etc.

###Formats

Hugo prend en charge trois formats de présentation : YAML, TOML et JSON.

TOML : identifié par l’ouverture et la fermeture de +++.
YAML : identifié par l’ouverture et la fermeture de ---.
JSON : un seul objet JSON entouré de { et }, suivi d’une nouvelle ligne.

Prenons TOML comme exemple :

Installer via le sous-module Git

Sat, 04 Dec 2021 10:43:39 +0800

Cet article fait référence à la méthode d’installation traditionnelle consistant à cloner le thème localement en tant que sous-module Git. Bien que cette méthode d’installation soit encore largement utilisée, nous vous recommandons d’installer le thème sous le nom Module Hugo.

Créer un nouveau site à partir de zéro

1$ git clone https://github.com/razonyang/hugo-theme-bootstrap-skeleton myblog
2$ cd myblog
3$ git submodule add https://github.com/razonyang/hugo-theme-bootstrap themes/hugo-theme-bootstrap
4$ sed -i "s/theme:.*/theme: hugo-theme-bootstrap/g" config/_default/config.yaml
5$ rm go.mod go.sum
6$ hugo mod npm pack
7$ npm install
8$ hugo server

Si vous utilisez Windows, utilisez plutôt xcopy .\themes\hugo-theme-bootstrap\exampleSite /E.

Visionneuse d'images

Fri, 03 Dec 2021 20:46:50 +0800

La visionneuse d’images est une galerie d’images, elle s’affichera lorsque vous cliquerez sur une image non pouvant être liée.

Il fournit également de nombreux outils, tels que le zoom avant, le zoom arrière et la rotation.

L’avatar de l’auteur a été filtré par défaut.

Paramètres du site

Image Viewer a été activé par défaut, vous pouvez le désactiver en définissant le paramètre viewer sur false.

##Options

Vous pouvez modifier les options en créant assets/viewer/js/options.ts.

Regardez et ressentez

Fri, 03 Dec 2021 19:42:57 +0800

Par défaut, un site utilisant ce thème a les polices, les couleurs et l’apparence générale par défaut. Cependant, le schéma par défaut ne peut pas satisfaire tout le monde, mais ne vous inquiétez pas, vous pouvez facilement remplacer les valeurs par défaut du thème, telles que les couleurs de la palette, les polices et la coloration syntaxique.

Icônes de favoris

HBS génère des icônes de plusieurs tailles en fonction du fichier assets/favicon.webp (priorité plus élevée) ou assets/favicon.png. Enregistrez simplement votre propre image de favicon sous le même chemin pour remplacer les valeurs par défaut.

Application Web progressive

Fri, 03 Dec 2021 19:39:01 +0800

Les PWA (Applications Web progressives) sont des applications Web développées à l’aide d’un certain nombre de technologies spécifiques et de modèles standard pour leur permettre de tirer parti des fonctionnalités du Web et des applications natives.

HBS fournit certaines fonctionnalités de base, telles que l’installation du site sur l’écran d’accueil, les fichiers de pré-cache et la disponibilité hors ligne.

Paramètres du site

Tout d’abord, nous devons spécifier le paramètre pwa, même s’il est vide.

Disposition de la recherche

Fri, 03 Dec 2021 11:16:51 +0800

Il peut être difficile pour les lecteurs de récupérer un article s’il y a de nombreux articles sur votre site, c’est pourquoi nous avons ajouté la fonction de recherche.

Prérequis

Tout ce que vous avez à faire est de créer une page appelée search/_index.md dans le répertoire content.

1+++
2title = "Search"
3+++

Paramètres du site

Nom	Tapez	Par défaut	Descriptif
`search`	Objet	-	Configuration de la recherche.
`search.paginate`	Entier	`10`	Pagination.
`search.indexPaginate`	Entier	`1000`	Pagination du fichier d’index.
`search.indexPreload`	Booléen	`true`	S’il faut précharger les index de recherche.
`search.maxResults`	Numéro	`100`	Le nombre maximum de résultats de recherche.
`search.resultContentCharactersCount`	Entier	`240`	Nombre maximal de caractères du contenu du résultat à afficher.
`search.shortcut`	Tableau	`["/"]`	Le raccourci de recherche, c’est-à-dire `["Control", "/"]`, désactivez-le par un tableau vide `[]`.
`search.fuse`	Objet	-	Options de Fuse.js.
`search.fuse.ignoreLocation`	Booléen	`true`
`search.fuse.location`	Entier	-
`search.fuse.isCaseSensitive`	Booléen	-
`search.fuse.minMatchCharLength`	Entier	-
`search.fuse.threshold`	Double	-
`search.fuse.distance`	Entier	-
`search.fuse.useExtendedSearch`	Booléen	-

Disposition des archives

Fri, 03 Dec 2021 11:16:51 +0800

La page d’archives est une collection de messages regroupés par année.

Prérequis

Les pages ne sont pas créées automatiquement, il faut d’abord créer des sections d’archives :

1$ tree content/archives
2├── 2021
3│   ├── _index.md
4├── 2022
5│   ├── _index.md
6├── _index.md

Le contenu de ces fichiers contient simplement un paramètre title.

Paramètres du site

Nom	Tapez	Par défaut	Descriptif
`archive`	Objet	-	Archive.
`archive.dateFormat`	Chaîne	`Jan 2`	Format de date d’archivage.
`archive.monthFormat`	Chaîne	`January`	Format du mois d’archive, par ex. `1`, `01`, `Jan` et `January`.
`archive.basePath`	Chaîne	`/archives`

Author Widget

Fri, 03 Dec 2021 11:10:19 +0800

The author widget is located in the sidebar, in order to introduce yourself briefly.

Reward Widget

Fri, 03 Dec 2021 11:10:19 +0800

The reward widget, AKA buy me a coffee widget, gives the readers a way to support a creator through the use of donations or tips.

However, it limited to the QR code image, please take a look at the funding widget.

Social Links

Thu, 02 Dec 2021 16:27:45 +0800

The social parameter is a set of key value pairs of social links that mapping from platform to their user identifier. It supports many popular social platforms, such as Twitter, Facebook, Reddit, GitHub. This article lists all supported platforms and how to use them.

Formulaire de contact

Tue, 30 Nov 2021 23:56:00 +0800

Nous pouvons mettre notre adresse e-mail sur liens sociaux afin que les lecteurs puissent nous contacter. Malheureusement, les emails seront plus ou moins traités comme du spam et même filtrés. Par conséquent, nous apportons une fonctionnalité appelée formulaire de contact.

Prérequis

Nous devons créer une page de contact appelée contact/index.md dans le répertoire content, afin de pouvoir accéder au formulaire de contact.

1+++
2title = "Contact Us"
3layout = "contact"
4+++

Une fois créé, le lien apparaîtra dans le widget de profil.

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.

Comments Widget

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

Disqus, Utterances and Giscus comments widgets are supported out of box. This article shows how to configure them and even customize your own comment widgets.

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.

Impliquez-vous

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

Nous sommes heureux d’écouter vos opinions et vos commentaires et vous invitons à vous impliquer.

Communauté

Demande de fonctionnalité
Rapport de bug
Discussions : posez des questions, partagez des idées etc.

Contribuer

Toutes les contributions sont les bienvenues, telles que la documentation, les corrections de bugs et les nouvelles fonctionnalités.

Règles

Compte tenu de la facilité d’entretien, nous établissons quelques règles.

Configuration du site

Sat, 27 Nov 2021 19:53:24 +0800

La configuration du site se trouve par défaut dans config/_default/config.toml.

Nom	Tapez	Par défaut	Descriptif
`title`	Chaîne	-	Titre du site.
`baseURL`	Chaîne	-	URL de base du site.
`copyright`	Chaîne	-	Droits d’auteur du site. L’espace réservé `{year}` sera remplacé par l’année en cours.
`defaultContentLanguage`	Chaîne	`en`	Langue du site par défaut.
`defaultContentLanguageInSubdir`	Booléen	`false`
`paginate`	Entier	`10`
`paginatePath`	Chaîne	`page`
`enableRobotsTXT`	Booléen	`true`
`disqusShortname`	Chaîne	-	Disqus nom court.
`services`	Objet	-
`services.googleAnalytics`	Objet	-	Google Analytics prend en charge GA4 uniquement.
`services.googleAnalytics.ID`	Chaîne	-	ID de mesure.
`author`	Objet	-	Widget Auteur.

Voir aussi Tous les paramètres de configuration.

Paramètres des pages

Sat, 27 Nov 2021 19:53:24 +0800

Les paramètres de la page sont situés dans Questions préliminaires de la page.

Nom	Tapez	Par défaut	Descriptif
Page
`title`	Chaîne	-	Titre de la page.
`description`	Chaîne	-	Description des pages.
`keywords`	Tableau	-	Mots-clés des pages.
`comment`	Booléen	`true`	S’il faut activer les commentaires. Cela ne fonctionnera pas si `comment` a été désactivé globalement.
`toc`	Booléen	`true`	S’il faut activer la table des matières. Cela ne fonctionnera pas si `toc` a été désactivé globalement.
`math`	Booléen	`false`	S’il faut activer les mathématiques.
`diagram`	Booléen	`false`	S’il faut activer le diagramme.
`reward`	Booléen	`true`	S’il faut activer la récompense.
`breadcrumb`	Booléen	`true`	S’il faut activer le fil d’Ariane.
`breadcrumbDivider`	Chaîne	`/`	Séparateur de fil d’Ariane.
`readingTime`	Booléen	`true`	S’il faut afficher l’heure de lecture.
`postDate`	Booléen	`true`	S’il faut afficher la date de publication dans la section méta de publication.
`copyright`	Booléen	`true`	S’il faut afficher la section des droits d’auteur.
`carousel`	Booléen	`false`	Afficher sur le carrousel.
`nav`	Booléen	`true`	Activer/désactiver les navigations.
`sidebar`	Booléen	`true`	Afficher/Masquer la barre latérale.
`index`	Booléen	`true`	Indexez cette page dans le moteur de recherche client ou non.
Licence Creative Commons
`creativeCommons`	Objet	-
`creativeCommons.by`	Booléen	`true`	Le mérite doit être attribué à vous, le créateur.
`creativeCommons.nc`	Booléen	`true`	Seule une utilisation non commerciale de votre œuvre est autorisée.
`creativeCommons.nd`	Booléen	`true`	Aucun dérivé ou adaptation de votre travail n’est autorisé.
`creativeCommons.sa`	Booléen	`true`	Les adaptations doivent être partagées dans les mêmes conditions.
Balise méta
`metaRobots`	Chaîne	-	Vide signifie qu’il faut l’éteindre.
`pinned`	Booléen	`false`	Épingler des messages.
`pinnedWeight`	Numéro	-	Un poids inférieur a une priorité plus élevée.
`featuredPostCount`	Entier/Booléen	`5`	Le nombre de publications en vedette affichées dans la barre latérale. Désactivez-le en le réglant sur `false`.
`recentPostCount`	Entier/Booléen	`5`	Le nombre de publications récentes affichées dans la barre latérale. Désactivez-le en le réglant sur `false`.
`relatedPostCount`	Entier/Booléen	`5`	Le nombre de messages associés. Désactivez-le en le réglant sur `false`.
`featuredImageAlt`	Chaîne	-	Le texte alternatif pour les images sélectionnées, retour au titre de la page s’il n’est pas présent.
`numberifyHeadings`	Booléen	`true`	Lorsque `false`, les titres ne seront pas numérotés.

Paramètres du site

Sat, 27 Nov 2021 19:53:24 +0800

Les paramètres du site se trouvent par défaut dans config/_default/params.toml.

Nom	Tapez	Par défaut	Descriptif
`sass_transpiler`	chaîne	`libsass`	`dartsass` est recommandé, puisque `libsass` est obsolète.
Page
`mainSections`	Tableau	`["posts"]`	Sections principales
`titleCase`	Booléen	`false`	Titre en majuscule ou non
`titleSeparator`	Chaîne	`-`	Séparateur de titre
`backgroundImage`	Tableau	`[]`	Image d’arrière-plan, telle que `['/images/bg.png']`, `['/images/bg-light.png', '/images/bg-dark.png']`.
`comment`	Booléen	`true`	S’il faut activer les commentaires
`toc`	Booléen	`true`	S’il faut activer la table des matières
`tocWordCount`	Entier	`280`	La table des matières s’affiche uniquement si le nombre de mots de la publication est supérieur à cette valeur.
`tocPosition`	Chaîne	`sidebar`	Valeurs disponibles : `sidebar` et `content`, seule la disposition `posts` est concernée.
`breadcrumb`	Booléen	`true`	S’il faut activer le fil d’Ariane
`dateFormat`	Chaîne	`Jan 2, 2006`	Format des dates. Consultez le Référence des modèles de date et d’heure Hugo pour plus de détails.
`poweredBy`	Booléen	`true`	S’il faut afficher propulsé par.
`readingTime`	Booléen	`true`	S’il faut afficher l’heure de lecture.
`postDate`	Booléen	`true`	S’il faut afficher la date de publication dans la section méta de publication.
`math`	Booléen	`false`	S’il faut activer les mathématiques à l’échelle mondiale.
`diagram`	Booléen	`false`	S’il faut activer le diagramme globalement.
`logo`	Chaîne/Booléen	`images/logo.webp`	Image du logo. Désactivez le logo en le définissant sur `false`.
`brand`	Chaîne	-	Texte de la marque.
`description`	Chaîne	-	Descriptif du site.
`keywords`	Chaîne	-	Mots-clés du site.
`color`	Chaîne	-	Mode couleur, `light`, `dark` ou `auto`. Par défaut, `auto`.
`palette`	Chaîne	-	Palette par défaut. Cela prendra effet après avoir effacé le cookie.
`palettes`	Tableau	TOUS	Palettes disponibles. Vous pouvez le désactiver en le définissant sur `[]` vide.
`carouselPostCount`	Entier	`5`	Le nombre de publications affichées sur le carrousel de la page d’accueil.
`featuredPostCount`	Entier/Booléen	`5`	Le nombre de publications en vedette affichées dans la barre latérale. Désactivez-le en le réglant sur `false`.
`recentPostCount`	Entier/Booléen	`5`	Le nombre de publications récentes affichées dans la barre latérale. Désactivez-le en le réglant sur `false`.
`relatedPostCount`	Entier/Booléen	`5`	Le nombre de messages associés. Désactivez-le en le réglant sur `false`.
`categoryCount`	Entier/Booléen	`10`	Le nombre de catégories affichées dans la barre latérale. Désactivez-le en le réglant sur `false`.
`tagCount`	Entier/Booléen	`10`	Le nombre de balises affichées dans la barre latérale. Désactivez-le en le réglant sur `false`.
`seriesCount`	Entier	`10`	Le nombre de séries affiché dans la barre latérale.
`taxonomyPaginate`	Entier	`10`
`taxonomyPostCount`	Entier	`3`	Le nombre de publications de la taxonomie. Désactivez-le en le définissant sur false.
`taxonomySortingMethod`	Chaîne	-	Tri des taxonomies par `popularity`, tri alphabétique par défaut.
`countTaxonomyPosts`	Booléen	`false`	Comptez les postes de taxonomie.
`sidebarTaxonomies`	Tableau	`["series", "categories", "tags"]`	Les taxonomies dans la barre latérale.
`fullWidth`	Booléen	`false`	Pleine largeur.
`fullWidthInSections`	Objet	-	Spécifiez la pleine largeur pour des sections particulières, telles que `posts`, `docs`.
`fixedHeader`	Booléen	`true`	Activer/désactiver l’en-tête fixe.
`reward`	Objet	-	Widget de récompense, AKA Achetez-moi un widget de café.
`externalLinkIcon`	Booléen	`true`	S’il faut afficher les icônes après les liens externes.
`share`	Objet	-	Boutons de partage
`share.addThis`	Chaîne	-	Ajouter ceci de `pubid`.
`fontSize`	Objet	Tailles de police	Commentez ou supprimez ce paramètre pour désactiver le sélecteur de taille de police.
`fontSize.small`	Chaîne	`.9rem`	Petite taille de police.
`fontSize.extraSmall`	Chaîne	`.8rem`	Taille de police très petite.
`fontSize.large`	Chaîne	`1.1rem`	Grande taille de police.
`fontSize.extraLarge`	Chaîne	`1.2rem`	Taille de police très grande.
`social`	Objet	-	Liens sociaux.
`socialAnimation`	Booléen	`true`	Supprimez l’animation des liens sociaux si `false`.
`socialColor`	Booléen	`true`	Supprimez la couleur des liens sociaux si `false`.
`socialShare`	Booléen	`true`	Activez/désactivez le bouton de partage social intégré.
`searchBar`	Booléen	`true`	Activer/désactiver la barre de recherche intégrée.
`archive`	Objet	-	Archive.
`search`	Objet	-	Recherche.
`docsearch`	Objet	-	DocSearch
`docsearch.container`	Chaîne	`.search-button`
`docsearch.appId`	Chaîne	-
`docsearch.indexName`	Chaîne	-
`docsearch.apiKey`	Chaîne	-
`docsearch.debug`	Booléen	`false`
`docsearch.*`	Booléen/Chaîne/Nombre	-	https://docsearch.algolia.com/docs/api/
`algolia`	Objet	-	Voir Algolie
Barre supérieure des applications
`topAppBar`	Objet	-
`topAppBar.social`	Objet	-	Liens sociaux.
`topAppBar.colorToggle`	Booléen	`true`	Activer/désactiver la bascule couleur/mode.
`topAppBar.coloredInDark`	Booléen	`false`	Coloré en mode sombre.
`topAppBar.dropdownMenuToggle`	Booléen	`true`	Masquer la bascule du menu déroulant.
`topAppBar.expandBreakpoint`	chaîne	`xxl`	Développez le contenu au-dessus de ce point d’arrêt, par ex. `lg`, `xl`, `xxl`.
Vérification du site du webmaster
`siteVerification`	Objet	-
`siteVerification.google`	Chaîne	-	Google
`siteVerification.bing`	Chaîne	-	Bing
`siteVerification.baidu`	Chaîne	-	Baidu
`siteVerification.baiduUnion`	Chaîne	-	Union Baidu
`siteVerification.so`	Chaîne	-	Qihoo 360
`siteVerification.sogou`	Chaîne	-	Sogou
`siteVerification.shenma`	Chaîne	-	Shenma
Analytique
`analytics`	Objet	-	Configuration des analyses.
`analytics.baidu`	Chaîne	-	Baidu Analytics.
`analytics.plausible`	Chaîne	-	Domaines d’analyse plausibles. Plusieurs domaines séparés par une virgule.
`analytics.plausibleScript`	Chaîne	`https://plausible.io/js/script.js`	Spécifiez le script Plausible Analytics auto-hébergé ou script étendu.
`googleAdsense`	Chaîne	-	Google Adsense.
`customCSS`	Tableau	-	Voir aussi ressources personnalisées.
`customJS`	Tableau	-	Voir aussi ressources personnalisées.
`utterances`	Objet	-	Énoncés configuration.
`giscus`	Objet	-	Gisque configuration.
Licence Creative Commons
`creativeCommons`	Objet	-
`creativeCommons.by`	Booléen	`true`	Le mérite doit être attribué à vous, le créateur.
`creativeCommons.nc`	Booléen	`true`	Seule une utilisation non commerciale de votre œuvre est autorisée.
`creativeCommons.nd`	Booléen	`true`	Aucun dérivé ou adaptation de votre travail n’est autorisé.
`creativeCommons.sa`	Booléen	`true`	Les adaptations doivent être partagées dans les mêmes conditions.
Bloc de code
`codeBlock`	Objet	-
`codeBlock.maxLines`	Entier	`7`
`codeBlock.lineNos`	Booléen	`true`	`true`/`false` représente l’affichage/masquage des numéros de ligne par défaut.
Publier
`post`	Objet	-
`post.excerpt`	Chaîne	`Description`	La description sera utilisée comme extrait si elle n’est pas vide, pour utiliser des résumés comme extrait, vous devrez la définir explicitement comme chaîne vide.
`post.excerptMaxLength`	Entier	`320`
`post.copyright`	Booléen	`true`	S’il faut afficher la section des droits d’auteur sur chaque publication.
`post.plainifyExcerpt`	Booléen	`true`	Formater l’extrait en HTML si `false`.
`post.featuredImage`	Booléen	`false`	Affichez l’image sélectionnée au-dessus du contenu.
`post.numberifyHeadings`	Booléen	`false`	Comptez automatiquement les titres.
`post.numberifyHeadingsEndLevel`	Numéro	`6`	La profondeur des titres à compter.
`post.numberifyHeadingsSeparator`	Chaîne	-	Le séparateur entre le nombre et les titres.
`post.tocStyleType`	Chaîne	`none`	La propriété CSS `list-style-type` de la table des matières.
`post.imageTitleAsCaption`	Booléen	`false`	Utilisez le titre de l’image comme légende.
`post.panel`	Booléen	`true`	Allumez/éteignez le panneau de poteaux.
`post.nav`	Booléen	`true`	Activer/désactiver les navigations.
`post.readMoreFromContent`	Booléen	`false`	La position de la page après avoir cliqué sur le bouton Lire la suite, lire la suite du contenu si vrai. Par défaut, le début de la page. Il ne prend en charge que le fractionnement manuel des résumés via `

Structure de configuration

Sat, 27 Nov 2021 19:53:24 +0800

Comme le montre l’exemple de site, nous utilisons Répertoire de configuration pour maintenir une organisation plus simple et des paramètres spécifiques à l’environnement, cela est particulièrement utile sur les sites multilingues.

 1├── _default
 2│   ├── config.toml
 3│   ├── config.zh-hans.toml
 4│   ├── config.zh-hant.toml
 5│   ├── languages.toml
 6│   ├── markup.toml
 7│   ├── menu.toml
 8│   ├── menu.zh-hans.toml
 9│   ├── menu.zh-hant.toml
10│   ├── params.toml
11│   ├── params.zh-hans.toml
12│   ├── params.zh-hant.toml
13│   ├── server.toml
14└── production
15    ├── config.toml
16    └── params.toml

Hugo prend en charge plusieurs formats de configuration : TOML, YAML et JSON, modifiez-le à volonté.

Diagram Guide

Wed, 01 Sep 2021 11:36:50 +0800

This article offers a sample of basic diagram usage that can be used in Hugo content files.

Please see also Mermaid.

Traitement d'images

Sun, 15 Aug 2021 14:19:06 +0800

Cet article propose quelques cas d’utilisation pour montrer comment redimensionner, recadrer, ajuster, remplir et aligner des images.

Redimensionner les images

Nous utilisons la requête URL de l’image pour redimensionner les images. Par exemple :

Spécifiez la largeur et conservez le rapport

1![Resize](featured-sample.webp?width=300px)

Spécifiez la hauteur et le rapport de préservation

1![Resize](featured-sample.webp?height=200px)

Spécifiez la largeur et la hauteur

1![Resize](featured-sample.webp?width=300px&height=200px)

Code court d'alerte

Thu, 22 Oct 2020 00:00:00 +0000

Cet article montre comment utiliser le shortcode alert.

Important

Depuis v1.8.0, vous pouvez créer des alertes sans shortcode, voir alertes de citation de bloc.

Syntaxe

En ligne

1{{< alert [type] >}}INLINE ALERT{{< /alert >}}

Bloc

1{{< alert [type] >}}
2BLOCK ALERT
3{{< /alert >}}

Le paramètre type est optionnel. Par défaut, info, valeurs disponibles : info, success, warning et danger.

Codes courts des médias

Thu, 22 Oct 2020 00:00:00 +0000

Une description détaillée des codes courts des médias, tels que Bilibili, Tencent, Youku, iQiyi et Netease Music.

Bilibili

1{{< bilibili "video id" >}}

Tencent

1{{< tencentvideo "vid" >}}

Youku

1{{< youku "XNTQwMTgxMTE2" >}}

##iQiyi

1{{< iqiyi "vid" "tvid" >}}

Musique Netease

1{{< neteasemusic "id" [auto [type]] >}}

Paramètre	Descriptif
`auto`	Le `auto` contrôle s’il faut lire automatiquement. Booléen et facultatif, par défaut `false`.
`type`	Le paramètre `type` est facultatif. Par défaut, `2`.

asciinema

1{{< asciinema id >}}

Codes courts IDE en ligne

Thu, 22 Oct 2020 00:00:00 +0000

Une description détaillée des codes courts de l’IDE en ligne, tels que JSFiddle, CodePen, JSRun.

JSFiddle

1{{< jsfiddle "user/id" >}}

CodePen

1{{< codepen "id" >}}

##JSRun

1{{< jsrun "id" >}}

Résumé

1{{< gist razonyang f82a9399c2f682df36432f0ef828c451 >}}

Razon Yang on Martijn's Notes

Funding Widget

Mise en page de la page de destination

Qu’est-ce que c’est ?

Repository Widget

Snack-bar

Exporter

Mise à niveau

Migration vers la v1

Basculement de code

Utilisation

Exemple

Conditions préalables

Introduction

Objectifs

Fonctionnalités

Code court de la galerie

Utilisation

Dépannage

Rendu CSS incorrect

js.Build : Impossible de résoudre les dépendances

Installer via le module Hugo

Proxy (facultatif)

Disposition des documents

Mise en page

Menu

Propriétés de l’entrée de menu

Disposition de la FAQ

Prérequis

Données

Ajout de contenu

Sections principales

Questions préliminaires

Installer via le sous-module Git

Créer un nouveau site à partir de zéro

Visionneuse d'images

Paramètres du site

Regardez et ressentez

Icônes de favoris

Application Web progressive

Paramètres du site

Disposition de la recherche

Prérequis

Paramètres du site

Disposition des archives

Prérequis

Paramètres du site

Author Widget

Reward Widget

Social Links

Formulaire de contact

Prérequis

Actifs personnalisés

Actifs internes

Actifs externes

Comments Widget

Crochets

Aperçu

Utilisations

Impliquez-vous

Communauté

Contribuer

Règles

Configuration du site

Paramètres des pages

Paramètres du site

Structure de configuration

Diagram Guide

Traitement d'images

Redimensionner les images

Spécifiez la largeur et conservez le rapport

Spécifiez la hauteur et le rapport de préservation

Spécifiez la largeur et la hauteur

Code court d'alerte

Syntaxe

En ligne

Bloc

Codes courts des médias

Bilibili

Tencent