[Hexo] Hello Theme ACE

This is hexo theme ACE.

Posted by JunMing on 2019-04-18

This ACE theme created by kinggozhang based on theme:huweihuang and many other repos.
please check thanks and references for more details.

New feature

  1. Fancy nav bar
  2. Support slide show for index page.
  3. Remove image bg of header
  4. Add ribbon/particle bg to header.
  5. Support sticky post.
  6. multi lang support

Live Demo

Live Demo : www.sumoon.com

Copyright Notice

You are free to use this theme, but please leave copyright info in footer.
or
leave friend link of ACE-THEME

Install Hexo

1
npm install hexo-cli -g

Access https://hexo.io for more info

Theme Usage

Init

1
2
cd your_blog_dir
git clone https://github.com/kinggozhang/hexo-theme-ace.git themes/ace

Modify

Change theme with ‘ace’

1
2
## Themes: https://hexo.io/themes/
theme: ace

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

header decoration

1
2
3
slideshow: true     //support 3 slides, img/slideshow/slider1/2/3
ribban_bg: false //A beatiful ribban bg
particle_bg: true //A dynamic particle bg

Sticky post

You have to specify a sticky tag, then tag it to post.

1
2
#sticky post tag
sticky_tag: "Sticky"

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

you can change to your own icon at css/image.

Post tag

You can decide to show post tags or not.

1
home_posts_tag: true

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!

Have fun ^_^

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

Thanks and references