Jump to content

Extension:MobileFrontend(移动版前端)

本頁使用了標題或全文手工轉換
From mediawiki.org
This page is a translated version of the page Extension:MobileFrontend and the translation is 95% complete.
MediaWiki扩展手册
MobileFrontend
发行状态: 稳定版
实现 用户界面, 函数钩
描述
提供对移动端友好的视图
作者
最新版本 2.4.1
兼容性政策 快照跟随MediaWiki发布。 master分支不向后兼容。
MediaWiki 1.33+[1]
PHP 5.5.9+
许可协议 GNU通用公眾授權條款2.0或更新版本
下載
README
示例 m.mediawiki.org
  • $wgMFStopRedirectCookieHost
  • $wgMFShowMobileViewToTablets
  • $wgMFLazyLoadImages
  • $wgMFRSSFeedLink
  • $wgMFNamespacesWithLeadParagraphs
  • $wgMFAmcOutreachMinEditCount
  • $wgMFEnableMobilePreferences
  • $wgMFMobileFormatterOptions
  • $wgMFRemovableClasses
  • $wgMFNoindexPages
  • $wgMFShowFirstParagraphBeforeInfobox
  • $wgMFEnableVEWikitextEditor
  • $wgMFVaryOnUA
  • $wgMFLogWrappedInfoboxes
  • $wgMFDisplayWikibaseDescriptions
  • $wgMFEnableJSConsoleRecruitment
  • $wgMobileFrontendFormatCookieExpiry
  • $wgMFLazyLoadSkipSmallImages
  • $wgMFSearchAPIParams
  • $wgMFMobileHeader
  • $wgMFCustomSiteModules
  • $wgMFEnableXAnalyticsLogging
  • $wgMFAutodetectMobileView
  • $wgMFSiteStylesRenderBlocking
  • $wgDefaultMobileSkin
  • $wgMFUseDesktopSpecialEditWatchlistPage
  • $wgMFEnableFontChanger
  • $wgMFScriptPath
  • $wgMFEditNoticesConflictingGadgetName
  • $wgMFAdvancedMobileContributions
  • $wgMFFallbackEditor
  • $wgMFStopMobileRedirectCookieSecureValue
  • $wgMFSpecialPageTaglines
  • $wgMFQueryPropModules
  • $wgMFNamespacesWithoutCollapsibleSections
  • $wgMFBetaFeedbackLink
  • $wgMFDefaultEditor
  • $wgMFAmcOutreach
  • $wgMFManifestBackgroundColor
  • $wgMFManifestThemeColor
  • $wgMFEnableManifest
  • $wgMFEnableWikidataDescriptions
  • $wgMFUseWikibase
  • $wgMFTrackBlockNotices
  • $wgMFEnableBeta
  • $wgMobileUrlCallback
前往translatewiki.net翻譯MobileFrontend扩展
問題 开启的任务 · 报告错误

移动前端(MobileFrontend)的扩展有助于提升MediaWiki实例在移动端的表现。

功能包括:

  • 为您的移动端流量创建一个单独的移动网站,
  • 提供各种内容转换,使你的内容更友好,
    • 部分折叠和内容明顯地重新排列和删除,包括将引言段落置于引导照片或信息框上方,即使引导段落在页面源代码中位于它们下方。
  • 简化移动端页尾并添加一个桌面/移动版网站链接。
  • 提供beta模式,其包含一个功能管理系统,用于为匿名用户添加实验性功能

本页是为了想要在开发端安装此扩展的用户撰写的。 如果你乐于帮助我们改进,我们欢迎您参与改进

先决条件

在安装移动前端之前,如果您大量使用了模板和/或行内样式(style属性),您需要检查您的内容是否对移动版友好。 TemplateStyles 扩展可以用于给内容排版,以便让内容在移动版和桌面版都有较好的渲染效果。移动前端并不会自动为您修复这些内容!

尤其请注意,您可能需要检查您的首页。 請參閱移动版首頁格式

