航海王wiki
Advertisement

給不知道 CSS 是什麼的人,CSS 是一種可以調整頁面外觀的檔案。MDN的詳解

「英文站好精彩啊...」[]

英文航海王Wiki的人物顏色千變萬化,但他們只用了一個參數,叫做 colorscheme:只要你輸入指定的文字,Fandom.com 裏面的 CSS 就會自動幫你載入對應的 CSS,而不用直接寫死。

Screenshot 2019-09-01 at 17.51.53

如圖所示,英文航海王Wiki的人物框顏色並不像中文站這樣用 style 寫死在 HTML,而是透過載入 CSS 實現的。他們是在 Common.css載入 One_Piece_Wiki:Color_Scheme_Key/CS.css 的:因為英文航海王Wiki和本站一樣,都是在2014年7月之前成立的

總之,我想試試看能不能套用上 colorscheme 的設定。然而最後失敗了:雖然 HTML 部分他們是吃了 colorscheme 的參數,但 CSS 的部分我不管怎麼寫,右方導航框好像都吃不到 CSS 檔案。我在想...會是中文版 Wikia.css 還是 common.css@import 有問題嗎?這 CSS 也有詭異的歷史包袱啊。

我會再試試看的。

Nami balletto GIF

咦?複數?[]

我接着試着用幾次瀏覽器開發工具編輯CSS外觀,是可以動的。看到 Network 有載入我的 CSS,我不禁懷疑到底哪裏出問題。試到最後...呃...我貼 CSS 程式碼吧...

.pi-theme-StrawHatPiratesColors .pi-header,
.pi-theme-StrawHatPiratesColors .pi-title,

.pi-theme-StrawHatsPiratesColors .pi-header,
.pi-theme-StrawHatsPiratesColors .pi-title

對,CSS class 選擇器少了一個 s

不管如何,至少可以動了。看起來就像這樣:

Screenshot 2019-09-01 at 18.54.45

上線了![]

我調調Wikia.css裏面 @import 的位置到最上面後,網站果然載入程式了。再加緊努力,順便寫了航海王wiki:Colorscheme航海王wiki:Colorscheme/CS.css,然後 CS.css 用 Wikia.css 引上去。這次終於上去了!可以去Template:娜美訊息框看看效果。

騙人布:天氣好差!
布魯克:下着雷雨!
羅賓:刮着強風!
佛朗基:海象很糟!
娜美:指針沒指著目標!
喬巴:大海是紅色的!
香吉士:眼前一片火海!
索隆:簡直就是地獄的入口!
魯夫:誰怕誰啦!

──草帽一夥654話

Advertisement