部落格主題二三事

自從重啟（建）這個部落格後，陸陸續續做了些調整、修飾以及匯入等事，先約略記錄一下背景主題（Theme）選擇的過程。

Skywalker

Ghost 初架設後，預設是使用 Casper 主題，非常簡潔漂亮。但我個人偏好是二欄式樣式，不太喜歡這種格狀（Grid）主題。

因此，除了到 Ghost Theme Marketplace 上瀏覽外，也花了點時間在網路上搜尋看看是否有其他中意的主題。最終是選擇了這個風格簡潔的 Skywalker 主題，除了支援 RWD 設計、有歸檔（Archives）頁面外，比較特別的是還可以隨機使用 bing 圖庫圖片作為背景圖。

不過一陣子後倒是發現 bing 隨機圖檔背景常會失靈，追了一下 JS 碼後發現是利用這個 Bing 壁紙 API 來實作的，算是第三方的 API（事實上，Bing 官方似乎也有提供類似的 API），且在 6 月時有發出 issue 公告正在進行改版作業，新版上線前，僅提供圖片數據返回，不提供詳細 JSON 數據。

因此，只好稍微修改一下程式，改用 Unsplash It ：同樣提供隨機圖片等功能的 API，圖片來源則是目前提供大量免費高品質照片的 Unplash。

前、後篇文章的背景圖則自行隨機計算取得範圍內的二個 id 再呼叫 API 取得圖檔

我是先用 https://unsplash.it/list 取得目前的所有圖檔列表，約略計算一下 image id 的範圍。header 的部份仍是直接叫用網站提供的 random API call（https://unsplash.it/xxx/yyy/?random）。而前後篇文章的背景圖則自行隨機計算取得範圍內的二個 id 再呼叫 API 取得圖檔（https://unsplash.it/xxx/yyy?image=id）。修改的記錄如下：

theme/skywalker/assets/js/app.js 以及 app.min.js（minify 過的 js 檔）。找到 bing background 的區段，mark 掉的就是原始程式碼，修改為：

// bing background
if( $('.page').hasClass('post') ){
	/*$.ajax({
		method:'get',
		url:'https://bing.ioliu.cn/v1/rand?type=json',
		dataType:'jsonp',
		success:function(result){
			if( result.status.code === 200 ){
				var url = result.data.url;
					url = url.replace(/^http:\/\//i, 'https://');
					url = 'url('+url+')';
				$('.post header.nav-wrapper').css('background',url+' center center / cover  no-repeat fixed')
			}else{
				console.log( result.status.message )
			}
		},
		error:function(err){
			console.error(err);
		}
	});
	*/
	var url = "https://unsplash.it/1440/341/?random";
		url = 'url('+url+')';
	$('.post header.nav-wrapper').css('background',url+' center center / cover  no-repeat fixed');

	// pre/next post
	//var pre = Math.floor(Math.random()*10),
	//	next = Math.floor(Math.random()*10+10),
	var max = 1000, min = 0;
	var preid = Math.floor(Math.random() * (max - min) + 1),
		nextid = Math.floor(Math.random() * (max - min) + 1);
		//pre = 'https://bing.ioliu.cn/v1/blur?d='+pre+'&w=640&h=480&r=1',
		//next = 'https://bing.ioliu.cn/v1/blur?d='+next+'&w=640&h=480&r=1';
	var pre = 'https://unsplash.it/640/280/?image=' + preid,
		next = 'https://unsplash.it/640/280/?image=' + nextid;

	$('.card-pre img').prop('src', pre);
	$('.card-next img').prop('src', next);
}

theme/skywalker/assets/js/app.css 以及 app.min.css（minify 過的 css 檔）。找到 header.nav-wrapper，將 background 定義 mark 掉：

header.nav-wrapper {
    display: inherit;
    justify-content: space-between;
    /*background: url(https://cn.bing.com/az/hprichbg/rb/PorthminsterBeach_ZH-CN10275083647_1920x1080.jpg);*/
    background-size: cover;
    background-position: 50% 50%;
    width: 100%;
    height: 100%;
}

修改套用後的效果雖然不是盡如人意，但也算是勉強可用。例如：由於 Unplash it 所提供的圖檔 id 範圍並非完整的連續值，所以自行隨機計算取得的圖檔 id 可能不存在，因此導致版面偶會有破圖的情形發生。另外，可能 Unplash it 對流量及 API call 也有設定管控，所以瀏覽文章時常會發生圖檔載入延遲的情況，甚至文章閱讀完畢了，圖都還沒能下載顯示。

Urban

其實，除了 Ghost Theme Marketplace 和 Github 外，付費提供各式網站背景主題的 ThemeForest 也有專業設計師的 Ghost 主題陳列販售。閒餘稍事瀏覽後倒是蠻喜愛這二個主題：Urban - Ghost Theme by Tamxaun 以及 Subtle - Clean and Elegant Ghost Theme by justgoodthemes。

除了風格外，在更新記錄上，這二個主題的設計師仍有維護更新。也都在最新一次的更版（2017 年 7 月）提供相容於最新的 Ghost 1.0 版本。對最近才跨版次更新的 Ghost 1.0 來說，這是相當重要的考量點：以我前陣子才試用不少主題背景的經驗，還有為數不少已停止更新的舊版背景主題，全然無法與新版 Ghost 相容，都必須自行手動修改才行。

幾經考量後還是決定用 19 美元的價格購買 Urban，除了排版維持 Ghost 的簡約本質外，設計師還另行設計了照片圖說以及左欄小圖的樣式，讓頁面效果更有紙本雜誌的風格。

Urban Theme 除了排版維持 Ghost 的簡約本質外，設計師還另行設計了照片圖說以及左欄小圖的樣式，讓頁面效果更有紙本雜誌的風格。

目前的部落格就是使用這個 Urban 的主題背景，也正慢慢持續調整文章排版中。

◆ Feature Image from Unsplash by Matthew Payne

Recent Posts:

Featured Posts:

Tags:

部落格主題二三事

Skywalker

Urban