🇺 🇸 English Document | domestic access sample (http://blinkfox.com) | making deployment demo sample (https://blinkfox.github.io)

This is a Hexo blog theme that uses Material Design and responsive Design.

features

• Simple and beautiful, the article content is beautiful and easy to read
• The Material Design of the Design
• With responsive design, blogging works well on desktop, tablet, mobile and other devices
• Home page round broadcast articles and daily dynamic switchBannerThe picture
• Cascading list of blog posts (when the post has no featured images)24A beautiful picture instead)
• Timeline archive pages
• Word cloud TAB page and radar map classification page
• Rich about me pages (including about me, article charts, my projects, my skills, albums, etc.)
• Links to customizable data pages
• Support article top and article reward
• supportMathJax
• TOCdirectory
• You can set the copyright information to be added when copying article content
• Can be set to do password verification when reading the article
• Gitalk,Gitment,Valine 和 DisqusComment module (recommendedGitalk)
• Integrated withNo garlic statistics, Google Analytics (Google Analytics) and article word count and other functions
• Supports music and video playback functions on the home page
• supportemojiExpression, withmarkdown emojiGrammar writing directly generates the corresponding energyjumpingThe expression.
• DaoVoice, Tidio online chat support.

contributors

Thanks to the contributors listed below, without whom Hexo-Theme-Matery would not be so perfect.

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

download

This topic recommends that you use Hexo 5.0.0 and above. If you already have a Hexo blog, it is recommended that you update Hexo to the latest stable version.

Click here to download the latest stable version of the master branch, unzip it and copy the hexo-theme-matery folder into your Hexo Themes folder.

You can also download it using git clone from your themes folder:

git clone https://github.com/blinkfox/hexo-theme-matery.git
Copy the code

configuration

Switch the theme

Change the theme value of _config.yml in the Hexo root directory: theme: hexo-theme-matery

_config.ymlOther suggestions for modification:

