或许是 Hexo 最酷的 Material Design 主题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 2920 天前的主题，其中的信息可能已经有所发展或是发生改变。

Why?

这个主题最初是为 typecho 而开发的 typecho-theme-material。后来觉得 hexo 用起来更 geek ，便移植到 hexo 。因为 hexo 开发有极大的自由度，这个主题也变得更加完善。

内置三种主题样式，三种 Markdown 样式（仍在逐渐增加）；无论是背景，各种组件颜色还是图标都可以轻松自定义；集成多种独立页面和第三方服务。

从 极简风 到 多图流，都能完美驾驭。

因未能提供全部样式的实时预览， Demo 使用的是 Paradox 样式。

快速体验

开始定制独一无二的主题：

git clone https://github.com/viosey/hexo-theme-material.git

或

npm install hexo-material

渲染：

第 1 条附言 · 2016-11-12 15:04:11 +08:00

关于 FAB 的争议较多，于是更新了 1.0.1 版本，更改如下：

可对 FAB 进行开关
可自定义 FAB 按钮图案，参考 Material icons
关闭 FAB 点击旋转效果

第 2 条附言 · 2016-11-12 17:34:28 +08:00

新增 Isolation 样式实时预览

同时求个友情链接，这是我的博客

第 3 条附言 · 2016-11-13 17:51:32 +08:00

加一张 Paradox 样式的黄金比例图

样式

95 条回复 • 2017-01-07 21:14:48 +08:00

huangjxh

2016-11-12 07:33:43 +08:00

手机状态下，文章预览图缩放有点问题。

phoenixlzx

2016-11-12 09:02:49 +08:00

挺好的，加油

xinpure

2016-11-12 09:08:40 +08:00 via iPhone

赞一个

Famio

2016-11-12 09:13:00 +08:00

赞，支持一下

k9982874

2016-11-12 09:18:09 +08:00 via iPad

已收感谢楼主

muziki

2016-11-12 09:19:13 +08:00 via iPhone

好漂亮⊙▽⊙

wellsc

2016-11-12 09:56:14 +08:00 via Android

貌似用了 material lie

itfanr

2016-11-12 10:01:14 +08:00 via Android

很漂亮

iCyMind

2016-11-12 10:13:04 +08:00 via Android

很漂亮，赞一个。但是那个浮着急的加号让人有点困惑

Return2legacy

2016-11-12 10:18:28 +08:00 via Android

加号换成其它图标会好点，最简单的就是三个点，或者三横线。绘个定制的也不错。

ivmm

2016-11-12 10:20:51 +08:00

HEXO 终于有新的好看皮了，终于不用再看 NEXT 了

kmahyyg

2016-11-12 10:30:01 +08:00 via Android

字体换下……略难看……
可以试试 ustc 的 googlefonts 反带

mianju

2016-11-12 10:42:30 +08:00

代码高亮再弄好看点就好了> <

viosey

2016-11-12 11:00:47 +08:00 via Android

@iCyMind
@Return2legacy
那个是参考的 material design 的 fab 设计，用于页面的滚动和翻页。
比如知乎的安卓客户端也使用了这个设计 : )

viosey

2016-11-12 11:03:49 +08:00 via Android

@kmahyyg
字体默认使用的是 Google 标准的 Roboto 字体，不过主题的字体也是可以自定义的哦。

可以手动添加字体源或是 font-face 调用喜欢的字体

viosey

2016-11-12 11:05:10 +08:00 via Android

@mianju 嗯嗯，这个功能在 to do 之中

83f420984

2016-11-12 11:05:46 +08:00

Safari 下，这个主题用双指前进后退无效是什么情况？

cxyfreedom

2016-11-12 11:06:41 +08:00

上次回复希望 LZ 在 hexo 加上这个主题，现在终于完成了，辛苦了

viosey

2016-11-12 11:07:48 +08:00 via Android

@cxyfreedom
:D 抱歉跳票了这么久~

iCyMind

2016-11-12 11:09:43 +08:00

@viosey 加号第一感觉是"新建文章"或者"新建评论"的功能, 因为大部分 app 中都是这样, 包括知乎.
当然, 纯粹个人观点

viosey

2016-11-12 11:19:33 +08:00 via Android

@iCyMind 噢噢，那有什么比较好的建议吗？

lany

2016-11-12 11:29:51 +08:00

@viosey 收下了

korvin

2016-11-12 11:32:27 +08:00

start 一个，又一个好看的主题

will0404

2016-11-12 11:39:00 +08:00 via iPhone

漂亮虽然还是喜欢更简洁一点的

1OF7G

2016-11-12 11:52:48 +08:00

触控板双指滑动页面难受的不行，因为自带的平滑滚动导致的

akring

2016-11-12 11:53:45 +08:00

