跳转到主要内容

Deco UI功能的包

项目描述

简介

Deco是Plone的图形编辑器。

安装

要安装Deco,请将plone.app.deco添加到您的构建中,并将Deco扩展配置文件安装到Plone站点中。这将安装

  • plone.app.deco、Deco编辑器和资源

  • plone.app.page、基本页面内容类型以及管理页面类型、站点布局和模板页面布局的支持逻辑。

  • plone.app.blocks、Blocks渲染引擎

  • plone.tilesplone.app.tiles,允许创建和管理瓷砖。

  • plone.app.standardtiles,其中包含Plone站点中常用的瓷砖。

  • plone.app.cmsui,它将Plone的CMS UI分离为独立的、隔离的工具栏。

要测试它,请将新安装的页面类型的项添加到您的站点。

请注意,Deco 和 plone.app.cmsui 会对 Plone 网站的用法和运行方式产生重大影响。如果您要在现有网站上安装,请务必小心,并进行仔细测试。

概念

Deco、区块和瓦片提供了一种简单而强大的方法来管理 Plone 网站上的页面。它们的核心理念是依赖于语义 HTML 和具有有效、可发布的 URL 的资源。以下,我们将概述构成 Deco、区块和瓦片的核心概念。

Deco

Deco 是一个用于通过区块渲染的页面的可视化编辑器。它依赖于 Deco 网格系统,以直观、所见即所得、拖放的方式将瓦片放置在页面上。使用 Deco,可以轻松地制作出复杂、平衡且视觉上吸引人的布局。

当用户通过 CMS UI 工具栏将页面切换到编辑模式时,会调用 Deco 编辑器。

Deco网格系统

Deco 网格系统是一个简单的 CSS 网格框架。它使用稳健的、跨浏览器的 CSS 技术来允许页面被划分为逻辑、成比例的行和列。

Deco 编辑器使用 Deco 网格系统中的 CSS 类,允许用户将行和列调整到预定义的、视觉上一致的比例。

注意:Deco 网格 CSS 需要包含在所有由 Deco 管理的渲染页面上。

区块是一种基于 HTML 标记约定的渲染算法。由 Deco 管理的页面存储为简单的 HTML 文档,代表该页面的实际内容,作为独立的、可发布的资源,不包含任何网站布局内容(例如全局导航元素)。这被称为 页面布局

<html /> 的页面布局中,将具有如下数据属性

<html data-layout="..." />

区块作为一个发布后转换运行,将页面布局转换为最终页面,该页面通过将页面布局合并到引用的 网站布局 中,并然后将瓦片合并到页面中来返回给用户的浏览器。

注意:如果禁用了 Blocks 渲染,请求页面将仅返回页面内容,在一个有效、独立的 HTML 文档中。

重要的是要意识到,区块不关心页面的渲染方式:它可能是从数据库中获取的纯 HTML 块(如 Deco 管理的页面通常那样),页面模板的渲染结果,或某些其他动态生成的内容。如果 HTML 标签中有 data-layout 属性,它将被转换并合并到网站布局中。

注意:当安装 plone.app.deco 时,它将在 portal_skins 中启用一个名为 deco 的主题,并将其切换为默认主题。这为 Plone 的 main_template 安装了一个覆盖,允许非 Deco 管理的页面参与 Blocks 渲染(即使用当前网站布局和瓦片)。

您可以在这里了解更多关于 Blocks 的信息。

站点布局

如前所述,网站布局控制最终渲染页面的全局元素,例如全局导航辅助工具、搜索框、页眉/页脚内容等。

从 Blocks 的角度来看,网站布局也只是 HTML 文档。它可能是由属于视图的页面模板渲染的。然而,最常见的方法是使用类型为 资源目录sitelayout。Deco 控制面板和页面编辑 UI 提供了管理此类资源的工具。

资源目录由 plone.resource 提供。资源可以通过网络创建(包括从 Deco 控制面板),在全局资源目录(例如在 buildout 内部)的文件系统中,或使用 <plone:static /> ZCML 指令在文件系统 Python 包中创建,如下所示