安裝

  • 下载文件,并解压MobileFrontend文件夹到extensions/目录中。
    开发者和代码贡献人员应改从Git安装此扩展,输入:
    cd extensions/
    git clone https://gerrit.wikimedia.org/r/mediawiki/extensions/MobileFrontend
    
  • 請新增下列代码到您的LocalSettings.php 文件的底部:
    wfLoadExtension( 'MobileFrontend' );
    
  • 如果必要,在您方便的时候配置
  • Yes 完成 – 請导航至您的wiki上的Special:Version,以验证此扩展已成功安装。


使用Vagrant安装:

  • 如果你有使用Vagrant ,请通过vagrant roles enable mobilefrontend --provision安装

配置附近(Nearby)功能


设置皮肤

移动前端提供给您适合移动版格式的网站,这与已存在的桌面版网站可以共存。您可以任意设置其皮肤。

选择其中一个并在LocalSettings.php文件底部加入你选的代码:

Note that some of these skins might already be getting loaded in LocalSettings.php, in which case those lines do not need to be repeated.

wfLoadSkin( 'MinervaNeue' );
$wgDefaultMobileSkin = 'minerva'; // 使用Minerva皮肤 (对于1.37或更旧的版本,你需要单独下载并安装,否则你会得到异常)
wfLoadSkin( 'Vector' );
$wgDefaultMobileSkin = 'vector'; // 使用Vector皮肤
wfLoadSkin( 'Timeless' );
$wgDefaultMobileSkin = 'timeless'; // 使用Timeless皮肤

以下皮肤兼容於移动前端:


配置设置

请参阅Extension:移动前端/配置

所有組態的選項的詳細資訊請參閱README.md檔案

额外调整

通过添加这些兼容的扩展的選項,最大限度地发挥移动前端的作用:


本地定制

CSS 样式

MediaWiki版本:
1.40

要为移动主题应用CSS,请编辑MediaWiki:Mobile.css,与MediaWiki:Common.css 相对。 要让样式表生效,你需要将mw.loader.using('mobile.site.styles')添加到你的MediaWiki:Mobile.js

移动前端不会加载全局MediaWiki:Common.css,也不会加载任何用户样式表。

更多信息

如果您想在桌面浏览器上测试移动扩展,或者想让您的设备不呈现移动版本,您可以将以下键值对附加到URL查询字符串:?useformat=mobile。例如:https://en.wikipedia.org/wiki/MediaWiki?useformat=mobile

如果您想查看页面的移动版本而不在整个站点上启用扩展,您也可以将字符串附加到该页面上的URL。

移动前端的过时功能

传统上,移动前端是个非常大的扩展。许多功能要么超过其要求,要么在未来某个日期实现。下面列出了这些。

API

移动前端扩展提供了API,但长期来看我们会弃用,以支持页面内容服务。 使用这些API需要承担风险。 这些API可能会消失(尽管那时我们会充分通知您)!

扩充 action=parse

action=parse 可接受额外的参数:

mobileformat=
以移动格式返回渲染页面的HTML1.23+
mainpage
套用移动主页的转换。

示例:

结果
{
    "parse": {
        "title": "Therion (band)",
	    "text": {
            "*": "<div><table class=\"infobox vcard plainlist\" style=\"width:22em\"><tr><th colspan=\"2\" style=\"text-align:center;font-size:125%;font-weight:bold;background-color: #b0c4de\"><span class=\"fn org\">Therion</span></th>\n</tr><tr><td colspan=\"2\" style=\"text-align:center\"><a href=\"/wiki/File:2130860153_281d30b3bf_b.jpg\" class=\"image\">
            ...

meta=siteinfo

网站移动版的網域(可能与普通網域相同也可能不同)可在一般sinteinfo信息的 mobileserver键中获得。

对于开发者/系统管理员

设置

你可能需要运行npm install并安装php composer以使得预提交的钩子得以运行,这取决于你对扩展的操作。

使用外语wiki上的條目进行测试(实时数据)

请参阅Extension:MobileFrontendContentProvider

使用移动外观

基金会网站

在维基媒体基金会运营的网站,我们使用Varnish缓存服务器来检查您设备的用户代理。

非基金会网站

对于非维基媒体基金会的网站,你可以设置你的配置来模仿维基媒体基金会的工作方式(在代理层进行设备检测并设置特定的X-设备的標头信息),或者你可以简单地使用「?useformat=mobile」来切换條目以使用移动视图。 See 扩展:移动前端/配置浏览器自动检测 .

从快照版本1.28开始,默认的$wgMFMobileHeader从X-WAP被改为X-Subdomain。 你可以设置$wgMFMobileHeader = 'X-WAP';或者修改你的缓存(Varnish)標头的设置,二選一,只要它们匹配即可。

使用Apache (.htaccess或httpd.conf)

若要設定行動網域,請在 .htaccess 或 http.config 中加入下列規則

<IfModule mod_headers.c>
<If "req('Host') =~ /^mobile./i">
RequestHeader set X-Subdomain "mobile"
</If>
</IfModule>

在您的hosts檔案中 (假設您的桌面網站在 localhost 上):

127.0.0.1  mobile.localhost

LocalSettings.php中:

wfLoadExtension('MobileFrontend');

$wgMFAutodetectMobileView = true;
$wgMobileUrlCallback = fn( $domain ) => "mobile.$domain";

現在,如果您瀏覽 mobile.localhost,您應該會看到行動網站。

常见问题

以下问题经常出现在讨论页。 在您提出新话题前,请检查以下列表或检查已有的话题(如果存在的话),以答疑解惑。

Q:如何在前端代码检测移动站点?

A:理想情况下,您不需要这样做。 It is preferable to use mw.config.get('skin') or window.matchMedia('(max-width: 1119px)').matches to detect a mobile user. You can also make use of the stable mw-mf class which is present on the BODY element if the mobile site is active.

If your code makes modifications to content, you may need to update your code to consider MobileFrontend markup by inspecting the DOM for presence of certain elements.

Please note while mw.config.get( 'wgMFMode' ) exists and can be used by extensions as a last resort (for now) it should not be considered stable for use by gadgets.

Q:我应该如何自定义Minerva皮肤的主菜单?

A:这在phabricator上有追蹤,但您可以在Extension talk:MobileFrontend/2017#h-MODIFY THE MAIN MENU-2017-01-04T02:24:00.000Z找到過渡期間的解决方案。

Q:我应该如何在Minerva皮肤中加入HTML,例如添加广告或额外的script标签?

A:您可以通过编辑皮肤的模板文件来达到此目的(目前位于include/skins/minerva.mustache)。 参见此讨论以获取更多细节。

Q:我是用的扩展似乎不对移动前端生效,为什么?

A:有可能扩展太旧了,需要加入对移动前端的兼容。 请联系该扩展的开发者,并将他们指向ResourceLoader/编写一个移动前端友好的ResourceLoader模块。 请不要在讨论页上发帖,因为在这种情况下,最好在Phabricator上提交一个错误(你可以用你在MediaWiki.org的用户名登录),以获得更快的回应。

Q:我升级了移动前端的扩展,然后遇上致命的异常!

A:可能你用的是不兼容的移动扩展和MediaWiki版本。 一般在这种情况,我们爱莫能助。 尝试升级移动前端或者MediaWiki来解决问题。

Q:升级MediaWiki后,遇上异常:wgMFDefaultSkinClass设置不正确。

A:当下移动前端假定你有安装了Minerva Neue 皮肤。 如果没有,你就需要安装這個,或者按照上面的指引来配置你的移动版皮肤。

对于扩展开发者

默认情况下,扩展中的资源模块将不会在移动视图中加载。

如果一个模块需要在移动版页面中载入,这份关于撰写对移动前端友好的模块的指南很有帮助。

参见


参考资料

  1. :Fatal error: Uncaught ExtensionDependencyError: MobileFrontend is not compatible with the current MediaWiki core (version 1.32.2), it requires: >= 1.33.0.