分享寒假无聊撸出来的 Material Design 风格的博客系统

V2EX = way to explore

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

现在注册

已注册用户请登录

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

Materialize Blog

github 地址

demo 在这。

首页是 collapsible 做的，类似 google 的 inbox ，另一个位置/posts 是普通的文章列表页面。

用的前端框架是 materialize，蛮好用的。

更多说明请移步 github ，欢迎各位使用，刚刚撸完难免有一些 bug ，各位可以在回复中告诉我。

另外，欢迎互加友链。

GitHub

友链

posts

Inbox

35 条回复 • 2016-02-23 18:52:09 +08:00

phoenixlzx

2016-02-18 21:56:14 +08:00

Materialize 已 star

aaronly

2016-02-18 22:02:55 +08:00

@phoenixlzx materialize 确实不错

实在用不下去 google 的 material design lite ， mdl 前缀看着就难受（╯－＿－）╯╧╧

shallyy

2016-02-18 22:04:07 +08:00

很棒啊

hantsy

2016-02-18 22:48:07 +08:00

效果不错。

可惜我不懂前端，不然也可以把我 Sample 搞漂亮一点。 https://github.com/hantsy/angularjs-springmvc-sample

int64ago

2016-02-18 22:53:11 +08:00

我的 https://get-link.xyz/ 也用了 Materialize

不过我发现我开始不喜欢 MD 风格了，移动端还不错， PC 端感觉挺恶心的

a4e9y47

2016-02-18 22:53:19 +08:00

哈哈哈很棒！！！能做个 hexo 的模板就好了博客已经折腾不动了> <

aaronly

2016-02-18 22:57:13 +08:00

@int64ago 毕竟最开始是做给 android 的，拿来给 web 用肯定没当初设计的好

aaronly

2016-02-18 22:58:30 +08:00

@a4e9y47 没做过 hexo 的模板，之前用的是 jekyll ，都是用别人写好的，这次难得动手自己写

zhjits

2016-02-18 23:15:15 +08:00

好好去研究一下 Material Design Spec 的 **原文**。你这卡片的边距怎么看怎么不对。

PS ：建议把标签移到标题下面，不然动画路径也很不自然。

Kilerd

2016-02-18 23:30:15 +08:00

这样不好看点？

一不小心发送到隔壁帖子去了。

hexasnake

2016-02-18 23:31:43 +08:00

背景图很棒！

kyze8439690

2016-02-18 23:32:24 +08:00

很多 padding 需要加大，这个布局太紧凑了，怎么看都 material 。
当然楼主可能精力都在系统上了。

9hills

2016-02-18 23:37:11 +08:00

感觉怪怪的

zhjits

2016-02-18 23:43:35 +08:00

@Kilerd 这个用途下面，首选 List ，在 List 无法承载这个信息量的时候考虑 Tile ，用 Card 不适合。

See: https://www.google.com/design/spec/components/cards.html#cards-usage

tony1016

2016-02-19 09:43:41 +08:00

@zhjits 同意这位仁兄。紧凑一点，否则觉得别扭

demo

2016-02-19 10:00:46 +08:00

没对齐。。。。

xiaxue

2016-02-19 10:43:21 +08:00

我有强迫症，我觉得点开文章的时候，宽度不一致的地方别扭... 老是过一会儿，盯着那看两眼

aaronly

2016-02-19 10:58:54 +08:00

@zhjits 谢谢建议， spec 阅读的不是很仔细，前端还有很多需要改进的地方，我会继续优化

aaronly

2016-02-19 11:01:26 +08:00

@Kilerd 蛤蛤蛤，这个我问过妹子，妹子觉得没有间距比较好看 =。=

aaronly

2016-02-19 11:02:34 +08:00

@demo 你是指哪里没对齐？

laosb

2016-02-19 11:32:32 +08:00

保持 tag 作为一种元素的样式一致性，把 Tag Cloud 的样式也改为 chip

Ruiming

2016-02-19 12:56:41 +08:00

padding 是不是要再调整下？总感觉有点奇怪。

tajpure

2016-02-20 07:57:08 +08:00 via Android

@a4e9y47 我用 mdl 简单地弄了一个 hexo theme ， https://github.com/tajpure/material ，效果： https://tajpure.com 。

a4e9y47

2016-02-20 09:46:47 +08:00

@tajpure 感觉色彩不太分明...colorPrimary 、 colorPrimaryDark 、 colorAccent 、 colorAccent 能体现出来就好了~

tajpure

2016-02-20 10:27:50 +08:00

@a4e9y47 哈哈，我比较喜欢轻一点的色彩，感觉太浓重很容易疲劳。

arens

2016-02-20 11:26:52 +08:00

文章的加载体验不错， AJAX 吗？不过据说这样的加载不利于 SEO

@tajpure 是 Wordpress 的吗，那个评论是什么插件？

tajpure

2016-02-20 12:01:22 +08:00 via Android

@arens 全部是通过 hexo 生成的静态文件，用 nignx 托管的，评论用的 Disqus 。

aaronly

2016-02-20 16:23:36 +08:00

@arens 首页是 ajax ，还有另一个页面 /posts 是普通的了表，这个就是为了优化 seo 做的

Remember

2016-02-20 19:48:27 +08:00

然而已经访问不能

hiroya

2016-02-20 21:20:05 +08:00 via iPad

最喜欢的框架～但 demo 挂掉了

aaronly

2016-02-20 22:21:45 +08:00 via iPhone

@Remember 😂给的链接确实挂了，因为今天加了 ssl ，没做重定向，用 https 访问就可以了

aaronly

2016-02-20 22:22:56 +08:00 via iPhone

@hiroya 见楼上，非常抱歉

fantasy467047

2016-02-21 03:54:10 +08:00

@int64ago 你这个做的有点丑

leitwolf

2016-02-23 16:13:43 +08:00

@aaronly 我可以用一下你这个设计吗？会注明来源。

aaronly

2016-02-23 18:52:09 +08:00 via iPhone

@leitwolf 可以的。