Your first template
In essence, a theme is a set of templates, and a template is composed of HTML and Velocity code. You can make your own templates to access your weblog’s data and show this to your visitors in any way you want.
Creating and editing templates
In Apache Roller, you can create, edit, or delete templates via the Frontpage: Templates page. Let’s see how to use this wonderful tool to create and edit your own templates!
Time for action – creating your first template
In this exercise, you’ll learn to create and edit your first custom template via Roller’s admin interface:
- Open your web browser, log into Roller, and go to the Templates page, under the Design tab:
- On the Add a new template panel, type mytemplate in the Name field, leave the default custom value in the Action field, and click on the Add button:
- The mytemplate template you’ve just created will show up in the templates list:
- Now click on the mytemplate link under the Name field, to open the mytemplate file for editing:
- Leave the mytemplate value for the Name field, type mytemplate in the Link field, and type My First Template in Apache Roller! in the Description field:
- Then replace the <html><body></body></html> line with the following HTML code:
<html>
<body>
Welcome to my blog, <b>$model.weblog.name</b> </br>
This is my first template </br>
My weblog's absolute URL is: <b>$url.absoluteSite</b> </br>
</body>
</html> -
This is shown in the following screenshot:
- Scroll down the page and click on the Save button to apply the changes to your new template. Roller will show the Template updated successfully message inside a green box to confirm that your changes were saved:
- Now click on the [launch] link under the Link field to open a new tab in your web browser and see your template in action:
- You can close this tab now, but leave the Frontpage: Templates window open for the next exercise.
What just happened?
Now you know how to create your own templates! Although the previous example is very simple, you can use it as a starting point to create very complex templates. As I said before, templates are composed of HTML and Velocity code.
The template we wrote in the previous exercise uses a few basic HTML elements, or tags:
|
HTML Tag |
Definition |
Tip |
|
<html> , </html> |
Defines the start/end of an HTML document. |
You must write this tags at the beginning/end of each Roller template. |
|
<body>, </body> |
Defines the start/end of an HTML document’s body. |
All the code you will write for your templates must go between the <body> and </body> tags. |
|
<b>, </b> |
Shows text in bold. |
Example: <b>Hello</b> shows up as Hello |
|
</br> |
Indicates a line break. |
Example: Hello</br>World shows up as Hello World |
Also, there are some elements from the Velocity Template Language, along with an example from the previous exercise:
|
Velocity Element |
Definition |
Example |
|
$model.weblog.name |
Shows the name of your weblog. |
<b>$model.weblog.name</b> shows up as Ibacsoft’s Weblog |
|
$url.absoluteSite |
Shows the absolute URL of your weblog |
<b>$url.absoluteSite</b> shows up as http://alromero.no-ip.org/roller |
These are just some of the basic HTML tags and Velocity elements you’ll learn to use for your templates. In the following sections, we’ll see some more, along with elements from the Velocity Template Language.
The Velocity template language
All templates in Roller use HTML tags, along with Velocity code. In the next subsections, you’ll learn about some of the most widely used Velocity elements in your Roller templates.
Using Velocity macros in your Roller weblog
A macro in Velocity is a set of instructions that generate HTML code based on data from your weblog. They are very helpful when you need to do the same task more than once. In the following exercise, you’ll learn to use some macros included in Roller in order to show your weblog data to your visitors.
Time for action – showing your weblog’s blogroll and most recent entries
Now you will use the Velocity Template Language to show your weblog’s bookmarks (blogroll) in your custom template, along with the most recent entries:
Go to your custom template editing page, and type the following code just above the </body></html> line:
</br>
These are my favorite Web sites: </br>
#set($rootFolder = $model.weblog.getBookmarkFolder("/"))
#showBookmarkLinksList($rootFolder false false)
