addteq-front-page.png

One of the goals of Addteq's website redesign was to create a modular approach. This would allow for easy content changes, without needing a developer to be involved in every change. We also wanted to create a workflow, where all the web components should be reused throughout the entire site and for all future changes. Based on these requirements, we decided to break the site into two separate categories, static pages and dynamic pages. Let's take a closer look at these types of pages and why we chose the Nunjucks Template Engine to develop them on.


Check Out Nunjucks

Static Pages

Static Pages are pages in which the content does not change on a regular basis. The majority of the pages on our website fall into this category.

So why Nunjucks for our Static Pages? One of the biggest reasons for using Nunjucks was the fact that it was one of the few template engines that had template inheritance support. This allowed us to create one reusable base page template, across the entire site. All of our static pages were built using Nunjucks Templating Engine.

Nunjucks also provides full support for includes and macros. Includes allowed us to create partial templates, for example our header and footer, and then add them seamlessly to the base page template. Below is an example of this code template.


Base Template File for Website

base-template-code.png

By creating a Base Template File, we created a centralized code base which made any changes to the overall structure of the site extremely easy to modify. Includes cannot pass parameters, so we utilized macros to pass parameters to the partial template. Utilizing macros was used mainly in the case of nested pages, such as the /products/codefactori page. This created a problem where the paths for the images within the header and footer, needed to be modified. By making the image path a variable, this situation was easily rectified. 

One final benefit of using a template engine, was the ability to pass data into each individual page via .json files. With this feature, we were able to convert all of the static html content into json objects and then merge them into the templates using a Gulp task.

The biggest reason for using .json files was for the future, we wanted the content team to be able to edit the .json files directly in Bitbucket. Thus, allowing our content to take on a more dynamic flow while still maintaining all the benefits of a static site. Due to the fact that we were already using Bitbucket as our primary code repository, this approach would save the developers a lot of time with minor changes. 

Gulp task for rendering the Nunjucks templates into HTML pages 

gulp-task-code.png

Dynamic Pages

Dynamic pages are pages on your website where the content changes regularly. The blog and career sections of the Who We Are page on our website, are dynamic. The main goal of having dynamic pages on our website, was to allow our marketing team to use Confluence as a CMS. By using Confluence as a CMS, the marketing team stays within the Atlassian ecosystem, and removes the barrier of having to learn new software and create new workflows for delivering content. To achieve this, we used K15t's Scroll Viewport Plugin, which allowed us to develop our page styles using web development technologies such as HTML, CSS and JavaScript but also keep our content within Confluence.


Workflow of the K15t Scroll Viewport Plugin

addteq-blog-page.png