Skin:Lakeus
发行状态: 稳定版 |
|||
|---|---|---|---|
| 作者 | |||
| 最新版本 | 1.4.1 (2025-07-19) | ||
| 兼容性政策 | 快照跟随MediaWiki发布。 master分支不向后兼容。 | ||
| MediaWiki | 1.36+ | ||
| 许可协议 | GNU通用公共协议3.0或更新版本 | ||
| 下载 | |||
| 示例 | |||
|
|||
| 正在使用的公开wiki数 | 3 (Ranked 202nd) | ||
| 作为默认皮肤使用的公开wiki数 | 0 | ||
| 翻譯Lakeus皮肤如果它在translatewiki.net是可用的話 | |||
Lakeus是一款旨在提供简洁而完整体验的皮肤。 其以作者之一,Lakejason0的小说角色命名。
安裝
- 下载文件,并将其放置在您
skins/文件夹中的Lakeus目录内。 - 将下列代码放置在您的LocalSettings.php文件的底部:
wfLoadSkin( 'Lakeus' );
完成 - 在您的wiki上打开Special:Version,以确认皮肤已成功安装。
功能
- 简洁而完整(至少大部分功能是好的)。
- JavaScript被禁用时也能工作。
- 使用CSS变量来自定义。
- 响应式设计。 在桌面设备和平板电脑上的显示应该都是正常的。
- 浮动目录。 可能不稳定。
- 主题设计器。 在参数设置中打开,即可实时更改并预览主题。 大多数情况下,只需要更改几个基本变量,主题设计器就会自动为你计算生成主题。
- 目前可能有些问题,不是很稳定,所以可以的话请务必向我报告您遇到的问题! 如果您不满意自动计算的结果,您随时可以关闭相应的自动计算。
- 即将到来:深色模式支持,类似Vector的实现方式。
注释
- 此皮肤在无JavaScript时也应当是可用的。 虽然没有JavaScript的时候有一些便利的特性是不可用的。
- 此皮肤为使用带有LanguageConverter变种的语言(比如中文(语言代码为
zh)和塞尔维亚语)的站点提供了一个独立的菜单。 当站点没有语言变种可用时,此菜单应当是隐藏起来的。 - RTL书写方向的支持尚未完全测试,但是主要功能已经过RTL兼容测试(比如侧边栏菜单)。
自定义
CSS变量
true以绕过这个特性。请在开始前阅读迁移到深色模式,不然深色模式的显示会出问题。 对于已经通过CSS变量进行自定义的站点管理员和用户,在Lakeus更新到比1.4.1更新(不含)的版本后,请务必按段落内容相应修改CSS。
Lakeus支持使用CSS变量来自定义。 以下是一些制作主题的方法,若要将主题结果(应当是CSS代码)应用,你需要将其复制到Lakeus.css,可以在MediaWiki:Lakeus.css(适用于全站所有用户)或Special:MyPage/Lakeus.css(适用于用户自己)处找到。
主题设计器
使用主题设计器对于所有人来说都会简单一些(至少我希望是这样啦)。 您将只需要更改一些基本变量,剩下的部分会自动计算。 若您不喜欢部分变量的自动计算结果,您可以关闭相应的自动计算,并手动按照意愿微调。
要启用主题设计器,请前往参数设置,选择“外观/显示”,在Lakeus皮肤被选中后,您就可以看见主题设计器的选项了。 启用后,主题设计器会在每个页面上加载。
基本上里面的按钮和表单控件做的事情都是其字面意思;如果不太懂,就试着调整调整,用一用,按一按。 当然,依然存在有一些变量不会在每个页面上都被使用,这些变量会在下方列出:
- 界面消息框。 这些元素在类似于以下情况时会出现:没有JavaScript时成功更改用户组设置;翻译页面编辑提示警告;页面编辑时MediaWiki抛出的异常;Echo或其他通知扩展未安装时的用户讨论页通知…… 这些变量在新版MediaWiki中已弃用,因为目前Codex已经取而代之。
- 浮动目录。 浮动目录按钮仅在目录有生成的页面上出现。 比如说,如果你站点的主页更高级一些(以至于不包含任何默认的标题),那么按钮就不会出现。
预设主题
此处会有一些预设主题供您直接使用。 您也可以在讨论页上分享自己的主题。 如果此处没有任何内容,请稍后回来查看。
复古
一个复古主题,最后一次导出于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.18.r11.gdf47be3。
| 扩展內容 |
|---|
: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变量的默认设置可以在皮肤文件夹中找到(resources/skins.lakeus.styles/variables.less);有关设置以:root {开头,每行的变量以-light或-dark为后缀。找到这两段CSS代码(分别对应浅色和深色主题),相应修改后把设置结果放到你的Lakeus.css里面即可。
比如,要将顶栏的颜色在浅色主题下改为淡蓝色(比如#4FC3F7),那么写成:
:root {
--color-header-light: #4FC3F7;
}
迁移到深色模式
虽然支持深色模式听起来很简单,但最终会涉及到对你站点上的用户生成内容(站内样式表、模板、行内样式)的大量修改。 这个章节将重点讲述皮肤本身的适配工作,尤其是CSS变量的部分。 我们会尽可能遵守维基媒体基金会的wiki所使用的标准,所以有关深色模式下的站内内容或是额外样式的有关事项,参见对维基媒体wiki的深色模式兼容性建议。 简而言之:分别写两块CSS,一块用选择器html.skin-theme-clientpref-night,另一块同时使用媒体查询@media screen and (prefers-color-scheme: dark)并在内部使用选择器html.skin-theme-clientpref-os。
由于本皮肤鼓励使用站内样式表(比如MediaWiki:Lakeus.css)复写皮肤变量,深色模式在这个方面的处理自然没有办法像其他皮肤一样断舍离,从头再来;相反,先前引入的变量都还在,但实际值都转移到了有后缀的变量中。 比如说,不管是主题设计器生成的还是您先前自己写的样式,如果是这样的话:
:root {
--color-primary: #0077bb;
--color-secondary: #ffffff;
--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;
/* ... */
}
那么你需要做的是,在每个变量后加后缀-light或-dark,取决于您样式颜色对应的实际主题。
虽然先前Lakeus没有支持深色模式,但这个皮肤的主题设计器实际上可以使用深色作为背景产生效果还不错的主题;如果这段样式是您使用主题设计器生成的深色主题,使用-dark后缀。除此以外的所有情况都应该使用-light后缀。
示例将使用-light后缀,添加后缀之后样式应该长这样:
:root {
--color-primary-light: #0077bb;
--color-secondary-light: #ffffff;
--color-header-light: #333333;
--color-link-light: #0077bb;
--elevation-light: 0 2px 2px rgba( 0, 0, 0, 10% );
--background-color-base-light: #f6f9fc;
--color-link--visited-light: #004c8a;
--color-link--active-light: #57a6ee;
--color-link-new-light: #bb4400;
--color-link-new--visited-light: #840f00;
--color-link-new--active-light: #f47334;
--color-link-external-light: #006eb1;
--color-link-external--visited-light: #004481;
--color-link-external--active-light: #559ce3;
/* ... */
}
如果你想为深色浅色两个主题同时编写变量(尤其是字体相关的变量,毕竟说到底其实好像不应该分开到深色和浅色里面?),请写两段这样的变量,一段的变量用-light后缀,另一段的用-dark后缀。
参数
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
$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中添加的正常指示器的格式,即:
|
$wgLakeusWikiDefaultColorScheme
|
字符串 | 'light'
|
决定在参数设置中选择“使用wiki默认”时,wiki实际使用的默认配色方案。 可用值:
|
侧边栏图标
很遗憾,向皮肤中添加图标而不在页面上加载很多图片是不太可能的。
若您能忍受加载网络字体图标的等待时间,你可以尝试以下方法来添加图标。
首先,引入图标的字体(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主题
| 此皮肤在以下wiki农场/托管网站和/或软件包中提供: |
