README

将Klaro! consent-manager集成到TYPO3中。完全基于文件的配置，无需管理数据库条目即可进行版本控制。

此扩展会自动为嵌入的YouTube和Vimeo视频添加同意覆盖层。

关于Klaro!的更多信息请见此处

• https://klaro.org/docs/getting-started
• https://github.com/klaro-org/klaro-js

安装与配置

简单安装扩展。

之后，您需要在网站设置（YAML）中定义Klaro!-配置的路径。如果您使用站点包，您也可以使用扩展路径。

klaro:
    config: EXT:site_default/Resources/Public/Config/KlaroConfig.js
    customCss: EXT:site_default/Resources/Public/Css/Klaro.css

或者可以使用以下表示法（虽然可行，但出于清晰命名空间的目的不建议使用）

klaroConfig: EXT:site_default/Resources/Public/Config/KlaroConfig.js
klaroCustomCss: EXT:site_default/Resources/Public/Css/Klaro.css

如果您没有定义任何配置或自定义CSS，将使用默认配置和默认样式。但是，您可以使用以下设置显式禁用klaro!同意管理器

klaro:
    disable: true

或者 - 相应地 -

klaroDisable: true

重新打开模态框

如果您想在网站上显示一个菜单项以重新打开模态框，此扩展会将字段tx_klarokratie_open_modal添加到页面表中，包括相应的TCA配置，以便在管理后端中使用页面属性方便地切换。您可以使用此字段相应地渲染菜单，并添加所需的JS以重新打开模态框，而不是普通的页面链接。

示例

<a class="nav-link {f:if(condition:'{menuItem.active}', then:'active')}"
   href="{f:if(condition:'{menuItem.data.tx_klarokratie_open_modal}', then:'#', else:'{menuItem.link}')}"
   {f:if(condition:'{menuItem.data.tx_klarokratie_open_modal}', then:'onclick="javascript:klaro.show(undefined, true);return false;"')}
   target="{menuItem.target}"
   title="{menuItem.title}"
   role="menuitem">
    <span>{title}</span>
</a>

自定义CSS

您可以为适应Klaro!覆盖层添加自定义CSS文件（见上方第二行）。CSS部分使用变量，您可以在自定义CSS中覆盖这些变量

body .klaro {
    --green1: #d63f11;
    --green2: #d63f11;
    --green3: #d63f11;
    --font-family: Helvetica, Arial, sans-serif;
}
body .klaro .context-notice {
    background-color: #f2f2f2;
    font-size: 1.2em;
}

body .klaro label {
    margin:0;
}

body .klaro .cookie-modal .cm-btn,
body .klaro .context-notice .cm-btn,
body .klaro .cookie-notice .cm-btn {
    text-transform: uppercase;
    font-size:14px;
    font-weight: 600;
    border-radius: 8px;
    display: inline-block;
    border: 0px;
    cursor: pointer;
    letter-spacing: 0.01em;
    border: 2px solid #d63f11;
    transition: all 0.2s ease-out;
    line-height: 1.2;
    text-align:center;
    padding: 12px;
}

body .klaro .cookie-modal .cm-btn:hover,
body .klaro .context-notice .cm-btn:hover,
body .klaro .cookie-notice .cm-btn:hover {
    background-color:#fff;
    color: #d63f11;
}

body .klaro .context-notice .cm-btn.cm-btn-success-var,
body .klaro .cookie-notice .cm-btn.cm-btn-success-var,
body .klaro .cookie-modal .cm-btn.cm-btn-success-var,
body .klaro .cookie-modal .cm-btn.cm-btn-accept,
body .klaro .cookie-modal .cm-btn.cm-btn-decline {
    background-color: #505050;
    border: 2px solid #505050;
}

body .klaro .context-notice .cm-btn.cm-btn-success-var:hover,
body .klaro .cookie-notice .cm-btn.cm-btn-success-var:hover,
body .klaro .cookie-modal .cm-btn.cm-btn-success-var:hover,
body .klaro .cookie-modal .cm-btn.cm-btn-accept:hover,
body .klaro .cookie-modal .cm-btn.cm-btn-decline:hover {
    background-color:#fff;
    color: #505050;
}

body .klaro .context-notice .cm-list-label .slider,
body .klaro .cookie-notice .cm-list-label .slider,
 body .klaro .cookie-modal .cm-list-label .slider {
    background-color: #676767;
}

body .klaro .cookie-modal .cm-caret,
body .klaro .cookie-modal .cm-list-description {
    font-size: 0.8em ;
}

body .klaro .cookie-modal .cm-modal .cm-header,
body .klaro .cookie-modal .cm-list-title {
    font-size: 1.2em;
}