Ported Theme of Hux Blog, Thank Huxpro for designing such a flawless theme.

This Zilan theme created by YuankunLi modified from the original Porter Kaijun and YuHsuan

Demo Live Demo

Zilan Blog

Usage

I publish the whole project for your convenience, so you can just follow the instruction down below, then you can easily customiz your own blog!

Let’s begin!!!

Init

1
2
3

git clone https://github.com/catherineliyuankun/hexo-theme-zilan.git ./hexo-zilan
cd hexo-zilan
npm install

Modify

Modify _config.yml file with your own info.
Especially the section:

Deployment

Replace to your own repo!

1
2
3
4

deploy:
  type: git
  repo: https://github.com/<yourAccount>/<repo>
  branch: <your-branch>

Sidebar settings

Copy your avatar image to <root>/img/ and modify the _config.yml:

1
2
3

sidebar: true    # whether or not using Sidebar.
sidebar-about-description: "<your description>"
sidebar-avatar: img/<your avatar path>

and activate your personal widget you like

1
2
3
4
5
6
7

widgets:         # here are widget you can use, you can comment out
- featured-tags
- short-about
- recent-posts
- friends-blog
- archive
- category

if you want to add sidebar widget, please add at layout/_widget.

Signature Setup

Copy your signature image to <root>/img/signature and modify the _config.yml:

1
2

signature: true   # show signature
signature-img: img/signature/<your-signature-ID>

Go to top icon Setup

My icon is using iron man, you can change to your own icon at css/image.

Post tag and category

You can decide to show post tags and categories or not.

1
2

home_posts_tag: true
home_posts_category: true

1
2

home_posts_tag: false
home_posts_category: false

Page Header category

You can decide to show page_header categories or not.

1

page_header_category: true

1

page_header_category: false

forkme

forkme: false # Fork me on GitHub
forkme-url: https://github.com/CatherineLiyuankun/Hexo-theme-zilan # GitHub url

donate

donate: true
donate-alipay: https://github.com/CatherineLiyuankun/PictureBed/raw/master/blog/base/alipay.png
donate-wechat: https://github.com/CatherineLiyuankun/PictureBed/raw/master/blog/base/wechatpay.png

Markdown render

My markdown render engine plugin is hexo-renderer-markdown-it.

1
2
3
4
5
6
7
8
9
10

# Markdown-it config
## Docs: https://github.com/celsomiranda/hexo-renderer-markdown-it/wiki
markdown:
  render:
    html: true
    xhtmlOut: false
    breaks: true
    linkify: true
    typographer: true
    quotes: '“”‘’'

and if you want to change the header anchor ‘ℒ’, you can go to layout/post.ejs to change it.

1
2
3
4
5
6

async("https://cdn.bootcss.com/anchor-js/1.1.1/anchor.min.js",function(){
        anchors.options = {
          visible: 'hover',
          placement: 'left',
          icon: ℒ // this is the header anchor "unicode" icon
        };

Hexo Basics

Some hexo command:

1
2
3
4

hexo new post "<post name>" # you can change post to another layout if you want
hexo clean && hexo generate # generate the static file
hexo server # run hexo in local environment
hexo deploy # hexo will push the static files automatically into the specific branch(gh-pages) of your repo!

Start your own blog!

Please Star this Project if you like it! Follow would also be appreciated!
Peace!

Donate

• ← Previous Post
• Next Post →