有一个简单的方法:按钮的类为 sign-up-button
点击后将打开注册弹窗。而不是使用 a: href 是注册链接
我使用了 api.decorateWidget('post:after', helper
但 NAME:LOCATION 是唯一的,用于在文章末尾插入代码片段。
或者查找 NAME: LOCATION 的位置
有一个简单的方法:按钮的类为 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’},但点击按钮时页面会重新加载,而不是立即显示注册框架。
感谢分享您的代码 ![]()
如果您希望登录/注册弹窗直接显示,那么需要使用内置的 showLogin 和 showCreateAccount 操作。
因此,与其使用这段代码:
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"
})
另外我想指出,我认为在每篇帖子下方为匿名用户添加带有注册/登录按钮的横幅是非常不友好的用户体验,我不建议这样做。不过,我对您的具体使用场景了解有限。您是否考虑过将横幅或图片放在网站顶部,而不是添加到每篇帖子中?
感谢你的回归并解答了所有问题 ![]()
我现在想改善新用户的体验,所以需要采取行动。
目前仅在 PC 端有效。
我正在浏览有关 Cookie 的文章,以便能够在用户点击“隐藏”时将其隐藏。
我应该把这段代码放在我的 mint 主题的什么位置?
您可以创建一个新的主题组件并将其附加到您的主题。
转到“管理” → “自定义”
点击“安装”按钮
然后将其附加到您的主题并点击“编辑 CSS/HTML”按钮
您可以在“Head”部分添加代码:
希望这有帮助。 ![]()
在 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 函数不可用”。