2018年12月18日 星期二

重新設計整個部落格


當初我會開設這個部落格,其實是 2016 年時,看完我人生第一場五月天演唱會後感想很多,想要寫出來,而自己也沒有一個可以記錄事情的地方,所以就選了 Google 的 Blogger,用著當時還算笨拙的 HTML 跟 CSS,來作出了這部落格的第一個版本。

一轉眼也三年過去了。這個 2016 做出的部落格,現在來看排版也實在稱不上符合我的水準,也沒有行動版可以在手機上看,相當不成熟的 CSS 也造成在不同瀏覽器上,排版會有各種不同的悲劇出現。

所以,也該是時候替他整形一下了。

全新樣式!

時間回到 2016 年,當時我是 HTML 跟 CSS 這些語法的新手。也因為我一直都不是個技術型的人才,所以在這之前,想要做個放作品的網站,就是用 Adobe Muse 來解決,畢竟這類網站也不求有太多功能,所以當時覺得還算夠用。

但是當要做部落格時,只能做靜態網站的 Adobe Muse 就派不上用場了。

當時做我的這個部落格的時候,算是邊學邊做的。當時對 Blogger 的架構也不是很清楚,會修改的也只是修改預設模板的 CSS,調配出自己想要的樣式來。

之後做出來的部落格存在許多問題。例如部落格在 CSS 字體裡寫 font-family 要用新細明體,是為了要提供像閱讀紙本書籍一樣的體驗。但是 Google Chrome 又直接無視這一點,硬把字體換成系統預設,而且還一併修改行距,整個版面直接跑掉。舊版部落格也缺少行動版,在行動裝置瀏覽時排版也相當有藝術。

當時還因為不小心把部落格那個查看「較舊的文章」的功能不小心搞不見了,也不知道怎麼放回來。就直接設定為在首頁顯示最近的 500 篇文章。每次讀者打開我的部落格首頁,就會需要從最後一篇讀到第一篇去..好在台灣的網路速度挺快的,所以應該沒有什麼人發現我這樣亂塞啦。

之前的部落格排版歪七扭八

從當時至今的這幾年裡,我也已經把 HTML 跟 CSS 練的還算純熟,對 Blogger 的架構也有不少的理解,也有了從頭設計 Blogger 模板的經驗,可以對其進行更深層的自訂,隨心所欲打造出自己想要的部落格。

也因此,在 2018 的年末,我決定要從頭開始打造一個,真正屬於我自己的部落格。

部落格的草圖

製作這個部落格的時候,心裡已經有了他大概的樣子,所以草圖倒是畫得蠻快的。這次走的是當代的簡潔風。畫面上沒有多餘的元件,讓讀者專注在閱讀上。


在設計時,我整理了幾個部落格會用到的元件,在設計稿裡直接畫出他們的樣式。分別是文字、連結、字數少的引用、字數多的引用、圖片、圖片敘述、大標題、子標題、小標題、重點,以及打程式碼會用到的等寬字區塊。其中很多元件都是 Blogger 沒有提供的,就只能自己寫 CSS class,要用的時候再特別把那些話用 tag 包起來。

這次部落格首頁多了個封面照,可以與其互動,查看相關的說明,是我最喜歡新部落格的一部份!


這次側邊的 Widget 們只有在部落格首頁才會出現。有部分以前部落格有的 Widget,跟新部落格的樣式有點搭不上,需要等重新設計後再放回來。

新的部落格是從全空白的模板,開始從頭訂製的。比起使用現有模板再加以修改,更可以針對自己的需求打造需要的 layout。像是我就針對 Blogger 產生元件的方式做許多修改,來讓它產生出的元件可以有我需要的排版,或者是加上我需要的 class name 等。

不過,也不是做完就直接沒問題了。


Blogger 的 WYSIWYG 文章編輯器其實非常爛,排出來的 HTML 都問題一大堆。以前都用這個編輯器打文章,結果生出來的文章都一堆莫名其妙的 div tag 出現。部落格換上新主題後全部現形,一堆文章跑出超多空格來...

你現在在看的這篇文章,前三段也是用 WYSIWYG 編輯器打的,HTML 居然成了這種樣子。

這些文章的問題,只能慢慢去一篇篇檢查 HTML 來修了,是個會花上不少時間的工程 QQ

現在打文章都儘量避免使用 WYSIWYG 編輯器,而是直接用 HTML 進行編輯。也有在考慮自己做一個 WYSIWYG 編輯器來用。

不過也很開心我的部落格可以換上符合時代的新樣貌啦!下一個要重新設計的,就是我的個人網站 chelinchan.com 了。繼續努力,希望可以早日完成 !