Quinque 是拉丁文的 '5'. 因為算起上來忍者blog用的template中, 這個是第五個.
總之搞很久總算改到版面. 雖說是自己一邊製作一邊試用, 但一時間仍然有點不慣.
畢竟看記錄我製作第四版已經是2009年的事. 即是說第四版已經用了接近七年.
比我製作過的任何一個web layout都長壽.
所以這次從水面到水底都是翻起全部打掉重來. 例如改用全頁的2column式layout, 底下全部用HTML5+CSS3+JQJS重寫.
連後台的template製作階段也改為減少依賴忍者blog的modular機能.
我一直都沒有idea要怎麼弄layout, 直到我開始弄隱藏menu的按鈕後突然想到試試把按鈕弄成三角形.
接著又想到把這三角形延伸到右邊column去, 於是變成現在的樣子.
原構想中兩個column分別為右邊放置記事, 左邊放置其他所有東西.
只是後來試著把記事日期位移到左邊的範圍後就想到乾脆把它放到三角形上.
原來的menu也不是全隱藏式, 而是在左右column中間垂直排列的tab式menu.
從視覺上左邊是放了很多東西, 但因為要遷就CSS的z-index機制, 結果大部份東西實際都放在右邊.
實際真的在左邊只有日記title的圖片. 如果連這個也不放左邊, 那左column就變成純粹的裝飾element.
雖說從不太會跟webtrend或web standard之類, 但現在確實認同HTML本文越簡潔越好.
這次我就連各個元件的動態也儘量不依靠JS達成, 例如月別archive和分類的pulldown我是用純CSS弄的.
但始終有些有關操作的部份還是得靠JS來完成. 還有就是一些忍者blog欠奉而要用JS補足的小細節.
例如分頁和月曆的今天表記. 忍者blog分頁強制是前後各五頁, 我則用jq把它弄成最多前後各四頁.
說回來這次還有幾點細節的明顯變更. 首先照自己要求把管理畫面/新記事的按鈕移到右上角固定, 連scroll都不需要就能按到.
其次是返回首頁的連結也放到右上角去. 沒理由只有頁底有這連結. 還有把前一頁/下一頁重新界定.
看很多blog程式都是叫下一頁和上一頁的, 個人覺得從頁面flow來看沒問題. 但從時間軸來看, 最新的記事同時也是最後的記事.
所以我用JQ把"次/前のページ"改成"Older/Newer Endties". 但兩個按鈕的位置只是參考各種月曆UI中上一個月通常放在左邊的現象.
至於視覺設計方面除了標題外全都走簡約路線. 不過我即使簡約也不會簡到只有白底黑字...個人覺得太悶.
藍黃配色是看著測試階段時用的底圖再隨便配的. 那時的底圖是irfa的多重曝光試作品.
然後正式時換回青池的紅外線黑白照. 總覺得彩色底圖不對味於是選用紅外線照弄成dual tone.
標題圖是到最後才弄的部份. 因為其實一直沒想過標題要放哪裡...於是學一些wordpress template把header放在左column的中央.
設計也是看到一些仿vintage風徽章後自己試著弄一個...雖然有簡潔和elegant的感覺但vintage感比較薄...裝飾線條有點偏現代味.
上下的小字都是拉丁文, 意思是"with nox aeterna since 2004" 和 "nox aeterna i.e.". 不加進去感覺不夠味道...
雖然現在已把template設換成這個第五版, 但這template嚴格來說仍然是未完成狀態.
就連上傳再把它弄到現在這個基本能看的狀態也費了我一番功夫. 第一是上傳前沒測試, 切換後發覺外部字型和所有JQ都失效.
搞了一輪才發覺舊版lightbox+附屬library原來和JQ本體不相容, 因此暫時要棄掉lightbox.
字型方面我把該當部份的CSS描述移到HTML本文那邊, 這樣google fonts就正常了.
但我還有使用自己用online apps製作的icon font, 這個要把字型檔案改放dropbox才行.
所以接下來我至少還要把新版lightbox搞到手, 然後看看怎樣令新lightbox對應舊記事.
還有記事comment關連的東西根本還未開始弄. 連template裡也沒有相關記述. 但我仍然有考慮弄回去.
還有幾個小bug. 例如記事別頁面時的頁頂分頁. 似乎是忍者blog獨自構文的bug.
然後是右上的按鈕位置似乎也要用JS控制了. "今天"的表記要加入年月的條件式.
最後這版面我在製作時有分別測試chrome和firefox的支援程度, 總之最新版一定沒問題.
但IE看來不是11以上的話都會有缺憾. safari和opera應該正常的...我想.
話說還有一個點想改動. 那就日記標題. 以前我還平均一個月最少20篇記事, 那叫作日記還算正常.
但最近除了旅行的月份外都甚少過10篇...其實是否該改用一個比較貼切的描述? 隨便想到叫"Glog", 怪怪的...
PR