🇨🇳中文说明 | 国内访问示例(http://blinkfox.com) | Github Deploy Demo(https://blinkfox.github.io)
This is a Hexo blog theme with 'Material Design' and responsive design.
- Simple and beautiful, and post is Beautiful and readable.
- Material Design.
- 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, Gitment, Valine and Disqus.(Gitalk is recommended)
- Integrated Busuanzi Statistics,
Google Analytics
and post word count statistics. - Support music playback and video playback on the homepage
- Support the
emoji
emoticon and use themarkdown emoji
grammar to directly generate the corresponding emoticon. - Support DaoVoice, Tidio online chat.
Thanks to these contributors, without whom, hexo-theme-matery won't be this perfect.
hexo-theme-matery recommend you to use Hexo 5.0.0 and above. If you already have your own Hexo blog, I suggest you upgrade Hexo to the latest stable version.
Click here 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.
git clone https://github.com/blinkfox/hexo-theme-matery.git
Modify the value of theme
in _config.yml
of Hexo's root folder: theme: hexo-theme-matery
.
- Please modify the value of
url
of_config.yml
to your website's mainURL
(e.g.http://xxx.github.io
). - It's recommended to modify the value of the two
per_page
to be a multiple of6
, 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
tozh-CN
.
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:
hexo new page "categories"
when editing your new page file /source/categories/index.md
, you need something like:
---
title: categories
date: 2018-09-30 17:25:30
type: "categories"
layout: "categories"
---
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:
hexo new page "tags"
and put the following in your new page file /source/tags/index.md
,
---
title: tags
date: 2018-09-10 18:23:38
type: "tags"
layout: "tags"
---
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:
hexo new page "about"
and edit your new page file /source/about/index.md
to include:
---
title: about
date: 2018-09-30 17:25:30
type: "about"
layout: "about"
---
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:
hexo new page "contact"
when editing your new page file /source/contact/index.md
, include the following at the beginning:
---
title: contact
date: 2018-09-30 17:25:30
type: "contact"
layout: "contact"
---
Note:The 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 the19
to21
line is configured, and the comment about the message board could be canceled.
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:
hexo new page "friends"
Edit the file /source/friends/index.md
you just created, at least you need the following:
---
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:
[{
"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"
}]
If the source
directory of your blog doesn't have 404.md
file, you need create a new one using:
hexo new page 404
when editing your new page file /source/404/index.md
, you need something as follows:
---
title: 404
date: 2020-05-30 00:00:00
type: "404"
layout: "404"
description: "Cannot find the page you want :("
---
- The menu navigation name can be Chinese or English (e.g.:
Index
or主页
) - Icon icon can be found in Font Awesome
menu:
Index:
url: /
icon: fas fa-home
Tags:
url: /tags
icon: fas fa-tags
Categories:
url: /categories
icon: fas fa-bookmark
Archives:
url: /archives
icon: fas fa-archive
About:
url: /about
icon: fas fa-user-circle
Friends:
url: /friends
icon: fas fa-address-book
If you need a secondary menu, you can do the following on the basis of the original basic menu navigation.
- Add the
children
keyword to the first level menu that needs to add a secondary menu (e.g.: addchildren
under theAbout
menu) - Create a secondary menu name, path url and icon icon under
children
. - Note that each secondary menu module must be preceded by
-
. - Note the indentation format.
menu:
Index:
url: /
icon: fas fa-home
Tags:
url: /tags
icon: fas fa-tags
Categories:
url: /categories
icon: fas fa-bookmark
Archives:
url: /archives
icon: fas fa-archive
About:
url: /about
icon: fas fa-user-circle
Friends:
url: /friends
icon: fas fa-address-book
Medias:
icon: fas fa-list
children:
- name: Music
url: /music
icon: fas fa-music
- name: Movies
url: /movies
icon: fas fa-film
- name: Books
url: /books
icon: fas fa-book
- name: Galleries
url: /galleries
icon: fas fa-image
Starting from Hexo 5.0.0 version, it comes with support for prismjs
code syntax highlighting, and hexo-theme-matery has been modified to support it.
If the plugin of hexo-prism-plugin
has been installed in your blog, then you need to execute npm uninstall hexo-prism-plugin
to uninstall it, otherwise there will be {
, }
escape characters in the code block of the post.
Then, modify the value of highlight.enable
to false
in _config.yml
at the root your hexo project, and set the value of prismjs.enable
to true
, the main configuration is as follows:
highlight:
enable: false
line_number: true
auto_detect: false
tab_replace: ''
wrap: true
hljs: false
prismjs:
enable: true
preprocess: true
line_number: true
tab_replace: ''
The default prismjs
theme in the hexo-theme-matery is Tomorrow Night
, if you want to customize your own theme, you can go to prismjs download page to download yourself favorite theme css
file, then name this css theme file prism.css
, replace the source/libs/prism/prism.css
file in the theme folder of hexo-theme-matery
.
The theme uses the Hexo plugin hexo-generator-search to search the content, and the Installation command is as follows:
npm install hexo-generator-search --save
Add the following content in _config.yml
at the root of your hexo project:
search:
path: search.xml
field: post
Default permalinks of Hexo will include Chinese if your article's title is Chinese. But it's adverse to SEO
, and gitment
comments don't support Chinese Link as well. We can use the hexo-permalink-pinyin Hexo plugin to generate permalinks in Chinese Pinyin when generating posts.
Installation command is as follows:
npm i hexo-permalink-pinyin --save
Add such configurations in _config.yml
file of Hexo:
permalink_pinyin:
enable: true
separator: '-' # default: '-'
Note: hexo-abbrlink can generate non-Chinese link in addition to this plugin.
If you want to display the post word count and reading time information in the post detail page, you can install the hexo-wordcount plugin.
Installation command is as follows:
npm i --save hexo-wordcount
Then just activate the following configuration items in the theme _config.yml
file:
postInfo:
date: true
update: false
wordCount: false # set true.
totalCount: false # set true.
min2read: false # set true.
readCount: false # set true.
This theme adds support for the emoji
emoticon, using the Hexo plugin hexo-filter-github-emojis to support the generation of the emoji
expression. The corresponding markdown emoji
syntax (::
, for example: :smile:
) is converted into a emoji
expression that jumps. The installation command is as follows:
npm install hexo-filter-github-emojis --save
Add the following configuration into the _config.yml
file in your hexo project root folder:
githubEmojis:
enable: true
className: github-emoji
inject: true
styles:
customEmojis:
Execute hexo clean && hexo g
to regenerate the blog file, and then you can see the expression you wrote in the emoji
grammar in the corresponding position in the article.
The theme uses the Hexo plugin hexo-generator-feed to support RSS
feed , and the Installation command is as follows:
npm install hexo-generator-feed --save
Add the following configuration into the _config.yml
file in your hexo project root folder:
feed:
type: atom
path: atom.xml
limit: 20
hub:
content:
content_limit: 140
content_limit_delim: ' '
order_by: -date
Execute hexo clean && hexo g
to regenerate the blog file, and then you can see the atom.xml
file in the public
folder, indicating that you have successfully installed.
DaoVoice online chat (Optional)
Go to the official website of DaoVoice, register and get the app_id
. Fill the app_id
into the the theme _config.yml
file.
Tidio online chat (Optional)
Go to the official website of Tidio, register and get the Public Key
. Fill the Public Key
into the the theme _config.yml
file.
Website footer may need to be customized, and it is not convenient to make it part of the configuration, So you need to modify and process it by yourself. Changes could be made in the theme's /layout/_partial/footer.ejs
file, including the site information, the theme used, the amount of traffic and so on.
In the theme _config.yml
file, the configurations of QQ
, GitHub
and mailbox and more are supported by default. In the /layout/_partial/social-link.ejs
file of the theme, you can add or modify social link addresses as you need. To add a link, please refer to the following code:
<% if (theme.socialLink.github) { %>
<a href="<%= theme.socialLink.github %>" class="tooltipped" target="_blank" data-tooltip="访问我的GitHub" data-position="top" data-delay="50">
<i class="fab fa-github"></i>
</a>
<% } %>
You can search social icons such as fab fa-github
in Font Awesome. There are common social icons you can reference:
- Facebook:
fab fa-facebook
- Twitter:
fab fa-twitter
- Google-plus:
fab fa-google-plus
- Linkedin:
fab fa-linkedin
- Tumblr:
fab fa-tumblr
- Medium:
fab fa-medium
- Slack:
fab fa-slack
- Sina Weibo:
fab fa-weibo
- Wechat:
fab fa-weixin
- QQ:
fab fa-qq
- Zhihu:
fab fa-zhihu
Note: The version of
Font Awesome
used by matery is5.11.0
.
To support music playing, you just need to activate music playing configuration in the theme's _config.yml
file.
# Whether to display the music
music:
enable: true
title: # non-fixed mode works
enable: true
show: Listen to music
server: netease # require music platform: netease, tencent, kugou, xiami, baidu
type: playlist # require song, playlist, album, search, artist
id: 503838841 # require song id / playlist id / album id / search keyword
fixed: false # enable fixed mode
autoplay: false # audio atuoplay
theme: '#42b983'
loop: 'all' # player loop play, values: 'all', 'one', 'none'
order: 'random' # player play order, values: 'list', 'random'
preload: 'auto' # values: 'none', 'metadata', 'auto'
volume: 0.7 # default volume, notice that player will remember user setting, default volume will not work after user set volume themselves
listFolded: true # indicate whether list should folded at first
server
values :netease
(NetEase cloud music) ,tencent
(QQMusic) ,kugou
(KuGouMusic) ,xiami
(XiamMusic) ,baidu
(BaiduMusic)
type
values :song
,playlist
,album
,search
,artist
For example to get theid
:open NetEase cloud music in the browser , click the playlist of my love , there will a string of
numbers in the browser`s address bar , theplaylist
`sid
just is the string of numbers.
Everything in the Front-matter option is not required. But I still recommend at least filling in the values of title
and date
.
Options | Defaults | Description |
---|---|---|
title | Markdown's file title | Post title, it is highly recommended to fill in this option |
date | Date and time when the file created | Publish time, it is highly recommended to fill in this option, and it is best to ensure that it is globally unique |
author | author in root _config.yml |
Post author |
img | a value in featureImages |
Post feature image,For example: http://xxx.com/xxx.jpg |
top | true |
Recommended post (whether the post is topped), if the top value is true , it will be recommended as a homepage post. |
hide | false |
Whether show this post in homepage, if the hide value is true , it will not be showed in homepage. |
cover | false |
The v1.0.2 version is added to indicate whether the post needs to be added to the homepage carousel cover. |
coverImg | null | The new version of v1.0.2 indicates that the post needs to display the image path on the cover of the homepage. If not, the default image of the post is used by default. |
password | null | The post read the password. If you want to set the reading verification password for the article, you can set the value of password , which must be encrypted with SHA256 to prevent others from seeing it. The premise is that the verifyPassword option is activated in the theme's config.yml |
toc | true |
Whether TOC is turned on or not, you can turn off the TOC function for an article. The premise is that the toc option is activated in the theme's config.yml |
mathjax | false |
Whether to enable math formula support, whether this article starts mathjax , and you need to open it in the theme _config.yml file. |
summary | null | Post summary, custom post summary content, if the attribute has a value, the post card summary will display the text, otherwise the program will automatically intercept part of the article as a summary |
categories | null | Article classification, the classification of this topic represents a macroscopically large classification, only one article is recommended for one classification. |
tags | null | Post label, a post can have multiple labels |
keywords | Post Title | Post key Words With SEO |
reprintPolicy | cc_by | Post reprint policy, value could be one of cc_by, cc_by_nd, cc_by_sa, cc_by_nc, cc_by_nc_nd, cc_by_nc_sa, cc0, noreprint and pay |
Note:
- post's featured picture will take remainder if not writing the
img
property, and choose the featured picture of theme to let all of post's picture have their own characteristics.- The value of
date
should try to ensure that each article is unique, becauseGitalk
andGitment
recognizeid
in this topic are uniquely identified by the value ofdate
.- If you want to set the ability to read the verification password for the article, you should not only set the value of the password with SHA256 encryption in Front-matter, but also activate the configuration in the theme
_config.yml
.- you can define reprint policy for a single article in the front-matter of the specific md file using this key: reprintPolicy
The following are examples of the post's Front-matter
.
---
title: typora-vue-theme Theme introduction
date: 2018-09-07 09:25:00
---
---
title: typora-vue-theme Theme introduction
date: 2018-09-07 09:25:00
author: Qi Zhao
img: /source/images/xxx.jpg
top: true
hide: false
cover: true
coverImg: /images/1.jpg
password: 8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92
toc: false
mathjax: false
summary: This is the content of your custom post summary. If there is a value for this attribute, the post card summary will display the text, otherwise the program will automatically intercept part of the post content as a summary.
categories: Markdown
tags:
- Typora
- Markdown
---
You can modify some custom modification in _config.yml
as follows:
- Menu
- My dream
- Home music player and video player configuration
- Whether to display the title of the recommended posts
favicon
andLogo
- profiles
- TOC
- post rewards
- Append copyright information when copying article content
- MathJax
- Post word count, reading times
- the 'love' effect of clicking on the page
- My Projects
- My Skills
- My Gallery
- Gitalk, Gitment, Valine and Disqus
- Busuanzi Statistics And Google Analytics
- The map of default featured pictures. The theme will take remainder according to
hashcode
of the post title if the post does not set featured pictures.
I think everyone should have their own style and feature for their blogs. If you are not satisfied with the theme's functions and color, you can modify them by yourself,
and more free functions and details could be changed by modifying source code when it is hard to achieve by modifying the theme's _config.yml
.
Search .bg-color
to modify background color in /source/css/matery.css
in theme file:
/* The overall background color, including navigation, mobile navigation, footer, tab, etc.. */
.bg-color {
background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%);
}
@-webkit-keyframes rainbow {
/* Dynamically switch background colors. */
}
@keyframes rainbow {
/* Dynamically switch background colors. */
}
You can change banner
pictures in /source/medias/banner
as you like .Theme code can switch dynamically every day and just need 7 pictures.If you master JavaScript
, you can change it to your favorite switching logic, such as Random switching. The code for switching banner
is in <script></script>
of /layout/_partial/bg-cover-content.ejs
file.
$('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)');
There are 24 featured pictures in /source/medias/featureimages
, you can add or delete some, and modify corresponding settings in the theme's _config.yml
.
See CHANGELOG.md