blinkfox/hexo-theme-matery

hexo-theme-matery

🇨🇳中文说明 | 国内访问示例(http://blinkfox.com) | Github Deploy Demo(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.
• 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 the markdown emoji grammar to directly generate the corresponding emoticon.
• Support DaoVoice, Tidio online chat.

Contributor

Thanks to these contributors, without whom, hexo-theme-matery won't be this perfect.

• @HarborZeng
• @shw2018
• @L1cardo
• @Five-great

Download

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

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:

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"
---

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:

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"
---

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:

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"
---

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:

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 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:

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"
}]

new 404 page

If the source directory of your blog doesn't have 404.md file, you need create a new one. In /source/404.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 :("
---

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 主页)
2. 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

Secondary menu configuration method

If you need a secondary menu, you can do the following on the basis of the original basic menu navigation.

1. Add the children keyword to the first level menu that needs to add a secondary menu (e.g.: add children under the About menu)
2. Create a secondary menu name, path url and icon icon under children.
3. Note that each secondary menu module must be preceded by -.
4. 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

Code Highlight

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.

Search

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

Translate Chinese Link to Pinyin (Recommended)

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.

Post word count statistics plugin (Recommended)

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.

Add emoji support (Optional)

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.

Add RSS feed support (Optional)

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.

Modify website footer

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.

Modify social links

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 is 5.11.0.

Configure music player (optional)

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 the id: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 , the playlist`s id just is the string of numbers.

add note

demonstration

Usage

{% note [class] [no-icon] [summary] %}
Any content (support inline tags too).
{% endnote %}

• [class] : Optional parameter. Supported values: default | primary | success | info | warning | danger.
• [no-icon] : Optional parameter. Disable icon in note.
• [summary] : Optional parameter. Optional summary of the note.

All parameters are optional.

example

{% note %}
#### Header
(without define class style)
{% endnote %}

add button

demonstration

Usage

{% button url, text, icon [class], [title] %}

or

{% btn url, text, icon [class], [title] %}

• url : Absolute or relative path to URL.
• text : Button text. Required if no icon specified.
• icon : Font Awesome icon name. Required if no text specified.
• [class] : Optional parameter. Font Awesome class(es): fa-fw | fa-lg | fa-2x | fa-3x | fa-4x | fa-5x
• [title] : Optional parameter. Tooltip at mouseover.

Examples

{% button #, Text %}

Post Front-matter

Detailed Front-matter options

Everything in the Front-matter option is not required. But I still recommend at least filling in the values of title and date.

Note:

1. 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.
2. The value of date should try to ensure that each article is unique, because Gitalk and Gitment recognize id in this topic are uniquely identified by the value of date.
3. 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.
4. 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.

The simplest example

---
title: typora-vue-theme Theme introduction
date: 2018-09-07 09:25:00
---

The most comprehensive example

---
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
---

Screenshot

Home

Custom modification

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 and Logo
• 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.

Customizing theme color

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. */
}

Modify banner picture and post's featured pictures

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 banneris in <script></script> of /layout/_partial/bg-cover-content.ejsfile.

$('.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.

Changelog

See CHANGELOG.md