Phabricator のプロジェクト名 #Refreshed

Skin:Refreshed/ja

From MediaWiki.org
Jump to navigation Jump to search
This page is a translated version of the page Skin:Refreshed and the translation is 8% complete.

Other languages:
English • ‎español • ‎polski • ‎português • ‎中文 • ‎日本語
The Refreshed skin does not support Internet Explorer 8 and below.
MediaWiki 外装マニュアル - カテゴリ
Crystal Clear device blockdevice.png
Refreshed
リリースの状態: 安定
Refreshed.png
説明 A clean, modern skin originally designed for use on Brickimedia, and now designed for all wikis
作者 Brickimedia (Adam Carter, George Barnick, MtMNC, ShermanTheMythran, Jack Phoenix, Drew1200, SirComputer, Seaside98, Samantha Nguyen, Lewis Cawte), MacFan4000
最新バージョン 3.4.2 (2018-07-14)
MediaWiki 1.28+
ライセンス GPL-2.0+
ダウンロード
README.md
http://en.brickimedia.org/
translatewiki.net で翻訳を利用できる場合は、Refreshed 外装の翻訳にご協力ください
使用状況とバージョン マトリクスを確認してください。
問題点 : 未解決のタスク · バグを報告

Refreshed is a clean, modern skin designed for use on the Brickimedia wiki family. Developed by the users of Brickimedia, this skin can work standalone or can integrate with extensions such as SocialProfile . This skin uses responsive CSS to adapt to mobile devices, and is fully compatible with all modern smartphones and tablets.

Note that Refreshed version 3.1.9 and above require MediaWiki 1.28 or greater. Refreshed 3.0.0-3.1.8 work on MediaWiki 1.25 or greater.

インストール

  • ファイルをダウンロードして、フォルダー skins/ 内の Refreshed という名前のディレクトリに配置してください。
  • LocalSettings.php の末尾に以下のコードを追加してください:
wfLoadSkin( 'Refreshed' );
  • Download the wikifont bundle from https://github.com/munmay/WikiFont/archive/master.zip and place it in /skins/Refreshed/refreshed/wikifont.
  • Take the files out of the wikifont-master folder and put them in the wikifont folder
  • Yes 完了 - 自分のウィキの Special:Version (特別:バージョン情報) に移動して、外装が正しくインストールされたことを確認してください。

Configure

Styling colors

There is also documentation on helping you style the components! If you have trouble finding the direct selectors and want an easy foundation, then use the following base below:

body {
	background-color: /* bg-color of site */ ;
	color: /* content/text color of site */ ;
}

#header-wrapper {
	background: /* bg-color/gradient of header web component */ ;
}

.header-button:hover, 
.header-dropdown-item:hover, 
.header-button-active, 
.sitedropdown-highlighted, 
.dropdown-highlighted {
	background-color: /* bg-color of header items and dropdown menus */ ;
	color: /* content/text color of header items and dropdown menus */ ;
}

/* styling for medium and large sized tablets */
@media (max-width: 1000px) and (min-width: 601px) {
	#header-wrapper .search-form {
		background-color: /* bg-color of search on tablet */ ;
	}
}

/* styling for phones and smaller tablets */
@media (max-width: 600px) {
	#sidebar-wrapper {
		background-color: /* bg-color of sidebar on phones */ ;
	}
	#user-info .header-menu {
		background-color: /* bg-color of user dropdown menu */ ;
	}
}

Page status indicators

As of Refreshed version 3.0, page status indicators are supported in the skin. By default all page status indicators are hidden on Refreshed's mobile display, but can be individually displayed on mobile with the following code:

#mw-indicator-name { /* replace "name" with the indicator's "name" value */
	display: inline-block;
}

Header categories

A feature introduced in Refreshed 3.0 is header categories. Header categories can be added and customized through the front-end as well. To modify the header categories, head to MediaWiki:Refreshed-navigation and create a list similar to this:

* Category 1
** MediaWiki:Refreshed-navigation|Entry 1
** MediaWiki:Refreshed-navigation|Entry 2
** MediaWiki:Refreshed-navigation|Entry 3
** MediaWiki:Refreshed-navigation|Entry 4
* Category 2
** MediaWiki:Refreshed-navigation|Entry 1
** MediaWiki:Refreshed-navigation|Entry 2
** MediaWiki:Refreshed-navigation|Entry 3
** MediaWiki:Refreshed-navigation|Entry 4
* Category 3
** MediaWiki:Refreshed-navigation|Entry 1
** MediaWiki:Refreshed-navigation|Entry 2
** MediaWiki:Refreshed-navigation|Entry 3
** MediaWiki:Refreshed-navigation|Entry 4

