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 SASS (.sass)
  • 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 SASS➔CSS:
    • assets/bulma
    • assets/sass
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):

config.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  # Force la résolution des liens en utilisant la fonction relref (https://gohugo.io/content-management/cross-references/)
 22  enforceRefrelLinks      = true
 23  # Désactive le bouton "Imprimer" dans la barre de navigation
 24  navbarPrintEntry        = false
 25  # Désactive le bouton "QR code" dans la barre de navigation
 26  navbarQRCodeEntry       = false
 27  # Désactive le bouton "Raccourcis" dans la barre de navigation
 28  navbarSchortcutsEntry   = false
 29  # Désactive le bouton "À propos" dans la barre de navigation
 30  navbarInfo              = false
 31  # Liste des raccourcis clavier
 32  # Pour chaque raccourci il faut renseigner les clés suivantes:
 33  # - keys     = [Table des touches de clavier du raccourci](https://developer.mozilla.org/fr/docs/Web/API/KeyboardEvent/key/Key_Values)
 34  # - function = "Nom de la fonction javascript à appeler par le raccourci"
 35  [params.navbar.shortcuts]
 36    # Définition du raccourci d'exemple
 37    [params.navbar.shortcuts.example]
 38      keys     = ["Shift","1"]
 39      function = "scExample"
 40  # Liste des taxonomies
 41  # Pour chaque taxonomie il est possible de renseigner les clés suivantes:
 42  # - icon = "Classes fontawesome associées à la taxonomie"
 43  [params.taxonomies]
 44    [params.taxonomies.categories]
 45      icon = "fa-solid fa-table-cells"
 46  # Liste des assets (https://gohugo.io/hugo-pipes/resource-from-template/) à inclures
 47  # Les assets gérés:
 48  # - sass                  = [Liste des fichiers SASS]
 49  # - css                   = [Liste des fichiers CSS]
 50  # - js                    = [Liste des fichiers javascript]
 51  # - jsModules             = [Liste des fichiers modules javascript]
 52  # - shortcodes.css        = [Liste des fichiers CSS à inclure quand le shortcode associé est présent dans le contenu de la page]
 53  # - shortcodes.js         = [Liste des fichiers javascript à inclure quand le shortcode associé est présent dans le contenu de la page]
 54  # - shortcodes.jsModules  = [Liste des fichiers modules javascript à inclure quand le shortcode associé est présent dans le contenu de la page]
 55  # - 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]
 56  # - 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]
 57  # - 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]
 58  #
 59  [params.includes]
 60    sass = [
 61      "sass/file1.sass",
 62      "sass/fileX.sass"
 63    ]
 64    css = [
 65      "css/file1.css",
 66      "css/fileX.css"
 67    ]
 68    js = [
 69      "js/file1.js",
 70      "js/fileX.js"
 71    ]
 72    jsModules = [
 73      "js/modules/file1.js",
 74      "js/modules/fileX.js"
 75    ]
 76  [params.includes.shortcodes.sass]
 77    shortcode1 = [
 78        "sass/shortcodes/shortcode1.sass"
 79      ]
 80    shortcodeX = [
 81        "sass/shortcodes/shortcodeX.sass"
 82      ]
 83  [params.includes.shortcodes.css]
 84    shortcode1 = [
 85        "css/shortcodes/shortcode1.css"
 86      ]
 87    shortcodeX = [
 88        "css/shortcodes/shortcodeX.css"
 89      ]
 90  [params.includes.shortcodes.js]
 91    shortcode1 = [
 92        "js/shortcodes/shortcode1.js"
 93      ]
 94    shortcodeX = [
 95        "js/shortcodes/shortcodeX.js"
 96      ]
 97  [params.includes.shortcodes.jsModules]
 98    shortcode1 = [
 99        "js/shortcodes/modules/shortcode1.js"
100      ]
101    shortcodeX = [
102        "js/shortcodes/modules/shortcodeX.js"
103      ]
104  [params.includes.fencedcodes.css]
105    shortcode1 = [
106        "css/fencedcodes/shortcode1.css"
107      ]
108    shortcodeX = [
109        "css/fencedcodes/shortcodeX.css"
110      ]
111  [params.includes.fencedcodes.js]
112    shortcode1 = [
113        "js/fencedcodes/shortcode1.js"
114      ]
115    shortcodeX = [
116        "js/fencedcodes/shortcodeX.js"
117      ]
118  [params.includes.fencedcodes.jsModules]
119    shortcode1 = [
120        "js/fencedcodes/modules/shortcode1.js"
121      ]
122    shortcodeX = [
123        "js/fencedcodes/modules/shortcodeX.js"
124      ]

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):

