Building a Fully Functional Blog with eXo Platform – Part 2

This blog is the second part of the series “Building a Blog with eXo”. If you missed it, check out Part 1, where we demonstrated how to build the core structure, navigation and pages, and quickly configured the apps. In this Part 2, we will show how to improve the look-and-feel by adding custom templates.

The blog application in eXo Platform 3.5 uses the built-in web content document type to store posts. While a web content structure has everything needed for storing and displaying blog posts, let’s create a dedicated document type so we can easily differentiate between blog posts and other types of content.

Blog Document Type

It’s typically a good idea to establish your own data structure, as this provides a lot of customization capabilities for each specific document type. The data structure is defined by JCR node types. Check out blog-nodetype.xml:

To have this data structure type recognized, we need to establish it as a document type, give it a form for input as well as a template for viewing. Here’s what you need to place in wcm-templates.xml:

Now, when you go to the backoffice and click on New Content action, Blog Post is now available:
Select Template

We can tell the Fast Content Creator to use this type to create blog posts:

Blog Post Form

We want to make it as easy as possible for blog authors to create and post, so they can focus on the content instead of tedious administrative steps. By creating a form, authors simply input a few fields and their blog post is ready for review or publication. This form will have a title, a section for content input, and an optional excerpt. To build this form, simply complete the following:

fcc form

Add this piece to postform.gtmpl.

Another interesting point to note is how the node name is defined. It’s automatically extrapolated from the title using a REST service called /l11n/cleanName. The returned string is also used as the permalink to the blog post article.

Blog Post Detail

The article detail page is optimized for reading, by providing a full-width view of the article, excerpts and post content. The name and avatar of the author and the publication date are also displayed. Here is what the body of an article looks like:

Blog Detail

The /article page uses the blog template we declared as viewpost.gtmpl.

You can retrieve the blog post as a javax.jcr.Node via def node = uicomponent.node. Then most of the work is trivial display and formatting logic.

Let’s see how to render the body of the post:

Using the getSummary() allows you to take the summary and print the excerpt (if one is provided for a particular post). The actual html content is retrieved from the default.html/jcr:content/jcr:data property.

Lastly, the uicomponent.getInlineEditingField() provides support for inline editing of the post’s html content.

Blog Main Page

The main blog page (/blog) must show the list of recent blog posts. In this example, we chose to display only the excerpts of recent posts on this page.

Content List

The first thing to do is to declare a CLV template in wcm-templates.gtmpl:

There we declared our template as Blog.gtmpl.

Next we need to tell the CLV to use it. This is done via the formViewTemplatePathportlet preference in pages.xml:

The blog main page is not too different since we are going to loop on entries provided by the CLV and display titles and excerpts. Let’s dig into Blog.gtmpl. To loop on post entries, simply get them as a List<javax.jcr.Node> via uicomponent.getCurrentPageData().

def entries = uicomponent.getCurrentPageData()
// loop on entries
for (entry in entries) { … }

We won’t render the whole post here, but rather provide a Read more link to the /blog/article detail page. You can retrieve that link with uicomponent.getURL(entry).

Displaying an article is pretty much the same action as we used in viewpost.gtmpl:

Wrapping Up


Making things user-friendly (and aesthetically pleasing) is easy. A little config and very minimal coding skills are needed. Here’s the recipe for making any content gorgeous. Start by creating your own document type. Give it a styled form and a shiny detail template. Then finish with the Content List template, where you’ll be able to reuse a lot of previous work. And there’s more — we’re only scratching the surface. In Part 3 of this series, we will continue our feature tour and show you how to add categories and tags to the blog. Stay tuned!

Be part of the discussion, share your comments


Keep in touch with the author

Tags: , , ,