{"id": "custom_templates:customization-static-files", "page": "custom_templates", "ref": "customization-static-files", "title": "Serving static files", "content": "Datasette can serve static files for you, using the  --static  option.\n                Consider the following directory structure: \n             metadata.json\nstatic-files/styles.css\nstatic-files/app.js \n             You can start Datasette using  --static assets:static-files/  to serve those\n                files from the  /assets/  mount point: \n             datasette --config datasette.yaml --static assets:static-files/ --memory \n             The following URLs will now serve the content from those CSS and JS files: \n             http://localhost:8001/assets/styles.css\nhttp://localhost:8001/assets/app.js \n             You can reference those files from  datasette.yaml  like this, see  custom CSS and JavaScript  for more details: \n             [[[cog\nfrom metadata_doc import config_example\nconfig_example(cog, \"\"\"\n    extra_css_urls:\n    - /assets/styles.css\n    extra_js_urls:\n    - /assets/app.js\n\"\"\") \n             ]]] \n             [[[end]]]", "breadcrumbs": "[\"Custom pages and templates\"]", "references": "[]"}
{"id": "custom_templates:custom-pages-404", "page": "custom_templates", "ref": "custom-pages-404", "title": "Returning 404s", "content": "To indicate that content could not be found and display the default 404 page you can use the  raise_404(message)  function: \n             {% if not rows %}\n    {{ raise_404(\"Content not found\") }}\n{% endif %} \n             If you call  raise_404()  the other content in your template will be ignored.", "breadcrumbs": "[\"Custom pages and templates\"]", "references": "[]"}
{"id": "custom_templates:publishing-static-assets", "page": "custom_templates", "ref": "publishing-static-assets", "title": "Publishing static assets", "content": "The  datasette publish  command can be used to publish your static assets,\n                using the same syntax as above: \n             datasette publish cloudrun mydb.db --static assets:static-files/ \n             This will upload the contents of the  static-files/  directory as part of the\n                deployment, and configure Datasette to correctly serve the assets from  /assets/ .", "breadcrumbs": "[\"Custom pages and templates\"]", "references": "[]"}
{"id": "custom_templates:custom-pages-parameters", "page": "custom_templates", "ref": "custom-pages-parameters", "title": "Path parameters for pages", "content": "You can define custom pages that match multiple paths by creating files with  {variable}  definitions in their filenames. \n             For example, to capture any request to a URL matching  /about/* , you would create a template in the following location: \n             templates/pages/about/{slug}.html \n             A hit to  /about/news  would render that template and pass in a variable called  slug  with a value of  \"news\" . \n             If you use this mechanism don't forget to return a 404 if the referenced content could not be found. You can do this using  {{ raise_404() }}  described below. \n             Templates defined using custom page routes work particularly well with the  sql()  template function from  datasette-template-sql  or the  graphql()  template function from  datasette-graphql .", "breadcrumbs": "[\"Custom pages and templates\"]", "references": "[{\"href\": \"https://github.com/simonw/datasette-template-sql\", \"label\": \"datasette-template-sql\"}, {\"href\": \"https://github.com/simonw/datasette-graphql#the-graphql-template-function\", \"label\": \"datasette-graphql\"}]"}
{"id": "custom_templates:custom-pages-redirects", "page": "custom_templates", "ref": "custom-pages-redirects", "title": "Custom redirects", "content": "You can use the  custom_redirect(location)  function to redirect users to another page, for example in a file called  pages/datasette.html : \n             {{ custom_redirect(\"https://github.com/simonw/datasette\") }} \n             Now requests to  http://localhost:8001/datasette  will result in a redirect. \n             These redirects are served with a  302 Found  status code by default. You can send a  301 Moved Permanently  code by passing  301  as the second argument to the function: \n             {{ custom_redirect(\"https://github.com/simonw/datasette\", 301) }}", "breadcrumbs": "[\"Custom pages and templates\"]", "references": "[]"}
{"id": "custom_templates:custom-pages-headers", "page": "custom_templates", "ref": "custom-pages-headers", "title": "Custom headers and status codes", "content": "Custom pages default to being served with a content-type of  text/html; charset=utf-8  and a  200  status code. You can change these by calling a custom function from within your template. \n             For example, to serve a custom page with a  418 I'm a teapot  HTTP status code, create a file in  pages/teapot.html  containing the following: \n             {{ custom_status(418) }}\n<html>\n<head><title>Teapot</title></head>\n<body>\nI'm a teapot\n</body>\n</html> \n             To serve a custom HTTP header, add a  custom_header(name, value)  function call. For example: \n             {{ custom_status(418) }}\n{{ custom_header(\"x-teapot\", \"I am\") }}\n<html>\n<head><title>Teapot</title></head>\n<body>\nI'm a teapot\n</body>\n</html> \n             You can verify this is working using  curl  like this: \n             curl -I 'http://127.0.0.1:8001/teapot'\nHTTP/1.1 418\ndate: Sun, 26 Apr 2020 18:38:30 GMT\nserver: uvicorn\nx-teapot: I am\ncontent-type: text/html; charset=utf-8", "breadcrumbs": "[\"Custom pages and templates\"]", "references": "[]"}
{"id": "custom_templates:css-classes-on-the-body", "page": "custom_templates", "ref": "css-classes-on-the-body", "title": "CSS classes on the <body>", "content": "Every default template includes CSS classes in the body designed to support\n                custom styling. \n             The index template (the top level page at  / ) gets this: \n             <body class=\"index\"> \n             The database template ( /dbname ) gets this: \n             <body class=\"db db-dbname\"> \n             The custom SQL template ( /dbname?sql=... ) gets this: \n             <body class=\"query db-dbname\"> \n             A canned query template ( /dbname/queryname ) gets this: \n             <body class=\"query db-dbname query-queryname\"> \n             The table template ( /dbname/tablename ) gets: \n             <body class=\"table db-dbname table-tablename\"> \n             The row template ( /dbname/tablename/rowid ) gets: \n             <body class=\"row db-dbname table-tablename\"> \n             The  db-x  and  table-x  classes use the database or table names themselves if\n                they are valid CSS identifiers. If they aren't, we strip any invalid\n                characters out and append a 6 character md5 digest of the original name, in\n                order to ensure that multiple tables which resolve to the same stripped\n                character version still have different CSS classes. \n             Some examples: \n             \"simple\" => \"simple\"\n\"MixedCase\" => \"MixedCase\"\n\"-no-leading-hyphens\" => \"no-leading-hyphens-65bea6\"\n\"_no-leading-underscores\" => \"no-leading-underscores-b921bc\"\n\"no spaces\" => \"no-spaces-7088d7\"\n\"-\" => \"336d5e\"\n\"no $ characters\" => \"no--characters-59e024\" \n             <td>  and  <th>  elements also get custom CSS classes reflecting the\n                database column they are representing, for example: \n             <table>\n    <thead>\n        <tr>\n            <th class=\"col-id\" scope=\"col\">id</th>\n            <th class=\"col-name\" scope=\"col\">name</th>\n        </tr>\n    </thead>\n    <tbody>\n        <tr>\n            <td class=\"col-id\"><a href=\"...\">1</a></td>\n            <td class=\"col-name\">SMITH</td>\n        </tr>\n    </tbody>\n</table>", "breadcrumbs": "[\"Custom pages and templates\"]", "references": "[]"}