One of my goals in blogging was choosing tech that wouldn't make me write my own styling. Hexo offers themes so there are plenty of options. I fully intended to settle on something, but every single one that I found and liked had something I wanted to change. Not something small, something big. The more I found like that, the more I realized I actually just wanted to pick and choose the bits I liked from each. And on top of that, every single one was written with a templating language I’m unfamiliar with (a travesty, I know) so everything didn’t feel as customizable as I’d hoped.
So much for no theming. The hell is EJS?
We’re going to play around with EJS because it’s the templating engine used by Hexo’s default theme. Hexo by default also supports Nunjucks, but we’ll do the EJS thing so that we have an existing theme to pull example mark-up from. (Hexo also supports a bunch of other templating languages, but let’s minimize our extra work.) We aren’t going to be doing anything fancy, just getting something going. It might come out as good as “just okay.” Perhaps even “acceptable.”
So, let’s get started on something perfectly acceptable.
First, let’s check out the docs on themes.
Alright, so, step one, let’s get our folder structure together: layouts dir for our EJS templates, source dir for assets and styling, and scripts dir just in case we end up needing any JS. For now I’m not going to worry about config and languages.
Step two…hrm. Let’s get some layouts together? I ended up falling back on looking at existing EJS themes to get a feel for how this works. After sort-of-maybe-starting to get it I finally found the doc on templates which I had previously thought, due to how the docs were laid out, had nothing to do with themes. Okay, so starting with the basic example on the page we can get our entire template set started:
layout.ejs<!DOCTYPE html> <html> <body><%- body %></body> </html>
The variables page shows us the data model available to each of the expected templates, so we can get a functional index together pretty easily since EJS is just vanilla Javascript under the hood:
index.ejs<% page.posts.each(function (post) { %> <a href="<%- post.path %>"> <%- post.title %> </a> <% }) %>
And then post:
post.ejs<h2><%- page.title %></h2> <%- page.content %>
This should be enough to get something generated and previewing an actual use case (view list of articles, view article content). Everything after that I think comes more naturally.
All in all, I’m still very impressed with Hexo.
Having gotten through all of this, I feel like an easy enhancement for Hexo would be to have a hexo init-theme <name> that would create everything with links to docs for more info on each of the big pieces. Once I got through building out the expected templates I was able to just work through everything and get things styled, but I had a hell of a time just putting pieces together at the beginning.
