Building a theme

A meanbase theme is primarily static html, css, and javascript. However so that dynamic data is feed to it, you can add certain attributes and elements. Meanbase uses Angular, Bootstrap, jQuery, and FontAwesome, so all those resources are already available.

Templates for structure

A theme is made up of templates. A template is basically a page layout. They can make multiple instances of each template in your theme. Each theme must support at least one template.

NOTE: A theme doesn't contain the html tags, or the head tag. When you write a theme you write it as if it's going to be injected directly into the body.

Build in meanbase, upload with .zip

Building a theme is different than uploading a theme. You build your theme within meanbase and when your finished you turn it into a .zip file and other users can upload that theme to their site using the theme's upload page.

Building your first theme

We start by going to the public/themes folder within meanbase.

public/themes/

We create a new folder with out theme name. The name must be unique otherwise because people can't upload two themes with the same name. We'll call it

My First Theme/

Create a theme.json file

The database needs to know how to store the theme so users can choose it later. We will provide that information in a theme.json file.

{
  "author": "Me",
  "email": "[email protected]",
  "title": "My First Theme",
  "description": "A tutorial on how to build meanbase themes"
}

The title will show up in the CMS.

NOTE: Make sure there are no errors in the JSON, or else the theme won't upload.

Create a template file

A template is static html or jade that gets injected into the body of the site. We add a -template.(jade|html) postfix to them so meanbase recognizes them as templates.

We'll create a new file called

home-template.html

Let's give it some basic html

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <h1>Hello this is my first template.</h1>
    </div>
  </div>
</div>

Create an index.js file

Meanbase will attempt to fetch all the files in our theme, sort them by their dependencies, and concatenate them into a theme.min.js file. An inject.js file is where we can list our resources or have meanbase list them for us.

Create a file called index.js in the root of your theme.

// inject jade
// end inject jade

// inject js
// end inject js

// inject stylus
// end inject stylus

The comments tell meanbase where to automatically put our resources.

Note: Even though it says inject jade it also injects html and even though it says inject stylus it also injects css.

Run npm run watch and npm start

If meanbase is already running stop it and again run

npm run watch

This will tell meanbase to find our theme and build it's theme.min.js file. When it's finished building (even though it's a watcher) we can start the server.

npm start

Theme is ready

Our theme should now show up in our themes page. However, if we are transitioning to our theme from another existing theme, that other theme probably has templates we are not supporting. What happens to pages that were using the page or article template when we try to load them in our new theme? Those templates will be blank and we will be taken to a 404 page.

Instead we need to tell our theme to take these templates we don't support and instead use the home template we created

Map the templates

Start by clicking the settings gear on the theme.

In the theme. A dialog should appear that shows the templates our theme supports.

Add the names of the templates that the previous theme was using to your home page by typing in the name and hitting enter. When you're done hit save. If you're loading the seed content that comes with meanbase, those templates may include

• page
• article
• archive

Now if we visit localhost:3030 we can see our template in action.