Hostinger AI 建站工具手动模式添加年龄验证横幅教程

由于 Hostinger AI Builder 没有内置的年龄验证小部件，你可以使用第三方小部件或自定义代码，为你的 Hostinger AI Builder 手动模式网站添加年龄验证横幅。

年龄验证横幅与 Cookie 同意提示是分开的——有关 Cookie 的具体信息，请参阅你的网站使用了哪些 Cookie。

方法一：第三方小部件

使用网上的现有工具（例如 AgeChecker）创建年龄验证弹窗。

创建小部件后，你会获得它的集成代码。复制该代码并粘贴到网站集成设置中的**自定义代码**字段中。保存更改并更新网站，就完成了！

该小部件将显示在网站的预览版和已上线版本中（不会显示在编辑器中）。

方法二：使用自定义代码

你只需按以下步骤操作：

1. 复制下方提供的合适**代码**
2. **自定义**代码
3. 粘贴代码到网站集成设置中的自定义代码字段，保存更改并更新网站

复制代码

如果你使用**代码 1**，横幅会记住某位访客是否已达到访问该网站的年龄要求，也就是说，下次同一位访客打开网站时，横幅不会再次出现。

若要始终显示横幅，请使用**代码 2**。

代码 1（不对符合条件的用户重复显示横幅）

<script>
    const bannerText = 'This website contains explicit content. Are you over 20?';
    const confirmationButtonText = 'Yes';
    const declineButtonText = 'No';
    const mainDiv = document.createElement('div');
    const divForButtons = document.createElement('div');
    const randomText = document.createElement('p');
    const randomOver = document.createElement('p');
    const randomUnder = document.createElement('p');
    const blackout = document.createElement('div');
    let overAge = false;
    blackout.id = 'blackout';
    divForButtons.appendChild(randomOver);
    divForButtons.appendChild(randomUnder);
    mainDiv.appendChild(randomText);
    mainDiv.appendChild(divForButtons);
    randomText.innerText = bannerText;
    randomOver.innerText = confirmationButtonText;
    randomUnder.innerText = declineButtonText;
    randomText.id = 'ageText';
    randomOver.classList.add('ageButton');
    randomUnder.classList.add('ageButton');
    mainDiv.id = 'ageVerificationBanner';
    if (!localStorage.getItem('overAge')) {
        document.body.appendChild(blackout);
        document.body.appendChild(mainDiv);
        document.body.style.overflow = 'hidden';
    }
    randomOver.addEventListener('click', function () {
        document.body.style.overflow = 'visible';
        document.querySelector('#ageVerificationBanner').style.display = 'none';
        document.querySelector('#blackout').style.display = 'none';
        overAge = true;
        localStorage.setItem('overAge', overAge);
    })
    randomUnder.addEventListener('click', function () {
        window.location = 'https://google.com';
    })
</script>
<style>
    #blackout {
        background-color: rgba(0, 0, 0, 0.3);
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 9999;
    }
    div#ageVerificationBanner {
        position: absolute;
        z-index: 99999;
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
        background-color: #DADADA;
        padding: 50px;
        border: solid 2px #606060;
        border-radius: 10px;
    }
    div#ageVerificationBanner div {
        display: flex;
        justify-content: center;
    }
    p.ageButton {
        padding: 5px 10px;
        margin: 0 10px;
        cursor: pointer;
        background-color: #AFAFAF;
        border-radius: 5px;
        border: solid 2px #606060;
    }
    p#ageText {
        text-align: center;
        padding-bottom: 20px;
    }
    @media screen and (max-width:920px) {
        div#ageVerificationBanner {
            width: 300px;
            padding: 20px;
        }
        p.ageButton {
            font-size: 14px;
        }
    }
</style>

代码 2（始终显示横幅）

<script data-rehype>
    const mainDiv = document.createElement('div');
    const divForButtons = document.createElement('div');
    const randomText = document.createElement('p');
    const randomOver = document.createElement('p');
    const randomUnder = document.createElement('p');
    const blackout = document.createElement('div');
    blackout.id = 'blackout';
    divForButtons.appendChild(randomOver);
    divForButtons.appendChild(randomUnder);
    mainDiv.appendChild(randomText);
    mainDiv.appendChild(divForButtons);
    randomText.innerText = 'This site contains explicit content.';
    randomOver.innerText = 'I am over 18';
    randomUnder.innerText = 'I am under 18';
    randomText.id = 'ageText';
    randomOver.classList.add('ageButton');
    randomUnder.classList.add('ageButton');
    mainDiv.id = 'ageVerificationBanner';
    document.body.appendChild(blackout);
    document.body.appendChild(mainDiv);
    document.body.style.overflow = 'hidden';
    randomOver.addEventListener('click', function () {
        document.body.style.overflow = 'visible';
        document.querySelector('#ageVerificationBanner').style.display = 'none';
        document.querySelector('#blackout').style.display = 'none';
    })
    randomUnder.addEventListener('click', function () {
        window.location = 'https://google.com';
    })
</script>
<style>
    #blackout {
        background-color: rgba(0, 0, 0, 0.3);
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 9999;
    }
    div#ageVerificationBanner {
        position: absolute;
        z-index: 99999;
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
        background-color: #DADADA;
        padding: 50px;
        border: solid 2px #606060;
        border-radius: 10px;
    }
    div#ageVerificationBanner div {
        display: flex;
        justify-content: center;
    }
    p.ageButton {
        padding: 5px 10px;
        margin: 0 10px;
        cursor: pointer;
        background-color: #AFAFAF;
        border-radius: 5px;
        border: solid 2px #606060;
    }
    p#ageText {
        text-align: center;
        padding-bottom: 20px;
    }

    @media screen and (max-width:920px) {
        div#ageVerificationBanner {
            width: 300px;
            padding: 20px;
        }
        p.ageButton {
            font-size: 14px;
        }
    }
</style>

自定义代码

可以在以下几行中修改横幅的文字：

   const bannerText = 'This website contains explicit content. Are you over 20?';
    const confirmationButtonText = 'Yes';
    const declineButtonText = 'No';

如果你熟悉 CSS，还可以修改横幅的外观，例如字体大小、颜色等。

粘贴代码

在构建器中，进入网站的 (⋯) 菜单 → 集成，然后将代码粘贴到**自定义代码字段中。接着，保存更改并更新你的网站**。

横幅会在预览模式和已上线的网站中显示，但在编辑器中不可见。