Toha

Personnalisation de la disposition

Wed, 09 Oct 2024 18:46:23 +0600

Si vous personnalisez la mise en page d’un composant existant, vous ne recevrez plus les futures mises à jour de ce composant lorsque le thème sera mis à jour. Vous devrez mettre à jour manuellement le composant dans votre dépôt.

Dans ce tutoriel, je vais vous guider sur la manière de personnaliser la mise en page d’un thème. J’ai personnellement suivi le processus et je partagerai mes expériences afin de vous faciliter la tâche.

Comment contribuer ?

Fri, 19 Jan 2024 02:30:00 +0600

Les manières de contribuer

Vous pouvez contribuer à ce thème de différentes manières.

Code

Les Pull Requests sont les bienvenues et je serai heureux de les examiner. Suivez simplement les principes suivants:

Gardez les simple.
Gardez les cohérentes avec le design de l’UI.
Utilisez le moins de dépendances possibles.
Soyez patient.

Tests et rapport des problèmes

Vous pouvez signaler un bug
Vous pouvez aussi faire une demande de fonctionnalité
Partager vos réflexions

Documentation

Vous pouvez aussi contribuer à la documentation du thème par :

Comment ajouter un langage non supporté ?

Mon, 15 Jan 2024 06:20:50 +0600

Si vous voulez traduire vers une langue non supportée, vous pouvez traduire les éléments de l’UI.

Créer un fichier `i18n`

Pour ce faire, vous avez à créer un répertoire i18n à l’intérieur de la racine de votre site, le répertoire où vous pouvez trouver le fichier hugo.yaml, et les répertoires tel que data, content, etc.

Après cela, vous pouvez créer le fichier <langage code>.toml dans le répertoire i18n. Dans ce répertoire, vous pouvez trouver tous les codes de langue avec le drapeau qui apparaît avec ce code.

Comment traduire des billets ?

Mon, 15 Jan 2024 06:20:50 +0600

Ce thème prend en charge plusieurs langues.

Avant de commencer la traduction d’un billet, assurez-vous que vous avez activé la langue sur votre site. Si ce n’est pas le cas, vous pouvez suivre la section Ajout d'une langue à votre site du guide Comment traduire les données du site ?

Création du billet

Lorsque vous avez ajouté la langue désirée à votre site web, sachez que vous pouvez traduire un billet dans cette langue. Nous allons supposer que vous voulez traduire un billet existant.

Comment traduire les données du site ?

Mon, 15 Jan 2024 06:20:50 +0600

Ce thème prend en charge plusieurs langues.

Ajouter une langue à votre site

L’ajout d’une langue à votre site traduira l’interface dans cette langue (incluant les boutons, la barre de navigation, etc.).

Obtenir le code de la langue

Pour traduire votre site, vous aurez besoin du code de la langue. Le tableau suivant contient les langues supportées ainsi que leurs codes:

Languages	Code
English	`en` / none
বাংলা	`bn`
Français	`fr`
Indonesian	`id`
Deutsch	`de`
Español	`es`
简体中文	`zh-cn` / `zh-tw`
हिन्दी	`hi`
Italiano	`it`
日本語	`jp`
한국어	`ko`
русский	`ru`
suomi	`fi`
Tiếng Việt	`vn`
Turkish	`tr`
Arabic (العربية)	`ar`
Português Europeu	`pt-pt`
Català	`ad`
Português Brasileiro	`pt-br`
Dutch	`nl`
Hebrew	`he`

Pour la liste complète des langages supportées, consultez s’il vous plaît le fichier README du dépôt Toha.

Ajouter une nouvelle section

Sat, 13 Jan 2024 22:30:50 +0600

Si les sections par défaut, modèles, et composants ne satisfont pas vos besoins, vous pouvez facilemement ajouter de nouvelles sections, modèles, et composants à votre site. Ce guide montrera comment ajouter une nouvelle section à votre site.

Etape 1 : Ajouter du fichier de mise en page

Pour ajouter une nouvelle section à votre site, vous devez créer un fichier de mise en page dans le répertoire layout/partials/sections. Le fichier doit être nommé d’après le nom de la section. Par exemple, si vous voulez ajouter une section contact avec le formulaire de contact, créez un fichier nommé contact.html. Utilisez le modèle suivants pour le fichier contact.html.

Personnalisation CSS

Sat, 13 Jan 2024 22:00:50 +0600

