Support de Mermaid

Ce thème est construit avec le support de Mermaid propulsé par mermaid-js. Pour activer mermaid pour une page, vous devez mettre mermaid: true dans le front matter de votre page. Par exemple, cette page a le front matter suivant: title: "Support de Mermaid" date: 2022-03-14T06:15:35+06:00 menu: sidebar: name: Mermaid identifier: writing-post-mermaid parent: writing-post weight: 60 mermaid: true Ensuite, vous pouvez utiliser le shortcode mermaid pour ajouter du contenu mermaid. Par exemple: {{< mermaid align="center">}} # Votre contenu mermaid ici {{< /mermaid >}} Le shortcode mermaid accepte les paramètres suivants:

Commentaires

Commentaires Ce thème supporte les commentaires dans les billets. Actuellement, il supporte les plugins de commentaires suivants: Disqus Valine Utterances Giscus Disqus Disqus est un plugin de commentaires très populaire. Après vous êtes inscrit sur Disqus vous aurez besoin de fournir votre pseudonyme sous la section params.features.comment de votre fichier hugo.yaml comme ci-après: params: features: comment: enable: true disqus: shortName: <your-disqus-shortname> Valine Valine semble être un plugin de commentaires chinois. Vous pouvez activer le plugin de commentaires valine en ajoutant une section valine sous params.features.comments de votre fichier hugo.yaml comme ci-après:

Les liens de soutien/donation

Ce thème supporte l’ajout de liens de soutien/donation sur votre site. Actuellement, les liens de soutien supportés sont: Ko-fi Buy Me a Coffee Ko-fi Vous pouvez ajouter votre button flottant ko-fi sur votre site web. Pour ajouter le button flottant, ajoutez une section support sous la section params.features dans votre fichier hugo.yaml: params: features: support: enabled: true kofi: user: <your ko-fi user id> text: Tip Me textColor: '#f9fafc' backgroundColor: '#248aaa' Buy Me a Coffee Vous pouvez ajouter votre bouton flottant “Buy Me a Coffee” sur votre site web. Pour ajoutez une section support sous la section params.features dans votre fichier hugo.yaml:

Lien externe sur barre latérale

Préparer Votre Site

Dans ce billet, nous allons créer un site hugo de zéro. Nous le configurerons avec le thème toha, le rendrons multilingue, et ajouterons quelques exemples de billets. A la fin de ce billet, vous devriez être capable d’exécuter pleinement un site Hugo avec le thème Toha localement. Si vous voulez démarrer d’une base, vous pouvez juste cloner le dépôt hugo-toha/hugo-toha.github.io, renommez-le et mettez-le à jour avec vos propres données. Ce dépôt a déjà été configuré pour déployer sur Github Pages et Netlify.

Déployer dans Github Pages

Dans ce billet, nous allons déployer le site que nous avons créé dans le précédent billet dans Github Pages. D’abord, assurez-vous que le nom de votre dépôt soit <your username>.github.io. Ensuite, commitez n’importe quelles modifications locales et poussez dans Github. Créer une branche gh-pages D’abord, créez une nouvelle branche nommée gh-pages. Github définira automatiquement les configurations pour Github Pages quand il verra une branche avec ce nom. # Création de la branche the gh-pages $ git checkout -b gh-pages # push de la branche source sur Github $ git push gh-pages gh-pages Activer Github Action Nous allons automatiser le processus de déploiement en utilisant Github Actions. D’abord, assurez-vous que Github Action soit activé dans votre dépôt. Allez dans Settings > Actions de votre dépôt assurez-vous que Action permissions est configuré sur Allow all actions. Ici, une capture d’écran du paramètre décrit.

Déployer dans Netlify

Netlify offre un facile et excellent processus pour le déploiement d’un site statique hugo. Vous pouvez déployer votre site en quelques clics. Contrairement à Github Pages, vous pouvez nommer votre dépôt comme vous le souhaitez. Vous pouvez également personnaliser l’URL du site. Dans ce billet, nous montrerons le processus pas-à-pas d’un déploiement de site hugo avec Netlify. Ajouter une configuration de Netlify D’abord, créons un ficher netlify.toml à la racine de votre dépôt et ajoutez-y la configuration suivante:

Automatiser la mise à jour du thème

Pour garantir que votre site bénéfie des fonctionnalités et correctifs les plus récents, il est crucial de le maintenir à jour avec la dernière version du thème. Cet article vous guidera tout au long du processus de mise en place du workflow Github qui mettra à jour automatiquement la version du thème. Cette action réalisera quotidiennement une vérification d’une mise à jour du thème. Si une mise à jour est détectée, cela va générer une PR qui mettra à jour votre site avec la version du thème la plus récente.

Configuration des paramètres du site

Après l’installation du thème, quand vous lancez le site pour la première fois, cela démarrera avec les paramètres par défaut. Cela devrait avoir l’apparence du site d’exemple excepté qu’il n’a pas de sections sur la page d’accueil. Ces sections sont ajoutées via quelques fichiers de données. Dans les prochains billets, je vais vous montrer comment vous pouvez ajouter ces sections en fournissant des fichiers de données. Dans ce billet, je vais vous montrer comment vous pouvez changer les paramètres du site pour modifier l’arrière plan, le logo, les informations de l’auteur, et activer/désactiver différentes fonctionnalités.

Configuration de la section A propos

L’objet de la section A propos est de fournir une brève introduction sur vous sur votre site web. Dans ce billet, nous vous guiderons sur la façon de configurer la section A propos. Pour une référence complète, consultez s’il vous plaît l’extrait du fichier about.yaml. Pour commencer, créez un fichier about.yaml dans le répertoire data/fr/sections de votre site web. Suivez ensuite, les instructions ci-dessous: Ajouter les informations de section Ajoutez les métadonnées de la section suivante dans votre fichier about.yaml:

Configuration Section Compétences

La section Compétences est conçue pour mettre en valeur vos compétences et fournir des informations sur votre expertise pour chaque compétence. Dans ce billet, nous vous guiderons sur la façon de configurer la section compétences de votre site. Pour une référence complète, consultez s’il vous plaît cet échantillon du fichier skills.yaml. Pour commencer, créez un fichier skills.yaml dans le répertoire data/fr/sections de votre site. Ensuite, suivez les instructions ci-dessous: Ajouter les informations de section Ajoutez les métadonnées de la section à votre fichier skills.yaml:

Configuration de la section Etudes

La section Etude a été conçue pour mettre en valeur votre parcours d’étude. Dans ce billet, nous vous guiderons sur la façon de configurer la section Etude de votre site. Pour une référence complète, consultez s’il vous plaît l’extrait du fichier education.yaml. Pour commencer, créez un nouveau fichier nommé education.yaml dans le répertoire data/fr/sections de votre site. Ensuite, suivez les instructions ci-dessous. Ajouter les informations de section Ajoutez les métadonnées de la section suivante dans votre fichier education.yaml: