Docs on Martijn's Notes

Windows Server 2022 Home Lab — AD DS, DNS, CA and Secured RDP

Thu, 02 Apr 2026 10:00:00 +0200

This article describes the full build of a two-server Windows Server 2022 home lab in Proxmox VE. Together, the two virtual machines provide Active Directory Domain Services, DNS, Group Policy and a Certificate Authority (ADCS). RDP connections are secured with PKI certificates so the Mac Mini M1 management workstation connects without certificate warnings.

This is part 3 of the series on building a Windows DevOps lab in Proxmox. In part 1 I described how to create a VM, and in part 2 how to prepare the template.

Windows Server 2022 in Proxmox — Template Preparation

Tue, 31 Mar 2026 10:00:00 +0200

Download as Word document

This is part 2 of the series on building a Windows DevOps lab in Proxmox. In part 1 I described how to create the VM. In this article I prepare the VM as a reusable Proxmox template. All future VMs — the CA server, member servers and other roles — will be cloned from this template.

Important: After Sysprep, never start the VM again. If you do, the generalization is consumed and the template must be rebuilt from scratch.

Windows Server 2022 in Proxmox — Creating a VM

Mon, 30 Mar 2026 10:00:00 +0200

Download as Word document

In this article I describe step by step how I create a Windows Server 2022 VM in Proxmox VE 9.1.6. The guide is based on real-world experience and includes all corrections and lessons learned along the way. This is part 1 of a series on building a fully functional Windows DevOps lab in Proxmox.

Lab Environment

Component	Value
Proxmox host	macpro2013.local — Mac Pro 2013 Trashcan
Proxmox version	9.1.6
RAM	128 GB
Storage	3.6 TB NVMe (local-lvm pool)
Network bridge	vmbr0 — internal lab network (192.168.178.x)
Proxmox WebUI	https://192.168.178.205:8006

Why a CA Is Needed — the SSL Warning

Anyone who opens the Proxmox WebUI via macpro2013.local in Safari will immediately see a certificate warning. Proxmox uses a self-signed certificate by default.

Windows Server 2022 — Active Directory and DNS Installation

Fri, 27 Mar 2026 00:00:00 +0100

This article describes step by step how I installed Active Directory Domain Services (AD DS) and DNS on a Windows Server 2022 Datacenter VM in a VMware Fusion lab environment. The result is a fully functional domain controller for the domain lab.local, serving as the foundation for a Windows DevOps lab.

Environment

Component	Value
Virtualization	VMware Fusion (macOS)
Guest OS	Windows Server 2022 Datacenter (Desktop Experience)
Hostname	DC01
Domain name	lab.local
NetBIOS name	LAB
Lab network adapter	Ethernet1 — 172.16.37.10 (static IP)
Internet adapter	Ethernet0 — DHCP via VMware NAT

Step 1 — Configure Networking

Before installing Active Directory, the domain controller needs a static IP address. AD DS and DNS depend on a stable address.

Windows Packet Capturing for LDAPS Analysis

Sun, 18 Jan 2026 20:19:01 +0100

Troubleshooting LDAPS Connectivity: Using Built-in Windows Tools to Audit Firewall Compliance As organizations move toward more secure infrastructure, migrating from standard LDAP (Port 389) to LDAPS (Port 636) is a critical step. However, this transition often reveals “silent” failures where a network firewall might allow the initial connection but block the subsequent SSL/TLS handshake.

At Van den Boom Online, we understand that a smooth user experience starts with a robust backend. In this guide, we’ll show you how to perform packet capturing using only built-in Windows tools to verify if your traffic is reaching its destination or being dropped by security appliances.

Install Ansible AWX 24.6.1 in Minikube on Ubuntu 24.04.2 LTS in a single VM

Wed, 02 Jul 2025 13:35:25 +0200

Create a Ubuntu Virtual Machine with:
32 GB RAM
8 cores
120 GB HD

Step-by-step: Install AWX 24.6.1 on Minikube (Ubuntu)

🔧 1. System Preparation

1$ sudo apt update && sudo apt upgrade -y
2$ sudo apt install -y curl wget apt-transport-https ca-certificates gnupg lsb-release software-properties-common
3$ sudo timedatectl set-timezone Europe/Amsterdam

📦 2. Install Docker (Minikube backend)

 1$ curl -fsSL https://get.docker.com | sudo bash
 2$ sudo usermod -aG docker $USER
 3$ newgrp docker  # Activate group without reboot
 4
 5Enable and start Docker:
 6$ sudo systemctl enable docker
 7$ sudo systemctl start docker
 8
 9Test:
