Creating node templates - the tpl html files

So far we learnt that a node is a file system folder, and it can contain metadata in a JSON file.

But how is this metadata rendered? Apart from the index.html file, that we have already seen, each node can be rendered through a template.

Creating a template file

Creating a basic template for a node, is quite easy: just add a tpl.html file inside its related folder. Inside the tpl.html, write the output of the rendered node.

I.e. given a helloworld node, and a helloworld/tpl.html file looking like this:

We are saying that this node, when rendered, should really just display "Hello world". 

In this very simple case, no metadata is asked from the node... it's just plain html. 

But what if - in example - we want the rendered node to display its title and body? 

Easily done!

By using the [ATTRIBUTE] qtag, we can fetch metadata from the node. 

Side note: Quanta's guidelines wouldn't encourage using html tags in tpl files. But we are making an exception in those examples, to show you that you actually can do it, if you really want!

One tpl to rule them all: templating for sub-nodes

So, one node can have one template. But if you have several hundreds of nodes, each having to look more or less the same (think about the articles of a blog), you certainly don't want to redundandly copy-paste your tpl.html file each time - as in a prehistoric html site written with notepad! 

That's where Quanta's templating system comes to help, allowing sub-folder templating up to 5 levels.  

Given the structure below:

📂  animals
  • 📁  duck
    • 📂  dog
      • 📁  labrador
        • 📁  beagle
        • 📂  cat
          • 📁  maine-coon

          Placing a tpl-.html file in animals would affect cat, dog, duck, as those nodes are 1 level below animals

          Placing a tpl-.html file in cat, would affect maine-coon, as this node is 1 level below cat

          Placing a tpl-.html file in dog would affect beagle, labrador, as those nodes are 1 level below dog

          Placing a tpl-.html file in duck, would affect nothing, as there is no sub-node below duck.

          Placing a tpl--.html file in animals would affect: maine coon, beagle, labrador, as those nodes are 2 levels below animals.

          You can go as deep as 5 levels (aka tpl-----.html). If you need more, there is probably something wrong in your site architecture... think twice and read the guidelines!

          Creating a catch-all template file

          A catch-all template file aka tpl^.html, applies to the node where it's placed, and all its siblings.

          In example, given the structure below:

          📂  animals
          • 📁  duck
            • 📂  dog
              • 📁  labrador
                • 📁  beagle
                • 📂  cat
                  • 📁  maine-coon

                  Placing tpl^.html in "beagle", would only affect beagle.

                  Placing tpl^.html in "dog", would affect dog, beagle, labrador.

                  Placing tpl^.html in "animals", would affect all animals and species in Noah's ark!