[Blogger]Blogger改版過程記錄

前言

上次手殘把blogger裡面的照片都不小心清掉後，
一堆圖片都消失了。連度估的圖也消失了，
想了想，也是時候來改版了。距離上次改版也過了四年。
本篇文章將會著重於『記錄』

正文

1.找到一個順眼的版面是很重要的，先有了版面後再來要改或是直接套用都很快。
版面的網站，這個我用起來比較順手，推薦   btemplates ，記得挑選支援RWD的版面。
2.開始改吧～～
這次要將喜歡的主題，東拉拉西拉拉湊成一個大塊的。
Precious 、Buzzmag
首先碰到的問題是，以前的前言在文字中可以放大，但在新版的畫面中直接把<h2>拿掉了。
找了老半天，才發現他在顯示文章的時候，又寫了一段JS，把文章格式通通拿掉，
為了符合不要超過400個字的長度。

<b:if cond='data:blog.pageType != &quot;item&quot;'>
< div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
< script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
< /b:if>

3.再來是一堆css的設定調整，
現在的瀏覽器除錯功能只有強而已阿。
可以直接在上面改一改就好了。
但有些東西還是要先知道。
像  30個你必須記住的CSS選擇器 、 CSS中的多重選擇器（Multiple Selectors）包含空白或逗號
如果卡到配色問題，可以參考   coolors ，可鎖定你要的顏色，再按空白鍵隨機產生適合的顏色。

4.當圖片發生錯誤時，可以利用js 的onerror的語法，去帶出另外一個預設圖片。

5.blogger有些預設的語法可以套用。
<data:post.thumbnailUrl/> 取得縮圖的圖片url
如果需要其他的語法，文件請參考 Layouts Data Tags

因為本來的主題是直接取得文章內的第一張圖片的url，做為文章列表的縮圖。
本來也想照著做，但每篇文章的開頭都要先放圖片，每個文章都要這樣。
那改js還比較快點。

6.將程式碼區塊的樣式加回去
這次新增了out區塊，不知道未來用不用的到。
參考： 在 Blog 中顯示明顯的程式碼區塊 Code Block - 2
來個前後差異比較
改版前(Fig.1)

(Fig.1)

改版後(Fig.2)

(Fig.2)