Skip to content

Theme Templates Customization

Glen Mazza edited this page Jun 24, 2018 · 8 revisions

Templates used to support a blog are written in HTML, CSS, JavaScript, etc. and frequently employ Thymeleaf to retrieve object data and generate more code in its place. See the templates in the blogthemes subdirectories for many examples. Good to review this code to see how everything works for designing your own themes and templates.

TightBlog provides several models, or objects, to templates for which it can obtain the data necessary to render blog entries, comments, blogroll listings, etc. The models made available by TightBlog are defined within the models package, and the precise models available for each type of weblog request (a ModelSet) are defined (and customizable) in the spring-beans.xml configuration file.

Models provided by TightBlog
Model Subclass Of Name in Thymeleaf Purpose
PageModel $model Most common model, retrieves all blog-specific information: entries, comments, categories, etc.
FeedModel $model Used in generation of Atom feeds for blog entries and comments.
SearchResultsModel PageModel $model Subclass of PageModel providing additional data for a reader's blog search.
SiteModel $site Provides site-wide statistics (most popular blogs, blog listings, recent entries across all blogs, etc.) Normally available just to the default front-page blog.
URLModel $url Used to dynamically generate URLs to blog entries, comments, feeds, etc., taking into account the server's context path, the blog handle, etc.
UtilitiesModel $utils Obtain message resource strings for i18N and various date and text formatting utilities.

These Models are in turn grouped together in the spring-beans.xml in specific ways depending on what is being generated:

Model Set Purpose *Models contained
PageModelSet Standard rending of blog pages page, utilities, url
PreviewModelSet Blog entry previews prior to publishing and theme-switch previews for bloggers prior to switching themes page, utilities, url
FeedModelSet Atom Feed generation feed, utilities, url
SearchModelSet Blog reader text searching searchResults, utilities, url
SiteModelSet Additional model added to front-page weblog, both page and feeds for site-wide data site

Note: The Thymeleaf names given above ($utils, $model, etc.) are defined by the getModelName() method in each of the Models, and are tied via a Java Map to the Model class using them (i.e., Map<String, Model>) in the Model.getModelMap() method called by the Processors (e.g., PageProcessor) when tasked with rendering a page. Any two or more models which should not be provided at the same time (due to overlapping functionality) are given the same name ($model) to guard against them being simultaneously available in the model map.

The public methods of any model provided to the templates may be called by the template, and in cases where those methods return objects, those object's public methods are also available to the template. The objects that may be retrieved from the Models are generally a subset of those available in the pojos folder. For example, URLModel defines the following method to get the URL of a resource (image, etc.) associated with a theme:

public String getThemeResourceURL(String theme, String filePath) {
        return urlStrategy.getThemeResourceURL(theme, filePath);
    }

Within a Thymeleaf template, the above method may be called as follows:

<script type="application/x-javascript" th:src="${url.getThemeResourceURL('gaurav', 'js/searchhi.js')}"></script>

Another example, of getting a pojo's data from a model, the PageModel defines the following method:

public Weblog getWeblog() { return ...; }

...from which in the Thymeleaf template, any of Weblog's fields having a public getXXX() accessor can be obtained as follows:

<h1 class="page-header" th:utext="${model.weblog.name + ' '}">
   <small th:utext="${model.weblog.tagline}">xxx</small>
</h1>

Note the model.weblog.name in the example above is an abbreviated way of requesting model.getWeblog().getName().