皮肤:Lakeus

This page is a translated version of the page Skin:Lakeus and the translation is 100% complete.
MediaWiki外觀手冊 - 分類
OOjs UI icon layout-ltr.svg
Lakeus
發行狀態: 穩定版
SkinLakeus.png
作者
  • Lakejason0
  • Light beacon
  • Dianliang233
  • Winston Sung
  • ...
最新版本 1.1.12 (2022-08-07)
兼容性方針 快照跟随MediaWiki发布。 master分支不向后兼容。
MediaWiki 1.36+
許可協議 GNU通用公眾授權條款3.0或更新版本
下載
範例 Example on MediaWiki Skins Wiki
參數
  • $wgLakeusShowRepositoryLink
  • $wgLakeusSiteNoticeHasBorder
翻譯Lakeus外觀(如在translatewiki.net可用)
檢查使用和版本矩陣

Lakeus是一款旨在提供简洁而完整体验的皮肤。 其以作者之一,Lakejason0的小说角色命名。

安装

  • 下载文件,并将其放置在您skins/文件夹中的Lakeus目录内。
  • 将下列代码放置在您的LocalSettings.php的底部:
wfLoadSkin( 'Lakeus' );
  •   完成 - 在您的wiki上打开Special:Version,以确认皮肤已成功安装。

致使用MediaWiki 1.24或更早版本的用户:

上面的说明介绍的是自MediaWiki 1.25以来,使用wfLoadSkin()安装皮肤的新方法。 如果您需要在早期版本中安装此皮肤,您需要使用这样的代码(而不是 wfLoadSkin( 'Lakeus' );):

require_once "$IP/skins/Lakeus/Lakeus.php";

(要在早期发布版本中运行皮肤,您可能需要下载标记为来自Special:SkinDistributor发布的版本。)

功能

  • 简洁而完整(至少大部分功能是好的)。
  • JavaScript被禁用时也能工作。
  • 使用CSS变量来自定义。
  • 响应式设计。 在桌面设备和平板电脑上的显示应该都是正常的;在非常窄的手机屏幕上,侧边栏菜单可能会因为太宽而无法关闭。
  • 主题设计器。 在参数设置中打开,即可实时更改并预览主题。 大多数情况下,只需要更改几个基本变量,主题设计器就会自动为你计算生成主题。
    • 目前可能有些问题,不是很稳定,所以可以的话请务必向我报告您遇到的问题! 如果您不满意自动计算的结果,您随时可以关闭相应的自动计算。

计划功能

注释

  • 此皮肤在无JavaScript时也应当是可用的。 虽然没有JavaScript的时候有一些便利的特性是不可用的。
  • 此皮肤为使用带有LanguageConverter变种的语言(比如中文(语言代码为zh)和塞尔维亚语)的站点提供了一个独立的菜单。 当站点没有语言变种可用时,此菜单应当是隐藏起来的。
  • RTL书写方向的支持尚未完全测试,但是主要功能已经过RTL兼容测试(比如侧边栏菜单)。

自定义

CSS变量

您的CSS可能在一些特殊页面上不起作用(比如参数设置);这是MediaWiki本体出于安全考虑的预设行为,但站点管理员可以在知悉相关风险后将$wgAllowSiteCSSOnRestrictedPages 设为true以绕过这个特性。

Lakeus支持使用CSS变量来自定义。 以下是一些制作主题的方法,若要将主题结果(应当是CSS代码)应用,你需要将其复制到Lakeus.css,可以在MediaWiki:Lakeus.css(适用于全站所有用户)或Special:MyPage/Lakeus.css(适用于用户自己)处找到。

主题设计器

使用主题设计器对于所有人来说都会简单一些(至少我希望是这样啦)。 您将只需要更改一些基本变量,剩下的部分会自动计算。 若您不喜欢部分变量的自动计算结果,您可以关闭相应的自动计算,并手动按照意愿微调。

要启用主题设计器,请前往参数设置,选择“外观/显示”,在Lakeus皮肤被选中后,您就可以看见主题设计器的选项了。 启用后,主题设计器会在每个页面上加载。

