id,page,ref,title,content,breadcrumbs,references
configuration:configuration-reference-css-js,configuration,configuration-reference-css-js,Custom CSS and JavaScript,"Datasette can load additional CSS and JavaScript files, configured in datasette.yaml like this:
[[[cog
from metadata_doc import config_example
config_example(cog, """"""
extra_css_urls:
- https://simonwillison.net/static/css/all.bf8cd891642c.css
extra_js_urls:
- https://code.jquery.com/jquery-3.2.1.slim.min.js
"""""")
]]]
[[[end]]]
The extra CSS and JavaScript files will be linked in the of every page:
You can also specify a SRI (subresource integrity hash) for these assets:
[[[cog
config_example(cog, """"""
extra_css_urls:
- url: https://simonwillison.net/static/css/all.bf8cd891642c.css
sri: sha384-9qIZekWUyjCyDIf2YK1FRoKiPJq4PHt6tp/ulnuuyRBvazd0hG7pWbE99zvwSznI
extra_js_urls:
- url: https://code.jquery.com/jquery-3.2.1.slim.min.js
sri: sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g=
"""""")
]]]
[[[end]]]
This will produce:
Modern browsers will only execute the stylesheet or JavaScript if the SRI hash
matches the content served. You can generate hashes using www.srihash.org
Items in ""extra_js_urls"" can specify ""module"": true if they reference JavaScript that uses JavaScript modules . This configuration:
[[[cog
config_example(cog, """"""
extra_js_urls:
- url: https://example.datasette.io/module.js
module: true
"""""")
]]]
[[[end]]]
Will produce this HTML:
","[""Configuration"", null]","[{""href"": ""https://www.srihash.org/"", ""label"": ""www.srihash.org""}, {""href"": ""https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules"", ""label"": ""JavaScript modules""}]"