开始使用





Material X

一个简约的卡片式Hexo博客主题







GitHub releaseGitHub releaseGitHub release

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

易于扩展
- 使用 import 字段方便导入css和js到主题中。

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

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




图片有点大,如果看不到图片请刷新一下网页~
图片有点大,如果看不到图片请刷新一下网页~
图片有点大,如果看不到图片请刷新一下网页~
图片有点大,如果看不到图片请刷新一下网页~
图片有点大,如果看不到图片请刷新一下网页~

注意

1.2.0版本发生了较大的改动,请刷新文档并参考更新日志示例博客源码进行更新。

示例博客

官方博客

博客示例(源码):https://mxclub.github.io
master分支默认的效果,用于测试效果。

博客示例:https://xaoxuu.com
myblog分支默认的效果,我自己的博客。

博客示例(源码):https://appx.online
这是个自助收录软件的平台,你可以以自己的名义发布自己的作品。

特别示例

博客链接说明
小吴博客https://www.wushile.top/基于MaterialX开发了MaterialPlus主题
搅拌糖https://blog.treelo.xin/自定义背景、鼠标点击动画、看板娘
YuGao’s Bloghttps://sxyugao.top/实现了ajax
YangWChttps://yangwc.com/暗色主题
LiYanan2004https://liyanan2004.github.io可切换主题
codercchttps://www.codercc.com/导航栏二级菜单、左图右文的文章列表、轮播图

更多博客

博客链接
MicDZ’s bloghttps://www.micdz.cn
MainGuohttps://blog.mainguo.top
Mark’s bloghttps://mark-thinkpad.gitee.io/
gltjkhttps://blog.gltjk.com
BFDZhttps://www.bfdz.ink
Amblizer’s Mainframehttps://amblizer.xyz
Digcorehttps://www.digcore.cn/
Sparky_14145’s bloghttps://www.sparky-14145.com
Shan Sanhttps://shansan.top/
贾程序员https://mofiter.com/
Loser007http://www.loser007.com/
Tony Ren’s bloghttps://tonyrenhk.github.io/
yangtao’s bloghttps://istaotao.com
ZYMINhttps://zymin.cn/
Alicehttps://zhengjiameng.github.io/
小肥羊https://lucksheep.github.io/bgzy/
香蕉博客https://tohot.top/
萌焰博客https://yanhuang0815.github.io
TRHX’S BLOGhttps://itrhx.com/
zerbo’s bloghttps://blog.zerbo.cn/
Michael Vectorhttps://michaelvector.github.io/
weijiajin’s bloghttps://weijiajin.com
lightsmile’s Bloghttp://www.iamlightsmile.com/
预见未来https://lijunkui.netlify.com/
余城https://sherwinww.github.io/
红发https://hgneer.github.io/
main’s bloghttps://www.intmian.com/
P_Wang’s Bloghttps://tle666.github.io/
codelearn.clubhttps://codelearn.club/
wxwoo’s bloghttps://wxwoo.top
Wiyeeluhttps://wiyeelu.github.io
CRainyDayhttps://crainyday.gitee.io/blog/
TRHXhttps://itrhx.com/
Wuyongzhihttps://wuyongzhi.top
igeekfanhttp://blog.igeekfan.cn/
FutureApplehttps://www.pghk.tk/
泠泫凝https://arlxn.xyz
xyhthinkhttps://www.xyhthink.com/
孤独与诗https://createdestruction.github.io/
WuYongzhi·Bloghttps://wuyongzhi.top/
Melody Playerhttp://melodyplay.cn/
Root’s Bloghttps://tangyanqiong.com/
一起2一起3https://www.172173.com

如果你使用了 Material X 主题,欢迎在下方留言告诉大家,我会抽时间归纳到这里~

由于人数较多,有时候我通过死链检测工具检测到有链接无法访问了,会直接从列表中删除。如果你的链接恢复正常了,可以留言告诉我,我从git记录里恢复一下。

下载安装

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

如果你使用 hexo.sh 脚本管理和发布博客,在你的博客路径打开终端,输入 hexo.sh i x 即可安装主题。

