Timo

【這篇文章撰寫於 2021 年 9 月。】

試就知道，試又不用錢。

這句話是我大學時期的數值分析老師常常掛在嘴邊的話，目的是要告訴我們很多指令試了就知道，我當初沒有把它放在心上，還把它當成一個玩笑在看，因為我覺得他在課堂上雖然是在「試」給我們看，但是其實他早就知道答案了，實際上真的可以這樣「試」嗎？

直到我開始打部落格，架一個自己的網站，我才深深體會到這句話的實在，請聽我娓娓道來。

在建立這個網站的一開始，我嘗試只使用 WordPress 和 Astra 內建的功能來調整外觀（我原本想用 Hugo，但是太多程式碼我實在弄不懂⋯⋯），但畢竟是內建的，能動的地方實在有限，沒辦法完全達到我的要求。為了調整出我自己滿意的外觀，我嘗試使用一個叫 CSS 的東西來做，我也不是很懂相關的技術性內容就是了，但是我目前把它理解成：打幾行程式碼就可以客製我想要的外觀。

問題來了，我完全不懂它的語法是怎麼運作的，我嘗試在網路上搜尋我想達成的事情，但是我找來找去，就是找不到有人有跟我一模一樣的需求，還把解答（也就是能滿足我的需求的程式碼）打出來好讓我直接複製貼上到我的網站，完全沒有（或許是我搜尋功力不夠吧，但是我中文英文的關鍵字都找過了），這讓我必須自己想辦法弄出能滿足我需求的程式碼。

聽起來有點複雜，直接舉例子給你們看比較快。

直接舉例

在架設網站的最一開始，我想要在最右邊側邊欄，放上「最新文章」和「文章分類」的功能，他原本預設是長得像下圖這樣：

目前的樣子看起來其實已經很不錯了，但是我覺得行距過大，我想要縮小一點，然後我也想讓它看起來是清單的樣子，但是我不知道要怎麼做。

於是我開始瘋狂搜尋有關 CSS 的資訊，後來我理解到我需要先打一行程式，告訴它我要改變的東西的位置（以我現在的例子就是側邊欄），然後要在後面接大括號，裡面放我要怎麼改變它的樣式。

（P.S. 先說聲抱歉，我的理解可能不完全正確，我不是這方面的專家。）

第一步：指定側邊欄

就像我一開始說的，我找不到有人有跟我一模一樣的需求，我只能找跟我有類似需求的人，看他們的程式碼來下手，修改成我需要的。經過我的東試西試、東拼西湊，後來成功被我找到「側邊欄的清單」在 CSS 裡面叫什麼，我打的程式碼長得像這樣：

.wp-block-column li{
  
}

有幾件事情值得提一下：

• 我哪知道只是指定個側邊欄，要打 .wp-block-column，而不是比較容易聯想到的 「sidebar」。
• 我哪知道我要的清單 list，在 CSS 裡面要打成 li。

上面這兩個都稍微比較好解決，查了就有（雖然也查了一段時間），所以目前為止，我完成了第一步。

第二步：增加、修改清單樣式

再來要在大括號裡面做文章，我需要告訴 CSS 我要增加並且修改的清單樣式，這個還好處理，因為許多人都有一樣的需求，所以一下就找到了，我需要打的是 list-style，所以現在我的程式碼變成

.wp-block-column li {
	list-style:
}

接下來要在冒號後面接我要的清單樣式，但是問題來了，我怎麼知道我要的黑點點清單樣式在 CSS 裡面要打什麼，我想起以前的老師是怎麼教我們的：「試就知道，試又不用錢。」所以我真的就試了好幾個我覺得有可能的：

• circle，不行，因為它會是空心的圓。
• dot，沒反應，CSS 應該是看不懂這個。
• black circle，也沒反應。
• dotted circle，還是沒反應。

後來我跑去官網查，試了它所有列出來的指令，完全沒有我要的黑點點樣式，「這說不過去啊，這是很基本的樣式吧。」我心裡這麼想，我不放棄，一直試、一直猜，最後真的成功被我試出來，原來要打 disc 啊！

真的是試了就知道耶！

到目前為止，我完成了第二步，這是我打的程式碼：

.wp-block-column li {
	list-style: disc;
}

而它的樣式變成：

第三步：微調和調整行距

黑點點是有了，但是後來我又發現一個問題，如果我程式就只有這樣，手機版就會變成

這是我直接從手機截圖下來的（手機只有裡面白色的部分，沒有周圍灰色的部分，是為了不跟網頁的白色混淆才後製上去的），你們看這個黑點點被擠在最左邊也太醜了吧，所以我得要把整個清單移往右邊移一點，然後別忘記還要縮小行距，不過剩下的都很好猜了，它的指令挺直覺的，這是我打的程式碼：

.wp-block-column li {
	list-style: disc;
	line-height: 1.7;
	margin-left: 22.1pt;
}

用 line-height 來表示行距，用 margin-left 來表示左邊緣，這兩個其實沒有花我太多時間就試出來了，至於 pt 是我在打 $LaTeX$ 時就有的經驗，那是一個長度單位，我早就知道了。

最後，經過了好幾個小時的努力，最後終於變成我滿意的樣子，手機上也不會看起來很擠很怪，真是舒服。

心得

我之後還繼續打了其他的 CSS 程式來調整外觀，雖然都是很微小的改變，但是都是花了我不少時間來搜尋和嘗試，才被我弄出解答，一開始在弄的時候確實花了我不少時間，後來在理解它的邏輯和使用技巧後就越弄越快了，不得不說，當下被我試出來的那個 moment，其實還挺爽的。

延伸閱讀

1. 在寫完這篇文章的一年後，也就是 2022 年的 9 月，我終於將網站從 WordPress 搬到 Hugo 了！