煉鋼廠第四期工程報告

2015.08.12

距離上一期的修改，已經4年了!!




想說就把陳舊的背景和首圖都更換一下。
雖然第三期已經都是以「桌遊」為主，相簿式的版面也是蠻適合的。但是每個圖片的尺寸較小，文章篇名較長時也很難看到全名。再加上英文是沒有斷字的，所以經常會出現都沒有名字的情況 orz

而且在這段時間的使用下，也知道只有第一次來的讀者，會瀏覽這樣的介面。
真正的主要流量，通常是由Google與Facebook的連結所過來的。
所以反而版面就沒那麼重要啦！

但是，內建的查詢介面與關聯文章就相當重要。當讀者看完一篇後，可以很容易地再找到類似的文章。

再來有一個衝擊，就是微軟的離線編輯工具WLW不能用了!!
害我只好改成自己上來用 Blogger 的介面...


先來看看目前的版面吧！

模板 Template

採用的是 IVYThemes 設計的 ExtraNews 模板。
原因是支援RWD，再來是被它的風格所吸引，挺適合做為桌遊或照片為主題的網誌。
另外是它的demo有個漂亮的動態拼貼效果，還會把圖片整起來，相當漂亮。但可惜我只有在自己的另一個blog試成功，而且居然只有2009年的舊文會被拼貼。後來加的都不會。我想可能要研究原始碼才行了，但我想我沒時間就先放棄 orz

(放棄，只有在舊文才能成功的動態拼貼orz)

所以將它先移除後，目前就是如下圖這樣。
背景圖與網誌頭像我都還沒加，選單也是空的，等想到再補上啦 XD

(主頁面)

側欄

右方的側欄 3 tab，分別是熱門文章(由Google 記錄的點閱數排序)，最新文章(時間排序)和時間分類(其實是Blogger內建的插件，可以按時間表展開)。
而且這次我的側欄是不變的，所以不論何時讀者都會看到，也方便再選擇其他的文章。

 (側欄)

時間分類這邊，也可以看到每個月的文章數。前幾年真的很猛啊 XD

忘了提一下，主版中央下面被動態加入了換頁介面。Blogger原本只有較新和較舊的連結。

站內搜尋

我很喜歡 ExtraNews 提供的站內搜尋，速度快，而且是浮動的視窗，不會影響主畫面。
只不過在站內搜尋，不會太精準。因為畫面上重覆的字很容易影響到搜尋。但我看來已經足夠使用囉！

(很快速的搜尋介面)

快捷標籤搜尋

主板左方有一個「Latest Post」，其實點下去後，會出現所有的Label。

按文章量排序，讀者可以進一步去點選。

文章內頁

點入後的變化，就請看下面的圖了。

回應的數量也會顯示在右側。

相關連結 - Linkwithin

這是我一直很喜歡的「相關連結」外掛。它不是把原本Blogger的「相關文章」修改，而是另外加進來的插件。至於它是怎麼去找到相關文章的，好像並沒有公開演算法。
不過那也不重要，總之，這次還是再用下去了 XD
可參考官網的教學：http://www.linkwithin.com/learn

此外，避免在首頁main也出現，搜尋linkwithin，可以找到在插件的程式碼，修改：

    <b:widget id='HTML1' locked='false' title='LinkWithin' type='HTML'>
              <b:includable id='main'>
                <b:if cond='data:blog.pageType == &quot;item&quot;'>
                  <b:include name='content'/>
</b:if>
              </b:includable>
              <b:includable id='content'>
                <data:content/>
              </b:includable>
            </b:widget>

即可。

 (漂亮又簡單易用的 Linkwithin)

分享與相關文章介面

ExtraNews提供了一堆分享鈕，方便讀者分享。
另外，上下篇也有做了修改，會直接顯示上下篇的標題，便於讀者瀏覽。

最下面是它提供漂亮的相關文章功能，系統會自動拼貼起來。

 (很漂亮的相關連結，但精準度要再確認)

留言版

之前我用了第3方的留言版 - Disqus。
雖然在垃圾信與黑名單的防堵很不錯，也有相應的widget可以使用。還有管理功能。
但是，每次要換版型都要改程式碼，然後最麻煩的是，它影響了一些既有功能。
而且大多的外掛和模板，都會以內建的留言板來應用。所以這部分就是Disqus難以克服的地方。

最糟的是，Blogger內建的留言版，我無法讓它再重現回來。照了查到的各種方法沒一個可用，甚至連重置模版都沒有辦法！

最後一招就是建一個新的blog，然後把原本的文章轉移過來了。
(之前把程式碼改的亂七八糟，難以回復orz)

所以我也決定捨棄了 Disqus，回到Google的懷抱啦。但之前的留言也都消失了就是。
ExtraNews 在留言版增加了表情符號，如下圖。

RWD支援

由於 Extra New 支援RWD，所以在不同的大小與解析度上，會有合適的呈現效果。

延伸閱讀

煉鋼廠第三期工程報告

結語

因為換了新的blog，所以流量上是砍掉重練了。
幸好之前的Histats計數器是跟著帳號走，但是Google內部2百萬人次的自然就是重來囉！

整體上變的較為清爽，其餘字型和一些細節，就是CSS調一下就好。
選單的內容和banner，之後再來慢慢想吧。先可以運作比較重要 XD
不過ExtraNews很多都是動態調整，所以有時畫面會整個跳一下。就請多包涵啦 ^^

Share this: