V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
viosey
V2EX  ›  分享创造

或许是 Hexo 最酷的 Material Design 主题

  viosey · 2016-11-12 04:46:51 +08:00 · 13223 次点击
这是一个创建于 2938 天前的主题,其中的信息可能已经有所发展或是发生改变。

Why?

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

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

极简风多图流,都能完美驾驭。

More:

介绍及文档:

Material Theme

Github:

hexo-theme-material

Demo:

Paradox 样式

因未能提供全部样式的实时预览, 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 样式的黄金比例图

Paradox Golden Ratio

95 条回复    2017-01-07 21:14:48 +08:00
huangjxh
    1
huangjxh  
   2016-11-12 07:33:43 +08:00
手机状态下,文章预览图缩放有点问题。
phoenixlzx
    2
phoenixlzx  
   2016-11-12 09:02:49 +08:00
挺好的,加油
xinpure
    3
xinpure  
   2016-11-12 09:08:40 +08:00 via iPhone
赞一个
Famio
    4
Famio  
   2016-11-12 09:13:00 +08:00
赞,支持一下
k9982874
    5
k9982874  
   2016-11-12 09:18:09 +08:00 via iPad
已收 感谢楼主
muziki
    6
muziki  
   2016-11-12 09:19:13 +08:00 via iPhone
好漂亮⊙▽⊙
wellsc
    7
wellsc  
   2016-11-12 09:56:14 +08:00 via Android
貌似用了 material lie
itfanr
    8
itfanr  
   2016-11-12 10:01:14 +08:00 via Android
很漂亮
iCyMind
    9
iCyMind  
   2016-11-12 10:13:04 +08:00 via Android
很漂亮,赞一个。但是那个浮着急的加号让人有点困惑
Return2legacy
    10
Return2legacy  
   2016-11-12 10:18:28 +08:00 via Android
加号换成其它图标会好点,最简单的就是三个点,或者三横线。绘个定制的也不错。
ivmm
    11
ivmm  
   2016-11-12 10:20:51 +08:00
HEXO 终于有新的好看皮了, 终于不用再看 NEXT 了
kmahyyg
    12
kmahyyg  
   2016-11-12 10:30:01 +08:00 via Android
字体换下……略难看……
可以试试 ustc 的 googlefonts 反带
mianju
    13
mianju  
   2016-11-12 10:42:30 +08:00
代码高亮再弄好看点就好了> <
viosey
    14
viosey  
OP
   2016-11-12 11:00:47 +08:00 via Android
@iCyMind
@Return2legacy
那个是参考的 material design 的 fab 设计,用于页面的滚动和翻页。
比如知乎的安卓客户端也使用了这个设计 : )
viosey
    15
viosey  
OP
   2016-11-12 11:03:49 +08:00 via Android
@kmahyyg
字体默认使用的是 Google 标准的 Roboto 字体,不过主题的字体也是可以自定义的哦。

可以手动添加字体源或是 font-face 调用喜欢的字体
viosey
    16
viosey  
OP
   2016-11-12 11:05:10 +08:00 via Android
@mianju 嗯嗯,这个功能在 to do 之中
83f420984
    17
83f420984  
   2016-11-12 11:05:46 +08:00
Safari 下,这个主题用双指前进后退无效是什么情况?
cxyfreedom
    18
cxyfreedom  
   2016-11-12 11:06:41 +08:00
上次回复希望 LZ 在 hexo 加上这个主题,现在终于完成了,辛苦了
viosey
    19
viosey  
OP
   2016-11-12 11:07:48 +08:00 via Android
@cxyfreedom
:D 抱歉跳票了这么久~
iCyMind
    20
iCyMind  
   2016-11-12 11:09:43 +08:00
@viosey 加号第一感觉是"新建文章"或者"新建评论"的功能, 因为大部分 app 中都是这样, 包括知乎.
当然, 纯粹个人观点
viosey
    21
viosey  
OP
   2016-11-12 11:19:33 +08:00 via Android
@iCyMind 噢噢,那有什么比较好的建议吗?
lany
    22
lany  
   2016-11-12 11:29:51 +08:00
@viosey 收下了
korvin
    23
korvin  
   2016-11-12 11:32:27 +08:00
start 一个,又一个好看的主题
will0404
    24
will0404  
   2016-11-12 11:39:00 +08:00 via iPhone
漂亮 虽然还是喜欢更简洁一点的
1OF7G
    25
1OF7G  
   2016-11-12 11:52:48 +08:00
触控板双指滑动页面难受的不行,因为自带的平滑滚动导致的
akring
    26
akring  
   2016-11-12 11:53:45 +08:00
好顶赞,资瓷一个
Cabana
    27
Cabana  
   2016-11-12 12:59:45 +08:00 via Android
哈哈,帮顶一个,在 typecho 上用过,还记得提过一个 sqlite 的 issue
viosey
    28
viosey  
OP
   2016-11-12 13:17:21 +08:00
@1OF7G 该功能是可选的,也可以关闭。
viosey
    29
viosey  
OP
   2016-11-12 13:18:17 +08:00
@will0404 主题内置有一个分支样式更加的简洁
journey
    30
