Importar bibliotecas externas

Descrição#

É possível importar bibliotecas ou código externo nas páginas de html geradas pelo site de Hugo, usando a configuração do tema.

Os seguintes são tipos de possíveis códigos que podem ser importados pelo tema:

Import type	Comment
SASS files (.sass)	Importado em tag `<head>` como `<link rel="stylesheet" type="text/css">` depois de ser transformado por Hugo como CSS , agrupado e minimizado em arquivo css/main.css Caminho usado para conversão de SASS➔CSS: assets/bulma assets/sass
CSS files (.css)	Importado por arquivo em tag `<head>` como `<link rel="stylesheet" type="text/css">` arquivo minimizado
Javascript files (.js)	Importado pelo arquivo ao final da tag `<body>` como `<script type="text/javascript"></script>` e minimizado
Javascript modules (.js)	Importado pelo arquivo ao final da tag `<body>` como `<script type="module"></script>` e minimizado

Os arquivos a serem importados devem ser definidos como Hugo “assets”

Definir importação de terceiros#

Para definir um arquivo para importar deve ser usada a seguinte configuração (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      ]

Definir importação de shortcodes de terceiros#

O tema oferecer a possibilidade de importar bibliotecas ou código de terceiros associados com shortcodes. Os arquivos serão importados se o shortcode é usado na página atual, assim reduzindo o tempo de carregamento da página.

Para definir um arquivo a importar que esteja associado a um shortcode deve ser usada a seguinte configuração (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      ]