모바일 게이트웨이/모바일 대문 포멧팅

From MediaWiki.org
Jump to navigation Jump to search
This page is a translated version of the page Mobile Gateway/Mobile homepage formatting and the translation is 47% complete.
Outdated translations are marked like this.
Other languages:
Bahasa Indonesia • ‎Deutsch • ‎English • ‎Lëtzebuergesch • ‎Tiếng Việt • ‎dansk • ‎español • ‎français • ‎interlingua • ‎italiano • ‎kurdî • ‎lietuvių • ‎magyar • ‎polski • ‎suomi • ‎svenska • ‎български • ‎македонски • ‎олык марий • ‎русский • ‎удмурт • ‎العربية • ‎روچ کپتین بلوچی • ‎سنڌي • ‎فارسی • ‎پښتو • ‎বাংলা • ‎မြန်မာဘာသာ • ‎中文 • ‎日本語 • ‎粵語 • ‎한국어

만약 당신의 위키미디어 프로젝트의 대문이 모바일에서 보기 적절하게 구현되어 있지 않고, 당신이 관리자라면, 아래의 지침을 따라주시기 바랍니다.

참고: 대문 문서를 편집하려면, 무조건 당신에게 관리자 권한이 있어야 합니다.

1단계

먼저, 어떤 컨텐츠가 모바일 대문에 나오는 것이 적합할지 고려하세요.

데스크톱 버전에서 나오는 요소들(예:" 오늘의 그림")을 다음 질문을 통해 모바일에 적합한지 알 수 있습니다:

  • 얼마나 유명한 항목입니까?
  • 정기적으로 업데이트되는 항목입니까?
  • 빠르게 읽기에 적당합니까?
  • 모바일 화면에 잘 들어맞을 항목입니까?

적합한 항목들을 정하였다면, 2단계로 계속하세요.

2단계

이번 단계를 진행하기 위해서는 관리자 계정으로 로그인 되어 있어야 합니다. 데스크톱 버전의 홈페이지에서 "편집"을 클릭하고 모바일에서 표시하기로 한 요소들을 찾으세요.

모바일에서 표시하지 않기로 결정한 요소마다 "nomobile" 클래스를 지정하거나 이 클래스가 지정된 요소 안에 있게 하여야 합니다.

<div class="nomobile"> ... </div>

div 태그 사이에 무엇이 들어가야 할까요? 이는 보통 "오늘의 그림"과 같은 틀일 것입니다.

스타일 업데이트

일부 스타일은 모바일에 적합하지 않습니다. 예시로, 사이즈를 고정된 픽셀 크기로 지정한 경우(흔히 width, height, padding 등에서 자주 사용됩니다)가 있습니다. 만약 다른 스타일이 필요한 경우, Extension:TemplateStyles 를 사용하거나 MediaWiki:Common.css 또는 MediaWiki:Mobile.css에 포팅하세요.

일반적인 문제의 경우 Making MediaWiki Mobile Friendly 에서 도움을 얻을 수 있을 것입니다.

"문서 저장"을 클릭하세요.

거의 다 했습니다.

3단계

이제 모바일 URL(보통 언어.m.프로젝트.org입니다)에 접속해봅시다. 모바일에서 접속한 것처럼 보기 위해 브라우저의 폭을 줄여보세요. 잘 보이시나요?

뭔가 바꿔야 한다는 생각이 드신다면, 2단계로 돌아가세요. 만족할 때까지 반복하세요.

끝입니다!

MFSpecialCaseMainPage

만약 $wgMFSpecialCaseMainPage가 활성화 되어있다면(기본적으로는 비활성화 되어있습니다), 모바일과 데스크톱 페이지를 다르게 만들 수 있습니다. 이 방법은 사용이 중단되었는데, 왜냐하면 이는 대문에서만 작동하고, 유지보수를 어렵게 만들게 하며, 모바일에 대응하는 과정 중에 잠시 사용되는 수준으로 그쳐야 하기 때문입니다. It will be removed in 2020.

각 언어의 위키피디아와 다른 위키미디어 프로젝트의 대문은 모두 다릅니다. 그렇기 때문에 통상적으로 적용할 수 있는 예시를 보여드리기는 어렵지만, 이 것을 적용하였을 때 당신의 사이트가 어떻게 변할지 예측하는 것에 도움을 받기 위해 독일어 위키피디아를 참고할 수 있습니다: https://de.wikipedia.org/ "Lesen" 옆의 소스 보기("Quelltext anzeigen") 탭을 누르면 위키텍스트를 볼 수 있는데, 브라우저에 있는 찾기 기능을 통해 "mf-"를 찾아보세요.

이 경우엔, mf 선택자의 div 태그는 큰 페이지 객체의 일부입니다. 해당 프로젝트에서 홈페이지 포맷팅에 익숙한 누군가가 이 것을 이해할 수 있을 것입니다.

이제 다음으로 가세요: https://de.m.wikipedia.org/

이제 지금까지 만든 모바일 페이지를 볼 수 있을 것입니다. mf 선택자에 대응하는 컨텐츠가 모바일에서 보일 것입니다.

MFSpecialCaseMainPage의 사용을 중단하는 방법

