ZitouneAnticip

Personnalisation du thème memE

“Découvrez comment personnaliser le thème memE pour Hugo.”
 hugo  11 min.

Introduction

Un site web est un reflet de l’identité de son créateur ou de son propriétaire. Dans cet article, nous allons vous guider à travers le processus de personnalisation du thème memE pour Hugo. Les principes discutés ici peuvent être extrapolés pour personnaliser d’autres aspects de votre site.

Le fichier config.toml, situé à la racine de votre site web (plus précisément sur votre bureau à l’emplacement suivant : /www/template/config.toml), c’est le cœur de la configuration globale de votre site Hugo.

Dans ce tutoriel nous allons détailler les fichiers clés nécessaires pour cette personnalisation et expliquer comment les modifier pour obtenir l’apparence et les fonctionnalités que vous souhaitez pour votre site.

Personnalisation du titre du site

Le titre de votre site est défini par défaut dans le fichier config.toml. Pour le personnaliser, vous devez modifier la valeur entre les guillemets :

1
2
3

# www/template/config.toml
# Site Settings
title = "Hugo Theme MemE"

Par exemple, pour changer le titre en “Mon Super Site”, vous devez modifier le fichier comme suit :

1
2
3

# www/template/config.toml
# Site Settings
title = "Mon Super Site"

Une fois cette modification effectuée et enregistrée, le titre de votre site sera désormais “Mon Super Site”.

Le Copyright est activé par défaut et comporte plusieurs options :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

# www/template/config.toml
# Site Settings
copyright = "CC BY-NC-SA 4.0"

# Post Copyright
enablePostCopyright = true
displayPostCopyright = true

# Footer
displayCopyleftSymbol = false
displayCopyrightSymbol = true
displaySiteCopyright = true

La valeur du Copyright est définie entre les guillemets. Il est activé par enablePostCopyright = true et son affichage est possible par displayPostCopyright = true.

Il est important de noter que si enablePostCopyright est défini sur false, aucun affichage ne sera effectué, même si displayPostCopyright est défini sur true. De même, si enablePostCopyright est défini sur true mais que displayPostCopyright est défini sur false, aucun affichage ne sera effectué.

Il faut également noter que les options modifiées dans la section “Post Copyright” n’affecteront que les éléments dans les articles de votre site, tandis que les options modifiées dans la section “Footer” n’affecteront que les éléments du bas de page du site.

Ainsi, il est tout à fait possible de paramétrer son site à sa convenance en affichant le Copyright sur :

  • chaque bas de page ainsi que les articles,
  • soit le bas de page ou les articles,
  • ni l’un ni l’autre.

Exploration des options pertinentes

Le fichier config.toml contient une multitude d’options que vous pouvez parcourir à votre guise. Cependant, pour vous faciliter la tâche, voici une sélection des options les plus pertinentes, accompagnées de leurs valeurs par défaut. Ces options vous permettent de définir divers aspects de votre site, tels que le nom du site, la description, l’e-mail, le langage, la page par défaut, etc. De plus, elles vous offrent la possibilité d’activer ou de désactiver certaines fonctionnalités ou affichages. Parmi ces options, vous trouverez :

  • Plusieurs options concernant les publications (Post), les partages (Share), etc.
  • Les commentaires
  • Google Analytics

Ces options sont autant d’outils à votre disposition pour personnaliser votre site selon vos préférences et vos besoins. N’hésitez pas à les explorer et à expérimenter avec elles pour créer le site qui vous ressemble.

Voici la liste des options que j’ai jugées les plus pertinentes :

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153

# Site Settings

baseURL = "https://example.com/"
title = "Hugo Theme MemE"
languageCode = "en"
# Copyright information (Markdown supported)
copyright = "[CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.en)"

# i18n
defaultContentLanguage = "en"
______________________________________________
# Author’s information
[author]
    name = "reuixiy"
    email = "reuixiy@gmail.com"
    # Motto or introduction (description)
    motto = "Viva La Vida"
    avatar = "/icons/apple-touch-icon.png"
    website = "https://io-oi.me/"
    twitter = "reuixiy"