基本上里面的按钮和表单控件做的事情都是其字面意思;如果不太懂,就试着调整调整,用一用,按一按。 当然,依然存在有一些变量不会在每个页面上都被使用,这些变量会在下方列出:

  • 界面消息框。 这些元素在类似于以下情况时会出现:没有JavaScript时成功更改用户组设置;翻译页面编辑提示警告;页面编辑时MediaWiki抛出的异常;Echo或其他通知扩展未安装时的用户讨论页通知……

预设主题

此处会有一些预设主题供您直接使用。 您也可以在讨论页上分享自己的主题。 如果此处没有任何内容,请稍后回来查看。

复古

一个复古主题,最后一次导出于1.1.7。

:root {
    --color-primary: #8e860a;
    --color-secondary: #eeebe7;
    --color-neutral: #a2a9b1;
    --color-warning: #ffcc33;
    --color-error: #dd3333;
    --color-success: #14866d;
    --color-header: rgba(238,235,231,0);
    --color-link: #0645ad;
    --color-secondary--derived: #f8f9fa;
    --border-color-secoundary--derived: #a2a9b1;
    --font-family: 'Roboto', -apple-system, blinkmacsystemfont, 'Segoe UI', 'Oxygen', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif;
    --font-family-serif: 'Linux Libertine', 'Times New Roman', 'Liberation Serif', 'Nimbus Roman', 'Noto Serif', 'Times', serif;
    --elevation: 0 2px 2px rgba( 0, 0, 0, 10% );
    --background-color-base: #eeebe7;
    --color-link--visited: #001f7d;
    --color-link--active: #5670e0;
    --color-link-new: #dd3333;
    --color-link-new--visited: #a4000c;
    --color-link-new--active: #ff6a5d;
    --color-link-external: #003da3;
    --color-link-external--visited: #001873;
    --color-link-external--active: #5267d5;
    --header-elevation: unset;
    --text-color-header: #000000;
    --icon-filter-header: unset;
    --background-color-search-suggestions: #eeebe7;
    --border-color-search-suggestions: #8c8985;
    --background-color-search-suggestions-current: #8e860a;
    --color-search-suggestions-text: #000000;
    --color-search-suggestions-text-current: #ffffff;
    --background-color-search-input: #eeebe7;
    --border-color-search-bar: #8c8985;
    --background-color-toggle-list: #ffffff;
    --background-color-toggle-list-card: #8e860a;
    --text-color-toggle-list-item: #000000;
    --background-color-toggle-list-item-hover: rgba(0,0,0,0.1);
    --text-color-toggle-list-item-hover: #000000;
    --background-color-toggle-list-item-focus: rgba(0,0,0,0.2);
    --text-color-toggle-list-item-focus: #000000;
    --border-color-toggle-list: #9b9b9b;
    --subheader-color-toggle-list: #6a6a6a;
    --logo-text-color-toggle-list: #ffffff;
    --mask-background: rgba(0,0,0,0.8);
    --background-color-content: #eeebe7;
    --text-color-content: #24220a;
    --background-color-body: #eeebe7;
    --text-color-body: #000000;
    --border-color-content: #bcb9b5;
    --color-accent-header-tab: #8e860a;
    --color-accent-header-tab-selected: #8e860a;
    --color-accent-header-tab-new: #8e860a;
    --border-color-header-tab: #eaecf0;
    --color-tagline: rgba(0,0,0,0.5);
    --font-family-headings: var(--font-family-serif);
    --background-color-edit-options: #eeeeee;
    --border-color-edit-options: #c8ccd1;
    --background-color-toc: #e4e1dd;
    --border-color-toc: #b2afab;
    --color-toc-number: #0d0d0d;
    --border-color-interface-message-box-neutral: #a2a9b1;
    --background-color-interface-message-box-neutral: #e5e7ea;
    --text-color-interface-message-box-neutral: #000000;
    --border-color-interface-message-box-warning: #ffcc33;
    --background-color-interface-message-box-warning: #ffe69a;
    --text-color-interface-message-box-warning: #000000;
    --border-color-interface-message-box-error: #dd3333;
    --background-color-interface-message-box-error: #fae2e2;
    --text-color-interface-message-box-error: #000000;
    --border-color-interface-message-box-success: #14866d;
    --background-color-interface-message-box-success: #d9ebe7;
    --text-color-interface-message-box-success: #000000;
    --border-color-user-message: #ffa500;
    --background-color-user-message: #ffe4b3;
    --text-color-user-message: #000000;
    --background-color-wikitable: #e9e6e2;
    --text-color-wikitable: #030303;
    --border-color-wikitable: #9e9c98;
    --background-color-wikitable-table-head: #dfdcd8;
    --background-color-portlet-body: #ffffff;
    --background-color-portlet-item-hover: rgba(0,0,0,0.1);
    --background-color-portlet-item-focus: rgba(44,44,44,0.1);
    --border-color-portlet-body: #ffffff;
    --background-color-footer: #dad7d3;
    --text-color-footer: #000000;
    --color-footer-link: #0645ad;
    --color-footer-link--visited: #001f7d;
    --color-footer-link--active: #5670e0;
}
海洋

