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

最新推荐文章于 2021-07-05 13:24:36 发布

wurky

最新推荐文章于 2021-07-05 13:24:36 发布

阅读量225

点赞数

分类专栏： plone

本文链接：https://blog.csdn.net/weixin_40583478/article/details/99999862

版权

plone 专栏收录该内容

12 篇文章 2 订阅

订阅专栏

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

基于Barceloneta创建一个自定义主题
- 温馨提示
练习\指令
- 目的

参考链接

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

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

[theme]
title = Custom
description = A custom theme
doctype = <!DOCTYPE html>
development-css = ++theme++custom/styles.less
production-css = ++theme++custom/styles.css

编辑rules.xml

<?xml version="1.0" encoding="UTF-8"?>
<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">

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

  <rules css:if-content="#visual-portal-wrapper">
    <!-- Placeholder for your own additional rules -->
  </rules>

  <!-- Footer -->
  <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的情况下的布局

练习<drop>指令

目的

删除“仅在本栏目”的复选框
在这里插入图片描述
我们通过F12检查发现，该标签的class=“searchSection”

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

<rules css:if-content="#visual-portal-wrapper">
  <!-- Placeholder for your own additional rules -->

  <!-- Remove the "only in current section" checkbox. -->
  <drop css:content="div.searchSection" />
</rules>