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

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