我的開源主頁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...
},{},{}]
支援
