/s 页面上插入介绍性文本?

抱歉,如果这不属于支持板块。

目前,主要的 /s 订阅页面只显示订阅/支付选项。每个订阅/支付选项中可以包含的文本字符数量有限。

仅就我而言,我想让 /s 登陆页面更热情和信息丰富一些,而不仅仅是“仅限商务”。

是否可以在 /s 页面上,在子/支付选项上方添加某种介绍性或信息性文本?或者这是否是(将来)可能会作为选项实现的功能,还是超出了范围?

基本上,只是在当前选项上方添加一个带有标准格式化选项的用户可编辑文本框。

我还不完全熟悉 Discourse 的 CSS 编辑选项,因此我不确定在编辑页面、插件或组件方面有哪些可能性。所以请原谅我的无知。

任何见解都将不胜感激。

谢谢。

我认为这可以用 CSS 来实现。您能发送一个您想添加文本的截图吗?谢谢。

2 个赞

您可以看到插件插口的位置。

然后我的 自定义组件 - 在任何插件插口添加按钮或文本 将允许您将任意文本粘贴到任何插件插口中。

1 个赞

当然。我的设想是这样的……

之前/之后。请注意,我不得不将默认的“订阅”文本更改为“进行付款”,因为我们提供的服务不仅仅是订阅。尽管看起来该文本也与页面标题相关联。因此,在我的情况下,在现有页面标题上方添加一个文本块比在下方添加更有意义。

这看起来很棒而且功能强大。

如果我使用的是托管服务,我能利用这一点吗?它关于新 Discourse 用户的说明有点少——所以我目前可能不是最理想的使用者,但我正努力尽快跟上进度,这看起来会非常有用。

我不得不查看 Github 页面才能找到这个的参考:

要查找插件出口,请在 javascript 控制台中运行 enableDevTools()

感谢您回答我的疑问。谢谢。

可以。这是一个主题组件。(至少大多数计划允许您安装任何您想要的主题组件)。您是否尝试点击写着“安装此主题组件”的大蓝色按钮?

这听起来是个合理的批评!

我添加了一个链接到 https://meta.discourse.org/t/introducing-discourse-developer-toolbar/346215,这样您就可以找到插件插槽(plugin outlets)的位置了。

在我读到您这条消息的这部分之前,我已经添加了那个链接!:slight_smile:

哦,但是查看 /s 上的插件插槽,看起来没有任何插件插槽。 如果您想在“进行付款”(Make a payment)标题上方添加文本,您走运了!

image

(假设“支付服务”(Pay for Services)是“进行付款”(Make a Payment))您可以将其放在 top-noticesabove-main-container,但我恐怕这会在每个页面上都添加内容,而不仅仅是在付款页面上,除非您能想出一些 CSS 来在所有其他页面上隐藏它。如果您有耐心,很有可能您可以让 https://ask.discourse.com/ 告诉您如何做到这一点。

另一方面,要求在该页面上添加一个插件插槽也是一个合理的请求,但那是另一件需要学习的事情。

1 个赞

是的。我已经达到了可以毫无问题地安装主题组件的级别。

我完全没有批评的意思。如果我的话听起来像那样,我深表歉意。只是作为一个新用户,我做了一个观察。

是的,我之前在搜索中发现了这个链接。问题是,我还不知道如何在一个开发环境中运行 Discourse(或通过浏览器控制台访问它)。

所以,我关于能否利用您的组件的疑问是关于那方面,以及需要访问开发工具栏来使用它,而不是组件本身的安装。抱歉造成了混淆。

我不知道有这个资源,谢谢你。

至于放置位置,我乐意将介绍性文本放在任何容易容纳在实际“订阅”内容上方的位置,只要它不出现在每个页面上即可。

感谢您的深思熟虑的回复。

不,不。我的意思是,是的。你说得对。文档应该改进。这就是我说的“公平”的原因!

你不需要。只需在浏览器中打开开发者工具(F12 有效,除非你使用的是 Mac;而且我每次用 Mac 时都得查一下,尽管我旁边就有台 Mac,然后我会谷歌搜索“mac 打开浏览器开发工具”或类似的东西),然后在控制台提示符中输入 enableDevTools()。你现在就可以在这里,在这个网站上做到。

1 个赞

