個人開源主頁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...
},{},{}]

支持