10$ docker run hello-world

🧱 3. Install Minikube

Install Red Hat Ansible Automation Platform 2.5 in a single VM

Sun, 29 Jun 2025 23:10:08 +0200

Attention: I have not been able to make it restart automatically after a reboot!
Perhaps it is better to look into making it run in Minikube?

Create a Red Hat 9 Virtual Machine with:
32 GB RAM
8 cores
120 GB HD

1$ sudo hostnamectl hostname aap.vandenboom.local

Download the Ansible Automation Platform 2.5 Containerized Setup Bundle from: https://access.redhat.com/downloads/content/480/ver=2.5/rhel---9/2.5/x86_64/product-software

 1$ tar zxvf ansible*.tar.gz
 2
 3$ sudo vim /etc/hosts
 4localhost aap.vandenboom.local
 5
 6$ ping aap.vandenboom.local
 7
 8$ sudo dnf install -y podman git python3-pip rsync tar jq unzip
 9
10$ podman login registry.redhat.io
11
12$ sudo dnf install ansible-core wget
13
14$ python3 -m pip install virtualenv
15$ pip3 install ansible
16
17$ vim inventory
18Edit the settings as seen below
19
20$ time ansible-playbook -i inventory ansible.containerized_installer.install -K

This is the contents of the file: ./inventory

A comparison of the resource usage of Kubernetes and OpenShift

Sat, 29 Mar 2025 15:15:43 +0100

When comparing Kubernetes with OpenShift (Red Hat’s Kubernetes-based platform), there are several key differences that affect how they handle resource consumption and system resources. While OpenShift is built on top of Kubernetes, there are additional functionalities and differences that impact the resource requirements:

Additional Functionalities in OpenShift OpenShift offers more out-of-the-box functionality than Kubernetes. This can lead to higher overhead, but also to more ease of use and integration:

Security: OpenShift adds extra security layers, such as Security Context Constraints (SCC) and SELinux restrictions, which may require additional resources for securing containers and applications.

The statement 'beware of Kubernetes, it burns through your resources'

Sat, 29 Mar 2025 15:00:43 +0100

The statement “beware of Kubernetes, it burns through your resources” refers to the fact that Kubernetes, although a powerful and flexible solution for orchestrating containerized applications, can consume a relatively large amount of system resources (such as CPU, memory, and storage).

This is due to several factors:

Kubernetes has overhead: Kubernetes itself runs as a cluster of various components, such as the API server, scheduler, controller manager, and more. These components run on the control plane and need to be managed. This adds extra overhead to your system, meaning that the resources Kubernetes itself uses are added on top of the applications you are actually running.

Golang / Go: The Smart Programming Language for Efficient Software and Concurrency

Sat, 22 Mar 2025 21:00:43 +0100

Concurrency might sound like a technical term, but it boils down to a program performing multiple tasks at once, as if it’s multitasking. Imagine you’re cooking: while the pasta is on the stove, you start the washing machine and charge your phone. Although you’re not doing everything at the exact same moment, it all happens smoothly side by side. Software that supports concurrency works the same way: a program can, for instance, download files, perform calculations, and send data to a server all at once. This multitasking makes the use of computing power more efficient and ensures faster, smoother performance.

Déployer sur la plateforme d'applications DigitalOcean

Sun, 21 Jan 2024 15:00:19 +0800

Exigences

Compte DigitalOcean

Créer un fichier Docker

Créez le Dockerfile à la racine de votre site.

Notre modèle de démarrage inclut déjà le Dockerfile.

 1###############
 2# Build Stage #
 3###############
 4FROM hugomods/hugo:exts as builder
 5
 6COPY . /src
 7
 8ENV HUGO_ENV=production
 9
10# Base URL
11ARG HUGO_BASEURL=
12ENV HUGO_BASEURL=${HUGO_BASEURL}
13
14# Module Proxy
15ARG HUGO_MODULE_PROXY=
16ENV HUGO_MODULE_PROXY=${HUGO_MODULE_PROXY}
17
18# NPM mirrors, such as https://registry.npmmirror.com
19ARG NPM_CONFIG_REGISTRY=
20ENV NPM_CONFIG_REGISTRY=${NPM_CONFIG_REGISTRY}
21
22# Install dependencies
23RUN npm ci
24
25# Build site
26RUN hugo --minify --gc --enableGitInfo
27
28# Set the fallback 404 page if defaultContentLanguageInSubdir is enabled, please replace the `en` with your default language code.
29# RUN cp ./public/en/404.html ./public/404.html
30
31###############
32# Final Stage #
33###############
34FROM hugomods/hugo:nginx
35COPY --from=builder /src/public /site

