注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

蜻蜓点水 举重若轻

君子终日乾乾

 
 
 

日志

 
 

把你的 Plone 变得像 Douban 一样快(三)  

2006-11-29 18:32:25|  分类: 其他技术 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
把你的 Plone 变得像 Douban 一样快(三) - 沈崴 - 蜻蜓点水 举重若轻


下面我们先热身

在正式动手之前, 我们最好是先看一下关于 Plone 定制方面的文档。请下载《Plone 资料汇编》浏览其中的第四章、第七章。不过这些内容有一定门槛, 但是请别泄气, 我们可以慢慢来, 基本上对 Plone 定制留个大体的印象就可以了。通过实践, 我们会逐渐弄明白。反过来, 先按照本文进行实践, 再回过头去看 Plone 资料, 或许会事半功倍。

好, 我们正式开始

上次有提到, 我们可以采取两种策略来加快 Plone 的显示。第一种, 就是把外部 CSS 和 JavaScript 文件放在 Body 部分下载。第二种, 就是简化页面显示。这里, 我两种策略都采取。

    ·使用 JavaScript 动态加载外部 CSS 文件。
    ·定制 Document (页面) 的显示, 去除复杂的系统框架, 仅仅显示文档的内容。

这里, 使用 JavaScript 来动态加载外部 CSS 文件, 只是让整件事情变得更酷而已。最简单的方法, 不过是把导入 CSS 的 HTML 文本从 Head 部分转移到 Body 的末尾, 效果是一样的。

关于 JavaScript 是如何动态加载外部 CSS 文件的, 请参考我以前的资料《在网页中动态加载 CSS 样式文件》。现在你不用自己来写这个程序, 我已经把一个直接能用的程序放在了 http://eishn.plonespace.net/lazy.js 这个位置。大家可以下载来用。

接下来登录为管理员, 进入你的 ZMI 界面 (http://eishn.plonespace.net/manage)。请看上面图片, 这次你走得更远, 你点击了 portal_skins (见图片 A), 再选择文件夹 custom, 便进入了 /portal_skins/custom (见图片 B) 目录。

往添加菜单看去 (见图片 C), 选择 "File" 类型, 把我在上面所说的 lazy.js 上传上去 (见图片 D)。

接着我们要使用真功夫了。选择添加菜单的 "Page Template" 类型。这是一个 Zope/Plone 的页面模板 (ZPT), 强大并且复杂, 你可以从《Plone 资料汇编》中得到 ZPT 所有的魔法说明。我们给这个模版起一个叫做 "document.view" 的名字。

这里, 页面本来的默认模版叫做 document_view, 如果我们的模版也叫 document_view, 那么我们就把页面原先的显示给覆盖了。如果你觉得直接覆盖没关系, 那就选择 document_view 这个名字吧。不过我们这里 document.view 这个名字显然要酷得多了。

下面, 编辑模版 document.view, 内容如下:

    <html tal:define="text python: here.CookedBody(stx_level=2)" i18n:domain="plone">
        <metal:block tal:define="dummy python:request.RESPONSE.setHeader('Content-Type', 'text/html;; charset=%s' % here.plone_utils.getSiteEncoding())" />

        <head>
            <title tal:content="here/title_or_id">Title or id</title>
        </head>
        <body>
        <div style="margin: 15px;"
            tal:condition="text"
            tal:attributes="class python:test(here.Format() in ('text/structured',
                'text/x-rst', ), 'stx', 'plain')">
            <div tal:replace="structure text" />
        </div>

        <a href="edit">Edit</a>|<a href="document_view">Originally</a>&nbsp;
        <a href="http://plonespace.net"><img src="http://plonespace.net/about/logo-small.png" style="height: 20px" /></a>

        <script language="JavaScript" type="text/javascript"></script>
        <script language="JavaScript">
            LazyLoadStyle('http://eishn.plonespace.net/portal_css/Plone%20Default/ploneStyles8918.css');
            LazyLoadStyle('http://eishn.plonespace.net/portal_css/Plone%20Default/ploneStyles4002.css');
        </script>
        </body>
    </html>


其中
    <metal:block tal:define="dummy python:request.RESPONSE.setHeader('Content-Type', 'text/html;; charset=%s' % here.plone_utils.getSiteEncoding())" />

这行是用来告诉 IE 浏览器这个网页的编码是什么。因为 IE 很傻, 他不会像 Mozilla 那样自己判断。

    <html tal:define="text python: here.CookedBody(stx_level=2)" i18n:domain="plone">
        ...
        <div style="margin: 15px;"
            tal:condition="text"
            tal:attributes="class python:test(here.Format() in ('text/structured',
                'text/x-rst', ), 'stx', 'plain')">
            <div tal:replace="structure text" />
        </div>
        ...
    </html>

上面这段模板, 用来取出 Document 页面的内容。而下面的代码, 为页面的编辑和原始页面的浏览留下两个链接。

    <a href="edit">Edit</a>|<a href="document_view">Originally</a>&nbsp;

接下来, 我们使用 lazy.js 的 LazyLoadStyle 函数来导入外部 CSS 文件。请注意这里外部 CSS 文件的文件名需要从你自己的 Plone 页面 HTML 源中取出来。比如你可以打开首页, 然后看首页中加载了哪些 CSS 文件。我这里选择了两个主要的 CSS 文件。这里请对照、参考《把你的 Plone 变得像 Douban 一样快 (二)》。代码如下:

    <script language="JavaScript" type="text/javascript"></script>
    <script language="JavaScript">
        LazyLoadStyle('http://eishn.plonespace.net/portal_css/Plone%20Default/ploneStyles8918.css');
        LazyLoadStyle('http://eishn.plonespace.net/portal_css/Plone%20Default/ploneStyles4002.css');
    </script>

最后一步, 因为我使用了免费的空间, 所以作为感谢, 加上免费空间的声明和链接。

    <a href="http://plonespace.net"><img src="http://plonespace.net/about/logo-small.png" style="height: 20px" /></a>

这样我们就完成了 document.view, 选择保存 (见图片 D)。

现在我们来试验一下首页 http://eishn.plonespace.net/front-page/document.view 。你会发现 document.view 模板已经开始工作了!

最后一步, 让 document.view 变成 Document 页面的默认模板 (代替 document_view)。

请在 ZMI 下选择 portal_types, 你会看到 Plone 支持的所有对象的列表, 选择 Document (Page), 我们会看到 Document 的默认标签页 "Properties"。直达链接为 http://eishn.plonespace.net/portal_types/Document/manage_propertiesForm。

在 "Available view methods" 属性中增加一行, 填上 document.view, 然后把 "Default view method" 属性改成 document.view。这样我们就已经把页面的默认显示改变成 document.view 了。

现在, 我们再来访问 Plone 页面, 就已经飞快了!

现在我们已经脱离到 Plone 的框架之外了。这在你不需要 Plone 框架, 完全靠自己设计页面显示的时候是再好不过了。但是如果你仍然需要 Plone 强大的原始显示, 你就不应该将 document.view 设为默认。而是应该在页面的 "显示" 菜单中将需要脱离框架的那些页面单独设置成 document.view 的显示模式。

这样我们已经加速了站点的页面。我们仍然可以在后台使用 Plone 强大的内容管理功能, 比如说, 编辑页面, 管理目录和图片。但显示已经比原来快上很多倍了。
  评论这张
 
阅读(3541)| 评论(11)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017