config.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  # Force la résolution des liens en utilisant la fonction relref (https://gohugo.io/content-management/cross-references/)
 22  enforceRefrelLinks      = true
 23  # Désactive le bouton "Imprimer" dans la barre de navigation
 24  navbarPrintEntry        = false
 25  # Désactive le bouton "QR code" dans la barre de navigation
 26  navbarQRCodeEntry       = false
 27  # Désactive le bouton "Raccourcis" dans la barre de navigation
 28  navbarSchortcutsEntry   = false
 29  # Désactive le bouton "À propos" dans la barre de navigation
 30  navbarInfo              = false
 31  # Liste des raccourcis clavier
 32  # Pour chaque raccourci il faut renseigner les clés suivantes:
 33  # - keys     = [Table des touches de clavier du raccourci](https://developer.mozilla.org/fr/docs/Web/API/KeyboardEvent/key/Key_Values)
 34  # - function = "Nom de la fonction javascript à appeler par le raccourci"
 35  [params.navbar.shortcuts]
 36    # Définition du raccourci d'exemple
 37    [params.navbar.shortcuts.example]
 38      keys     = ["Shift","1"]
 39      function = "scExample"
 40  # Liste des taxonomies
 41  # Pour chaque taxonomie il est possible de renseigner les clés suivantes:
 42  # - icon = "Classes fontawesome associées à la taxonomie"
 43  [params.taxonomies]
 44    [params.taxonomies.categories]
 45      icon = "fa-solid fa-table-cells"
 46  # Liste des assets (https://gohugo.io/hugo-pipes/resource-from-template/) à inclures
 47  # Les assets gérés:
 48  # - sass                  = [Liste des fichiers SASS]
 49  # - css                   = [Liste des fichiers CSS]
 50  # - js                    = [Liste des fichiers javascript]
 51  # - jsModules             = [Liste des fichiers modules javascript]
 52  # - shortcodes.css        = [Liste des fichiers CSS à inclure quand le shortcode associé est présent dans le contenu de la page]
 53  # - shortcodes.js         = [Liste des fichiers javascript à inclure quand le shortcode associé est présent dans le contenu de la page]
 54  # - shortcodes.jsModules  = [Liste des fichiers modules javascript à inclure quand le shortcode associé est présent dans le contenu de la page]
 55  # - 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]
 56  # - 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]
 57  # - 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]
 58  #
 59  [params.includes]
 60    sass = [
 61      "sass/file1.sass",
 62      "sass/fileX.sass"
 63    ]
 64    css = [
 65      "css/file1.css",
 66      "css/fileX.css"
 67    ]
 68    js = [
 69      "js/file1.js",
 70      "js/fileX.js"
 71    ]
 72    jsModules = [
 73      "js/modules/file1.js",
 74      "js/modules/fileX.js"
 75    ]
 76  [params.includes.shortcodes.sass]
 77    shortcode1 = [
 78        "sass/shortcodes/shortcode1.sass"
 79      ]
 80    shortcodeX = [
 81        "sass/shortcodes/shortcodeX.sass"
 82      ]
 83  [params.includes.shortcodes.css]
 84    shortcode1 = [
 85        "css/shortcodes/shortcode1.css"
 86      ]
 87    shortcodeX = [
 88        "css/shortcodes/shortcodeX.css"
 89      ]
 90  [params.includes.shortcodes.js]
 91    shortcode1 = [
 92        "js/shortcodes/shortcode1.js"
 93      ]
 94    shortcodeX = [
 95        "js/shortcodes/shortcodeX.js"
 96      ]
 97  [params.includes.shortcodes.jsModules]
 98    shortcode1 = [
 99        "js/shortcodes/modules/shortcode1.js"
100      ]
101    shortcodeX = [
102        "js/shortcodes/modules/shortcodeX.js"
103      ]
104  [params.includes.fencedcodes.css]
105    shortcode1 = [
106        "css/fencedcodes/shortcode1.css"
107      ]
108    shortcodeX = [
109        "css/fencedcodes/shortcodeX.css"
110      ]
111  [params.includes.fencedcodes.js]
112    shortcode1 = [
113        "js/fencedcodes/shortcode1.js"
114      ]
115    shortcodeX = [
116        "js/fencedcodes/shortcodeX.js"
117      ]
118  [params.includes.fencedcodes.jsModules]
119    shortcode1 = [
120        "js/fencedcodes/modules/shortcode1.js"
121      ]
122    shortcodeX = [
123        "js/fencedcodes/modules/shortcodeX.js"
124      ]