a hexo theme with google style
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
languages
layout
source
.bowerrc
.gitignore
LICENSE
README.md
_config.yml
bower.json
package.json

README.md

hexo-theme-gstyle

a google style theme for hexo.

Preview

Live Demo

preview

screenshot generated by am i responsive

Features

Responsive

Totaly responsive, mobile first. No bootstrap, using modern css3 flex!

Impressing Navigation

full screen navigation menu with morphing animation
Full screen morphing navigation on mobile

Graceful table of content module

Auto generated table of content with transition animation when expanding and collapsing. full screen navigation menu with morphing animation

Usage

  • git clone https://github.com/wayou/hexo-theme-gstyle.git themes/gstyle
  • config site _config.yml theme: gstyle

Using relative assets path in your post

  • Enable post_asset_folder in your hexo site config file _config.yml
  • Install hexo-filter-pathfix to fix the path of assets npm install --save hexo-filter-pathfix
  • Then you can using relative path when writing posts like ![image title](image_name.jpg).

Config

toc

  • Enable toc: true in the Front-matter of posts you wanna display table of content
title: thi is the post title
+toc: true
date: 2016-01-01 15:47:33
tags:
---

Comments

2 comment vendors implemented , choose one you like.

duoshuo_shortname: #your duoshuo shortname goes here
disqus_shortname: #your disqus shortname goes here

Site analytics

The baidu_analytics is mainly for mainland users. you can get the baidu analytics id from the admin page of baidu analytics code installing page. where to get the baidu analytics id

google_analytics:  
baidu_analytics:

Image caption

To enable image caption for iamges, install hexo-image-caption plugin by using this command:

npm i --save hexo-image-caption

And then enable it in your hexo site config file _config.yml (not the theme config file).

# add caption for iamges
image_caption:
  enable: true
  class_name:

Code highlight

Hexo default code highligth is the default. However, I customized Prism.js for this theme, whitch is much nicer and many languagaes like jsx are well supported. And thanks to ele828 for making the hexo prism plugin.

To enable Prism code highlight,

  • npm i -S hexo-prism-plugin
  • edit hexo config file _config.yml(not the one for the theme) to enable this plugin
prism_plugin:
  mode: 'preprocess'    # realtime/preprocess 
  theme: 'default'

Sliding navigation indicator

Whether to show an indicator for the active navigation menu item

active_nav: false