我从不使用 Mac,但我记住了“J”,这要归功于

2 个赞

啊哈。是浏览器开发者控制台,而不是某个 Discourse 依赖的控制台。事情开始变得更清楚了。谢谢。

我启用了自定义组件(Custom Components)。并在浏览器控制台中启用了开发者工具(devtools)。并激活了开发者工具栏以查看插件组件(plugin-components)。

现在我明白了,您是说没有用于“订阅”(Subscriptions)的插件组件,因此没有一种*简单的方法将文本放置在该特定登陆页面上。明白了。

*简单指的是“第一步。第二步。第三步。成功!”而不是需要数小时的研究和 CSS 教育等。

image

在我最近搜索“订阅”时(抱歉我现在没有链接),我读到它也快要进行一次大修了。希望我的关于介绍/文本区域的建议能在未来的开发中被考虑。

我很感谢这个帖子中的帮助。谢谢。

2 个赞

应该有一个只在订阅页面上存在的 body class,这样你就可以使用 CSS 来隐藏你添加到除订阅页面之外的所有页面上的那个东西。

是的,subscriptions 有 class="above-main-container-outlet subscriptions-campaign ember-view",所以你可以做一些事情来隐藏你添加的那个类的东西,然后在它在 subscriptions-campaign 中时取消隐藏它。大概是这样。

2 个赞

在谷歌和 Stack Overflow 上做了一些研究后,我拼凑了一个纯 CSS 版本:

.above-main-container-outlet.subscriptions-campaign::after {
  content: "我想要放在这里的任何文本! \A 这是新的一行! \A";
  white-space: pre;
}

使用 \A 作为换行符。

希望这对你有帮助?

2 个赞

谢谢。我很感激你这么做。

我现在在移动设备上,要到明天才能使用电脑(更容易操作)……

但我创建了一个新组件,并将你的 CSS 粘贴了进去。启用了该组件。现在文本出现在了每个页面上。

所以它奏效了。这太棒了。谢谢你。

现在我只需要弄清楚如何做这个……

……等我有空的时候。

还有如何在 CSS 本身中格式化文本。例如……

标题文本

内容本身。以及 可能 让它变得有点花哨

我确信这只是一个我可以谷歌搜索并最终弄清楚的 CSS 问题。我正在边做边学。

我很感谢你的帮助。谢谢你。

我已在仅订阅页面上使其正常工作,并且格式基本正确,使用了以下内容:

/* 第 1 部分:标题(样式类似于原生 H1) */
body:has(.product-list) .above-main-container-outlet.subscriptions-campaign::before {
  content: "这是标题"; 
  display: block;
  
  /* 样式与 'title-wrapper' 标题匹配 */
  font-family: var(--heading-font-family);
  font-size: var(--font-up-5);
  font-weight: bold;
  line-height: var(--line-height-small);
  color: #DDDDDD;
  
  /* 此标题与下方文本之间的间距 */
  margin-bottom: 8px; 
}

/* 第 2 部分:正文文本(下方有间距) */
body:has(.product-list) .above-main-container-outlet.subscriptions-campaign::after {
  content: "这是位于标题下方的纯文本。\\A 您仍然可以在此处使用反斜杠 A 来换行。";
  display: block;
  
  /* 样式与标准正文文本匹配 */
  font-family: var(--font-family);
  font-size: var(--font-0);
  line-height: var(--line-height-medium);
  color: #DDDDDD;
  white-space: pre-wrap;
  
  /* 这会创建文本下方的空白区域(回车) */
  margin-bottom: 40px; 
}

2 个赞

另外,只需右键单击 INSPECT(检查)。PC/Mac

1 个赞

我开了一个拉取请求(PR),希望它能被合并 :crossed_fingers::

3 个赞

哦。那真是太巧妙了。我对 CSS 的理解更多是理论性的,而不是实用的。

1 个赞

@ZeroDean 拉取请求 (PR) 已经合并!希望这有帮助!

3 个赞

@ZeroDean,这意味着您可以通过使用仅在订阅页面中可用的这个新的插件插口来简化您的 CSS。

2 个赞

太棒了。感谢您完成这项工作!谢谢 @NateDhaliwal

谢谢。由于我使用的是托管服务,这是否意味着我必须等到下一次服务器更新?

1 个赞