Made withOctober CMSClip

Making Websites With October CMS - Part 06 - Basic Templating

W

Watch and Learn

Creator on the October CMS channel

Watch on YouTube ↗

40K viewsAug 6, 201611:11 runtime

Learn the fundamentals of templating in October CMS by building a basic website structure from scratch. This tutorial guides you through creating and integrating reusable partials for your header and footer, organizing your layout with CSS classes, and constructing a dynamic…

Chapters

#octobercms#clip#cmscrm

Key Concepts: Basic Theming in October CMS

This document outlines the fundamental techniques for structuring a website's theme using October CMS's templating language.

Layouts and Partials

The foundation of theming in October CMS involves separating your code into layouts, pages, and partials.

Layouts (default.htm): Define the main HTML structure (<html>, <head>, <body>) that's shared across multiple pages. They act as a shell where page-specific content is injected.
Partials (header.htm, footer.htm): Contain reusable chunks of HTML, like headers, footers, or sidebars. This avoids code duplication and makes maintenance easier.

Tip
To include a partial in a layout or page, use the Twig tag {% partial 'partial-name' %}. You don't need to specify the .htm extension or the /partials/ directory path.

Dynamic Page Linking with Twig

Hard-coding URLs is fragile. October CMS provides a robust way to link between pages using the | page filter.

Usage: Create links by passing the page's ID (its filename without the extension) to the filter.
Example: <a href="{{ 'movies' | page }}">Movies</a> will generate the correct URL for the movies.htm page.

Important
This approach ensures that your links will not break even if the URL structure of your site changes.

Creating an Active Navigation State

To provide visual feedback to users, you can highlight the current page in the navigation menu. This is achieved with a simple Twig conditional.

Key Variable: The this.page.id variable contains the ID of the currently rendered page.
Implementation: Use a ternary operator within the class attribute of your list item.

Example Code:

<li class="{{ this.page.id == 'homepage' ? 'active' : '' }}">
    <a href="{{ 'homepage' | page }}">Home</a>
</li>

<li class="{{ this.page.id == 'movies' ? 'active' : '' }}">
    <a href="{{ 'movies' | page }}">Movies</a>
</li>

This code checks if the current page's ID matches 'homepage' or 'movies' and adds the active class accordingly. The corresponding CSS will then style the active menu item differently.

Assigning Layouts to Pages

If a page appears unstyled, it may not have a layout assigned. You can fix this by adding the layout property to the configuration section at the top of the page's .htm file.

Example in movies.htm:

url = "/movies"
layout = "default"
title = "Movies"
==
<p>This is the movies page.</p>

Introduction to Basic Templating

Now before we get too deep into the Builder plug-in and displaying our movies and adding new fields to them and doing all sorts of good stuff with it, first we are going to take a few minutes to get our page in order. So what we are going to be doing in this lesson is we are just going to write some HTML. CSS is already written for this and I'm going to show you some of the basics of October CMS templating.

Don't forget to turn on live reload or gulp watch when doing this so that our page can be automatically refreshed. So this is the way our page looks right now. It's a bit different from the last time because I added some CSS, so this text is a little bit smaller. Okay, so now I'm going to go to my code editor. I'm going to go to default.htm file and I'm going to add the class to layout content, which is going to be container. So it's just going to be a container div with some width, position in the center of the page, and I'm also going to add a clear fix to it. Okay, now what we are going to do is I'm going to create a header.HTM file and I'm going to save it in partials.

Creating and Including a Header Partial

So we are going to call a partial header.HTM. First of all, I'm going to save this, create a new file. Okay, now I can write something in it. Okay, save it. And now we have to, of course, if we check our page right now, you can see that this is in the center, but I have to call this partial to get this string of letters right here. So to call a partial you just do this.

Using the Twig Partial Tag

So you just write partial header. You don't have to write .htm because October will automatically know that the partials are in the partials folder and that their suffix or extension is .htm. So we save this, check out our page right now.

Building the Header Markup

And as you can see, we have this right here. Okay, let's make our header a little bit better.

