_includes/

Files that can be accessed by the include tag.

Folder structure

_includes/
|-- collapsible-block.html
|-- command-blurbs.html
|-- footer_custom.html
|-- head_custom.html
|-- include-example.html
|-- instructions.html
|-- label-note.html
|-- label-recommended.html
|-- label.html
|-- nav.html
|-- toc-collapsible.html
|-- toc-collection.html
|-- toc-element.html
`-- toc-same-page.html

Table of Contents

• Table of Contents
• collapsible-blocks.html
• command-blurbs.html
• footer_custom.html
• head_custom.html
• include-example.html
• instructions.html
• label-note.html
• label-recommended.html
• label.html
• nav.html
• toc-collapsible.html
• toc-collection.html
• toc-element.html
• toc-same-page.html

collapsible-blocks.html

Creates a expandable/collapsible block using the HTML tag <details> tag.

example

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

Back to top

command-blurbs.html

Creates blurbs for a Collection or array of PennController commands. Ends with a Back to top link and a horizontal rule.

example

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

    

newText("helloworld", "Hello world!")
    .print()
,
newImage("smiley", "ya.png")
    .print()
,
newButton("erase", "Erase")
    .print()
    .wait()
,
clear()
,
newButton("void", "Enough with the emptiness")
    .print()
    .wait()

Back to top

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="/pcibex/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.

As of September 3, 2020 head_custom.html only contains the line <link rel="stylesheet" href="/pcibex/assets/prism/prism.css">, which is used to style the Prism syntax highlighter.

include-example.html

Creates the description and example blocks used on this page. See the documentation for adding a new _includes file.

instructions.html

Creates a instructions block; used in the Basic Tutorial and Advanced Tutorial.

example

      
{% capture instructions %}
Click **main.js** to open `main.js` in the script editor:
```javascript
// This is the BasicTutorial experiment.
// Type code below this line.
```
{% endcapture %}
{% include instructions.html text=instructions %}

    

// This is the BasicTutorial experiment.
// Type code below this line.

Back to top

–

label-note.html

Uses ./_includes/label.html as a base; creates a yellow label that says note.

example

      
{% capture label %}
This is a note.
{% endcapture %}
{% include label-note.html label-body=label %}

    

Back to top

label-recommended.html

Uses ./_includes/label.html as a base; creates a green label that says recommended.

example

      
{% capture label %}
It is recommended to...
{% endcapture %}
{% include label-recommended.html label-body=label %}

    

Back to top

label.html

Creates a label with some body text on a grey-lt-100 background.

example

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

    

Back to top

nav.html

description

• Overrides the original Just the Docs ./_includes/nav.html file:
• Implements the custom navigation YAML tags.
• Adds a horizontal rule below the Announcements, Advanced Tutorial, and Commands pages.

toc-collapsible.html

Creates an expandable/collapsible Table of Contents for a Collection or array.

• TOC entries are links to another page.

example

      
{% include toc-collapsible.html collection=site.special-commands
id=special-commands %}

    

Back to top

toc-collection.html

Creates a Table of Contents for a Collection or array.

• TOC entries are links to another page.

example

      

{% include toc-collection.html collection=site.core-concepts ordered=true %}


    

Back to top

toc-element.html

Creates a right-floating Table of Contents for an element type’s element-specific commnds.

example

      
{% assign action-commands = site.action-commands | where_exp:"page", "page.title contains 'button'" %}
{% assign test-commands = site.test-commands | where_exp:"page", "page.title contains 'button'" %}
{% include toc-element.html actionCommands=action-commands
testCommands=test-commands %}

    

Back to top

toc-same-page.html

Creates a Table of Contents for a Collection or array.

• TOC entries are links to sections on the same page.

example

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

    

Back to top