<plone:static
    type="sitelayout"
    name="mylayout"
    directory="sitelayouts/mylayout"
    />

在资源目录中,网站布局应放置在一个名为 site.html 的文件中。还可以有一个可选的文件 manifest.cfg,其中包含有关布局的元数据,例如:

[sitelayout]
title = My site layout
description = An interesting site layout

如果通过网页创建布局,它将被放置在ZODB中的 portal_resources 目录中。有关更多信息,请参阅 plone.resource

始终存在一个全局默认网站布局。可以通过Deco控制面板或使用 registry.xml 文件中的GenericSetup来更改它。

<?xml version="1.0"?>
<registry>

    <record name="plone.defaultSiteLayout">
        <value>./++sitelayout++mylayout/site.html</value>
    </record>

</registry>

请注意,这提供了从上下文到网站布局的相对路径。以 / 开头的URL将相对于门户根目录。 ++sitelayout++ 遍历命名空间允许访问该类型的资源。 mylayout 是布局的名称,而 site.html 是包含实际布局HTML文档的文件的名称。

对于Deco管理的页面,网站布局也可以按页面和按部分管理

  • 按页面布局允许用户从具有全局元素在左右两侧的三列网站布局切换到全宽的启动页面,前提是已定义了两个网站布局(例如, three-columnsplash-page)。

  • 按部分布局允许更改给定部分下所有页面的默认网站布局(即给定页面的所有子页面及其子页面的子页面)。

为了在没有修改每个页面的情况下更改默认或部分布局的情况下使此操作正常工作,大多数页面将使用以下布局属性:

<html data-layout="./@@page-site-layout">...

@@page-site-layout 视图将定位在任何给定上下文中使用的正确页面布局,并返回其内容,同时考虑按页面布局。

对于其他视图,有一个更合适的网站布局间接视图

<html data-layout="./@@default-site-layout">...

这仍然尊重全局和部分布局,但不会使用页面的网站布局,这应该仅适用于该页面的特定视图。

面板

面板是将页面布局和网站布局内容合并的方式。面板是网站布局上的一个区域,由一个 id 标识,该 id 可能被网站上的相应区域替换。

面板在网站布局中使用头部中的一个链接定义,如下所示:

<link rel="panel" rev="panel-name" target="placeholder-id" />

网站布局 的主体中,应该有一个具有与占位符 id(即 target 属性)相对应的 id 属性值的占位符元素。如果 页面布局 的主体中有一个与面板名称(即 rev 属性)相对应的 id 元素,则该元素将替换网站布局中的相应占位符。

注意:在面板合并过程中,任何不在网站布局中注册的面板内的页面主体中的内容都将被丢弃。

页面布局的头部内容自动合并到网站布局的头部。对于只能出现一次的元素,如 <title /><base />,如果两个布局中都存在,则替换网站布局中的相应元素。对于其他元素,页面布局的头部内容将在网站布局自己的头部内容之后合并到网站布局中。

有关此算法的更详细示例,请参阅 plone.app.blocks 文档。

瓷砖

瓦片表示页面上的动态部分。在最基本层面上,瓦片只是一个具有可发布URL的HTML文档。

实际上,瓦片通常作为继承自Tile基类的浏览器视图实现,并通过<plone:tile /> ZCML指令进行注册。这使得瓦片可以拥有一些基本元数据,并为任何可配置方面自动生成编辑表单,Deco会将这些暴露给用户。请参见plone.tiles获取示例。

在Deco中处理瓦片时,有三种类型的瓦片

文本瓦片

静态HTML标记(WYSIWYG编辑过的文本),放置在页面或网站布局中。严格来说,文本瓦片并不涉及任何瓦片检索或合并——相反,它们被存储为页面或网站布局的一部分。然而,对于用户来说,文本瓦片可以被移动和管理,就像任何其他瓦片一样。

字段瓦片

