LLWiki正在建設中,歡迎加入我們!
「LLWiki:管理员技术手册」修訂間的差異
第45行: | 第45行: | ||
====图片懒加载==== |
====图片懒加载==== |
||
===手机版CSS=== |
===手机版CSS=== |
||
手机版LLWiki使用Minerva Neue皮肤,与桌面版的Vector皮肤相比,不仅界面有很大差异,众多基础HTML元素也都添加了不同的CSS样式。为了适配窄屏设备,Minerva皮肤还添加了大量基于<code lang="css">@media</code>的规则,一般以设备宽度720px为界使用不同的样式。以下着重介绍<code><table></code>和<code><img></code>这两种需要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等)的预览界面时需要考虑。 |
手机版CSS很多时候依赖外层容器的<code>content</code>类来生效,与此同时<code lang="css">#mw-content-text .mw-parser-output</code>的外层结构也同样有效,设计各种基于API的快速编辑工具(如Wikiplus等)的预览界面时需要考虑。 |
||
第71行: | 第71行: | ||
} |
} |
||
</pre> |
</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>以使手机版生效。 |
这里重点说明一下第二和第四条规则造成的影响。第二条规则使得表格的外层边框、行边框和单元格边框合并,可能造成一系列关于边框的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>。但这又 |
第四条规则的本意是在窄屏上<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>限制里面的表格宽度。 |
||
====图片==== |
====图片==== |
||
====皮肤界面==== |
====皮肤界面==== |
||
第89行: | 第89行: | ||
==滥用过滤器== |
==滥用过滤器== |
||
==测试账户== |
==测试账户== |
||
如果管理员需要一个没有[[project:自动确认用户|自确]]权限的测试账户用于滥用过滤器测试、小工具测试等,可以临时启用[[special:abusefilter/6|6号滥用过滤器]]来移除某个测试账户的自确权限。这个滥用过滤器的使用语法非常简单,请根据样例修改为对应的用户名即可,这里不再赘述。 |
|||
==参考资料== |
==参考资料== |
||
[[Category:LLWiki指引]] |
[[Category:LLWiki指引]] |
於 2020年12月19日 (六) 07:36 的修訂
![]() |
此頁面內容嚴重缺失,急需您幫忙補充!(點此編輯) 可參考同類條目添加所需內容,並從官方等可靠渠道搜集資料編寫,亦建議附上資料來源。
|
全站CSS
優先加載的CSS
滯後加載的CSS
CSS小工具分類
Widget(小部件)
小部件頁面格式
小部件分類
小部件JS的特殊之處
Gadget(小工具)和全站JS
ResourceLoader和JS模塊
不作為模塊的JS腳本
小工具定義
小工具簡介
小工具分類
MediaWiki核心模塊介紹
本章節介紹LLWiki使用或曾經使用的MediaWiki核心模塊,更完整的列表參見MediaWiki和JSDuck。
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-spacing
或border-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號濫用過濾器來移除某個測試賬戶的自確權限。這個濫用過濾器的使用語法非常簡單,請根據樣例修改為對應的用戶名即可,這裏不再贅述。