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 type | Comment |
|---|---|
| SASS files (.sass) |
|
| CSS files (.css) |
|
| Javascript files (.js) |
|
| Javascript modules (.js) |
|
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 ]