打开登录弹窗或在按钮按下时触发事件

有一个简单的方法:按钮的类为 sign-up-button

点击后将打开注册弹窗。而不是使用 a: href 是注册链接


我使用了 api.decorateWidget('post:after', helper

NAME:LOCATION 是唯一的,用于在文章末尾插入代码片段。

或者查找 NAME: LOCATION 的位置

post:after 应该可以在您想为帖子底部添加新元素时使用。请注意,post:after 之间有一个空格。

我认为这与您的尝试相关。

如果您仍有问题,请发布您正在使用的其余代码。

感谢您的帮助(尤其是对新手而言)
这是完整的代码:

<script type="text/discourse-plugin" version="0.8.25">
    const user = api.getCurrentUser();
    if (!user) {
    api.decorateWidget('post:after', helper => {
    	let h = helper.h, attrs = helper.attrs;
    	// console.log(attrs);
    	return helper.h('div.fixed-bottom-bar.d-none.d-lg-block',
    		[
    		    helper.h('div.wrapper',
    		        [
    		        	helper.h('div.logo',
    			        	helper.h('img', {
    			                    src: 'https://thuvienmuasam.com/uploads/default/original/1X/776142524c0d5c0430a603fde63a8bad2f77b267.svg',
    			                    alt: 'ThuVienMuaSam'
    			                })
    			        	),
    			            helper.h('div.content.d-flex.justify-content-between.ml-1',
    			            	[

    				        		helper.h('div.float-left',
    				         		[
    				        			helper.h('span.title','欢迎来到购物图书馆!'),
    									helper.h('br'),
    									helper.h('span.text',
    				         			[
    				         				helper.h('span','开始 '),
    										helper.h('a.text-primary.cursor-pointer.sign-up-button',{ href: '/signup'},
    											helper.h('strong','注册 TVMS 账户')
    										),
    										helper.h('span','以获取更多来自 '),
    										helper.h('a',{ href: '/u/'+helper.attrs.username },
    											helper.h('strong',""+helper.attrs.username),
    										),
    									])
    								]),
    								helper.h('div.float-right.d-flex.align-items-center',
    									helper.h('button.btn-primary.btn',{type:'button'},
    										helper.h('a', { href: '/signup'},
    											helper.h('span.d-button-label','加入')
    										),
    									)

    								),
    							]
    				        ),
    			        ]
    			    )
    			]
    		);
    });
}
</script>

我使用了 helper.h(‘a’, { href: ‘/signup’},但点击按钮时页面会重新加载,而不是立即显示注册框架。

感谢分享您的代码 :+1:

如果您希望登录/注册弹窗直接显示,那么需要使用内置的 showLoginshowCreateAccount 操作。

因此,与其使用这段代码:

helper.h(
  "button.btn-primary.btn",
  { type: "button" },
  helper.h(
    "a",
    { href: "/signup" },
    helper.h("span.d-button-label", "Tham Gia")
  )
)

对于注册弹窗,您应该使用类似以下的代码:

helper.attach("button", {
  label: "sign_up",
  className: "btn-primary btn-small sign-up-button",
  action: "showCreateAccount"
})

如果您需要的是登录弹窗,则可以使用:

helper.attach("button", {
  label: "log_in",
  className: "btn-primary btn-small login-button",
  action: "showLogin",
  icon: "user"
})

另外我想指出,我认为在每篇帖子下方为匿名用户添加带有注册/登录按钮的横幅是非常不友好的用户体验,我不建议这样做。不过,我对您的具体使用场景了解有限。您是否考虑过将横幅或图片放在网站顶部,而不是添加到每篇帖子中?

感谢你的回归并解答了所有问题 :smile:

我现在想改善新用户的体验,所以需要采取行动。
目前仅在 PC 端有效。
我正在浏览有关 Cookie 的文章,以便能够在用户点击“隐藏”时将其隐藏。

我应该把这段代码放在我的 mint 主题的什么位置?

您可以创建一个新的主题组件并将其附加到您的主题。

希望这有帮助。 :+1:

在 mint 主题中,应将此代码放置在哪里?

您尝试了 @Arkshine 提供的步骤了吗?
由于您无法编辑远程主题,因此最好创建自己的主题组件并将其添加到 mint 主题中。

我收到了 console.error(“API 或 showLogin 函数不可用。”);

我已按照步骤操作,但到达登录页面时,模型并未自动打开。

<script type="text/discourse-plugin" version="0.8.25">
    // Function to check if the current page is the login page
    function isLoginPage() {
        return window.location.pathname === "/login";
    }

    // Trigger login action when the page loads
    document.addEventListener("DOMContentLoaded", function() {
        console.log("DOMContentLoaded event fired.");
        
        // Check if the current page is the login page
        if (isLoginPage()) {
            console.log("Current page is the login page.");
            
            // Trigger login action
            if (typeof api !== "undefined" && typeof api.showLogin === "function") {
                console.log("API and showLogin function are available.");
                api.showLogin();
            } else {
                console.error("API or showLogin function are not available.");
            }
        } else {
            console.log("Current page is not the login page.");
        }
        
        // Get the login button element
        const loginButton = document.getElementById("loginButton");

        // Trigger a click event on the login button to open the login modal
        if (loginButton) {
            loginButton.click();
        }
    });
</script>

我收到了控制台错误:“API 或 showLogin 函数不可用”。