Build Page Layouts

There are 3 methods to write contents on pages.

1. Making an HTML file in the page folder.
2. Using a PHP file in the page folder.
3. Linking a layout stored in the rnd-content/layouts folder.

If you have not read those before, please click here and learn how to get started your content writing in RND Framework. Here we will only discuss the 3^rd method.

Understanding the Json file of a page

RND Framework keeps a simple Json file to store data related to a page. Every page must have this Json file, otherwise it will show a 404 page or an error message. This Json file will have the following structure.

            {
                "head": {
                    "title": "This is meta title of about page",
                    "text": "This is meta description of the about page. Keep it unique to boost SEO.",
                    "keys": "about website",
                    "short": "About",
                    "layout": "Your-Page-Layout-Name-Goes-Here"
                },
                "body": {},
                "style": {},
                "script": {}
            }    
    

As we have discussed about head section in the previous example here, let’s learn about others. But do not forget the layout value in the head section.

Why does RND use a Json file? Any computer user can understand a Json array and keep editing the file faster using a basic code editor. They don’t have to know HTML, CSS, or JavaScripts to do it. As this Json file will be linked with a page layout, a developer can update the page layout without accessing its content. For a small web developing company, they can easily pass this Json file to their customer and give instructions to fill it. Unlike other CMS, there will be no risk as content writers cannot play with your source codes. You can sleep free without worrying about backdoors!

How to create my own page layouts?

Once you have created a page layout, you can easily link it with thousands of pages via the Json file. A content writer can fill the Json file and upload to the site without breaking the core design of the page. For a beginner, this can be a little bit complicated. Somehow, using Page Layouts, you can save a lot of hours and improve the security of your website.

Just follow the steps below to create your first page layout.

Step 01: Install page layout generating plugin

First of all, download and install our Page Layout Generating plugin Free from GitHub (Click Here). There is no special setup, just put the plugin in your plugins folder.

Step 02: Create core files of your layout

1. Go to your rnd-content/layouts folder (create the path, if not exist). All your page layouts will be stored here and they will act as child-themes.
2. Inside the layouts folder, you have to have a new folder for each layout you design. Let's say you are going to create a page layout named, “my-first-page-layout”. Just create a new folder with the name, “my-first-page-layout”.
3. Inside “my-first-page-layout” folder, create a new HTML file as “my-first-page-layout.html”. Please note that this HTML file must have the name of the page layout folder. Otherwise, it will not work well. We will use this file to put HTML contents of our page body.
4. Inside “my-first-page-layout” folder, create a new CSS file as “my-first-page-layout.css”. This file will store the styles of your page layout.
5. Finally, create “my-first-page-layout.js” inside “my-first-page-layout” to store JavaScripts of your page layout.

Step 03: Write codes related to your layout

Now we are going to write HTML, CSS, JS codes for the layout. To keep it simple, we will only use simple HTML, CSS, JS codes here. You can build more complex layouts once you understand the pattern. Just try to understand texts which are wrapped by {{ }}.

my-first-page-layout.html

        <div class="my-lovely-div">
            <h2>{{my-main-title}}</h2>
            <p>{{my-main-text}}</p>
            <button class="my-lovely-button" onclick="navigate_new()">{{my-button-label}}</button>
        </div>  

    

my-first-page-layout.css

        .my-lovely-div{ 
            padding: 25px;
         }

        .my-lovely-button {
            background-color: {{my-color}};
            border: none;
            color: white;
            padding: 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: {{my-radius}};    
        }

    

my-first-page-layout.js

         function navigate_new(){
            if (confirm("{{my-message}}")) {
                location.replace("{{my-target1}}");
            } else {
                location.replace("{{my-target2}}");   
            }
         } 
 
    

Now try to understand the above codes. We use {{ }} wrapped text to address variables on our page layout. For example, the title/text of a page will be unique and you will use another title/text for another page. When you use this concept, you can easily change title/text without touching the page layout in future. Just go to the next step to see how it works.

Step 04: Generate the page’s Json file

In Step 01, you installed a plugin to generate page layouts. This plugin will automatically generate the page's Json file when you reload your website.

1. After finishing coding (Step 03), reload your website once.
2. Go to rnd-content/layouts folder.
3. Inside it, you will find a JSON file named my-first-page-layout.json.
4. Just use this json file’s structure to create new pages.

