diff --git a/content/posts/configuration/site-parameters/index.fr.md b/content/posts/configuration/site-parameters/index.fr.md new file mode 100644 index 00000000..6a7e36ed --- /dev/null +++ b/content/posts/configuration/site-parameters/index.fr.md @@ -0,0 +1,211 @@ +--- +title: "Configuration des paramètres du site" +date: 2020-06-08T06:20:55+06:00 +menu: + sidebar: + name: Paramètres du site + identifier: configuration-site-parameters + parent: configuration + weight: 105 +--- + +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. + +### Ajouter une image d'arrière plan + +D'abord, on va paramètrer un arrière plan sur votre site. Mettez l'image d'arrière plan désirée dans le répertoire `assets/images`. Ensuite, ajoutez ce qui suit dans la section `params` de votre fichier `config.yaml`. + +```yaml +background: "images/" +``` + +### Ajouter un logo à votre site + +Maintenant, ajoutons un logo pour votre site. Vous devez fournir deux logos différents. Un pour la barre de navigation transparente et un autre pour la barre de navigation non transparente. Placez vos logos dans le répertoire `assets/images` et ajoutez ce qui suit dans la section `params` du fichier `config.yaml`. + +```yaml +# The inverted logo will be used in the initial transparent navbar and +# the main logo will be used in the non-transparent navbar. +logo: + main: images/main-logo.png + inverted: images/inverted-logo.png + favicon: images/favicon.png +``` + +### Activer les articles de blog + +Si vous voulez écrire quelques articles de blog, vous devez d'abord l'activer. Activons la publication d'articles de blog en ajoutant ce qui suit dans la section `params` de votre fichier `config.yaml`. + +```yaml +enableBlogPost: true +``` + +### Activer `Table Of Contents` + +Maintenant, si vous voulez afficher la section `Table Of Contents` dans votre article de blog, vous devez d'abord l'activer dans la section `params` de votre fichier `config.yaml`. + +```yaml +enableTOC: true +``` +Vous pouvez également contrôler le niveau de votre table des matières en ajoutant la configuration suivante dans la section `markup` de votre fichier `config.yaml`. + +```yaml +markup: + tableOfContents: + startLevel: 2 + endLevel: 6 + ordered: false +``` + +Ici, nous avons configuré notre table des matières pour montrer tous les titres à partir de `h2` jusqu'à `h6`. + +### Activer le bouton `` + +Si vous voulez fournir à vos visiteurs un moyen facile d'améliorer un article (par exemple une faute de frappe, un correctif d'indentation, etc.), vous pouvez activer le bouton `` en ajoutant l'URL de votre dépôt Git dans la section `params` de votre fichier `config.yaml`. + +```yaml +gitRepo: +``` + +Cela ajoutera un bouton labelisé `Improve This Page` au pied de chaque billet. Le bouton redirigera l'utilisateur directement vers le formulaire d'édition de Github de la page. + +Si vous branche par défaut ne s'appelle pas `main`, alors vous aurez besoin d'ajouter votre branche git par défaut dans la section `params` de votre fichier `config.yaml`. +```yaml +gitBranch: +``` + +### Activer/Désactiver la Newsletter + +La fonctionnalité de newsletter supporte seulement Mailchimp actuellement. +Ajoutez ce qui suit dans la section `params` du fichier `config.yaml`. + +```yaml +newsletter: + enable: true + provider: mailchimp + mailchimpURL: https://github.us1.list-manage.com/subscribe/post?u=19de52a4603135aae97163fd8&id=094a24c76e +``` + +Si vous ne voulez pas utliser la fonctionnalité de newsletter, vous pouvez la masquer en ajoutant ce qui suit dans la section `params` du fichier `config.yaml`. + +```yaml +newsletter: + enable: false +``` + +### Activer le RAW HTML dans le fichier Markdown + +Si vous voulez utiliser le RAW HTML dans vos fichiers markdown, vous devez activier le rendu non sécurisé. Sinon, Hugo n'affichera pas le rendu HTML. Vous pouvez activer le rendu markdown non sécurisé en ajoutant les paramètres `goldmark` suivants dans la section `markup` du fichier `config.yaml`. + +```yaml +markup: + goldmark: + renderer: + unsafe: true +``` + +### Ajouter les informations de l'auteur + +Maintenant, fournissons vos informations de base. Créez un fichier `author.yaml` dans le répertoire `/data` et ajoutez-y les informations sur l'auteur. + +```yaml +# some information about you +name: "John Doe" +nickname: "John" +# greeting message before your name. it will default to "Hi! I am" if not provided +greeting: "Hi, I am" +image: "images/author/john.png" +# give your some contact information. they will be used in the footer +contactInfo: + email: "johndoe@example.com" + phone: "+0123456789" + github: johndoe + linkedin: johndoe + +# some summary about what you do +summary: + - I am a Developer + - I am a Devops + - I love servers + - I work on open-source projects + - I love to work with some fun projects +``` + +> Note: Les paramètres `contactInfo` utiliseront le paramètre `icon` pour trouver l'icône. Ce paramètre doit correspondre au nom de l'icône géniale [examples](https://fontawesome.com/search?o=r&f=brands) + +### Ajouter l'avis du droit d'auteur + +On va jouter un avis de droit d'auteur pour votre site. Ca sera affiché en bas du pied de page. Créez un fichier `site.yaml` dans votre répertoire `data` et ajoutez-y la section suivante. + +```yaml +copyright: © 2020 Copyright. +``` + +### La description du site + +Maintenant, ajoutez une description de votre site qui aidera les moteurs de recherche à trouver votre site. Ajoutez une section de description dans votre votre fichier `site.yaml`. + +```yaml +# Meta description for your site. This will help the search engines to find your site. +description: Example site for hugo theme Toha. +``` + +### Ajout d'un menu personnalisé + +Si vous voulez ajouter quelques menus personnalisé dans la barre de navigation, vous pouvez facilement les ajouter par l'ajout de ce qui suit dans le fichier `site.yaml`. + +Les menus personnalisés sont visibles dans la barre de navigation par défaut. Pour les masquer, paramètrez `hideFromNavbar` sur `true`. Les menus personnalisés sont masqués par défaut dans la zone de navigation du pied de page. Pour afficher un élément de menu personnalisé dans le pied de page, paramètrez sa propriété `showOnFooter` sur `true`. + +```yaml +customMenus: +- name: Notes + url: https://hossainemruz.gitbook.io/notes/ + hideFromNavbar: false + showOnFooter: true +``` + +Cela peut être particulièrement utile lorsque vous souhaitez ajouter un lien vers un autre site dans votre barre de navigation. + +### Exemple de Section `params` + +Pour terminer, voici la section `params` utilisée dans le site d'exemple. + +```yaml +# Site parameters +params: + # background image of the landing page + background: "images/background.jpg" + + # Provide logos for your site. The inverted logo will be used in the initial + # transparent navbar and the main logo will be used in the non-transparent navbar. + # It will default to the theme logos if not provided. + logo: + main: images/main-logo.png + inverted: images/inverted-logo.png + favicon: images/favicon.png + + # GitHub repo URL of your site + gitRepo: https://github.com/hossainemruz/toha-example-site + + features: + # Enable and configure blog posts + blog: + enable: true + + # specify whether you want to show Table of Contents in reading page + toc: + enable: true + + # Show/hide newsletter section in the footer. Default is "true". + # Currently, it supports "mailchimp". + newsletter: + enable: false + # provider: mailchimp + # mailchimpURL: https://github.us1.list-manage.com/subscribe/post?u=19de52a4603135aae97163fd8&id=094a24c76e + + # Show/hide disclaimer notice in the footer. Default is "false". + disclaimer: + enable: true +``` diff --git a/content/posts/features/index.fr.md b/content/posts/features/index.fr.md index 093311e2..41e4b6ac 100644 --- a/content/posts/features/index.fr.md +++ b/content/posts/features/index.fr.md @@ -23,7 +23,7 @@ Ce thème a été conçu pour être minimaliste et beau. Le schéma de couleur a ### Responsable -Ce thème est totalement responsable. Il est beau et cohérent sur les ordinateurs de bureau, ordinateurs portables, Tablettes, et appareils Mobile. +Ce thème est totalement responsable. Il est beau et cohérent sur les ordinateurs de bureau, ordinateurs portables, Tablettes, et appareils Mobile. {{< img src="images/responsive.png" align="center" >}} @@ -69,4 +69,4 @@ Ca ne répond toujours pas à vos besoins ? Déposez une demande de fonctionnali ### Support multilingue -Ce thème intègre le support de multiples langues. Vous pouvez traduire votre contenu dans de multiples langues facilement pour une meilleure accessibilité. \ No newline at end of file +Ce thème intègre le support de multiples langues. Vous pouvez traduire votre contenu dans de multiples langues facilement pour une meilleure accessibilité. diff --git a/content/posts/getting-started/github-pages/index.fr.md b/content/posts/getting-started/github-pages/index.fr.md index 473908af..7e9133f9 100644 --- a/content/posts/getting-started/github-pages/index.fr.md +++ b/content/posts/getting-started/github-pages/index.fr.md @@ -128,3 +128,4 @@ example.com Une fois la Github Action terminée avec succès, vous pouvez parcourir votre site à `https://`. Notez qu'en naviguant sur `https://.github.io`, il redirigera automatiquement sur `https://`. + diff --git a/content/posts/getting-started/netlify/index.fr.md b/content/posts/getting-started/netlify/index.fr.md index 2411adba..a41b8d16 100644 --- a/content/posts/getting-started/netlify/index.fr.md +++ b/content/posts/getting-started/netlify/index.fr.md @@ -11,7 +11,7 @@ menu: [Netlify](https://www.netlify.com/) 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 montreons le processus pas-à-pas d'un déploiement de site hugo avec Netlify. +Dans ce billet, nous montrerons le processus pas-à-pas d'un déploiement de site hugo avec Netlify. ### Ajouter une configuration de Netlify @@ -68,7 +68,6 @@ Maintenant, connectez-vous sur [netlify](https://www.netlify.com/). Ensuite, ren {{< vs 2 >}} - Une nouvelle pop-up s'ouvrira. Sélectionnez `Github` et authentifiez-vous, avec votre compte Github. {{< img src="images/3.png" align="center" >}} @@ -87,30 +86,30 @@ Maintenant, Netlify vous mènera à la page de déploiement. Sélectionnez la br {{< vs 2 >}} -Now, netlify will start publishing your site immediately. Wait for the publishing process to complete. Once, the site has been published, you can browse your site at the URL automatically generated by netlify. The auto-generated URL has been pointed out by a red rectangle in the screenshot below. +Maintenant, netlify va commencer à publier votre site immédiatement. Attendez que le processus de publication soit achevé. Une fois le site publié, vous pouvez parcourir votre site à l'URL générée automatiquement par netlify. L'URL générée automatiquement a été indiqué par le rectangle rouge sur la capture d'écran ci-dessous. {{< img src="images/6.png" align="center" >}} ### Personnalisation de l'URL -You can easily customize the URL of your site with just few clicks as shown below. +Vous pouvez facilement personnaliser l'URL de votre site en quelques clics seulement comme indiqué ci-dessous. -1. Click the `Domain Setting` button under `Site Overview` tab. +1. Cliquez sur le bouton `Domain Setting` sous l'onglet `Site Overview`. {{< img src="images/7.png" align="center" >}} -2. Now, you can either add your own domain by clicking on `Add custom domain` button or you can just use `.netlify.app` domain. Here, we are going with the later. Click the `options` dropdown and select `Edit site name`. +2. Maintenant, soit vous ajoutez votre propre domaine en cliquant sur le bouton `Add custom domain` ou bien vous pouvez juste utiliser le domaine `.netlify.app`. Ici, c'est ce que nous feront après. Cliquez sur le bouton `options` et sélectionnez `Edit site name`. {{< img src="images/8.png" align="center" >}} {{< vs 2 >}} -3. Alors, donnez à votre site le nom que vous voulez +3. Ensuite, donnez à votre site le nom que vous voulez. {{< img src="images/9.png" align="center" >}} {{< vs 2 >}} -4. Once you have saved the new name, you will see the URL of your site has been updated instantly. Now, you can browse your site at the new URL. +4. Une fois que vous avez sauvegardé le nouveau nom, vous verrez que l'URL de votre site a été mise à jour instantanément. Maintenant, vous pouvez parcourir votre site à la nouvelle URL. {{< img src="images/10.png" align="center" >}} diff --git a/content/posts/getting-started/prepare-site/index.fr.md b/content/posts/getting-started/prepare-site/index.fr.md index 8441ff8f..15dda09c 100644 --- a/content/posts/getting-started/prepare-site/index.fr.md +++ b/content/posts/getting-started/prepare-site/index.fr.md @@ -24,10 +24,10 @@ 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=yaml --force +$ hugo new site ./ -f --format yaml ``` -Cette commande créera une structure de base d'un site hugo. Ici, le flag `-f=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. +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. ### Initialiser le dépôt git diff --git a/content/posts/quickstart/index.fr.md b/content/posts/quickstart/index.fr.md index c5b18111..cc4facae 100644 --- a/content/posts/quickstart/index.fr.md +++ b/content/posts/quickstart/index.fr.md @@ -126,7 +126,7 @@ c. Exécuter le site ```bash hugo server -w -``` +```
@@ -152,9 +152,9 @@ git push origin HEAD ### Et ensuite ? -- Personnaliser l'arrière-plan, le logo, et quelques autres choses de votre site en suivant [ce guide](/posts/configuration/site-parameters/). -- Ajouter des informations sur vous en suivant [ce guide](/posts/configuration/sections/about/). -- Ajouter les informations sur vos compétences en suivant [ce guide](/posts/configuration/sections/skills/). -- Ajouter les informations sur vos expériences en suivant [ce guide](/posts/configuration/sections/experiences). -- Déployer votre site sur Github Page en suivant le guide par [ici](/posts/getting-started/github-pages/). -- Déployer votre site sur Netlify en suivant le guide par [ici](/posts/getting-started/netlify/). +- Personnaliser l'arrière-plan, le logo, et quelques autres choses de votre site en suivant [ce guide](/posts/configuration/site-parameters/index.fr.md). +- Ajouter des informations sur vous en suivant [ce guide](/posts/configuration/sections/about/index.fr.md). +- Ajouter les informations sur vos compétences en suivant [ce guide](/posts/configuration/sections/skills/index.fr.md). +- Ajouter les informations sur vos expériences en suivant [ce guide](/posts/configuration/sections/experiences/index.fr.md). +- Déployer votre site sur Github Page en suivant le guide par [ici](/posts/getting-started/github-pages/index.fr.md). +- Déployer votre site sur Netlify en suivant le guide par [ici](/posts/getting-started/netlify/index.fr.md). diff --git a/content/posts/shortcodes/index.fr.md b/content/posts/shortcodes/index.fr.md index 44504d51..ec478b6b 100644 --- a/content/posts/shortcodes/index.fr.md +++ b/content/posts/shortcodes/index.fr.md @@ -1,73 +1,152 @@ --- -title: "Codes abrégés" + +title: "Les Shortcodes" date: 2023-11-05T14:06:25+02:00 description: "Codes abrégés" menu: sidebar: - name: "Codes abrégés" + name: "Les Shortcodes" identifier: shortcodes weight: 700 hero: boat.jpg --- -Ce billet échantillon est destiné à tester les éléments suivants : + +Ce billet d'échantillon est destiné à tester les éléments suivants : - Manipulation d'une image. - Différents shortcodes. ## Alerte -Les alertes suivantes sont disponibles dans ce thème. +Ce thème propose différents types d'alertes pour votre publication. Par exemple, si on ajoute le code ci-dessous : + +```markdown +{{}} +This is sample alert with `type="success"`. +{{}} +``` + +L'alerte qui apparaîtra ressemblera à ça: {{< alert type="success" >}} -Voici une alerte avec `type="success"`. +This is sample alert with `type="success"`. {{< /alert >}} +Les alertes suivantes sont également disponible dans ce thème. +```markdown +{{}} +This is sample alert with `type="danger"`. +{{}} +``` + {{< alert type="danger" >}} -Voici une alerte avec `type="danger"`. +This is sample alert with `type="danger"`. {{< /alert >}} +```markdown +{{}} +This is sample alert with `type="warning"`. +{{}} +``` + {{< alert type="warning" >}} -Voici une alerte avec `type="warning"`. +This is sample alert with `type="warning"`. {{< /alert >}} +```markdown +{{}} +This is sample alert with `type="info"`. +{{}} +``` {{< alert type="info" >}} -Voici une alerte avec `type="info"`. +This is sample alert with `type="info"`. {{< /alert >}} +```markdown +{{}} +This is sample alert with `type="dark"`. +{{}} +``` + {{< alert type="dark" >}} -Voici une alerte avec `type="dark"`. -{{< /alert >}} +This is sample alert with `type="dark"`. +{{}} + +```markdown +{{}} +This is sample alert with `type="primary"`. +{{}} +``` {{< alert type="primary" >}} -Voici une alerte avec `type="primary"`. +This is sample alert with `type="primary"`. {{< /alert >}} +```markdown +{{}} +This is sample alert with `type="secondary"`. +{{}} +``` + {{< alert type="secondary" >}} -Voici une alerte avec `type="secondary"`. +This is sample alert with `type="secondary"`. {{< /alert >}} ## Image #### Une image sans attributs. +**Code:** + +```markdown +{{}} +``` + +**Résultat:** + {{< img src="/posts/shortcodes/boat.jpg" title="A boat at the sea" >}} {{< vs 3 >}} #### Une image avec les attributs `height` et `width`. +**Code:** + +```markdown +{{}} +``` + +**Résultat:** + {{< img src="/posts/shortcodes/boat.jpg" height="400" width="600" title="A boat at the sea" >}} {{< vs 3 >}} #### Une image centrée avec les attributs `height` et `width`. + +**Code:** + +```markdown +{{}} +``` + +**Résultat:** + {{< img src="/posts/shortcodes/boat.jpg" height="400" width="600" align="center" title="A boat at the sea" >}} {{< vs 3 >}} #### Une image avec l'attribut `float`. +**Code:** + +```markdown +{{}} +``` + +**Résultat:** + {{< img src="/posts/shortcodes/boat.jpg" height="200" width="500" float="right" title="A boat at the sea" >}} Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras egestas lectus sed leo ultricies ultricies. Praesent tellus risus, eleifend vel efficitur ac, venenatis sit amet sem. Ut ut egestas erat. Fusce ut leo turpis. Morbi consectetur sed lacus vitae vehicula. Cras gravida turpis id eleifend volutpat. Suspendisse nec ipsum eu erat finibus dictum. Morbi volutpat nulla purus, vel maximus ex molestie id. Nullam posuere est urna, at fringilla eros venenatis quis. @@ -80,15 +159,34 @@ Ce thème supporte le découpage de la page en autant de colonnes que vous le so #### Diviser en 2 colonnes +**Code:** + +```markdown +{{}} +##### Colonne de gauche + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras egestas lectus sed leo ultricies ultricies. + +--- + +##### Colonne de droite + +Fusce ut leo turpis. Morbi consectetur sed lacus vitae vehicula. Cras gravida turpis id eleifend volutpat. + +{{}} +``` + +**Result:** + {{< split 6 6>}} -##### Colonne de Gauche +##### Colonne de gauche Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras egestas lectus sed leo ultricies ultricies. --- -##### Colonne de Droite +##### Colonne de droite Fusce ut leo turpis. Morbi consectetur sed lacus vitae vehicula. Cras gravida turpis id eleifend volutpat. @@ -96,21 +194,46 @@ Fusce ut leo turpis. Morbi consectetur sed lacus vitae vehicula. Cras gravida tu #### Diviser en 3 colonnes +**Code:** + +```markdown +{{}} +##### Colonne de gauche + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras egestas lectus sed leo ultricies ultricies. + +--- + +##### Colonne du milieu + +Aenean dignissim dictum ex. Donec a nunc vel nibh placerat interdum. + +--- + +##### Colonne de droite + +Fusce ut leo turpis. Morbi consectetur sed lacus vitae vehicula. Cras gravida turpis id eleifend volutpat. + +{{}} +``` + +**Result:** + {{< split 4 4 4 >}} -##### Colonne de Gauche +##### Colonne de gauche Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras egestas lectus sed leo ultricies ultricies. --- -##### Colonne du Milieu +##### Colonne du milieu Aenean dignissim dictum ex. Donec a nunc vel nibh placerat interdum. --- -##### Colonne de Droite +##### Colonne de droite Fusce ut leo turpis. Morbi consectetur sed lacus vitae vehicula. Cras gravida turpis id eleifend volutpat. @@ -120,13 +243,31 @@ Fusce ut leo turpis. Morbi consectetur sed lacus vitae vehicula. Cras gravida tu Donner un espace vertical entre deux lignes. +**Code:** + +```markdown +Voici la ligne 1. +{{< vs 4>}} +Voici la ligne 2. Il devrait y avoir un espace vertical de `4rem` avec la ligne précédente. +``` + +**Résultat:** + Voici la ligne 1. {{< vs 4>}} Voici la ligne 2. Il devrait y avoir un espace vertical de `4rem` avec la ligne précédente. ## Vidéo +**Code:** + +```markdown +{{}} +``` + +**Résultat:** + {{< video src="/videos/sample.mp4" >}} -Vidéo de [Rahul Sharma](https://www.pexels.com/@rahul-sharma-493988) sur [Pexels](https://www.pexels.com). \ No newline at end of file +Vidéo de [Rahul Sharma](https://www.pexels.com/@rahul-sharma-493988) sur [Pexels](https://www.pexels.com). diff --git a/content/posts/supports/index.fr.md b/content/posts/supports/index.fr.md index ee726c8f..e92855aa 100644 --- a/content/posts/supports/index.fr.md +++ b/content/posts/supports/index.fr.md @@ -1,5 +1,5 @@ --- -title: "Les liens de soutien" +title: "Les liens de soutien/donation" date: 2022-03-14T06:00:23+06:00 description: Adding support links in hugo theme Toha menu: @@ -9,7 +9,6 @@ menu: weight: 660 --- - Ce thème supporte l'ajout de liens de soutien/donation sur votre site. Actuellement, les liens de soutien supportés sont: - [Ko-fi](https://ko-fi.com/) diff --git a/content/posts/writing-posts/markdown-syntax/index.fr.md b/content/posts/writing-posts/markdown-syntax/index.fr.md new file mode 100644 index 00000000..76580bc8 --- /dev/null +++ b/content/posts/writing-posts/markdown-syntax/index.fr.md @@ -0,0 +1,156 @@ +--- +title: "Guide Syntaxique Markdown" +date: 2020-06-08T06:15:40+06:00 +hero: /images/posts/writing-posts/code.svg +menu: + sidebar: + name: Guide Markdown + identifier: writing-post-md-guide + parent: writing-post + weight: 30 +--- + +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és avec CSS dans un thème Hugo. + + + +## En-têtes + +Les éléments HTML suivant `