There is no limit to the number of categories or entries you can include, however at some point depending on screen resolution, it will overflow across the header.

To display the header categories in a different language, go to MediaWiki:Refreshed-navigation/de where de is the language code and create the same list in the desired language.

Advertisements

Refreshed is an ad-supported skin, as can be seen on any Brickimedia project. By default, the Refreshed skin contains no advertisements, but can be configured to use Google Ads with the code below placed in your LocalSettings.php file:

function showRefreshedAdvert( &$footerExtra ) {
	$footerExtra = '
		<div id="advert">
			<p>' . wfMessage( 'refreshed-advert' )->escaped() . '</p>
			<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
			<!-- Refreshed ad -->
			<ins class="adsbygoogle"
				style="display:inline-block;width:728px;height:90px"
				data-ad-client="ca-pub-9543775174763951"
				data-ad-slot="7733872730"></ins>
			<script>
				(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>';
	return true;
}
$wgHooks['RefreshedFooter'][] = 'showRefreshedAdvert';

You will have to change the data-ad-client and data-ad-slot to reflect the code given to you by Google.

To make your ads responsive across devices, add the following CSS to MediaWiki:Refreshed.css, or MediaWiki:Global-refreshed.css if you're on a wikifarm setup. This requires installing GlobalCssJs .

@media (max-width: 500px) {
	.adsbygoogle {
		width: 320px;
		height: 50px;
	}
}

@media (max-width:799px) {
	.adsbygoogle {
		width: 480px;
		height: 60px;
	}
}

@media (min-width: 800px) {
	.adsbygoogle {
		width: 728px;
		height: 90px;
	}
}

Logo/Wordmark

The Refreshed skin doesn't use $wgLogo like most skins as it displays a logo in the form of a wordmark, which is not favorable in most other skins ($wgLogo being a global variable that would effect all skins). To adjust the wordmark seen in Refreshed, you can define it two ways:

  • MediaWiki:Refreshed-this-wiki-wordmark: Normal logo, the content is the image logo URL.
  • MediaWiki:Refreshed-this-wiki-mobile-logo: The logo displayed on the mobile, the content is the image logo URL.


Tools.svg ウィキ管理者への助言: For optimal display on Refreshed's mobile skin, you should consider either using downscaled images or SVG images so that the logo does not display as blurry on "retina" (high PPI) mobile device screens


Wiki farm support

Refreshed was initially designed to work for wiki farms. By default, Refreshed's header only shows the current site in the header, but the skin can be configured to show a dropdown where the site logo is to contain other sites on the farm. It can be defined with the MediaWiki:Refreshed-wiki-dropdown: The syntax is as follows:

* Wiki name|logo image URL|wiki URL

The third parameter, the wiki URL defaults to the wiki's main page but can be customized with MediaWiki:Refreshed-this-wiki-url.


Using Echo with Refreshed

Current Echo

The latest Echo version (which includes the update where notifications have been divided into alerts and notices) is provided in Refreshed v3.2.1.

Pre-July 2016 Echo

Pre-July 2016 Echo support (Echo before it was divided into Notices and Alerts) was built in Refreshed 3.0.0 and thus the below code "hacks" are not necessary.

With the design of Refreshed versions 2 and earlier, the Echo notifications extension defaults to appearing in the user tools dropdown. To put the Echo button in a more ideal place following similar interfaces on other websites, a JavaScript "hack" has been made to change the position of Echo and some CSS to make it compatible with the skin. This code can be added to your wiki's MediaWiki:Refreshed.js page:

$( '#pt-notifications' ).appendTo( '#userinfo' );

And MediaWiki:Refreshed.css page:

#pt-notifications {
	position: absolute;
	right: -2em;
	z-index: 3;
	top: 0.85em;
}

.mw-echo-overlay {
	width: 400px;
	font-family: sans-serif;
}

#rightbar {
	z-index: 2;
}

#header {
	z-index: 2;
}

#contentwrapper {
	z-index: 1;
}

User avatars

Good news, if you use the SocialProfile extension, user avatars will be integrated into the Refreshed skin automatically, no modification required.


ギャラリー

関連項目