my-first-page-layout.json

        {
            "head": {
                "title": "[[TITLE]]",
                "text": "[[TEXT]]",
                "keys": "[[KEYWORDS]]",
                "short": "[[SHORT]]",
                "layout": "my-first-page-layout"
            },
            "body": {
                "my-main-title": "[[MY-MAIN-TITLE]]",
                "my-main-text": "[[MY-MAIN-TEXT]]",
                "my-button-label": "[[MY-BUTTON-LABEL]]"
            },
            "style": {
                "my-color": "[[MY-COLOR]]",
                "my-radius": "[[MY-RADIUS]]"
            },
            "script": {
                "my-message": "[[MY-MESSAGE]]",
                "my-target1": "[[MY-TARGET1]]",
                "my-target2": "[[MY-TARGET2]]"
            }
        }
    

Your JSON file will look like above. What you have to do is fill this Json file and put it in the page folder. RND Engine will automatically render the page using "my-first-page-layout". It is really easy and an amazing way to create content on websites. We will discuss this in the next step.

Step 05: Create pages using the Json file

Do you remember the method of making pages in RND Framework? Just click here and learn the basics, if you don’t know how to create pages. Our page’s json file should have the structure that we create via page layouts. Just look at the Json below to understand how we have modified it to work.

    
        {
            "head": {
                "title": "This is Meta title, good for SEO/SMO",
                "text": "This is the meta description of the page, why not write something attractive?",
                "keys": "keyword1, keyword2, keyword3",
                "short": "Hello",
                "layout": "my-first-page-layout"
            },
            "body": {
                "my-main-title": "Hey guys, I know RND Page Layouts!",
                "my-main-text": "Page layouts are amazing! It helps me to keep a common design for a lot of pages and save hours that I spend on code editing. 
Want to learn more about RND Page Layouts?",
                "my-button-label": "Click Here"
            },
            "style": {
                "my-color": "#45dd34",
                "my-radius": "25px"
            },
            "script": {
                "my-message": "Do you want to see a complex page layout?",
                "my-target1": "my-complex-page-layout",
                "my-target2": "my-first-page-layout"
            }
        } 
        
    

When you put this Json file in the page folder, it will automatically render the page using the layout you created.

Click here to see the final result of our work.

NOTE: Please note that page layouts are just like child-themes. If your page layouts use styles from the main template, those styles will disappear once you have changed your template with another one. Therefore, always avoid using the main template’s styles in your Page Layouts.

---

Building Complex Page Layouts

Sometimes, we have to build complex layouts to render powerful web pages. RND Framework supports you to create complex page layouts once you have learnt the basics.

Before learning complex page layouts, you must learn how to create a basic page layout. Just scroll up and learn.

A complex page layout will have a special folder named children inside it. Let's say you are going to create a page layout named "my-complex-page-layout". Just follow the steps below,

1. Create a folder named "my-complex-page-layout" inside the "layouts" folder.
2. Then create the following 3 files inside it. "my-complex-page-layout.html", "my-complex-page-layout.css", "my-complex-page-layout.js".
3. Inside "my-complex-page-layout" folder, create a subfolder named "children" also.

A complex page layout can have HTML elements which are looping over the page. For example, a shopfront can have different products which use the same box layout to present those. You can write this box layout in HTML and store it in the "children" folder. Then "my-complex-page-layout.html" can load it and loop over the page easily by using a simple tag. Let us discuss this with an example.

First create an HTML file inside "children" folder named as "my-simple-box.html".

children/my-simple-box.html

        <div class="my-box">
            <h3>{{my-box-title}}</h3>
            <p>{{my-box-text}}</p>
            <button class="my-lovely-button" onclick="say_hi()">{{my-box-button-label}}</button>
        </div>   

    

Now create another HTML file inside "children" folder named as "my-boxes.html".

children/my-boxes.html

        <div class="my-boxes">
            <h2>{{my-title}}</h2>
            <p>{{my-text}}</p>
            ---my-simple-box---
        </div> 

    

Great! Can you see the ---my-simple-box--- code above? This instructs RND Engine to render HTML from "my-simple-box.html" file located in the children folder. Three dashes sign, --- is used to wrap my-simple-box and frameworks identify it as a hook to the "my-simple-box.html" file. This helps us to reduce HTML tags and also to keep layout clean and simple.

Then what we have to do is linking children with the main HTML file "my-complex-page-layout.html". Just check the codes below.

my-complex-page-layout.html

        <div class="my-lovely-div">
            <h1>{{my-main-title}}</h1>
            <p>{{my-main-text}}</p>
            ---my-boxes---
        </div>  

    

Can you see the ---my-boxes--- code above? It means, you have linked "my-boxes.html" design in the "children" folder to the main page layout.

No reload your website once and find the json file generated by rnd-layout-json-generator plugin. If you don’t remember how to do this, just scroll up and find Step 04: Generate the page’s Json file section.

The Json file will look like below.

my-complex-page-layout.json

        {
            "head": {
                "title": "[[TITLE]]",
                "text": "[[TEXT]]",
                "keys": "[[KEYWORDS]]",
                "short": "[[SHORT]]",
                "layout": "my-complex-page-layout"
            },
            "body": {
                "my-main-title": "[[MY-MAIN-TITLE]]",
                "my-main-text": "[[MY-MAIN-TEXT]]",
                "my-boxes": {
                    "my-title": "[[MY-TITLE]]",
                    "my-text": "[[MY-TEXT]]",
                    "layout": "my-boxes",
                    "my-simple-box": {
                        "layout": "my-simple-box",
                        "my-box-title": "[[MY-BOX-TITLE]]",
                        "my-box-text": "[[MY-BOX-TEXT]]",
                        "my-box-button-label": "[[MY-BOX-BUTTON-LABEL]]"
                    }
                }
            }
        }
        
    

Now take a close look at the body array in the Json file above. Do you see that "my-boxes" has its own layout and "my-simple-box" does the same?

Now you can duplicate "my-simple-box" and add more boxes to the page easily. Just look at the following Json file.

        {
            "head": {
                "title": "This is Meta title, good for SEO/SMO",
                "text": "This is the meta description of the page, why not write something attractive?",
                "keys": "keyword1, keyword2, keyword3",
                "short": "Hello",
                "layout": "my-complex-page-layout"
            },
            "body": {
                "my-main-title": "Complex Page Layouts",
                "my-main-text": "This example shows a complex page layout that is built using RND Framework.",
                "my-boxes": {
                    "my-title": "Why do we need complex layouts?",
                    "my-text": "HTML contents basically have a lot of duplicates and managing a long HTML page is really difficult. RND complex page layouts simplify it for the developer.",
                    "layout": "my-boxes",
                    "my-simple-box1": {
                        "layout": "my-simple-box",
                        "my-box-title": "Less Codes",
                        "my-box-text": "You write simple HTML codes and hook them using tags.",
                        "my-box-button-label": "Say Yes"
                    },
                    "my-simple-box2": {
                        "layout": "my-simple-box",
                        "my-box-title": "Reduce Time",
                        "my-box-text": "It saves a lot of hours you spend on code editing.",
                        "my-box-button-label": "Say Yes"
                    },
                    "my-simple-box3": {
                        "layout": "my-simple-box",
                        "my-box-title": "Moveable",
                        "my-box-text": "Just copy and paste your designed layouts to other projects easily.",
                        "my-box-button-label": "Say Yes"
                    },
                    "my-simple-box4": {
                        "layout": "my-simple-box",
                        "my-box-title": "SEO Friendly",
                        "my-box-text": "Search engines love clean content layouts and boost your rank.",
                        "my-box-button-label": "Say Yes"
                    }
                }
            }
        }

    

This can be a bit complicated, but after learning, you can do big stuff easily with complex page layouts.

Click here to see the final result of above Json.

---

Accessing Media Folder Using Layouts

Sometimes, we need to link our Media folder with HTML elements in our page layout. For example, if you need to show a featured image of a product, this image will be hosted in a unique folder in your uploads folder. (Eg. "rnd-content/uploads/products/product1/featured-image.png").

You can easily use the following trick when you create the HTML layout.

    
        < img src="[[MEDIA_URL]]/products/product{{product-id}}/featured-image.png" >
        
    

RND Engine will automatically replace [[MEDIA_URL]] with the address of your media folder. So in the page’s Json file, you only have to add the product-id as shown below.

You can use any constants in your page layouts like this. To explore more constants, visit here.

    
        {
            "head": {},
            "body": {
                "product-id": "1"
            },
            "style": {},
            "script": {}
        }
        
    

Confusing? Actually this is a wonderful solution to avoid duplication when we create online shops and similar applications. The Json file keeps it simple while layout keeps the image path safer inside the HTML code.

If a hacker tries to manipulate your shop images, he has to rewrite HTML layouts. If you keep server’s file permissions in a correct way, rewriting HTML layout is impossible for a stranger. Furthermore, there is no way to use SQL injection or JavaScript manipulation, if you keep running trusted RND plugins.

Especially, if you plan to move your images to a CDN, you can just easily change the image path from the page layout and save hours that you spend to repair broken images.