Skin:Lakeus

**MediaWiki皮肤手冊** - 分类
Lakeus; 发行状态：稳定版
作者	User:Lakejason0; Light beacon; User:Dianliang233; User:Winston Sung;
最新版本	1.2.0 (2024-04-26)
兼容性政策	快照跟随MediaWiki发布。 master分支不向后兼容。
MediaWiki	1.36+
许可协议	GNU通用公共协议3.0或更新版本
下载	GitHub: 项目页面; git存储库URL [帮助]; 提交历史; ;
示例	MediaWiki Skins Wiki; Wikimedia Skins Lab;
参数
	$wgLakeusShowRepositoryLink; $wgLakeusSiteNoticeHasBorder; $wgLakeusShouldAnimatePortlets; $wgLakeusShowStickyTOC;
正在使用的公开wiki数	3 (Ranked 249th)
作为默认皮肤使用的公开wiki数	0
	翻译Lakeus皮肤（如在translatewiki.net可用）

This page is a translated version of the page Skin:Lakeus and the translation is 100% complete.

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

安裝

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

功能

简洁而完整（至少大部分功能是好的）。
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.15。

扩展內容

: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-secondary--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: var(--elevation);
    --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: #000000;
    --background-color-toggle-list-item-hover: rgba(51,102,204,0.1);
    --text-color-toggle-list-item-hover: #3366cc;
    --background-color-toggle-list-item-focus: rgba(35,93,194,0.2);
    --text-color-toggle-list-item-focus: #3366cc;
    --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;
    --font-family-action-bar: var(--font-family);
    --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.7);
    --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: #3366cc;
    --background-color-portlet-item-hover: rgba(51,102,204,0.1);
    --text-color-portlet-item-hover: #3366cc;
    --background-color-portlet-item-focus: rgba(112,147,255,0.1);
    --text-color-portlet-item-focus: #3366cc;
    --border-color-portlet-body: #ffffff;
    --background-color-footer: #dfe7ea;
    --text-color-footer: #000000;
    --color-footer-link: #0645ad;
    --color-footer-link--visited: #001f7d;
    --color-footer-link--active: #5670e0;
    --background-color-toc-button: #f4fcff;
    --icon-filter-toc-button: unset;
    --text-color-sticky-toc-number: rgba(51,102,204,0.7);
}

ArchWiki

模仿ArchWiki的主题，最后一次导出于1.1.15.r32.g4282f3c。

扩展內容

:root {
    --color-primary: #0077bb;
    --color-secondary: #ffffff;
    --color-neutral: #a2a9b1;
    --color-warning: #ffcc33;
    --color-error: #dd3333;
    --color-success: #14866d;
    --color-header: #333333;
    --color-link: #0077bb;
    --elevation: 0 2px 2px rgba( 0, 0, 0, 10% );
    --background-color-base: #f6f9fc;
    --color-link--visited: #004c8a;
    --color-link--active: #57a6ee;
    --color-link-new: #bb4400;
    --color-link-new--visited: #840f00;
    --color-link-new--active: #f47334;
    --color-link-external: #006eb1;
    --color-link-external--visited: #004481;
    --color-link-external--active: #559ce3;
    --header-elevation: inset 0px -5px 0px 0px #08c;
    --text-color-header: #ffffff;
    --icon-filter-header: invert(1) hue-rotate(180deg);
    --background-color-search-suggestions-current: #0077bb;
    --background-color-toggle-list: #ffffff;
    --background-color-toggle-list-card: #0077bb;
    --text-color-toggle-list-item: #000000;
    --background-color-toggle-list-item-hover: rgba(0,119,187,0.1);
    --text-color-toggle-list-item-hover: #0077bb;
    --background-color-toggle-list-item-focus: rgba(0,110,177,0.2);
    --text-color-toggle-list-item-focus: #0077bb;
    --subheader-color-toggle-list: #0065a7;
    --logo-text-color-toggle-list: #ffffff;
    --mask-background: rgba(0,0,0,0.8);
    --background-color-content: #ffffff;
    --text-color-content: #000000;
    --background-color-body: #f6f9fc;
    --text-color-body: #000000;
    --color-accent-header-tab: #0077bb;
    --color-accent-header-tab-selected: #0077bb;
    --color-accent-header-tab-new: #0077bb;
    --color-tagline: rgba(0,0,0,0.7);
    --background-color-portlet-body: #ffffff;
    --text-color-portlet-item: #000000;
    --background-color-portlet-item-hover: rgba(0,119,187,0.1);
    --text-color-portlet-item-hover: #0077bb;
    --background-color-portlet-item-focus: rgba(87,166,238,0.1);
    --text-color-portlet-item-focus: #0077bb;
    --background-color-footer: #f6f9fc;
    --text-color-footer: #000000;
    --color-footer-link: #0077bb;
    --color-footer-link--visited: #004c8a;
    --background-color-toc-button: #ffffff;
    --icon-filter-toc-button: unset;
    --text-color-sticky-toc-number: rgba(0,0,0,0.7);
}