`—`

` représentent six niveaux de titres de section. `

` est le niveau le plus élevé tandis que le `

` est le plus bas. + +# H1 +## H2 +### H3 +#### H4 +##### H5 +###### H6 + +## Paragraphe + +Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat. + +Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat. + +## Bloc de citation + +Les éléments blockquote représentent le contenu qui est coté à partir d'une autre source, éventuellement avec une citation qui doit être dans un élément `footer` ou `cite`, et éventuellement avec des changments en ligne tel que les annotations et les abrévations. + +#### Bloc de citation sans attribution + +> Tiam, ad mint andaepu dandae nostion secatur sequo quae. +> **Notez** que vous pouvez utiliser la *syntaxe Markdown* à l'intérieur d'un bloc de citation. + +#### Bloc de citation avec attribution + +> Don't communicate by sharing memory, share memory by communicating.

+> — Rob Pike[^1] + + +[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015. + +## Tableaux + +Les tableaux ne font pas partie de la spécification de base du Markdown, mais Hugo les supportent hors-des-clous. + + | Name | Age | + | ----- | --- | + | Bob | 27 | + | Alice | 23 | + +#### Markdown en ligne dans les tableaux + +| Inline    | Markdown    | In    | Table | +| ------------------------ | -------------------------- | ----------------------------------- | ------ | +| *italics* | **bold** | ~~strikethrough~~    | `code` | + +## Blocs de code + +#### Bloc de code avec backticks + +``` +html + + + + + Example HTML5 Document + + +

