个人开源主页Blog Lite配置指南

时间 2019-12-09

标签个人开源主页 blog lite 配置指南繁體版

原文原文链接

JinHengyu.github.io --- Blog Lite 0.1.1

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

GitHub Pages

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

https://pages.github.com/前端

相比其余的blog平台, GitHub Pages有如下的优势:git

HTTPS: 不用购买证书啦
彻底免费, repository上线1G
支持git动态更新后台, 本地同步备份
GitHub域名服务支持CDN
丰富的教程和扩展工具

这么看来GitHub Pages有3大免费: 免费仓库, 免费域名, 免费https, 再加上各类优化和保障, 同时还能给你github帐号加分, 何乐而不为呢? 固然了, github pages并无提供后台的计算服务, 因此咱们只能免费搭静态博客.github

Material Design Lite

Material Design Lite (MDL)是谷歌根据本身的Material Design设计风格开发的精简版Web UI框架, 虽然市面上有不少基于material的优秀的前端框架, 可是最好仍是使用Google本身推出的, 一来有官方保障, 而来MDL自己很轻量, 正好符合了咱们静态网站的宗旨. MDL的官网和git仓库, 以及material的官方字体图标:json

https://getmdl.io/前端框架

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

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...
},{},{}]