Your glossary page can take advantage of definitions stored in a data file. This gives you the ability to reuse the same definition in multiple places. Additionally, you can use Bootstrap classes to arrange your definition list horizontally.
Edit me
You can create a glossary for your content. First create your glossary items in a data file such as glossary.yml.
Then create a page and use definition list formatting, like this:
- fractious
- Like a little mischevious child, full of annoying and constant trouble.
- gratuitous
- Something that is unwarranted and uncouth, like the social equivalent of a flagrant foul.
- haughty
- Proud and flaunting it. Holding your head high up like a snooty, too-good-for-everything rich person.
- gratuitous
- Something that is unwarranted and uncouth, like the social equivalent of a flagrant foul.
- impertinent
- Brave and courageous especially in a difficult, dangerous situation.
Here’s the code:
fractious
: {{site.data.glossary.fractious}}
gratuitous
: {{site.data.glossary.gratuitous}}
haughty
: {{site.data.glossary.haughty}}
gratuitous
: {{site.data.glossary.gratuitous}}
impertinent
: {{site.data.glossary.intrepid}}
The glossary works well as a link in the top navigation bar.
Horizontally styled definiton lists
You can also change the definition list (dl
) class to dl-horizontal
. This is a Bootstrap specific class. If you do, the styling looks like this:
- fractious
- Like a little mischevious child, full of annoying and constant trouble.
- gratuitous
- Something that is unwarranted and uncouth, like the social equivalent of a flagrant foul.
- haughty
- Proud and flaunting it. Holding your head high up like a snooty, too-good-for-everything rich person.
- gratuitous
- Something that is unwarranted and uncouth, like the social equivalent of a flagrant foul.
- impertinent
- Someone acting rude and insensitive to others.
- intrepid
- Brave and courageous especially in a difficult, dangerous situation.
For this type of list, you must use HTML. The list would then look like this:
<dl class="dl-horizontal">
<dt id="fractious">fractious</dt>
<dd>{{site.data.glossary.fractious}}</dd>
<dt id="gratuitous">gratuitous</dt>
<dd>{{site.data.glossary.gratuitous}}</dd>
<dt id="haughty">haughty</dt>
<dd>{{site.data.glossary.haughty}}</dd>
<dt id="benchmark_id">gratuitous</dt>
<dd>{{site.data.glossary.gratuitous}}</dd>
<dt id="impertinent">impertinent</dt>
<dd>{{site.data.glossary.impertinent}}</dd>
<dt id="intrepid">intrepid</dt>
<dd>{{site.data.glossary.intrepid}}</dd>
</dl>
If you squish your screen small enough, at a certain breakpoint this style reverts to the regular dl
class.
Although I like the side-by-side view for shorter definitions, I found it problematic with longer definitions.