Test

+ + +``` +#### bloc de code indenté avec quatre espaces + + + + + + Example HTML5 Document + + +

Test

+ + + +#### Bloc de code avec code abrégé de mise en évidence d'Hugo +{{< highlight html >}} + + + + + Example HTML5 Document + + +

Test

+ + +{{< /highlight >}} + +## Types de liste + +#### Liste ordonnée + +1. Première point +2. Second point +3. Troisième point + +#### Liste non ordonnée + +* Element de la liste +* Autre élément +* Et un autre élément + +#### listes imbriquées + +* Fruit + * Pomme + * Orange + * Banane +* Selle + * Lait + * Fromage + +## Autres Elements — abbr, sub, sup, kbd, mark + +Ici, vous trouverez d'autres balises HTML décorées par CSS: +``` +GIF est un format d'image bitmap. +``` +GIF est un format d'image bitmap. +``` +H2O +``` +H2O +``` +Xn + Yn = Zn +``` +Xn + Yn = Zn +``` +Pressez CTRL+ALT+Delete pour terminer la session. +``` +Pressez CTRL+ALT+Delete pour terminer la session. +``` +La plupart des salamandres sont nocturnes, et chassent les insectes, les vers, et d'autres petites créatures. +``` +La plupart des salamandres sont nocturnes, et chassent les insectes, les vers, et d'autres petites créatures. \ No newline at end of file diff --git a/content/posts/writing-posts/math/index.fr.md b/content/posts/writing-posts/math/index.fr.md new file mode 100644 index 00000000..ba47a2d6 --- /dev/null +++ b/content/posts/writing-posts/math/index.fr.md @@ -0,0 +1,50 @@ +--- +title: "Paramètres de type Maths" +date: 2020-06-08T06:15:35+06:00 +menu: + sidebar: + name: Paramètre de type Maths + identifier: writing-post-math-guide + parent: writing-post + weight: 40 +math: true +--- + +La notation Mathématique dans un projet Hugo peut être activé en utilisant des librairies JavaScript tierces. + + +Dans cet exemple, nous utiliserons [KaTeX](https://katex.org/) + +- Créez un partiel sous `/layouts/partials/math.html` +- A l'intérieur de cette référence de partiel, l'[Auto-render Extension](https://katex.org/docs/autorender.html) ou héberger ces scripts localement. +- Inclure le partiel dans votre template comme suit: + +``` +{{ if or .Params.math .Site.Params.math }} +{{ partial "math.html" . }} +{{ end }} +``` +- Pour activer KaText globalement mettez le paramètre `math` à `true` dans la configuration du projet. +- Pour activer KaTex par page, incluez le paramètre `math: true` dans le front matter de votre fichier de contenu. + +**Note:** Utilisez le référentiel en ligne des [Fonctions TeX supportées](https://katex.org/docs/supported.html) +{{< math.inline >}} +{{ if or .Page.Params.math .Site.Params.math }} + + + + +{{ end }} +{{}} + +### Exemples +{{< math.inline >}} +

