id,page,ref,title,content,breadcrumbs,references
custom_templates:customization-css-and-javascript,custom_templates,customization-css-and-javascript,Custom CSS and JavaScript,"When you launch Datasette, you can specify a custom metadata file like this:
datasette mydb.db --metadata metadata.json
Your metadata.json file can include links that look like this:
{
""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""
]
}
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:
{
""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=""
}
]
}
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:
{
""extra_js_urls"": [
{
""url"": ""https://example.datasette.io/module.js"",
""module"": true
}
]
}
Will produce this HTML:
","[""Custom pages and templates""]","[{""href"": ""https://www.srihash.org/"", ""label"": ""www.srihash.org""}, {""href"": ""https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules"", ""label"": ""JavaScript modules""}]"