入门：使用“Web and Mobile”创建和定制Plone的手机站点

原文链接： http://blog.mfabrik.com/2011/04/11/tutorial-create-and-theme-mobile-plone-site-with-web-and-mobile/

 

这是一个简短的入门，教你使用Web and Mobile CMS 将你的Plone 站点“移动化”，并且进行一些样式定制。Web and Mobile 1.0 已经独立的部署在Switzerland , Netherlands , USA 和German 等多个国家的不同组织。

如果你有任何问题，请到gomobile-dev的论坛 提问。

准备工作

• 基本的Plone 开发技能
• 基本的ZopeSkel 知识
• 基本的five.grok 知识

本入门较为简略，但是提供了进一步学习的链接。我希望能根据用户评论对其进行完善。

安装

安装Web and Mobile 到你的buildout

与lxml 有关的 一些 问题

创建一个Plone 站点（如果你还没有一个现成的站点）。

然后按顺序安装下列add-ons 到你的站点：

• Go Mobile
• Go Mobile Default Theme

现在你的站点应该有了基本的手机界面，默认使用Web and Mobile 主题，如下所示：

测试手机站点

可以在你的/etc/hosts 文件中添加一个m.localhost 域以方便访问你的站点的移动版本 。你不需要有一个手机浏览器，因为这个手机站点默认通过域名来检测的，你可以通过类似链接http://m.localhost:8080/Plone 来访问你的手机站点。

如果你通过一个真实的手机浏览器访问站点，你将被自动重定向到它的手机版本。

创建一个手机主题

安装基于ZopeSkel 的主题模板到你的buildout.cfg 。

parts =

   ...

   paster

 

[paster]

recipe = zc.recipe.egg

eggs =

  PasteScript

  gomobile.templates

  ${instance:eggs}

运行buildout ，以获得bin/paster 命令：

bin/buildout

使用paster 创建一个主题的骨架。这里我们使用gomobiletheme.yourcompanyname 作为python 包名。如果它询问你是否“override files ”，回答yes 。

cd src

  ../bin/paster create -t gomobile_theme gomobiletheme.yourcompanyname

将你新主题的egg 放入buildout 的develop-eggs 中。

eggs =

    gomobiletheme.yourcompany

develop =

   src/gomobiletheme.yourcompan

Rerun buildout.

测试主题骨架

重启Plone 并且安装你刚才创建的主题包，测试主题是否能正常安装及工作。

再次访问m.localhost 看看手机站点是否仍然正常工作。

主题定制原理

生成的手机主题包括基于five.grok 的viewlets.py 和view.py 文件，你可以在这些文件中放入：

• 手机主题viewlets （注意：手机主题没有使用viewlet manager ）
• 手机主题相关的view 重载
• 手机主题相关的页面模板重载

所有界面代码注册到gomobiletheme.yourcompany.interfaces.IThemeLayer 接口 ，将在手机浏览模式下生效。

修改logo

修改生成的gomobile.yourcompany.viewlets.Logo 类。下面示例我们使用正常站点的logo 图片作为logo 。

class Logo(base.Logo):

# Change logo URI here

    def getLogoPath(self):

     return "++resource++plonetheme.yourwebtheme.images/logo.png"

如果你使用正常站点资源目录中的logo ，确保在主题browser/configure.zcml 中的<resourceDirectory> 指令没有<resourceDirectory layer=”"> 之类的设置。如果设置了资源目录对于手机主题不生效，那么手机主题无法访问logo 文件。

Logo 图片将由gomobiletheme.basic.viewlets.Logo 的基类 自动改变尺寸，以适应不同的手机屏幕。

修改页脚文字

在viewlets.py 中添加：

class FooterText(base.FooterText):

""" Free-form HTML text at the end of the page """

# the presence of this viewlet includes a new page template

      # and overrides default footertext

     …

然后包括页面模板。添加新的页面模板文件footertext.pt 到主题包templates 目录下：

<div id="footer-text" i18n:domain="isleofback.app">

  Your text goes here.

</div>

修改默认颜色和CSS

手机主题的静态CSS 和JS 资源由five.grok 的静态目录机制提供。Transformations文档 详细说明了提供给不同手持设备所使用的不同css 文件：common.css 应用于所有的手机浏览器，highend.css 应用于基于 Webkit 和Firefox 的浏览器，lowend.css 应用于功能受限的浏览器。

gomobiletheme.basic CSS 资源将默认被包含。你可以只重载你想要修改的样式规则。你还可以添加规则到common.css ，lowend.css 和highend.css 文件 。

更多信息

• 阅读 Web and Mobile文档中的主题定制章节
• 看看Plone Conference 2010 中的Web and Mobile 幻灯片
• 看看一个开源的例子plonecommunity.app
• SVN中关于主题定制的最新信息
• 订阅Web and Mobile 讨论组

 

 

-------------------------------------------------------

anzsoft         专业Plone/Zope 技术及服务提供商

Samespace   智能表单+ 工作流 快速业务开发平台