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 所有用户 不一定
Special:MyPage/wikia.css 该wiki 该wiki 你自己 Wikia (预设)
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 (预设)
Special:MyPage/wikia.js 该wiki 该wiki 你自己 Wikia (预设)
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
有许多脚本当在同一个页面跑两次以上的时候会出问题。因此要确认你只有把特定的语法放在这些档案中“一次”。不要把同样的语法转贴在好几个档案中,有可能因冲突而造成令人困扰的错误。

另参见

帮助及反馈

注释

除了特别提示,社区内容遵循CC-BY-SA 授权许可。