Index page templates
This templates is used to generate index pages for a set of data we have collected.
The template extends the dlf-base.html
<!DOCTYPE html>
<html lang="en" class="govuk-template ">
<head>
<meta charset="utf-8">
<title> | Digital Land</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="theme-color" content="#0b0c0c">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="shortcut icon" sizes="48x48" href="/design-system/static/images/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" sizes="32x32" href="/design-system/static/images/favicon-32x32.png" type="image/png">
<link rel="shortcut icon" sizes="16x16" href="/design-system/static/images/favicon-16x16.png" type="image/png">
<link rel="apple-touch-icon" href="/design-system/static/images/apple-touch-icon.png">
<meta name="digital-land:template" content="page-per-thing/index.html">
<link href="/design-system/static/stylesheets/dl-frontend.css" rel="stylesheet" />
<script src="/design-system/static/javascripts/dl-maps.js"></script>
<meta property="og:image" content="/design-system/static/images/govuk-opengraph-image.png">
</head>
<body class="govuk-template__body ">
<script>document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>
<a href="#main-content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a>
<!-- Cookie banner partial version 1.0.1 -->
<div id="global-cookie-message" class="govuk-clearfix global-cookie-message" data-module="cookie-banner" role="region" aria-label="cookie banner" data-nosnippet="">
<div id="cookie-banner" class="govuk-width-container">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<div class="cookie-banner__message govuk-!-margin-top-6">
<h2 class="govuk-heading-m">Tell us whether you accept cookies</h2>
<p class="govuk-body">We use <a class="govuk-link" href="/cookies">cookies to collect information</a> about how you use the Digital Land website to make the website work as well as possible.</p>
</div>
<div class="cooke-banner__buttons govuk-grid-row">
<div class="govuk-grid-column-one-half">
<button class="govuk-button" onclick="acceptCookies();showCookieConfirmation();">Accept all cookies</button>
</div>
<div class="govuk-grid-column-one-half">
<a class="govuk-button" href="/cookies">Set cookie preferences</a>
</div>
</div>
</div>
</div>
</div>
<div id="cookie-confirmation" class="govuk-width-container govuk-!-padding-top-6" tabindex="-1" style="display: none;">
<p class="cookie-banner__confirmation-message govuk-body">You’ve accepted all cookies. You can <a class="govuk-link" href="/cookies">change your cookie settings</a> at any time.</p>
<button class="cookie-banner__hide-button govuk-button govuk-button--secondary" onclick="document.getElementById('cookie-confirmation').style.display='none';">Hide</button>
</div>
</div>
<header role="banner" id="global-header" class="govuk-header with-proposition dl-header" data-module="govuk-header">
<div class="govuk-header__container govuk-width-container">
<div class="header-proposition">
<div class="govuk-header__content">
<a href="/" class="govuk-header__link govuk-header__link--service-name">
Digital Land
</a>
<nav class="govuk-header__navigation" aria-label="Menu">
<button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="Show or hide Top Level Navigation">Menu</button>
<ul id="navigation" class="govuk-header__navigation-list">
<li class="govuk-header__navigation-item">
<a class="govuk-header__link" href="/about">Team</a>
</li>
<li class="govuk-header__navigation-item">
<a class="govuk-header__link" href="/project/">Projects</a>
</li>
<li class="govuk-header__navigation-item">
<a class="govuk-header__link" href="/weeknote/">Weeknotes</a>
</li>
<li class="govuk-header__navigation-item">
<a class="govuk-header__link" href="/blog-post/">Blog</a>
</li>
<li class="govuk-header__navigation-item">
<a class="govuk-header__link" href="/guidance/">Guidance</a>
</li>
<li class="govuk-header__navigation-item">
<a class="govuk-header__link" href="/dataset/">Datasets</a>
</li>
<li class="govuk-header__navigation-item">
<a class="govuk-header__link" href="/organisation/">Organisations</a>
</li>
<li class="govuk-header__navigation-item">
<a class="govuk-header__link" href="/map/">Map</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<div class="govuk-width-container ">
<div class="govuk-phase-banner">
<p class="govuk-phase-banner__content">
<strong class="govuk-tag govuk-phase-banner__content__tag">
prototype
</strong>
<span class="govuk-phase-banner__text">
This is a prototype. Please provide <a class="govuk-link" href="mailto:digitalland@communities.gov.uk?subject=Prototype feedback">feedback to the Digital Land team</a>.
</span>
</p>
</div>
<div class="govuk-breadcrumbs ">
<ol class="govuk-breadcrumbs__list">
<li class="govuk-breadcrumbs__list-item">
<a class="govuk-breadcrumbs__link" href="/">Digital Land</a>
</li>
</ol>
</div>
<main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 id="index-title" class="govuk-heading-xl"></h1>
</div>
<div class="govuk-grid-column-one-third">
<div class="dl-feedback dlf-feedback--stacked dlf-feedback--flush">
<div class="dl-feedback__prompt">
<div class="dl-feedback__prompt-content">
<span class="dl-feedback__prompt-content__text">Have you spotted any issues with the data?</span>
</div>
<div class="dl-feedback__prompt-action">
<a href="mailto:digitalLand@communities.gov.uk?subject=Feedback on data" class="govuk-button dl-feedback__prompt__link">Provide feedback</a>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<div class="dl-sticky-banner__container" data-module="sticky-banner">
<div class="dl-sticky-banner">
<div class="govuk-grid-row">
<div class="govuk-grid-column-one-half">
</div>
</div>
</div>
</div>
<footer class="govuk-footer " role="contentinfo">
<div class="govuk-width-container ">
<div class="govuk-footer__meta">
<div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
<h2 class="govuk-visually-hidden">Support links</h2>
<ul class="govuk-footer__inline-list">
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="/cookies">
Cookies
</a>
</li>
<li class="govuk-footer__inline-list-item">
<a class="govuk-footer__link" href="/accessibility-statement">
Accessibility statement
</a>
</li>
</ul>
<div class="govuk-footer__meta-custom">
The <a class="govuk-footer__link" href="https://github.com/digital-land/digital-land/">software</a> and <a class="govuk-footer__link" href="https://github.com/digital-land/digital-land/">data</a> used to build these pages is <a class="govuk-footer__link" href="https://github.com/digital-land/digital-land/blob/master/LICENSE">open source</a>.
</div>
<svg
aria-hidden="true"
focusable="false"
class="govuk-footer__licence-logo"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 483.2 195.7"
height="17"
width="41"
>
<path
fill="currentColor"
d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"
/>
</svg>
<span class="govuk-footer__licence-description">
All content is available under the
<a
class="govuk-footer__link"
href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
rel="license"
>Open Government Licence v3.0</a>, except where otherwise stated
</span>
</div>
<div class="govuk-footer__meta-item">
<a
class="govuk-footer__link govuk-footer__copyright-logo"
href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/"
>© Crown copyright</a>
</div>
</div>
</div>
</footer>
<script src="/design-system/static/javascripts/digital-land-cookies.js"></script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<script src="/design-system/static/javascripts/govuk/govuk-frontend.js"></script>
<script>
// initiate all GOVUK components
window.GOVUKFrontend.initAll();
</script>
<script src="/design-system/static/javascripts/digital-land-frontend.js"></script>
<script>
window.DLFrontend.initAll();
</script>
<script>
const $bttBanner = document.querySelector('[data-module="sticky-banner"]')
const bttComponent = new DLFrontend.BackToTop($bttBanner).init({
endElementSelector: '.govuk-footer',
startElementSelector: '#index-title',
fixClass: 'dl-sticky-banner--fixed'
})
</script>
<script>
const showCounts = false
const $hist = document.querySelector('[data-historical="form"]');
new window.DLFrontend.FilterHistorical($hist).init({
triggerEvents: "list:filtered",
listWrapperSelector: '.index-list-wrapper',
showCountsWhenShowingAll: showCounts
})
</script>
</body>
</html>{% extends "design-system/page-per-thing/index.html" %}
{% set data_type = "Test data" %}
{% set breadcrumb = [] %}Options
Contains all the options available to dlf-base.
The index template adds makes more options available.
| Option name | Option type | Description |
|---|---|---|
data_type |
variable | This is the collection name and is set by the renderer. It can be overridden in the template if needed. |
indexTitle |
block | Part of content block. Contains the heading displayed on the page |
indexList |
block | Part of content block. Displays a list of records or the records grouped. |
initMapBlock |
block | Part of bodyEnd block. JS script the looks for boundary-map module and inits the map. |
initFilteringBlock |
block | Part of bodyEnd block. JS script that sets up any filters on the page - these can be a FilterList filter and a FilterHistorical filter. |