Hexo Theme: Bootstrap Blog

Leo Liu

A simple Bootstrap v3 blog theme for Hexo.

Based on the official Bootstrap Blog example template.

The theme and example site source code can be found on Github:

Setup Instructions

Install

This theme requires Hexo 2.4 and above.

1) Install theme:

1
2
$ git clone https://github.com/cgmartin/hexo-theme-bootstrap-blog.git \
themes/bootstrap-blog

2) (optional) Install hexo-tag-bootstrap for more Bootstrap tags (textcolors, buttons, labels, badges, etc.):

1
$ npm install hexo-tag-bootstrap --save

3) (optional) Install hexo-tag-fontawesome for placing Font Awesome icons in your Markdown:

1
$ npm install hexo-tag-fontawesome --save

Enable

Modify the theme setting in _config.yml to bootstrap-blog.

Update

1
2
cd themes/bootstrap-blog
git pull

Configuration

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
# File: themes/bootstrap-blog/_config.yml

# Header
navbar_brand: false
menu:
Home: index.html
Archives: archives/
Categories: categories/
# Projects: projects/
About: about/
# Blogroll: blogroll/

rss: /atom.xml

# Content
excerpt_link: Read more...
fancybox: true
wordcount: true
viewcount: true
timecost: false
language: zh-CN

# Sidebar
widgets:
- translate
- recent_posts
- about # See also: `about_content`
- category
- archive
- tag
- tagcloud
- search


about_widget_content: >
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod.
Cras mattis consectetur purus sit amet fermentum. Aenean
lacinia bibendum nulla sed consectetur.</p>

# widget behavior
archive_type: 'monthly'
show_count: true

# Miscellaneous
google_analytics: UA-122713769-1
favicon: images/icon.png
twitter_id:
google_plus: 112373242775367333102
fb_admins:
fb_app_id:
# baidu analytics
baidu_tongji: true

# https://github.com/hustcc/canvas-nest.js
canvas_nest: false

# https://github.com/imsun/gitment
#gitment: false
gitment:
owner:
repo:
client_id:
client_secret:


# Valine Comment system. https://valine.js.org
valine: false
# valine:
# enable: true # 如果你想使用valine,请将值设置为 true
# appId: kBrTfD8l4RFzueSAt65hASek-gzGzoHsz # your leancloud appId
# appKey: AFsAfwfHqW6iEHkAc3TjYEzh # your leancloud appKey
# notify: false # Mail notify
# verify: false # Verify code
# avatar: mm # Gravatar style : mm/identicon/monsterid/wavatar/retro/hide
# placeholder: 我有话想说~ # Comment Box placeholder
# guest_info: nick,mail # Comment header info
# pageSize: 20 # comment list page size

# livere https://livere.com/
livere: false
# livere:
# dataUID: MTAyMC8zODU5MS8xNTExOQ==

# http://www.daovoice.io
dao_voice: false
# dao_voice:
# appId: a2c8df52

eyes_protected: false

# dynamic_title
# title_change: false
title_change:
normal: o(∩_∩)o
leave: Opps...●﹏●


# Miscellaneous
google_analytics:
favicon:
twitter:
google_plus:
  • navbar_brand - The HTML content for an optional “navbar-brand”. Can be text or an image. false to hide.
  • menu - Navigation menu (map of Titles to URLs)
  • rss - RSS link (ie. “/atom.xml”)
  • excerpt_link - “Read More” link at the bottom of excerpted articles. false to hide the link.
  • fancybox - Enable Fancybox for images
  • widgets - Enable sidebar widgets (more info below)
  • about_widget_content - The HTML content for the “About” sidebar widget (more info below)
  • google_analytics - Google Analytics ID
  • favicon - Favicon path (ie. ‘/favicon.ico’)
  • twitter_id - Twitter ID of the author (ie. @c_g_martin)
  • google_plus - Google+ profile link

Instead of editing the layout’s configuration file directly, you can override the theme settings from your project’s root _config.yml, ie.:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
theme_config:
# Header
navbar_brand: <img src="/navbrand.png">
menu:
Home: index.html
Archives: archives/
'Another Page': page/index.html
widgets:
- about
- category
- archive
- recent_posts
- tag
about_widget_content: >
<p>This is <strong>custom content</strong> for the
"about" sidebar widget.</p>

Features

Front-Matter Extras

Optional settings in the front-matter can be added for various effects:

1
2
3
4
5
6
---
author: Author Name # displays the post's author
photos: # displays a Bootstrap thumbnail gallery
- images/HNCK0537.jpg
- images/HNCK6173.jpg
---

Fancybox

This theme uses Fancybox to showcase your photos. You can use the image Markdown syntax or fancybox tag plugin to add your photos.

Usage:

1
2
3
4
5
![img caption](img url)

~or~

{% fancybox img_url [img_thumbnail] [img_caption] %}

Callouts

A custom tag for the Bootstrap “callout” style is available for use.

Usage:

1
2
3
{% callout [type:default|primary|success|info|warning|danger] %}
...content...
{% endcallout %}

Example:

1
2
3
4
{% callout info %}
#### {% fa info-circle %} Info tip
This is some callout content
{% endcallout %}

This theme provides 6 built-in widgets that can be displayed in the sidebar:

  • about *
  • category
  • tag
  • tagcloud
  • archives
  • recent_posts

All widgets are enabled and displayed by default. You can toggle them on/off with the widgets setting in the theme’s _config.yml.

* NOTE: The “about” widget contains static Lorem Ipsum text by default. You’ll want to edit the about_widget_content setting for your site or disable the widget in the theme config. You can also modify the widget file itself to include contents from a Markdown page:

1
2
3
4
5
<!-- file: ./layout/_widget/about.ejs -->
<div class="sidebar-module sidebar-module-inset">
<h4>About</h4>
<%- site.pages['data'].find(function(p) { return p.path === 'about/index.html'; }).content %>
</div>

…then run hexo new page about to create the Markdown page.

Bootstrap Paginator Helper

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

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

Development

The default Landscape Hexo theme was used as the starting point and heavily edited for this theme.

The Landscape Stylus styles have been replaced with standard CSS files which override bootstrap.min.css. Stylus is used only for bundling the CSS files (see ./source/css/styles.styl). Feel free to convert the CSS to your pre-processor of choice (Stylus, LESS, Sass, etc.).

License

MIT License

Copyright © 2016 Christopher Martin

Copyright © 2018 lqdev