淡蓝色配色方案主题,最后一次导出于1.1.8。

:root {
    --color-primary: #3366cc;
    --color-secondary: #f4fcff;
    --color-neutral: #a2a9b1;
    --color-warning: #ffcc33;
    --color-error: #dd3333;
    --color-success: #14866d;
    --color-header: #e2f4fe;
    --color-link: #0645ad;
    --color-secondary--derived: #f8f9fa;
    --border-color-secoundary--derived: #a2a9b1;
    --font-family: 'Roboto', -apple-system, blinkmacsystemfont, 'Segoe UI', 'Oxygen', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif;
    --font-family-serif: 'Linux Libertine', 'Times New Roman', 'Liberation Serif', 'Nimbus Roman', 'Noto Serif', 'Times', serif;
    --elevation: 0 2px 2px rgba( 0, 0, 0, 10% );
    --background-color-base: #f4fcff;
    --color-link--visited: #001f7d;
    --color-link--active: #5670e0;
    --color-link-new: #dd3333;
    --color-link-new--visited: #a4000c;
    --color-link-new--active: #ff6a5d;
    --color-link-external: #003da3;
    --color-link-external--visited: #001873;
    --color-link-external--active: #5267d5;
    --header-elevation: unset;
    --text-color-header: #000000;
    --icon-filter-header: unset;
    --background-color-search-suggestions: #f4fcff;
    --border-color-search-suggestions: #91989b;
    --background-color-search-suggestions-current: #3366cc;
    --color-search-suggestions-text: #000000;
    --color-search-suggestions-text-current: #ffffff;
    --background-color-search-input: #f4fcff;
    --border-color-search-bar: #91989b;
    --background-color-toggle-list: #f4fcff;
    --background-color-toggle-list-card: #3366cc;
    --text-color-toggle-list-item: #0b3c75;
    --background-color-toggle-list-item-hover: rgba(51,102,204,0.1);
    --text-color-toggle-list-item-hover: #0b3c75;
    --background-color-toggle-list-item-focus: rgba(35,93,194,0.2);
    --text-color-toggle-list-item-focus: #0b3c75;
    --border-color-toggle-list: #91989b;
    --subheader-color-toggle-list: #0955b8;
    --logo-text-color-toggle-list: #ffffff;
    --mask-background: rgba(0,0,0,0.8);
    --background-color-content: #f4fcff;
    --text-color-content: #000000;
    --background-color-body: #f4fcff;
    --text-color-body: #000000;
    --border-color-content: #c1c9cc;
    --color-accent-header-tab: #3366cc;
    --color-accent-header-tab-selected: #3366cc;
    --color-accent-header-tab-new: #3366cc;
    --border-color-header-tab: #eaecf0;
    --color-tagline: rgba(0,0,0,0.5);
    --font-family-headings: var(--font-family-serif);
    --background-color-edit-options: #eeeeee;
    --border-color-edit-options: #c8ccd1;
    --background-color-toc: #eaf2f5;
    --border-color-toc: #b7bfc2;
    --color-toc-number: #0d0d0d;
    --border-color-interface-message-box-neutral: #a2a9b1;
    --background-color-interface-message-box-neutral: #e5e7ea;
    --text-color-interface-message-box-neutral: #000000;
    --border-color-interface-message-box-warning: #ffcc33;
    --background-color-interface-message-box-warning: #ffe69a;
    --text-color-interface-message-box-warning: #000000;
    --border-color-interface-message-box-error: #dd3333;
    --background-color-interface-message-box-error: #fae2e2;
    --text-color-interface-message-box-error: #000000;
    --border-color-interface-message-box-success: #14866d;
    --background-color-interface-message-box-success: #d9ebe7;
    --text-color-interface-message-box-success: #000000;
    --border-color-user-message: #ffa500;
    --background-color-user-message: #ffe4b3;
    --text-color-user-message: #000000;
    --background-color-wikitable: #eff7fa;
    --text-color-wikitable: #030303;
    --border-color-wikitable: #a4abae;
    --background-color-wikitable-table-head: #e5ecef;
    --background-color-portlet-body: #ffffff;
    --text-color-portlet-item: #0b3c75;
    --background-color-portlet-item-hover: rgba(51,102,204,0.1);
    --text-color-portlet-item-hover: #0b3c75;
    --background-color-portlet-item-focus: rgba(112,147,255,0.1);
    --text-color-portlet-item-focus: #0b3c75;
    --border-color-portlet-body: #ffffff;
    --background-color-footer: #e2f4fe;
    --text-color-footer: #000000;
    --color-footer-link: #0645ad;
    --color-footer-link--visited: #001f7d;
    --color-footer-link--active: #5670e0;
}


