Third-party imports

Description#


By default in the theme, it is possible to import libraries or third-party code into the generated html page, using the website configuration.

The several types of imports managed by the theme are the following ones:

Import typeComment
SASS files (.sass)
  • Imported in <head> tag as <link rel="stylesheet" type="text/css"> after being converted as CSS by Hugo , grouped and minified in css/main.css file
  • Paths used for the SASS➔CSS conversion :
    • assets/bulma
    • assets/sass
CSS files (.css)
  • Imported file by file in <head> tag as <link rel="stylesheet" type="text/css"> and minified
Javascript files (.js)
  • Imported file by file at the end of the <body> tag as <script type="text/javascript"></script> and minified
Javascript modules (.js)
  • Imported file by file at the end of the <body> tag as <script type="module"></script> and minified
Files to import must be defined as Hugo assets

Define third-party imports#


To define a file to import you must use the following configuration (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://jgazeau.github.io/shadocs/"
 21  # Enforce Link resolution using relref function (https://gohugo.io/content-management/cross-references/)
 22  enforceRefrelLinks      = true
 23  # Disable "Print" button in navbar
 24  navbarPrintEntry        = false
 25  # Disable "QR code" button in navbar
 26  navbarQRCodeEntry       = false
 27  # Disable "Shortcuts" button in navbar
 28  navbarSchortcutsEntry   = false
 29  # Disable "About" button in navbar
 30  navbarInfo              = false
 31  # Keyboard shortcuts list
 32  # For each shortcut following keys must be sets:
 33  # - keys     = [Keyboard shortcuts table](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values)
 34  # - function = "Javascript function name to call by the shortcut"
 35  [params.navbar.shortcuts]
 36    # Example shortcut definition
 37    [params.navbar.shortcuts.example]
 38      keys     = ["Shift","1"]
 39      function = "scExample"
 40  # Taxonomies list
 41  # For each taxonomy following keys can be sets:
 42  # - icon = "Fontawesome classes associated to the taxonomy"
 43  [params.taxonomies]
 44    [params.taxonomies.categories]
 45      icon = "fa-solid fa-table-cells"
 46  # Assets list (https://gohugo.io/hugo-pipes/resource-from-template/) to include
 47  # Managed assets:
 48  # - sass                  = [List of SASS files]
 49  # - css                   = [List of CSS files]
 50  # - js                    = [List of javascript files]
 51  # - jsModules             = [List of javascript modules]
 52  # - shortcodes.css        = [List of CSS files to includes when the associated shortcode exist in the page content]
 53  # - shortcodes.js         = [List of javascript files to includes when the associated shortcode exist in the page content]
 54  # - shortcodes.jsModules  = [List of javascript module files to includes when the associated shortcode exist in the page content]
 55  # - fencedcodes.css       = [List of CSS files to includes when the associated language of fenced code exist in the page content]
 56  # - fencedcodes.js        = [List of javascript files to includes when the associated language of fenced code exist in the page content]
 57  # - fencedcodes.jsModules = [List of javascript module files to includes when the associated language of fenced code exist in the page content]
 58  #
 59  [params.includes]
 60    sass = [
 61      "sass/file1.sass",
 62      "sass/fileX.sass"
 63    ]
 64    css = [
 65      "css/file1.css",
 66      "css/fileX.css"
 67    ]
 68    js = [
 69      "js/file1.js",
 70      "js/fileX.js"
 71    ]
 72    jsModules = [
 73      "js/modules/file1.js",
 74      "js/modules/fileX.js"
 75    ]
 76  [params.includes.shortcodes.sass]
 77    shortcode1 = [
 78        "sass/shortcodes/shortcode1.sass"
 79      ]
 80    shortcodeX = [
 81        "sass/shortcodes/shortcodeX.sass"
 82      ]
 83  [params.includes.shortcodes.css]
 84    shortcode1 = [
 85        "css/shortcodes/shortcode1.css"
 86      ]
 87    shortcodeX = [
 88        "css/shortcodes/shortcodeX.css"
 89      ]
 90  [params.includes.shortcodes.js]
 91    shortcode1 = [
 92        "js/shortcodes/shortcode1.js"
 93      ]
 94    shortcodeX = [
 95        "js/shortcodes/shortcodeX.js"
 96      ]
 97  [params.includes.shortcodes.jsModules]
 98    shortcode1 = [
 99        "js/shortcodes/modules/shortcode1.js"
100      ]
101    shortcodeX = [
102        "js/shortcodes/modules/shortcodeX.js"
103      ]
104  [params.includes.fencedcodes.css]
105    shortcode1 = [
106        "css/fencedcodes/shortcode1.css"
107      ]
108    shortcodeX = [
109        "css/fencedcodes/shortcodeX.css"
110      ]
111  [params.includes.fencedcodes.js]
112    shortcode1 = [
113        "js/fencedcodes/shortcode1.js"
114      ]
115    shortcodeX = [
116        "js/fencedcodes/shortcodeX.js"
117      ]
118  [params.includes.fencedcodes.jsModules]
119    shortcode1 = [
120        "js/fencedcodes/modules/shortcode1.js"
121      ]
122    shortcodeX = [
123        "js/fencedcodes/modules/shortcodeX.js"
124      ]

Define third-party imports for shortcodes#


The theme also offers the possibility to import libraries or third-party code associated with a shortcode. These files will be imported only if the shortcode is used in the current page, therefore reducing the loading time of the page.

To define a file to import, associated with a shortcode, you must use the following configuration (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://jgazeau.github.io/shadocs/"
 21  # Enforce Link resolution using relref function (https://gohugo.io/content-management/cross-references/)
 22  enforceRefrelLinks      = true
 23  # Disable "Print" button in navbar
 24  navbarPrintEntry        = false
 25  # Disable "QR code" button in navbar
 26  navbarQRCodeEntry       = false
 27  # Disable "Shortcuts" button in navbar
 28  navbarSchortcutsEntry   = false
 29  # Disable "About" button in navbar
 30  navbarInfo              = false
 31  # Keyboard shortcuts list
 32  # For each shortcut following keys must be sets:
 33  # - keys     = [Keyboard shortcuts table](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values)
 34  # - function = "Javascript function name to call by the shortcut"
 35  [params.navbar.shortcuts]
 36    # Example shortcut definition
 37    [params.navbar.shortcuts.example]
 38      keys     = ["Shift","1"]
 39      function = "scExample"
 40  # Taxonomies list
 41  # For each taxonomy following keys can be sets:
 42  # - icon = "Fontawesome classes associated to the taxonomy"
 43  [params.taxonomies]
 44    [params.taxonomies.categories]
 45      icon = "fa-solid fa-table-cells"
 46  # Assets list (https://gohugo.io/hugo-pipes/resource-from-template/) to include
 47  # Managed assets:
 48  # - sass                  = [List of SASS files]
 49  # - css                   = [List of CSS files]
 50  # - js                    = [List of javascript files]
 51  # - jsModules             = [List of javascript modules]
 52  # - shortcodes.css        = [List of CSS files to includes when the associated shortcode exist in the page content]
 53  # - shortcodes.js         = [List of javascript files to includes when the associated shortcode exist in the page content]
 54  # - shortcodes.jsModules  = [List of javascript module files to includes when the associated shortcode exist in the page content]
 55  # - fencedcodes.css       = [List of CSS files to includes when the associated language of fenced code exist in the page content]
 56  # - fencedcodes.js        = [List of javascript files to includes when the associated language of fenced code exist in the page content]
 57  # - fencedcodes.jsModules = [List of javascript module files to includes when the associated language of fenced code exist in the page content]
 58  #
 59  [params.includes]
 60    sass = [
 61      "sass/file1.sass",
 62      "sass/fileX.sass"
 63    ]
 64    css = [
 65      "css/file1.css",
 66      "css/fileX.css"
 67    ]
 68    js = [
 69      "js/file1.js",
 70      "js/fileX.js"
 71    ]
 72    jsModules = [
 73      "js/modules/file1.js",
 74      "js/modules/fileX.js"
 75    ]
 76  [params.includes.shortcodes.sass]
 77    shortcode1 = [
 78        "sass/shortcodes/shortcode1.sass"
 79      ]
 80    shortcodeX = [
 81        "sass/shortcodes/shortcodeX.sass"
 82      ]
 83  [params.includes.shortcodes.css]
 84    shortcode1 = [
 85        "css/shortcodes/shortcode1.css"
 86      ]
 87    shortcodeX = [
 88        "css/shortcodes/shortcodeX.css"
 89      ]
 90  [params.includes.shortcodes.js]
 91    shortcode1 = [
 92        "js/shortcodes/shortcode1.js"
 93      ]
 94    shortcodeX = [
 95        "js/shortcodes/shortcodeX.js"
 96      ]
 97  [params.includes.shortcodes.jsModules]
 98    shortcode1 = [
 99        "js/shortcodes/modules/shortcode1.js"
100      ]
101    shortcodeX = [
102        "js/shortcodes/modules/shortcodeX.js"
103      ]
104  [params.includes.fencedcodes.css]
105    shortcode1 = [
106        "css/fencedcodes/shortcode1.css"
107      ]
108    shortcodeX = [
109        "css/fencedcodes/shortcodeX.css"
110      ]
111  [params.includes.fencedcodes.js]
112    shortcode1 = [
113        "js/fencedcodes/shortcode1.js"
114      ]
115    shortcodeX = [
116        "js/fencedcodes/shortcodeX.js"
117      ]
118  [params.includes.fencedcodes.jsModules]
119    shortcode1 = [
120        "js/fencedcodes/modules/shortcode1.js"
121      ]
122    shortcodeX = [
123        "js/fencedcodes/modules/shortcodeX.js"
124      ]