• Please amend_config.yml 的 urlValue for your site masterURL(such as:http://xxx.github.io).
• Two modifications are recommended.per_pageThe paging bar value of6Multiples of, such as:12,18Etc., so that the list of articles under each screen can be better display.
• If you are a Chinese user, it is recommended to changelanguageThe value ofzh-CN.

Create the Categories page

The Categories page is used to show all the categories. If you don’t already have the categories/index.md file in your blog source, you need to create a new one:

hexo new page "categories"
Copy the code

Just edit your new page file/source/categories/index, md, at least the following contents:

---
title: categories
date: 2018-09-30 17:25:30
type: "categories"
layout: "categories"
---
Copy the code

Create a new TAB Tags page

The tags page is used to display all the tags. If you don’t already have tags/index.md in your blog’s source directory, you need to create a new one.

hexo new page "tags"
Copy the code

To edit your newly created page file /source/tags/index.md, you need at least the following:

---
title: tags
date: 2018-09-30 18:23:38
type: "tags"
layout: "tags"
---
Copy the code

Create a new About page

The About page is a page that displays information about me and my blog. If you don’t already have an about/index.md file in your blog source directory, you need to create a new one.

hexo new page "about"
Copy the code

To edit your newly created page file /source/about/index.md, you need at least the following:

---
title: about
date: 2018-09-30 17:25:30
type: "about"
layout: "about"
---
Copy the code

New Message board Contact page (optional)

The contact page is used to display message board information. If you don’t already have contact/index.md in your blog source directory, you need to create a new one.

hexo new page "contact"
Copy the code

To edit your newly created page file /source/contact/index.md, you need at least the following:

---
title: contact
date: 2018-09-30 17:25:30
type: "contact"
layout: "contact"
---
Copy the code

Note: this message board function depends on third party comment system, please activate your comment system to be effective. And in the _config.yml file of the topic, configure “menu” at lines 19 to 21 to uncomment the message board.

Create a new link to friends page (optional)

If you don’t already have a friends/index.md file in your blog’s source directory, you need to create a new one.

hexo new page "friends"
Copy the code

To edit your newly created page file /source/friends/index.md, you need at least the following:

---
title: friends
date: 2018-12-12 21:25:30
type: "friends"
layout: "friends"
---
Copy the code

At the same time, create a new _data directory under your blog source directory and a new friends.json file under your blog source directory as follows:

[{" avatar ":" http://image.luokangyuan.com/1_qq_27922023.jpg ", "name" : "code sauce", "the introduction" : "I'm not, just looking for the footsteps of", "url" : "Http://luokangyuan.com/", "title" : "to learn"}, {" avatar ":" http://image.luokangyuan.com/4027734.jpeg ", "name" : "Twinkle of fox", "the introduction" : "programming industry bosses, cattle technology, people are particularly good, not understand can ask bosses", "url" : "https://blinkfox.github.io/", "title" : "To learn"}, {" avatar ":" http://image.luokangyuan.com/avatar.jpg ", "name" : "ja_rome", "the introduction" : "Ordinary steps can also be out of the great journey", "url" : "https://me.csdn.net/jlh912008548", "title" : "to learn"}]Copy the code

The new 404 – page

If you don’t already have a 404.md file in your blog’s source directory, you’ll need to create one

hexo new page 404
Copy the code

To edit your newly created page file /source/404/index.md, you need at least the following:

Title: 404 Date: 2018-09-30 17:25:30 Type: "404" Layout: "404" Description: "Oops ~ Can't find the page you want :("Copy the code

Menu navigation configuration

Set the name, path URL, and icon icon for the basic menu navigation.

1. The navigation name can be Chinese or English (for example, Index or home page) 2. The 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
Copy the code

Level 2 menu configuration method

If you need a secondary menu, you can do the following based on the original basic menu navigation

0. Add it under the level-1 menu to which the level-2 menu is to be addedchildrenKeywords (e.g.AboutAdd under menuchildren)
1. inchildrenCreate the name, path URL and icon icon of the secondary menu.
2. Note that each level 2 menu module is preceded by-.
3. 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-o
  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
Copy the code

Code highlighting

Prismjs syntax highlighting support is shipped with Hexo5.0, and this topic has been modified to support it.

If you have installed the hexo-Prism-plugin in your blog, you will need to run NPM uninstall hexo-prism-plugin to uninstall it, otherwise the generated code will have { And the & # 125; The escape character of.

Then change the value of highlight.enable in the _config.yml file in the root directory of Hexo to false 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: ''
Copy the code

The default PrismJS theme in the theme is Tomorrow Night, and if you want to customize your theme, you can go to the PrismJS download page and customize your favorite theme CSS file and call that THEME file Prism.css. Replace hexo – theme – matery source in the theme folder/libs/prism prism. The CSS file.

search

Hexo plugin hexo-generator-Search is also used in this topic to perform content search. The installation command is as follows:

npm install hexo-generator-search --save
Copy the code

In the _config.yml file in the root directory of Hexo, add the following configuration items:

search:
  path: search.xml
  field: post
Copy the code

Chinese link to Pinyin (recommended installation)

If your post name is in Chinese, Hexo will generate permalink in Chinese by default, which is not conducive to SEO, and Gitment reviews do not support Chinese links. We can use hexo-Permalink-Pinyin hexo to generate permanent links in Chinese pinyin when generating articles.

The installation command is as follows:

npm i hexo-permalink-pinyin --save
Copy the code

In the _config.yml file in the root directory of Hexo, add the following configuration items:

permalink_pinyin:
  enable: true
  separator: '-' # default: '-'
Copy the code

Note: In addition to this plug-in, the Hexo-Abbrlink plug-in can also generate non-Chinese links.

Article word count plug-in (recommended installation)

If you want to display the wordcount and length of the article, you can install hexo-wordcount.

The installation command is as follows:

npm i --save hexo-wordcount
Copy the code

Then simply activate the word count configuration for each article in the _config.yml file under this topic:

PostInfo: date: true update: false wordCount: false # set wordCount to true. TotalCount: false # set wordCount to true. False # readCount: false # readCountCopy the code

Add emoji support (optional)

This theme has added support for emoji, using hexo plugin hexo-filter-Github -emojis to support emoji generation, and the corresponding markdown emoji syntax (::, for example: To convert to a jumping emoji, run the following installation command:

npm install hexo-filter-github-emojis --save
Copy the code

In the _config.yml file in the root directory of Hexo, add the following configuration items:

githubEmojis:
  enable: true
  className: github-emoji
  inject: true
  styles:
  customEmojis:
Copy the code

Execute hexo Clean && Hexo G to regenerate the blog file and see your emoji syntax in the appropriate place in the post.

Add RSS subscription support (optional)

The hexo plugin for hexo-generator-feed is also used in this topic, and the installation command is as follows:

npm install hexo-generator-feed --save
Copy the code

In the _config.yml file in the root directory of Hexo, add the following configuration items:

feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date
Copy the code

Execute hexo Clean && Hexo G to regenerate the blog file and you will see the atom.xml file in the public folder to indicate that you have successfully installed it.

addDaoVoiceLive chat feature (optional)

Go to DaoVoice to register and get the app_id and fill it in the _config.yml file of the topic.

addTidioLive chat feature (optional)

Go to the Tidio website to register and get the Public Key, and fill the Public Key in the _config.yml file of the theme.

Modify the footer

Footer information may need to be customized, and it is not easy to make into configuration information, so you may need to modify and work on it yourself. The modification is in the /layout/_partial/footer.ejs file of the theme file, including sites, themes used, and visits.

Modifying social Links

The _config.yml file in the theme supports QQ, GitHub and email by default. You can add or modify social link addresses in the /layout/_partial/social-link.

<% if (theme.socialLink.github) { %> <a href="<%= theme.socialLink.github %>" class="tooltipped" target="_blank" Data-position ="top" data-delay="50"> < I class=" Fab FA-Github "></ I ></ a> <%} %>Copy the code

Of these, social ICONS (such as fa-github) can be found in Font Awesome. Here are some common social ICONS for your 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 Font Awesome version used in this topic is 5.11.0.

Modify the QR code picture of rewards

In the source/ Medias/Reward file of the theme file, you can replace it with your wechat and Alipay qr code pictures.

Configuring the Music Player (optional)

To support music playback, enable the music configuration in the theme’s _config.yml configuration file:

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 False # Whether to automatically play theme: '# 42B983 'loop: 'all' # Audio loop: 'all', 'one', 'none' Order: 'random' # audio loop order: 'random' 'list', 'random' preload: 'auto', optional values: 'none', 'metadata', 'auto' volume: 0.7 # Default volume, please note that the player will remember the user Settings, default volume becomes invalid when the user manually sets the volumeCopy the code

Server For Netease (netease Cloud Music), Tencent (QQ Music), Kugou (Kugou Music), Xiami (Xiami Music),

Baidu music.

Type Optional song, playlist, album, search, artist

Id obtaining method example: Open netease Cloud Music in the browser and click my favorite music playlist. A string of numbers (THE ID of Playlist) will appear in the browser address bar

That’s this string of numbers.

Article front-matter introduction

Front-matter options are explained in detail

Everything in the front-matter option is optional. But I still recommend at least filling in the title and date values.

Note:

0. ifimgIf the property is left blank, the feature map will be based on the title of the articlehashcode, and then select the corresponding feature pictures in the theme, so as to achieve the feature map of all articlesHave distinguishing feature each.
1. dateTry to ensure that each article is unique, as in this topicGitalk 和 GitmentidentifyidIs through thedateIs used as a unique identifier.
2. If you want to set the password authentication function for articles, not only should you set the password value with SHA256 encryption in front-matter, but also need to set the password value in the topic_config.ymlThe configuration is activated in. There are some SHA256 encrypted addresses online that you can use:Open source China online tool,chahuo,Webmaster tools.
3. You can specify reprintPolicy in front-matter of the article MD file to configure reprint rules for individual articles

The following is an example of front-matter for this article.

The simplest example

---
title: Typora-vue-theme Describes the theme
date: The 2018-09-07 09:25:00
---
Copy the code

With the sample

---
title: Typora-vue-theme Describes the theme
date: The 2018-09-07 09:25:00
author: Mr 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 your custom article summary content, if this property has a value, the article card summary will display this text, otherwise the application will automatically intercept part of the article as the summary
categories: Markdown
tags:
  - Typora
  - Markdown
---
Copy the code

Effect of screenshots

Custom modification

You can modify some customization information in _config.yml of this topic, including the following parts:

• The menu
• My dream
• Home page music player and video player configuration
• Whether to display the recommended article name and button configuration
• favicon 和 Logo
• Personal information
• The TOC directory
• Article tip information
• Append copyright information when copying article content
• MathJax
• Article word count, reading time
• Click the ‘love’ effect on the page
• My project
• My skills
• My photo album
• Gitalk,Gitment,Valine 和 disqusComment on the configuration
• No garlic statisticsAnd Google Analytics (Google Analytics)
• A collection of default feature diagrams. When the article does not have a feature map, the topic will be based on the article titlehashcodeValue mod to select the corresponding feature map to display

I think individual blogs should have their own style and characteristics. If you are not satisfied with many features and theme colors in this theme, you can customize them in the theme. Many more free features and details are difficult to modify in _config.yml theme, need to modify the source code to complete. Here’s a list of things you might find useful:

Change the theme color

In the /source/ CSS /matery.css file of the theme file, search.bg-color to change the background color:

*/.bg-color {background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%); } @webkit-keyframes rainbow {/* Dynamically change the background color. */ * dynamically change the background color.Copy the code

Modify the banner and article feature images

You can change your favorite banner images directly in the /source/medias/banner folder. In the theme code, you can dynamically change one banner image per day. Only 7 banners are needed. If you know JavaScript code, you can modify it to your own preferred switching logic, such as: /layout/_partial/bg-cover-content.ejs

$('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)');
Copy the code

In/source/medias/featureimages folder by default with 24 features pictures, you can increase or decrease, and need in _config. Synchronous yml be amended.

Version change record

See the CHANGELOG. The md