我的开源主页Blog Lite配置指南

JinHengyu.github.io --- Blog Lite 0.1.1

好看的东西看多了就会不好看, 简单的东西永远不会难看

GitHub Pages

提供静态网站托管服务的厂商还是很多的, 上次这个博客还是在阿里云的OSS上面, 虽然oss很便宜但还是没有一种"永久使用权"的归属感, 于是我遇到了Github Pages:

https://pages.github.com/

相比其他的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的官方字体图标:

https://getmdl.io/

https://github.com/google/material-design-lite

https://material.io/tools/icons/

所以我的博客也叫Blog Lite, 意指完全遵循material的精简博客

Blog Lite

当前版本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的时候有几点需要注意:

• 标题不能太长, 控制在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...
},{},{}]

支持