温唯改版第二彈-單一文章頁面+OXYGEN Builder

內容更新於 — 2022-12-26 17:20

接續上一篇❐【改版第一彈—首頁】，接著才是大工程—單一文章頁面的改版。

其實，只要是能在OXYGEN的模板裡面改的，都不算什麼，改一遍就能全部套用，難就難在inner content，因為內文寫在各篇文章的區塊編輯器裡，而以往很「假嗷」地為了凸顯或強調某段區塊文字，而各自套用了不同顏色的背景，然後，你懂的，上百篇文章…

所以，我會從OXYGEN的模板先改，至於區塊編輯器裡內建的那些，幸好，我只有用到「加背景色」，所以，只需要將自定的.has-background樣式放進Advanced Script裡面，加上!important，就能快速覆蓋原本在區塊編輯器裡的五顏六色囉！（詳細⇩後面⇩會說明）

正因為區塊編輯器裡面各異其趣的段落樣式，所以，我將這些特殊樣式自訂了CSS，放在Advanced Script裡面，如此一來，只要遇到需要特別強調的段落樣式，直接將自定的CSS放在區塊編輯器內建的「Additional CSS class(es)」，之後改樣式只需要在Advanced Script裡面統一修改就能套用到全站。

以下是改版前後的對比影片

單一文章頁面改版重點

在上一篇❐【首頁改版】中，最大的重點是「統一色調」＋「統一樣式」；而單一文章頁面中，則是「簡化顏色」＋「簡化樣式」。

由於我的文章字數較多，早期的文章多為理論和研究，字數往往上萬字，於是，為了方便讀者找重點，又或者為了加強某些文字區塊，我使用了多種顏色與樣式作為文字方塊的背景以及圖文呈現，整篇文章滑下來，相當雜亂。
此外，左右二側的功能性選單更是花俏，容易干擾閱讀體驗，這些都會在這次的大改版中整理乾淨。

簡化顏色

在上一篇❐【首頁改版】中，提到了我的網站是以2個主色，再從同色調中找到3個輔色作為點綴。但是，在單一文章頁面中，希望能夠讓讀者專注於文字，所以，不需要用到這麼多的顏色，只取主色深灰棕色（#625b55），再輔以淺灰綠色（#d4dce0）作為點綴即可。

簡化樣式

分成「區塊編輯器」內建的樣式、OXYGEN模板和OXYGEN的Block Library。
OXYGEN模板和OXYGEN的Block Library最容易，只需要進OXYGEN裡面修改，就能套用全站的單一文章。
比較麻煩的是「區塊編輯器」內建的樣式，正常來說，只能每一篇文章進去逐一修改。

不過，初步掃描我的情況，使用到區塊編輯器內建的樣式，應該只有為某一段文字段落「加上背景色」，而「加上背景色」這件事，在區塊編輯器中正好也內建了一個自訂的CSS selector has-background。所以，以往在區塊編輯器中加上背景色的那些段落，自然也被區塊編輯器的內建設定自動加上了has-background這個CSS selector，於是，我只需要在Advanced Script或Code Snippet裡面，爲has-background這個CSS selector重新定義一個背景色，並且加上!important，就能快速覆蓋原本在區塊編輯器裡的五顏六色囉！

前面提到「在Advanced Script或Code Snippet裡面，爲has-background這個CSS selector重新定義一個背景色，去覆蓋原本在區塊編輯器裡設定的段落的背景色…」

其實，這個做法算是比較投機取巧的做法，最理想的作法還是認命地進區塊編輯器裡面逐一修改。
因為，這種投機作法，在頁面載入時，會增加一些CSS樣式的文檔，在Chrome的devtool裡面可以看得到重複的CSS被劃掉。不過，在我的情況中，一篇文章頂多只有數個段落的背景色因為重複而被劃掉，多出來的CSS文檔極小，不太會影響頁面載入的速度，差別只剩下inspect時看得不爽罷了。

改版歷程

分成「區塊編輯器」內建的樣式、OXYGEN模板和OXYGEN的Block Library。

Total Time: 1 day

左右側欄的功能樣式

這個是OXYGEN的模板，可以直接修改。
原本的顏色與樣式太雜亂，有前輩說就算是他的大螢幕中，也覺得相當干擾閱讀的氛圍。
我自己看也覺得挺亂，於是便將「電子報訂閱」和「贊助」統一成一個可展開的Icon，並且統一二邊側欄小工具的高度和顏色，讓整體的版面視覺較為乾淨。

Tab圖片切換

這也是我用OXYGEN Library製作的圖文Tab，目的是為了讓同類型的圖文能夠快速切換，因為我自己非常不喜歡一班的部落格文章中，大量的圖文上下排列，增加頁面長度。
而一開始也是考量讓讀者能夠清楚知道可以使用按鈕切換不同的圖片，但是，這也讓整體的視覺太笨重，於是便調整成簡單的小型文字，以不破壞簡潔的視覺為大原則。
因為是在OXYGEN中製作的Block Library，所以，直接在OXYGEN中修改，就能套用全站。

延伸閱讀

原本是基於SEO考量，增加讀者點擊更多的網站內網址，而將延伸閱讀設計成較顯目的樣式。不過，有前輩建議，延伸閱讀並不是內容的重點，真的不需要這麼顯目的去干擾閱讀節奏…我自己想想也對，基於整體版面的簡潔和可讀性，便調整成簡單的Icon指引。
由於這個也是在OXYGEN Library製作給區塊編輯器能夠新增的小工具，也是在OXYGEN中修改樣式就能套用全站有使用到這個小工具的地方。

強調用的區塊段落

統一顏色為冷色調的淺灰色（#f0f2f4），選擇冷色調是為了和文章頁面中的裝飾色（#cad4c9）較為協調。
而這個改版則是將區塊編輯器內建的has-background這個CSS selector，在Advanced Script中重新定義，去覆蓋原本在區塊編輯器裡面的設定值。

標題

H2~H4統一改成主色「深灰棕色（#625b55）」。
因為這個樣式的設計是在OXYGEN中先設定顏色，再到Advanced Script中定義before的左邊線，所以，修改上非常快速，可以直接套用全站。

以上，是單一文章頁面的改版細節，有任何想法或建議，都可以在留言中告訴我囉！