想要幫你的社區或專門為自己設計代碼?這個頁面會提供更多的背景知識來協助你。
關於比較基本的介紹,參見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)的技術一直在不斷變化,瀏覽器也同樣不斷地變化著。因此,有些錯誤信息不一定需要更改。
常見的問題[]
問題 | 解釋 |
---|---|
@import prevent parallel downloads, use <link> instead
|
Link標籤一般用於導入CSS,但是MediaWiki並不支援在沒有使用JS的情況下使用你自己的link標籤, 因此這個問題一般可以忽略。 |
Expected X but found Y
|
這個意指你在屬性中輸入了一個無效的值。例如,在'color: foo; ' 中,foo對於顏色屬性來說,是一個無效的值,因為它不是一個顏色。
有時並不是值無效,而是編輯器不支持這個值,例如 |
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-F5或Ctrl-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
- 有許多腳本當在同一個頁面跑兩次以上的時候會出問題。因此要確認你只有把特定的語法放在這些檔案中「一次」。不要把同樣的語法轉貼在好幾個檔案中,有可能因衝突而造成令人困擾的錯誤。
參見[]
- 版面配置
- 主題設計器
- 導入更多JS內容:導入JS或CSS檔案。
- 自訂聊天CSS與JS - 聊天功能中使用CSS和JSS。
- 導入Google字體 - 選擇想要的字體。
- 自訂CSS與JS - 關於所有JS和CSS的主題頁面。
更多帮助和反馈[]
- 於帮助:帮助中心瀏覽或搜索其他帮助頁面。
- 查看Fandom社区中心以尋求更多協助和支持。
- 查看联系Fandom頁面,了解如何报告本條目中的任何錯誤或不清楚的步驟。