README

Silverstripe Klaro [klɛro] 实现 KIProtect/klaro。这是一个同意管理器，帮助透明地处理第三方应用程序，并符合GDPR和ePrivacy。此模块灵感来自 nomidi/kw-cookie-consent。

需求

• silverstripe/cms ^4
• silverstripe/siteconfig ^4

兼容性

• 存在一个 3.x 分支，用于Silverstripe 3的回溯。
• 目前建议使用Silverstripe 4 & 5 v2。

>>>>> 不要使用 dev-master! <<<<<

建议

• lerni/silverstripe-googleanalytics

安装

使用 Composer 安装Silverstripe模块是推荐的方式。

composer require lerni/klaro-cookie-consent 或 composer require lerni/klaro-cookie-consent:3.x-dev

运行 dev/build

入门

该模块通过 KlaroInitExtension 加载 klaro.js，该扩展应用于ContentController。配置通过 KlaroConfigController 提供，并在 /_klaro-config 下可用。您可以链接同意设置，例如 <a onClick="klaro.show();return false;">Cookie同意</a> 或在CMS中使用简码。简码 [ConsentLink] 接受 beforeText & afterText 参数，并根据 SiteConfig->CookieIsActive 条件显示。

管理第三方应用程序/跟踪器

要管理第三方脚本并确保它们仅在用户同意使用后运行，只需将 src 属性替换为 data-src，将 type 属性更改为 text/plain，并添加一个具有原始类型的 data-type 属性，并添加一个与配置中给出的应用程序名称匹配的 data-name 字段。示例

<script type="text/plain"
    data-type="text/javascript"
    data-name="optimizely"
    data-src="https://#/js/10196010078.js">
</script>

Klaro将在同意给出时负责执行脚本（您可以选择在 OptOut 获取明确同意之前执行它们）。

相同的方法也适用于图像、样式表和其他具有 src 或 type 属性的元素。

样式

示例SCSS自定义

// !klaro
html .klaro {

    .cookie-modal,
    .cookie-notice {
        a {
            color: $link-color;
        }
        .cm-btn {
            cursor: pointer;
            font-size: 14px;
        }
    }
    .cookie-notice {
        .cn-ok {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start !important;
            .cn-buttons {
                order: 1;
                // decline
                .cm-btn.cn-decline {
                    background-color: $gray;
                    order: 1;
                }
                // accept all
                .cm-btn.cm-btn-success {
                    background-color: $link-color;
                    order: 0;
                }
            }
            // modal link
            .cn-learn-more {
                display: block;
                margin-top: .6em;
                order: 2;
                flex: 0 0 100%;
            }
        }
    }

    .cookie-modal {
        .cm-app-title {
            font-size: 14px;
        }
        // switch disabled
        .cm-list-label .slider {
            background-color: $gray-light;
        }
        // slider-switches
        .cm-list-input:checked + .cm-list-label .slider {
            background-color: $link-color;
        }
        // subitems
        .cm-list-description {
            color: $white;
        }
        // required switch enabled
        .cm-list-input.required:checked + .cm-list-label .slider {
            background-color: darken($link-color, 10%);
            &::before {
                background-color: darken($white, 16%);
            }
        }
        // halve is used on parent if children are on & off
        .cm-list-input.half-checked:checked + .cm-list-label .slider {
            background-color: mix($link-color, $white, 71%);
        }

        // accept all
        .cm-btn.cm-btn-accept-all {
            background-color: $link-color;
        }
        // save selection, decline
        .cm-btn.cm-btn-accept,
        .cm-btn.cm-btn-decline {
            background-color: $gray;
        }
        // klaro link
        .cm-modal .cm-footer .cm-powered-by {
        }
    }
}

待办事项

• 从klaro导入多语言默认值，如果配置了则添加翻译
• 添加模板解析器以添加数据属性并放弃composer中建议的模块
• 为Google字体、YouTube、gMaps等添加默认值