WordPress 版面「Labcrocous」

首頁

名稱:Labcrocous
作者:Wanico
網站:Lab Crocodile

這次是心血來潮決定改版的,因為覺得上一個版面「Crococolors」太難找文章,也不太容易更新資訊,雖然正在進行一件對自己還挺重要的小計畫,但看著舊版面有些坐立難安、便毅然改版。

Flexbox 的活用

上一版「Crococolors」是第一次採用 flexbox、當時不甚熟悉吃了不少苦頭,這次參考了 “A Complete Guide to Flexbox” 這篇文章提供的範例,它活用了 order 這個要素;由於以往用 div 和 float 進行排版時,最令人傷腦筋的莫過於區塊無法大幅度靈活調整位置,在做 RWD 時更是令人頭痛,因此 flexbox 的 order 真的幫了大忙。

例如這個版面在寬螢幕時,Header、Main 和 Sidebar 的順序是 1、2、3,在手機螢幕時順序則是 1、3、2,就可以輕鬆達到因應螢幕寬度調整區塊位置的效果,不僅 CSS 不用寫得落落長,也方便這次寫手機用的 Navigation 區塊。

值得一提的是,該文的範例中 media query 是用 min-width 下去寫,這是從窄螢幕出發建構到寬螢幕的思維;這邊採用的 max-width,則是從寬到窄。老實說寫版面這麼多年,這個思維還是在寫這一個版面才意識到,我果然永遠都在新手村打怪。

Sticky Sidebar 的採用

這次改版的目的之一是方便瀏覽時找文章分類,以及放一些小工具,經過多番考量將側邊欄加回了頁面中,與時下網頁設計主流完全背道而馳,但為了避免文章過長時、找側邊欄內容又要將頁面往上拉,因此這次採用 Sticky Sidebar 這個 js 插件。

使用該插件唯一要注意的是如果想確保 RWD 作業,建議 ResizeSensor.js 一定要裝,不然在縮放視窗時會碰到各種古怪的狀況,另外,如果要指定在特定大小的視窗停止這個 js,可以參考:Disable sticky sidebar for responsive view

Gutenberg 編輯器的導入

Gutenberg 是 WordPress 新推出的文字編輯器,雖然它還在測試和改良階段,但提供相當多元豐富的區塊工具供文章及頁面排版使用,特別是雙區塊內容欄、封面圖片和藝廊等,以前需要自己手寫程式碼的部分,現在都可以輕鬆呈現;且操作相當直覺,所以這邊便欣然安裝使用了。

它目前的缺點在於各個區塊的限制很多,例如藝廊圖片做超連結時,如果在 HTML 中新增開新視窗 target="_blank" 的程式碼,則編輯器會判定該區塊有錯誤、要求轉成 HTML 區塊,簡單來說就是自由度不夠高。而且安裝以後還疑似把文章中程式碼的 <> 全部轉成 Unicode 並在每行後方加上換行標籤;導致這邊不得不把所有包含程式碼的文章全部整理過,並刪除原本使用的程式碼顯示插件。

不過畢竟如開頭提到、它還在測試改良階段,像之前雙欄式的區塊沒有 RWD 這點,在新的版本也已經改善了,想必後續還會有許多令人期待的功能吧?就一邊測試一邊期待囉!

其他參考網站及文章:

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料

2則迴響

  • 勇勇 說:

    很喜歡之前的版面 Crococolors!
    因為配色和版型介面 好好看一整個被吸來XD
    不知道還有沒有辦法看到之前網頁整個截圖(?
    雖然不會做網頁
    但每次來逛逛的時候
    怎麼逛都覺得心情很好XD

    • Wanico 說:

      勇勇你好!感謝你留言,
      知道自己做出來的版面有人喜歡、也會讓人心情好,真的很開心XD
      之前「Crococolors」做好時,有部分截圖在下面這篇文章裡面:
      http://wanico.wamimo.net/blog/blog/2018/themes_crococolors/
      不知道是不是你需要的?如果還需要其他截圖的話,
      可以看看是要文章列表、或是挑一篇特定的文章,這邊可以另外截圖給你喔!