Plone学习8——修改主题文件

Plone学习8——修改主题文件

  • 复制内置主题
  • 主题文件介绍
  • 修改主题文件rules.xml
    • 注意点
  • 修改less文件并编译

参考链接

复制内置主题

首先从管理员界面进入“主题”,对内置的主题“Barceloneta Theme”进行复制和粘贴,命名为“mytheme”,如下图所示:
Plone学习8——修改主题文件_第1张图片

主题文件介绍

点击“修改theme”,进入文件主题编辑界面。可以看到三个主要的文件,分别是:

  • manifest.cfg:包含有关主题的元数据(清单引用)
  • rules.xml:包含主题规则(规则参考)
  • index.html:主题的静态HTML

以上是官方文档给出的定义,后面我会给出自己的理解。

我们来看一下manifest.cfg文件:

[theme]
title = mytheme
description = 
preview = preview.png
rules = /++theme++mytheme/rules.xml
prefix = /++theme++mytheme
doctype = 
enabled-bundles = 
disabled-bundles = 
development-css = /++theme++mytheme/less/barceloneta.plone.less
production-css = /++theme++mytheme/less/barceloneta-compiled.css
tinymce-content-css = /++theme++mytheme/less/barceloneta-compiled.css
development-js = 
production-js = 

可见这个文件本身很简短,代码不多,但有几个点很重要:

  • development-css:这个指出了less的主文件,类似于python的主函数,它导入了很多局部的less文件,局部的less文件负责各自的css部分
  • production-css:这个指出了barceloneta.plone.less编译后的css文件,这个文件的代码量很大,相当于把所有的less文件代码都写进了这个文件,也是最终起作用的css文件

修改主题文件rules.xml

我们通过一个小例子来学习如何通过修改rules.xml实现页面视图的修改。

首先,我们要对下图的一个内容块进行修改,使得只有满足某个角色条件的用户才能访问。
如图所示:
Plone学习8——修改主题文件_第2张图片
为此,我们需要在rules.xml中找到

  <replace css:content="#viewlet-above-content" css:theme="#above-content" />
  • 上面replace的意思是:这是一个id=“viewlet-above-content”的html代码块,要在index.html中用id=“above-content”的代码块替换它
  • 我们可以通过添加css:if-content来控制它根据访问者的角色(role)进行展示

比如:
限制只有role为authenticated的用户才能看到

    <replace 
    css:content="#viewlet-above-content" 
    css:theme="#above-content"
    css:if-content="body.userrole-authenticated"/>

限制只有role为member的用户才能看到

    <replace 
    css:content="#viewlet-above-content" 
    css:theme="#above-content"
    css:if-content="body.userrole-member"/>

注意点

  • 修改了rules.xml文件后,一定要把less文件再编译,才能生效;否则该主题将无法生效

修改less文件并编译

这里介绍一个修改网页css的例子

把网页的背景颜色换成红色

首先,我们在less/barceloneta.plone.less文件的最底部加上

body {
    background-color: red;
    font-size: 18px;
}

然后点击“保存(Save)”和“编译CSS(Build CSS)”按钮
Plone学习8——修改主题文件_第3张图片
网页的效果图如下:
Plone学习8——修改主题文件_第4张图片
body的class类:当您浏览Plone网站时,Plone会添加有关您当前上下文的丰富信息。此信息表示为元素中的特殊类。这些类所代表的信息包括:

  • 当前的用户角色和权限
  • 当前的内容类型及其模板
  • 网站部分和子部分
  • 当前的子网站(如果有的话)
  • 这是否是前端视图
  • 图标是否已启用

比如:

  • 匿名用户的body的class
<body class="template-document_view
             portaltype-document
             site-acme
             section-front-page
             icons-on
             thumbs-on
             frontend
             viewpermission-view
             userrole-anonymous">
  • manager的body的class
<body class="template-document_view
             portaltype-document
             site-acme
             section-front-page
             icons-on
             thumbs-on
             frontend
             viewpermission-view
             userrole-member
             userrole-manager
             userrole-authenticated
             plone-toolbar-left
             plone-toolbar-expanded
             plone-toolbar-left-expanded">

你可能感兴趣的:(plone)