MobileFrontend는 대문을 특별하게 보여주는 코드를 제거하는 작업 중에 있습니다. 만약 당신의 위키가 이것을 사용하고 있다면, 당장 이것을 그만둬야 합니다. 만약 궁금한 점이 있다면 토론 페이지에 남겨주세요!

제가 이걸 쓰고 있는지 어떻게 알 수 있나요?

For projects you are users of please apply the query string "?mfnolegacytransform=1&debug=1" to your main page on mobile and compare it with the main page without the query. For example users of English Wikipedia can compare https://en.m.wikipedia.org/?mfnolegacytransform=1&debug=1 with https://en.m.wikipedia.org/. If the two pages look different you must migrate ASAP.

이걸 어떻게 고치나요?

만약 당신이 현재의 대문 디자인을 유지하면서 이를 대응하고 싶다면, 이 가이드를 따르세요.

대문의 코드를 사용자 문서의 하위 문서 같은 연습장에 복사하고, 모바일 모드로 들어가세요. 데스크톱 브라우저에서 모바일 사이트를 볼 수 있으므로 모바일 사이트의 위키텍스트 편집기를 사용할 수 있습니다.

TemplateStyles 확장기능이 필요할 것입니다. Special:Version에서 이것이 설치되어 있는지 확인할 수 있습니다. 만약 이것이 설치되어 있지 않다면, 요청해주세요.

To add template styles to a page add the following line to the top of your new draft page:

<templatestyles src="Template:Main Page/styles.css" />

You can now add CSS @media queries to your page by adding CSS inside Template:Main Page/styles.css to display different content to different device resolutions.

You can apply the "nomobile" class to any elements you wish to continue to hide on mobile. In some cases use of this class is the most straightforward way to update your page.

알려진 문제들:

1. 테이블을 쓰지 마세요.

만약 당신의 대문이 어떤 이유로든 테이블을 사용하고 있다면 그것을 지우시기 바랍니다.

DivTable converter provides a way for you to convert a table HTML to divs. You should aim to put the associated CSS in MediaWiki:Common.css. This act alone should improve your rendering in mobile greatly.

2. Review any inline styles

Search for any instances of styles which make use of the css properties "width", "float", "padding" or "margin"

For example:

<div style="float: left; width: 200px;"

Move these into a TemplateStyle. Use a class and move the css declaration to css.

<div class="main-page-box"

Example CSS:

/* Scope your styles inside a media query. This means they will only apply on tablet or desktop.  */
@media all and ( min-width: 720px ) {
    .main-page-box {
        float: left;
        width: 200px;
    }
}

e.g. Example - note the pre tag is only included for example purposes - this should be put into a TemplateStyle.

3. Reskin for mobile

With the above steps applied your page should look no different on a desktop browser, but as you shrink the screen (horizontal width) to under 720px - the threshold you introduced in step 2 the styles should disappear. You'll want to add new styles (outside the media query you introduced in step 3). These styles will apply to mobile devices and will be overridden.

If there is any content in the page that you do not want to render in the mobile skin you should add the class "nomobile". e.g.

<div class="nomobile">This content should not show on the mobile site but it will show on the desktop site.</div>

4. Apply the new template

Copy and paste the sandbox page into your Main page. Refresh the browser and verify that it works as expected on both mobile and desktop.

5. Make a site request to turn off main page special casing

If your site is now no longer using the special page casing and your site appears in this config:

https://github.com/wikimedia/operations-mediawiki-config/blob/master/dblists/mobilemainpagelegacy.dblist

You'll want to let a Wikimedia site admin know that you are ready for main page special casing to be turned off. File a Phabricator ticket using this link that links to this web page and lists your wiki.

You'll be able to tell when this has been successful if you've been using the mp- prefixes as suddenly other content will display on your mobile site!

6. Remove any mobile specific ids.

i.e. any instance of the following:

id="mp-

These are not necessary any more. Previously these would choose which content to show on mobile, but now you have a new mobile first responsive design and have disabled main they will be ignored.

e.g. This example

Quick fix (dirty)

경고 경고: while hopefully obvious please test this in a safe space first such as a sandbox before applying everywhere. While this can work as a short term solution it's not advised as a long term solution.

The quickest possible fix for your wiki might be to fix the design for Minerva only by forcing horizontally stacking at the trade off of impacting the small amount of desktop Minerva users.

To see if the quick fix works for you add the following to your Main Page:

<templatestyles src="Template:Main Page/styles.css" />

and then inside Template:Main_Page/styles.css copy paste the following CSS:

body.skin-minerva table,
body.skin-minerva tr,
body.skin-minerva td,
body.skin-minerva tbody {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box;
}

Please be aware that this is a quick and dirty fix, which may break more complex main pages (e.g. ones that use tables within tables), and it also doesn’t improve the current situation where the main page breaks on smaller desktop screens and wastes much space on larger mobile ones. If you really don’t have time, you can use this temporarily, but you should plan to really fix the mobile (and small-screen desktop) experience using the above size-dependent methods (or completely redesign the main page, of course). If you decide to go this way, you should make sure to test the resulting main page using mobile view.