FANDOM


想要幫你的社區專門為自己設計代碼?這個頁面會提供更多的背景知識來協助你。

關於比較基本的介紹,參見Help:自訂CSS與JS

註記:社區JavaScript需透過線上發信發送請求來開啟。參見JavaScript審核流程獲取更多信息。

CSS 與 JS 手冊

這個手冊列出了在FANDOM中,大多數可以更改的JavaScript及CSS頁面。最常見的選擇會加亮標示為綠色。

  • 請注意編輯這些檔案可能立刻不會立刻產生影響,你可能會需要等幾分鐘,並清除瀏覽器緩存
CSS
Stylesheet 位於 影響的 wiki 影響的用戶 影響的皮膚
MediaWiki:Wikia.css/Special:CSS 該wiki 該wiki 所有用戶 Wikia (預設)
MediaWiki:Common.css 該wiki 該wiki 所有用戶 不一定
MediaWiki:Monobook.css 該wiki 該wiki 所有用戶 Monobook
Special:MyPage/wikia.css 該wiki 該wiki 你自己 Wikia (預設)
Special:MyPage/monobook.css 該wiki 該wiki 你自己 Monobook
Special:MyPage/chat.js 該wiki 該wiki 你自己 聊天室
Special:MyPage/common.css 該wiki 該wiki 你自己 全部
Special:MyPage/global.css 英文社區中心 所有wiki 你自己 全部
Special:MyPage/global.css 英文社區中心 所有的 wiki 你自己 全部
JavaScript
Script file 位於 影響的wiki 影響的用戶 影響的皮膚
MediaWiki:Common.js 該wiki 該wiki 所有用戶 全部
MediaWiki:Wikia.js 該wiki 該wiki 所有用戶 Wikia (預設)
MediaWiki:Monobook.js 該wiki 該wiki 所有用戶 Monobook
Special:MyPage/wikia.js 該wiki 該wiki 你自己 Wikia (預設)
Special:MyPage/monobook.js 該wiki 該wiki 你自己 Monobook
Special:MyPage/common.js 該wiki 該wiki 你自己 全部
Special:MyPage/global.js 英文社區中心 所有的wiki 你自己 全部


CSS與JS錯誤確認

FANDOM的CSS和JS編輯器有錯誤檢查,以及語法突顯的功能:

  • 在你編寫的過程中,頁面會讓你知道語法中可能會有的錯誤。
  • 請注意,不是所有的錯誤都需要解決-CSS(以及JS)的技術一直在不斷變化,瀏覽器也同樣不斷地變化著。因此,有些錯誤信息不一定需要更改。

常見的問題

CSS 問題
問題 解釋
@import prevent parallel downloads, use <link> instead Link標籤一般用於導入CSS,但是MediaWiki並不支援在沒有使用JS的情況下使用你自己的link標籤, 因此這個問題一般可以忽略。
Expected X but found Y 這個意指你在屬性中輸入了一個無效的值。例如,在'color: foo;' 中,foo對於顏色屬性來說,是一個無效的值,因為它不是一個顏色。

有時並不是值無效,而是編輯器不支持這個值,例如word-break:break-word是正確的,但是編輯器暫時不支持break-word這個值,所以會發生誤報

Use of !important !important 一般應該避免在CSS中出現,因為會導致維護的困難,也會讓用戶在設定個人的CSS的時候出現重疊的設定。大多情況下,選擇合適的選擇器可以讓你避免使用 !important。例如,恰當利用>:not()等標記。
Unknown property 'codename'(無法辨識的屬性XXX) 雖然並非所有的CSS代碼都能被這個工具辨識(因為CSS本身也是不斷在更新的) ,但還有特定的 CSS代碼 是在用於特定物件時,可以在FANDOM頁面中被讀取。 (例如,mix-blend-mode: color-dodge;).

進階注意事項

將CSS應用在特定頁面上
使用CSS的class,你可以將CSS應用在特定頁面上。FANDOM文章頁面上的<body>元素會基於該頁面的名稱而有一個特定的標示(identifier)。例如,在這個幫助頁面上,class就是:
page-Help:進階JS和CSS
在body標籤中還有其他的Class可以讓你根據命名空間或其他的條件來使用CSS代碼。

一般的形式是'page-[文章名稱]', 空格和冒號用底線來取代。

將JS應用到特定頁面上
MediaWiki:Common.js,可以使用一個變更讓JavaScript只運作在特定頁面上:
switch (mw.config.get('wgPageName')) {
    case '頁面名稱':
        // 這裡的JS會應用到 "頁面名稱"上
        break;
    case '另一頁面':
        // 這裡的JS會應用到"另一頁面"上
        break;
}
將CSS和JS應用到特定社區
如果你偏好將你大部分的個人CSS都放在同一個位置(global.css),有一個內文標籤的class可以讓你設定至特定的Wiki。
這個設定是基於該社區資料庫名稱(database name) 不是網址 - 雖然二者常常一樣,但並非總是一樣。其形式為:
wiki-[database name]
而在JS可以使用 wgDBname 來使之只針對特定一個社區。


載入順序
一般在FANDOM的載入順序是: 核心代碼, 個別社區代碼,個人代碼。
同處一個層級的話, 載入順序是: 'common' 代表, 其次是特定外觀(皮膚)的代碼。
CSS中的!important
因為CSS的載入順序, 你可能有時候還是會用到 !important 來確保一個 CSS規則被執行。
緩存問題
你在網路上下載的檔案都會有 緩存。一般來說這是好事,因為這讓你的電腦和FANDOM的伺服器都節省了流量,但在設計變更的時候會造成問題。可能會讓你的修改需要花幾個小時才能生效,除非你使用以下的方法:
注意:在保存以后,您必须绕过浏览器缓存才能看到所作出的改变。
  • 谷歌浏览器(Google Chrome)- Windows:按下“Ctrl”键然后按 F5。OS X系统:同时按⌘ Cmd⇧ Shift键之后按R键。
  • Safari - 按住⇧ Shift键然后点击工具栏中重新载入键。
  • 火狐(Firefox)- Windows:按住Ctrl键然后按F5。OS X系统:同时按⌘ Cmd⇧ Shift键之后按R键。
  • Internet Explorer:按住Ctrl键然后按F5(或者点击“刷新”按钮)。


大多數情況下,這樣就足夠了,但有時候你會需要手動來刷新你最近曾經打開的頁面。
常用的 JavaScript 片段
如果想要從其他人撰寫的腳本中獲得一些概念,並找到你可能有用的內容,可以試著查看在Developers Wiki上的JS列表
雙重 JavaScript
有許多腳本當在同一個頁面跑兩次以上的時候會出問題。因此要確認你只有把特定的語法放在這些檔案中「一次」。不要把同樣的語法轉貼在好幾個檔案中,有可能因衝突而造成令人困擾的錯誤。

另參見

幫助及反饋

註釋

您使用了广告屏蔽软件!


Wikia通过广告运营为用户提供免费的服务。我们对用户通过嵌入广告屏蔽软件访问网站进行了使用调整。

如果您使用了广告屏蔽软件,将无法使用我们的服务。请您移除广告屏蔽软件,以确保页面正常加载。

查看其他FANDOM

随机维基