渲染标题或描述等元数据字段的值。字段瓦片的值可以在页面中就地编辑,但值存储在底层字段中,并可以索引到目录中,用于导航等。在实践中,字段瓦片是特殊瓦片plone.app.standardtiles.fields的一个实例,字段名作为参数传递。

应用瓦片

任何其他类型的动态瓦片。例如,可能包括文件夹列表、媒体播放器、投票或几乎所有您能想到的东西。

为了让Deco了解瓦片并在WYSIWYG编辑器中插入它,它必须在portal_registry中进行注册,通常使用registry.xml通用设置导入步骤。以下是一个日历瓦片的片段

<records prefix="plone.app.deco.app_tiles.plone_app_standardtiles_calendar"
        interface="plone.app.deco.interfaces.ITile">
    <value key="name">plone.app.standardtiles.calendar</value>
    <value key="label">Calendar</value>
    <value key="category">applications</value>
    <value key="tile_type">app</value>
    <value key="default_value"></value>
    <value key="read_only">false</value>
    <value key="settings">true</value>
    <value key="favorite">false</value>
    <value key="rich_text">false</value>
    <value key="weight">10</value>
</records>
<record name="plone.app.deco.app_tiles.plone_app_standardtiles_calendar.available_actions">
    <field type="plone.registry.field.List">
        <title>Available actions for the Calendar tile</title>
        <value_type type="plone.registry.field.TextLine" />
    </field>
    <value>
         <element>blur</element>
         <element>tile-align-block</element>
         <element>tile-align-right</element>
         <element>tile-align-left</element>
    </value>
</record>

注意在两个记录中都使用的独特标识符plone_app_standardtiles_calendar,以及用于引用瓦片名称(plone.app.standardtiles.calendar)的引用,这应该与<plone:tile /> ZCML指令中使用的名称相对应。

瓦片可以放置在页面布局和网站布局中。在两种情况下,它们都包含一个具有唯一ID的占位符元素和页面头部中的瓦片链接,例如

<link rel="tile" target="logo" href="./@@plone.app.standardtiles.logo" />

有了这个链接,块将查找ID为logo的元素,并将其用通过遍历到相对于当前上下文的./@@plone.app.standardtiles.logo找到的瓦片的内 容替换。

如果瓦片有配置参数,这些参数通常会嵌入到查询字符串中。具有此类参数的瓦片称为瞬态瓦片

<link rel="tile" target="footer-viewlets"
    href="./@@plone.app.standardtiles.viewletmanager/footer?manager=plone.portalfooter" />

如果瓦片需要更复杂的配置,这些配置无法嵌入到查询字符串中,它可能会查找存储在当前上下文持久注释中的数据;在这种情况下,它被称为持久瓦片

注意:尽可能避免使用持久瓦片,因为它们较慢且以模糊的方式存储数据。

当瓦片被渲染时(即调用其URL时),它应该返回一个完整的HTML文档。<body />标签的内容将被用来替换瓦片占位符。瓦片<head />标签中的任何内容都将合并到最终渲染页面的头部部分。这允许瓦片请求特定的CSS或脚本资源,例如。

注意:在许多情况下,将资源注册到portal_cssportal_javascripts注册表中将更好,这样可以允许正确合并和管理缓存标头。

某些瓷砖仅用于头部,并且将没有<body />元素。在这种情况下,瓷砖链接中的占位符ID(即target属性)可以省略。

有关瓷砖及其如何融入页面的更多信息,请参阅plone.app.blocksplone.tiles

页面类型(类别)

当安装Deco时,它会在portal_types中添加一个新类型,简单地称为page。这是一个使用ILayoutAware行为来管理页面和特定节布局以及Deco页面布局本身的Dexterity内容类型。这反过来又被用于@@page-site-layout@@default-site-layout视图。

page类型使用一种特殊的Factory Type Information(FTI)类型,称为Page FTI。这是标准Dexterity FTI的扩展,它还存储了默认站点布局和站点模板页面布局。

