MediaWiki

Skin:Timeless

This page is a translated version of the page Skin:Timeless and the translation is 61% complete.
Languages:
此皮肤随附于MediaWiki 1.31及更高版本。 因此您无需另外下载。 但是，您仍需遵循此页面提供的其他使用说明。
MediaWiki皮肤手冊 - 分类
Timeless
发行状态： 稳定版
作者 Isarra
兼容性政策 快照跟随MediaWiki发布。 master分支不向后兼容。
MediaWiki 1.31+
许可协议 GNU通用公共协议2.0或更新版本
下载
下載外觀
Git [?]:
示例
参数
  • $wgTimelessBackdropImage
Quarterly downloads 144 (Ranked 3rd)
正在使用的公开wiki数 2,938 (Ranked 13th)
作为默认皮肤使用的公开wiki数 165
翻译Timeless皮肤（如在translatewiki.net可用）
Vagrant角色 timeless
问题 : 开启的任务 · 报告错误
在手机上查看使用Timeless皮肤的英语维基百科首页

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

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

安装

  • 如果使用Vagrant ，请通过vagrant roles enable timeless -p安装

手动安装

  • 下载文件，并将其放置在您skins/文件夹中的Timeless目录内。
  • 将下列代码放置在您的LocalSettings.php 文件的底部： 
    wfLoadSkin( 'Timeless' );
  • 按需求配置。
  •   完成 - 在您的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; }
}

单边导航菜单

Using this code snippet, the elements of the right-side navigation menu (#mw-related-navigation) will continue to be displayed in the left column (under #mw-site-navigation) like they do on 1100 to 1330 pixels of browser width even beyond 1340 pixels of browser width, for users who prefer a one-sided navigation menu as known from the skins Vector and MonoBook .

The code also works in combination with the limitless content width code from above. 

/* One-sided navigation menu */
@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;
  }
}

/* Align top colour bar with page columns */
.ts-inner {
  padding: 0 0 0 1em;
}

/* Re-aligning bottom logos */
#footer { padding-right: 1em; }

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

The following CSS code adds a set of modern sans serif font types (including fallback fonts) to the currently serif fonts (Linux Libertine, Times New Roman, etc.) of the user name and top-bar navigation menus displayed between 852 and 1100 pixels of browser width. 

/* Top bar font modernization */
#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;
}

/* Avoid cutting off letters with descenders: g,j,p,q,y */
#personal h2 span {
    height: 1.5em;
    position:relative;
    bottom:0.1em
}

/* Triangle position patch */
#personal h2::after {
   position: relative;
   bottom: 0.5em;
}

导航时突出显示部分标题

This CSS code snippet highlights the last section header upon navigation to facilitate returning to it when scrolling through a long document. 

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

旧补丁

Users and remote interface administrators of older MediaWiki installations with an early and lesser mature version of this skin can retrofit these patches of code to counter shortcomings in appearance in the mean time: 

/* Width optimization: Prevents too narrow appearance on mobile phones */
@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; }
}

/* Table of contents indentation patch (retrofits header level indentations if missing) */
#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左右，因为这应该使它能够在大多数非纯白/黑的东西上工作。
Examples (which actually don't follow the above recommendation and thus probably won't work on dark backgrounds): Timeless backdrop (wiktionary).svg and Timeless backdrop (metawiki).svg
$wgTimelessLogo (null|string|array, default null)
Special logo rendering, allowing for custom logos for Timeless specifically (such as a square logo version without the wordmark in order to avoid duplication with the header). Also provides slightly better HiDPI support than using $wgLogoHD, as that only works for 135x135px logos, and scales all high-res logos down to this size.
Can be used to point Timeless at a File uploaded onwiki (remember to protect the file if using this) simply by providing the file name, or you can specify the logo path details manually using an array.
To reuse a $wgLogo and $wgLogoHD already set for a nominally 160x160px logo, but where the HD versions also come out the right size:
$wgTimelessLogo = [
	'1x' => $wgLogo,
	'1.5x' => $wgLogoHD['1.5x'],
	'2x' => $wgLogoHD['2x'],
	'width' => 160,
	'height' => 160
];
To use File:Cows.svg uploaded onwiki:
$wgTimelessLogo = 'Cows.svg';
  • Note that uploaded logos work best as svgs or as 2x- or higher-sized rasters, and will be scaled down for each target resolution. Obviously this approach requires file uploads and thumbnailing to be enabled.
  • Recommended nominal sizes probably around 135px to 165px.
$wgTimelessWordmark (null|string|array, default null)
To use an image instead of the default Linux Libertine serif text for the header banner wordmark. Same usage approach as $wgTimelessLogo.
So the English Wikipedia might use Wikipedia wordmark.svg, like so:
$wgTimelessWordmark = 'Wikipedia wordmark.svg';
Or specify an array of each resolution version, plus the dimensions, per above (more likely with them, frankly).
  • If not using an uploaded file onwiki, specifying the dimensions is required.
  • Recommended nominal size up to 200px wide by 38px tall.

Note that Timeless supports wordmark and HiDPI logos set in 手册:$wgLogos , so just using that is recommended if you have no particular reason not to. In particular the site title rendering may or may not require a wordmark image to render correctly, as the styles for the text title are basically just guesses that will not always work. Other options to make the wordmark render correctly include:

  • Setting some custom css in the wiki's Timeless.css, such as no-wrap or a different font-size value
  • Setting a different display string via changing the contents of the timeless-sitetitle message
Retrieved from "https://www.mediawiki.org/w/index.php?title=Skin:Timeless/zh&oldid=6252997"