In this multi part tutorial, you will learn how to create an Hexo Theme from scratch.
In Part 1, we have setup the project and the Home Page. In this section, we are going to build on what we have learnt to finish up all the remaining pages.
- Part 1: Setting up the project and creating the blog’s main index page
- Part 2: Finishing up the remaining pages
- Part 3: Wrapping up with Disqus comments, Google Analytics and the widgets
Let’s continue where we left off in part 1 and create the post detail page.
As we have seen, to render the detail page, Hexo will look for a
post.ejs file in our
Here is my post.ejs:
To keep the code organised, the actual code is deferred to a
_partial/article-full.ejs that we are going to create now:
This template is almost the same as
_partial/article-excerpt.ejs, except that:
- We are displaying the full content with
<%- item.content %>and not the excerpt.
- There are two additional partial views at the bottom, one for tags and one for categories. We will jump into these right now.
Let’s create the partial that will render the list of tags for a post:
What we want is a list of #tags with links to the corresponding ‘tag page’ which will display all the posts with that tag.
Nothing complicated, we are enumerating through all the tags in
post.tags and displaying them one after the other. I have added a hashtag before each tag and an icon before the list for good measure.
layout/_partial/article-categories.ejs partial is very similar:
No explanation required.
As you may have noticed, there are 2 new CSS classes used for tags and categories styling. Here is the code for it, added to
This is an easy one. The ‘page type’ pages will be the same as ‘post type’ pages. Feel free to customise it as an exercise, but here is mine:
The archive page will display a list of posts in a more condensed way than the index page. The base will be the same as the index though:
As always, the actual work is in the partial view. I used
article-excerpt as the base and stripped it down to just the title, date and author:
Careful eyes will have noticed the new CSS class that I have created for archive titles (they were too big for my liking):
The last two pages we need to work are for the list of posts that correspond to a tag and a category. Now if you remember well:
||This is the archive page. It will display a list of all the posts in our blog with just titles and links to the detail page.|
||This is the category page. Similar to the archive page but filtered for one category.|
||This is the tag page. Similar to the archive page page but filtered for one tag.|
The fallback page for our
archive.ejs. Because I don’t see any major difference in between these 3 pages, we are just going to use the fallback to
archive.ejs. Less code to write, less duplicate code, easier to maintain.
But in order to differentiate our 3 pages, we are going to add a title to the archive page:
Now we have a nice title that describes what our archive page is for.
And here is the CSS that goes with it:
This section of the tutorial was pretty straightforward, simply building up on concepts defined in Part 1. I encourage to play around with the theme and hack it to your tastes.
In Part 3, we will add a comment section, analytics, widgets and polishing things up. See you there !