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