Getting Started with Kademi

We are going to take you through the basics of developing on Kademi, Taking you through editing and customizing pages, templates and components.

Prerequisite

To continue with this course you will need to have set up a website, If you have not already done this please follow the Basic Website Creation guide. You will also need to have set up a blog, To do this follow the Using blogs guide.

Editing the default blog layout

To access the blog template is made easy with the KToolbar.

Accessing the website

Navigate to the dashboard, Look for the website you want to manage and click!

Navigate to the blogs summary page

Look for the "Blogs" menu item on the navigation bar at the top of the page, Select to navigate to the blogs summary page.

Accessing KToolBar and opening the template

Look for the gear at the top centre of the page, Select it and a menu will appear, On the right-hand side select "Template" to open the editor.

Editing the template

This page will allow you to configure the default layout of the blogs summary page. For more information on using the KEditor please have a look at the What is a container and component guide.

Overriding the blog components

Overriding the default components gives you the freedom to customize layouts to match any requirement or design while still making it easy to use.

Finding the component name

Locating the name of the component requires looking at the source code of a page to inspecting the component element, locating the <section> tag and looking at the data-type attribute for example:

<div class="col-sm-9" data-type="container-content">
    <section data-type="component-blogArticleList" data-filter="" data-categories="" data-tags="" data-layout="list">
        <div data-dynamic-href="_components/blogArticleList" id="default-blogArticleList">
            <div class="blog-articles-list">
                <div class="media blog-article">
                    <div class="media-left">
                        <a href="/blogs/blogs/my-article/" class="media-object" title="My Article" style="background-image: url('/static/images/photo_holder.png');">
                        </a>
                    </div>
                    <div class="media-body">
                        <h4 class="media-heading">
                            <a href="/blogs/blogs/my-article/">My Article</a>
                        </h4>
                        <p class="media-content clearfix">

                        </p>
                        <p class="small"><i class="fa fa-clock-o fa-fw"></i> <abbr class="timeago" title="12/01/2018 16:30">4 days ago</abbr></p>
                        <div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

Locating the component source code

The source code for all Kademi's web assets can be found in the GitHub repository kademi-dev. You can find the component source code by using the Find file function of GitHub, Then search for the component by name e.g. if the attribute value is "component-blobArticleList" you will need to search for "blogArticleListComponent", You want to look for the one that's located inside a lib, e.g. blogs-lib

Determining the component folder path

Now that you have located the default component template, Look at the path of the component, For example, kademi-dev/src/main/marketplace/libs/blogs-lib/common/theme/apps/blogs/blogArticleListComponent.html. The path tells us where to place the file on the website. Everything from "theme" is what we will be using, In this case, /theme/apps/blogs/blogArticleListComponent.html.

Finding the website repository

Navigate to the File Manager from the navigation menu on the left-hand side, Once selected locate your website in the list and select "files".

Navigating to the correct folder

Navigate to the path we determined in a previous step. If any folders don't exist create then using the "Create a folder" button shown in the screenshot below.

Creating the component file

Select the "Create text file" button, When prompted to enter a file name, Enter the name of the component for example, "blogArticleListComponent.html"

Inserting the template

Select the newly created file which will open it in a text editor. In GitHub copy the template code and paste it into the text editor. Save the file before proceeding.

Templating Basics

Kademi uses a templating engine called Velocity. You can find their User Guide here and the Reference Guide here. Before Continuing, head over to the Templating Guide to templating basics and a list of available variables accessible through templating.