群组页面自定义 HTML

大家好,
我正在设计一个社区,其中每个用户都需要申请许可才能加入群组,而每个群组负责控制对某个分类的访问权限。
我想在群组页面(https://community.horbitercafe.com/g)添加一个欢迎/说明 HTML 内容。

请问最简单的方法是什么?

谢谢,
F。

不确定这是否是正确的插件出口,但您可以尝试以下方法:

在“自定义” > < /head>

添加以下内容:

<script type="text/x-handlebars" data-template-name="/connectors/before-group-container/plugin-outlet-component">

在此处输入您的 HTML

</script>
1 个赞

我如何将其限制为仅适用于 /g 页面?

是的,这确实允许在组名及其他信息上方“注入”HTML,例如在 https://discourse.example.org/g/foo 这样的页面上。感谢分享。

@Fausto_Dassenno 您关注的是主组列表页,而不是单个组的详情页吗?

没错,我只想为主群组列表页面添加 HTML。

在您的 HTML 代码中添加一个类,例如 gr-horbiter

<script type="text/x-handlebars" data-template-name="/connectors/before-group-container/plugin-outlet-component">

<div class="gr-horbiter">
您的 HTML 代码
</div>

</script>

并在 common 中添加以下 CSS

.gr-horbiter {
    display: none;
}

body.groups-page .gr-horbiter {
    display: block;
}

我尚未测试此代码,但它应该可以正常工作。

1 个赞

谢谢 @Steven,脚本部分应该放在组件的 HTML 部分吗?还是我需要直接编辑 HTML?

抱歉,我不太确定您的问题是什么意思,英语不是我的母语,我可能会误解一些内容。

您只需将脚本和 HTML 代码复制到 <head> 部分,并添加您的欢迎信息。如果您希望自定义样式,可以添加一些 <div><span> 标签,这样就可以了。

1 个赞

谢谢 @Steven,我已经让它运行起来了。
唯一的问题是,我需要将其添加到群组索引页面,而不是群组详情页面。
至少现在我明白了其中的逻辑。我会继续研究。
我在群组索引页面找不到任何连接器。

我本该测试一下的,现在我知道问题所在了::person_facepalming:
插件出口在群组主页上不起作用。

我还有一个方法可以添加横幅,但这可能不是最整洁的方式,Discourse 工作人员可能有更好的方法。

这段 CSS 代码允许你添加一些文本和样式,但你只能使用这个类,而且我认为无法在文本横幅中添加链接。

body.groups-page .groups-header::before {
    content: "Your text";
    width: 100%;
    margin: 0 0 15px 0;
}

你可以为此类添加背景、边框等来自定义横幅,从而创建横幅。

2 个赞

谢谢,
我无法通过这种方式实现我的目标。我原本想为群组创建一个落地页,以便新用户可以申请访问他们想要的群组。为此,我希望能用一些 HTML 添加说明。

在群组索引页上申请一个新的出口名称有多难?

如果你只想要类似这样的效果,那很简单

.welcome-message {
    display:none;
}
.groups-page .welcome-message {
    display:block;
    margin: 20px;
}

然后将以下内容添加到“页眉之后”部分:

<div class="welcome-message">在此处填写你的欢迎信息和说明</div>

3 个赞

没错,这绝对是最好的解决方案

我有时候会把事情搞复杂::man_facepalming:

3 个赞

太好了,这能行!
如果我只想让它仅在首页显示,该怎么办?我应该把 .groups-page 替换成什么?

查看你的 HTML 首页中 body 标签所使用的类。

例如,在 meta.discourse.org 上:
<body class="navigation-topics" data-gr-c-s-loaded="true" style="" cz-shortcut-listen="true">

所使用的类是 navigation-topics

1 个赞

或者,如果您想要更高级的功能,可以试试

有意思,我的主页上有这个

image

您的主页是哪一页?

image
这就是您想问的吗?

我明白你的空 body 类出现问题的原因了。不要查看页面源代码,而是按 F12 打开 Chrome/Firefox/Edge 的开发者工具,然后切换到“元素”标签页。在这里查看 HTML 代码,你的 <body> 标签就会显示正确的类名。