跳转到内容
存档计划
通知
user-interface-preferences
中文
个人工具
创建账号
登录
搜索
打开主菜单
608
篇文章
存档计划
导航
首页
最近更改
随机页面
共笔茶馆
社群首页
管理员告示板
MediaWiki帮助
计划
沙盒
服务状态
外部搜索
置顶页面
未名残章
梗体中文
茶馆周报
MediaWiki使用笔记
湖言乱语(人造语言)
硬件数据库
友情链接
WordPress.com分馆
Minecraft基岩版开发Wiki
中文Minecraft Wiki
奇葩栖息地
AzureZeng's Wiki
MCG大图书馆
异世界百科
欢迎来到存档计划(Lake桑的存档馆)!
由于多起破坏,本站已限制匿名用户操作。注册或联系站长。
看看站长的
新皮肤Lakeus
。
欢迎加入Discord服务器:
W56rsgK
。
加入QQ频道:
存档计划编辑交流
。
我们搬迁到新域名啦:
lakeus.xyz
也来看看
WordPress.com分馆
。
来看看
梗体中文
相关内容!
..-/-./-/../-/.-.././-../..-./.-./.-/--./--/./-./-
查看“使用笔记/杂项篇”的源代码
来自存档计划,Project Archive by Lakejason0
←
使用笔记/杂项篇
命名空间
页面
讨论
查看
阅读
查看源代码
查看历史
更多
刷新
工具
链入页面
相关更改
特殊页面
页面信息
变体
不转换
简体
繁體
大陆简体
香港繁體
澳門繁體
大马简体
新加坡简体
臺灣正體
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
== 如何开发皮肤 == {{main|mw:Manual:How to make a MediaWiki skin}} 开发MediaWiki皮肤在1.36版本后不再必须掌握PHP。只需要会CSS和一些Mustache语法就行。 有两种方式入手,一是下载示例皮肤([https://github.com/wikimedia/mediawiki-skins-Example GitHub]),一是使用[https://skins.wmflabs.org/#/add 皮肤实验室工具]。后者更具有互动性,也更能帮助你了解皮肤的制作流程。 当然啦,你也可以参考我的皮肤[https://github.com/lakejason0/mediawiki-skins-Lakeus Lakeus],它就是用后者生成并修改的。 皮肤制作的常见问题反正也就那些,基本上你会遇到这些问题: === LESS与MediaWiki预处理 === 你可能不是很熟悉LESS。我也不熟悉。但是,使用预处理器可以节省时间增加效率,也还是推荐了解一下LESS的语法以及常见命名规则,不然就会像Lakeus一样,命名十分混乱。 在自己的wiki上尝试皮肤,如果你的样式代码有问题,可能会出现一点皮肤样式都不加载的情况。打开开发者工具,找到对应的样式文件请求,就可以看到报错。或者,你也可以使用Node安装LESS工具,本地编译一下看看有什么问题。 MediaWiki还会帮你自动在界面使用RTL语言(从右向左书写的语言,比如阿拉伯语)的情况下,把你样式中的左右都颠倒一下。如果你的样式表的一些部分是单独对RTL(从右向左书写)处理的,可以这样绕过这个特性: <syntaxhighlight lang="css" line start="351" highlight="2-3,4-5,8-9"> .rtl .toggle-list__list { /* @noflip */ left: initial; /* @noflip */ right: 0; top: 0; bottom: 0; /* @noflip */ transform: translateX( 100% ); } </syntaxhighlight> 如果你打算使用CSS变量,那么我建议在单独的文件里面写好CSS变量在{{cd|:root}}里面的声明,然后把对应的LESS变量赋值为{{cd|var()}}函数去调用CSS变量,在皮肤编写的时候使用LESS变量,通过{{cd|import}}去加载对应的变量声明。这里也可以参考Lakeus。 === 自己想要的数据没有提供/想更改Mustache传入的数据 === 你需要掌握一定的PHP以实现该效果。具体可以参考我的皮肤。 我的皮肤使用PHP的地方主要是三点:解析包含参数的界面文本(比如根据传入的数字改变显示单词的单复数),在Mustache模板中动态插入HTML,和读取本地设置。 你也可以使用[https://github.com/jdlrobson/mediawiki-skins-skinjson SkinJson]皮肤查看默认传入Mustache的数据。可以根据这些来自行读取处理和覆写相关数据。以“is-”开头的都是布尔型,“array-”开头的都是数组型,“data-”开头的都是对象型,“html-”开头的是你准备插入的HTML,“msg-”开头的是系统消息(界面文本)。 === 开启皮肤的响应式设计 === 如果你的皮肤打算支持响应式设计,请在你的{{cd|skin.json}}中找到并更改成类似下面的片段: <syntaxhighlight lang="json" highlight="8"> { "ValidSkinNames": { "my-responsive-skin": { "class": "SkinMustache", "args": [ { "name": "my-responsive-skin", "responsive": true } ] } } } </syntaxhighlight> === 皮肤特性 === 在你皮肤的ResourceLoader模块中,可以设置{{cd|features}}字段,但是它可以设置的内容比皮肤模板给出的要多。具体支持哪些请见[https://doc.wikimedia.org/mediawiki-core/master/php/SkinModule_8php_source.html Wikimedia的文档],或者参考Lakeus。不开启这些特性可能会使你的皮肤缺失一些大部分皮肤应当有的功能。 当然,这些皮肤特性实际上都是对应原版MediaWiki的resources目录下的一些预制CSS/LESS/JS。如果你不满意自带的东西,你当然可以另起炉灶,做完后关闭对应的皮肤特性。 你会发现MediaWiki真的自带了很多的CSS/LESS/JS。要学会利用它们。 === 扩展程序兼容性 === 官网说“应当是扩展程序去支持皮肤而非反过来”,但是作为你的皮肤,你当然可以获得主动权。通过{{cd|skinStyles}}就可以为其他扩展自己做适配了。此处也参考Lakeus和Citizen,一个是目录,一个是{{cd|ResourceModuleSkinStyles}}。 也有的扩展程序真的需要他人适配,比如[[mw:Extension:SocialProfile|SocialProfile]]的头像部分。 === z-index === {{main|mw:Manual:Coding conventions/CSS#z-index}} 示例皮肤的z-index其实没有按照MediaWiki的z-index规范。按照规范修改有助于扩展程序的兼容性。 同样,你自己设计的皮肤元素之间也有可能打架。要时刻注意。 你可能会遇到的z-index问题包括Echo的通知,WikiEditor的编辑栏,以及页面内一些有语法高亮的代码块。 z-index自己的规则我就不赘述了,建议多读读文档。
返回
使用笔记/杂项篇
。
Cookie帮助我们提供我们的服务。通过使用我们的服务,您同意我们使用cookie。
更多信息
确定