Content Management System

Kit55 provides a simple Content Management System (CMS) that allows you to separate content from markup (HTML).

Imagine a blog site with two pages: one displaying a list of post titles (home.html) and another page showing the full post details (post_detail.html).

When working with HTML, you would typically need to repeat the titles on both the post list page and the detail page.

In most cases, you can keep your text in the same place as your HTML, within your web page. However, there are certain use cases where you need to separate your content from the markup.

How does it work?

With Kit55, you can create a file called context.json and place it right below src. This file will contain your content, structured in JSON format. Make sure to name the file context.json, and Kit55 will automatically retrieve all the data from it and make it available to your pages.

For example, your context.json file could have the following structure:

{
  blog: [{
    title: "My first post",
    body: "If it's your job to eat a frog, it's best to do it first thing in the morning. And If it's your job to eat two frogs, it's best to eat the biggest one first."
  },
  {
    title: "My second post",
    body: "Whenever you find yourself on the side of the majority, it is time to pause and reflect."
  }]
}

This data is now available for you to use, so you can modify your home.html to loop through the titles:

...
{% for entry in blog %}
  <a href="{{entry.url}}">{{entry.title}}</a><br>
{% endfor %}
...

And you can reference the same data from your post detail page (post_detail.html):

...
  <a href="{{blog[0].url}}">{{blog[0].title}}</a><br>
  <span>{{blog[0].body}}</span>
...

You can find more information about the context dictionary object (context.json), variables and loop controls in the official Jinja documentation.

If you want to see how the Micro CMS works in a real example, download Kit55 Blog template.