______________________________________________
# Menu Settings (ajouter une paage home a la barre de navigation)
	# [[menu.main]]
    #     pageref = "/"
    #     name = "Home"
    #     weight = 1
    #     pre = "internal"
    #     post = "home"
______________________________________________
# Theme Settings (modifie couleur header)
headerBackground = "linear-gradient(90deg, #f795331a 0, #f370551a 15%, #ef4e7b1a 30%, #a166ab1a 44%, #5073b81a 58%, #1098ad1a 72%, #07b39b1a 86%, #6dba821a 100%)"
#headerBackground = "linear-gradient(90deg, hsl(40, 4.2%, 13.9%) 0, couleur-fin 100%)"
______________________________________________
# Homepage Layout (definir page acceuil)
homeLayout = "posts"
______________________________________________
# Site Info
siteLogo = "/icons/apple-touch-icon.png"
siteDescription = "MemE is a powerful and highly customizable GoHugo theme for personal blogs."
siteCreatedTime = "1969-07-20T20:17:43+00:00"
siteTwitter = "reuixiy"
______________________________________________
# Dark Mode
enableDarkMode = true
______________________________________________
# Comments
enableComments = false
autoLoadComments = false
______________________________________________
# Google Analytics
enableGoogleAnalytics = false
trackingCodeType = "gtag"
# Note: gtag or analytics
trackingID = ""
______________________________________________
# Google Site Verification
googleSiteVerification = ""
______________________________________________
# Post Settings
primaryColorLight = "220, 90%, 56%"
primaryColorDark = "201, 65%, 62%"
______________________________________________
# Post Description
displayPostDescription = true
______________________________________________
# Post Meta Info
enablePostMeta = true
enablePostMetaInHome = true
postMetaDateFormat = "2006.1.2"
displayPublishedDate = true
displayModifiedDate = true
displayExpiredDate = true
displayCategory = true
displayWordCount = true
displayReadingTime = true
displayBusuanziPagePV = false
busuanziPagePVIcon = "eye"
______________________________________________
# Table of Contents (génération automatique de la table des matières (TOC) pour vos articles ou pages)
enableTOC = false 
______________________________________________
# Image Hosting
enableImageHost = false
______________________________________________
# Video Hosting
enableVideoHost = false
______________________________________________
## Font Family
fontFamilyTitle = "'Comfortaa', sans-serif"
fontFamilyHeadings = "'Comfortaa', sans-serif"
fontFamilyCode = "'Source Code Pro', monospace"
fontFamilyBody = "'IBM Plex Serif', serif"
______________________________________________
## Paragraph Indents
enableParagraphIndent = true
______________________________________________
# Drop Cap (Grandde lettre premier paragraphe)
enableDropCap = true
______________________________________________
# Post Copyright
enablePostCopyright = true
displayPostCopyright = true
______________________________________________
# Post Updated Badge
enablePostUpdatedBadge = true
displayUpdatedBadge = true
______________________________________________
# Post Gitinfo
enablePostGitInfo = false
______________________________________________
# Post Share
enablePostShare = true
displayPostShare = true
shareOnTwitter = true
shareOnFacebook = true
shareOnLinkedIn = true
shareOnTelegram = true
shareOnWeibo = false
shareOnDouban = false
shareOnQQ = false
shareOnQzone = false
______________________________________________
# Related Posts
enableRelatedPosts = true
displayRelatedPosts = true
______________________________________________
# Post Tags
enablePostTags = true
postTagsIcon = "tag"
______________________________________________
# Footer
enableFooter = true
displayFooter = true
displayFooterInHome = true
displayCopyleftSymbol = false
displayCopyrightSymbol = true
displaySiteCreatedYear = true
iconBetweenYearAndAuthor = "heart"
iconColor = "#f06292"
iconAnimation = true
displaySiteAuthorName = true
displayPoweredBy = true
displaySiteCopyright = true
# Socials
enableSocials = true
______________________________________________
# Force HTTPS Redirection
enableForceHTTPS = false
______________________________________________
# 404 Page
fofPoster = ""
fofVideoWebm = ""
fofVideoMp4 = ""

Personnalisation du thème grâce à un script automatisé

Pour vous éviter de chercher et d’éditer manuellement chaque option, j’ai conçu un script qui vous permet de faire les modifications via un système automatique de questions-réponses.

Le script et son utilité

  1. Prérequis : Avant d’exécuter le script, vous devez installer Python et le module tomlkit avec pip en utilisant la commande pip install tomlkit. Ce module permet de lire et d’écrire des fichiers TOML, qui sont utilisés par Hugo pour la configuration.

  2. Chargement du fichier de configuration : Le script ouvre le fichier config.toml qui se trouve à la racine de votre site web (www/template/config.toml) et charge son contenu.

  3. Paramètres à configurer : Une liste de paramètres à configurer est définie. Ces paramètres correspondent aux clés dans le fichier config.toml.

  4. Boucle sur les paramètres : Pour chaque paramètre dans la liste, le script récupère la valeur actuelle du paramètre dans le fichier config.toml et demande à l’utilisateur d’entrer une nouvelle valeur.

  5. Mise à jour des paramètres : Si l’utilisateur entre une nouvelle valeur, le script met à jour la valeur du paramètre dans le fichier config.toml. Si la valeur actuelle est un booléen, le script convertit la nouvelle valeur en booléen également.

  6. Sauvegarde du fichier de configuration : Enfin, le script tente d’écrire les nouvelles données de configuration dans le fichier config.toml. Si l’opération réussit, un message de succès est affiché. Sinon, un message d’erreur est affiché.

Il suffit d’exécuter le script dans le même répertoire où se trouve le fichier config.toml. Le script est disponible ici.

Une fois les options personnalisées, vous pouvez démarrer votre serveur :

  • Via l’extension Font Matter :
    • Cliquez sur démarrer le serveur.
    • Cliquez sur prévisualiser le site ou rendez-vous sur http://localhost:1313/.
  • Via le terminal :
    • Avec la commande cd, placez-vous dans votre dossier qui se situe sur votre bureau dans \www\template\.
    • Exécutez la commande hugo server.
    • Rendez-vous sur http://localhost:1313/.

Avec ce script, la personnalisation de votre thème Hugo devient un jeu d’enfant ! Profitez-en pour explorer toutes les possibilités qu’il offre.

Download

personnaliseOptionsPertinentes.zip

CodeSource

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171

# Permet de personnalisé (modifier) les options pertinentes du fichier config.toml 

# Prérequis python3: pip install tomlkit
# Executer le script dans le même dossier que le fichier config.toml

import tomlkit
import os

# Chemin vers le fichier config.toml
config_file_path = 'config.toml'

# Charger les valeurs actuelles depuis le fichier config.toml
with open(config_file_path, 'r', encoding='utf-8') as config_file:
    config_data = tomlkit.loads(config_file.read())

# Liste des paramètres à configurer
params_to_configure = [
    # Site Settings
    'baseURL',
    'title',
    'languageCode',
    'copyright',
    # i18n
    'defaultContentLanguage',
    # Author’s information
    'author.name',
    'author.email',
    'author.motto',
    'author.avatar',
    'author.website',
    'author.twitter',
    # Menu Settings (ajouter une paage home a la barre de navigation)
        # [[menu.main]]
        #     pageref = "/"
        #     name = "Home"
        #     weight = 1
        #     pre = "internal"
        #     post = "home"
    # params
    'params.headerBackground',
    'params.homeLayout',
    # Site Info
    'params.siteLogo',
    'params.siteDescription',
    'params.siteCreatedTime',
    'params.siteTwitter',
    # Dark Mode
    'params.enableDarkMode',
    # Comments Valine
    'params.enableComments',
    'params.autoLoadComments',
    # Google Analytics
    'params.enableGoogleAnalytics',
    'params.trackingCodeType',
    # Note: gtag or analytics
    'params.trackingID',
    # Google Site Verification
    'params.googleSiteVerification',
    # Post Settings
    'params.primaryColorLight',
    'params.primaryColorDark',
    # Post Description
    'params.displayPostDescription',
    # Post Meta Info
    'params.enablePostMeta',
    'params.enablePostMetaInHome',
    'params.postMetaDateFormat',
    'params.displayPublishedDate',
    'params.displayModifiedDate',
    'params.displayExpiredDate',
    'params.displayCategory',
    'params.displayWordCount',
    'params.displayReadingTime',
    'params.displayBusuanziPagePV',
    'params.busuanziPagePVIcon',
    # Table of Contents (génération automatique de la table des matières (TOC) pour vos articles ou pages)
    'params.enableTOC',
    # Image Hosting
    'params.enableImageHost',
    # Video Hosting
    'params.enableVideoHost',
    ## Font Family
    'params.fontFamilyTitle',
    'params.fontFamilyHeadings',
    'params.fontFamilyCode',
    'params.fontFamilyBody',
    ## Paragraph Indents
    'params.enableParagraphIndent',
    # Drop Cap (Grande lettre premier paragraphe)
    'params.enableDropCap',
    # Post Copyright
    'params.enablePostCopyright',
    'params.displayPostCopyright',
    # Post Updated Badge
    'params.enablePostUpdatedBadge',
    'params.displayUpdatedBadge',
    # Post Gitinfo
    'params.enablePostGitInfo',
    # Post Share
    'params.enablePostShare',
    'params.displayPostShare',
    'shareOnTwitter',
    'shareOnFacebook',
    'shareOnLinkedIn',
    'shareOnTelegram',
    'shareOnDouban',
    'shareOnQQ',
    'shareOnQzone',
    # Related Posts
    'params.enableRelatedPosts',
    'params.displayRelatedPosts',
    # Post Tags
    'params.enablePostTags',
    'params.postTagsIcon',
    # Footer
    'params.enableFooter',
    'params.displayFooter',
    'params.displayFooterInHome',
    'params.displayCopyleftSymbol',
    'params.displayCopyrightSymbol',
    'params.displaySiteCreatedYear',
    'params.iconBetweenYearAndAuthor',
    'params.iconColor',
    'params.iconAnimation',
    'params.displaySiteAuthorName',
    'params.displayPoweredBy',
    'params.displaySiteCopyright',
    # Socials
    'params.enableSocials',
    # Force HTTPS Redirection
    'params.enableForceHTTPS',
    # 404 Page
    'params.fofPoster',
    'params.fofVideoWebm',
    'params.fofVideoMp4',
]

# Boucle pour demander à l'utilisateur de configurer chaque paramètre
for param in params_to_configure:
    current_value = config_data
    for sub_param in param.split('.'):
        current_value = current_value.get(sub_param, '')

    # Utilisez `isinstance` pour détecter les booléens et les maintenir en tant que tels
    if isinstance(current_value, bool):
        new_value = input(f'Nouvelle valeur pour {param} ({str(current_value)}): ')
    else:
        new_value = input(f'Nouvelle valeur pour {param} ({current_value}): ')
        # ou pour afficher vide au lieu d'afficher une valeur vide
        # new_value = input(f'Nouvelle valeur pour {param} (vide): ')

    if new_value.strip():
        param_hierarchy = param.split('.')
        param_name = param_hierarchy[-1]
        parent_param = config_data
        for sub_param in param_hierarchy[:-1]:
            parent_param = parent_param.setdefault(sub_param, {})
        
        # Si le type actuel est un booléen, convertissez la réponse de l'utilisateur en booléen
        if isinstance(current_value, bool):
            new_value = new_value.lower() == 'true'

        parent_param[param_name] = new_value

# Sauvegarder les modifications dans le fichier config.toml
try:
    with open(config_file_path, 'w', encoding='utf-8') as config_file:
        config_file.write(config_data.as_string())
    print('Configuration mise à jour avec succès.')
except Exception as e:
    print(f'Une erreur est survenue lors de la sauvegarde de la configuration : {str(e)}')

J’espère que cet article vous a été utile et que vous êtes maintenant plus à l’aise avec la personnalisation de votre site Hugo. N’hésitez pas à partager vos retours et vos propres astuces de personnalisation. Bonne personnalisation !

updatedupdated2023-09-302023-09-30

Lire aussi :