README

Kirby Cookie Banner

轻松将用户友好的cookie横幅集成到您的Kirby网站。这个简单的解决方案可以轻松直接集成到您的Kirby页面。

主要功能

🚀 可定制的cookie同意模态框:设计模态框，使其完美匹配您的网站风格。
🌐 多语言支持（包括德语和英语）:通过在不同语言中显示cookie横幅，提供无缝的用户体验。
⏱️ 实时cookie同意检测:跟踪用户偏好并相应调整。
✅ 使用辅助类轻松管理功能:简化检查允许的cookie和功能中的Kirby代码。
✨ 轻松集成样式:以最小的麻烦应用您自定义的CSS样式。

安装

Composer

composer require michnhokn/kirby3-cookie-banner

下载

下载并将此存储库复制到 /site/plugins/kirby-cookie-banner

使用方法

配置

cookie横幅包含一个预配置的“基本功能”，可以使用语言变量自定义文本。您可以通过编辑您的/site/config/config.php文件轻松添加更多功能。默认情况下，利用语言变量作为功能值，但如果您不使用Kirby的多语言功能，只需直接在配置中调整文本即可。

<?php
// site/config/config.php

return [
    'michnhokn.cookie-banner' => [
        // add your features and the language variables
        'features' => [
            'analytics' => 'custom.cookie-modal.analytics',
            'mapbox' => 'custom.cookie-modal.mapbox',
            ...
        ]
        // optional - adjust the texts if you are not using Kirby's multi-language functionality
        'translations' => [
            'title' => 'Your custom title',
            'text' => 'This is your custom Text',
            'essentialText' => 'Essenziell',
            'denyAll' => 'Alle ablehnen',
            'acceptAll' => 'Alle annehmen',
            'save' => 'Speichern',
        ]
    ]
];

代码片段

<?php snippet('cookie-modal', [
    // Loads the custom assets of the plugin. Default: true
    'assets' => false,
    // Displays the consent modal on initial load. Default: true
    'showOnFirst' => false,
    // [WIP] Reloads the whole page instead of loading only the blocked scripts. Default: true
    // 'reload' => false,
    // [WIP] Can be used to set a new consent version to force a new display for the end user. Default: null
    // 'version' => 1,
    // Adds additional features. I recommend using the config. Default: null
    'features' => [
        'analytics' => 'custom.cookie-modal.analytics',
        'mapbox' => 'custom.cookie-modal.mapbox',
        ...
    ]
]) ?>

跟踪用户cookie偏好

cookie横幅在用户确认其设置时在标签上触发一个cookies:saved事件。这允许您轻松捕获此事件并做出相应反应。以下是如何拦截它的一个示例

document.querySelector('body').addEventListener('cookies:saved', ({detail}) => {
  console.log('Saved cookie features:', detail);
})

// Example output (array)
// Saved cookie features: ['essential', 'analytics', 'mapbox']

打开cookie模态框

想要给用户重新访问cookie设置的机会？只需添加一个调用cookie横幅的openCookieModal()方法的链接。例如，点击此链接将重新打开模态框

<a href="javascript:cookieBanner.openCookieModal()">Edit Cookie Settings</a>

辅助类

Michnhokn\CookieBanner类提供了一组方便的方法来控制您的cookie功能。

这简化了以下任务

检查特定功能是否被用户允许。
根据允许的功能执行操作。

// returns a list of features accepted by the visitor
\Michnhokn\CookieBanner::allowedFeatures(): array

// check if one feature is accepted by the visitor
\Michnhokn\CookieBanner::isFeatureAllowed('youtube'): bool

// returns all configured plus additional features
\Michnhokn\CookieBanner::availableFeatures(additionalFeatures: ['recaptcha']): array

// clear the cookie for a visitor
\Michnhokn\CookieBanner::clear(): void

翻译模态框

为全球受众定制您的cookie横幅！只需通过语言文件提供以下变量来翻译模态框内容。这确保了任何语言中的无缝用户体验。

// site/languages/es.php
<?php

return [
  'code' => 'es',
  'default' => true,
  'direction' => 'ltr',
  'locale' => 'es_ES',
  'name' => 'Spanish',
  'translations' => [
    'michnhokn.cookie-banner.title' => 'Configuración de las galletas',
    'michnhokn.cookie-banner.text' => 'Utilizamos cookies para proporcionarle la mejor experiencia posible. También nos permiten analizar el comportamiento de los usuarios para mejorar constantemente el sitio web para usted.  (link: politica-de-privacidadtext: Política de privacidad)',
    'michnhokn.cookie-banner.essentialText' => 'Esencial',
    'michnhokn.cookie-banner.denyAll' => 'Rechazar todo',
    'michnhokn.cookie-banner.acceptAll' => 'Acepta todo',
    'michnhokn.cookie-banner.save' => 'Guardar la configuración',

    // custom features translation
    'custom.cookie-modal.analytics' => 'Analítica'
  ]
];

支持项目

注意

此插件免费提供并发布在MIT许可下。如果您将其用于商业项目，请考虑为我买杯啤酒 🍺

michnhokn / kirby3-cookie-banner

维护者

详细信息