Hexo Theme Matery：Material Design 响应式博客主题

Hexo Theme Matery 是一款基于 Material Design 设计语言和响应式布局打造的 Hexo 博客主题，拥有丰富的功能和精美的视觉呈现效果。该项目在 GitHub 上已获得超过 5,300 个 Star，是 Hexo 生态中最受欢迎的中文主题之一。

主题简介

hexo-theme-matery 是由 blinkfox 开发的一款全面的 Hexo 博客主题，采用 Material Design 设计语言和响应式设计。主题代码使用 JavaScript（89.5%）、CSS（5.9%）和 EJS（4.6%）编写，采用 Apache-2.0 许可证，拥有超过 61 位贡献者。

核心特性

视觉设计

Material Design 设计语言，简洁美观
完整的响应式布局，适配桌面、平板和手机
首页轮播文章和每日动态切换的 banner 图片
文章列表采用瀑布流布局
归档页面采用时间线展示

功能丰富

标签页词云展示和分类页雷达图展示
丰富的"关于"页面（个人信息、文章统计、项目展示、技能展示、图库等）
友情链接页面，数据可自定义
支持文章置顶和打赏功能
支持 MathJax 数学公式渲染
目录（TOC）自动生成
复制文章内容时可自动附加版权信息
支持文章密码验证阅读

评论系统集成

Gitalk（推荐）
Gitment
Valine
Disqus

其他集成

Busuanzi 统计和 Google Analytics
首页音乐播放和视频播放
Emoji 表情支持，使用 Markdown emoji 语法直接生成
DaoVoice 和 Tidio 在线客服
RSS 订阅支持

安装与配置

基础安装

将主题克隆到 Hexo 项目的 themes 目录：

bash

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

修改 Hexo 根目录的 _config.yml 中的 theme 值：

yaml

theme: hexo-theme-matery

创建必要页面

bash

hexo new page "categories"
hexo new page "tags"
hexo new page "about"
hexo new page "contact"
hexo new page "friends"

每个页面的 Front-matter 中需要设置对应的 type 和 layout。

代码高亮配置

推荐使用 Hexo 5.0.0+ 自带的 prismjs 支持：

yaml

highlight:
  enable: false
prismjs:
  enable: true
  line_number: true

自定义配置

主题颜色

在 /source/css/matery.css 中搜索 .bg-color 修改背景渐变色：

css

.bg-color {
    background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%);
}

音乐播放器

在主题 _config.yml 中配置音乐播放器，支持网易云音乐、QQ音乐、酷狗音乐等平台：

yaml

music:
  enable: true
  server: netease
  type: playlist
  id: 503838841
  autoplay: false

文章 Front-matter

yaml

---
title: 文章标题
date: 2018-09-07 09:25:00
author: 作者名
img: /images/xxx.jpg
top: true
cover: true
password: (SHA256 加密的密码)
toc: true
mathjax: false
summary: 自定义摘要内容
categories: 分类名
tags:
  - 标签1
  - 标签2
---

字节笔记本

Hexo Theme Matery：Material Design 响应式博客主题

主题简介

核心特性

视觉设计

功能丰富

评论系统集成

其他集成

安装与配置

基础安装

创建必要页面

代码高亮配置

推荐插件

自定义配置

主题颜色

音乐播放器

文章 Front-matter

相关链接