Jump to content

Skin:Timeless

本頁使用了標題或全文手工轉換
问题追踪器： #Timeless
From mediawiki.org
This page is a translated version of the page Skin:Timeless and the translation is 100% complete.
Languages:
MediaWiki皮肤手冊 - 分类
Timeless
发行状态： 稳定版
作者 Isarra
兼容性政策 快照跟随MediaWiki发布。 master分支不向后兼容。
MediaWiki 1.31+
许可协议 GNU通用公共协议2.0或更新版本
下载
下載外觀
Git [?]:
示例
参数
  • $wgTimelessBackdropImage
季度下載量 0
正在使用的公开wiki数 2,938 (Ranked 13th)
作为默认皮肤使用的公开wiki数 165
翻譯Timeless皮肤如果它在translatewiki.net是可用的話
Vagrant角色 timeless
问题 : 开启的任务 · 报告错误
在手机上查看使用Timeless皮肤的英语维基百科首页

Timeless支持响应式网页设计，并为从小屏幕手机到大屏幕显示器的多种屏幕宽度进行了优化。

该款皮肤基于Winter，并融汇了2015年互助客棧討論中提及的合理建议。

安装

此皮肤随附于MediaWiki 1.31及更新版本，因此您無需下載它。 但其余的配置的指示仍须依循執行。
  • 如果使用Vagrant ，请通过vagrant roles enable timeless -p安装

手动安装

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

功能

与移动版极简的默认皮肤Minerva 不同，Timeless将桌面皮肤（如默认桌面皮肤Skin:Vector ）的功能整合到所有屏幕尺寸上。

此外，Timeless在顶栏的“编辑”和“查看历史”按钮旁的用户贡献列表中提供了独特、方便的快捷方式。

总体目的是制作一个强调内容与编辑工具的功能齐全的皮肤，有多重视图模式以显示所有内容或专注于内容（winter），也可用于白天/夜晚模式切换。将来会实现这一点。

不同于MobileFrontend/Minerva，Timeless不会强行改变表格的移动版分辨率，而是鼓励和期望用户使表格和模板更响应式，并针对不同用途进行优化。

通过Skin:Timeless-DarkCSS ，用户可以手动启用深色背景以减缓眼部疲劳，并降低AMOLED显示屏的能耗。 说明可在该页上查阅。

未来的目标是创建一个具有以下特性的全功能皮肤：

  1. 同时强调内容呈现和编辑工具，
  2. 拥有多种查看模式，比如展示一切、仅关注内容（Winter），或
  3. 切换到暗色/夜间查看。


响应式网站设计细节

此段基于默认配置。

≥1340 px

在模拟画面宽度大于1340px以上时，站点会显示成三列模式。 一些站点导航的部分会显示在内容区域的左侧（比如“导航”、“工具”）而另一些则在右边（比如“更多”、“打印/导出”、“在其他项目中”、“其他语言”、“分类”）。

从模拟浏览器视窗宽度在1900px左右开始，中间栏的宽度就会固定到1261px宽，但在早前的皮肤Vector 和MonoBook 中，此栏可以随着屏幕宽度无限制地扩展。

使用此皮肤时，若需要无限制的内容宽度，可以透过这个CSS代码段达到。

使用这一CSS模式，用户可以选择在第一（左侧）列中显示第三（右侧）列的导航部分，如同在1339到1100像素的浏览器宽度一样。

1339到1100像素

网站显示为两栏。 内容区域右侧的站点导航部分移到已有段落下方的左边。

小于1000像素

网站显示为一栏。 内容区域填满整个屏幕区域。 分类出现在页面底部，位于Vector 和Monobook 。

站点导航部分折叠到了带有文本标签的导航栏，并且使用JavaScript来控制显示隐藏，而非在Skin:MinervaNeue 中由:checked使用纯CSS实现。

小于851像素

小于851像素时，Timeless的响应式设计将适应移动手机屏幕。

内容区域上方的导航元素的文本标签（例如“页面”、“讨论”、“编辑”、“编辑源代码”、“查看历史”）不会显示，从而节省水平空间，只会显示图标，而非图标和文本标签一起显示。

网站导航部分折叠到带有图标标签的顶部导航栏中。

CSS片段

这些代码片段可用于自定义皮肤的外观，可以通过MediaWiki管理员将它们粘贴到MediaWiki:Timeless.css，或是普通用户粘贴到自己的用户空间CSS，或是游客粘贴到浏览器扩展的用户皮肤。

不确定内容宽度

基于对限定内容宽度的批评，可以使用这个CSS代码片段，使中心（内容）列的宽度和它上面的颜色条的蓝色中线无限延伸至屏幕宽度。 

/* 不确定内容宽度 */
@media screen and (min-width: 851px) {
    .color-middle-container,
    .ts-inner { max-width: none; }
}

单边导航菜单

使用此代码片段，右侧导航菜单的元素（#mw-related-navigation）将继续在左侧列（#mw-site-navigation）中显示，就像在 浏览器宽度为1100至1330像素时一样，即使在浏览器宽度超过1340像素时，对于那些偏好单侧导航菜单的用户（如皮肤Vector 和MonoBook 中所示），这些元素仍将显示在左侧列中。

该代码也可与上述无限内容宽度代码配合使用。 

/* 单边导航菜单 */
@media (min-width: 1340px) {
  #mw-content-block {
    display: block;
  }
  #mw-content,
  #content-bottom-stuff {
    margin-left: 14em;
  }
  #mw-content-wrapper {
    float: right;
    margin-left: -14em;
    width: 100%;
  }
  #mw-related-navigation {
    width: 14em;
    padding: 0 1em 0 0;
  }
  div.color-middle {
    margin-right: 0;
  }
  .mw-wiki-logo {
  	display: inline-block;
  }
}

