See all tutorials

Tutorials » How to reuse content across web site pages

Almost all web applications have content that appears on multiple web pages on that application, to enumerate some examples: the header, the main menu, the footer, a search bar and so on.

Webpagebytes CMS administration interface allows to group content fragments under Page modules section and then to reuse these modules across site pages or even other page modules.

To create a page module and use it in web site pages take the following tasks

  1. Identify content code that is duplicated across pages, the tutorial will use a simple menu navigation
  2. Group reusable content blocks in page modules
  3. Include the page modules in the web pages

This tutorial uses a simple site menu navigation as example.
web page menu navigation example
The code that generates this web page is below

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="./bootstrap-3.3.2-dist/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <nav class="navbar navbar-default" style="margin-top:10px">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">Demo menu</a>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="./">home</a></li>
                    <li><a href="./">documentation</a></li>
                    <li><a href="./">blog</a></li>
                    <li><a href="./">download</a></li>                  
                    <li><a href="./about">about</a></li>
                </ul>
            </div>
        </nav>
        <h2> Home page </h2>
        Dummy home page..      
    </div>
</body>
</html>

In order to include the menu navigation in multiple pages, the same block of HTML code needs to be copy/paste in multiple sources. This is inefficient in terms of maintenance because a change in the menu will have to be done across a lot of code page sources.

Group reusable content blocks in page modules

In order to optimize the usage of the menu block code, this can be extracted an placed in a Page module.
Take the following HTML code and create a page module.

<nav class="navbar navbar-default" style="margin-top:10px">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">Demo menu</a>
    </div>
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li><a href="./">home</a></li>
            <li><a href="./">documentation</a></li>
            <li><a href="./">blog</a></li>
            <li><a href="./">download</a></li>                  
            <li><a href="./about">about</a></li>
        </ul>
    </div>
</nav>

Include the page modules in the web pages

Once that the site page module(s) were created these can be included in the site pages or other page modules.
The home page source code will become the following one.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="./bootstrap-3.3.2-dist/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <@wpbModule externalKey="9255b083-95a3-4752-a4fd-5bad5ad57fc0" />
        <h2> Home page </h2>
        Dummy home page...        
    </div>
</body>
</html>
Note the usage of <@wpbModule externalKey="9255b083-95a3-4752-a4fd-5bad5ad57fc0" /> Freemarker directive. The externalKey attribute in the directive is the value from the page module where the menu was added.

The home page module source interpretation needs to change to 'Template text source' because at this step the page source contains Freemarker script.

Any change of the site menu page module will be reflected instant in all the site pages were this module is used.

Fork me on GitHub