手动更改变量

以下是CSS变量的默认设置;可以修改这些设置并把设置结果放到你的Lakeus.css里面:

:root {
  --background-color-base: white;
  --background-color-body: white;
  --background-color-content: white;
  --background-color-footer: #eee;
  --background-color-toggle-list: white;
  --background-color-portlet-body: white;
  --background-color-toggle-list-card: #eee;
  --background-color-toggle-list-item-hover: rgba(0, 0, 0, 0.1);
  --background-color-toggle-list-item-focus: rgba(0, 0, 0, 0.2);
  --background-color-portlet-item-hover: rgba(0, 0, 0, 0.1);
  --background-color-portlet-item-focus: rgba(0, 0, 0, 0.2);
  --background-color-edit-options: #eee;
  --background-color-search-suggestions: #fff;
  --background-color-search-suggestions-current: #1d5492;
  --background-color-search-input: #fff;
  --background-color-toc: #f8f9fa;
  --background-color-interface-message-box-neutral: #eaecf0;
  --background-color-interface-message-box-error: #fee7e6;
  --background-color-interface-message-box-warning: #fef6e7;
  --background-color-interface-message-box-success: #d5fdf4;
  --background-color-user-message: #ffce7b;
  --background-color-wikitable: #f8f9fa;
  --background-color-wikitable-table-head: #eaecf0;
  --border-color-edit-options: #c8ccd1;
  --border-color-content: #ccc;
  --border-color-toggle-list: #ddd;
  --border-color-search-suggestions: #c8ccd1;
  --border-color-search-bar: var(--color-gray-2);
  --border-color-portlet-body: var(--color-gray);
  --border-color-header-tab: var(--color-gray-2);
  --border-color-toc: #a2a9b1;
  --border-color-interface-message-box-neutral: #a2a9b1;
  --border-color-interface-message-box-error: #d33;
  --border-color-interface-message-box-warning: #fc3;
  --border-color-interface-message-box-success: #14866d;
  --border-color-user-message: #ffa500;
  --border-color-wikitable: #a2a9b1;
  --subheader-color-toggle-list: #6a6a6a;
  --logo-text-color-toggle-list: #000000;
  --text-color-toggle-list-item: #1c1c1c;
  --text-color-toggle-list-item-hover: #3a3a3a;
  --text-color-toggle-list-item-focus: #3a3a3a;
  --text-color-content: #000000;
  --text-color-header: #000000;
  --text-color-body: #000000;
  --text-color-footer: #000000;
  --text-color-interface-message-box-neutral: #000000;
  --text-color-interface-message-box-error: #000000;
  --text-color-interface-message-box-warning: #000000;
  --text-color-interface-message-box-success: #000000;
  --text-color-user-message: #000000;
  --text-color-wikitable: #202122;
  --icon-filter-header: unset;
  --color-search-suggestions-text: #000;
  --color-search-suggestions-text-current: #fff;
  --color-tagline: var(--color-base);
  --color-accent-header-tab: var(--color-base);
  --color-accent-header-tab-selected: #54595d;
  --color-accent-header-tab-new: #54595d;
  --color-header: white;
  --color-base: #54595d;
  --color-gray: #a2a9b1;
  --color-gray-2: #eaecf0;
  --color-link: #0645ad;
  --color-link--visited: #0b0080;
  --color-link--active: #faa700;
  --color-link-new: #d33;
  --color-link-new--visited: #a55858;
  --color-link-new--active: #faa700;
  --color-link-external: #36b;
  --color-link-external--visited: #636;
  --color-link-external--active: #b63;
  --color-footer-link: #0645ad;
  --color-footer-link--visited: #0b0080;
  --color-footer-link--active: #faa700;
  --color-toc-number: #202122;
  --font-family: 'Roboto', -apple-system, blinkmacsystemfont, 'Segoe UI', 'Oxygen', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif;
  --font-family-serif: 'Linux Libertine', 'Times New Roman', 'Liberation Serif', 'Nimbus Roman', 'Noto Serif', 'Times', serif;
  --font-family-headings: var(--font-family-serif);
  --elevation: 0 2px 2px rgba( 0, 0, 0, 10% );
  --header-elevation: var(--elevation);
  --mask-background: rgba( 0, 0, 0, 0.8 );
}

