一、外部链接跳转提示#

1.功能说明#

当用户点击新窗口打开的外部链接时，会显示一个确认弹窗，提示用户即将离开本站，确保用户了解他们正在访问的网站。

2.实现位置#

代码位置：src/layouts/Layout.astro
弹窗HTML：在 <head> 标签内定义了 externalLinkModal 弹窗
JavaScript逻辑：在 <script is:inline> 标签内实现了链接点击监听和弹窗显示逻辑

3.禁用方法#

方法一：对单个链接禁用#

为特定链接添加 data-no-external-prompt 属性：

1
<a href="https://example.com" target="_blank" data-no-external-prompt>外部链接（无提示）</a>

方法二：对整个页面禁用（以下方法选一个就行）#

第一种：在单个文件内设置，无需修改全局文件#

在页面的 body 标签上添加 no-external-prompt 类：

1
<body class="no-external-prompt">
2
  <!-- 页面内容 -->
3
</body>

第二种：方便多个同时设置（实际上非常不实用，能用第一个尽量用第一个，这个就是在第一种方式不行的时候作为备选），需要修改全局文件#

步骤 1：修改 Layout.astro 文件中的初始页面加载逻辑#

操作：打开 src/layouts/Layout.astro 文件，找到 disableExternalPrompt 常量的定义（大约在第40行）
作用：这一步确保在页面首次加载时，新添加的页面能够正确禁用外部链接跳转提示

具体修改：在条件判断中添加新页面的路径，例如：

1
const disableExternalPrompt = pathname === url("/ym") || pathname === url("/xy") || pathname === url("/about") || pathname === url("/new-page");

步骤 2：修改 Swup 钩子中的页面切换逻辑#

操作：在同一个文件中，找到 visit:start 钩子的定义（大约在第496行）
作用：这一步确保在用户通过页面导航切换到新添加的页面时，外部链接跳转提示也会被正确禁用

具体修改：在条件判断中添加新页面的路径，例如：

1
if (toPath === url('/ym') || toPath === url('/xy') || toPath === url('/about') || toPath === url('/new-page')) {
2
    bodyElement!.classList.add('no-external-prompt');
3
} else {
4
    bodyElement!.classList.remove('no-external-prompt');
5
}

关于方法二中的实现方法解释：为什么使用路径检查逻辑#

在 src/layouts/Layout.astro 文件中，我们添加了对特定页面路径的检查逻辑，原因如下：

全面禁用：虽然我们可以为每个外部链接添加 data-no-external-prompt 属性，但这种方法需要手动修改每个链接，容易遗漏。通过在 Layout.astro 中添加路径检查逻辑，我们可以确保这些页面的所有外部链接都自动禁用跳转提示。
一致性：这些页面通常包含多个外部链接（如社交媒体链接、个人网站链接等），用户点击这些链接时，通常已经知道他们要访问的是外部网站，因此不需要再显示跳转提示，这样可以提供更一致的用户体验。
维护方便：通过集中管理这些页面的外部链接跳转提示设置，后续如果需要添加或修改禁用跳转提示的页面，只需要修改 Layout.astro 文件中的路径检查逻辑即可，不需要逐个修改页面中的链接。
页面切换时的处理：我们还在 Swup 的 visit:start 钩子中添加了逻辑，确保在页面切换时，body 标签的 no-external-prompt 类也能正确更新，这样即使用户通过页面导航切换到这些页面，外部链接跳转提示也会被正确禁用。

二、全局人机验证组件#

1.组件位置#

文件位置：src/components/misc/TurnstileModal.astro

2.功能说明#

提供统一的人机验证功能，可在整个博客中调用，用于防止恶意提交和自动化攻击。

3.调用方式#

（1）导入组件#

在需要使用人机验证的页面中，首先导入 TurnstileModal 组件：

1
import TurnstileModal from "../components/misc/TurnstileModal.astro";

（2）添加组件#

在页面的合适位置添加组件（通常在页面底部）：

1
<!-- 全局人机验证组件 -->
2
<TurnstileModal />

（3）调用验证#

在需要验证的地方（例如表单提交前），使用以下代码调用验证：

1
// 显示人机验证，使用回调函数
2
window.turnstileInstance.show('formName', 'actionName', async function(token) {
3
    // 验证成功后的回调函数
4
    // 在这里处理表单提交等逻辑
5
    console.log('人机验证成功，token:', token);
6

7
    // 示例：提交表单
8
    const formData = {
9
        // 表单数据
10
        cfTurnstileResponse: token // 包含验证令牌
11
    };
12

13
    // 调用API
14
    const response = await fetch('/api/endpoint', {
15
        method: 'POST',
16
        headers: {
17
            'Content-Type': 'application/json'
18
        },
19
        body: JSON.stringify(formData)
20
    });
21

22
    // 处理响应...
23
});

（4）参数说明#

formName：表单名称，用于标识是哪个表单触发的验证
actionName：操作名称，用于 Cloudflare Turnstile 的分析和安全策略
callback：验证成功后的回调函数，接收验证令牌作为参数

3.示例：在表单提交时使用#

1
const form = document.getElementById('myForm');
2
if (form) {
3
    form.addEventListener('submit', function(e) {
4
        e.preventDefault();
5

6
        // 显示人机验证
7
        window.turnstileInstance.show('myForm', 'form_submit', async function(token) {
8
            // 验证成功，提交表单
9
            const formData = new FormData(form);
10
            formData.append('cfTurnstileResponse', token);
11

12
            // 提交表单...
13
        });
14
    });
15
}

三、数据库配置#

1.数据库绑定#

配置位置：Cloudflare Pages 的环境变量
配置步骤：
- 登录 Cloudflare 控制台，进入 Pages 项目
- 在 “设置” > “函数” > “数据库绑定” 中配置
- 绑定名称：DB
- 指向的数据库：a14797cb-ed36-49d1-ab8e-0aa46afd848c（boke）

2.密钥配置#

Site Key（网站密钥）：已硬编码在 src/components/misc/TurnstileModal.astro 文件中
Secret Key（秘密密钥）：应在 Cloudflare Pages 的环境变量中配置
- 登录 Cloudflare 控制台，进入 Pages 项目
- 在 “设置” > “环境变量” 中添加 TURNSTILE_SECRET_KEY 变量

即将离开本站