# hexo-theme-matery
[](http://hits.dwyl.io/blinkfox/hexo-theme-matery) [](https://gitter.im/hexo-theme-matery/Lobby?utm_source=badge) [](https://github.com/blinkfox/hexo-theme-matery/issues) [](https://github.com/blinkfox/hexo-theme-matery/blob/master/LICENSE) [](https://codeload.github.com/blinkfox/hexo-theme-matery/zip/master) [](http://hexo.io) [](https://github.com/blinkfox/hexo-theme-matery/network) [](https://github.com/blinkfox/hexo-theme-matery/stargazers)
[馃嚚馃嚦涓枃璇存槑](README_CN.md) | [鍥藉唴璁块棶绀轰緥(http://blinkfox.com)](http://blinkfox.com) | [Github Deploy Demo(https://blinkfox.github.io)](https://blinkfox.github.io)
> This is a Hexo blog theme with 'Material Design' and responsive design.
## Features
- Simple and beautiful, and post is Beautiful and readable.
- [Material Design](https://material.io/).
- Responsive design, which can be displayed well on desktop, tablet, mobile phone, etc.
- Home page carousel posts and changing 'banner' picture dynamically everyday.
- Blog posts list with waterflow (There will be 24 images if the article doesn't have featured pictures).
- Archive page with timeline.
- Tags page of the **word cloud** and categories page of the **radar chart**
- Rich 'About' page (including about me, posts charts, my projects, my skills, gallery etc.)
- Friendly link page for customizable data
- Support post topping and rewards
- Support `MathJax`
- TOC
- Can be set append the copyright information when copying the content of the post
- Can be set to do password verification when reading a post
- Comment module of [Gitalk](https://gitalk.github.io/), [Gitment](https://imsun.github.io/gitment/), [Valine](https://valine.js.org/) and [Disqus](https://disqus.com/).(Gitalk is recommended)
- Integrated [Busuanzi Statistics](http://busuanzi.ibruce.info/), `Google Analytics` and post word count statistics.
- Support music playback and video playback on the homepage
- Support the `emoji` emoticon and use the `markdown emoji` grammar to directly generate the corresponding emoticon.
- Support [DaoVoice](http://www.daovoice.io/), [Tidio](https://www.tidio.com/) online chat.
## Contributor
Thanks to these contributors, without whom, hexo-theme-matery won't be this perfect.
- [@HarborZeng](https://github.com/HarborZeng)
- [@shw2018](https://github.com/shw2018)
- [@L1cardo](https://github.com/L1cardo)
- [@Five-great](https://github.com/Five-great)
## Download
hexo-theme-matery **recommend you to use Hexo 5.0.0 and above**. If you already have your own [Hexo](https://hexo.io/zh-cn/) blog, I suggest you upgrade Hexo to the latest stable version.
Click [here](https://codeload.github.com/blinkfox/hexo-theme-matery/zip/master) to download master branch of the last stable version of the code.After decompressing, copy the `hexo-theme-matery` folder
to your `themes` folder of your Hexo blog project.
Of course, you can use `git clone` to download in your `themes` folder.
```bash
git clone https://github.com/blinkfox/hexo-theme-matery.git
```
## Configuration
### Modify theme
Modify the value of `theme` in `_config.yml` of Hexo's root folder: `theme: hexo-theme-matery`.
#### Suggestions for other changes to the `_config.yml`:
- Please modify the value of `url` of `_config.yml` to your website's main `URL` (e.g. `http://xxx.github.io`).
- It's recommended to modify the value of the two `per_page` to be a multiple of `6`, such as: `12`, `18`, etc. so that the posts list can be displayed well under each screen.
- If you are a Chinese user, it is recommended to change the value of `language` to `zh-CN`.
### new categories page
`categories` page is to show all of categories. If the `source` directory of your blog doesn't have `categories/index.md` file, you need to create a new one like this:
```bash
hexo new page "categories"
```
when editing your new page file `/source/categories/index.md`, you need something like:
```yaml
---
title: categories
date: 2018-09-30 17:25:30
type: "categories"
layout: "categories"
---
```
### new tags page
`tags` page is to show all of tags. If the `source` directory of your blog doesn't have `tags/index.md` file, you need to create a new one like this:
```bash
hexo new page "tags"
```
and put the following in your new page file `/source/tags/index.md`,
```yaml
---
title: tags
date: 2018-09-10 18:23:38
type: "tags"
layout: "tags"
---
```
### new about page
`about` page is to show my blog and myself information. If the `source` directory of your blog doesn't have `about/index.md` file, create a new one like this:
```bash
hexo new page "about"
```
and edit your new page file `/source/about/index.md` to include:
```yaml
---
title: about
date: 2018-09-30 17:25:30
type: "about"
layout: "about"
---
```
### new contact page (Optional)
`contact` page is to show contact information. If the `source` directory of your blog doesn't have `contact/index.md` file, you need to new one like this:
```bash
hexo new page "contact"
```
when editing your new page file `/source/contact/index.md`, include the following at the beginning:
```yaml
---
title: contact
date: 2018-09-30 17:25:30
type: "contact"
layout: "contact"
---
```
> **Note**锛歍he message board depends on a third-party comment system, please **activate** your comment system to be effective. And in the theme's `_config.yml` file, the "**menu**" of the `19` to `21` line is configured, and the comment about the message board could be canceled.
### new friends link page (Optional)
The `friends` page is a page for displaying **Friendly Links** information. If you don't have a `friends/index.md` file in your blog's `source` directory, then you need to create a new one. The command is as follows:
```bash
hexo new page "friends"
```
Edit the file `/source/friends/index.md` you just created, at least you need the following:
```yaml
---
title: friends
date: 2018-12-12 21:25:30
type: "friends"
layout: "friends"
---
```
Also, create a new `_data` directory in your blog's `source` directory and a new `friends.json` file in the `_data` directory. The contents of the file is as follows:
```json
[{
"avatar": "http://image.luokangyuan.com/1_qq_27922023.jpg",
"name": "MaJang",
"introduction": "I am not a master, just looking for the master's footsteps.",
"url": "http://luokangyuan.com/",
"title": "Read More"
}, {
"avatar": "http://image.luokangyuan.com/4027734.jpeg",
"name": "Blinkfox",
"introduction": "Hello, I'm blinkfox, I like programming.",
"url": "https://blinkfox.github.io/",
"title": "Visit Blog"
}, {
"avatar": "http://image.luokangyuan.com/avatar.jpg",
"name": "ja_rome",
"introduction": "Ordinary steps can also go out of the great journey.",
"url": "https://me.csdn.net/jlh912008548",
"title": "Read More"
}]
```
### new 404 page
If the `source` directory of your blog doesn't have `404.md` file, you need create a new one using:
```bash
hexo new page 404
```
when editing your new page file `/source/404/index.md`, you need something as follows:
```yaml
---
title: 404
date: 2020-05-30 00:00:00
type: "404"
layout: "404"
description: "Cannot find the page you want :("
---
```
### Menu navigation configuration
#### Configure the name of the basic menu navigation, path url and icon icon.
1. The menu navigation name can be Chinese or English (e.g.: `Index` or `涓婚〉`