Ce thème vous permet de personnaliser l’apparence de votre site et ses composants par une surcharge du CSS par defaut. Ce guide vous montrera comment surcharger le schéma de couleurs et personnaliser les CSS des composants individuels.

Le thème utilise Sass pour générer du CSS. Si vous n’êtes pas familier avec Sass, vous pouvez en apprendre plus à son sujet ici.

Surcharger les variables des couleurs du thème

Si vous voulez changer le schéma de couleurs par défaut de votre thème, vous pouvez surcharger les variables de couleur du thème. Pour surcharger les variables de couleur du thème, vous devrez créer un fichier nommé variables.scss dans le répertoire assets/styles de votre site. Puis copiez le contenu du fichier variables.scss par défaut et collez le dans votre fichier de personnalisation variables.scss. Ici, seule la section $theme du fichier variables.scss par defaut est montré ci-dessous:

Migrer de la V3 à la V4

Fri, 05 Jan 2024 02:30:00 +0600

Toha V4 a introduit de nombreux changements structurant en terme d’utilisation et de configuration du thème. Ce guide vous aidera à passer de la version v3 à la version v4 du thème. S’il vous plaît, veuillez vérifier cette note de publication pour compléter le changelog.

Dans ce guide, je vais vous guider à travers les étapes pour migrer de la version 3 à la version 4 du thème Toha. Ce guide est basé sur le guide de migration écrit par Alexandre Neto dans cette issue. Commençons !

Les Shortcodes

Sun, 05 Nov 2023 14:06:25 +0200

Ce billet d’échantillon est destiné à tester les éléments suivants :

Différents blocs d’alerte.
Manipulation d’une image.
Différents shortcodes.

Alerte

Les alertes suivantes sont disponibles dans ce thème.

Succès

code

{{< alert type="success" >}}
This is sample alert with `type="success"`.
{{< /alert >}}

Résultat:

This is sample alert with type="success".

Danger

Code:

{{< alert type="danger" >}}
This is sample alert with `type="danger"`.
{{< /alert >}}

Résultat:

This is sample alert with type="danger".

Warning

Code:

Caractéristiques

Sun, 05 Nov 2023 12:02:54 +0200

Ce thème a été conçu à partir d’un point de préférence personnel. En tant que développeur, je veux organiser mon portfolio de façon à ce qu’il reflète au mieux mes compétences. Donc, ce thème peut ou non répondre à vos besoins, mais je serai heureux d’avoir vos commentaires.

Ce billet vous donnera un aperçu des fonctionnalités intégrées à ce thème.

Design minimaliste

Ce thème a été conçu pour être minimaliste et beau. Le schéma de couleur a été choisi pour être simple et puissant également. La page billet a été conçue pour être aussi distraillante que possible. Merci à Anup Deb pour ses conseils en design.

Démarrage rapide

Tue, 09 Aug 2022 00:00:00 +0600

Salutation ! Merci d’avoir décidé d’utiliser ce thème. Dans ce guide, Je vais vous montrer comment commencer rapidement avec ce thème.

Ici, je vais supposer que vous voulez commencer un nouveau site Hugo en utilisant ce thème. Si vous utilisez déjà Hugo pour votre site, alors vous devez savoir comment utiliser un thème. Dans ce cas, veuillez suivre ce dépôt échantillon pour plus de détails.

Le nécessaire

Pour exécuter ce thème localement, vous devez avoir les outils suivants installés.

Activer le mode sombre

Sun, 12 Jun 2022 01:30:50 +0600

Activation du mode sombre

Toha v3.6.0 a introduit un thème sombre. Un grand merci à @donfiguerres. Ce guide vous montrera comment l’activer.

Tout d’abord, assurez-vous d’avoir mis à jour la version du thème en v3.6.0 ou plus. Ensuite, ajoutez la section suivante sous la section params de votre fichier hugo.yaml.

 darkMode:
 enable: true
 provider: darkreader
 default: system

Ici,

enable: Spécifie ou non l’activation du mode sombre.
provider: Spécifie le fournisseur sous-jacent qui sera utilisé pour fournir la fonctionnalité du mode sombre. Actuellement, il ne supporte que darkreader. Nous pourrions soutenir d’autres fournisseurs dans le futur.
default: Spécifie quel thème utiliser par défaut. Ca supporte les valeurs system, light et dark.

