cgmartin / hexo-theme-bootstrap-blog Goto Github PK

View Code? Open in Web Editor NEW

This project forked from hexojs/hexo-theme-landscape

104.0 10.0 62.0 2.81 MB

A simple Bootstrap v3 blog theme for Hexo

License: MIT License

JavaScript 40.04% CSS 34.54% HTML 25.42%

hexo-theme-bootstrap-blog's Introduction

hexo-theme-bootstrap-blog

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

Install theme:

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

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

$ npm install hexo-tag-bootstrap --save

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

$ npm install hexo-tag-fontawesome --save

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/
rss: /atom.xml

# Content
excerpt_link: Read More
fancybox: true

# Sidebar
widgets:
- about         # See also: `about_content`
- category
- tag
- tagcloud
- archives
- recent_posts
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>

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

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:

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

~or~

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

Callouts

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

Usage:

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

Example:

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

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

hexo-theme-bootstrap-blog's People

Contributors

Stargazers

Watchers

hexo-theme-bootstrap-blog's Issues

Tags with uppercase

Hi Cris!
First of that you so much for the boostrap theme! Helped me a lot in getting started with Hexo. I just have a question that I have been trying to figure out but just cant...

I have 2 tags in my hello-world.md file:

pizza
pasta

Which outputs: /tags/pizza and /tags/pasta - All good but I wanted to write Pizza in my tags menu with a capital letter but keep the lower case p in the URL, I can do this with CSS but I like how you did it in your theme. After looking at all the files I just can't find how you have done this??

So just to confirm I would like to have the tags in my front matter:

Pizza
Pasta

I hope I made sense,
Thanks again!
Kind regards,
Hanna

Where to config the comment system?

Hi, I want to know which file is the entry of the comment system?

how do you set language setting?

I see that there is some languages available in a subdirectory.

How do you set language parameter to enable another language?

comment link has a wrong direction.

On my site, it redirects to a strange address as (page's address+post's address/#disqus_thread).

How to make sidebar or just TOC sticky?

It would be great to make the sidebar sticky so that it is always visible even when scrolling way down an article.

手机端无法展开顶端导航 Navigation doesn't work on mobile.

手机上单击没法展开。。。

This simply won't react when clicking.

Mathjax rendering

I wonder how I can activare mathjax rendering in markdown on the theme, since I used 'npm install hexo-math --save' before cloning the repository but mathjax didn't work.

Can anybody help me?

tag的用法

作者你好，我想请问下文章tag是怎么加的，因为没看懂
请教下

set order of widgets

Is it possible to set the set the order of widgets?

The default ordering is alphabetical, I'd like to set another order.

It is currently a simple forEach. See themes/bootstrap-blog/layout/_partial/sidebar.ejs:

<% theme.widgets.forEach(function(widget){ %>
  <%- partial('_widget/' + widget) %>
<% }) %>

It would be great to be able to set the order in _config.yml where:

  widgets:
    - about
    - category
    - archive
    - recent_posts
    - tag

would be a different order and activation setting than:

  widgets:
    - recent_posts
    - about
    - category

<a href="#"><img class="nofancybox"></a>

<a href="somewhere.com"><img class="nofancybox" src="a.jpg"></a>

when you click the image the link should open. FAILED
when you click the image fancybox should ignore the click. FAILED

Not at all what is expected.

How can I change jquery.min.js source?

I'm from china.
we have problem to fetch the jquery.min.js from google.
so can you tell me how can I change the source to other source?

by the way, thanks a lot for supporting this awesome theme.

How to use the gallery?

Hi Cgmartin, I would like to ask how the Gallery , could you give me a gallery.md file?

search form

I can read on your blog that you have removed the search form:

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

Why did you removed it? I would be happy to get a search form on my blog. Anyone can disable the widget if he doesn't need it. But why removing the search form completely?

Footer as CC rather than copyright?

Thanks for providing this bootstrap-blog theme.

In the spirit of open sourcing, should there be an easy option to set the licensing for the blog as some form of Creative Commons licensing? The default of a copyright means that, technically, anyone who wants to reproduce the content has to contact the original author for a release, first. Having a Creative Commons license asserts the intentions of the author in sharing (and allowing redistribution and derivations) of the content.

can't generate tables and thumbnails

Hi!
Nice theme!
but when I type in markdown

|                String函数                 |           效果           |
  | :-------------------------------------: | :--------------------: |
  |  stoi(str, idxRet =nullptr, base = 10)  |        str转int         |

and


---
photos:
- http://7xlkdd.com1.z0.glb.clouddn.com/stringerror.png

---

It seems that the result is incorrect.You can see it from here
Did I do something wrong?Need help, thanks.

Problems in code blocks with blank lines

I notice that code blocks will automatically leave out blank lines in source code, but line numbers of those lines still remain. It looks like

But I want something like

So I try to fix it by adding

.highlight .line{
  height: /*some fixed value*/ ; 
}

to hexo-theme-bootstrap-blog/source/css/highlight-js.css

It just works. But sorry for my ignorance of programming, I hope you the author can help me figure out a more reliable solution. Thanks 🙏