我的开源主页Blog Lite配置指南
JinHengyu.github.io --- Blog Lite 0.1.1
好看的东西看多了就会不好看, 简单的东西永远不会难看
GitHub Pages
提供静态网站托管服务的厂商还是很多的, 上次这个博客还是在阿里云的OSS上面, 虽然oss很便宜但还是没有一种"永久使用权"的归属感, 于是我遇到了Github Pages:
相比其他的blog平台, GitHub Pages有以下的优点:
- HTTPS: 不用购买证书啦
- 完全免费, repository上线1G
- 支持git动态更新后台, 本地同步备份
- GitHub域名服务支持CDN
- 丰富的教程和扩展工具
这么看来GitHub Pages有3大免费: 免费仓库, 免费域名, 免费https, 再加上各种优化和保障, 同时还能给你github账号加分, 何乐而不为呢? 当然了, github pages并没有提供后台的计算服务, 所以我们只能免费搭静态博客.
Material Design Lite
Material Design Lite (MDL)是谷歌根据自己的Material Design设计风格开发的精简版Web UI框架, 虽然市面上有很多基于material的优秀的前端框架, 但是最好还是使用Google自己推出的, 一来有官方保障, 而来MDL本身很轻量, 正好符合了我们静态网站的宗旨. MDL的官网和git仓库, 以及material的官方字体图标:
所以我的博客也叫Blog Lite, 意指完全遵循material的精简博客
Blog Lite
当前版本0.1.1 首先声明, 这个blog适用的人群有限, 因为这博客太轻量了, 以至于除了MDL框架, 代码部分构建之后只有10+k, 因为Blog Lite有一个重要的特点是"一切都是链接", 这意味着博客中展现的一切都是分类之后第三方的地址, 不存放最终的内容. 我当初写Blog Lite的初衷是做一个"目录"来把我的许多第三方博客平台和个人网站统一起来, 一目了然, demo也可以在我的page上看到:
看完之后如果不够舒适...其实也可以在此之上二次开发, 不用标记版权, 因本身就是我一时兴起的作品哈哈, 更多截图请看进入demo目录
卡片布局
卡片布局(Card Layout)是经典的UI组件, material中的核心部件, card给人一种简约大方的感觉, 同时暗示了可互动性, 和有一种面向对象的feel, 所以我大胆的在新版本中给每个外链加上了卡片, 如图
可以看出其结构, 首先这个矩形是一个黄金矩形, 即宽高比例是1:0.618, /* gold = (5**0.5-1)/2 */, 标题在左下角, logo在右侧, 为了美观, 你之后在填写data.json的时候有几点需要注意:
- 标题不能太长, 控制在2~20个字符之间
- 背景图可压缩, 但最好以淡色为主(为了突出logo)
- logo请裁剪成透明png, 同时宽高比尽可能接近1:1(不够的可拿透明色填充)
目录结构
- icon/: 存放着material design的官方字体
- mdl/: MDL框架的所有相关文件
- img/: 存放着所有图片, 包括logo, 卡片背景和网站素材图片
- showdown/: 一个markdown2html的插件(http://showdownjs.com/)
- demo/: 存放了成品的截图文件
- data.json: 核心数据文件
- index.html: github pages仓库的默认入口
- js.js: 主要的js文件
- css.css: 主要的css文件
- server.js: 测试使用的, 用于开启localhost
- LICENSE: Apache通行证
- README.md: 这个文件
- README.html: README.md的HTML版本
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...
},{},{}]
支持
