Skip to content

怎么让评论区的验证码插件在启用pjax时保证加载 #1044

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Deepseaon opened this issue Jan 9, 2025 · 8 comments
Closed

怎么让评论区的验证码插件在启用pjax时保证加载 #1044

Deepseaon opened this issue Jan 9, 2025 · 8 comments
Labels

Comments

@Deepseaon
Copy link

大致范围:

pjax加载

具体行为描述:

,评论区不能加载出来验证码必须刷新

尝试:
尝试把cf turnstile的js地址添加进pjax后仍需加载的资源里,页面的验证码框体依然不能出现,看源代码那一部分没有正常加载
配置与环境:

  • 问题页面:(如果有,请提供一个触发此问题的页面链接)

截图(若有)

补充信息:

@Deepseaon Deepseaon added the help help label Jan 9, 2025
Copy link

github-actions bot commented Jan 9, 2025

@Deepsea-CN,感谢你给 sakurairo 提出了 issue。ヾ(≧▽≦*)o
请根据 issue 模版确保背景信息的完善,我们将调查并尽快回复你。

Copy link

github-actions bot commented Jan 9, 2025

任何人都可以处理此问题。
请务必在您的 pull request 中引用此问题。
感谢你的贡献! (o゜▽゜)o☆

@Sualiu
Copy link
Contributor

Sualiu commented Jan 9, 2025

主题这里的pjax回调机制似乎没有写好,我看了 cloudfare turnstile docs 相关文档

cloudafare 推荐使用的 js 外链是 https://challenges.cloudflare.com/turnstile/v0/api.js?onload=onloadTurnstileCallback,示例的 js 方法是:

window.onloadTurnstileCallback = function () {
  turnstile.render("#example-container", {
    sitekey: "<YOUR_SITE_KEY>",
    callback: function (token) {
      console.log(`Challenge Success ${token}`);
    },
  });
};

但很不幸的是,主题相关的pjax回调方法不能识别 ?onload=onloadTurnstileCallback 参数。这意味着 js 无法自动调用 window.onloadTurnstileCallback ,也就无法加载组件。且主题无自定义额外回调函数功能。

不过您也可以这样做绕过该限制:
在主题HTML header 中添加该 js 方法:

<script>
function initTurnstile() {
    turnstile.render("#example-container", {
        sitekey: "<YOUR_SITE_KEY>",
        callback: function (token) {
            console.log(`Challenge Success ${token}`);
        },
    });
}

document.addEventListener('DOMContentLoaded', function() {
    loadTurnstile();
});

function loadTurnstile() {
    const oldScript = document.querySelector('script[src*="turnstile/v0/api.js"]');
    if (oldScript) {
        oldScript.remove();
    }

    const script = document.createElement('script');
    script.src = "https://challenges.cloudflare.com/turnstile/v0/api.js";
    script.async = true;
    
    script.onload = function() {
        initTurnstile();
    };
    
    document.body.appendChild(script);
}
</script>

另外在主题根目录的 header.php 115行左右手动添加以下回调方法:

    if (typeof turnstile !== 'undefined') {
        turnstile.remove('#example-container');
    }
    loadTurnstile();

@Sualiu
Copy link
Contributor

Sualiu commented Jan 9, 2025

我认为是时候完善主题的PJAX回调了(
不如就是屏幕前的你吧

@mirai-mamori
Copy link
Owner

mirai-mamori commented Jan 9, 2025 via email

@KotoriK
Copy link
Collaborator

KotoriK commented Jan 20, 2025

Copy link

这个 Issue 已经 30 天没有任何活动了,将被标记为过时 stale。删除 stale 标签或评论,否则将在 7 天内关闭。

@github-actions github-actions bot added the Stale label Feb 20, 2025
@mirai-mamori
Copy link
Owner

评论区现在已经引入和登录注册同款的内建验证码 此问题可得到缓解

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants