Imports tiers

Description#

Par défaut dans le thème, il est possible d’importer des librairies ou du code tiers dans la page html générée, en utilisant la configuration du site.

Les différents types d’imports gérés par le thème sont les suivants:

Type d’importCommentaire
Fichiers SCSS (.scss)
  • Importés dans la balise <head> en tant que <link rel="stylesheet" type="text/css"> après avoir été convertis en CSS par Hugo , regroupés et minifiés dans un fichier css/main.css
  • Les chemins utilisés pour la conversion SCSS:
    • assets/bulma
    • assets/scss
Fichiers CSS (.css)
  • Importés fichier par fichier dans la balise <head> en tant que <link rel="stylesheet" type="text/css"> et minifiés
Fichiers javascript (.js)
  • Importés fichier par fichier en fin de balise <body> en tant que <script type="text/javascript"></script> et minifiés
Modules javascript (.js)
  • Importés fichier par fichier en fin de balise <body> en tant que <script type="module"></script> et minifiés
Les fichiers à importer doivent obligatoirement être définis en tant qu’assets Hugo

Définition d’imports tiers#

Pour définir un fichier à importer il faut utliser la configuration suivante (Cf. lignes surlignées ci-dessous):

hugo.toml ([params] section)
  1[params]
  2  # Chemin des fichiers logo du site
  3  logo                    = "images/logo.png"
  4  logoTouch               = "images/logoTouch.png"
  5  # Chemin du fichier de l'image affichée en cas d'erreur 404
  6  image404                = "images/404.gif"
  7  # Chemin du fichier du favicon du site
  8  favicon                 = "images/favicon.png"
  9  # Aperçu par défaut de la page d'accueil
 10  homeLayout              = "onboarding"
 11  # Ordre du contenu du site (https://gohugo.io/templates/lists/#order-content)
 12  siteContentOrder        = "weight"
 13  # Active/Désactive la table des matières de manière globale (sur tout le site)
 14  toc                     = true
 15  # Active une bannière globale sur toutes les pages du site
 16  globalBanner            = true
 17  # Version courante du site
 18  currentVersion          = "latest"
 19  # Url de la dernière version du site
 20  latestVersionUrl        = "https://jgazeau.github.io/shadocs/"
 21  # Active le mode sombre par défaut
 22  darkMode                = true
 23  # Force la résolution des liens en utilisant la fonction relref (https://gohugo.io/content-management/cross-references/)
 24  enforceRefrelLinks      = true
 25  # Désactive le bouton "Imprimer" dans la barre de navigation
 26  navbarPrintEntry        = false
 27  # Désactive le bouton "QR code" dans la barre de navigation
 28  navbarQRCodeEntry       = false
 29  # Désactive le bouton "Raccourcis" dans la barre de navigation
 30  navbarSchortcutsEntry   = false
 31  # Désactive le bouton "À propos" dans la barre de navigation
 32  navbarInfo              = false
 33  # Liste des raccourcis clavier
 34  # Pour chaque raccourci il faut renseigner les clés suivantes:
 35  # - keys     = [Table des touches de clavier du raccourci](https://developer.mozilla.org/fr/docs/Web/API/KeyboardEvent/key/Key_Values)
 36  # - function = "Nom de la fonction javascript à appeler par le raccourci"
 37  [params.navbar.shortcuts]
 38    # Définition du raccourci d'exemple
 39    [params.navbar.shortcuts.example]
 40      keys     = ["Shift","1"]
 41      function = "scExample"
 42  # Liste des taxonomies
 43  # Pour chaque taxonomie il est possible de renseigner les clés suivantes:
 44  # - icon = "Classes fontawesome associées à la taxonomie"
 45  [params.taxonomies]
 46    [params.taxonomies.categories]
 47      icon = "fa-solid fa-table-cells"
 48  #
 49  # Liste des assets (https://gohugo.io/hugo-pipes/resource-from-template/) à inclures
 50  # Les assets gérés:
 51  # - css                   = [Liste des fichiers CSS]
 52  # - js                    = [Liste des fichiers javascript]
 53  # - jsModules             = [Liste des fichiers modules javascript]
 54  # - fencedcodes.css       = [Liste des fichiers CSS à inclure quand le language d'un bloc de code cloisonné associé est présent dans le contenu de la page]
 55  # - fencedcodes.js        = [Liste des fichiers javascript à inclure quand le language d'un bloc de code cloisonné associé est présent dans le contenu de la page]
 56  # - fencedcodes.jsModules = [Liste des fichiers modules javascript à inclure quand le language d'un bloc de code cloisonné associé est présent dans le contenu de la page]
 57  # - shortcodes.css        = [Liste des fichiers CSS à inclure quand le shortcode associé est présent dans le contenu de la page]
 58  # - shortcodes.js         = [Liste des fichiers javascript à inclure quand le shortcode associé est présent dans le contenu de la page]
 59  # - shortcodes.jsModules  = [Liste des fichiers modules javascript à inclure quand le shortcode associé est présent dans le contenu de la page]
 60  #
 61  [params.includes]
 62    css = [
 63      "css/file1.css",
 64      "css/fileX.css"
 65    ]
 66    js = [
 67      "js/file1.js",
 68      "js/fileX.js"
 69    ]
 70    jsModules = [
 71      "js/modules/file1.js",
 72      "js/modules/fileX.js"
 73    ]
 74  [params.includes.fencedcodes.css]
 75    fencedcode1 = [
 76        "css/fencedcodes/fencedcode1.css"
 77      ]
 78    fencedcodeX = [
 79        "css/fencedcodes/fencedcodeX.css"
 80      ]
 81  [params.includes.fencedcodes.js]
 82    fencedcode1 = [
 83        "js/fencedcodes/fencedcode1.js"
 84      ]
 85    fencedcodeX = [
 86        "js/fencedcodes/fencedcodeX.js"
 87      ]
 88  [params.includes.fencedcodes.jsModules]
 89    fencedcode1 = [
 90        "js/fencedcodes/modules/fencedcode1.js"
 91      ]
 92    fencedcodeX = [
 93        "js/fencedcodes/modules/fencedcodeX.js"
 94      ]
 95  [params.includes.shortcodes.css]
 96    shortcode1 = [
 97        "css/shortcodes/shortcode1.css"
 98      ]
 99    shortcodeX = [
100        "css/shortcodes/shortcodeX.css"
101      ]
102  [params.includes.shortcodes.js]
103    shortcode1 = [
104        "js/shortcodes/shortcode1.js"
105      ]
106    shortcodeX = [
107        "js/shortcodes/shortcodeX.js"
108      ]
109  [params.includes.shortcodes.jsModules]
110    shortcode1 = [
111        "js/shortcodes/modules/shortcode1.js"
112      ]
113    shortcodeX = [
114        "js/shortcodes/modules/shortcodeX.js"
115      ]

Définition d’imports tiers pour les shortcodes#

Le thème offre de plus la possibilité d’importer des librairies ou du code tiers associé à un shortcode. Ces fichiers seront importés uniquement si le shortcode est utilisé dans la page courante, réduisant ainsi le temps de chargement de la page.

Pour définir un fichier à importer, associé à un shortcode, il faut utliser la configuration suivante (Cf. lignes surlignées ci-dessous):

hugo.toml ([params] section)
  1[params]
  2  # Chemin des fichiers logo du site
  3  logo                    = "images/logo.png"
  4  logoTouch               = "images/logoTouch.png"
  5  # Chemin du fichier de l'image affichée en cas d'erreur 404
  6  image404                = "images/404.gif"
  7  # Chemin du fichier du favicon du site
  8  favicon                 = "images/favicon.png"
  9  # Aperçu par défaut de la page d'accueil
 10  homeLayout              = "onboarding"
 11  # Ordre du contenu du site (https://gohugo.io/templates/lists/#order-content)
 12  siteContentOrder        = "weight"
 13  # Active/Désactive la table des matières de manière globale (sur tout le site)
 14  toc                     = true
 15  # Active une bannière globale sur toutes les pages du site
 16  globalBanner            = true
 17  # Version courante du site
 18  currentVersion          = "latest"
 19  # Url de la dernière version du site
 20  latestVersionUrl        = "https://jgazeau.github.io/shadocs/"
 21  # Active le mode sombre par défaut
 22  darkMode                = true
 23  # Force la résolution des liens en utilisant la fonction relref (https://gohugo.io/content-management/cross-references/)
 24  enforceRefrelLinks      = true
 25  # Désactive le bouton "Imprimer" dans la barre de navigation
 26  navbarPrintEntry        = false
 27  # Désactive le bouton "QR code" dans la barre de navigation
 28  navbarQRCodeEntry       = false
 29  # Désactive le bouton "Raccourcis" dans la barre de navigation
 30  navbarSchortcutsEntry   = false
 31  # Désactive le bouton "À propos" dans la barre de navigation
 32  navbarInfo              = false
 33  # Liste des raccourcis clavier
 34  # Pour chaque raccourci il faut renseigner les clés suivantes:
 35  # - keys     = [Table des touches de clavier du raccourci](https://developer.mozilla.org/fr/docs/Web/API/KeyboardEvent/key/Key_Values)
 36  # - function = "Nom de la fonction javascript à appeler par le raccourci"
 37  [params.navbar.shortcuts]
 38    # Définition du raccourci d'exemple
 39    [params.navbar.shortcuts.example]
 40      keys     = ["Shift","1"]
 41      function = "scExample"
 42  # Liste des taxonomies
 43  # Pour chaque taxonomie il est possible de renseigner les clés suivantes:
 44  # - icon = "Classes fontawesome associées à la taxonomie"
 45  [params.taxonomies]
 46    [params.taxonomies.categories]
 47      icon = "fa-solid fa-table-cells"
 48  #
 49  # Liste des assets (https://gohugo.io/hugo-pipes/resource-from-template/) à inclures
 50  # Les assets gérés:
 51  # - css                   = [Liste des fichiers CSS]
 52  # - js                    = [Liste des fichiers javascript]
 53  # - jsModules             = [Liste des fichiers modules javascript]
 54  # - fencedcodes.css       = [Liste des fichiers CSS à inclure quand le language d'un bloc de code cloisonné associé est présent dans le contenu de la page]
 55  # - fencedcodes.js        = [Liste des fichiers javascript à inclure quand le language d'un bloc de code cloisonné associé est présent dans le contenu de la page]
 56  # - fencedcodes.jsModules = [Liste des fichiers modules javascript à inclure quand le language d'un bloc de code cloisonné associé est présent dans le contenu de la page]
 57  # - shortcodes.css        = [Liste des fichiers CSS à inclure quand le shortcode associé est présent dans le contenu de la page]
 58  # - shortcodes.js         = [Liste des fichiers javascript à inclure quand le shortcode associé est présent dans le contenu de la page]
 59  # - shortcodes.jsModules  = [Liste des fichiers modules javascript à inclure quand le shortcode associé est présent dans le contenu de la page]
 60  #
 61  [params.includes]
 62    css = [
 63      "css/file1.css",
 64      "css/fileX.css"
 65    ]
 66    js = [
 67      "js/file1.js",
 68      "js/fileX.js"
 69    ]
 70    jsModules = [
 71      "js/modules/file1.js",
 72      "js/modules/fileX.js"
 73    ]
 74  [params.includes.fencedcodes.css]
 75    fencedcode1 = [
 76        "css/fencedcodes/fencedcode1.css"
 77      ]
 78    fencedcodeX = [
 79        "css/fencedcodes/fencedcodeX.css"
 80      ]
 81  [params.includes.fencedcodes.js]
 82    fencedcode1 = [
 83        "js/fencedcodes/fencedcode1.js"
 84      ]
 85    fencedcodeX = [
 86        "js/fencedcodes/fencedcodeX.js"
 87      ]
 88  [params.includes.fencedcodes.jsModules]
 89    fencedcode1 = [
 90        "js/fencedcodes/modules/fencedcode1.js"
 91      ]
 92    fencedcodeX = [
 93        "js/fencedcodes/modules/fencedcodeX.js"
 94      ]
 95  [params.includes.shortcodes.css]
 96    shortcode1 = [
 97        "css/shortcodes/shortcode1.css"
 98      ]
 99    shortcodeX = [
100        "css/shortcodes/shortcodeX.css"
101      ]
102  [params.includes.shortcodes.js]
103    shortcode1 = [
104        "js/shortcodes/shortcode1.js"
105      ]
106    shortcodeX = [
107        "js/shortcodes/shortcodeX.js"
108      ]
109  [params.includes.shortcodes.jsModules]
110    shortcode1 = [
111        "js/shortcodes/modules/shortcode1.js"
112      ]
113    shortcodeX = [
114        "js/shortcodes/modules/shortcodeX.js"
115      ]