Le /site est le répertoire de sortie des fichiers statiques, qui seront utilisés ultérieurement.

Créer une application

Accédez à DigitalOcean Dashboard -> Left Panel -> Apps -> Create App, puis remplissez le formulaire comme suit.

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.

Basculer

Sat, 21 Jan 2023 23:22:11 +0800

Le shortcode toggle est similaire au code-toggle, mais il est plus générique.

Utilisation

1{{< toggle myToggleName >}}
2  
3  {{< toggle-item myToggleItemName >}}
4    CONTENT HERE, MARKDOWN and SHORTCODE are support.
5  {{< /toggle-item >}}
6
7  ...
8
9{{< /toggle >}}

Le myToggleName DOIT être unique par page.
Le myToggleItemName DOIT être unique par bascule.

Exemple

Fou

Barre

1faire écho à "Bonjour tout le monde"

1console.log("Bonjour tout le monde")

1SELECT "Bonjour tout le monde"

Algolie

Sun, 27 Nov 2022 19:53:12 +0800

La recherche des clients deviendra de plus en plus lente à mesure que le contenu augmente, il est raisonnable de disposer d’un service de recherche à distance pour gérer les demandes de recherche provenant d’un grand site.

Algolia est un service de recherche populaire qui propose un forfait gratuit (10 000 enregistrements, 10 000 requêtes par mois). Après avoir lu cet article, vous apprendrez comment configurer Algolia et télécharger automatiquement les fichiers d’index.

Code court IFrame

Sat, 19 Nov 2022 13:00:48 +0800

Une description détaillée du shortcode iframe.

Utilisation

1{{< iframe "URL" >}}

ou via des paramètres nommés

1{{< iframe 
2    src="URL"
3    trigger=manual
4    loadButtonText="load_video"
5>}}

Paramètre	Par défaut	Descriptif
`src`	-	L’URL de l’iframe. Requis.
`trigger`	`auto`	Définissez-le comme `manual` si vous souhaitez charger l’iframe manuellement.
`lazyLoading`	`true`
`loadButtonText`	`load`	Le texte du bouton de chargement, i18n, est pris en charge.
`loadInfo`	-	Les informations affichées sous le bouton de chargement. La démarque est prise en charge.
`fullscreen`	`true`	Afficher/Masquer le bouton plein écran.

Exemples

OuvrirStreetMap

Jeu

Veuillez noter que l’iframe chargera le jeu depuis d’autres sites.

Code court du jeu

Tue, 15 Nov 2022 21:16:48 +0800

Une description détaillée du shortcode du jeu.

Utilisation

1{{< game "GAME_URL" >}}

ou via des paramètres nommés

Paramètre	Par défaut	Descriptif
`src`	-	L’URL du jeu. Requis.
`trigger`	`auto`	Définissez-le comme `manual` si vous souhaitez charger le jeu manuellement.
`loadInfo`	-	Les informations affichées sous le bouton de chargement. La démarque est prise en charge.

1{{< game
2    src="GAME_URL"
3    trigger=manual
4    loadInfo="The Game Information."
5>}}

Exemples

Chargement automatique

Chargement manuel

The Game Information.

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.

Déployer sur les pages GitLab

Sat, 27 Aug 2022 10:30:23 +0800

Cet article explique comment déployer des sites sur Pages GitLab à l’aide de GitLab CI.

Flux de travail

Créez .gitlab-ci.yml à la racine de votre site avec le contenu suivant :

 1image: registry.gitlab.com/pages/hugo/hugo_extended:latest
 2
 3variables:
 4  HUGO_ENV: production
 5
 6default:
 7  before_script:
 8    - apk add --update --no-cache git go npm
 9    - npm install
10
11test:
12  script:
13    - hugo --gc --minify
14  rules:
15    - if: $CI_COMMIT_REF_NAME != $CI_DEFAULT_BRANCH
16
17pages:
18  script:
19    - hugo --gc --minify
20  artifacts:
21    paths:
22      - public
23  rules:
24    - if: $CI_COMMIT_REF_NAME == $CI_DEFAULT_BRANCH

