_includes/
Files that can be accessed by the include tag.
Folder structure
_includes/
|-- bottom-navbar.html
|-- collapsible-block.html
|-- collect-tags.html
|-- command-blurbs.html
|-- code-example.html
|-- footer_custom.html
|-- head_custom.html
|-- instructions.html
|-- label-deprecated.html
|-- label-note.html
|-- label-technical.html
|-- label.html
|-- nav.html
|-- post-excerpt.html
|-- toc-collection.html
|-- toc-command,html
`-- toc-element.html
Table of Contents
bottom-navbar.htmlcollapsible-blocks.htmlcollect-tags.htmlcommand-blurbs.htmlcode-example.htmlfooter_custom.htmlhead_custom.htmlinstructions.htmllabel-deprecated.htmllabel-note.htmllabel-technical.htmllabel.htmlnav.htmlpost-excerpt.htmltoc-collection.htmltoc-command.htmltoc-element.html
bottom-navbar.html
Description
Creates a bottom navigation bar with three sections. By default, the left and right sections are empty, and the middle section contains a ↑ back to top link.
Parameters
paginator=true: Turns the bottom navbar into a paginator.- If
paginator=true, thepage: intandtotal: intparameters must also be included. The middle section text ispage {{ page }} of {{ total }} - If you do not want a paginator bottom navbar, omit the
paginatorparameter completely. You do not need to includepaginator=false.
- If
previous: page: The page that the left section links to.- If
paginator=true, the left section links toprevious, and its text is← older posts. - If the
paginatorparameter is omitted, the left section links topreviousand its text is← previous page {{ previous.title }}.
- If
next: page: The page that the right section links to.- If
paginator=true, the right section links tonext, and its text isnewer posts →. - If the
paginatorparameter is omitted, the right section links tonextand its text isnext page → {{ next.title }}.
- If
current: string: The title of the current page.- If
paginator=true, thecurrentparameter does not do anything. - If the
paginatorparameter is omitted, the middle section text is↑ back to top {{ current }}.
- If
Example
{% assign previous_page = site.html_pages | where: "title", "Core Concepts" | first %}
{% assign next_page = site.html_pages | where: "title", "Elements" | first %}
{% include bottom-navbar.html previous=previous_page next=next_page current="Hello" %}
collapsible-blocks.html
Description
Creates an expandable and collapsible block.
Parameters
Example
{% capture content %}
Surprise!
{% endcapture %}
{% include collapsible-block.html content=content summary="Click for more details" inner-border=true outer-border=true %}
Click for more details
Surprise!
- Include
inner-border=trueargument to create a border inside the expanded block. - Include
outer-border=trueargument to create a border around the summary. - By default there are no borders.
collect-tags.html
Implements tagging without using a plugin.
command-blurbs.html
Creates blurbs for each item in the collection argument array. Each blurb ends with a Back to top link.
If the blurb is not the last commmand in the collection, it prints a horizontal rule after the “Back to top” link.
{% assign clear-command = site.special-commands | where_exp:"page", "page.title contains 'clear'" %}
{% include command-blurbs.html collection=clear-command %}
clear
syntax
clear() description
Removes from the screen any element that was previously added during the trial.
example
click to expand
newText("helloworld", "Hello world!")
.print()
,
newImage("smiley", "ya.png")
.print()
,
newButton("erase", "Erase")
.print()
.wait()
,
clear()
,
newButton("void", "Enough with the emptiness")
.print()
.wait()
- Prints a line of
Text, anImageand aButtonwith the text"erase"to the screen. - Remove the three elements from the screen when the
"erase"Buttonis clicked. - Print a new
Buttonthat is waiting to be clicked to the screen.
code-example.html
To be filled in
footer_custom.html
Adds custom content to the original Just the Docs ./_layouts/default.html file.
As of October 27, 2020 footer_custom.html is the same as the original Just the Docs footer_custom.html file with the addition of the line <script src="/assets/prism/prism.js"></script>, which is the source code for the Prism syntax highlighter.
head_custom.html
Adds custom content to the original Just the Docs ./_includes/head.html file.
instructions.html
Creates a instructions block.
{% capture instructions %}
Click **main.js** to open `main.js` in the script editor:
```javascript
// Type code below this line.
```
{% endcapture %}
{% include instructions.html text=instructions %}
Click main.js to open main.js in the script editor:
// Type code below this line.
label-deprecated.html
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
label-note.html
Creates a note block.
{% capture label %}
This is an example note. Notes support Markdown syntax, meaning that you can
freely *italicize* and **bold** text, and even create lists:
1. Lorem
2. Ipsum
3. Dolor
+ Consectetur
+ Adipsicing
+ Elit
{% endcapture %}
{% include label-note.html label-body=label %}
This is an example note. Notes support Markdown syntax, meaning that you can freely italicize and bold text, and even create lists:
- Lorem
- Ipsum
- Dolor
- Consectetur
- Adipsicing
- Elit
label-technical.html
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
label.html
Creates a label block.
{% capture label %}
This is a label.
{% endcapture %}
{% include label.html label-color="purple" label-title="new label" label-body=label %}
This is a label.
nav.html
- Overrides the original Just the Docs
./_includes/nav.htmlfile: - Implements the custom navigation YAML tags.
- Adds a horizontal rule below the Announcements, Advanced Tutorial, and Commands sections.
- Adds hidden navigation for Internal Documentation section.
post-excerpt.html
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
toc-collection.html
Creates a Table of Contents list. The items in the list are taken from the collection argument array.
{% include toc-collection.html collection=site.special-commands code-font=true %}
- TOC is an unordered list by default; include
ordered=trueargument for an ordered list. - TOC entries are text font by default; include
code-font=trueargument for code font.
toc-command.html
Creates a Table of Contents table. The items in the table are taken from the collection argument array.
{% include toc-command.html collection=site.special-commands same-page=true %}
toc-element.html
Creates a Table of Contents block with a list of action command and a list of test commands.
The items in the action command list are taken from the element-action and standard-action argument arrays, and the items in the test command list are taken from the element-test and standard-test argument arrays.
{% include toc-element.html element-action=element-action element-test=element-test standard-action=standard-action standard-test=standard-test %}