比如,要将顶栏的颜色改为淡蓝色(比如#4FC3F7),那么写成:

:root {
  --color-header: #4FC3F7;
}


参数

参数 类型 默认值 描述
$wgLakeusShowRepositoryLink 布尔值 true 决定是否在页脚中展示链接到此皮肤仓库的链接。
$wgLogos 目前,只有iconwordmark会被使用;其余键名(例如svg1x1.5x2x等)不会被此皮肤使用。 请注意,其他皮肤也有可能使用由icon提供的图片,与此同时也会使用其他键名,因此请不要用以上键名尝试为此皮肤提供单独的图标。
$wgLakeusSiteNoticeHasBorder 布尔值 false 决定是否为站点通知(Site Notice)启用一个由皮肤提供的边框。 启用此特性有助于提升纯文本通知的美观度,但如果通知内容本身就有边框,你可以保留默认值而不启用。

侧边栏图标

很遗憾,向皮肤中添加图标而不在页面上加载很多图片是不太可能的。 若您能忍受加载网络字体图标的等待时间,你可以尝试以下方法来添加图标。 首先,引入图标的字体(Font face,本例是Material Icons)到你的CSS(Lakeus.css)中。 您可能在除了Lakeus.css以外的地方已经加载过了一些字体,此时确保它们不会互相冲突即可。

/* MD Icons */
/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v70/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}

然后,由于本例使用伪元素,我们会应用一些边距和额外的设定来为图标腾出空间:

.toggle-list__list a {
    padding-left: calc(8px + 25px);
}

.toggle-list__list a::before {
    content: '';
    width: 0;
    height: 0;
    display: inline-block;
    font-family: 'Material Icons';
    font-size: 18px;
    transform: translateX(-25px) translateY(3px);
    /* Display Optimizing */
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
}

现在,就是添加实际图标了。 你可以使用Devtools(鼠标右击,审查元素)来查看列表项的ID,然后就是设置为元素(图标)的实际内容:

/* Navigation */
#n-mainpage-description a::before {
    content: 'home';
}

#n-recentchanges a::before {
    content: 'auto_awesome';
}

#n-randompage a::before {
    content: 'shuffle';
}

#n-portal a::before {
    content: 'forum';
}

#n-help-mediawiki a::before {
    content: 'help_center';
}

本例中,Material Icons支持特定的字符串(此处使用的)以及一些字符码位以用于展示对应的图标。 Material Icons支持的字符串或码位请见Icons - Google Fonts。 请随意为您自己的站点添加更多的规则,例如某位作者的站点有管理员告示板:

#n-adminnoticeboard a::before {
    content: 'groups';
}

#n-...的部分与您在MediaWiki:Sidebar中使用的系统消息对应。