journey  
   2016-11-12 13:28:31 +08:00
很漂亮,赞一个
kmahyyg
    31
kmahyyg  
   2016-11-12 13:38:18 +08:00 via Android
那个+号的悬浮好反人类,建议弄成新建或者把+换成滚动之类的图标……

本来说今天试试的,但是强迫症,不换图标不试了……
iFlicker
    32
iFlicker  
   2016-11-12 13:57:43 +08:00
已经 star
启用以后 包括在保存设置的时候
提示 500 Database Query Error
怎么回事 0.0
designer
    33
designer  
   2016-11-12 13:59:52 +08:00 via iPhone
很棒的主题!
taozle
    34
taozle  
   2016-11-12 14:05:31 +08:00
哇,终于等到了!
kaedea
    35
kaedea  
   2016-11-12 14:08:04 +08:00
很不错的主题,如果能加上 TOC 就完美了。
cielpy
    36
cielpy  
   2016-11-12 14:12:55 +08:00
已经用上,无脑抛链接: https://imciel.com/

提了两个 issue : https://github.com/viosey/hexo-theme-material/issues
ansheng
    37
ansheng  
   2016-11-12 14:14:01 +08:00
果断用了,这么好的主题。
inoris
    38
inoris  
   2016-11-12 14:20:43 +08:00
@viosey FAB 用于最主要的操作,如果是一个创作内容的环境(比如博客后台),放一个带加号的 FAB 很合适;然而博客前台的主要操作是点进一篇文章查看,因此不需要 FAB 。
viosey
    39
viosey  
OP
   2016-11-12 14:46:28 +08:00
@inoris 那么对于页面的滚动和翻译是否有比较好的建议,因为「至顶」「至底」还是比较有必要的吧?
viosey
    40
viosey  
OP
   2016-11-12 14:46:44 +08:00
@kaedea 已加入 To Do
bidu
    41
bidu  
   2016-11-12 14:49:48 +08:00
很棒啊 支持一下
scnace
    42
scnace  
   2016-11-12 15:00:56 +08:00 via Android
hexo 党强势 mark
viosey
    43
viosey  
OP
   2016-11-12 15:05:21 +08:00
@kmahyyg
@inoris

针对 FAB 的问题,马上更新了 1.0.1 版本,更改如下:
- 可对 FAB 进行开关
- 可自定义 FAB 按钮图案,参考 Material icons
- 关闭 FAB 点击旋转效果
inoris
    44
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
    45
AlwaysBee  
   2016-11-12 15:28:48 +08:00
不错呀
auhah
    46
auhah  
   2016-11-12 15:57:51 +08:00
赞!真的很棒

已 star
40huo
    47
40huo  
   2016-11-12 16:05:53 +08:00
赞,超级棒!
Dvel
    48
Dvel  
   2016-11-12 16:16:11 +08:00
厉害了我的哥! 激起了我弄博客的欲望
timothyye
    49
timothyye  
   2016-11-12 16:26:09 +08:00
不错,支持一个
zhangneww
    50
zhangneww  
   2016-11-12 16:54:50 +08:00
支持一下,很好看
poorcai
    51
poorcai  
   2016-11-12 17:00:29 +08:00 via Android
很漂亮,有木有 wp 同款主题啊😃
viosey
    52
viosey  
OP
   2016-11-12 17:13:59 +08:00
@poorcai Sorry~ 目前只有 hexo 和 typecho 呢
yangpai
    53
yangpai  
   2016-11-12 17:56:56 +08:00
air 下感觉下拉反应有点缓慢, 跟随不是很及时的赶脚^o^ 那个 demo
viosey
    54
viosey  
OP
   2016-11-12 19:08:58 +08:00 via Android   ❤️ 1
@yangpai 因为用了平滑滚动的 js 效果,这个效果是可以开关的,用鼠标体验会不错
yangpai
    55
yangpai  
   2016-11-12 19:39:53 +08:00
@viosey air 下还是没有这个效果,体验更好,跟手^o^
yangpai
    56
yangpai  
   2016-11-12 19:40:30 +08:00
@viosey 而且这个特效感觉有点颤抖^ _ ^
MinonHeart
    57
MinonHeart  
   2016-11-12 20:15:56 +08:00 via iPhone
这个图是怎么做的?
rootliang
    58
rootliang  
   2016-11-12 20:18:27 +08:00 via iPhone
厦门大触
HiJony
    59
HiJony  
   2016-11-12 20:51:28 +08:00
标题违反广告法了。。
viosey
    60
viosey  
OP
   2016-11-12 20:54:32 +08:00
@MinonHeart 用 ps 搞的
viosey
    61
viosey  
OP
   2016-11-12 21:23:38 +08:00
@HiJony 😂 不要在意这些细节
CloudnuY
    62
CloudnuY  
   2016-11-12 22:23:20 +08:00
自带的平滑滚动把触控板双指返回给捕捉了,无法使用系统级的双指返回……
viosey
    63
viosey  
OP
   2016-11-12 22:26:23 +08:00
@83f420984

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

@CloudnuY
开启平滑滚动效果确实是一个较难平衡的东西
meunicorn
    64
