Clover

Preview

Prerequisite

You got a blog project built by Hexo. Your project directory should like this:

_config.yml  node_modules  package.json  public  scaffolds  source  themes

Installation

Clone the repository.

git clone https://github.com/esappear/hexo-theme-clover themes/clover

Set theme in _config.yml file of the project root:

theme: clover

Add hexo-renderer-sass

npm install hexo-renderer-sass --save

Features

Free home page.

You can set posts of specific categories or tags in home page.

home:
  # set card style of home page
  # card: project-card
  category: Projects
  tag:
    - js
    - css
  except_category: Something
  except_tag: 'someTag'

Post which belongs to category or tag and don't belongs to except_category or except_tag will be filtered.

Page excerpt and photos

You can set an excerpt or photos in Front-matter.

---
layout: post
title: my_post_title
excerpt: my_post_excerpt
photos: [my_photo_url]
---

Tags page.

Create a page named tags
```
hexo new page "tags"
```

Edit tags page, set page layout to tag.

---
layout: tag
title: tags
date: 2018-10-05 12:12:53
---

Categories page.

Create a page named categories
```
hexo new page "categories"
```

Edit categories page, set page layout to category.

---
layout: category
title: categories
date: 2018-10-05 12:12:53
---

About page.

Create a page named about
```
hexo new page "about"
```

Edit categories page, set page layout to about.

---
layout: about
title: about
date: 2018-10-05 12:12:53
---

Social Media

social:
  GitHub: your-url
  Dribbble: your-url
  Behance: your-url
  Lofter: your-url
  Instagram: your-url

Custom Menu

menu:
  Project: /
  Stuffs: /tags/Stuffs
  Archive: /archives
  About: /about

Card Style

Two kinds of card style: project-card and article-card. (Never mind the name.)

card_style:
  home: project-card
  archive: article-card
  tag: article-card
  category: article-card

Code Highlight

You should disable the default highlight setting in .config.yml and then get gihub-style code highlight powered by hight.js.

highlight:
  enable: false

declare language of code

```js
console.log('hello world);

zhijielee/hexo-theme-clover-bak