皮肤:Timeless

From mediawiki.org
Jump to navigation Jump to search
This page is a translated version of the page Skin:Timeless and the translation is 21% complete.
Other languages:
Bahasa Indonesia • ‎Deutsch • ‎English • ‎Esperanto • ‎Türkçe • ‎español • ‎français • ‎italiano • ‎polski • ‎português • ‎suomi • ‎русский • ‎বাংলা • ‎中文 • ‎日本語 • ‎한국어
此佈景主題已绑定在MediaWiki 1.31及以上版本。 因此您不必再次下載它。 然而,您仍需要跟随提供的其他指示。
MediaWiki佈景主題手冊 - 分類
Crystal Clear device blockdevice.png
Timeless
發行狀態: 穩定版
Timeless MediaWiki Skin.png
作者 Isarra
MediaWiki 1.31+
許可協議 GNU通用公眾授權條款2.0或更新版本
下載
例子
參數
  • $wgTimelessBackdropImage
翻譯Timeless佈景主題(如果在translatewiki.net可用)
檢查使用和版本矩陣
問題 : 進行中的工作 · 回報錯誤
在手机上查看使用“Timeless”皮肤的英语维基百科首页

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

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

安装

  • 下载文件,并将其放置在您skins/文件夹中的Timeless目录内。
  • 将下列代码放置在您的LocalSettings.php的底部:
wfLoadSkin( 'Timeless' );
  • 根据需要配置。
  • Yes 完成 - 在您的wiki上打开Special:Version,以确认佈景主題已成功安装。

功能

与移动版极简的默认皮肤Minerva 不同,“Timeless”将桌面皮肤(如默认桌面皮肤皮肤:Vector )的功能整合到所有屏幕尺寸上。

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

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

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

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

The future goal is to create a fully featured skin that:

  1. emphasizes both content and editing tools,
  2. with multiple view modes for showing everything, focusing only on content (winter), or
  3. switching to dark/night viewing.

Responsive website design details

This section is based on the default configuration.

≥1340 pixels

Above a simulated screen width of 1340 pixels, the site is visible in three columns. Some site navigation sections are on the left side of the content area (e.g. "导航", "工具") while some are on the right side ("更多", "打印/导出", "在其他项目中", "其他语言", "分类") are on the right side.

Starting at a simulated browser viewport width of around 1900 pixels, the width of the center column with the content is fixed to 1261 pixels, while on the earlier skins 皮肤:Vector and 皮肤:MonoBook , it is able to extend indefinitely with screen width.

An indefinite content width can be achieved with this skin using this CSS code snippet.

With this CSS code, users can optionally display the navigation sections from the third (right-side) column in the first (left-side) column, like already done at 1339 to 1100 pixels of browser width.

1339 to 1100 pixels

The site is visible in two columns. The site navigation sections on the right side of the content area move to the left side below the existing sections.

Less than 1100 pixels

The site is visible on one column. The content area fills the entire screen space. Categories appear at to the bottom of the page, where they are on 皮肤:Vector and Monobook .

The site navigation sections are collapsed into a top navigation bar with text labels, and currently shown and hidden using JavaScript, rather than pure CSS, as implemented in the Skin:MinervaNeue using :checked.

Less than 851 pixels

Below 851 pixels, the responsive design of Timeless adapts to mobile phone screens.

The text labels on the navigation elements above the content area (e.g. "页面", "讨论", "编辑", "编辑源代码", "查看历史") are not shown to save horizontal space; only the icons are shown instead of both.

The site navigation sections are collapsed into a top navigation bar with icon labels.

CSS snippets

These code snippets can be used to customize the skin's appearance, by pasting them into MediaWiki:Timeless.css as a MediaWiki administrator, into one's own user space CSS as a regular user, or into a user skin browser extension as a visitor.

Indefinite content width

Regarding criticism of limited content widths, using this CSS code snippet, the width of the center (content) column and the blue middle line of the colour bar above it extends indefinitely with screen width.

/* Indefinite content width */
@media screen and (min-width: 851px) {
    .color-middle-container,
    .ts-inner { max-width: none; }
}

One-sided navigation menu

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 combintion 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;
  }
}

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

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

Modernized fonts in top bar

The following CSS code adds a set of modern font types (including fallback fonts) to the currently unformatted fonts 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;
}

Highlight section title upon navigation

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;
}

Legacy patches

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 Manual:$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