界面样式和脚本

在 BWiki 中，自定义界面和功能主要通过层叠样式表（CSS）和 JavaScript（JS）实现。本页简述了使用方式和平台特性。

使用 CSS 和 JS

全站范围:

修改它们需要用户组“界面管理员”。

其中，Common.js中的JS需要通过Mediawiki的ES5语法检查，相关工具：ES5检查(eslint)

请注意：由于BWiki的缓存策略，修改后需要等待约半小时才会生效。

页面级：

内联样式：直接写HTML如 <div style="color: red;">，但此方式难以维护，不推荐大规模使用
CSS扩展：通过#css函数添加CSS，如{{#css: css代码 }}。最终CSS插入在页面head标签中。
BStyle：等价于<style>的标签，通常配合pre标签使用：<bstyle>/*<pre>*/ css代码 /*</pre>*/</bstyle>。最终CSS插入在标签位置

这三种方式所有用户都能使用。内联样式和#CSS中的代码受到安全限制（不能使用如var、url等特性），bstyle标签支持更完整的CSS特性。

细节特性和实践，请参阅#css文档和BStyle文档。

Gadgets扩展：

扩展主页：Gadgets

管理员用户可以通过配置MediaWiki:Gadgets-definition来创建和管理一系列小工具（gadget），用户可以在参数设置中按需开启或关闭。

Gadgets中的JS同样需要通过ES5语法检查。

Widgets扩展：

扩展主页：Widgets

管理员（和小部件编辑者用户组）可以通过创建Widget命名空间的页面来封装可复用的HTML/JS片段，并在其他页面中像调用模板一样调用它们。比如B站视频Widget。

编辑 Widget 时必须对用户参数进行严格的过滤，否则极易引入跨站脚本（XSS）安全漏洞。

浏览器内置的开发者工具（按 F12 键开启）是编写和调试CSS与JS的必备工具，请务必学会使用它。

元素检查器：这是最常用的功能。您可以点击页面上的任何元素，查看其HTML结构、应用的CSS样式规则。您可以实时修改这些样式，预览效果，从而快速找到需要修改的选择器和属性。
控制台：JS代码的运行输出、错误和警告信息都会在这里显示。当您的脚本未按预期工作时，控制台是寻找线索的第一站。您也可以在这里输入简单的JS命令进行临时测试。
网络：监控页面加载的所有资源（脚本、样式表、图片等），用于分析页面加载性能，检查文件是否被正确加载。

掌握开发者工具，意味着您拥有了自行排查和解决问题的能力。

注意：这是Wiki在保证有内容的基础上，提升用户体验的可选项。绝大部分Wiki都没有专业开发人员辅助，因此有余力再尝试。

目前手机的平均更换时间约3-4年，BWiki约一半用户从移动设备访问Wiki，一个完善的Wiki当然需要考虑这些用户的体验。

因此在设计界面时就需要考虑使用响应式设计和渐进增强策略来低成本的兼容移动设备，BWiki内置了Bootstrap v3.3.7，很容易提供基本的适配。

要保证上述用户正常访问Wiki，具体来说是要兼容近3-4年的Chrome和Safari，因为：

桌面端：用户通常会保持浏览器更新，主要需兼容最新版本的 Chrome、Edge和Firefox。
移动端：情况较为复杂。国内绝大多数移动浏览器内核基于/兼容 Chromium，但其版本往往滞后。同时需考虑苹果的 Safari。因此，移动端的兼容性基准可以定为近3-4 年的 Chrome 和 Safari。

这种兼容策略能保证绝大多数用户访问正常，且维护压力不会太大。

更具体一点，对于非专业开发者来说，需要使用较新的CSS特性时，可以尝试在caniuse网站或 MDN CSS文档中找浏览器兼容性表检查。一些工具如autoprefixer、doiuse可以辅助。

无论如何，Wiki的内容才是第一要务，有限的社区精力应该始终以内容建设为核心。

Web技术的设计初衷就是为了让所有人都有能力自行编写网站，因此学习HTML和CSS并不困难。只要了解其设计意图和功能框架，任何人都能迅速掌握。

MDN Web 文档提供了完善的文档和入门教程，也有不少类似现代JS教程等成体系的教程。

需要注意，Web技术涉及的知识点非常多，建立知识框架/体系格外重要，避免过早的陷入海量细节中。初学者应避免看菜鸟/W3School等不完善、不成体系的碎片知识站（请参阅通用建议）。