---
title: Context
description: The variables on this page are in shown in different contexts.
categories:
- context
- pages
- fixtures
items:
- alpha
- omega
---
<style>
.context-test > li {
  position: relative;
  line-height: 1.8;
}
.context-test > li > a:after {
  position: absolute;
  left: auto;
  right: auto;
  content: attr(data-context);
  font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
  padding: 2px 4px;
  margin-left: 10px;
  line-height: 1.5;
  font-size: 90%;
  color: #C7254E;
  white-space: nowrap;
  background-color: #F9F2F4;
  border-radius: 4px;
  clear: both;
}
</style>

<p>If a list item is empty, or rather only has a label and no link, then the variable did not populate a value.</p>

<ul class="context-test">
  <li><a href="#" data-context="title">{{title}}</a></li>
  <li><a href="#" data-context="this.title">{{this.title}}</a></li>
  <li><a href="#" data-context="page.title">{{page.title}}</a></li>
  <li><a href="#" data-context="data.title">{{data.title}}</a></li>
</ul>

<hr>

<ul class="context-test">
  <li><a href="#" data-context="basename">{{basename}}</a></li>
  <li><a href="#" data-context="this.basename">{{this.basename}}</a></li>
  <li><a href="#" data-context="page.basename">{{page.basename}}</a></li>
  <li><a href="#" data-context="data.basename">{{data.basename}}</a></li>
</ul>

<hr>

<ul class="context-test">
{{#each pages}}
  <li><a href="#" data-context="basename">{{basename}}</a></li>
  <li><a href="#" data-context="../basename">{{../basename}}</a></li>
  <li><a href="#" data-context="this.basename">{{this.basename}}</a></li>
  <li><a href="#" data-context="page.basename">{{page.basename}}</a></li>
  <li><a href="#" data-context="data.basename">{{data.basename}}</a></li>
{{/each}}
</ul>

<hr>

<ul class="context-test">
{{#each pages}}
  <li><a href="#" data-context="title">{{title}}</a></li>
  <li><a href="#" data-context="../title">{{../title}}</a></li>
  <li><a href="#" data-context="this.title">{{this.title}}</a></li>
  <li><a href="#" data-context="page.title">{{page.title}}</a></li>
  <li><a href="#" data-context="data.title">{{data.title}}</a></li>
{{/each}}
</ul>