Atalhos
Descrição#
Estão disponíveis atalhos do teclado para facilitar a interação com o tema. Além disso, é possível definir atalhos por meio de uma configuração mínima. Por exemplo, é possível obter uma lista de atalhos disponíveis usando o atalho Shift + k.
Definir atalhos específicos#
Siga esse procedimento de exemplo para definir um atalho (usando o atalho de exemplo (Maj + 1))
- Defina a configuração geral do atalho no arquivo de configuração específico (Cf. linhas destacadas embaixo):
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 ] - Defina as etiquetas do atalho que aparecerão no menu de ajuda do atalho (no arquivo de tradução i18n apropriado):
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.' - Defina o código de javascript associado com o atalho e faça um chamado por meio da função definida no passo 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(); }