FANDOM


注意:本頁面內容已不再使用,僅作為歷史頁面保存

當FANDOM逐漸更改文章頁面的界面時,會不斷有新資訊加到此頁面。這個頁面除了記述變更之外,也會記錄可能的問題、原因以及可能的解決方式。如果你看到了一些這個頁面上沒有提到的問題,請使用 Special:Contact 來告知我們,我們會盡力解決修復。

斷點和字體 ( 2015年4月/5月)

在第一階段的界面更改中,FANDOM在FANDOM的彈性界面(responsive layout)中加入斷點設定(breakpoints),並引入了一些相關的字體更新。

斷點設定可幫助界面藉由基於用戶的銀幕寬度將內容區域調整至特定的寬度,來讓界面顯示的樣子能更加確定。而在我們稱之為大銀幕桌上電腦(Desktop XL)的最大斷點設定中,會放大字體以及行高。目前大銀幕桌上電腦定義為寬度大於1595px。除此之外,其他大小的斷點設定都會維持目前的字體大小與行高。

字體的變更會只用於「標題、內文以及一般的引文」。但如果模板沒有加上適當的class,也有可能字體會更改,而破壞了模板的顯示。

目前已可以在全面發佈之前,預覽字體變更後的樣子,只要在特定頁面的網址後面加上?oasisbreakpoints=1&oasistypography=1 即可。 例如: http://gameofthrones.wikia.com/wiki/Tywin_Lannister?oasisbreakpoints=1&oasistypography=1

請注意,為了要看到這些變更,你必須在較大的銀幕上觀看,至少需要寬 1595 px ,只有這樣才能看到大銀幕桌上電腦(Desktop XL)的斷點設定

大部分你可能會看到的問題應該可以透過模板的class名稱,或調整wiki的CSS來解決。這部分將是工作的進程來處理,工作人員會確認問題都能解決。

字體更改表格

一般桌上電腦/平板電腦 大銀幕桌上電腦
(字體大小/行高)
H1 - 標題 28 / 28 34 / 34
H2 - 標題 20 / 22 28 / 30
H3 - 標題 17 / 22 22 / 24
H4 - 標題、引文 15 /22 20 / 28
內文 14 /22 16 / 26


注意:

  • 字體變化只有在至少1595px寬的大銀幕上才會發生。
  • 字體變化只會在「標題、內文以及一般的引文」。
  • 引文的定義是使用 "blockquote" 標籤。.
  • 字體變化不會用在class為"infobox"的字體上。如果這個class沒有放在資訊框模板上,那麼表格裡面的文字就會變化。在我們的 最佳實踐的介紹中,就有建議要將class名稱放入你的資訊框模板。

如何修復模板

有了新的斷點設定以及字體變化設定之後,所有選擇器WikiaAritcle(div class="WikiaArticle"或css選擇器: ".WikiaArticle") 最高層中的元素都會使用我們設定的字體大小和行高。但這個變化不會覆蓋 WikiaArticle底下其他在我們的語法庫或在各wiki的CSS中設定的元素(例如表格),如果你使用任何其他元素來設定樣式(例如 .WikiaArticle .Navbox),它會優先於我們設定的預設樣式。

如果你想要讓一個元素的樣式與預設有所差異,只要在你的樣式表中增加新的類別(class),用技術用語來說,就是所有僅使用.WikiaArticle 以外選擇器的元素(例如WikiaArticle table, .WikiaArticle .navbox)都不會被我們的更改所影響。

作為參考,: 這是我們創建的代碼:

.WikiaPage {
    .WikiaArticle {
        font-size: x; 
        line-height: y;

        .infobox {
           font-size: <old value>;
           line-height: <old value>;
        }
    }
}

背景

在新的斷點設定之下,背景的界面會被較寬的內容空白覆蓋。新的1084px寬度意指你的界面兩側會有增加的17px內容空間。這個情況也會在大尺寸桌上電腦發生。如果你想要重新設計你的界面(skin)來處理這17px。我們之後將會更新 背景幫助頁來提供你需要的各種指引。

常見問題

以下是一些常見的問題。

  • 斷點設定的作用是什麼?
    • 斷點是另一種創建彈性界面網頁的方式。目前我們的彈性界面是在每一個像素作對應。而斷點設定的作法不同,它只有在特定的位置對應。這會讓用戶體驗較為可預測,對於不同的用戶在Wikia創建內容時更為方便。
  • 為什麼可閱讀區域變小了?
    • 我們用斷點設定減小了最大寬度,這讓更多的用戶容易使用。目前的網頁最寬可以到達1600px,但這造成一些用戶使用上的問題,尤其在模塊、表格、行寬等問題上。
  • 為什麼字體變這麼大?
    • 最大的斷點設定中字體放大了,這讓每行的字數維持在符合最佳閱讀體驗。這幾年來有許多的最佳實踐的探討指出了每行的字數範圍能達到最佳效果。對大多數的人來說,頁面上內容過多通常會更難而不更方便閱讀消化。字體的變更就是要解決這個問題。