Shortcuts
Description#
By default keyboard shortcuts are provided to make it easier to interact with the theme, but it is possible to define specific shortcuts through a minimum of configuration.
For example, it is possible to get the list of available shortcuts using the shortcut Shift + k.
Define a specific shortcut#
To define a shortcut, follow this process (example with the example (Maj + 1) shortcut from the theme website):
- Define the general configuration of the shortcut in the site specific configuration file (Cf. highlighted lines below):
config.toml ([params] section)
1[params] 2 # Website logo file paths 3 logo = "images/logo.png" 4 logoTouch = "images/logoTouch.png" 5 # Image file path displayed during a 404 error 6 image404 = "images/404.gif" 7 # Favicon website file path 8 favicon = "images/favicon.png" 9 # Default layout used for the homepage 10 homeLayout = "onboarding" 11 # Site content order (https://gohugo.io/templates/lists/#order-content) 12 siteContentOrder = "weight" 13 # Activate/Deactivate the table of contents globally (sitewide) 14 toc = true 15 # Activate a global banner on all website pages 16 globalBanner = true 17 # Curent version of the website 18 currentVersion = "latest" 19 # Url of the latest version of the website 20 latestVersionUrl = "https://shadocs.netlify.app/" 21 # Enforce Link resolution using relref function (https://gohugo.io/content-management/cross-references/) 22 enforceRefrelLinks = true 23 # Keyboard shortcuts list 24 # For each shortcut following keys must be sets: 25 # - keys = [Keyboard shortcuts table](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values) 26 # - function = "Javascript function name to call by the shortcut" 27 [params.navbar.shortcuts] 28 # Example shortcut definition 29 [params.navbar.shortcuts.example] 30 keys = ["Shift","1"] 31 function = "scExample" 32 # Taxonomies list 33 # For each taxonomy following keys can be sets: 34 # - icon = "Fontawesome classes associated to the taxonomy" 35 [params.taxonomies] 36 [params.taxonomies.categories] 37 icon = "fa-solid fa-table-cells" 38 # Assets list (https://gohugo.io/hugo-pipes/resource-from-template/) to include 39 # Managed assets: 40 # - sass = [List of SASS files] 41 # - css = [List of CSS files] 42 # - js = [List of javascript files] 43 # - jsModules = [List of javascript modules] 44 # - shortcodes.css = [List of CSS files to includes when the associated shortcode exist in the page content] 45 # - shortcodes.js = [List of javascript files to includes when the associated shortcode exist in the page content] 46 # - shortcodes.jsModules = [List of javascript module files to includes when the associated shortcode exist in the page content] 47 # - fencedcodes.css = [List of CSS files to includes when the associated language of fenced code exist in the page content] 48 # - fencedcodes.js = [List of javascript files to includes when the associated language of fenced code exist in the page content] 49 # - fencedcodes.jsModules = [List of javascript module files to includes when the associated language of fenced code exist in the page content] 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 ] - Define shortcut labels that will appear in the shortcut help menu (in the appropriate i18n translation file):
en.yaml
1- id: navbarinfo_content 2 translation: | 3 Website built with [Hugo](https://gohugo.io/) 4- id: navbarinfo_github_main 5 translation: GitHub repository 6- id: navbarinfo_github_download 7 translation: Download 8- id: navbarinfo_github_issue 9 translation: Report an issue 10- id: navbarinfo_github_fork 11 translation: Fork 12# Comma-separated labels associated with the keyboard keys of the shortcut 13- id: example_keys_wording 14 translation: 'Shift,1' 15# Shortcut description 16- id: example_wording 17 translation: 'Display a shortcut example' 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.' - Define the javascript code associated with the shortcut and called through the function defined in step 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(); }