+Inline math: \(\varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887…\) +

+{{}} + +Bloc de math: +$$ + \varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } } +$$ diff --git a/content/posts/writing-posts/mermaid/index.fr.md b/content/posts/writing-posts/mermaid/index.fr.md new file mode 100644 index 00000000..ccec77ab --- /dev/null +++ b/content/posts/writing-posts/mermaid/index.fr.md @@ -0,0 +1,232 @@ +--- +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 +--- + +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: + +```yaml +title: "Mermaid Support" +date: 2022-03-14T06:15:35+06:00 +menu: + sidebar: + name: Mermaid + identifier: writing-post-mermaid + parent: writing-post + weight: 60 +mermaid: true +``` + +Then, you can use `mermaid` short code to add your mermaid content. For example: + +```bash +{{}} + # your mermaid content here +{{}} +``` + +The `mermaid` short code accept the following parameters: + +- **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. + +## Examples + +Here, are few example of different diagram using mermaid. + +#### Graph + +```bash +{{}} +graph LR; + A[Hard edge] -->|Link text| B(Round edge) + B --> C{Decision} + C -->|One| D[Result one] + C -->|Two| E[Result two] +{{}} +``` + +{{< mermaid align="left" >}} +graph LR; + A[Hard edge] -->|Link text| B(Round edge) + B --> C{Decision} + C -->|One| D[Result one] + C -->|Two| E[Result two] +{{< /mermaid >}} + +
+ +#### Sequence Diagram + +```bash +{{}} +sequenceDiagram + participant Alice + participant Bob + Alice->>John: Hello John, how are you? + loop Healthcheck + John->>John: Fight against hypochondria + end + Note right of John: Rational thoughts
prevail! + John-->>Alice: Great! + John->>Bob: How about you? + Bob-->>John: Jolly good! +{{}} +``` + +{{< mermaid >}} +sequenceDiagram + participant Alice + participant Bob + Alice->>John: Hello John, how are you? + loop Healthcheck + John->>John: Fight against hypochondria + end + Note right of John: Rational thoughts
prevail! + John-->>Alice: Great! + John->>Bob: How about you? + Bob-->>John: Jolly good! +{{< /mermaid >}} + +
+ +#### Gantt diagram + +```bash +{{}} +gantt + dateFormat YYYY-MM-DD + title Adding GANTT diagram to mermaid + excludes weekdays 2014-01-10 + +section A section + Completed task :done, des1, 2014-01-06,2014-01-08 + Active task :active, des2, 2014-01-09, 3d + Future task : des3, after des2, 5d + Future task2 : des4, after des3, 5d +{{}} +``` + +{{< mermaid >}} +gantt + dateFormat YYYY-MM-DD + title Adding GANTT diagram to mermaid + excludes weekdays 2014-01-10 + +section A section + Completed task :done, des1, 2014-01-06,2014-01-08 + Active task :active, des2, 2014-01-09, 3d + Future task : des3, after des2, 5d + Future task2 : des4, after des3, 5d +{{< /mermaid >}} + +
+ +#### Class Diagram + +```bash +{{}} +classDiagram + Class01 <|-- AveryLongClass : Cool + Class03 *-- Class04 + Class05 o-- Class06 + Class07 .. Class08 + Class09 --> C2 : Where am i? + Class09 --* C3 + Class09 --|> Class07 + Class07 : equals() + Class07 : Object[] elementData + Class01 : size() + Class01 : int chimp + Class01 : int gorilla + Class08 <--> C2: Cool label +{{}} +``` + +{{< mermaid >}} +classDiagram + Class01 <|-- AveryLongClass : Cool + Class03 *-- Class04 + Class05 o-- Class06 + Class07 .. Class08 + Class09 --> C2 : Where am i? + Class09 --* C3 + Class09 --|> Class07 + Class07 : equals() + Class07 : Object[] elementData + Class01 : size() + Class01 : int chimp + Class01 : int gorilla + Class08 <--> C2: Cool label +{{< /mermaid >}} + +
+ +#### Git Graph + +```bash +{{}} +gitGraph: +options +{ + "nodeSpacing": 150, + "nodeRadius": 10 +} +end +commit +branch newbranch +checkout newbranch +commit +commit +checkout master +commit +commit +merge newbranch +{{}} +``` + +{{< mermaid background="black" align="right" >}} +gitGraph: +options +{ + "nodeSpacing": 150, + "nodeRadius": 10 +} +end +commit +branch newbranch +checkout newbranch +commit +commit +checkout master +commit +commit +merge newbranch +{{< /mermaid >}} + +
+ +#### ER Diagram + +```bash +{{}} +erDiagram + CUSTOMER ||--o{ ORDER : places + ORDER ||--|{ LINE-ITEM : contains + CUSTOMER }|..|{ DELIVERY-ADDRESS : uses +{{}} +``` + +{{< mermaid >}} +erDiagram + CUSTOMER ||--o{ ORDER : places + ORDER ||--|{ LINE-ITEM : contains + CUSTOMER }|..|{ DELIVERY-ADDRESS : uses +{{< /mermaid >}}