A hexo theme with random fullscreen background image.

• Demo on Openshift
• stiekel's blog(Chinese)

If you

• prefer to use big picture as background image
• do NOT like show article except in post list
• do NOT like use paginations in post list

This theme seems to suit you.

execute this command in blog root path:

git clone https://github.com/stiekel/hexo-theme-random.git themes/random

modify the theme setting in hexo main config file _config.yml as following:

theme: random

You can config the avatar in hexo main config file or theme config file as following:

avatar: https://7te9fe.com1.z0.glb.clouddn.com/default_avatar.jpg

Nav links in homepage and the top of other pages, you can config it in theme config file theme/random/_config.yml:

menu:
  Home: /
  Archives: /archives
  Tags: /tags
  Categories: /categories
  About: /about

In index page, the Home link will hide itself.

Hexo do NOT create tags list page and categories list page in default, but Random theme provide those pages, you just need to create it.

If you want to create tags list page, run this command in blog root path:

hexo new page tags

this will create a folder and a markdown file source/tags/index.md, change the type value of thie file as following:

title: Tags
date: 2016-01-16 06:17:29
type: "tags"
comments: false

the same to create categories list page:

hexo new page categories

and modify the source/categories/index.md as following:

title: Categories
date: 2015-08-03 14:19:29
type: "categories"
comments: false

In the homepage, and the user card when visitors click the avatar, there are some social site icon links, You can config the icons in theme config file theme/random/_config.yml as following:

social:
  GitHub: https://github.com/stiekel
  Coding.NET: https://coding.net/u/Stiekel
  Twitter: https://twitter.com/SidCN
  Weibo: https://weibo.com/sidcn
  DouBan: https://www.douban.com/people/Stiekel/

It will replace text into icon automaticalcally, Random theme support to show icon of Facebook / Google Plus / Dribbble / LinkedIn / NPMjs / Youtube / Zhihu.

If you need more, please create issue.

Random support Google Analytics / Baidu Tongji / Disqus / Duoshuo / Uyan, You can config these in theme config file or hexo main config file:

# Google analytics
google_analytics:
# Baidu tongji
baidu_analytics:
# Duoshuo
duoshuo_shortname:
# Disqus
disqus_shortname:
# Uyan
uyan_id:

Just add the key or code after the ':'.

The following settings is not prerequisite.

The background image use unsplash as default, but you can use your custom pictures.

If you use unsplash images, you can config the settings in theme config file theme/random/_config.yml:

unsplashConfig:
  # more about config on https://unsplash.it/
  # blur: true
  gravity: 'north' # north, east, south, west, center
  # greyscale: true

if you want use your own pictures, change the following section:

backgroundImages:
- https://7te9fe.com1.z0.glb.clouddn.com/bgimg_1.jpg?imageView2/1/w/__width__/h/__height__
- https://7te9fe.com1.z0.glb.clouddn.com/bgimg_2.jpg?imageView2/1/w/__width__/h/__height__
- https://7te9fe.com1.z0.glb.clouddn.com/bgimg_3.jpg?imageView2/1/w/__width__/h/__height__
- https://7te9fe.com1.z0.glb.clouddn.com/bgimg_4.jpg?imageView2/1/w/__width__/h/__height__
- https://7te9fe.com1.z0.glb.clouddn.com/bgimg_5.jpg?imageView2/1/w/__width__/h/__height__

__width__ and __height__ in URLs will replace with browser window size when show the picture, It's very useful when you image server support cut image into appointed size.

Random theme use Vegas to organize pictures, you can config it in following section of theme config file:

vegasConfig:
  # more about config https://vegas.jaysalvat.com/documentation/settings/
  # animation: 'random'
  # transition: 'swirlRight'
  preload­Image: true
  transition:
    - slideLeft2
    - slideRight2
    # - zoomIn
    # - swirLeft
    # - swirRight
    # - flash
    - flash2
  timer: true
  delay: 5000
  shuffle: true
  count: 28

There is a Hide button on the left bottom of every page, all of the content except button itself will be hide while user click this button. If you want to hide this button, please change hideButtonVisibility to false in theme config or main config file:

hideButtonVisibility: false

• Vegas
• iconfont
• generator-hexo-theme
• plyr

issue.