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

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 43% complete.

Other languages:
Bahasa Indonesia • ‎Deutsch • ‎English • ‎Lëtzebuergesch • ‎Tiếng Việt • ‎dansk • ‎español • ‎français • ‎interlingua • ‎italiano • ‎kurdî • ‎lietuvių • ‎magyar • ‎polski • ‎português • ‎português do Brasil • ‎suomi • ‎svenska • ‎македонски • ‎олык марий • ‎русский • ‎удмурт • ‎العربية • ‎روچ کپتین بلوچی • ‎سنڌي • ‎پښتو • ‎বাংলা • ‎ไทย • ‎ဖၠုံလိက် • ‎မြန်မာဘာသာ • ‎中文 • ‎日本語 • ‎粵語 • ‎한국어

만약 해당 위키미디어 프로젝트에 모바일 장치를 위한 대문(홈페이지)이 만들어져 있지 않다면, 당신이 해당 프로젝트의 관리자라면, 아래의 지침을 따라주세요.

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

1단계

먼저, 문서에 있는 항목이 모바일에 사용되기에 적절한지 생각하십시오.

각각의 데스크톱 버전 항목들(예: 오늘의 그림)을 다음과 같은 질문으로 모바일 페이지에 적절한지 확인하세요.

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

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

2단계

당신은 다음의 것을 진행하기 위해 로그인을 해야 하고 관리자 권한을 가지고 있어야 합니다. 홈페이지의 데스크탑용 보기에서 "편집"을 클릭하고 모바일 보기에 포함할 요소들을 찾으세요.

각각의 요소마다, 당신은 위키텍스트의 div 태그 사이에 "mf selector"라고 불리는 간단한 설명을 추가해야 할 필요가 있습니다. 그것들은 다음과 같습니다:

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

div 태그의 열림과 닫힘 태그 사이에 어떤 것이 들어가야 할까요? 그것은 대체로 "오늘의 그림"과 같은 페이지 요소의 틀일 것입니다.

스타일 변경

몇몇 디자인은 모바일에 알맞지 않습니다. 이에 대하여는 예시로 고정 값을 사용하는 CSS 속성(width,height,padding 등)이 있습니다. 따라서 다른 디자인 방안이 필요하다면 Extension:TemplateStyles를 사용하거나 이 스타일을 Mediawiki:Common.cssMediaWiki:Mobile.css에 맞게 변환하십시오.

몇몇 자주 발생하는 문제에 대한 해결방안은 Making Mediawiki Mobile Friendly에 기술되어 있습니다.

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

거의 다 끝났습니다.

3단계

이제 모바일 URL에 접속하세요. URL은 기본적으로 언어.m.프로젝트.org 와 같이 되어 있습니다. 당신은 모바일 스크린을 모방하여 데스크톱 브라우저의 폭을 줄일 수 있습니다. 페이지가 어떻게 보이나요?

다시 바꿔야 한다면, 2단계로 다시 가세요. 만족스럽다고 생각할 때까지 2단계에서 3단계로 계속 반복하세요.

끝났습니다!

MFSpecialCaseMainPage

만약 (기본적으로 활성화되있는) $wgMFSpecialCaseMainPage가 활성화되어있다면, 모바일과 데스크톱 사용자에게 다른 내용을 제공할 수 있습니다.이 방법은 권장되지 않는데, desprecated 왜냐하면 이는 '대문'에만 적용되고 유지에 대한 부담이 크며 이는 당신의 미디어위키를 모바일 환경에도 적용하는 단계의 미봉책으로만 쓰여야 되기 때문입니다.

위키피디아의 각 언어 버전의 홈페이지와 모든 다른 위키미디어 프로젝트는 다릅니다. 그래서 통용되는 예시를 보여드리기는 불가능합니다. 하지만, 해당 프로젝트가 어떻게 보일지에 대해 예시를 보이기 위해, 여기 독일어 위키피디아가 있습니다: https://de.wikipedia.org/ "Lesen" 옆의 내용 보기("Quelltext anzeigen") 탭을 클릭하면, 위키텍스트를 볼 수 있고 브라우저의 찾기 기능으로 "mf-" 로 시작하는 연산자를 찾을 수 있습니다.

이 경우에는, mf 선택자의 div 태그는 더 큰 페이지 요소들의 일부입니다. 해당 프로젝트의 홈페이지 포맷에 익숙한 누군가가 이것을 자세히 이해하는 것이 좋습니다.

이제 다음으로 가세요: https://de.m.wikipedia.org/ 이제 만들어진 모바일 페이지가 보일 것입니다. mf 선택자에 대응하는 컨텐츠가 모바일 보기에 있을 것입니다.

Deprecation steps for wikis using MFSpecialCaseMainPage

MobileFrontend is in the process of deprecating the code relating to main page special casing. If you have a wiki using it you'll want to stop using it immediately. If you have any questions please don't hesitate to use the talk page!

How can I tell if I'm using it?

If your main page contains "mf-" or "mp-" in the HTML markup, you are using it. You can check this by inspecting the HTML for your main page. If this is too technical, you can also check this by copying and pasting the wiki markup into your user namespace and visiting the page in mobile. If there is a visual difference between your main page and the page in your user namespace you are using main page special casing.

E.g. compare https://en.m.wikipedia.org/wiki/User:Jdlrobson/Main_page_formatting_test with the actual main page for English Wikipedia.

What can I do to fix this?

Assuming you do not want to do a big redesign and just want to retain the existing main page design, you can follow this guide.

Copy the main page markup into a sandbox e.g. a sub page of the user namespace. Now switch to mobile mode. Note, the mobile site can be viewed in your desktop browser, so if you can you may want to consider using the wikitext editor of the mobile site.

You'll need the TemplateStyles extension deployed on your wiki. You can see if it's installed on your wiki by visiting Special:Version. If it's not for whatever reason please request it.

Known problems are listed below:

1. Stop using tables

If your main page uses table's in any way, please remove them. There are many tutorials on the web for doing column layouts. Please put "responsive column layout" into your favorite search engine. If this is confusing, you'll probably want to seek help from a CSS expert!

[DivTable converter https://divtable.com/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