LLWiki正在建设中,欢迎加入我们

“LLWiki:管理员技术手册”的版本间差异

来自LLWiki
跳转到导航 跳转到搜索
第45行: 第45行:
====图片懒加载====
====图片懒加载====
===手机版CSS===
===手机版CSS===
手机版LLWiki使用Minerva Neue皮肤,与桌面版的Vector皮肤相比,不仅界面有很大差异,众多基础HTML元素也都添加了不同的CSS样式。为了适配窄屏设备,Minerva皮肤还添加了大量基于<code lang="css">@media</code>的规则,一般以设备宽度720px为界使用不同的样式。以下着重介绍<code>&lt;table&gt;</code>和<code>&lt;img&gt;</code>这两种需要CSS修正的重灾区。
手机版LLWiki使用Minerva Neue皮肤,与桌面版的Vector皮肤相比,不仅界面有很大差异,众多基础HTML元素也都添加了不同的CSS样式。为了适配窄屏设备,Minerva皮肤还添加了大量基于<code lang="css">@media</code>的规则,一般以设备宽度720px为界使用不同的样式。以下着重介绍<code>&lt;table&gt;</code>和<code>&lt;img&gt;</code>这两种需要CSS修正的重灾区。


手机版CSS很多时候依赖外层容器的<code>content</code>类来生效,与此同时<code lang="css">#mw-content-text .mw-parser-output</code>的外层结构也同样有效,设计各种基于API的快速编辑工具(如Wikiplus等)的预览界面时需要考虑。
手机版CSS很多时候依赖外层容器的<code>content</code>类来生效,与此同时<code lang="css">#mw-content-text .mw-parser-output</code>的外层结构也同样有效,设计各种基于API的快速编辑工具(如Wikiplus等)的预览界面时需要考虑。
第71行: 第71行:
}
}
</pre>
</pre>
这里重点说明一下第二和第四条规则造成的影响。第二条规则使得表格的外层边框、行边框和单元格边框合并,可能造成一系列关于边框的CSS规则出现不符合预期的表现,尤其是<code>&lt;table&gt;</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>以使手机版生效。
这里重点说明一下第二和第四条规则造成的影响。第二条规则使得表格的外层边框、行边框和单元格边框合并,可能造成一系列关于边框的CSS规则出现不符合预期的表现,尤其是<code>&lt;table&gt;</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>&lt;table&gt;</code>元素不会将页面撑得过宽,但这同时会造成外层的<code>&lt;table&gt;</code>和内层的<code>&lt;tbody&gt;</code>分离。特别是如果外层<code>&lt;table&gt;</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>限制里面的表格宽度。
第四条规则的本意是在窄屏上<code>&lt;table&gt;</code>元素不会将页面撑得过宽,但这同时会造成外层的<code>&lt;table&gt;</code>和内层的<code>&lt;tbody&gt;</code>分离。特别是如果外层<code>&lt;table&gt;</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>限制里面的表格宽度。
====图片====
====图片====
====皮肤界面====
====皮肤界面====
第89行: 第89行:
==滥用过滤器==
==滥用过滤器==
==测试账户==
==测试账户==
如果管理员需要一个没有[[project:自动确认用户|自确]]权限的测试账户用于滥用过滤器测试、小工具测试等,可以临时启用[[special:abusefilter/6|6号滥用过滤器]]来移除某个测试账户的自确权限。这个滥用过滤器的使用语法非常简单,请根据样例修改为对应的用户名即可,这里不再赘述。

==参考资料==
==参考资料==
[[Category:LLWiki指引]]
[[Category:LLWiki指引]]

2020年12月19日 (六) 07:36的版本

内容缺失.png 此页面内容严重缺失,急需您帮忙补充!(点此编辑)
可参考同类条目添加所需内容,并从官方等可靠渠道搜集资料编写,亦建议附上资料来源。

全站CSS

优先加载的CSS

滞后加载的CSS

CSS小工具分类

Widget(小部件)

小部件页面格式

小部件分类

小部件JS的特殊之处

Gadget(小工具)和全站JS

ResourceLoader和JS模块

不作为模块的JS脚本

小工具定义

小工具简介

小工具分类

MediaWiki核心模块介绍

本章节介绍LLWiki使用或曾经使用的MediaWiki核心模块,更完整的列表参见MediaWikiJSDuck

mediawiki

jquery

mediawiki.api

mediawiki.util

mediawiki.Uri

mediawiki.storage

mediawiki.cookie

user.options

jquery.makeCollapsible

jquery.tablesorter

jquery.textSelection

jquery.client

jquery.color

jquery.ui

jquery.tipsy

jquery.chosen

oojs-ui-core

oojs-ui-windows

mediawiki.widgets

ESLint

CodeEditor使用ESLint标注可能存在的语法问题。LLWiki并未在后台预先规定太多规则,目前比较常用的仅是在"use strict";的基础上添加/*global mw, $, OO, wgULS*/或类似语句注明全局变量。特别要注意ESLint并不会对JS模块不允许使用的ES6语法作出警告(详见#ResourceLoader和JS模块),因此请勿过度依赖这一功能来进行除错。

注意事项

手机版

手机版解析器

图片懒加载

手机版CSS

手机版LLWiki使用Minerva Neue皮肤,与桌面版的Vector皮肤相比,不仅界面有很大差异,众多基础HTML元素也都添加了不同的CSS样式。为了适配窄屏设备,Minerva皮肤还添加了大量基于@media的规则,一般以设备宽度720px为分界使用不同的样式。以下着重介绍<table><img>这两种需要CSS修正的重灾区。

手机版CSS很多时候依赖外层容器的content类来生效,与此同时#mw-content-text .mw-parser-output的外层结构也同样有效,设计各种基于API的快速编辑工具(如Wikiplus等)的预览界面时需要考虑。

表格

对于<table>元素及其子节点,手机版已知会自动添加以下样式:

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;
	}
}

这里重点说明一下第二和第四条规则造成的影响。第二条规则使得表格的外层边框、行边框和单元格边框合并,可能造成一系列关于边框的CSS规则出现不符合预期的表现,尤其是<table>cellspacing属性会无法生效。因此一般建议避免使用cellspacing这一HTML属性,改为使用CSS中的border-spacing。另外,在需要border-spacingborder-radius等样式时,请同时指定border-collapse: separate;以使手机版生效。

第四条规则的本意是在窄屏上<table>元素不会将页面撑得过宽,但这同时会造成外层的<table>和内层的<tbody>分离。特别是如果外层<table>规定了边框或背景色时,很容易看出样式的错误。为此一般需要主动指定display: table;以修复这一问题,LLWiki有很多预定义的表格CSS类也都添加了这一规则[1]。但这样修改的话又会重新面临过宽的表格将整个页面撑大的问题。LLWiki现定义了table-wrapper[1],用于套在宽表格外:<div class="table-wrapper">,这个外层容器会在窄屏上通过overflow-x: auto;限制里面的表格宽度。

图片

皮肤界面

其他

手机版JS

手机版JS模块

繁简转换

Wikitext繁简转换

转换表

Template:NoteTA

基本手工转换语法

系统消息

CSS繁简转换

JS繁简转换

滥用过滤器

测试账户

如果管理员需要一个没有自确权限的测试账户用于滥用过滤器测试、小工具测试等,可以临时启用6号滥用过滤器来移除某个测试账户的自确权限。这个滥用过滤器的使用语法非常简单,请根据样例修改为对应的用户名即可,这里不再赘述。

参考资料