好看的东西看多了就会不好看, 简单的东西永远不会难看
提供静态网站托管服务的厂商还是很多的, 上次这个博客还是在阿里云的OSS上面, 虽然oss很便宜但还是没有一种”永久使用权”的归属感, 于是我遇到了Github Pages:
https://pages.github.com/
相比其他的blog平台, GitHub Pages有以下的优点:
这么看来GitHub Pages有3大免费: 免费仓库, 免费域名, 免费https, 再加上各种优化和保障, 同时还能给你github账号加分, 何乐而不为呢? 当然了, github pages并没有提供后台的计算服务, 所以我们只能免费搭静态博客.
Material Design Lite (MDL)是谷歌根据自己的Material Design设计风格开发的精简版Web UI框架, 虽然市面上有很多基于material的优秀的前端框架, 但是最好还是使用Google自己推出的, 一来有官方保障, 而来MDL本身很轻量, 正好符合了我们静态网站的宗旨. MDL的官网和git仓库, 以及material的官方字体图标:
https://getmdl.io/
https://github.com/google/material-design-lite
https://material.io/tools/icons/
所以我的博客也叫Blog Lite, 意指完全遵循material的精简博客
当前版本0.1.1 首先声明, 这个blog适用的人群有限, 因为这博客太轻量了, 以至于除了MDL框架, 代码部分构建之后只有10+k, 因为Blog Lite有一个重要的特点是”一切都是链接”, 这意味着博客中展现的一切都是分类之后第三方的地址, 不存放最终的内容. 我当初写Blog Lite的初衷是做一个”目录”来把我的许多第三方博客平台和个人网站统一起来, 一目了然, demo也可以在我的page上看到:
https://jinhengyu.github.io/
看完之后如果不够舒适…其实也可以在此之上二次开发, 不用标记版权, 因本身就是我一时兴起的作品哈哈, 更多截图请看进入demo目录
卡片布局(Card Layout)是经典的UI组件, material中的核心部件, card给人一种简约大方的感觉, 同时暗示了可互动性, 和有一种面向对象的feel, 所以我大胆的在新版本中给每个外链加上了卡片, 如图
可以看出其结构, 首先这个矩形是一个黄金矩形, 即宽高比例是1:0.618, /* gold = (5**0.5-1)/2 */, 标题在左下角, logo在右侧, 为了美观, 你之后在填写data.json的时候有几点需要注意:
data.json中存放着所有的数据, 也就是所有的url, 源码拿到手之后修改下这个文件之后就能上手用了, 为了方便我使用js的形式描述data.json:
// data.json是一个列表对象, 其中每一个元素是一个album, 代表一个大类包含许多的子链接
[{
// album的优先级, Number类型, 较大的排在菜单侧边栏的上面
priority: Number,
// album的图标
icon: String
// album的名字(短文本)
name: String,
// album的描述(长文本)
about: String,
// album中每一个卡片(外链)的背景图片url, 建议存放在/img/back/目录中
img: String,
// 存放该类别中所有的链接信息(卡片)
list:[
// link的名字(短文本)
name: String,
// link的描述(长文本)
about: String,
// link的地址
url: String,
// link的图标图片url, 建议存放在/img/logo/目录中, 最好做成裁剪后的透明png, 因为要覆盖在背景图片之上
logo: String
]
// other album...
},{},{}]