本页使用了标题或全文手工转换

使用笔记/皮肤篇

From 存档计划
该页面的编辑正在进行中。

请帮助我们扩充或改进这篇文章。

皮肤(Skin),作为站点的脸面,自然不能随便糊弄。MediaWiki.org上有记录的所有皮肤在这里可以看到。

但是,皮肤的完整程度、美观程度、移动端适配能力等,可能会随着时间而变得不那么适合现代需求。以下会介绍一些皮肤。

Timeless[edit | edit source]

Timeless的预览图。

Timeless是一款非常好看、完整,适用于各种屏幕尺寸且同时顾及编者和读者需要的皮肤。这也是我站默认的皮肤之一。

除了在图标搭配上不太符合Material Design式的审美,这是一款相当可用的皮肤。它也被用于维基媒体基金会托管的wiki上,比起单调而经典的Vector来说,Timeless算是新鲜血液了。

Timeless是MediaWiki提供的安装压缩包的自带皮肤之一。

背景图片设置[edit | edit source]

Timeless默认的背景是一个透明的猫的svg图片。如果你希望改成别的,比如你站Logo的灰度透明化版本,那么需要填写$wgTimelessBackdropImage这个本地设置。我的配置是"/images/1/10/Backdrop.svg",这样可以通过MediaWiki本身的文件管理追踪背景图片。

Vector[edit | edit source]

Vector的预览图。

Vector是一款相当经典的皮肤,维基百科的默认皮肤就是它。

随着时代变迁,Vector已经逐渐不再符合现代要求了。其自带的实验性响应式设计的效果不理想,而且“新版Vector”也有一些倒退的嫌疑。

它仍然是一款好皮肤——但是除非新版Vector能让它华丽转生,否则它很可能会步MonobookModern之后尘。

Vector是MediaWiki提供的安装压缩包的自带皮肤之一。

启用响应式设计 [edit | edit source]

使用本地设置$wgVectorResponsive

需要注意的是,1.36之后需要额外设置$wgVectorDefaultSkinVersion = '2';

Minerva Neue[edit | edit source]

Minerva Neue的移动端预览图。

Minerva Neue是一款针对移动端设计的皮肤,与MobileFrontend搭配效果更佳。

优势 [edit | edit source]

由于一开始就是MobileFrontend的附属品,所以和MobileFrontend的相性很好。

同样的,这也是wmf托管的wiki所使用的皮肤,因此相对功能也做的比较完整,比较稳定。

Sitenotice[edit | edit source]

使用$wgMinervaEnableSiteNotice这个本地设置。注意由于移动版页面的css和js加载有延迟,因此如果你的Sitenotice使用了一些自定义js,请务必查看在移动版是否在js加载前显示正常。

问题 [edit | edit source]

  • 侧边栏不支持自定义。需要使用JS等非皮肤内部方式。
  • 本身没有从色彩角度开发,因此如果要自定义也只能自己写CSS,没有内部方式。
  • 通知按钮有时会超出页面宽度。
  • 截至最后一次编辑,Safari浏览器上点击左上角菜单按钮后直接关闭菜单会导致页面冻结。
  • 桌面端效果不佳,一般来说桌面端不会使用此皮肤,虽然其一直在尝试适配桌面端体验。
  • 由于MobileFrontend的加持,部分class可能会被隐藏掉。原本这是一种“移动端优化”,但是有可能反而会把你需要的内容给隐藏掉。

Citizen[edit | edit source]

Citizen的预览图。

Citizen是星际公民百科设计的一款皮肤,拥有一定的Material Design设计。和Timeless一样,它也原生支持响应式设计,并且自带亮色/暗色模式。

问题[edit | edit source]

和Cosmos一样,没有拆分变体菜单,导致下拉式菜单根本没法用。

其页脚的自定义文字基于系统消息,会导致你站点支持的语言都需要写一遍,即使你希望这些文字在每个语言下都一模一样。

Cosmos[edit | edit source]

Cosmos的预览图。

Cosmos参照Fandom平台的桌面端皮肤Oasis并致力于改进其体验。其可以帮助从Fandom平台迁出的用户平缓过渡到原版MediaWiki。

与PortableInfobox的联动[edit | edit source]

PortableInfobox在移植出Fandom旧平台时移除了Europa主题,而Cosmos对其做出了补充,可以通过一个设置打开Cosmos下的Europa信息框主题。

侧栏[edit | edit source]

页面侧栏(Rail)与Oasis的自定义方式不太一样。Oasis上使用的是这个JS加载,但是Cosmos使用的是本地设置参数$wgCosmosEnabledRailModules和自定义系统消息。

当然,如果设置了侧栏,侧栏的宽度会把实际页面内容宽度挤掉一部分。如果你的页面需要更宽的宽度去展示内容,也有对应的本地设置和魔术字。

问题 [edit | edit source]

Cosmos没有分离变体菜单,导致下拉栏也没法用,甚至导致了编辑按钮显示成取消的bug。

以及,Cosmos虽说是参照改进,但是在事实上应该是没有形成自己的设计系统的——也就是说,虽然Oasis确实做得不太好,但是Cosmos所谓的改进也没好到哪里去。当然,开发者自己倒是感觉十分良好。