移动版入口/移动主页格式

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 37% 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 • ‎македонски • ‎олык марий • ‎русский • ‎удмурт • ‎العربية • ‎روچ کپتین بلوچی • ‎سنڌي • ‎پښتو • ‎বাংলা • ‎ไทย • ‎ဖၠုံလိက် • ‎မြန်မာဘာသာ • ‎中文 • ‎日本語 • ‎粵語 • ‎한국어

如果您的维基百科项目首页(主页)中尚未开启移动版视图,且您是该项目的管理员,请参照后面的说明开启。

请注意:您必须具有管理员权限才能编辑首页。

第一步

首先,确定哪些内容适合移动版首页。

评估桌面版的页面元素(如“每日图片”)并询问:

  • 它们受欢迎吗?
  • 它们正常更新吗?
  • 它们适合快速阅读吗?
  • 它们在移动屏幕上阅读舒适吗?

当您选择好了需要的元素,请继续第二步。

第二步

您必须具有管理权限且登录后才能进行以下操作。在首页的桌面版视图中,点击 "编辑" 并找到要在移动版中显示的元素。

您希望在移动版首页中显示的每个元素都必须加上 id="mf-..." 属性标识(其中“...”是唯一名称,请使用人类可读的内容)。您需要调用这些“mf 选择器”,一种方法是把这些元素放在 div 标记中并在该标记内插入“mf 选择器”,类似这样:

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

在 div 的开标签和闭标签之间应放什么呢?大多数时候应是页面元素的模板,例如“每日图片”。

Updating styles

Certain styles are not mobile friendly. For example any css rules which make use of fixed pixel size e.g. width, height, padding. If different style treatment is needed please use the Extension:TemplateStyles or port these styles to MediaWiki:Common.css or MediaWiki:Mobile.css.

Some tips on common problems are addressed @ Making MediaWiki Mobile Friendly.

点击“保存页面”。

到这里几乎完成了。

第三步

现在打开移动版网址,通常是 languagecode.m.project.org。您可以减小桌面浏览器的宽度模拟移动屏幕,现在页面看起来如何?

如果您要调整,请回到第二步,并在它与第三步之间循环直到满意。

结束了!

MFSpecialCaseMainPage

When $wgMFSpecialCaseMainPage is enabled (which is disabled by default), it is possible to serve different content to mobile and desktop users. Use of this method is discouraged and deprecated as it only works on the Main Page, is a maintenance burden and should only be used as a stop-gap measure when transitioning your MediaWiki site to a mobile experience.

维基百科各种语言版以及其他所有维基媒体计划的首页是多样化的,所以无法展示统一的例子。尽管如此,还是可以通过例子想象一下您的站点看起来会如何,下面是维基百科的德语版: 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 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