#content {
    border: 1px solid var(--border-color-content);
}

@media screen and ( max-width: 720px ) {
    #content {
    	border-left: none; // no left and right border when #content is as wide as viewport; adjust the value if not appropriate
    	border-right: none;
    }
}

#ca-uls .uls-trigger {
    background-image: none;
    padding-left: 0;
}

手动更改变量

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

扩展內容

:root {
  --color-primary: #3366cc;
  --color-secondary: #ffffff;
  --color-neutral: #a2a9b1;
  --color-error: #d33;
  --color-warning: #fc3;
  --color-success: #14866d;
  --background-color-base: var(--color-secondary);
  --background-color-body: var(--color-secondary);
  --background-color-content: var(--color-secondary);
  --background-color-footer: #eee;
  --background-color-toggle-list: var(--color-secondary);
  --background-color-portlet-body: var(--color-secondary);
  --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: var(--color-secondary);
  --background-color-search-suggestions-current: var(--color-primary);
  --background-color-search-input: var(--color-secondary);
  --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;
  --background-color-toc-button: #fff;
  --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: var(--color-neutral);
  --border-color-interface-message-box-error: var(--color-error);
  --border-color-interface-message-box-warning: var(--color-warning);
  --border-color-interface-message-box-success: var(--color-success);
  --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-portlet-item: #1c1c1c;
  --text-color-portlet-item-hover: #3a3a3a;
  --text-color-portlet-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;
  --text-color-sticky-toc-number: #888;
  --icon-filter-header: unset;
  --icon-filter-ooui-icon: unset;
  --icon-filter-toc-button: 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: var(--color-link);
  --color-footer-link--visited: var(--color-link--visited);
  --color-footer-link--active: var(--color-link--active);
  --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);
  --font-family-action-bar: var(--font-family);
  --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`			目前，只有`icon`和`wordmark`会被使用；其余键名（例如`svg`、`1x`、`1.5x`、`2x`等）不会被此皮肤使用。请注意，其他皮肤也有可能使用由`icon`提供的图片，与此同时也会使用其他键名，因此请不要用以上键名尝试为此皮肤提供单独的图标。
`$wgLakeusSiteNoticeHasBorder`	布尔值	`false`	决定是否为站点通知（Site Notice）启用一个由皮肤提供的边框。启用此功能有助于提升纯文本通知的美观度，但如果通知内容本身就有边框，你可以保留默认值而不启用。
`$wgLakeusShouldAnimatePortlets`	布尔值	`false`	决定是否启用菜单动画（比如开关菜单时的淡入淡出）。启用时可能会由于z-index问题产生视觉效果上的瑕疵。
`$wgLakeusShowStickyTOC`	布尔值	`false`	决定是否显示浮动目录。
`$wgLakeusCustomIndicators`	数组	`[]`	试验性。加入自定义的该皮肤全局的页面状态指示器。这通常不应该是添加页面状态指示器的正确方式，所以是实验性功能。此数组应包含指示器的数据，数组中的每个项应包含三个属性：`id`、`class`、`html`。建议遵循在wikitext中添加的正常指示器的格式，即： `id`应当以`mw-indicator-`为前缀，前缀后跟指示器的唯一名称。 wikitext中添加的指示器优先，即，此变量添加的指示器与wikitext中的ID相同时会被忽略。 `class`的值总是字符串`mw-indicator`。 `html`是指示器的HTML片段的字符串。类为`mw-parser-output`的`<div>`标签总是作为容器标签出现，因为正常来说指示器内容是解析过的wikitext。 MediaWiki本体添加的指示器，比如特殊页面的帮助链接指示器则没有该容器标签。按照需求编写内容即可。

侧边栏图标

很遗憾，向皮肤中添加图标而不在页面上加载很多图片是不太可能的。若您能忍受加载网络字体图标的等待时间，你可以尝试以下方法来添加图标。首先，引入图标的字体（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中使用的系统消息对应。

个人菜单图标

个人菜单跟上方基本一致。

扩展內容

/* Personal Menu */
#p-personal a {
    padding-left: calc(0.75em + 25px);
}

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

#pt-userpage a::before {
    content: 'person';
}

#pt-mytalk a::before {
    content: 'chat_bubble';
}

#pt-adminlinks a::before {
    content: 'admin_panel_settings';
}

#pt-preferences a::before {
    content: 'settings';
}

#pt-betafeatures a::before {
    content: 'science';
}

#pt-watchlist a::before {
    content: 'star';
}

#pt-mycontris a::before {
    content: 'emoji_events';
}

#pt-logout a::before {
    content: 'logout';
}

#pt-login a::before {
    content: 'login';
}

#pt-createaccount a::before {
    content: 'person_add';
}

图库

Lakeus皮肤样张，使用海洋主题
Lakeus皮肤样张，使用ArchWiki主题