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 如何處理網站訪客的留言資料