This project is a hexo theme named skapp. Demo
skapp
supports zh-cn
and en
by default. If you need other languages, you can extend it by yourself(to put the language yml file into the languages
folder under the hexo-theme-skapp
directory).
- Follow the hexo official document to build the basic blog.
the default path of the following operations is your hexo blog project directory, please enter the project.
- use
git
to clonehexo-theme-skapp
into the theme folder under your blog project directory.
cd theme
git clone https://github.com/Mrminfive/hexo-theme-skapp.git
- To modify the root
_config.yml
and install node dependencies.
npm install --save hexo-autoprefixer hexo-filter-cleanup hexo-generator-feed hexo-generator-sitemap hexo-renderer-sass hexo-renderer-swig mamboer/lunr.js moment node-sass object-assign
note: If your OS is Windows, you may meet some problems when install the mamboer/lunr.js
(because of the packagenodejieba
). To fix this problem, you should install node-gyp
.
npm install -g windows-build-tools
npm install -g node-gyp
Then configure the root _config.yml
file:
theme: hexo-theme-skapp
# Sass
node_sass:
outputStyle: nested
precision: 5
sourceComments: false
# Autoprefixer
autoprefixer:
exclude:
- '*.min.css'
browsers:
- 'last 2 versions'
# Lunr
lunr:
field: all
fulltext: false
path: assets/lunr/
# filter_cleanup
hfc_useref:
enable: true
concat: true
hfc_html:
enable: true
exclude:
hfc_css:
enable: true
exclude:
- '*.min.css'
hfc_js:
enable: true
mangle: true
exclude:
- '*.min.js'
hfc_img:
enable: false
interlaced: false
multipass: false
optimizationLevel: 2
pngquant: false
progressive: false
hfc_favicons:
enable: false
src: img/blog-logo.png
target: img/
icons:
android: true
appleIcon: true
appleStartup: false
coast: false
favicons: true
firefox: false
opengraph: false
windows: true
yandex: false
After finishing the configuration, you can preview your blog: hexo s --debug
(If you meet the style problem, you can use the command hexo clean
first).
To edit the root _config.yml
file:
language: zh-cn
Now, skapp support two kinds of language:
language | code |
---|---|
English | en |
简体中文 | zh-cn |
To edit the root _config.yml
file and set the menu
item:
menu:
home: /
archive: /archives
about: /about
Default menu items:
key | value | dispaly text |
---|---|---|
home | home: / | home |
archive | archive: /archives | archives |
about | about: /about | about |
search | search: /search | search |
Then, you need create about
,search
and 404
page manually:
create the about page:
hexo new page about
edit the index.md
file in the root source/about
folder:
---
title: abbout
date: 2017-07-29 00:50:51
type: about
layout: about
---
...(the below content will be redenered in the about page)
create the search page:
hexo new page search
edit the index.md
file in the root source/search
folder:
---
title: search
date: 2017-07-29 00:50:51
type: search
layout: search
---
create the 404 page:
create the 404.md
file in the source directory and edit this file:
---
title: 404 Page Not Found
date: 2017-08-04 23:36:59
type: error
layout: error
---
to edit the root _config.yml
file:
# Site
# blog's title
title: MINFIVE
# subtitle in the banner header
subtitle: MINFIVE BLOG
# introduction in the banner header
subtitle_desc: 日常学习与兴趣交流
# seo keyword
keywords: minfive, minfive blog, 前端博客, 前端, 程序员, 前端开发, 全栈开发, node.js, javascript
# blog description(for seo)
description: 日常学习与兴趣交流的个人博客
# self introduction
introduction: 不思量,自难忘!
# your blog favicon icon, support two ways: local and online. the local way need you to put the icon under themes/hexo-theme-skapp/source/img directory
favicon_ico: http://oo12ugek5.bkt.clouddn.com/blog/images/favicon.ico
# blog logo icon in the upper left corner. support the local way and online way.
logo: http://oo12ugek5.bkt.clouddn.com/images/logo-text-white.png
# avatar
avatar: http://oo12ugek5.bkt.clouddn.com/images/qrcode.png
# qrcode: http://oo12ugek5.bkt.clouddn.com/images/qrcode.png
# page default cover
default_cover: http://oo12ugek5.bkt.clouddn.com/images/default_cover.png
# header background picture
header_cover: http://oo12ugek5.bkt.clouddn.com/blog/images/banner-bg.jpg
# 404 page background picture
error_page_bg: http://oo12ugek5.bkt.clouddn.com/blog/images/dogs.jpg
# page loading icon
loader_img: http://oo12ugek5.bkt.clouddn.com/blog/images/loader.gif
# author information
author:
name: minfive
link: https://github.com/Mrminfive
# footer information
about:
info: 本站是基于 Hexo 搭建的静态资源博客,主要用于分享日常学习、生活及工作的一些心得总结,欢迎点击右下角订阅 rss。
address: Guangzhou, Guangdong Province, China
email: [email protected]
create contact.yml
under the /source/_data
(This configuration will create links in the page footer):
- title: github
icon: icon-github
link: https://github.com/Mrminfive
- title: email
icon: icon-email
link: mailto:[email protected]
- title: rss
icon: icon-rss
link: /atom.xml
icon
only support these values:
icon-email
: emailicon-rss
: rssicon-in
: linkedinicon-twitter
: twittericon-facebook
: facebookicon-github
: githubicon-zhihu
: zhihuicon-douban
: doubanicon-weibo
: weibo
create footer_link.yml
under the source/_data
directory(This configuration will create links in the page footer):
friend_links:
- name: hexo-theme-skapp
desc: hexo-theme-skapp
link: https://github.com/Mrminfive/hexo-theme-skapp
build_tools:
- name: Hexo
desc: Blog Framework
link: https://hexo.io/
name
means the link value, desc
means the link title
attribute value.
Each array in this file represents a list of link(e.g. friend_links). Skapp support multi-column links(you just need to edit your language configuration in the hexo-theme-skapp/languages
).
skapp uses sass
precompiled style and packages all the baisc styles in the _theme.scss
file under the hexo-theme-skapp/source/scss
directory:
/**
* blog theme
*/
$main-color: #19abd6 !default;
$main-color--hover: lighten($main-color, 10%) !default;
$font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,"PingFang SC","Lantinghei SC","Microsoft Yahei","Hiragino Sans GB","Microsoft Sans Serif","WenQuanYi Micro Hei",sans !default;
$main-fc: #666 !default;
$main-fs: 14px !default;
$main-lh: 1.7 !default;
$title-fc: #242f35 !default;
$hint-fc: #19abd6 !default;
$bgc--main: #fff !default;
$bgc--bottom: #2d383e !default;
$bgc--footer: #242f35 !default;
$border-c: #d8e5f3 !default;
$transition: .3s !default;
$mq-desktop--wide: 1280px !default;
$mq-desktop: 980px !default;
$mq-mobile: 736px !default;
$pad: 15px !default;
$z-index--bottom: 1 !default;
$z-index--center: 50 !default;
$z-index--top: 100 !default;
To configure basic info in your markdown blog file:
title: Hello World
cover: http://oxnuwmm3w.bkt.clouddn.com/hello-world.jpeg
author:
nick: BruceYJ
link: https://www.github.com/BruceYuj
title
attribute is the blog's title. cover
attribute is the blog's first picture and thumbnail. author
attribute is the blog's author information and link.
skapp has integrated baidu statistics. You need to get the id and edit the root _config.yml
file:
# Baidu statistic
baidu_statistic: e3267498201dfa9699a5c509424709d6
skapp has integrated google statistics. You need to get the id and edit the root _config.yml
file:
# Google statistic
google_statistic: UA-108468870-1
skapp uses busuanzi to count page PV and closed by default. You can open this service by editing the _config.yml
file:
# Busuanzi
busuanzi: true
skapp uses lunr
to search in site and don't support configuration.
to edit the root _config.yml
file:
# Feed Atom
feed:
type: atom
path: atom.xml
limit: 20
# Sitemap
sitemap:
path: sitemap.xml
skapp has integrated gitalk.
If you want to use this comment function, you need to register the Github Application(follow the gitalk document).
Then to edit the _config.yml
configuration:
# Gitalk
gitTalk:
clientId: ***
clientSecret: ***
repo: ***
owner: ***
admin:
- ***
skapp has integrateddisqus. If you want to use this comment function, you need to register Disqus(follow the official instruction).
Then to edit the _config.yml
configuration:
# Disqus
disqus_shortname: ***