煉鋼廠第四期工程報告


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 on Google Plus

About 賴大鐵


    Blogger Comment
    Facebook Comment

6 意見:

  1. 恭喜改版!

    不過最上面那列 (搜尋列左邊那塊 Home/About/Archive....)
    似乎有錯誤 (點選後沒有連結,有的會出現 Sub Menu 等)
    從本篇的第一張圖也發現您圖上的 Archive 和 With Sub Menu 沒有小三角形 (即無子選單)

    不知道這個是原本就如此
    或者是改版之後才出現的問題 XD

    BTW,要留言時發現「發表留言的身分」是 Unknown
    這個也是正常的嗎 XDD

    回覆刪除
    回覆
    1. 哇,這麼快就有回應,感謝~~ :-)
      我文章有提到選單還沒想到要放啥啦,所以就懸在那兒,並不是錯誤。
      三角型我不清楚,我看到都是正常的。
      另外,留言的部分,我現在權限是設「只有Google帳號者才能留言」,不知和這個有無關係?

      刪除
  2. 後來發現 Unknown 是因為沒有開啟 Google Blogger 和 Google+

    回覆刪除
    回覆
    1. 嗯嗯沒錯,目前只開放給Google帳號的人留言 XD

      刪除
  3. 感覺上是個大工程...這是都更嗎!?

    回覆刪除
    回覆
    1. 哈哈,對我來說真的是大工程 XD

      刪除

Related Posts Plugin for WordPress, Blogger...