Raccourcis

Description#

Par défaut des raccourcis clavier sont fournis pour permettre d’intéragir plus facilement avec le thème, mais il est possible de définir des raccourcis spécifique par le biais d’un minimum de configuration.
Par exemple, il est possible d’obtenir la liste des raccourcis disponibles en utilisant le raccourci Maj + k.

Définir un raccourci spécifique#

Afin de définir un raccourci, il faut suivre le process suivant (exemple avec le raccourci example (Maj + 1) du site du thème):

  1. Définir la configuration générale du raccourci dans le fichier de configuration spécifique du site (Cf. lignes surlignées ci-dessous):
    config.toml (section [params])
      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      ]
  2. Définir les libellés du raccourci qui apparaitront dans le menu d’aide des raccourcis (dans le fichier de traduction i18n adéquat):
    fr.yaml
     1- id: navbarinfo_content
 2  translation: |
 3    Site généré avec [Hugo](https://gohugo.io/)    
 4- id: navbarinfo_github_main
 5  translation: Projet GitHub
 6- id: navbarinfo_github_download
 7  translation: Télécharger
 8- id: navbarinfo_github_issue
 9  translation: Signaler une anomalie
10- id: navbarinfo_github_fork
11  translation: Fork
12# Libellés (séparés par des virgules) associés au touches de clavier du raccourci
13- id: example_keys_wording
14  translation: 'Maj,1'
15# Description du raccourci
16- id: example_wording
17  translation: 'Afficher un exemple de raccourci'
18- id: shortcut_example
19  translation: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut aliquam metus. Nam massa lectus, consequat nec est eget, faucibus suscipit nunc. Donec dapibus tortor eget libero laoreet, quis commodo orci mattis. Pellentesque in arcu et odio viverra varius vitae sit amet dolor. Mauris venenatis malesuada leo, et egestas lectus feugiat vel. Morbi pretium id turpis ac varius. Integer ut ipsum augue.'
  3. Définir le code javascript associé au raccourci et appelé par le biais de la fonction définie à l’étape 1:
    shortcuts.js
    import {
  addElementToModal,
  displayModal,
} from '/js/theme/modules/helpers.min.js';

window.scExample = scExample;

function scExample() {
  let el = document.createElement('div');
  el.classList.add('shortcut-example');
  el.innerHTML = '{{- i18n "shortcut_example" -}}';
  addElementToModal(el);
  displayModal();
}