_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.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, the page: int and total: int parameters must also be included. The middle section text is page {{ page }} of {{ total }}
    • If you do not want a paginator bottom navbar, omit the paginator parameter completely. You do not need to include paginator=false.
  • previous: page: The page that the left section links to.
    • If paginator=true, the left section links to previous, and its text is ← older posts.
    • If the paginator parameter is omitted, the left section links to previous and its text is ← previous page {{ previous.title }}.
  • next: page: The page that the right section links to.
    • If paginator=true, the right section links to next, and its text is newer posts →.
    • If the paginator parameter is omitted, the right section links to next and its text is next page → {{ next.title }}.
  • current: string: The title of the current page.
    • If paginator=true, the current parameter does not do anything.
    • If the paginator parameter is omitted, the middle section text is ↑ back to top {{ current }}.

Example

input

      
  
  {% 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" %}
  

    
output

collapsible-blocks.html

Description

Creates an expandable and collapsible block.

Parameters

Example

input

      
  
  {% capture content %}
  Surprise!
  {% endcapture %}
  {% include collapsible-block.html content=content summary="Click for more details" inner-border=true outer-border=true %}
  

    
output
Click for more details

Surprise!

  • Include inner-border=true argument to create a border inside the expanded block.
  • Include outer-border=true argument 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.

input

      
  
  {% assign clear-command = site.special-commands | where_exp:"page", "page.title contains 'clear'" %}
  {% include command-blurbs.html collection=clear-command %}
  

    
output

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()
  1. Prints a line of Text, an Image and a Button with the text "erase" to the screen.
  2. Remove the three elements from the screen when the "erase" Button is clicked.
  3. Print a new Button that is waiting to be clicked to the screen.
↑ back to top

code-example.html

To be filled in


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.

input

      
  {% 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 %}
  
    
output
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.

input

      
  
  {% 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 %}
  

    
output
note

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

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.

input

      
  
  {% capture label %}
  This is a label.
  {% endcapture %}
  {% include label.html label-color="purple" label-title="new label" label-body=label %}
  

    
output
new label

This is a label.



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.

input

      
  
  {% include toc-collection.html collection=site.special-commands code-font=true %}
  

    
  • TOC is an unordered list by default; include ordered=true argument for an ordered list.
  • TOC entries are text font by default; include code-font=true argument for code font.

toc-command.html

Creates a Table of Contents table. The items in the table are taken from the collection argument array.

input

      
  
  {% 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.

input

      
  
  {% include toc-element.html element-action=element-action element-test=element-test standard-action=standard-action standard-test=standard-test %}