Plone学习9——基于Barceloneta创建一个自定义主题

参考链接

基于Barceloneta创建一个自定义主题

• 在管理界面点击“Theming”
• 点击“New theme”
• 输入主题名字并勾选应用于该主题
• 点击“Create”
• 在主题化编辑器，确保新的主题包含的文件manifest.cfg，rules.xml，index.html和styles.less。
• 编辑manifest.cfg

[theme]
title = Custom
description = A custom theme
doctype = 
development-css = ++theme++custom/styles.less
production-css = ++theme++custom/styles.css

• 编辑rules.xml

<rules
    xmlns="http://namespaces.plone.org/diazo"
    xmlns:css="http://namespaces.plone.org/diazo/css"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:xi="http://www.w3.org/2001/XInclude">

  
  <xi:include href="++theme++barceloneta/rules.xml"><xi:fallback />xi:include>

  <rules css:if-content="#visual-portal-wrapper">
    
  rules>

  
  <xsl:variable name="footer_portlets" select="//footer[@id='portal-footer-wrapper']//div[@class='portletWrapper']/*[not(contains(@id,'portal-colophon')) and not(contains(@id,'portal-footer-signature')) and not(contains(@class,'portletActions'))]">xsl:variable>
  <xsl:variable name="footer_portlets_count" select="count($footer_portlets)">xsl:variable>
rules>

需要注意的是： 下面的内容不是官方文档推荐的，但是由于barceloneta的rules.xml文件删除了一部分代码，并且官方文档没有来得及更新，所以出现了bug——“Variable ‘footer_portlets_count’ has not been declared.”。详情可见链接

• 从Barceloneta复制一份index.html文件到这里
• 新建一个styles.less，并输入：

/* Import Barceloneta styles */
@import "++theme++barceloneta/less/barceloneta.plone.less";

/* Customize whatever you want */
@plone-sitenav-bg: pink;
@plone-sitenav-link-hover-bg: darken(pink, 20%);
.plone-nav > li > a {
  color: @plone-text-color;
}

• 然后点击“Save”和“Build CSS”，通过编译styles.less文件生成less.css文件

以下是效果图：

可见，导航栏区域变成了粉红色

温馨提示

用?diazo.off=1可以看到该页面无theme的情况下的布局

练习指令

目的

删除“仅在本栏目”的复选框

我们通过F12检查发现，该标签的class=“searchSection”

于是，我们可以在rules.xml的id="visual-portal-wrapper"的下面加入一行代码，如下图所示

<rules css:if-content="#visual-portal-wrapper">
  

  
  <drop css:content="div.searchSection" />
rules>

然后，保存刷新