106 lines
3.9 KiB
Plaintext
106 lines
3.9 KiB
Plaintext
{% extends "templates/article.njk" %}
|
|
{% import "components/toc.njk" as toc with context %}
|
|
|
|
{% block header %}
|
|
How to - Article template
|
|
{% endblock %}
|
|
|
|
{% block toc %}
|
|
{% output "toc" %}{% endoutput %}
|
|
{% endblock %}
|
|
|
|
{% block body %}
|
|
<div class="content">
|
|
|
|
{{ toc.header("h1", "Introduction", tocList) }}
|
|
<p>
|
|
I want to start off by saying that this article template (as of now) is really fricking shit.
|
|
The code base is somewhat okay in complexity, but I do not feel like it is done in a efficient/good
|
|
way and won't work without CSS enabled (although, most people don't disable CSS).
|
|
Please use with causition until I've implemented something better that would work without CSS.
|
|
</p>
|
|
|
|
{{ toc.header("h2", "Terminology", tocList) }}
|
|
<p>
|
|
Whenever I say "ToC" in this article I am refering to "Table of Contents". (I couldn't be bothered
|
|
writing it out all the times...)
|
|
</p>
|
|
|
|
{{ toc.header("h1", "Usage", tocList ) }}
|
|
<p>
|
|
To use the template you would simply extend <code>templates/article.njk</code> and
|
|
import <code>components/toc.njk</code>:
|
|
|
|
<code class="code-block">
|
|
{{ '
|
|
{% extends "templates/article.njk" %}
|
|
{% import "components/toc.njk" as toc with context %}
|
|
|
|
{% block header %}
|
|
Your header
|
|
{% endblock %}
|
|
|
|
{% block body %}
|
|
<div class="content">
|
|
<p>
|
|
Your content goes here
|
|
</p>
|
|
</div>
|
|
{% endblock %}' | escape | replace("\n", "", 1) | replace("\n", "<br>") | replace(" ", " ") }}
|
|
</code>
|
|
|
|
You would use the <code>header</code> block to define a header, and then you place your
|
|
content inside a <code>div</code> with the class <code>content</code> in your <code>body</code>-block.
|
|
</p>
|
|
|
|
{{ toc.header("h2", "Adding headers to the ToC", tocList) }}
|
|
<p>
|
|
Adding headers is kind of easy, <code>{% raw %}{% import "components/toc.njk" as toc with context %}{% endraw %}</code>
|
|
imports a macro that will create a header and automatically add it to the table of contents. You use it as such:
|
|
|
|
<code class="code-block">
|
|
{{ '{{ toc.header(size, text, tocList) }}' }}
|
|
</code>
|
|
|
|
<code>size</code> is a string and is a header level (aka <code>h1</code>, <code>h2</code>, <code>h3</code>, etc.),
|
|
<code>text</code> is a string that holds the text you would want to display, and finally <code>tocList</code> is a
|
|
variable inherited from <code>template/article.njk</code> that keeps a hold of which headers should go in the ToC. <br>
|
|
|
|
If you would want to display an <code>{{ '<h1>' }}</code> with the text "Introduction" you would do:
|
|
|
|
<code class="code-block">
|
|
{{ '{{ toc.header("h1", "Introduction", tocList) }}' }}
|
|
</code>
|
|
</p>
|
|
|
|
{{ toc.header("h2", "Generate the ToC", tocList) }}
|
|
<p>
|
|
Sadly it isn't enough to just add the heading to the ToC. You will have to generate the ToC as well, but
|
|
this isn't hard at all to do. You simply add <code>{{ '{{ toc.generate(tocList) }}' }}</code> to the end
|
|
of your <code>body</code>-block.
|
|
</p>
|
|
|
|
{{ toc.header("h1", "Example code", tocList) }}
|
|
<code class="code-block">
|
|
{{ '
|
|
{% extends "templates/article.njk" %}
|
|
{% import "components/toc.njk" as toc with context %}
|
|
|
|
{% block header %}
|
|
Your header
|
|
{% endblock %}
|
|
|
|
{% block body %}
|
|
<div class="content">
|
|
{{ toc.header("h1", "Introduction", tocList) }}
|
|
<p>
|
|
Your introduction goes here...
|
|
</p>
|
|
</div>
|
|
|
|
{{ toc.generate(tocList) }}
|
|
{% endblock %}' | escape | replace("\n", "", 1) | replace("\n", "<br>") | replace(" ", " ") }}
|
|
</code>
|
|
</div>
|
|
|
|
{% endblock %} |