In my header.htm file, I'm going to delete this and then I'm just going to add a header with a class of main header. Okay. Now we just set a container with a clear fix. And now we add an H1 with a class of logo and call it October Movies. And that should be it for now. We just save this.

Take a look at our page. Currently nothing is happening. It seems that I spelled clearfix wrong. Now we save it, go to our page, and now we can see October Movies. So this is our header. Okay, next thing we are going to do, we are going to create our footer.

Okay, and here I'm going to create a footer with the class of main-footer. Then we set our container and then we, in an H3 tag, going to write "This is our footer" and then just add some lorem ipsum text below it. Okay, we save this. Now we go to our default.htm file and call partial footer. Save this. We are going to need to refresh our page a little bit because the footer doesn't exist for gulp to see it right now, so we have to refresh it. Okay, now the footer is visible. I just had to clear the cache and refresh it once again, so with this plugin right here.

Adding Content to the Homepage

Okay, so now that we got our footer and header set up, let's just add some more content to our homepage. So we're going to go to Pages, homepage, and I'm just going to add some lorem ipsum text right here. Save this. Okay, now we have our homepage. So this is our homepage and we have some things right here. Next thing we are going to do, we are going to create a menu for our page.

In our header.htm file, I'm just going to create a navigation tag with a class of main-nav and in it I'm going to put a ul tag. And then we are going to add some menu items. So we're going to add a menu item for Home and a menu item for Movies. So now we have li, a tag. In the a tag, you write this. So this is going to be a homepage. So this is a link for our homepage. And now I'm going to add some Twig tags to connect to that page. So instead of writing a full URL, I'm just going to do this. So what this is saying is actually we are calling a homepage by ID. So the ID of our homepage is homepage, and then we are using this Twig filter called page. You can find all the filters right here in October's documentation. So you have a page filter, this is actually this page filter. You have tags that you can use, you have the filters, so this is the page filter right here and so on. So if you want to link to something, you do something like about | page and the ID of the page is actually the slug of the page, so you use it like that.

Linking to Other Pages and Fixing Layouts

Okay, so the next page we want to create, I'm just going to copy this. The next page is going to be movies. Movies. And this should link to our movies page. If we go right here right now, we can see that we have a Home link and a Movies link. And if I click on Movies, we get to the movies page. As you can see, the movies page doesn't look that good right now because it doesn't... we didn't set a default layout for it in the previous video. So we can amend that by going to movies.htm or you can go to backend of course, but we are going to go to movies.htm and just set our layout to be default.

And now our movies page looks a bit different. So what we want to do for the end of this episode is create some way for us to know on which page we are currently on. As you can see, when we click on Home or we click on Movies, it doesn't highlight these menu items right here. So to do that, we are going to go to our header.htm file and here in our li tag, I'm just going to add a class, and then I'm going to set some conditional logic. So I'm going to say if you're on a page ID of homepage, then add active class to this li tag. And also we are going to do the same thing for Movies. So to do that, you just write this.

So what we are saying right here, if the page ID is equal to homepage, then add class active, else don't add anything to this li tag. And then I'm just going to copy this, paste it right here, and of course, this ID is not going to be homepage but it's going to be movies. We save this and I already created an HTML, actually CSS for active classes in our menus. So we should see some difference right now. So as you can see, the home has this text, actually underline border right here. So if I click on movies, now the movies are underlined. So this is this is the way you would create menus for your October CMS installation.

Conclusion and Next Steps

Okay so this has been a basic templating video for October CMS. Of course, there are much more things to cover about templating, but I just wanted to quickly show you how you can get your theme off the ground pretty easily and pretty fast. Of course, we are going to do templating throughout this video series, so you will learn much more stuff about it. Okay, thank you guys for watching this video. Remember, everything we did here will be available for you on GitHub. The link will be in the description below. If you like this video, please like it. If you like the channel, please subscribe to the channel, and you can also, if you want, follow me on Twitter or on Facebook. Thank you guys for watching once again, and I will see you in the next video.