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