/* 将顶部颜色条与页面列对齐 */
.ts-inner {
  padding: 0 0 0 1em;
}

/* 重新调整底部标志 */
#footer { padding-right: 1em; }

在顶部栏中使用现代化字体

以下 CSS 代码为用户名和顶部导航菜单（显示在浏览器宽度 852 至 1100 像素之间）的当前衬线字体（如 Linux Libertine、Times New Roman 等）添加了一组现代无衬线字体（包括备用字体）。 

/* 顶部栏字体现代化 */
#mw-header *,
#mw-site-navigation *,
#mw-related-navigation * {
    font-family: 'Segoe UI','Segoe UI Emoji','Segoe UI Symbol','Lato','Liberation Sans','Noto Sans','Helvetica Neue','Helvetica',sans-serif;
}

/* 避免将带有下伸部分的字母截断： g,j,p,q,y */
#personal h2 span {
    height: 1.5em;
    position:relative;
    bottom:0.1em
}

/* 三角形位置补丁 */
#personal h2::after {
   position: relative;
   bottom: 0.5em;
}

导航时突出显示部分标题

此 CSS 代码片段在通过 导航 跳转时突出显示最后一个部分标题，以便在滚动浏览长文档时能够轻松返回该部分。 

.mw-headline:target {
  background-color: gold;
}

旧补丁

使用较早版本且不够成熟的此皮肤的MediaWiki旧版本用户及远程界面管理员，可通过添加以下代码片段来临时解决界面显示问题： 

/* 宽度优化：防止在移动设备上显示过窄。 */
@media (max-width:850px) {
  #mw-content  { padding: 0.5em 0.5em 3em; }
  #firstHeading { width: 100%; }
  #mw-header-container { padding: 3.75em 0.5em 0.35em; }
  #site-navigation h2 { left: 0.5em; }
  #p-logo-text { left: 3em; }
  #user-tools h2 { right: 1em; }
  #site-tools h2 { right: 4em; }
}

/* 目录缩进补丁（若缺少标题级别缩进，则进行补丁修复） */
#toc ul ul {
  margin: 0 0 0 2em;
}

配置

以下内容仅在MediaWiki 1.34+中支持。

$wgTimelessBackdropImage (string, default 'cat.svg')
像设置$wgLogo一样设置成合适的背景图片。 建议将svg设置为500-750px宽：支持高DPI的svg；大小真的可以随便，但凡会导致与默认cat类似的后面内容外观。
为了使背景能够在不修改的情况下与其他背景色主题配合使用，建议使用透明的单色图像，不透明度为20-50%的黑/白，其中黑白部分的alpha值同样为10-50/255左右，因为这应该使它能够在大多数非纯白/黑的东西上工作。
示例（实际上并未遵循上述建议，因此可能在深色背景上无法正常显示）：Timeless backdrop (wiktionary).svg 和 Timeless backdrop (metawiki).svg
$wgTimelessLogo (null|string|array, default null)
特殊标志渲染功能，专为Timeless定制标志（例如，提供不包含文字标识的方形标志版本，以避免与页眉重复）。 此外，它还提供了比使用$wgLogoHD稍好的HiDPI支持，因为$wgLogoHD仅适用于135x135像素的徽标，并将所有高分辨率徽标缩放至此尺寸。
可用于将Timeless指向在维基上上传的文件（使用此方法时请记得保护该文件），只需提供文件名即可；或者您可以通过数组手动指定徽标路径的详细信息。
为了重复使用已设置的 $wgLogo 和 $wgLogoHD 用于一个名义上为 160x160 像素的徽标，但同时确保高清版本也以正确尺寸输出：
$wgTimelessLogo = [
	'1x' => $wgLogo,
	'1.5x' => $wgLogoHD['1.5x'],
	'2x' => $wgLogoHD['2x'],
	'width' => 160,
	'height' => 160
];
使用在维基上上传的File:Cows.svg：
$wgTimelessLogo = 'Cows.svg';
  • 请注意，上传的徽标以SVG格式或2倍及以上分辨率的位图格式效果最佳，并将根据目标分辨率进行缩放。 显然，这种方法需要启用文件上传和缩略图功能。
  • 推荐的标准尺寸大约在135像素到165像素之间。
$wgTimelessWordmark (null|string|array, default null)
使用图片代替Linux Libertine衬线字体作为标题横幅的文字标识。 与$wgTimelessLogo相同的用法。
因此，英文维基百科可能会使用 Wikipedia wordmark.svg，如下所示：
$wgTimelessWordmark = 'Wikipedia wordmark.svg';
或者指定每个分辨率版本的数组，并包含其尺寸，如上所述（坦率地说，这样做更常见）。
  • 如果不使用维基上上传的文件，则必须指定尺寸。
  • 建议的标准尺寸为宽度不超过200像素，高度不超过38像素。

请注意，Timeless 支持在 手册：$wgLogos 中设置文字标志和 HiDPI 徽标，因此如果没有特殊原因，建议直接使用该设置。 特别是网站标题的显示可能需要或不需要一个文字标志图像才能正确显示，因为文本标题的样式基本上只是猜测，并不总是有效。 其他可确保标志正确显示的选项包括：

  • 在维基的 Timeless.css 中设置一些自定义 CSS，例如禁用换行或使用不同的字体大小值。
  • 通过修改timeless-sitetitle消息的内容来设置不同的显示字符串
Retrieved from "https://www.mediawiki.org/w/index.php?title=Skin:Timeless/zh&oldid=8064475"