Support de Mermaid

Mon, 14 Mar 2022 06:15:35 +0600

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

Mon, 14 Mar 2022 06:00:23 +0600

Commentaires

Ce thème supporte les commentaires dans les billets. Actuellement, il supporte les plugins de commentaires suivants:

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

Mon, 14 Mar 2022 06:00:23 +0600

Ce thème supporte l’ajout de liens de soutien/donation sur votre site. Actuellement, les liens de soutien supportés sont:

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

Mon, 14 Mar 2022 06:00:23 +0600

Préparer Votre Site

Mon, 08 Jun 2020 23:00:20 +0600

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

Mon, 08 Jun 2020 22:00:20 +0600

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

Mon, 08 Jun 2020 21:00:15 +0600

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

Mon, 08 Jun 2020 20:00:15 +0600

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

Mon, 08 Jun 2020 06:20:55 +0600

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

Mon, 08 Jun 2020 06:20:50 +0600

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

Mon, 08 Jun 2020 06:20:45 +0600

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

Mon, 08 Jun 2020 06:20:40 +0600

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:

Configuration de la section Expériences

Mon, 08 Jun 2020 06:20:40 +0600

La section expériences a été conçue pour mettre en valeur votre carrière et mettre en évidence les responsabilités que vous avez assumées tout au long de votre parcours professionnel. Dans ce billet, nous vous guiderons sur la façon de configurer la section Expériences de votre site. Pour une référence complète, consultez s’il vous plaît l’extrait du fichier experiences.yaml.

Pour commencer, créez un nouveau fichier nommé experiences.yaml dans le répertoire data/fr/sections de votre site. Ensuite, suivez les instructions ci-dessous:

Configuration de la section Projets

Mon, 08 Jun 2020 06:20:35 +0600

L’objet de la section Projets est de présenter efficacement vos projets. Dans ce billet, nous vous guiderons sur la façon de configurer la section Projets de votre site. Pour une référence complète, consultez s’il vous plaît l’extrait du fichier projects.yaml.

Pour commencer, créez un nouveau fichier nommé projects.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 projects.yaml:

Configuration Section Billets Récents

Mon, 08 Jun 2020 06:20:34 +0600

La section Billets récents est utilisée pour mettre en valeur les derniers billets de votre contenu. Pour activer cette section, créez une fichier recent-posts.yaml dans votre répertoire data/fr/sections et incluez le contenu suivant:

# section information
section:
 name: Billets récents # Titre de la section (par défaut: "" )
 id: recent-posts # URL id/slug de section *valeur à conserver & obligatoire*
 enable: true # Booléen pour déterminer si la section est activée (par défaut: false)
 weight: 6 # # Ordre d'affichage de la section (par defaut: alphabetique suivi par poids)
 showOnNavbar: # true Booléen pour déterminer si le lien doit être affiché pour cette section dans la barre de navigation
 hideTitle: true # Peut optionnellement masquer les titres de la section (defaut: false)
 numShow: 4 # Peut optionnellement augmenter le nombre de billets à afficher (defaut: 3)
 showMoreButton: false # Peu optionnellement afficher le bouton 'Plus de billets' (default: false)

Configuration de la section Réalisations

Mon, 08 Jun 2020 06:20:30 +0600

La section Réalisations a été conçue pour afficher vos réalisations dans le format d’une galerie attrayante. Ce guide vous accompagnera à travers le processus de configuration de la section Réalisations sur votre site. Pour une référence complète, consultez s’il vous plaît l’extrait du fichier achievements.yaml.

Pour commencer, créez un nouveau fichier nommé achievements.yaml dans le répertoire data/fr/sections de votre site web. Ensuite, suivez les instructions ci-dessous:

Ajouter les informations de section

Ajoutez les métadonnées de la section suivante dans votre fichier achievements.yaml:

Créer une sous-catégorie

Mon, 08 Jun 2020 06:15:50 +0600

Billet complet à venir prochainement…

Front Matter

Mon, 08 Jun 2020 06:15:45 +0600

Article complet à venir…

Guide Syntaxique Markdown

Mon, 08 Jun 2020 06:15:40 +0600

Cet article propose un échantillon des syntaxes de base du Markdown qui peut être utilisé dans les fichiers de contenu d’Hugo, et montre également des balises HTML de base décorées avec CSS dans un thème Hugo.

Paramètres de type Maths