meunicorn  
   2016-11-12 22:38:22 +08:00
cool !!!
tuimaochang
    65
tuimaochang  
   2016-11-12 23:42:59 +08:00
好人一生平安!
kaedea
    66
kaedea  
   2016-11-13 02:01:30 +08:00
https://blog.viosey.com/gallery/
可否随着分享相册模板~
viosey
    67
viosey  
OP
   2016-11-13 02:18:18 +08:00
@kaedea 都是开源的
ifoolish
    68
ifoolish  
   2016-11-13 09:02:19 +08:00 via iPhone
好看。好想 Python 的 Pelican 也有一个😂
basefas
    69
basefas  
   2016-11-13 09:44:18 +08:00 via iPhone   ❤️ 1
首先要肯定,楼主做的蛮不错的,但是你这根本不是 MD ,如果想做 MD 风格的建议去把文档再好好看看
viosey
    70
viosey  
OP
   2016-11-13 12:24:46 +08:00
@basefas 还有一个纯粹的 MD 的分支样式正在开发中
viosey
    71
viosey  
OP
   2016-11-13 12:29:15 +08:00
@basefas
你可以看一下分支主题样式的命名就懂了:
- Nexus (联系,关系)
- Paradox (矛盾)
- Isolation (隔离,孤立)

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

BTW , Paradox 的样式也是由官方 MD 模板改进而来的。
basefas
    72
basefas  
   2016-11-13 12:48:08 +08:00 via iPhone
@viosey 我理解的 MD 首先强调的是一切操作的过渡自然,是为用户考虑的,而不是强行加一些动画和特效。同时也对你的行动表示肯定,期待做的越来越好。
viosey
    73
viosey  
OP
   2016-11-13 13:00:12 +08:00
@basefas
十分谢谢你的指点~
主题所有的特效已加开关功能。
harvest
    74
harvest  
   2016-11-13 13:23:18 +08:00
进入这里的第一个收藏送你了。
viosey
    75
viosey  
OP
   2016-11-13 14:41:48 +08:00
@harvest thx~
mauve
    76
mauve  
   2016-11-13 17:17:12 +08:00
主页顶部的头像图片与右边的 Viosey's Blog 有点不对劲,没有达到信息瞬间接收率最大化,我觉得可以稍微往山移一下,或者是做成扁一点的,第一次进博客看到这个有点不知所云
viosey
    77
viosey  
OP
   2016-11-13 17:53:23 +08:00
@mauve 谢谢你的建议,顶部的两个模块我会进行调整,包括移动端。
Showfom
    78
Showfom  
   2016-11-13 18:15:27 +08:00
这主题不错,支持下
sobigfish
    79
sobigfish  
   2016-11-13 18:24:32 +08:00
确实 cool 但 gpl 的 纯支持了-。-
sobigfish
    80
sobigfish  
   2016-11-13 18:41:25 +08:00
lz, 你协议里写的 AGPL
README 里写的 GPL
viosey
    81
viosey  
OP
   2016-11-13 20:37:22 +08:00
@sobigfish 啊哦_(:з」∠)_,谢谢提醒。
Github 初始化的时候协议没弄好,现在已更改。
ilotuo
    82
ilotuo  
   2016-11-13 20:51:25 +08:00
个人网站那个背景太帅了!
但是完没两下温度飙到 90 度..
loser
    83
loser  
   2016-11-14 15:58:13 +08:00
可以可以,准备用上,谢谢分享!
kaedea
    84
kaedea  
   2016-11-15 14:49:23 +08:00
viosey
    85
viosey  
OP
   2016-11-16 01:08:16 +08:00
@kaedea 请问网站名、头像和一句话介绍是什么呢?
kaedea
    86
kaedea  
   2016-11-16 09:51:06 +08:00
@viosey
http://kaedea.com/ 中二病也要开发 Android
2333333
wubotao
    87
wubotao  
   2016-11-16 10:35:20 +08:00
不错不错~
viosey
    88
viosey  
OP
   2016-11-16 13:19:19 +08:00
@kaedea 有点长诶,感觉
kaedea
    89
kaedea  
   2016-11-16 18:20:06 +08:00
@viosey 去掉 233333
2333333
viosey
    90
viosey  
OP
   2016-11-16 20:23:35 +08:00
"中二病也要开发 Android" 长度还是溢出了 _(:з」∠)_
cdell
    91
cdell  
   2016-11-18 16:25:16 +08:00
很棒~
thomas070
    92
thomas070  
   2016-11-21 16:14:50 +08:00
很棒的主题,支持楼主一发
cenxun
    93
cenxun  
   2016-11-23 11:06:04 +08:00
cool
alihanniba
    94
alihanniba  
   2016-11-23 20:58:14 +08:00
赞,请问有 sketch 原型吗?
zhaoy875
    95
zhaoy875  
   2017-01-07 21:14:48 +08:00
hexo 群友路过留爪
关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4161 人在线   最高记录 6679   ·     Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 · 36ms · UTC 05:19 · PVG 13:19 · LAX 21:19 · JFK 00:19
Developed with CodeLauncher
♥ Do have faith in what you're doing.