L’exemple ci-dessus déploiera uniquement la branche par défaut sur GitLab Pages et exécutera un test sur le reste des branches.

Présentation du déploiement

Wed, 27 Jul 2022 18:00:25 +0800

Dans cette section, nous allons parler des points clés des déploiements pour éviter la plupart des problèmes lors du déploiement.

Outils de création

Comme Conditions préalables l’a mentionné, vous devrez configurer ces outils sur votre environnement de déploiement.

Installation des dépendances

Nous utilisons NPM pour gérer les dépendances du thème, il est nécessaire d’installer les dépendances sur l’environnement de déploiement, car nous NE DEVRONS PAS** valider le dossier node_modules.

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.

Sticky Widgets

Wed, 27 Jul 2022 08:54:43 +0800

When the page is too long, the sidebar will disappear with scrolling and the page will not look as neat and beautiful. So this article will introduce how to use sticky widgets to avoid this problem.

Mode multilingue

Wed, 27 Jul 2022 08:06:06 +0800

HBS prend en charge plusieurs langues, telles que l’anglais, le chinois simplifié, le chinois traditionnel, le français, le russe, etc.

Vous pouvez ajouter vos propres traductions sur : Hugo-thème-bootstrap/i18n

Langues prises en charge

Language	Code
English	`en`
Simplified Chinese	`zh-hans`(Recommended), `zh-cn`
Traditional Chinese	`zh-hant`(Recommended), `zh-tw`, `zh-hk`
Spanish	`es`
Arabic	`ar`
German	`de`
French	`fr`
Indonesian	`id`
Japanese	`ja`
Polish	`pl`
Portuguese	`pt`
Russian	`ru`
Ukrainian	`uk`
Uzbek	`uz`

##Configuration

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.

Codes courts de texte

Fri, 15 Jul 2022 01:00:43 +0800

Dans cet article, nous explorerons quelques codes courts pour le texte, tels que l’alignement, la transformation et la sélection.

Transformation de texte

texte en minuscules.

TEXTE EN MAJUSCULE.

Texte en majuscule.

Alignement du texte

Alignez le texte au début.

Alignez le texte au centre.

Alignez le texte à la fin.

Sélection de texte

Ce paragraphe sera entièrement sélectionné lorsque l'utilisateur cliquera dessus.

Ce paragraphe ne sera pas sélectionnable lorsque l'utilisateur cliquera dessus.

Construire une image Docker

Wed, 13 Jul 2022 10:30:29 +0800

Cet article détaillera comment créer une image Docker.

Principe

Utilisez Hugo pour créer le site et générer des fichiers statiques.
Utilisez Nginx comme serveur pour gérer les requêtes.

Fichier Docker

Créez un Dockerfile à la racine du site.

 1###############
 2# Build Stage #
 3###############
 4FROM razonyang/hugo as builder
 5
 6WORKDIR /src
 7COPY . /src
 8
 9ARG HUGO_ENV=production
10ENV HUGO_ENV=${HUGO_ENV}
11
12# Base URL
13ARG HUGO_BASEURL=/
14ENV HUGO_BASEURL=${HUGO_BASEURL}
15
16# Module Proxy
17ARG HUGO_MODULE_PROXY=
18ENV HUGO_MODULE_PROXY=${HUGO_MODULE_PROXY}
19
20# NPM mirrors, such as https://registry.npmmirror.com
21ARG NPM_CONFIG_REGISTRY=
22ENV NPM_CONFIG_REGISTRY=${NPM_CONFIG_REGISTRY}
23
24# Install dependencies
25RUN npm install
26RUN npm install -g @fullhuman/postcss-purgecss rtlcss
27
28# Build site
29RUN hugo --minify --gc --enableGitInfo
30
31# Set the fallback 404 page if defaultContentLanguageInSubdir is enabled, please replace the `en` with your default language code.
32# RUN cp ./public/en/404.html ./public/404.html
33
34###############
35# Final Stage #
36###############
37FROM nginx
38COPY --from=builder /src/public /app
39COPY deploy/nginx/default.conf /etc/nginx/conf.d/default.conf