Mon, 08 Jun 2020 06:15:35 +0600

La notation Mathématique dans un projet Hugo peut être activée en utilisant des librairies JavaScript tierces.

Contenu riche

Mon, 08 Jun 2020 06:15:30 +0600

Hugo est livré avec quelques Shortcode intégrés pour du contenu riche, ainsi qu’une configuration pour le respect de la vie privée et un ensemble de Shortcode simples qui active des versions statiques et sans JS de différents médias sociaux.

Utilisation d'Emoji

Mon, 08 Jun 2020 06:15:25 +0600

Emoji peut être activé dans un projet Hugo de plusieurs façons.

Analytiques

Mon, 08 Jun 2020 06:00:23 +0600

Analytiques

Ce thème a été construit avec le support de divers outils d’analyse. Actuellement, il prend en charge les analyses suivantes:

Pour une liste complète des analytiques supportés, référez-vous au fichier d’échantillon hugo.yaml.

Avertissement: Lors de l’ajout d’analyses, vous devriez prendre en considération la législation locale pour voir si une bannière de confidentialité est nécessaire pour informer les visiteurs du suivi de ses données personnelles. En général (pas un conseil juridique), les méthodes anonymes et respectueuses de la vie privée telles que counter.dev et GoatCounter n’ont pas besoin d’une bannière, car elles ne collectent pas de données personnelles identifiables.

Goat Counter

GoatCounter est la méthode d’analyse la plus complète, simple et respectueuse de la vie privée supportée dans Toha. Ces scripts traquent les pages les plus vues, le nombre total d’utilisateur, et plus encore, tout en étant open source !

Search Results

Tue, 08 Jun 2010 08:06:25 +0600

This file exists solely to respond to /search URL with the related search layout template.

No content shown here is rendered, all content is based in the template layouts/page/search.html

Setting a very low sitemap priority will tell search engines this is not important content.

This implementation uses Fusejs and mark.js

Initial setup

Search depends on additional output content type of JSON in config.toml ``` [outputs] home = [“HTML”, “JSON”] ```

Search Results

Tue, 08 Jun 2010 08:06:25 +0600

This file exists solely to respond to /search URL with the related search layout template.

No content shown here is rendered, all content is based in the template layouts/page/search.html

Setting a very low sitemap priority will tell search engines this is not important content.

This implementation uses Fusejs and mark.js

Initial setup

Search depends on additional output content type of JSON in config.toml ``` [outputs] home = [“HTML”, “JSON”] ```

Toha

Personnalisation de la disposition

Comment contribuer ?

Les manières de contribuer

Code

Tests et rapport des problèmes

Documentation

Comment ajouter un langage non supporté ?

Créer un fichier i18n

Comment traduire des billets ?

Création du billet

Comment traduire les données du site ?

Ajouter une langue à votre site

Obtenir le code de la langue

Ajouter une nouvelle section

Etape 1 : Ajouter du fichier de mise en page

Personnalisation CSS

Surcharger les variables des couleurs du thème

Migrer de la V3 à la V4

Les Shortcodes

Alerte

Succès

Danger

Warning

Caractéristiques

Design minimaliste

Démarrage rapide

Le nécessaire

Activer le mode sombre

Activation du mode sombre

Support de Mermaid

Commentaires

Commentaires

Disqus

Valine

Les liens de soutien/donation

Ko-fi

Buy Me a Coffee

Lien externe sur barre latérale

Préparer Votre Site

Déployer dans Github Pages

Créer une branche gh-pages

Activer Github Action

Déployer dans Netlify

Ajouter une configuration de Netlify

Automatiser la mise à jour du thème

Configuration des paramètres du site

Configuration de la section A propos

Ajouter les informations de section

Configuration Section Compétences

Ajouter les informations de section

Configuration de la section Etudes

Ajouter les informations de section

Configuration de la section Expériences

Configuration de la section Projets

Ajouter les informations de section

Configuration Section Billets Récents

Configuration de la section Réalisations

Ajouter les informations de section

Créer une sous-catégorie

Billet complet à venir prochainement…

Front Matter

Article complet à venir…

Guide Syntaxique Markdown

Paramètres de type Maths

Contenu riche

Utilisation d'Emoji

Analytiques

Analytiques

Goat Counter

Search Results

Initial setup

Search Results

Initial setup

Créer un fichier `i18n`

Créer une branche `gh-pages`