diff --git a/.gitignore b/.gitignore index 96ed920c..7820a6b4 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ resources/ .hugo_build.lock node_modules/ +github-toha.code-workspace diff --git a/content/posts/_index.fr.md b/content/posts/_index.fr.md new file mode 100644 index 00000000..9ddd6a18 --- /dev/null +++ b/content/posts/_index.fr.md @@ -0,0 +1,3 @@ +--- +title: Billets +--- diff --git a/content/posts/analytics/index.es.md b/content/posts/analytics/index.es.md index 8fce208c..648657b2 100644 --- a/content/posts/analytics/index.es.md +++ b/content/posts/analytics/index.es.md @@ -59,7 +59,9 @@ analytics: El código de seguimiento automáticamente será añadido a tu sitio web. +{{< alert type="warning" >}} Nota: En algunos sitios, aparece [an error has been detected](https://github.com/ihucos/counter.dev/issues/37), donde solo el directorio raíz ("/") se pasa a counter.dev, por lo que el seguimiento no mostrará nada en la sección "pages". Para solucionar este problema, se puede añadir `referrerPolicy: no-referrer-when-downgrade` como parámetro en la sección "counterDev", asegurando que las nuevas visitas a la página siempre se pasen correctamente a counter.dev. +{{< /alert >}} ### Google Analytics diff --git a/content/posts/analytics/index.fr.md b/content/posts/analytics/index.fr.md new file mode 100644 index 00000000..e67ff5c4 --- /dev/null +++ b/content/posts/analytics/index.fr.md @@ -0,0 +1,98 @@ +--- +title: "Analytiques" +date: 2020-06-08T06:00:23+06:00 +author: + name: Nicolas Dietlin + image: images/author/nicolas.jpg +description: Ajouter l'analytique dans hugo theme Toha +menu: + sidebar: + name: Analytiques + identifier: analytics + weight: 600 +--- + +## Analytiques + +Ce thème a été construit avec le support de divers outils d'analyse. Actuellement, il prends en charge les analyses suivantes: + +- [GoatCounter](https://www.goatcounter.com/) +- [counter.dev](https://counter.dev/) +- [Google Analytics](https://analytics.google.com) +- [Matomo](https://matomo.org/) + +Pour une liste complète des analyses supportées, référez vous au fichier d'échantillon [config.yaml](https://github.com/hugo-toha/hugo-toha.github.io/blob/main/config.yaml). + +{{< alert type="warning" >}} +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](https://counter.dev) et [GoatCounter](https://www.goatcounter.com/) n'ont pas besoin d'une bannière, car elles ne collectent pas de données personnelles identifiables. +{{< /alert >}} + +### Goat Counter + +[GoatCounter](https://www.goatcounter.com/) 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 ! + +Pour activer l'analyse GoatCounter sur votre site, vous avez deux options: la première est de s'inscrire sur [goatcounter.com](https://www.goatcounter.com) et obtenir un code pour votre site, la seconde est une instance auto-hébergée de GoatCounter. Ensuite, vous avez à ajouter une section `analytics` sous la section `params.features` de votre fichier `config.yaml` comme ci-dessous: + +```yaml +analytics: + enable: true + services: + # GoatCounter + goatCounter: + code: # Not self-hosted + instance: # For self-hosted you should use only one of the two methods +``` + +### counter.dev + +[counter.dev](https://counter.dev) est un site d'analytique simple et respectueux de la vie privée qui vous permet de suivre le nombre total d'utilisateurs, la première page visitée et quelques autres métriques sur votre site web. Malheureusement, pour que les choses restent simples (et gratuites), elles ne montrent pas un classement des pages les plus visités, mais plutôt celles qui ont été consultées en premier. + +Vous pouvez l'activer par l'ajout de l'email avec lequel vous vous êtes inscrit sur la page de counter.dev sous la section `params.features` dans votre fichier `config.yaml` comme ci-dessous: + +```yaml +analytics: + enable: true + services: + counterDev: + id: +``` +Le code de suivi sera automatiquement ajouté à votre site. + +{{< alert type="warning" >}} +Remarques : Sur certains sites, [une erreur a été détectée](https://github.com/ihucos/counter.dev/issues/37) où seul le répertoire racine ("/") est passé à counter.dev, donc le suivi n'affiche rien sous la section "pages". Pour corriger cela, on peut ajouter `referrerPolicy: no-referrer-when-downgrade` comme paramètre dans la section "counterDev", en s'assurant que les nouvelles visites de pages sont toujours correctement passées sur counter.dev. +{{< /alert >}} + +### Google Analytics + +{{< alert type="danger" >}} +Méfiez-vous, [d'après une récente jurisprudence](https://www.euractiv.com/section/politics/short_news/use-of-google-analytics-violates-eu-law-austrian-authority-rules/), Google Analytics pourrait être illégal dans l'Union Européenne. +{{< /alert >}} + +Vous pouvez activer Google Analytics sur votre site en ajoutant votre id de suivi sous la section `params.features` dans votre fichier `config.yaml` comme ci-dessous: + +```yaml +analytics: + enable: true + services: + # Google Analytics + google: + id: +``` + +Vous pouvez utiliser à la fois la V3 ou V4 de l'ID de suivi. Le thème détectera automatiquement la version du code de suivi et ajoutera les scripts de suivi correspondants en fonction de votre site. + +Pour des paramètres de confidentialité additionnels concernant Google Analytics, vous pouvez fournir une section `privacy.googleAnalytics` dans votre fichier `config.yaml` comme décrit [ici](https://gohugo.io/about/hugo-and-gdpr/#all-privacy-settings). + +### Matomo + +Vous pouvez activer Matomo (anciennement Piwik) par l'ajout de la configuration Matomo sous la section `params.features` dans votre fichier `config.yaml` comme ci-dessous: + +```yaml +analytics: + enable: true + services: + # Matomo / Piwik + matomo: + instance: matomo.example.com + siteId: 1 # The number generated after adding a site in your instance +``` diff --git a/content/posts/analytics/index.md b/content/posts/analytics/index.md index 2d5fd879..f8a3bc69 100644 --- a/content/posts/analytics/index.md +++ b/content/posts/analytics/index.md @@ -56,7 +56,9 @@ analytics: The tracking code will be automatically added to your site. +{{< alert type="warning" >}} Note: On some sites, [an error has been detected](https://github.com/ihucos/counter.dev/issues/37) where only the root directory ("/") is passed over to counter.dev, so the tracking wont show anything under the "pages" section. To fix this, one can add `referrerPolicy: no-referrer-when-downgrade` as a parameter on the "counterDev" section, ensuring that new page visits are always correctly passed onto counter.dev. +{{< /alert >}} ### Google Analytics diff --git a/content/posts/configuration/_index.fr.md b/content/posts/configuration/_index.fr.md new file mode 100644 index 00000000..39b87c80 --- /dev/null +++ b/content/posts/configuration/_index.fr.md @@ -0,0 +1,8 @@ +--- +title: Configuration +menu: + sidebar: + name: Configuration + identifier: configuration + weight: 100 +--- \ No newline at end of file diff --git a/content/posts/configuration/sections/_index.fr.md b/content/posts/configuration/sections/_index.fr.md new file mode 100644 index 00000000..ad7bce94 --- /dev/null +++ b/content/posts/configuration/sections/_index.fr.md @@ -0,0 +1,9 @@ +--- +title: Sections +menu: + sidebar: + name: Sections + identifier: sections + parent: configuration + weight: 110 +--- diff --git a/content/posts/configuration/sections/about/index.fr.md b/content/posts/configuration/sections/about/index.fr.md new file mode 100644 index 00000000..b07e7d5b --- /dev/null +++ b/content/posts/configuration/sections/about/index.fr.md @@ -0,0 +1,162 @@ +--- +title: "Configuration de la section A propos" +date: 2020-06-08T06:20:50+06:00 +author: + name: Nicolas Dietlin + image: images/author/nicolas.jpg +menu: + sidebar: + name: Section A propos + identifier: about-section + parent: sections + weight: 110 +--- + +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](https://github.com/hugo-toha/hugo-toha.github.io/blob/main/data/en/sections/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`: + +```yaml +# section information +section: + name: A propos # Titre de votre section (default: "") + id: about # 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: 1 # 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 + template: sections/about.html # Vous Permet de pointer vers un modèle spécifique. +``` + +#### Paramètre du modèle + +Vous avez la possibilité de personnaliser le partiel utilisé pour cette section en spécifiant la propriété `template`. Sauvegardez simplement le nouveau modèle dans votre répertoire `layout/partials`. + +### Ajouter vos informations de travail + +Pour inclure des détails à propos de votre emploi actuel, vous pouvez ajouter la section suivante dans votre fichier `about.yaml`: + +```yaml +# votre désignation +designation: Software Engineer +# Les informations de votre compagnie +company: + name: Example Co. + url: "https://www.example.com" +``` + +### Ajouter un résumé sur vous + +Pour donner un aperçu concis de votre expertise professionnelle, ajoutons une section de résumé. Cela donnera aux visiteurs un aperçu rapide de ce que vous faites. Ajoutez la section suivante à votre fichier `about.yaml`: + +```yaml +# un résumé sur vous +summary: 'I am a passionate software engineer with x years of working experience. I built OSS tools for [Kubernetes](https://kubernetes.io/) using GO. My tools help people to deploy their workloads in Kubernetes. Sometimes, I work on some fun projects such as writing a theme, etc.' +``` +Essayez de le rendre aussi bref que possible. Ne soyez pas trop verbeux. Nous avons d'autres sections qui donnent plus d'informations sur votre expertise. + +>Vous pouvez utiliser la syntaxe markdown dans le champs `summary` + +### Ajouter vos liens sociaux + +Pour ajouter des liens vers vos différents profils tels que LinkedIn, Twitter, and Github, incluez la section `socialLinks` dans votre fichier `about.yaml`: + +```yaml +# Vos liens sociaux +# Mettez en autant que voulez. Utitisez font-awesome pour les icônes. +socialLinks: +- name: Email + icon: "fas fa-envelope" + url: "example@gmail.com" + +- name: Github + icon: "fab fa-github" + url: "https://www.github.com/example" + +- name: Stackoverflow + icon: "fab fa-stack-overflow" + url: "#" + +- name: LinkedIn + icon: "fab fa-linkedin" + url: "#" + +- name: Twitter + icon: "fab fa-twitter" + url: "#" + +- name: Facebook + icon: "fab fa-facebook" + url: "#" +``` + +Vous pouvez utiliser n'importe quelles icônes libres de [Font Awesome](https://fontawesome.com/icons?d=gallery) dans le champs `icon`. + +### Ajouter un CV + +Pour ajouter votre Curriculum Vitae, placez le fichier PDF dans le répertoire `files` à l'intérieur du répertoire `static`. Ensuite, incluez la section suivante dans votre fichier `about.yaml`. + +```yaml +# Votre CV. Le chemin de ce fichier doit être relatif vers votre répertoire "static" +resourceLinks: +- title: "My Resume" + url: "files/resume.pdf" +``` + +### Ajouter des badges + +Maintenant, ajoutons vos badges et les indicateurs de force pour diverses compétences telles que le leadership, la communication, le travail d'équipe, etc. Incluez la section suivante dans votre fichier `about.yaml`: + +```yaml +# Afficher vos badges +# Vous pouvez afficher vos certifications vérifiée depuis https://www.credly.com. +# Vous pouvez aussi afficher des barres circulaires indiquant le niveau d'expertise sur une certaine compétence +badges: +- type: certification + name: Certified Kubernetes Security Specialist + url: "https://www.credly.com/org/the-linux-foundation/badge/exam-developer-certified-kubernetes-security-specialist" + badge: "https://images.credly.com/size/680x680/images/f4bf92ed-8985-40b2-bc07-2f9308780854/kubernetes-security-specialist-logo-examdev.png" + +- type: certification + name: Istio and IBM Cloud Kubernetes Service + url: "https://www.credly.com/org/the-linux-foundation/badge/exam-developer-certified-kubernetes-security-specialist" + badge: "https://images.credly.com/size/680x680/images/8d34d489-84bf-4861-a4a0-9e9d68318c5c/Beyond_basics_of_Istio_on_Cloud_v2.png" + +- type: certification + name: Artificial Intelligence and Machine Learning + url: "https://www.credly.com/org/grupo-bancolombia/badge/artificial-intelligence-and-machine-learning" + badge: "https://images.credly.com/size/680x680/images/e027514f-9d07-4b29-862f-fe21a8aaebf1/ae.png" + +- type: soft-skill-indicator + name: Leadership + percentage: 85 + color: blue + +- type: soft-skill-indicator + name: Team Work + percentage: 90 + color: yellow + +- type: soft-skill-indicator + name: Hard Working + percentage: 85 + color: orange +``` + +Actuellement, le pourcentage de qualification doit être compris entre 0 et 100, et doit être divisible par 5. Les couleurs suivantes sont disponibles pour l'indicateur de pourcentage de qualification. + +- bleu +- jaune +- rose +- vert + +>Vous pouvez aussi utiliser n'importe quel code couleur hexadécimal dans le champs `color`. + +{{< vs 2 >}} + +L'image suivante montre comment le contenu du fichier `about.yaml` est cartographié dans la section `A propos`. (La portion de configuration de l'image est obsolète et la section des SoftSkills a été remplacée avec des badges) + +{{< img src="images/about.png" >}} diff --git a/content/posts/configuration/sections/achievements/index.fr.md b/content/posts/configuration/sections/achievements/index.fr.md new file mode 100644 index 00000000..7c685ade --- /dev/null +++ b/content/posts/configuration/sections/achievements/index.fr.md @@ -0,0 +1,58 @@ +--- +title: "Configuration de la section Réalisations" +date: 2020-06-08T06:20:30+06:00 +author: + name: Nicolas Dietlin + image: images/author/nicolas.jpg +menu: + sidebar: + name: Section des réalisations + identifier: achievements-section + parent: sections + weight: 160 +--- + +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](https://github.com/hugo-toha/hugo-toha.github.io/blob/main/data/en/sections/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`: + +```yaml +# section information +section: + name: Réalisations # Titre de votre section (default: "") + id: achievements # 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: 9 # 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 + # Peut optionnellement masquer les titres de la section + # hideTitle: true +``` + +### Ajouter les réalisations + +Pour ajouter vos réalisations, ouvrez le fichier `achievements.yaml` et incluez les entrées suivantes sous la section `achievements`: + +```yaml +achievements: +- title: Meilleur présentateur + image: images/sections/achievements/presenter.jpg + summary: Meilleur présentation de l'année 2020 à la conférence XYZ. +``` + +Chaque entrée d'une réalisation doit avoir les champs suivants: + +- **title**: Le titre de la réalisation. +- **image**: Une image de la réalisation. +- **summary**: Un résumé de la réalisation. + +>Vous pouvez utilisez la syntaxe markdown dans le champs `summary`. + +{{< vs 2 >}} + +L'image suivante montre comment les contenus du fichier `achievements.yaml` sont cartographiés dans la section `Réalisations`. + +{{< img src="images/achievements.png" >}} diff --git a/content/posts/configuration/sections/education/index.fr.md b/content/posts/configuration/sections/education/index.fr.md new file mode 100644 index 00000000..897aa648 --- /dev/null +++ b/content/posts/configuration/sections/education/index.fr.md @@ -0,0 +1,61 @@ +--- +title: "Configuration de la section Etudes" +date: 2020-06-08T06:20:40+06:00 +author: + name: Nicolas Dietlin + image: images/author/nicolas.jpg +menu: + sidebar: + name: Section des études + identifier: Education-section + parent: sections + weight: 135 +--- + +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](https://github.com/hugo-toha/hugo-toha.github.io/blob/main/data/en/sections/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`: + +```yaml +# section information +section: + name: Etude # Titre de votre section + id: education # URL id/slug de section *valeur à conserver & obligatoire* + template: sections/education.html # Utilisez "sections/education-alt.html comme modèle alternatif. + enable: true + weight: 4 + showOnNavbar: true + # Peut optionnellement masquer les titres de la section + # hideTitle: true +``` + +### Ajoutez vos degrés d'enseignement + +Pour ajouter un cycle d'étude, inclure les informations correspondantes sous la section `degrees` dans le fichier `education.yaml` comme ci-dessous : + +```yaml +degrees: +- name: Ph.D in Quantum Cryptography + icon: fa-microscope + timeframe: 2016-2020 + institution: + name: ABC University of Technology + url: "#" + grade: #(optionnel) + scale: CGPA + achieved: 3.6 + outOf: 4 + publications: #(optionnel) + - title: Lorem ipsum dolor sit amet, consectetur adipiscing elit. + url: "#" + - title: Fusce eu augue ut odio porttitor pulvinar. + url: "#" + - title: Nullam vitae orci tincidunt purus viverra pulvinar. + url: "#" +``` + +Assurez-vous que l'icône que vous utilisez soit disponible sur [Font Awesome](https://fontawesome.com/icons?d=gallery&m=free). diff --git a/content/posts/configuration/sections/experiences/index.fr.md b/content/posts/configuration/sections/experiences/index.fr.md new file mode 100644 index 00000000..4d86bb7e --- /dev/null +++ b/content/posts/configuration/sections/experiences/index.fr.md @@ -0,0 +1,83 @@ +--- +title: "Configuration de la section Expériences" +date: 2020-06-08T06:20:40+06:00 +author: + name: Nicolas Dietlin + image: images/author/nicolas.jpg +menu: + sidebar: + name: Section des expériences + identifier: experiences-section + parent: sections + weight: 130 +--- + +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](https://github.com/hugo-toha/hugo-toha.github.io/blob/main/data/en/sections/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: + +### Ajouter les informations de section + +Ajoutez les métadonnées de la section suivante dans votre fichier `experiences.yaml`: + +```yaml +# section information +section: + name: Experiences # Titre de la section (par défaut: "" ) + id: experiences # URL id/slug de section *valeur à conserver & obligatoire* + enable: true + weight: 3 + showOnNavbar: true + # Peut optionnellement masquer les titres de la section + # hideTitle: true +``` + +### Ajouter vos expériences + +Pour ajouter une expérience, incluez les informations correspondantes sous la section `experiences` de votre fichier `experiences.yaml` comme ci-dessous: + +```yaml +# Vos expériences +experiences: +- company: + name: Example Co. + url: "https://www.example.com" + location: Dhaka Branch + # Aperçu de votre compagnie + overview: Example Co. is a widely recognized company for cloud-native development. It builds tools for Kubernetes. + positions: + - designation: Senior Software Engineer + start: Nov 2019 + # Ne pas fournir de date de fin sur votre poste actuel. Ca sera remplacé par "Aujourd'hui". + # end: Dec 2020 + # Donnez quelques points à propos de vos responsabilités dans cette entreprise. + responsibilities: + - Design and develop XYZ tool for ABC task + - Design, develop and manage disaster recovery tool [Xtool](https://www.example.com) that backup Kubernetes volumes, databases, and cluster's resource definition. + - Lead backend team. + + - designation: Junior Software Engineer + start: Nov 2017 + end: Oct 2019 + responsibilities: + - Implement and test xyz feature for abc tool. + - Support client for abc tool. + - Learn k,d,w technology for xyz. +``` + +Chaque entrée dans une section `expériences` devrait avoir les informations suivantes: + +- **company**: Quelques informations sur votre entreprise. Vous devez fournir `name`, `url`, `location`, et une brève `overview` de votre entreprise. +- **positions**: Une liste des postes que vous avez occupé dans l'entreprise. Vous pouvez fournir plusieurs postes si vous en avez changé au sein de cette entreprise. +- **designation**: Indique le rôle que vous jouiez sur ce poste. +- **start**: Temps quand vous avez démarré à ce poste. +- **end**: Temps quand vous avez quitté ce poste. Si vous occupé actuellement ce poste, ne renseignez pas ce champs. +- **responsibilities**: Une liste des responsabilités que vous avez assumée à ce poste. Cette section est très importante car elle donnera aux visiteurs une idée des responsabilités que vous êtes capable de gérer. + +> Vous pouvez utiliser la syntaxe markdown dans le champs `overview` de la section `company` et dans le champs `responsabilities`. + + diff --git a/content/posts/configuration/sections/experiences/index.md b/content/posts/configuration/sections/experiences/index.md index aed51e7c..a7f9e2cc 100644 --- a/content/posts/configuration/sections/experiences/index.md +++ b/content/posts/configuration/sections/experiences/index.md @@ -18,16 +18,14 @@ To begin, create a new file named `experiences.yaml` in the `data/en/sections` d Add the following section metadata to your `experiences.yaml` file: ```yaml -# section information section: - name: Education - id: education - template: sections/education.html # Use "sections/education-alt.html for alternate template. + name: Experiences # Titre de la section (par défaut: "" ) + id: experiences # url id/slug of section *Required* enable: true - weight: 4 + weight: 3 showOnNavbar: true # Can optionally hide the title in sections - # hideTitle: true + # hideTitle: true ``` ### Add Your Experiences @@ -63,7 +61,7 @@ experiences: - Learn k,d,w technology for xyz. ``` -Each entry in the `experiences` section should have the following information, +Each entry in the `experiences` section should have the following information: - **company**: Some information about your company. You should provide `name`, `url`, `location`, and a brief `overview` of the company. - **positions**: A list of positions you have held in the company. You can provide multiple positions if you have changed your position in the company. diff --git a/content/posts/configuration/sections/projects/index.fr.md b/content/posts/configuration/sections/projects/index.fr.md new file mode 100644 index 00000000..a06ba383 --- /dev/null +++ b/content/posts/configuration/sections/projects/index.fr.md @@ -0,0 +1,84 @@ +--- +title: "Configuration de la section Projets" +date: 2020-06-08T06:20:35+06:00 +menu: + sidebar: + name: Section des projets + identifier: projects-section + parent: sections + weight: 140 +--- + +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](https://github.com/hugo-toha/hugo-toha.github.io/blob/main/data/en/sections/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`: + +```yaml +# section information +section: + name: Projects # Titre de la section (par défaut: "" ) + id: projects # URL id/slug de section *valeur à conserver & obligatoire* + enable: true + weight: 5 + showOnNavbar: true + # Peut optionnellement masquer les titres de la section + # hideTitle: true +``` + +### Ajouter des boutons de filtrage projet + +Maintenant, ajoutez une section `buttons` dans votre fichier `projects.yaml` comme ci-dessous: + +```yaml +buttons: +- name: All + filter: "all" +- name: Professional + filter: "professional" +- name: Academic + filter: "academic" +- name: Hobby + filter: "hobby" +``` +Chaque bouton a deux propriétés. La première propriété est `name` qui est le texte qui sera affiché sur le bouton et l'autre est `filter` qui spécifie la catégorie des projets que ce bouton doit sélectionner. + +Un bouton n'affichera que les projets qui ont un tag correspondant au texte spécifié dans le `filter` choisi. La valeur du filtre `all` est traitée spécifiquement. Il correspond à tous les projets même s'ils n'ont pas `all` en tant que tag dans leur champs `tags`. + +### Ajouter vos projets + +Maintenant, ajoutez vos projects sous la section `projects` dans votre fichier `projects.yaml` comme ci-dessous: + +```yaml +projects: +- name: Kubernetes + logo: images/projects/kubernetes.png + role: Contributor + timeline: "March 2018 - Present" + repo: https://github.com/kubernetes/kubernetes + # url: "" + summary: Production-Grade Container Scheduling and Management . + tags: ["professional", "kubernetes", "cloud"] +``` + +Vous pouvez spécifier les champs suivants pour votre projet: + +- **name**: Le nom du projet. +- **logo**: Le log du projet. Si le projet n'a pas de logo, le thème y ajoutera automatiquement un espace réservé. +- **role**: Votre rôle sur ce projet. +- **timeline**: La chronologie quand vous avez travaillé sur ce projet. +- **repo**: Si ce projet est projet Open-Source et hébergé sur Github, vous pouvez fournir l'URL du dépôt.Il Ca sera utilisé pour montrer le nombre d'étoiles pour ce projet. +- **url**: Si le projet n'est pas open-source ou n'est pas hébergé sur Github, vous pouvez fournir une URL de votre projet. Cela créera un bouton avec le lien dans la carte du projet. +- **summary**: Une courte description du projet. +- **tags**: Une liste de tags pour votre projet. Ca sera utilisé pour sélectionner les projets sous une catégorie avec le bouton de filtrage. + +>Vous pouvez utiliser la syntaxe markdown dans le champs `summary`. + +{{< vs 2 >}} + +L'image suivante montre commment les contenus de `projects.yaml` sont cartographiés dans la section `projects.yaml`. + +{{< img src="images/projects.png" >}} diff --git a/content/posts/configuration/sections/recent-posts/index.fr.md b/content/posts/configuration/sections/recent-posts/index.fr.md new file mode 100644 index 00000000..740c0b81 --- /dev/null +++ b/content/posts/configuration/sections/recent-posts/index.fr.md @@ -0,0 +1,28 @@ +--- +title: "Configuration Section Billets Récents" +date: 2020-06-08T06:20:34+06:00 +author: + name: Nicolas Dietlin + image: images/author/nicolas.jpg +menu: + sidebar: + name: Section billets récents + identifier: recent-posts-section + parent: sections + weight: 150 +--- + +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: + +```yaml +# 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) +``` diff --git a/content/posts/configuration/sections/skills/index.fr.md b/content/posts/configuration/sections/skills/index.fr.md new file mode 100644 index 00000000..3d97f532 --- /dev/null +++ b/content/posts/configuration/sections/skills/index.fr.md @@ -0,0 +1,57 @@ +--- +title: "Configuration Section Compétences" +date: 2020-06-08T06:20:45+06:00 +author: + name: Nicolas Dietlin + image: images/author/nicolas.jpg +menu: + sidebar: + name: Section des compétences + identifier: skills-sections + parent: sections + weight: 120 +--- + +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](https://github.com/hugo-toha/hugo-toha.github.io/blob/main/data/en/sections/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`: + +```yaml +# section information +section: + name: Compétences # Titre de votre section + id: skills # 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: 2 # Ordre d'affichage de la section (par defaut: alphabetique suivi par poids) + showOnNavbar: true + # Peut optionnellement masquer les titres de la section + # hideTitle: true +``` + +### Ajouter vos compétences + +Ajoutez un `skill` et ajoutez ses informations sous la section `skills` dans votre fichier `skills.yaml` comme ci-dessous: + +```yaml +# Vos compétences. +# Donnez un résumé pour chaque compétence dans la section summary. +skills: +- name: Kubernetes + logo: /images/sections/skills/kubernetes.png + summary: "Capable of deploying, managing application on Kubernetes. Experienced in writing Kubernetes controllers for CRDs." + url: "https://kubernetes.io/" +``` + +Ici, vous renseignez les champs `name`, `log`, et `summary` pour une compétence. Le champs `summary` doit fournir une idée du niveau de connaissance sur une compétence particulière. + +>Vous pouvez utiliser la syntaxte markdown dans le champs `summary`. + +{{< vs 2 >}} + +L'image suivante montre comment le contenu du fichier `skills.yaml` est cartographié dans la section `Compétences`. + +{{< img src="images/skills.png">}} diff --git a/content/posts/external-link/index.fr.md b/content/posts/external-link/index.fr.md new file mode 100644 index 00000000..f15c3a3f --- /dev/null +++ b/content/posts/external-link/index.fr.md @@ -0,0 +1,11 @@ +--- +title: "Lien externe sur barre latérale" +date: 2022-03-14T06:00:23+06:00 +description: Ajouter un lien externe sur la barre latérale +menu: + sidebar: + name: Exemple de lien externe + identifier: external-link + pageRef: https://example.com/ + weight: 850 +--- \ No newline at end of file diff --git a/content/posts/getting-started/github-pages/index.fr.md b/content/posts/getting-started/github-pages/index.fr.md index 7e9133f9..6f6a76ec 100644 --- a/content/posts/getting-started/github-pages/index.fr.md +++ b/content/posts/getting-started/github-pages/index.fr.md @@ -1,6 +1,6 @@ --- title: "Déployer dans Github Pages" -date: 2023-11-11T22:00:20+02:00 +date: 2020-06-08T22:00:20+06:00 menu: sidebar: name: Déployer dans Github Pages diff --git a/content/posts/getting-started/prepare-site/index.fr.md b/content/posts/getting-started/prepare-site/index.fr.md index 15dda09c..107d7580 100644 --- a/content/posts/getting-started/prepare-site/index.fr.md +++ b/content/posts/getting-started/prepare-site/index.fr.md @@ -1,6 +1,6 @@ --- title: "Préparer Votre Site" -date: 2023-11-06T21:44:20+02:00 +date: 2020-06-08T23:00:20+06:00 menu: sidebar: name: Préparer votre site @@ -11,7 +11,7 @@ menu: Dans ce billet, nous allons créer un site hugo de zéro. Nous le configurerons avec le thème `toha`, le rendre multilingue, ajouter 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 un démarrage de la tête, vous pouvez juste forker le dépôt [hugo-toha/hugo-toha.github.io](https://github.com/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](https://pages.github.com/) et [Netlify](https://www.netlify.com/). +Si vous voulez démarrer d'une base, vous pouvez juste cloner le dépôt [hugo-toha/hugo-toha.github.io](https://github.com/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](https://pages.github.com/) et [Netlify](https://www.netlify.com/). Si vous avez déjà un site hugo, sautez à la section [Ajouter un thème](#add-theme) @@ -24,48 +24,64 @@ D'abord, créez un dépôt sur Github. Si vous voulez déployer ce site dans Git Maintenant, assurez-vous d'avoir [Hugo](https://gohugo.io/getting-started/installing/) installé. Ce thème devrait fonctionner avec hugo version `v0.118.0` et plus. Maintenant, lancez la commande suivante depuis la racine de votre dépôt pour initier un site web hugo. ```console -$ hugo new site ./ -f --format yaml +$ hugo new site ./ --format=yaml --force ``` -Cette commande créera une structure de base d'un site hugo. Ici, le flag `--format yaml` indique à hugo de créer un fichier de configuration au format YAML et le flag `-f` force hugo à créer un site même si le répertoire cible n'est pas vide. +Cette commande créera une structure de base d'un site hugo. Ici, le flag `--format yaml` indique à hugo de créer un fichier de configuration au format YAML et le flag `--force` force hugo à créer un site même si le répertoire cible n'est pas vide. Cela va créer un fichier `hugo.yaml` qui conservera toutes les configurations nécessaires à votre site. -### Initialiser le dépôt git - -Maintenant, il est temps d'ajouter git à votre site web. Initialisez le dépôt git en utilisant la commande suivante : +### Ajouter un thème +Nous allons utiliser un module hugo pour ajouter le thème `Toha` dans votre site. D'abord, initialisez les modules hugo en utilisant la commande suivante: ```console -$ git init +$ hugo mod init github.com// ``` +Cette commande va créer un fichier `go.mod` à la racine de votre dépôt. -### Ajouter un thème +Puis, ajoutez la section module suivante dans votre fichier `hugo.yaml`: -Maintenant, il est temps d'ajouter un thème dans votre site. Ajoutez le thème Toha comme un sous-module git de votre dépôt en utilisant la commande suivante: - -```console -$ git submodule add https://github.com/hugo-toha/toha.git themes/toha +```yaml +module: + imports: + - path: github.com/hugo-toha/toha/v4 + mounts: + - source: ./node_modules/flag-icon-css/flags + target: static/flags + - source: ./node_modules/@fontsource/mulish/files + target: static/files + - source: ./node_modules/katex/dist/fonts + target: static/fonts ``` -{{< vs 1 >}} - ->N'utilisez pas l'URL SSH du thème durant son ajout en tant que sous-module git. Aussi, ne clonez pas le thème dans votre répertoire `themes` en utilisant `git clone`. Sinon, nous ne pourrons pas automatiser la publication du site en utilisant Github Action ou Netlify. +Finalement, exécutez les commandes suivantes pour télécharger le thème et ses dépendances: + +```bash +# Télécharge le theme +hugo mod get -u +# Télécharge les dépendances du thème +hugo mod tidy +# Génère les dépendances node +hugo mod npm pack +# Installe les dépendances install +npm install +``` ### Lancer le site localement -Maintenant, vous pouvez déjà exécuter votre site localement. Observons le site en mode veille en utilisant la commande suivante: +Maintenant, vous pouvez déjà exécuter votre site localement. Lançons le site en mode observation en utilisant la commande suivante: ```console -$ hugo server -t toha -w +$ hugo server -w ``` -Si vous naviguez sur `http://localhost:1313`, vous devriez voir un site de base avec le thème Toha. Dans la section suivante, nous allons configurer le site pour ressembler au [hugo-toha.github.io](https://hugo-toha.github.io/). Comme nous avons exécuté le serveur en mode veille, tous les changements que nous feront au site seront instantanément visibles dans le navigateur. +Si vous naviguez sur `http://localhost:1313`, vous devriez voir un site basique avec le thème Toha. Dans la prochaine section, nous allons configurer le site pour qu'il ressemble à [hugo-toha.github.io](https://hugo-toha.github.io/). Comme nous avons lancé le serveur en mode observation, n'importe quels changements que nous faisons sur le site sera instantanément visible dans votre navigateur. ### Configurer le site -Maintenant, nous sommes prêt à configurer notre site. Dans cette section, nous allons ajouter les informations de l'auteur, différentes sections, et des echantillons de billets etc. +Maintenant, nous sommes prêt à configurer notre site. Dans cette section, nous allons ajouter les informations de l'auteur, différentes sections, et des échantillons de billets etc. -#### Mise à jour du `config.yaml` +#### Mise à jour `hugo.yaml` -Quand vous avez créé le site en utilisant la commande `hugo new site`, il a créé un fichier `config.yaml` à la racine de votre dépôt. Remplacer le contenu par défaut du fichier `config.yaml` avec ce qui suit: +Quand vous avez créé le site en utilisant la commande `hugo new site`, cela a créé un fichier `hugo.yaml` à la racine de votre dépôt. Remplacer le contenu par défaut du fichier `hugo.yaml` avec ce qui suit: ```yaml baseURL: https://hugo-toha.github.io @@ -74,6 +90,7 @@ languageCode: en-us title: "John's Blog" # Use Hugo modules to add theme + module: imports: - path: github.com/hugo-toha/toha/v4 @@ -126,27 +143,33 @@ params: # GitHub repo URL of your site gitRepo: https://github.com/hugo-toha/hugo-toha.github.io - # specify whether you want to write some blog posts or not - enableBlogPost: true + features: + # Enable portfolio section + portfolio: + enable: true + + # Enable blog posts + blog: + enable: true - # specify whether you want to show Table of Contents in reading page - enableTOC: true + # Enable Table of contents in reading page + toc: + enable: true - # Provide newsletter configuration. This feature hasn't been implemented yet. - # Currently, you can just hide it from the footer. - newsletter: + # Configure footer + footer: enable: true ``` Ici, vous voyez une configuration de base pour le thème Toha. Vous pouvez voir le fichier de configuration utilisé dans le site d'exemple [ici](https://github.com/hugo-toha/hugo-toha.github.io/blob/source/config.yaml). Pour des options de configurations plus détaillées, s'il vous plaît consultez [ce billet](https://toha-guides.netlify.app/posts/configuration/site-parameters/). -#### Ajouter de données +#### Ajouter des données -La plupart des contenus de ce thème sont pilotés par quelques fichiers YAML dans le répertoire `data`. Dans cette section, nous allons ajouter quelques échantillons de données. Puisque nous sommes en train de bâtir un site multilingue, nous allons séparer les données de chaque langue dans leur propre répertoire local. +La plupart des contenus de ce thème sont pilotés par quelques fichiers YAML dans le répertoire `data`. Dans cette section, nous allons ajouter quelques échantillons de données. Puisque nous sommes en train de bâtir un site multilingue, nous allons garder les données de chaque langue dans leur propre répertoire local. D'abord, créez le répertoire `en` dans votre répertoire `data`. Ici, nous sommes en train d'ajouter des données pour la langue `anglaise`. -##### Informations sur le site +##### Informations du site Maintenant, créez un fichier `site.yaml` dans le répertoire `/data/en/` de votre dépôt. Ajoutez-y le contenu suivant: @@ -154,13 +177,13 @@ Maintenant, créez un fichier `site.yaml` dans le répertoire `/data/en/` de vot # Copyright Notice copyright: © 2020 Copyright. -# Meta description de votre site. Ca aidera les moteurs de recherche à retrouver votre site. +# Meta description de votre site. Cela peut aider les moteurs de recherche à trouver votre site. description: Portfolio and personal blog of John Doe. ``` -Pour voir toutes les options disponibles pour les informations du site, consulter [cet extrait de fichier](https://github.com/hugo-toha/hugo-toha.github.io/blob/source/data/en/site.yaml). +Pour voir toutes les options disponibles pour les informations du site, consultez [cet extrait de fichier](https://github.com/hugo-toha/hugo-toha.github.io/blob/source/data/en/site.yaml). -##### Informations sur l'auteur +##### Informations de l'auteur Maintenant, créez un fichier `author.yaml` dans le répertoire `data/en` et ajoutez vos informations comme suit: @@ -195,7 +218,7 @@ Maintenant, nous allons ajouter différentes sections dans notre page d'accueil. ###### La section A propos -Créons un fichier `about.yaml` dans votre répertoire `/data/en/sections`. Puis ajoutez le contenu suivant: +Créez un fichier `about.yaml` à l'intérieur de votre répertoire `/data/en/sections`. Puis ajoutez le contenu suivant: ```yaml # Information de section @@ -217,11 +240,11 @@ company: # Votre Curriculum Vitae. Le chemin de ce fichier doit être relatif vers le répertoire "static" resume: "files/resume.pdf" -# Un résumé sur vous. +# Un résumé sur vous summary: 'I am a passionate software engineer with x years of working experience. I built OSS tools for [Kubernetes](https://kubernetes.io/) using GO. My tools help people to deploy their workloads in Kubernetes. Sometimes, I work on some fun projects such as writing a theme, etc.' # Vos liens sur les réseaux sociaux -# Mettez-en autant que vous voulez. Utilisez font-awesome pour les icônes +# Mettez-en autant que vous voulez. Utilisez font-awesome pour les icônes. socialLinks: - name: Email icon: "fas fa-envelope" @@ -247,7 +270,7 @@ socialLinks: icon: "fab fa-facebook" url: "#" -# Affichez vos badges +# Affiche vos badges # Vous pouvez montrer vos certifications depuis https://www.credly.com # Vous pouvez aussi afficher des barres circulaire indiquant le niveau d'expertise de certaines compétences badges: @@ -288,223 +311,38 @@ badges: # color: "#00adb5" ``` -Mettre le fichier `resume.pdf` dans le répertoire `/static/files`. Vous pouvez trouver le fichier `about.yaml` utilisé dans le site exemple depuis [ici](https://github.com/hugo-toha/hugo-toha.github.io/blob/source/data/en/sections/about.yaml). - -###### Section Compétences - -Créons un fichier `skills.yaml` dans votre répertoire `/data/en/sections`. Puis ajoutez le contenu suivant: - -```yaml -# Information de section -section: - name: Skills - id: skills - enable: true - weight: 2 - showOnNavbar: true - # En option : Possibilité de masquer le titre dans les sections - # hideTitle: true - -# Vos compétences -# Donnez un bref résumé pour chaque compétence dans le champ summary -skills: -- name: Kubernetes - logo: "/images/sections/skills/kubernetes.png" - summary: "Capable of deploying, managing application on Kubernetes. Experienced in writing Kubernetes controllers for CRDs." - url: "https://kubernetes.io/" - -- name: Go Development - logo: "/images/sections/skills/go.png" - summary: "Using as the main language for professional development. Capable of writing scalable, testable, and maintainable program." - url: "https://golang.org/" - -- name: Cloud Computing - logo: "/images/sections/skills/cloud.png" - summary: "Worked with most of the major clouds such as GCP, AWS, Azure etc." -``` - -Mettez vos images de compétences dans le répertoire `images/sections/skills` de votre dépôt. Vous trouverez les images [ici](https://github.com/hugo-toha/hugo-toha.github.io/tree/source/assets/images/sections/skills). Vous pouvez également trouver le fichier `skills.yaml` utilisé dans le site exemple par [là](https://github.com/hugo-toha/hugo-toha.github.io/blob/source/data/en/sections/skills.yaml). - -###### Section Expériences - -Créez un fichier `experiences.yaml` dans votre répertoire `/data/en/sections`. Puis ajoutez le contenu suivant: - -```yaml -# Information de section -section: - name: Experiences - id: experiences - enable: true - weight: 3 - showOnNavbar: true - # En option : Possibilité de masquer le titre dans les sections - # hideTitle: true - -# Vos expériences -experiences: -- company: - name: Example Co. - url: "https://www.example.com" - location: Dhaka Branch - # Aperçu de l'entreprise - overview: Example Co. is a widely recognized company for cloud-native development. It builds tools for Kubernetes. - positions: - - designation: Senior Software Engineer - start: Nov 2019 - # Si vous êtes toujours en poste, n'indiquez pas de date de fin. Ce sera remplacé par "Aujourd'hui" - # end: Dec 2020 - # Indiquez quelques éléments à propos de vos responsabilités au sein de l'entreprise. - responsibilities: - - Design and develop XYZ tool for ABC task - - Design, develop and manage disaster recovery tool [Xtool](https://www.example.com) that backup Kubernetes volumes, databases, and cluster's resource definition. - - Lead backend team. - -- company: - name: PreExample Co. - url: "https://example.com" - location: Nowhere - overview: PreExample Co. is a gateway company to enter into Example co. So, nothing special here. - positions: - - designation: Software Engineer - start: March 2016 - end: May 2017 - responsibilities: - - Write lots of example codes. - - Read lots of examples. - - See lots of example videos. -``` - -Vous pouvez trouver le fichier `experiences.yaml` utilisé dans le site exemple par [ici](https://github.com/hugo-toha/hugo-toha.github.io/blob/source/data/en/sections/experiences.yaml). - -###### Section Projets - -Créez un fichier `projects.yaml` dans votre répertoire `/data/en/sections`. Puis ajoutez le contenu suivant: - -```yaml -# Information de section -section: - name: Projects - id: projects - enable: true - weight: 5 - showOnNavbar: true - # En option : Possibilité de masquer le titre dans les sections - # hideTitle: true - -# buttons de filtrage -buttons: -- name: All - filter: "all" -- name: Professional - filter: "professional" -- name: Academic - filter: "academic" -- name: Hobby - filter: "hobby" - -# vos projets -projects: -- name: Kubernetes - logo: /images/sections/projects/kubernetes.png - role: Contributor - timeline: "March 2018 - Present" - repo: https://github.com/kubernetes/kubernetes # Si votre projet est un dépôt public sur GitHub, alors fournissez le lien. Ca affichera le compteur d'étoile. - #url: "" # Si votre projet n'est pas public mais il a un site web or quelques urls externes, alors fournissez les ici. Ne fournissez pas "repo" et "url" simultanément. - summary: Production-Grade Container Scheduling and Management. - tags: ["professional", "kubernetes", "cloud"] - -- name: Tensorflow - logo: /images/sections/projects/tensorflow.png - role: Developer - timeline: "Jun 2018 - Present" - repo: https://github.com/tensorflow/tensorflow - #url: "" - summary: An Open Source Machine Learning Framework for Everyone. - tags: ["professional", "machine-learning","academic"] - -- name: Toha - logo: /images/sections/projects/toha.png - role: Owner - timeline: "Jun 2019 - Present" - repo: https://github.com/hossainemruz/toha - summary: A Hugo theme for personal portfolio. - tags: ["hobby","hugo","theme","professional"] -``` - -Mettez les images des projets dans le répertoire `images/sections/projects/`. Vous trouverez les images [ici](https://github.com/hugo-toha/hugo-toha.github.io/tree/source/assets/images/sections/projects). Vous pouvez également trouver le fichier `projects.yaml` utilisé dans le site exemple par [là](https://github.com/hugo-toha/hugo-toha.github.io/blob/source/data/en/sections/projects.yaml). - -###### Section Billets récents - -Créez le fichier `recent-posts.yaml` dans votre répertoire `/data/en/sections/`. Puis ajoutez le contenu suivant: - -```yaml -# Information de section -section: - name: Recent Posts - id: recent-posts - enable: true - weight: 6 - # En option : Possibilité de masquer le titre dans les sections - # hideTitle: true - -# Pas de configuration additionnelles requises -``` - -Vous pouvez trouver le fichier `recent-posts.yaml` utilisé dans le site d'exemple [ici](https://github.com/hugo-toha/hugo-toha.github.io/blob/source/data/en/sections/recent-posts.yaml). +Mettre le fichier `resume.pdf` dans le répertoire `/static/files` de votre dépôt. Vous pouvez trouver le fichier `about.yaml` utilisé dans le site exemple depuis [ici](https://github.com/hugo-toha/hugo-toha.github.io/blob/source/data/en/sections/about.yaml). -> Cette section sera vide jusqu'à ce que vous ajoutiez quelques billets dans votre site. +###### Ajouter d'autres sections -###### Section Réalisation - -Créez un fichier `achievements.yaml` dans votre répertoire `/data/en/sections/`. Puis ajoutez le contenu suivant: - -```yaml -# Information de section -section: - name: Achievements - id: achievements - enable: true - weight: 8 - showOnNavbar: true - # En option : Possibilité de masquer le titre dans les sections - # hideTitle: true - -# Vos réalisations -achievements: -- title: Best Presenter - image: /images/sections/achievements/presenter.jpg - summary: Best presenter in the 2020 XYZ conference. -- title: Champion - image: /images/sections/achievements/sport.jpg - summary: Champion in cycling inter-city cycling championship 2020. -- title: Graduation - image: /images/sections/achievements/graduation-cap.jpg - summary: Received Bachelor of Science (B.Sc.) in Computer Science and Engineer from XYZ University. -- title: Award Winner - image: /images/sections/achievements/woman-winner.jpg - summary: Wined best paper award at IEE Conference 2020. -``` +Pour conserver le caractère court de ce billet, nous l'avons divisé en différents billets. Ci-dessous, il y a la liste des billets qui vous montrera comment configurer les autres sections: -Mettez les images des projets dans le répertoire `images/sections/achievements/`. Vous trouverez les images [ici](https://github.com/hugo-toha/hugo-toha.github.io/tree/source/assets/images/sections/achievements). Vous pouvez également trouver le fichier `achievements.yaml` utilisé dans le site exemple par [là](https://github.com/hugo-toha/hugo-toha.github.io/blob/source/data/en/sections/achievements.yaml). +- [Configuration de la section A propos](/fr/posts/configuration/sections/about/). +- [Configuration de la section des études](/fr/posts/configuration/sections/education/). +- [Configuration de la section des expériences](/fr/posts/configuration/sections/experiences/). +- [Configuration de la section des projets](/fr/posts/configuration/sections/projects/). +- [Configuration de la section des billets récents](/fr/posts/configuration/sections/recent-posts/). +- [Configuration de la section des réalisations](/fr/posts/configuration/sections/achievements/). +- [Configuration de la section des compétences](/fr/posts/configuration/sections/skills/). #### Ajout de billets -Maintenant, nous sommes prêts à ajouter nos premiers billet dans notre site. Ici, nous allons ajouter ce [billet d'introduction](https://hugo-toha.github.io/posts/introduction/). +Maintenant, nous sommes prêts à ajouter notre premier billet sur notre site. Ici, nous allons ajouter ce [billet d'introduction](https://hugo-toha.github.io/posts/introduction/). - D'abord, créez un répertoire `posts` à l'intérieur du répertoire `content` de votre site. -- Ensuite, créez un fichier `_index.md` à l'intérieur du répertoire `posts`. Copiez le contenu de ce [fichier](https://raw.githubusercontent.com/hugo-toha/hugo-toha.github.io/source/content/posts/_index.md) et collez le dans le nouveau fichier `_index.md` récemment créé. +- Ensuite, créez un fichier `_index.md` à l'intérieur du répertoire `posts`. Copiez le contenu de ce [fichier](https://raw.githubusercontent.com/hugo-toha/hugo-toha.github.io/source/content/posts/_index.md) et collez-le dans le nouveau fichier `_index.md` récemment créé. - Créez un répertoire `introduction` à l'intérieur du répertoire `posts`. - Ajoutez le [hero.svg](https://raw.githubusercontent.com/hugo-toha/hugo-toha.github.io/source/content/posts/introduction/hero.svg) suivant à l'intérieur de votre répertoire `introduction`. - Maintenant, créez un fichier `index.md` à l'intérieur du répertoire `introduction`. Ce fichier `index.md` contiendra les contenus du billet. - Ajoutez l'[extrait de contenus](https://raw.githubusercontent.com/hugo-toha/hugo-toha.github.io/source/content/posts/introduction/index.md) suivant dans le fichier `index.md` récemment créé. -Désormais, votre billet devrait apparaître à `http://localhost:1313/posts` et votre section `Billets Récents` devrait aussi afficher la carte de ce billet. Pour traduire ce billet, créez simplement un nouveau fichier `index..md` dans le même répertoire. Puis, ajoutez le contenu traduit dedans. +Désormais, votre billet devrait apparaître à `http://localhost:1313/posts` et votre section `Billets Récents` devrait également afficher votre billet comme une carte. Pour traduire ce billet, créez simplement un nouveau fichier `index..md` dans le même répertoire. Puis, ajoutez le contenu traduit dedans. -Pour plus de billets d'échantillon, s'il vous plaît consultez [ici](https://github.com/hugo-toha/hugo-toha.github.io/tree/source/content/posts). +Pour plus de billets d'échantillon, regardez par [ici](https://github.com/hugo-toha/hugo-toha.github.io/tree/source/content/posts) s'il vous plaît. ### Et ensuite ? A ce stade, votre site doit avoir une apparence similaire au [site d'exemple](https://hugo-toha.github.io/). Maintenant, il est temps de déployer votre site. Vous pouvez suivre les guides de déploiement ci-dessous: -- [Déployer dans Github Pages](https://toha-guides.netlify.app/posts/getting-started/github-pages/) -- [Déployer dans Netlify](https://toha-guides.netlify.app/posts/getting-started/netlify/) +- [Déployer dans Github Pages](https://toha-guides.netlify.app/fr/posts/getting-started/github-pages/) +- [Déployer dans Netlify](https://toha-guides.netlify.app/fr/posts/getting-started/netlify/) diff --git a/content/posts/getting-started/prepare-site/index.md b/content/posts/getting-started/prepare-site/index.md index ceea4d37..15cd42fc 100644 --- a/content/posts/getting-started/prepare-site/index.md +++ b/content/posts/getting-started/prepare-site/index.md @@ -25,7 +25,7 @@ Now, make sure that you have [Hugo](https://gohugo.io/getting-started/installing hugo new site ./ --format=yaml --force ``` -This command will create a basic hugo site structure. Here, `-f=yaml` flag tells hugo to create configuration file in YAML format and `--force` flag forces hugo to create a site even if the target directory is not empty. It will create `hugo.yaml` file that will hold the all the necessary configurations for your site. +This command will create a basic hugo site structure. Here, `--format=yaml` flag tells hugo to create configuration file in YAML format and `--force` flag forces hugo to create a site even if the target directory is not empty. It will create `hugo.yaml` file that will hold the all the necessary configurations for your site. ### Add Theme diff --git a/content/posts/getting-started/theme-update/index.fr.md b/content/posts/getting-started/theme-update/index.fr.md new file mode 100644 index 00000000..95713e60 --- /dev/null +++ b/content/posts/getting-started/theme-update/index.fr.md @@ -0,0 +1,78 @@ +--- +title: "Automatiser la mise à jour du thème" +date: 2020-06-08T20:00:15+06:00 +author: + name: Nicolas Dietlin + image: images/author/nicolas.jpg +menu: + sidebar: + name: MAJ auto du thème + identifier: getting-started-theme-update + parent: getting-started + weight: 40 +--- + +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. + +### Configurer Github Workflow + +Maintenant, créez un fichier `theme-update.yml` dans le répertoire `.github/workflows` de votre dépôt avec le contenu suivant: + +```yaml +name: "Theme Update" + +on: + schedule: + - cron: "0 0 * * *" + +jobs: + update-theme: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4.1.1 + with: + ref: main + + - name: Setup Node + uses: actions/setup-node@v4 + with: + node-version: 18 + + - name: Setup Hugo + uses: peaceiris/actions-hugo@v2.6.0 + with: + hugo-version: "latest" + extended: true + + - name: Update hugo modules + run: | + # update to latest version of all modules + hugo mod get -u + + # update the npm dependencies + hugo mod npm pack + + # cleanup go.sum file + hugo mod tidy + + - name: Install node modules + run: npm install + + - name: Build + run: | + # build the site + hugo --minify + # remove file generated by the build + rm -rf public/ + + - name: Create Pull Request + uses: peter-evans/create-pull-request@v5 + with: + base: main + title: Update theme + labels: automerge +``` + +Vous êtes bien pour vous lancer. A partir de maintenant, cette action s'exécutera quotidiennement et génèrera une Pull Request si des mises à jour du thème sont détectées. + +From now on, this action will execute on a daily basis and generate a Pull Request if any updates to the theme are detected. diff --git a/content/posts/translation/_index.fr.md b/content/posts/translation/_index.fr.md new file mode 100644 index 00000000..ea485995 --- /dev/null +++ b/content/posts/translation/_index.fr.md @@ -0,0 +1,8 @@ +--- +title: Traduction +menu: + sidebar: + name: Traduction + identifier: translation + weight: 500 +--- diff --git a/content/posts/translation/new-language/index.fr.md b/content/posts/translation/new-language/index.fr.md new file mode 100644 index 00000000..d038307e --- /dev/null +++ b/content/posts/translation/new-language/index.fr.md @@ -0,0 +1,162 @@ +--- +title: "Comment ajouter un langage non supporté ?" +date: 2024-01-15T06:20:50+06:00 +author: + name: BernatBC + image: images/author/bernatbc.png +menu: + sidebar: + name: Ajout d'une nouvelle langue + identifier: new-language + parent: translation + weight: 510 +--- + +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 `config.yaml`, et les répertoires tel que `data`, `content`, etc. + +Après cela, vous pouvez créer le fichier `.toml` dans le répertoire `i18n`. Dans ce [répertoire](https://github.com/hugo-toha/hugo-toha.github.io/tree/gh-pages/flags/1x1), vous pouvez trouver tous les codes de langue avec le drapeau qui apparaît avec ce code. + +## Traduire les éléments de l'UI + +A l'intérieur d'un nouveau fichier, copiez simplement le contenu suivant, et remplacez le contenu entre guillemets avec le nom de la langue désirée. + +{{< alert type="warning" >}} +Si le contenu ci-dessous devient obsolète, vous pouvez copier les contenus depuis le fichier [en](https://github.com/hugo-toha/toha/blob/main/i18n/en.toml). +{{< /alert >}} + +```toml +# More documentation here: https://github.com/nicksnyder/go-i18n +[home] +other = "Home" + +[posts] +other = "Posts" + +[toc_heading] +other = "Table of Contents" + +[tags] +other = "Tags" + +[categories] +other = "Categories" + +[at] +other = "at" + +[resume] +other = "My resume" + +[navigation] +other = "Navigation" + +[contact_me] +other = "Contact me:" + +[email] +other = "Email" + +[phone] +other = "Phone" + +[newsletter_text] +other = "Stay up to date with email notification" + +[newsletter_input_placeholder] +other = "Enter email" + +[newsletter_warning] +other = "By entering your email address, you agree to receive the newsletter of this website." + +[submit] +other = "Submit" + +[hugoAttributionText] +other = "Powered by" + +[prev] +other = "Prev" + +[next] +other = "Next" + +[share_on] +other = "Share on" + +[improve_this_page] +other = "Improve this page" + +[out_of] +other = "out of" + +[publications] +other = "Publications" + +[taken_courses] +other = "Taken Courses" + +[course_name] +other = "Course Name" + +[total_credit] +other = "Total Credit" + +[obtained_credit] +other = "Obtained Credit" + +[extracurricular_activities] +other = "Extracurricular Activities" + +[show_more] +other = "Show More" + +[show_less] +other = "Show Less" + +[responsibilities] +other = "Responsibilities:" + +[present] +other = "Present" + +[comments_javascript] +other = "Please enable JavaScript to view the" + +[comments_by] +other = "comments powered by" + +[read] +other = "Read" + +[project_star] +other = "Star" + +[project_details] +other = "Details" + +[err_404] +other = "The page you are looking for is not there yet." + +[more] +other = "More" + +[view_certificate] +other = "View Certificate" + +[notes] +other = "Notes" + +[disclaimer_text] +other = "Liability Notice" + +[search] +other = "Search" + +[minute] +one = "minute" +other = "minutes" +``` diff --git a/content/posts/writing-posts/_index.fr.md b/content/posts/writing-posts/_index.fr.md new file mode 100644 index 00000000..2bd00595 --- /dev/null +++ b/content/posts/writing-posts/_index.fr.md @@ -0,0 +1,8 @@ +--- +title: Rédaction de billets +menu: + sidebar: + name: Rédaction de billets + identifier: writing-post + weight: 200 +--- \ No newline at end of file diff --git a/content/posts/writing-posts/mermaid/index.fr.md b/content/posts/writing-posts/mermaid/index.fr.md index ccec77ab..7eaad188 100644 --- a/content/posts/writing-posts/mermaid/index.fr.md +++ b/content/posts/writing-posts/mermaid/index.fr.md @@ -10,10 +10,10 @@ menu: mermaid: true --- -This theme comes with built in mermaid support powered by [maemaidj-js](https://mermaid-js.github.io/mermaid). To enable mermaid for a page, you have to put `mermaid: true` in your page front-matter. For example, this page has the following front-matter: +Ce thème est construit avec le support de Mermaid propulsé par [maemaidj-js](https://mermaid-js.github.io/mermaid). Pour activer mermail pour une page, vous devez mettre `mermaid: true` dans le front-matter de votre page. Par exemple, cette page à le front-matter suivant: ```yaml -title: "Mermaid Support" +title: "Support de Mermaid" date: 2022-03-14T06:15:35+06:00 menu: sidebar: @@ -24,24 +24,24 @@ menu: mermaid: true ``` -Then, you can use `mermaid` short code to add your mermaid content. For example: +Ensuite, vous pouvez utiliser le shortcode `mermaid` pour ajouter du contenu mermaid. Par exemple: ```bash {{}} - # your mermaid content here + # Votre contenu mermaid ici {{}} ``` -The `mermaid` short code accept the following parameters: +Le short code `mermaid` accepte les paramètres suivants: -- **align**: Let's you align your diagram at left, right, or center. The default alignment is center. -- **background:** Let's you change the background color of your diagram. +- **align**: aligne votre diagramme à gauche, à droite, ou au centre. L'alignement par défaut est le centre. +- **background:** change la couleur d'arrière plan de votre diagramme. -## Examples +## Exemples -Here, are few example of different diagram using mermaid. +Voici quelques exemples de différents diagramme utilisant mermaid. -#### Graph +#### Graphique ```bash {{}} @@ -63,7 +63,7 @@ graph LR;
-#### Sequence Diagram +#### Diagramme de séquence ```bash {{}} @@ -97,7 +97,7 @@ sequenceDiagram
-#### Gantt diagram +#### diagramme de Gantt ```bash {{}} @@ -129,7 +129,7 @@ section A section
-#### Class Diagram +#### Diagramme de classes ```bash {{}} @@ -169,7 +169,7 @@ classDiagram
-#### Git Graph +#### Graphique de Git ```bash {{}} @@ -213,7 +213,7 @@ merge newbranch
-#### ER Diagram +#### Diagramme ER ```bash {{}} diff --git a/content/posts/writing-posts/using-emoji/index.fr.md b/content/posts/writing-posts/using-emoji/index.fr.md new file mode 100644 index 00000000..a622c9f0 --- /dev/null +++ b/content/posts/writing-posts/using-emoji/index.fr.md @@ -0,0 +1,51 @@ +--- +title: "Utilisation d'Emoji" +date: 2020-06-08T06:15:25+06:00 +author: + name: Nicolas Dietlin + image: images/author/nicolas.jpg +menu: + sidebar: + name: Utilisation d'Emoji + identifier: writing-post-using-emoji + parent: writing-post + weight: 60 +--- + +Emoji peut être activé dans un projet Hugo de plusieurs façons. + +La fonction [`emojify`](https://gohugo.io/functions/emojify/) peut être appelée directement dans les templates ou par [shortcodes en ligne](https://gohugo.io/templates/shortcode-templates/#inline-shortcodes). + +Pour activer globallement Emoji, paramètrez `enableEmoji` à `true` dans la [configuration](https://gohugo.io/getting-started/configuration/) de votre site et vous pouvez ensuite taper des codes raccourcis d'Emoji directement dans les contenus de vos fichiers; par exemple: + +

🙈 :see_no_evil: 🙉 :hear_no_evil: 🙊 :speak_no_evil:

+
+ +L'[aide mémoire Emoji](https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md) est une référence utile pour les codes emoji. + +*** + +**N.B.** Les étapes ci-dessus active les caractères Unicode Standard Emoji dans Hugo, cepandant, le rendu de ces glyphes dépend du navigateur et de la plateforme. Pour styler l'emoji vous pouvez utiliser une police emoji tierce ou un empilement de polices; par exemple: + +{{< highlight html >}} +.emoji { +font-family: Apple Color Emoji,Segoe UI Emoji,NotoColorEmoji,Segoe UI Symbol,Android Emoji,EmojiSymbols; +} +{{< /highlight >}} + +{{< css.inline >}} + +{{< /css.inline >}} +