Hexo Theme: Bootstrap Blog

January 5th, 2016

I've published a theme for the Hexo blogging framework creatively named, "Bootstrap Blog". It integrates Hexo with Twitter Bootstrap v3 for us non-designers who like to ~~cheat~~ leverage CSS frameworks.

This site is also using a customized version of the theme.

Features

Bootstrap v3 markup
Two-column, fully responsive
Configurable menu, sidebar widgets
Tag, Category, and Archive listing pages
Open Graph support
Social sharing modal (Twitter, Facebook, Pinterest, and Google+)
Fancybox plugin
Image gallery in posts
Disqus and Google Analytics integration

The included EJS layouts, client-side scripts, and tag/helper plugins have been built to output Bootstrap markup. If you already have a favorite 3rd-party bootstrap template, integrating its stylesheet with this theme should be an easy process.

There are many other great free Hexo themes to choose from. Some have more built-in functionality than others. The goal was to keep this theme simple and relatively feature-consistent¹ with the official Landscape default theme so that it is familiar and easy to customize.

¹: The search form and sidebar configuration option were removed. Stylus styles converted to standard CSS files.

Customization

Here is a tour of the primary files that you'll likely want to customize to make the theme your own:

_config.yml : There are a handful of configuration options here that can be used to quickly customize parts of the layout and content (menu links, sidebar widget order, favicon, etc.).
source/css/custom.css : You can safely nuke all of the styles within this file and replace with your own look and feel. The other CSS files are certainly fair game, but they are used primarily as baseline component styles to be extended upon. Add more stylesheets to styles.styl for a single bundle.
layout/_partial/head.ejs and layout/_partial/inline-scripts.ejs : Control the links to stylesheets and scripts in the <head> and just before the closing </body>.
source/js/script.js : jQuery DOM-ready handling and JS library initialization can be found here.

Cheatsheet

Here is a reference of the components that produce Bootstrap markup with this theme...

Responsive tables

Markdown:

| Table Header 1 | Table Header 2 | Table Header 3 |
| - | - | - |
| Division 1 | Division 2 | Division 3 |
| Division 1 | Division 2 | Division 3 |
| Division 1 | Division 2 | Division 3 |

...outputs:

Table Header 1	Table Header 2	Table Header 3
Division 1	Division 2	Division 3
Division 1	Division 2	Division 3
Division 1	Division 2	Division 3

To adjust the table class names, edit the source/js/script.js JavaScript in the // Bootstrap table style section.

Gallery thumbnails

In the Markdown front-matter:

---
photos:
- assets/images/HNCK0537.jpg
- assets/images/HNCK6173.jpg
- assets/images/HNCK8229.jpg
- assets/images/HNCK8597.jpg
---

...outputs a gallery of Bootstrap thumbnails at the bottom of an article.

Example gallery

Bootstrap Callouts

A custom tag for the Bootstrap "callout" style is available for use:

In the Markdown:

{% callout info %}
#### {% fa info-circle %} Info
This is some info content
{% endcallout %}

{% callout warning %}
#### {% fa exclamation-triangle %} Warning
This is some warning content
{% endcallout %}

{% callout danger %}
#### {% fa exclamation-triangle %} Danger
This is some danger content
{% endcallout %}

...outputs:

Info

This is some info content

Warning

This is some warning content

Danger

This is some danger content

Bootstrap pagination

A custom helper is used to produce Bootstrap pagination markup. It is a drop-in replacement for Hexo's built-in paginator().

In the EJS templates:

<%- bs_paginator({
      prev_text: '<i class="fa fa-chevron-left"></i> Prev',
      next_text: 'Next <i class="fa fa-chevron-right"></i>'
    }) %>

...outputs:

Example paginator

Tag plugins: hexo-tag-bootstrap

Visit Joseph Pan's blog for a demo of additional Bootstrap tag plugins (buttons, labels, badges, alerts, and more).

Available by installing the hexo-tag-bootstrap plugin.

Feedback

If you run into a problem with the Bootstrap Blog theme, please open a GitHub issue.

If you enjoy it, send me a tweet @c_g_martin!

Christopher Martin

Chris Martin

Hexo Theme: Bootstrap Blog

Features

Customization

Cheatsheet

Responsive tables

Gallery thumbnails

Bootstrap Callouts

Info

Warning

Danger

Bootstrap pagination

Tag plugins: hexo-tag-bootstrap

Feedback

Table of Contents

About

Recents

Tags