社区中心
注册
Advertisement

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

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

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

CSS 與 JS 手冊[]

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

  • 請注意編輯這些檔案可能立刻不會立刻產生影響,你可能會需要等幾分鐘,並清除瀏覽器緩存

CSS页[]

样式表 位置 受影响社区 受影响用户 受影响皮肤
MediaWiki:Common.css 社区 社区 所有用户 所有
MediaWiki:Fandomdesktop.css 社区 社区 所有用户 FandomDesktop
MediaWiki:Print.css 社区 社区 所有用户 (打印输出)
MediaWiki:Group-autoconfirmed.css 社区 社区 自动确认用户 所有
MediaWiki:Group-bot.css 社区 社区 机器人 所有
MediaWiki:Group-sysop.css 社区 社区 管理员及同级人员 所有
Special:MyPage/common.css 社区 社区 个人 所有
Special:MyPage/fandomdesktop.css 社区 社区 个人 FandomDesktop
Special:MyPage/fandommobile.css 社区 社区 个人 FandomMobile
w:Special:MyPage/global.css 英文社区中心 所有社区 个人 所有

JavaScript页[]

脚本文件 位置 受影响社区 受影响用户 受影响皮肤
MediaWiki:Common.js 社区 社区 所有用户 所有
MediaWiki:Fandomdesktop.js 社区 社区 所有用户 FandomDesktop
MediaWiki:Group-autoconfirmed.js 社区 社区 自动确认用户 所有
MediaWiki:Group-bot.js 社区 社区 机器人 所有
MediaWiki:Group-sysop.js 社区 社区 管理员及同级人员 所有
Special:MyPage/common.js 社区 社区 个人 所有
Special:MyPage/fandomdesktop.js 社区 社区 个人 FandomDesktop
Special:MyPage/fandommobile.js 社区 社区 个人 FandomMobile
w:Special:MyPage/global.js 英文社区中心 所有社区 个人 所有

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的伺服器都節省了流量,但在設計變更的時候會造成問題。可能會讓你的修改需要花幾個小時才能生效,除非你使用以下的方法:
注意:在发布之后,您可能需要清除浏览器缓存才能看到所作出的变更的影响。
  • Firefox或Safari:按住Shift的同时单击刷新,或按Ctrl-F5Ctrl-R(Mac为⌘-R
  • Google Chrome:Ctrl-Shift-R(Mac为⌘-Shift-R
  • Internet Explorer或Edge:按住Ctrl的同时单击刷新,或按Ctrl-F5
  • Opera:Ctrl-F5


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

參見[]

更多帮助和反馈[]


註釋[]

Advertisement