I've been using the well-developed NexT theme for this Hexo blog since I built it. The old theme was fantastic, with a broad header, strong local search, neat, animated two-column layout and various comment systems including valine[1] and gitment[2]. However, it's a two-edged sword to have so many features binded, and more importantly, presented right within such a simple layout. Eventually, I realized that I actually don't need the spacious header or the animated sidebar (I do, though, need local search, and we'll return to that below). After exhaustively browsing the Hexo theme list, eventually I chose Apollo.

Installation

Pull from the master's branch on GitHub.

1
2
npm install --save hexo-renderer-jade hexo-generator-feed hexo-generator-sitemap hexo-browsersync hexo-generator-archive
git clone https://github.com/pinggod/hexo-theme-apollo.git themes/apollo

Configuration

Then, in the _config.yml under Hexo's root directory,

1
2
3
4
5
6
theme: apollo
archive_generator:
per_page: 0
yearly: false
monthly: false
daily: false

and match your logo, favicon and Google Analytics API in the _config.yml under theme/Apollo.

Customization

Gitment

There's no Gitment support in original Apollo and I have to manually embed it. First, apply here for a new OAuth Application. Make sure the callback URL is the url of the blog. You'll get a client ID and client secret after successfully finish this step. Next, in theme's _config.yml, add

1
2
3
4
5
6
gitment:
enable: true
owner: {{Your GitHub account}}
repo: {{Name of your repository for comments storage}}
client_id: {{Your client ID from the step above}}
client_secret: {{Your client secret from the step above}}

In layout/partial/comment.jade, add

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
if theme.gitment.enable
- var date = page.date
#container
link(rel='stylesheet', href='https://imsun.github.io/gitment/style/default.css')
script(src='https://imsun.github.io/gitment/dist/gitment.browser.js')
script.
var gitment = new Gitment({
id: '#{date}',
owner: '#{theme.gitment.owner}',
repo: '#{theme.gitment.repo}',
oauth: {
client_id: '#{theme.gitment.client_id}',
client_secret: '#{theme.gitment.client_secret}',
},
})
gitment.render('container')

You can now log into your GitHub account and initialize the comments on any page of post.

The powerful local search is probably my favorite feature on theme NexT, but Apollo does not support such functions. I referred to this repo which already implemented this feature using Tipue Search. To successfully enable local search, go to the root directory of your blog and

1
2
npm install hexo-generator-tipue-search-json --save
hexo new page search

In the index.md you just generated, add

1
2
3
4
5
6
<form id="search-form" style="text-align:center;">
<i class="fa fa-search tipue_search_icon"></i>
<input type="text" name="q" id="tipue_search_input" autocomplete="off" required placeholder="Type, Enter and Search" />
</form>

<div id="tipue_search_content"></div>

Meta Configurations

There are also several things I customized, e.g. color palette, font families and post width. They are not trivial if you're really keen on turning your blog into a feast of the eyes but I won't discuss in detail which properties I changed (it's pointless remember all of them). They're all in the source/css/apollo.css and all you need is some basic knowledge about HTML. However, I do want to recommend the CSS Format package of Sublime Text. It allows you switch painlessly between compact, compressed, expanded CSS styles and even more. It literally saved my day.


  1. 1.Valine works fine and has powerful database support. However, it is strange that they require arithmatic verification as long as you enable the email notification function. Also, Valine has too large a space beneath it and it makes the webpage ugly. ↩︎
  2. 2.No.1 comment system so far in my preference list. The only concern is that it requires a GitHub account if someone wants to comment under my posts which is very often not the case, e.g. my mom. Though, it's been interesting to introduce her the GitHub world. ↩︎