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¹ and gitment². 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.

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,

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

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

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.

Local Search

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

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

In the index.md you just generated, add

<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.