Skip to content
JavaScript CSS HTML
Branch: master
Clone or download
Pull request Compare This branch is 11 commits behind xaoxuu:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Material X

A minimalist card-style Hexo blog theme.

Completely free modular and easy to customize design

  • You can freely decide whether each page requires a cover, whether a cover requires a background image, how many images, whether a carousel is required, and how fast it is.
  • Freely decide whether each page needs sidebar, what cards are displayed in sidebar widgets, and in what order.
  • You can freely determine the main structure of each page (default articles + comments), and add cards as needed (share the card library with sidebar widgets).
  • You can freely decide whether the meta tag (date, update date, category, tag, share, reading statistics, sticky) of each article is displayed, whether it is placed at the beginning or the end of the article. Titles, thumbnails, small icons (for archiving pages), and page-specific music players are also counted as meta tags, but their positions are fixed.
  • Most buttons can be set as icons, text, target, nofollow, etc.
  • Easily change visual effects such as theme colors, custom fonts, margins, rounded corners, shadows, etc., and quickly implement dark theme.

Easy to extend

  • Use the import field to easily import css and js into the theme.

Mobile optimization

  • A lot of optimization for mobile layout.

Support for more features

  • Supports 4 comment systems: Disqus, Gitalk, La BiLi and Valin comments.
  • Provide themed CDN, or customize CDN.
  • Use card design elements and interactive animations.
  • Use fontawesome 5.6.3 free icon.
  • Support APlayer player, can play the music of Netease cloud, QQ music, shrimp, cool dog platform and other servers.
  • Support non-garlic reading statistics, Baidu analysis, Google analysis.
  • Support rendering MathJax mathematical formula, optimized rendering effect.

Blog Example

Blog Source Code Instructions
@mxclub The default effect of the master branch
@xaoxuu Not open source yet myblog branch effect

Download and install

A. Full automatic installation using scripts (currently only macOS is supported)

  1. Open a terminal and enter the following command to install the script, see # for the script document.
curl -s | sh -s
  1. After successful installation, open a terminal on your blog path and enter the following command to install the theme and dependencies. i x

B. Manual installation

  1. Download theme to themes / folder
git clone themes / material-x
  1. Then install the necessary dependencies
npm i -S hexo-generator-search hexo-generator-json-content hexo-renderer-less


Material X



  • 可以自由决定每个页面是否需要封面、封面是否需要背景图片、多少图片、是否需要轮播、速度如何。
  • 可以自由决定每个页面是否需要侧边栏、侧边栏小部件显示什么卡片、顺序如何。
  • 可以自由决定每个页面的主体结构(默认文章+评论),可以按需增加卡片(与侧边栏小部件共用卡片库)。
  • 可以自由决定每篇文章的meta标签(日期、更新日期、分类、标签、分享、阅读统计、置顶)显示与否、放置在文章开头还是末尾。标题、缩略图、小图标(用于归档页面)、页面专属的音乐播放器也算做meta标签,但是它们的位置固定。
  • 大部分按钮可以自由设置图标、文字、target、nofollow等
  • 方便更换主题色、自定义字体、边距、圆角、阴影等视觉效果,快速实现暗色主题。


  • 使用 import 字段方便导入css和js到主题中。


  • 针对移动端布局进行了大量优化。


  • 支持4种评论系统:Disqus、Gitalk、来必力和Valine评论。
  • 提供主题CDN,也可自定义CDN。
  • 使用卡片设计元素以及交互动效。
  • 使用 fontawesome 5.6.3 免费版图标。
  • 支持APlayer播放器,可以播放网易云、QQ音乐、虾米、酷狗平台以及其它服务器的音乐。
  • 支持不蒜子阅读统计、百度分析、Google分析。
  • 支持渲染MathJax数学公式,优化了渲染效果。


博客 源码 说明
@mxclub master分支默认效果
@xaoxuu 暂未开源 myblog分支效果


A. 使用脚本全自动安装(目前仅支持macOS)

  1. 打开终端输入下面命令安装脚本,脚本文档见
curl -s | sh -s
  1. 安装成功后,在你的博客路径打开终端,输入下面命令即可安装主题和依赖包。 i x

B. 手动安装

  1. 下载主题到 themes/ 文件夹
git clone themes/material-x
  1. 然后安装必要的依赖包
npm i -S hexo-generator-search hexo-generator-json-content hexo-renderer-less


You can’t perform that action at this time.