模板页面布局是类型为pagelayout的资源(在plone.resource的意义上)。当创建给定页面类型的新实例时,其模板页面布局的内容用作新内容项的起始点。

一个页面可以保存为一个新类型——这可以通过标准添加内容用户界面添加——在内容页面编辑屏幕内。幕后,这会导致创建一个具有新标题、描述以及基于当前页面内容的模板页面布局的page门户类型的副本。

注意:页面类型有时被称为页面类别

可以从Deco控制面板管理模板页面布局、站点布局和页面类型。

常见问题解答

下面,我们将尝试回答一些关于Deco、Blocks和Tiles的常见问题。

如何使用Deco和块为主题化站点?

您可能已经意识到,可以通过在站点布局本身放置全局元素和品牌来使用站点布局“主题化”一个网站。

这可能适用于品牌需求简单的简单网站:一般来说,如果您认为您只能使用Deco视觉编辑器构建品牌,那么使用站点布局来包含您的视觉标识可能是合适的。

但是也有一些注意事项

  • 最好让您的站点布局专注于语义布局,例如使用“文章”或“着陆页”之类的名称。如果内容作者主要根据视觉标识选择页面和节的站点布局,则以后重新使用内容或重新品牌化网站将更加困难。

  • 您可以选择让内容作者或站点管理员拥有创建新站点布局或编辑站点布局内容(例如,管理全局元素如广告或通知)的权限。如果站点布局复杂,可能在多个站点布局之间维护视觉一致性可能很困难。

因此,我们通常建议您尽可能保持站点布局的语义和简单,并使用Diazoplone.app.theming应用视觉标识。Deco和Diazo被设计为协同工作,其中Deco专注于与内容管理和编辑相关的站点布局,而Diazo专注于品牌和主题。

视图组件会发生什么?

在Plone 3和4中,视图小部件用于两个目的

  1. 作为将主站点布局模板拆分为可以独立管理的较小块的手段。

  2. 作为一种第三方插件将标记片段注入到页面预定位置(例如“内容上方”或“内容下方”)的手段,无需自定义全局页面模板。

其中第一种方法在某些方面存在问题。例如,它依赖于全局注册(ZCML)和本地持久配置(viewlets.xml通用设置导入步骤)来控制显示内容和顺序。它也使得通过检查main_template来理解最终页面外观变得困难。

因此,使用视图组件的这种模式已被瓷砖所取代。瓷砖简单地放置在相关网站布局中。瓷砖的顺序由相关瓷砖占位符的顺序控制。作为额外的好处,瓷砖比视图组件更容易编写,并且可以具有相关的配置。

视图组件的第二次使用当然是完全合法的。在这里,特定的顺序应该不那么重要(第三方插件无法知道其他第三方插件可能在同一视图组件管理器中添加内容),重点转向页面上可以插入视图组件的语义或半语义位置。这确实更接近视图组件的原始目的。

对于这种模式,有一个名为@@plone.app.standardtiles.viewletmanager的瓷砖,它查找并渲染视图组件管理器。例如,Deco中的默认网站布局包含

<link  rel="tile" target="abovecontent-viewlets"
    href="./@@plone.app.standardtiles.viewletmanager/above-content?manager=plone.abovecontent" />

请注意,瓷砖接受一个参数manager,该参数给出要查找和渲染的视图组件管理器的名称。对于在页面头部渲染的视图组件管理器,我们使用

<link  rel="tile"
    href="./@@plone.app.standardtiles.viewletmanager?manager=plone.htmlhead&amp;section=head" />

这确保视图组件管理器的内容在瓷砖的<head />中渲染,而不是在<body />中。

部件会发生什么?

很可能应该用瓷砖替换端口。这将需要一些重构,因为瓷砖比端口简单得多。但这种简单性是好事:瓷砖更快、更易编写且更易理解。

还有一个概念上的区别:不是拥有获取和阻止来自内容层次结构的端口的端口管理器,Plone 3和4中在端口中管理的类似内容和动态行为将由直接放置在适当网站布局中的瓷砖来建模。

