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.
note：We recommend use node LTS version like node 8.9.3 because nodejieba 2.2.5 dependency has a build error in node 10 version
- use
gitto clonehexo-theme-skappinto the theme folder under your blog project directory.
cd themes git clone https://github.com/Mrminfive/hexo-theme-skapp.git- To modify the root
_config.ymland 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-assignnote: 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-gypAfter finishing the install, you can preview your blog: hexo server(If you meet the style problem, you can use the command hexo clean first).
note: If you face the problem that lacking some js files(404 error), you should use hexo server instead of hexo server -l
To edit the root _config.yml file:
language: zh-cnNow, 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: /aboutDefault menu items：
| key | value | display 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 aboutedit the index.md file in the root source/about folder:
--- title: about 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 searchedit the index.md file in the root source/search folder:
--- title: search date: 2017-07-29 00:50:51 type: search layout: search ---To 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: https://blog.static.minfive.com/other/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: https://blog.static.minfive.com/other/banner-bg.jpg # 404 page background picture error_page_bg: https://blog.static.minfive.com/other/dogs.jpg # page loading icon loader_img: https://blog.static.minfive.com/other/loader.gif # author information author: name: minfive link: https://github.com/Mrminfive # footer information about: info: 本站是基于 Hexo 搭建的静态资源博客，主要用于分享日常学习、生活及工作的一些心得总结，欢迎点击右下角订阅 rss。 address: Guangzhou, Guangdong Province, China email: chenxiaowu1994@outlook.comcreate 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:chenxiaowu1994@outlook.com - title: rss icon: icon-rss link: /atom.xmlicon only support these values：
icon-email: emailicon-rss: rssicon-in: linkedinicon-twitter: twittericon-facebook: facebookicon-github: githubicon-zhihu: zhihuicon-douban: doubanicon-weibo: weiboicon-telegram: telegram
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 information, multiple authors are set to array # single author author: nick: BruceYJ link: https://www.github.com/BruceYuj # multiple authors author: - nick: BruceYJ link: https://www.github.com/BruceYuj - nick: minfive link: https://www.github.com/Mrminfive # If the article is reproduced, you need to increase the article source editor: name: Minfive link: https://www.github.com/Mrminfive # post subtitle in your index page subtitle: post introduction 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: ***skapp has integrated google statistics. You need to get the id and edit the root _config.yml file:
# Google statistic google_statistic: ***skapp uses busuanzi to count page PV and closed by default. You can open this service by editing the _config.yml file:
# Busuanzi busuanzi: trueskapp 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.xmlskapp 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: ***skapp uses hexo-math to render math formulas and it's closes by default. Configure the _config.yml under the theme folder to use this feature:
# Math Equations Render Support math: enable: true # Default(true) will load mathjax/katex script on demand # That is it only render those page who has 'mathjax: true' in Front Matter. # If you set it to false, it will load mathjax/katex srcipt EVERY PAGE. per_page: false engine: mathjax #engine: katex # hexo-rendering-pandoc (or hexo-renderer-kramed) needed to full MathJax support. mathjax: # Use 2.7.1 as default, jsdelivr as default CDN, works everywhere even in China cdn: //cdn.jsdelivr.net/npm/mathjax@2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML # For newMathJax CDN (cdnjs.cloudflare.com) with fallback to oldMathJax (cdn.mathjax.org). #cdn: //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML # For direct link to MathJax.js with CloudFlare CDN (cdnjs.cloudflare.com). #cdn: //cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML # For automatic detect latest version link to MathJax.js and get from Bootcss. #cdn: //cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML # hexo-renderer-markdown-it-plus (or hexo-renderer-markdown-it with markdown-it-katex plugin) # needed to full Katex support. katex: # Use 0.7.1 as default, jsdelivr as default CDN, works everywhere even in China cdn: //cdn.jsdelivr.net/npm/katex@0.7.1/dist/katex.min.css # CDNJS, provided by cloudflare, maybe the best CDN, but not works in China #cdn: //cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css # Bootcss, works great in China, but not so well in other region #cdn: //cdn.bootcss.com/KaTeX/0.7.1/katex.min.css