La construction comporte deux étapes, une étape de construction et une étape de publication. L’étape de publication contient uniquement les fichiers statiques générés, en gardant la taille de l’image Docker aussi petite que possible.
Si defaultContentLanguageInSubdir est activé, veuillez le décommenter et le modifier à la demande.
Le paramètre HUGO_BASEURL permet de spécifier le baseURL du site lors du build, et est généralement utilisé lorsque le baseURL est différent de la configuration, vous pouvez donc le supprimer vous-même si vous n’en avez pas besoin.
HUGO_MODULE_PROXY et NPM_CONFIG_REGISTRY sont des paramètres de construction facultatifs qui peuvent être supprimés s’ils ne sont pas nécessaires.

##Nginx

Déployer sur les pages GitHub

Wed, 13 Jul 2022 10:30:23 +0800

Cet article explique comment déployer des sites sur Pages GitHub à l’aide des actions GitHub.

Flux de travail

Créez .github/workflows/gh-pages.yml à la racine du site.

 1name: GitHub Pages
 2on:
 3  push:
 4    branches:
 5      - main
 6permissions:
 7  contents: write
 8jobs:
 9  build-and-deploy:
10    concurrency: ci-${{ github.ref }}
11    runs-on: ubuntu-latest
12    steps:
13      - name: Checkout 🛎️
14        uses: actions/checkout@v3
15        with:
16          submodules: true
17          fetch-depth: 0
18
19      - name: Setup Node
20        uses: actions/setup-node@v3
21        with:
22          node-version: '16'
23
24      - name: Cache dependencies
25        uses: actions/cache@v2
26        with:
27          path: ~/.npm
28          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
29          restore-keys: |
30            ${{ runner.os }}-node-            
31
32      - name: Install dependencies
33        run: npm install
34
35      - name: Setup Hugo
36        uses: peaceiris/actions-hugo@v2
37        with:
38          hugo-version: 'latest'
39          extended: true
40
41      - name: Build
42        run: hugo --minify --gc --enableGitInfo
43
44      - name: Deploy 🚀
45        uses: peaceiris/actions-gh-pages@v3
46        with:
47          github_token: ${{ secrets.GITHUB_TOKEN }}
48          publish_dir: ./public

Voir aussi Flux de travail des pages GitHub du modèle de démarrage。

Déployer sur les pages Cloudflare

Tue, 12 Jul 2022 20:06:24 +0800

Cet article vous montre comment déployer votre site sur Pages Cloudflare.

Création d’un projet

Nous allons commencer par créer un projet Git et remplir les informations appropriées.

Créer une commande

1npm i && hugo --gc --minify --enableGitInfo -b https://hbs-skeleton.pages.dev

npm i est un raccourci vers npm install, qui installe les dépendances utilisées lors de la construction du site.
-b https://hbs-skeleton.pages.dev spécifie baseURL, veuillez le remplacer vous-même. Vous pouvez également l’enregistrer dans un fichier de configuration au lieu de le spécifier dans la commande build.

Variables d’environnement

Nom	Valeur
`HUGO_VERSION`	`0.147.9`
`NODE_VERSION`	`16`

404 Pages

Cloudflare est suffisamment intelligent pour utiliser les pages 404 les mieux adaptées, même pour les sites multilingues, et fonctionne sans configuration supplémentaire.

Déployer sur Netlify

Tue, 12 Jul 2022 14:20:49 +0800

Cet article montre comment déployer votre site sur Netlifier.

Configuration Netlify

Créez un netlify.toml à la racine du site：

 1[build]
 2  publish = "public"
 3
 4[build.environment]
 5  NODE_VERSION = "17.6.0"
 6  HUGO_VERSION = "0.147.9"
 7  HUGO_ENABLEGITINFO = "true"
 8  GO_VERSION = "1.17.7"
 9
10[context.production]
11  command = "npm install && hugo --minify"
12
13[context.production.environment]
14  HUGO_ENV = "production"
15
16[[headers]]
17  for = "/*"
18  [headers.values]
19    Referrer-Policy = "strict-origin-when-cross-origin"
20    X-Content-Type-Options = "nosniff"
21    X-Frame-Options = "deny"
22    X-XSS-Protection = "1; mode=block"
23
24[[redirects]]
25  from = "/:lang/*"
26  to = "/:lang/404.html"
27  status = 404
28
29[[redirects]]
30  from = "/*"
31  to = "/en/404.html" # Replace the "en" to your default language code if "defaultContentLanguageInSubdir" is enabled, otherwise use "/404.html" instead.
32  status = 404

Voir aussi Configuration Netlify du modèle de démarrage.

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" >}}

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 :

Commencer

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

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)

Markdown Syntax Guide

Mon, 09 Nov 2020 00:00:00 +0000

This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.

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 >}}