A simple Bootstrap v3 blog theme for Hexo
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is 25 commits ahead of cgmartin:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
docs
languages
layout
scripts
source
.gitignore
LICENSE
README-zhs.md
README.md
_config.yml
package.json

README.md

hexo-theme-bootstrap-blog

A simple, flexible Bootstrap v3 blog theme for Hexo.

Based on the official Bootstrap Blog example template.

Demo site | More Information | 中文文档

Setup Instructions

Install

This theme requires Hexo 2.4 and above.

  1. Install theme:
$ git clone https://github.com/liuqidev/hexo-theme-bootstrap-blog.git themes/bootstrap-blog
  1. (optional) Install hexo-tag-bootstrap for more Bootstrap tags (textcolors, buttons, labels, badges, etc.):
$ npm install hexo-tag-bootstrap --save
  1. (optional) Install hexo-tag-fontawesome for placing Font Awesome icons in your Markdown:
$ npm install hexo-tag-fontawesome --save
  1. (option) Math support:

Go to your hexo blog root, cd to node_modules\kramed\lib\rules\inline.js , edit line11:

//  escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
  escape: /^\\([`*\[\]()#$+\-.!_>])/

and then, edit line 20/21:

//  em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
  em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/

finally, add below into hexo

# MathJax Support
mathjax:
  enable: true

Enable

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

Update

cd themes/bootstrap-blog
git pull

Configuration

# 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
- search
#- tag
#- tagcloud
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'

# Miscellaneous
google_analytics: UA-122713769-1
favicon: images/icon.png
twitter_id:
google_plus: your google plus ID
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
# https://coding.net/  can be deployed to coding
# gitment: false
gitment:
  owner: liuqidev
  repo: liuqidev.github.io
  client_id: 
  client_secret: 
 
# Valine Comment system. https://valine.js.org
valine: false
# valine:
  # enable: true # Use valine,set true
  # appId:  # your leancloud appId
  # appKey:  # your leancloud appKey
  # notify: false # Mail notify
  # verify: false # Verify code
  # avatar: mm # Gravatar style : mm/identicon/monsterid/wavatar/retro/hide
  # placeholder: Say something~ # Comment Box placeholder
  # guest_info: nick,mail # Comment header info
  # pageSize: 20 # comment list page size

# livere https://livere.com/
livere: false
# livere:
  # dataUID: #your dataID
 
# http://www.daovoice.io
dao_voice: false
# dao_voice:
  # appId: a2c8df52
  
eyes_protected: false

# dynamic_title
# title_change: false
title_change:
  normal: o(∩_∩)o Welcome!
  leave: Opps...●﹏●
  • 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.:

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>

New Features

Features

Front-Matter Extras

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

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

![img caption](img url)

Callouts

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

Sidebar

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

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:

<!-- 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().

<%- 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. Feel free to convert the CSS to your pre-processor of choice (Stylus, LESS, Sass, etc.).

License

MIT License

Copyright © 2016 @liuqidev