Vexo = Vue.js Style + Hexo

Vexo is a Hexo theme inspired by Vue.js official website.

Intro

Demo

Live Example

Features

• Fully Responsive
• Baidu Analytics
• Youyan
• Gitment
• Share Qrcode
• SEO
• Immersive Status Bar
• Article Catalog

Install

1. Download/Checkout this theme into your project

   cd your-hexo-folder
   
   git clone https://github.com/yanm1ng/hexo-theme-vexo.git themes/vexo
   
   cp -R themes/vexo/_source/* source/
   

2. Update project _config.yml theme config, look like this

   themes: vexo
   

   Here theme's name must same as the theme folder name.

3. Modify theme themes/vexo/_config.yml with your own info.

4. That's all , hope you will like :)

Update Version

cd themes/vexo
git pull

Post

The front-matter of a post looks like that:

---
title: "Hello World"
date: 2016-06-10 23:00
banner: your-banner-link.jpg
tags:
 - Movies
 - Life
---

Add this to the top of your article markdown file.

Change Log

2017-09-21

• Added article catalog
• Fixed bugs

2017-08-08

• Added article custom banner
• Fixed gitment error

2017-06-27

• Added image-zoom
• Added project-link

2017-06-25

• Added image load onerror replace default image
• Added page loading-bar
• Fixed bugs

2017-06-23

• Added project page to show github project
• Fixed share url error
• Support markdown table & hr

2017-06-20

• Added personal link icons, support:
  • github
  • zhihu
  • twitter
  • weibo
• Fixed bugs

2017-06-15

• Add personal about page
• Replace font-family
• Ignore text-autosizer/font-boosting on mobile-device
• Fixed bugs

2017-06-12

• Added enter-out transition
• Fixed bugs

2017-06-11

• Added archive page
• Fixed HighLight code line-number bug
• Adjust home post display problem
• Thanks @ky0ncheng issue

Comment

1. Gitment

Vexo use Gitment as the third party discussion system.

You can easily complete your comment configuration by just adding your settings into _config.yml

# comment
# you can set utterances, gitment, uyan or disqus
comment: gitment

# Gitment
gitment_owner: yanm1ng
gitment_repo: yanm1ng.github.io
gitment_oauth_id: 
gitment_oauth_secret: 

How to use Gitment? See

2. Utterances

You can also take Utterances as your comment system. It is a lightweight comments widget built on Github issues. You can easily configure which comment system you use in _config.yml of this theme.

# comment
# you can set utterances, gitment, uyan or disqus
comment: utterances

# utterances config
utterances_repo: # GitHubAccount/RepoForUtterances
utterances_issue_term: pathname 
utterances_theme: github-light

A simple introduction and guide for Utterances is Here.

Local Search (Search in the blog)

You can add local search engine in your blog. It requires hexo-generator-searchdb which can be installed with npm install hexo-generator-searchdb. The full instruction can be found Here.

After installing hexo-generator-searchdb, you can enable local search in _config.yml. It makes the search button visible at the right of the menu bar.

# Local Search Support
local_search:
  enable: true

Reward

You can replace your own Alipay/Wechat qrcode in themes/source/css/images

Here the name must same as alipay.jpg or wechat.jpg.

Links

You can easily add your social account by just adding your settings into _config.yml

# Links
weibo_username: your_weibo_account
twitter_username: your_twitter_account
github_username: your_github_account
zhihu_username: your_zhihu_account

About

• Give a star if you like , fork or just clone to use , and also you can help me fix bugs and add new feature :)
• If you have any problem or requirement , just open an issue here and i will help you.
• Thanks to @imsun , @Evan You and @Hexo.

LICENSE

MIT