如果情况需要,相关瓷砖当然可以使用更多抽象,例如建模设置继承。但在大多数情况下,这并不是必要的:网站通常只有少数不同的布局,在Plone 4中有时需要复杂的端口分配、继承和阻止操作。

对于用户来说,用于导航树或新闻条目列表(这两者在Plone 4中都是端口)等事物以及用于投票或页面上的内容列表的应用程序瓷砖之间几乎没有什么区别。在Deco管理的网站布局中,瓷砖可以放置在布局中最合适的位置,而且如果您的布局不是三列布局,就不需要编写ZCML和/或Python代码来插入另一个端口管理器。

然而,有一个“遗留”瓷砖可以用来渲染端口管理器的内容,从而允许以与Plone 4相同的方式管理和渲染现有的端口。例如

<link  rel="tile" target="left-portlets"
    href="./@@plone.app.standardtiles.portletmanager/left-portlets?manager=plone.leftcolumn" />

内容类型会发生什么?

传统上,以一致的方式实现特定的非平凡布局需要创建一个新的内容类型。使用Deco和页面分类,许多现有类型可以被视为具有不同布局的页面。

例如

Plone 4类型

Deco等效

页面

具有简单默认布局的标准页面类型。

事件

一种新类别的页面,具有模板页面布局,包括相关的元数据字段,如开始和结束日期。

新闻条目

一种新类别的页面,布局将主图像置于标题下方。

文件夹

页面可以有子页面。这取代了大多数用户认为极其混乱的“默认页面”概念。如果您需要文件夹列表,可以在页面上放置文件夹列表瓷砖。

集合

集合查询构建器是一个瓷砖:因此,集合简单地成为具有该瓷砖实例的页面。

当然,页面类别在Plone的每个地方都被视为一流的内容类型,因此它们可以在目录查询中使用,例如。

其余的是

  • 页面及其变体

  • 文件,应处理文件和图像,当处理图像MIME类型的二进制文件时,提供图像操作和行为。

  • 任何自定义、表单驱动的类型:Dexterity(特别是其通过Web创建类型的功能)提供了一个极好的方式来使用表单驱动的数据输入作为主要的内容管理范例来建模组织特定的数据结构。这些类型可以具有指定网站布局的视图模板,或者简单地使用标准的main_template宏,这些宏反过来会使用默认(全局或部分特定的)网站布局。

在Deco上工作

Deco仍在开发中。如果您想帮助完成它,以下是一些如何参与的提示。

开发构建

https://svn.plone.org/svn/plone/plone.app.deco/buildouts/dev有一个开发buildout。

源代码

plone.app.decoplone.app.page和其他软件包的代码都生活在Plone主源代码存储库中https://svn.plone.org/svn/plone/。请注意,在您能够提交到该存储库之前,您必须已签署Plone贡献者协议。

报告错误

在Deco成为Plone的一部分之前,请通过JIRA报告错误。Deco的JIRA项目位于:http://projects.plone.org/browse/DC

i18n

所有消息字符串都应位于Plone域中。如果您需要添加任何Plone 5软件包以提取消息,您只需将experimental/i18n.cfg中的plone5变量添加进去并运行buildout。您可以在任何时刻执行bin/i18n plone5,如果没有错误,您可以从src/plone.app.locales/plone/app/locales/locales-future提交更改。

变更日志

1.0 (2012-06-22)

  • 首次发布。[garbas]

项目详情


下载文件

下载适用于您的平台的文件。如果您不确定选择哪个,请了解更多关于安装软件包的信息。

源分布

plone.app.deco-1.0.tar.gz (199.4 kB 查看散列)

上传时间

支持者:

AWS AWS 云计算和安全赞助商 Datadog Datadog 监控 Fastly Fastly CDN Google Google 下载分析 Microsoft Microsoft PSF 赞助商 Pingdom Pingdom 监控 Sentry Sentry 错误记录 StatusPage StatusPage 状态页面