好顶赞，资瓷一个

Cabana

2016-11-12 12:59:45 +08:00 via Android

哈哈，帮顶一个，在 typecho 上用过，还记得提过一个 sqlite 的 issue

viosey

2016-11-12 13:17:21 +08:00

@1OF7G 该功能是可选的，也可以关闭。

viosey

2016-11-12 13:18:17 +08:00

@will0404 主题内置有一个分支样式更加的简洁

journey

2016-11-12 13:28:31 +08:00

很漂亮，赞一个

kmahyyg

2016-11-12 13:38:18 +08:00 via Android

那个+号的悬浮好反人类，建议弄成新建或者把+换成滚动之类的图标……

本来说今天试试的，但是强迫症，不换图标不试了……

iFlicker

2016-11-12 13:57:43 +08:00

已经 star
启用以后包括在保存设置的时候
提示 500 Database Query Error
怎么回事 0.0

designer

2016-11-12 13:59:52 +08:00 via iPhone

很棒的主题！

taozle

2016-11-12 14:05:31 +08:00

哇，终于等到了！

kaedea

2016-11-12 14:08:04 +08:00

很不错的主题，如果能加上 TOC 就完美了。

cielpy

2016-11-12 14:12:55 +08:00

已经用上，无脑抛链接： https://imciel.com/

提了两个 issue ： https://github.com/viosey/hexo-theme-material/issues

ansheng

2016-11-12 14:14:01 +08:00

果断用了，这么好的主题。

inoris

2016-11-12 14:20:43 +08:00

@viosey FAB 用于最主要的操作，如果是一个创作内容的环境（比如博客后台），放一个带加号的 FAB 很合适；然而博客前台的主要操作是点进一篇文章查看，因此不需要 FAB 。

viosey

2016-11-12 14:46:28 +08:00

@inoris 那么对于页面的滚动和翻译是否有比较好的建议，因为「至顶」「至底」还是比较有必要的吧？

viosey

2016-11-12 14:46:44 +08:00

@kaedea 已加入 To Do

bidu

2016-11-12 14:49:48 +08:00

很棒啊支持一下

scnace

2016-11-12 15:00:56 +08:00 via Android

hexo 党强势 mark

viosey

2016-11-12 15:05:21 +08:00

@kmahyyg
@inoris

针对 FAB 的问题，马上更新了 1.0.1 版本，更改如下：
- 可对 FAB 进行开关
- 可自定义 FAB 按钮图案，参考 Material icons
- 关闭 FAB 点击旋转效果

inoris

2016-11-12 15:16:29 +08:00

@viosey 我个人是用键盘快捷键， Material Design Guidelines 里也没有类似的场景，所以只能由你发挥了。

MDL 的模板里的做法是在 footer 里放一个 back to top ，你可以参考一下： https://getmdl.io/templates/android-dot-com/index.html

AlwaysBee

2016-11-12 15:28:48 +08:00

不错呀

auhah

2016-11-12 15:57:51 +08:00

赞！真的很棒

已 star

40huo

2016-11-12 16:05:53 +08:00

赞，超级棒！

Dvel

2016-11-12 16:16:11 +08:00

厉害了我的哥！激起了我弄博客的欲望

timothyye

2016-11-12 16:26:09 +08:00

不错，支持一个

zhangneww

2016-11-12 16:54:50 +08:00

支持一下，很好看

poorcai

2016-11-12 17:00:29 +08:00 via Android

很漂亮，有木有 wp 同款主题啊😃

viosey

2016-11-12 17:13:59 +08:00

@poorcai Sorry~ 目前只有 hexo 和 typecho 呢

yangpai

2016-11-12 17:56:56 +08:00

air 下感觉下拉反应有点缓慢，跟随不是很及时的赶脚^o^ 那个 demo

viosey

2016-11-12 19:08:58 +08:00 via Android

@yangpai 因为用了平滑滚动的 js 效果，这个效果是可以开关的，用鼠标体验会不错

yangpai

2016-11-12 19:39:53 +08:00

@viosey air 下还是没有这个效果，体验更好，跟手^o^

yangpai

2016-11-12 19:40:30 +08:00

@viosey 而且这个特效感觉有点颤抖^ _ ^

MinonHeart

2016-11-12 20:15:56 +08:00 via iPhone

这个图是怎么做的？

rootliang

2016-11-12 20:18:27 +08:00 via iPhone

厦门大触

HiJony

2016-11-12 20:51:28 +08:00

标题违反广告法了。。

viosey

2016-11-12 20:54:32 +08:00

@MinonHeart 用 ps 搞的

viosey

2016-11-12 21:23:38 +08:00

@HiJony 😂 不要在意这些细节

CloudnuY

2016-11-12 22:23:20 +08:00

