16,874
个编辑
LLWiki正在建设中，欢迎加入我们！
“LLWiki:管理员技术手册”的版本间差异
跳转到导航
跳转到搜索
无编辑摘要
小 |
|||
|
===小工具分类===
===MediaWiki核心模块介绍===
本章节介绍LLWiki使用或曾经使用的MediaWiki核心模块，更完整的列表参见[[mw:ResourceLoader/Core_modules/zh|MediaWiki]]和[https://doc.wikimedia.org/mediawiki-core/master/js/ JSDuck]。
====mediawiki====
====jquery====
====mediawiki.Uri====
====mediawiki.storage====
====mediawiki.
====
====jquery.makeCollapsible====
====jquery.
====jquery.textSelection====
====jquery.client====
====jquery.color====
====jquery.ui====
====jquery.tipsy====
====jquery.chosen====
====oojs-ui-core====
====oojs-ui-windows====
====mediawiki.widgets====
===ESLint===
CodeEditor使用ESLint标注可能存在的语法问题。LLWiki并未在后台预先规定太多规则，目前比较常用的仅是在<code lang="js>"use strict";</code>的基础上添加<code lang="js">/*global mw, $, OO, wgULS*/</code>或类似语句注明全局变量。特别要注意ESLint并不会对JS模块不允许使用的ES6语法作出警告（详见[[#ResourceLoader和JS模块]]），因此请勿过度依赖这一功能来进行除错。
===注意事项===
====图片懒加载====
===手机版CSS===
手机版LLWiki使用Minerva Neue皮肤，与桌面版的Vector皮肤相比，不仅界面有很大差异，众多基础HTML元素也都添加了不同的CSS样式。为了适配窄屏设备，Minerva皮肤还添加了大量基于<code lang="css">@media</code>的规则，一般以设备宽度720px为界使用不同的样式。以下着重介绍<code><table></code>和<code><img></code>这两种需要CSS修正的重灾区。
手机版CSS很多时候依赖外层容器的<code>content</code>类来生效，与此同时<code lang="css">#mw-content-text .mw-parser-output</code>的外层结构也同样有效，设计各种基于API的快速编辑工具（如Wikiplus等）的预览界面时需要考虑。
====表格====
对于<code><table></code>元素及其子节点，手机版已知会自动添加以下样式：
<pre lang="css">
table, caption, tbody, tfoot, thead, tr, th, td {
font-size: 100%;
}
table {
border-collapse: collapse;
}
.content table {
margin: 1em 0;
overflow: auto;
overflow-y: hidden;
overflow-x: auto;
}
@media only screen and (max-width: 720px) {
.content table {
display: block;
width: 100% !important;
}
}
</pre>
这里重点说明一下第二和第四条规则造成的影响。第二条规则使得表格的外层边框、行边框和单元格边框合并，可能造成一系列关于边框的CSS规则出现不符合预期的表现，尤其是<code><table></code>的<code>cellspacing</code>属性。因此一般建议避免使用<code>cellspacing</code>这一HTML属性，改为使用CSS中的<code>border-spacing</code>。另外，在需要<code>border-spacing</code>或<code>border-radius</code>等样式时，请同时指定<code lang="css">border-collapse: separate;</code>以使手机版生效。
第四条规则的本意是在窄屏上<code><table></code>元素不会将页面撑得过宽，但这同时会造成外层的<code><table></code>和内层的<code><tbody></code>分离。特别是如果外层<code><table></code>规定了边框或背景色时，很容易看出样式的错误。为此一般需要主动指定<code lang="css">display: table;</code>以修复这一问题，LLWiki有很多预定义的表格CSS类也都添加了这一规则<ref name="site-styles">[[mediawiki:gadget-site-styles.css|全站CSS]]</ref>。但这又同时会造成过宽的表格将整个页面都撑得过大了。LLWiki现定义了<code>table-wrapper</code>类<ref name="site-styles" />，用于套在这样的宽表格外：<code lang="html"><nowiki><div class="table-wrapper"></nowiki></code>，这个外层容器会在窄屏上通过<code lang="css">overflow-x: auto;</code>限制里面的表格宽度。
====图片====
====皮肤界面====
====其他====
===手机版JS===
====手机版JS模块====
| |||