本頁使用了標題或全文手工轉換

使用筆記/外觀篇

From 存档计划
該頁面的編輯正在進行中。

請幫助我們擴充或改進這篇文章。

外觀(Skin),作為站點的臉面,自然不能隨便糊弄。MediaWiki.org上有記錄的所有外觀在這裡可以看到。

但是,外觀的完整程度、美觀程度、行動端適配能力等,可能會隨著時間而變得不那麼適合現代需求。以下會介紹一些外觀。

Timeless[edit | edit source]

Timeless的預覽圖。

Timeless是一款非常好看、完整,適用於各種螢幕尺寸且同時顧及編者和讀者需要的外觀。這也是我站預設的外觀之一。

除了在圖示搭配上不太符合Material Design式的審美,這是一款相當可用的外觀。它也被用於維基媒體基金會代管的wiki上,比起單調而經典的Vector來說,Timeless算是新鮮血液了。

Timeless是MediaWiki提供的安裝壓縮檔的內建外觀之一。

背景圖片設定[edit | edit source]

Timeless預設的背景是一個透明的貓的svg圖片。如果你希望改成別的,比如你站Logo的灰度透明化版本,那麼需要填寫$wgTimelessBackdropImage這個本地設定。我的組態是"/images/1/10/Backdrop.svg",這樣可以透過MediaWiki本身的檔案管理追蹤背景圖片。

Vector[edit | edit source]

Vector的預覽圖。

Vector是一款相當經典的外觀,維基百科的預設外觀就是它。

隨著時代變遷,Vector已經逐漸不再符合現代要求了。其內建的實驗性回應式設計的效果不理想,而且「新版Vector」也有一些倒退的嫌疑。

它仍然是一款好外觀——但是除非新版Vector能讓它華麗轉生,否則它很可能會步MonobookModern之後塵。

Vector是MediaWiki提供的安裝壓縮檔的內建外觀之一。

啟用回應式設計 [edit | edit source]

使用本地設定$wgVectorResponsive

需要注意的是,1.36之後需要額外設定$wgVectorDefaultSkinVersion = '2';

Minerva Neue[edit | edit source]

Minerva Neue的行動端預覽圖。

Minerva Neue是一款針對行動端設計的外觀,與MobileFrontend搭配效果更佳。

優勢 [edit | edit source]

由於一開始就是MobileFrontend的附屬品,所以和MobileFrontend的相性很好。

同樣的,這也是wmf代管的wiki所使用的外觀,因此相對功能也做的比較完整,比較穩定。

Sitenotice[edit | edit source]

使用$wgMinervaEnableSiteNotice這個本地設定。注意由於行動版頁面的css和js載入有延遲,因此如果你的Sitenotice使用了一些自訂js,請務必檢視在行動版是否在js載入前顯示正常。

問題 [edit | edit source]

  • 側邊欄不支援自訂。需要使用JS等非外觀內部方式。
  • 本身沒有從色彩角度開發,因此如果要自訂也只能自己寫CSS,沒有內部方式。
  • 通知按鈕有時會超出頁面寬度。
  • 截至最後一次編輯,Safari瀏覽器上點擊左上角選單按鈕後直接關閉選單會導致頁面凍結。
  • 桌面端效果不佳,一般來說桌面端不會使用此外觀,雖然其一直在嘗試適配桌面端體驗。
  • 由於MobileFrontend的加持,部分class可能會被隱藏掉。原本這是一種「行動端最佳化」,但是有可能反而會把你需要的內容給隱藏掉。

Citizen[edit | edit source]

Citizen的預覽圖。

Citizen是星際公民百科設計的一款外觀,擁有一定的Material Design設計。和Timeless一樣,它也原生支援回應式設計,並且內建亮色/暗色模式。

問題[edit | edit source]

和Cosmos一樣,沒有拆分變體選單,導致下拉式選單根本沒法用。

其頁尾的自訂文字基於系統訊息,會導致你站點支援的語言都需要寫一遍,即使你希望這些文字在每個語言下都一模一樣。

Cosmos[edit | edit source]

Cosmos的預覽圖。

Cosmos參照Fandom平台的桌面端外觀Oasis並致力於改進其體驗。其可以幫助從Fandom平台遷出的使用者平緩過渡到原版MediaWiki。

與PortableInfobox的聯動[edit | edit source]

PortableInfobox在移植出Fandom舊平台時移除了Europa主題,而Cosmos對其做出了補充,可以透過一個設定打開Cosmos下的Europa資訊框主題。

側欄[edit | edit source]

頁面側欄(Rail)與Oasis的自訂方式不太一樣。Oasis上使用的是這個JS載入,但是Cosmos使用的是本地設定參數$wgCosmosEnabledRailModules和自訂系統訊息。

當然,如果設定了側欄,側欄的寬度會把實際頁面內容寬度擠掉一部分。如果你的頁面需要更寬的寬度去展示內容,也有對應的本地設定和魔術字。

問題 [edit | edit source]

Cosmos沒有分離變體選單,導致下拉欄也沒法用,甚至導致了編輯按鈕顯示成取消的bug。

以及,Cosmos雖說是參照改進,但是在事實上應該是沒有形成自己的設計系統的——也就是說,雖然Oasis確實做得不太好,但是Cosmos所謂的改進也沒好到哪裡去。當然,開發者自己倒是感覺十分良好。