自带的平滑滚动把触控板双指返回给捕捉了，无法使用系统级的双指返回……

viosey

2016-11-12 22:26:23 +08:00

@83f420984

62 楼解释：
>自带的平滑滚动把触控板双指返回给捕捉了，无法使用系统级的双指返回……

@CloudnuY
开启平滑滚动效果确实是一个较难平衡的东西

meunicorn

2016-11-12 22:38:22 +08:00

cool ！！！

tuimaochang

2016-11-12 23:42:59 +08:00

好人一生平安！

kaedea

2016-11-13 02:01:30 +08:00

https://blog.viosey.com/gallery/
可否随着分享相册模板~

viosey

2016-11-13 02:18:18 +08:00

@kaedea 都是开源的

ifoolish

2016-11-13 09:02:19 +08:00 via iPhone

好看。好想 Python 的 Pelican 也有一个😂

basefas

2016-11-13 09:44:18 +08:00 via iPhone

首先要肯定，楼主做的蛮不错的，但是你这根本不是 MD ，如果想做 MD 风格的建议去把文档再好好看看

viosey

2016-11-13 12:24:46 +08:00

@basefas 还有一个纯粹的 MD 的分支样式正在开发中

viosey

2016-11-13 12:29:15 +08:00

@basefas
你可以看一下分支主题样式的命名就懂了：
- Nexus （联系，关系）
- Paradox （矛盾）
- Isolation （隔离，孤立）

完全 MD 化不就是那个样子嘛（滑稽
在 Android 开发上才要求更高的标准，至于 Web ，自由发挥一下不好吗

BTW ， Paradox 的样式也是由官方 MD 模板改进而来的。

basefas

2016-11-13 12:48:08 +08:00 via iPhone

@viosey 我理解的 MD 首先强调的是一切操作的过渡自然，是为用户考虑的，而不是强行加一些动画和特效。同时也对你的行动表示肯定，期待做的越来越好。

viosey

2016-11-13 13:00:12 +08:00

@basefas
十分谢谢你的指点~
主题所有的特效已加开关功能。

harvest

2016-11-13 13:23:18 +08:00

进入这里的第一个收藏送你了。

viosey

2016-11-13 14:41:48 +08:00

@harvest thx~

mauve

2016-11-13 17:17:12 +08:00

主页顶部的头像图片与右边的 Viosey's Blog 有点不对劲，没有达到信息瞬间接收率最大化，我觉得可以稍微往山移一下，或者是做成扁一点的，第一次进博客看到这个有点不知所云

viosey

2016-11-13 17:53:23 +08:00

@mauve 谢谢你的建议，顶部的两个模块我会进行调整，包括移动端。

Showfom

2016-11-13 18:15:27 +08:00

这主题不错，支持下

sobigfish

2016-11-13 18:24:32 +08:00

确实 cool 但 gpl 的纯支持了-。-

sobigfish

2016-11-13 18:41:25 +08:00

lz, 你协议里写的 AGPL
README 里写的 GPL

viosey

2016-11-13 20:37:22 +08:00

@sobigfish 啊哦_(:з」∠)_，谢谢提醒。
Github 初始化的时候协议没弄好，现在已更改。

ilotuo

2016-11-13 20:51:25 +08:00

个人网站那个背景太帅了!
但是完没两下温度飙到 90 度..

loser

2016-11-14 15:58:13 +08:00

可以可以，准备用上，谢谢分享！

kaedea

2016-11-15 14:49:23 +08:00

@viosey
申请友链
http://kaedea.com/link/

viosey

2016-11-16 01:08:16 +08:00

@kaedea 请问网站名、头像和一句话介绍是什么呢？

kaedea

2016-11-16 09:51:06 +08:00

@viosey
http://kaedea.com/ 中二病也要开发 Android
2333333

wubotao

2016-11-16 10:35:20 +08:00

不错不错~

viosey

2016-11-16 13:19:19 +08:00

@kaedea 有点长诶，感觉

kaedea

2016-11-16 18:20:06 +08:00

@viosey 去掉 233333
2333333

viosey

2016-11-16 20:23:35 +08:00

"中二病也要开发 Android" 长度还是溢出了 _(:з」∠)_

cdell

2016-11-18 16:25:16 +08:00

很棒～

thomas070

2016-11-21 16:14:50 +08:00

很棒的主题，支持楼主一发

cenxun

2016-11-23 11:06:04 +08:00

cool

alihanniba

2016-11-23 20:58:14 +08:00

赞,请问有 sketch 原型吗?

zhaoy875

2017-01-07 21:14:48 +08:00

hexo 群友路过留爪

或许是 Hexo 最酷的 Material Design 主题

Why?

More:

介绍及文档：

Github:

Demo:

快速体验

渲染：