Wiki中的CSS

施工中。内容仅针对BWiki，部分特性与其他Wiki平台不同

CSS文件列表

MediaWiki:Common.css 全局CSS，为所有用户加载。是维护者主要关注的CSS文件。
MediaWiki:Vector.css 为使用默认皮肤（Vector）的用户加载。我们推荐保持BWiki默认皮肤Vector，不推荐选择其他皮肤。
用户组CSS，如MediaWiki:Group-sysop.css
MediaWiki:Mobile.css 为移动设备用户加载（由扩展MobileFrontend提供）可以只关注MediaWiki:Common.css。（由于BWiki的特性，实际上没必要使用其他CSS文件）。更多不常用的CSS请参阅Mediawiki Manual: Interface/Stylesheets。

个人CSS ：这些样式只对用户自己生效。

User:用户名/common.css 默认加载
User:用户名/Vector.css 针对不同皮肤，如针对Vector皮肤为Vector.css

其他CSS

BWiki还加载了内置的CSS。它们由BWiki会定期更新维护，不能被用户更改。

如果你打开浏览器开发者工具（F12打开），在网络标签页选择筛选CSS，再强制刷新页面（ctrl+f5）,就能看到一系列CSS被加载。如bootstrap.css、rank-buddle.css、styles.css、toapp-buddle.css、pluginsCommon-buddle.css……

修改CSS文件

与其他页面一样，使用Wiki功能-编辑，也可以用Alt+Shift+E快捷键。

修改CSS时，建议多写注释，以说明代码意图。有必要的话，建立开发者文档。

与修改其他页面不同的是——内容页面的错误只影响一个页面修正后可以刷新缓存，但CSS文件中的错误会波及整个Wiki，且无法主动刷新缓存（BWiki会缓存约半小时）。

编辑CSS/JS时，编辑器的顶部功能栏会有所不同。因为Mediawiki支持不同的页面内容模型，典型的是内容页和代码页。

修改CSS时，主要检查是否兼容既有的响应式设计，即手机、平板、常规屏幕、大屏幕是否显示正常。

使用独立CSS文件

独立的CSS文件便于单独维护某一用途的CSS。具体来说可以在Common.js中加载其他JS和CSS。

代码示例：

在tools wiki的MediaWiki:Common.js中增加：

mw.loader.load("/tools/MediaWiki:Main.js?action=raw&ctype=text/javascript", "text/javascript");
mw.loader.load("/tools/MediaWiki:Main.css?action=raw&ctype=text/css", "text/css");

即可加载对应的css、js文件。

如果用在其他wiki，应该修改其中的tools为对应wiki域名，如

/* 对于 csl wiki */
mw.loader.load("/csl/MediaWiki:Main.js?action=raw&ctype=text/javascript", "text/javascript");
/* 对于 skyrim wiki */
mw.loader.load("/skyrim/MediaWiki:Main.js?action=raw&ctype=text/javascript", "text/javascript");

Wiki页面结构和样式

在html body中，首先是biligame的导航，下方页面内容位于div container中（基于bootstarp）。页面内容从上到下分为：Wiki导航（.wiki-header）、主要内容（#content）、页尾（.footer-public）。

原则上来说，Wiki不应该修改biligame导航、页尾的样式和内容。

在Wiki页面布局，和默认首页上，BWiki大量使用了Bootstarp（v3.3.7）。

常见修改

隐藏评论区

/* 隐藏主命名空间的评论区*/
.ns-0 #flowthread{
	display:none;
}

章节编辑按钮悬浮出现

/* 章节编辑按钮 悬浮出现*/
h2 .mw-editsection, h3 .mw-editsection, h4 .mw-editsection, h5 .mw-editsection {
    opacity: 0;
}
h2:hover .mw-editsection, h3:hover .mw-editsection, h4:hover .mw-editsection, h5:hover .mw-editsection {
    opacity: 1;
    transition: opacity 0.5s;
}

修改页面背景

如果直接修改body背景，会影响api页面的背景。因此再次给 .mw-special-ApiHelp 修改背景。来自csl2 wiki

body {
	background:url("https://patchwiki.biligame.com/images/csl2/5/59/29vb04dqpuxxvlrw3ompbrk2q3krtpj.jpg") no-repeat fixed 50% 0;
	background-size:cover;
}
.mw-special-ApiHelp{
	background:blanchedalmond !important;
	background-size:cover;
}