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.
Links to other sections
- 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
The Post Detail page
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 /layout/
folder.
Here is my post.ejs:
<%- partial('_partial/article-full', {item: page}) %> |
To keep the code organised, the actual code is deferred to a _partial/article-full.ejs
that we are going to create now:
<div class="blog-post"> |
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.
Post Tags
Let’s create the partial that will render the list of tags for a post: layout/_partial/article-tags.ejs
.
What we want is a list of #tags with links to the corresponding ‘tag page’ which will display all the posts with that tag.
<% if (item.tags && item.tags.length){ %> |
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.
Post Categories
The layout/_partial/article-categories.ejs
partial is very similar:
<% if (item.categories && item.categories.length){ %> |
No explanation required.
Post CSS
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 blog.css
:
.blog-tags-container, .blog-categories-container { |
The detail page for page type content
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:
<%- partial('_partial/article-full', {item: page}) %> |
The Archive page
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:
<% page.posts.each(function(item){ %> |
The article-archive partial view
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:
<div class="blog-post"> |
Careful eyes will have noticed the new CSS class that I have created for archive titles (they were too big for my liking):
.blog-post-title-archive { |
Tags and Categories Pages
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:
Template | Fallback | Page Description |
---|---|---|
archive |
index |
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. |
category |
archive |
This is the category page. Similar to the archive page but filtered for one category. |
tag |
archive |
This is the tag page. Similar to the archive page page but filtered for one tag. |
The fallback page for our tag.ejs
and category.ejs
is 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:
.blog-archive-title { |
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 !