如果你没有使用过hexo.sh脚本

打开终端输入下面命令即可安装脚本,文档见#hexo.sh

1
curl -s https://xaoxuu.com/install | sh -s hexo.sh


B. 手动安装

1. 下载主题到 themes/ 文件夹

1
git clone https://github.com/xaoxuu/hexo-theme-material-x themes/material-x

2. 然后安装必要的依赖包

1
npm i -S hexo-generator-search hexo-generator-json-content hexo-renderer-less

3. 在博客配置文件中将主题修改为MaterialX

在博客根目录的配置文件中:

1
themes: material-x

下载文档

如果你经常需要看文档,可以下载app体验更好,目前仅支持macOS:

Material X for Mac

许可协议

本主题采用MIT开源许可协议,永久无限制免费使用。

MIT开源许可协议
被授权人有权利使用、复制、修改、合并、出版发行、散布、再授权及贩售软件及软件的副本。
被授权人可根据程式的需要修改授权条款为适当的内容。
在软件和软件的所有副本中都必须包含版权声明和许可声明。

鸣谢

感谢各位网友提供的反馈、建议与大力支持,有了大家的帮助,主题就会做的越来越好~

直接提交源码的网友

提供了宝贵意见和技术支持的网友

还要感谢那些在评论中互相帮助的网友~
如果你又一个好点子或者解决了我这里没有解决的问题,欢迎去GitHub贡献一下代码👏。

收录方

感谢以下网站的收录与分享,让本主题能够被更多人发现,主题就会做的越来越好~

教程和技术分享文章

这些是我不定期从主流搜索引擎搜索到的与MaterialX相关的博文:

作者文章
我自己《Material X 一个简约的卡片式Hexo博客主题》
MicDZ《在material-x上使用KaTeX》
ZYMIN《hexo+ejs+material x 添加CNZZ统计代码》
TRHX《Hexo博客主题个性化》
wxwoo《hexo中的mathjax数学公式渲染优化》
LiYanan2004《如何在 material-x 上适配深色模式》
WuYongzhi·Blog《Hexo主题MaterialX添加Pjax》

感谢你们的参与和分享!

还有更多参与转载和分享的网友:

乐在分享

把主题分享到SegmenuFault、简书、知乎等平台可以快速增加MaterialX主题被发现和使用的几率,所以如果你喜欢本主题,欢迎写原创文章或者转载分享哦。 文 体 不 限 !

TODO

近期活动和计划

pjax

寻找完美兼容pjax的解决办法。目前兼容性有点问题。主要存在的问题是:切换了页面后侧边栏的目录不会更新、评论系统不会更新。

投票

寻找一个可以嵌入文章中的无后端投票插件(或者使用leancloud作为后端)。

点赞、评分

寻找对文章点赞、评分的无后端插件(或者使用leancloud作为后端)。

下一个大版本更新计划

计划2.0弃用less改用stylus,拥有适合多种作为网站主页的布局供选择,增加关于我、音乐博客、影评博客、收藏夹等布局模板。优化文章列表,增加文章封面。





近期事件

2019年8月更新


恢复更新时间

近期比较忙,大概今年冬季(10月以后)会开始继续更新。有些评论未及时回复请见谅。


新发布了一个简历主题

另外安利一下近期基于vue官网主题(也就是这个wiki所使用的主题)修改和大幅简化的一个简历主题: hexo-theme-resume,适用于制作在线简历。


心率测量工具限免活动

近期开发并上架了新版心率管家App(仅iOS端),8月15日-8月19日限免,欢迎下载体验。

打开 App Store








如果您看到的时候已经过了限免期,可以先下载免费版使用。专业版的价格是在1元到68元之间浮动变化的(为了吸引app推荐类网站的爬虫进行推荐),近期会偶尔限免(根据以往经验,限免期间差评率会飙升,所以App有了一定的下载量之后专业版就不会再限免了)。




评论

有疑问请前往本项目的【Issue】页面搜索问题,如果没有相关问题,点击【New issue】进行提问。