Heliosurge
(Dan DeMontmorency)
2023 年1 月 23 日 16:19
1
https://meta.discourse.org/t/welcome-link-banner/218743/28
您好,我想问一下您是否看到了我的功能请求?
https://meta.discourse.org/t/welcome-link-banner/218743/73?u=heliosurge
或者,有没有一个主题组件可以允许在查看特定类别时将工具栏“停靠”在主站点栏下方?因为这正是我更具体地想要寻找的。这可以类似于 Joe 的自定义页眉链接。
即使是调整现有主题组件的行为来实现这一点,也会很棒。
我很抱歉,因为我仍然是一个新手,边学边做。
Canapin
(Coin-coin le Canapin)
2023 年1 月 23 日 17:20
2
你好!
您能否更具体地说明您的需求?您究竟 想在 Discourse 页眉下方放置什么?
在页眉下方放置“任何内容”的标准方法是在编辑主题或组件时,在“页眉之后”选项卡中进行操作:
但似乎您正在考虑一些更动态和/或更复杂的东西。
您提供的信息越多,回复就会越有帮助
Heliosurge
(Dan DeMontmorency)
2023 年1 月 23 日 17:29
3
感谢您迅速回复。
为了非常清晰和具体,类似 Johani 的自定义标题链接(图标)将近乎完美。
话虽如此,其目的是理想地拥有一个工具栏,其中包含一个可点击的徽标,然后是几个可能的下拉菜单。
例如,论坛有一个赞助商,拥有 A 类及其 2 个子类别。当用户查看 A 类或其子类别时,一个工具栏会固定在站点标题下方。其中包含该公司链接。
例如商店链接、支持、社区链接。
Canapin
(Coin-coin le Canapin)
2023 年1 月 23 日 17:48
4
自定义页眉链接 是一个非常简单的组件,我认为可以以此为基础,但将链接列表放在其他位置。
不过,它不支持子菜单,添加子菜单会比较棘手。
另一种方法是创建一个没有任何设置的组件,只使用 HTML、CSS(可能还有一点点 JS)。这样,它将是一个相当“静态”的自定义,如果你需要进行任何更改,你将不得不编辑相应的 HTML 和 CSS 代码。
这是我在自己的论坛上做的一个例子:
它在网站自定义中的样子:
这种方式是否能满足你的需求,还是你更喜欢像自定义页眉链接 组件那样,可以通过管理员界面更轻松地编辑,并提供多个输入框,像这样?
Heliosurge
(Dan DeMontmorency)
2023 年1 月 23 日 18:00
5
直到我获得更多经验,像自定义标题链接这样的东西可能更容易。或者,也许可以指导我创建一个单独的组件,该组件可以定位并覆盖像 Johani 的自定义标题链接组件这样的东西,以将行为更改为标题下方(可能已经提供了此选项),并覆盖以使用当前父类别。
但是,如果有 2 个赞助商,我需要知道是否可以安装两次组件,并重命名组件并通过名称定位组件。
例如
(A) 自定义标题链接
(B) 自定义标题链接
我记得有一个主题组件可以根据类别添加侧边栏?但是侧边栏无法正常工作,仅适用于桌面。所以需要顶部栏。
Heliosurge
(Dan DeMontmorency)
2023 年1 月 23 日 18:06
6
我知道我可以从zip导出然后导入以修改代码。但如果走这条路,我需要一些指导来了解该更改什么。我愿意尝试。
Heliosurge
(Dan DeMontmorency)
2023 年1 月 23 日 18:15
7
现在,通过处理自定义主题组件,这可能会更容易一些。
正如您所提到的,通过在标题代码之后添加一些简单的内容来简化这一点,该代码以显示简单的链接为目标,其中包含一些图片,用于主要链接,例如社区链接指向帖子或已发布的页面?
我再次感谢您的时间和知识分享。
Canapin
(Coin-coin le Canapin)
2023 年1 月 23 日 23:29
8
这里有一个我为您准备的实用示例:
这是我放在 After Header 选项卡中的 HTML
<div id="category-general-banner" class="below-header-banner">
<h2>🚀 Here's some content only displayed on the <strong>General</strong> category</h2>
</div>
<div id="category-site-feedback-banner" class="below-header-banner">
<h2>✨ Here's some content only displayed on the <strong>Site Feedback</strong> category</h2>
</div>
这是我放在 CSS 选项卡中的 SCSS(Discourse 使用 SCSS,它扩展了 CSS 功能):
$category_classes: "general", "site-feedback";
.below-header-banner {
display: none;
}
@each $cat in $category_classes {
body.category-#{$cat} {
#category-#{$cat}-banner.below-header-banner {
display: block;
}
}
}
这是结果。每个横幅仅在其各自的类别中显示。
希望这对您有进一步的帮助!
Heliosurge
(Dan DeMontmorency)
2023 年1 月 23 日 23:35
9
太完美了!非常感谢!
有了这个基础代码,它在父级子类别中是否仍然会显示?或者我需要将子类别添加到条件中?
我应该复制粘贴并回复您。您非常乐于分享时间帮助我。
Canapin
(Coin-coin le Canapin)
2023 年1 月 23 日 23:40
10
子类别在 body 标签中拥有自己的类。
例如,在 https://meta.discourse.org/c/support/wordpress/21 中,Support > WordPress 是 Support 的子类别。
<body> 上的类别类是:category-support-wordpress。
如果你希望横幅在子类别及其父类别中显示,SCSS 代码应该不同。我明天可以看看。
Heliosurge
(Dan DeMontmorency)
2023 年1 月 23 日 23:43
11
Heliosurge
(Dan DeMontmorency)
2023 年1 月 24 日 00:48
12
抱歉,我经验不足。但我可以再依靠您一次吗?
<div>
<span>
<ul>
<li><b><a href="//pimax.com/pages/pitool/?utm_source=openmr_forum&utm_medium=forumheader&utm_campaign=pitool_button" class="pimax-link">Pitool</a></b></li>
<li><b><a href="//www.pimax.com/?utm_source=openmr_forum&utm_medium=forumheader&utm_campaign=brandsite_button" class="pimax-link">Store</a></b></li>
<li><b><a href="//support.pimax.com/?utm_source=openmr_forum&utm_medium=forumheader&utm_campaign=support_button" class="pimax-link">Support</a></b></li>
</ul>
</span>
</div>
如何将此与您的示例结合起来?并且让链接从左到右排列?而不是堆叠在一起?
Canapin
(Coin-coin le Canapin)
2023 年1 月 24 日 23:18
13
基本上,您需要将此代码放在我的代码中,以替换 <h2> 标签及其内容。但我建议您根据自己的需求进行优化和调整,而不是简单地复制粘贴。
至于如何让元素列表内联而不是堆叠在一起,有很多 CSS 方法可以做到……其中许多方法都相当直接,但这有点超出了我们在此处提供的帮助范围。请参阅此说明:
所有关于 Discourse 开发的内容类别。是为您自己还是为社区构建自定义内容?那么这就是适合您的类别!了解更多…
在这种关于通用、与 Discourse 无直接关系的 HTML 和 CSS 的情况下,您可以在此处找到信息:Making custom CSS changes on your site
而且几乎可以在互联网上的任何地方找到。例如:https://www.google.com/search?q=css+make+list+element+inline
话虽如此,您目前掌握哪些 HTML 和 CSS 技能?
了解更多信息将有助于我们提供更具针对性的回复。
Heliosurge
(Dan DeMontmorency)
2023 年1 月 25 日 00:20
14
说实话,我是一名业余爱好者。我曾在高中接触过 gwbasic 和 turbo pascal 编程。我主动使用了一个应用程序来学习 HTML 和 CSS,并取得了一些成功。但还达不到很高的水平。
例如,有人分享了一个隐藏汉堡菜单中某个类别的代码示例。它效果很好,但要隐藏我想要的所有类别,需要编写大量的代码。这在“Category Hider”主题组件出现之前。不过,我曾提出一个想法,可以隐藏所有子类别,一位社区成员分享了一两行代码,就隐藏了所有子类别。哈哈
这比我单独隐藏每一个类别要高效得多。
不过,我现在在修改“Welcome Link”横幅方面取得了一些小成功,通过比较 settings.yml 和 Modern Category boxes 的 settings.yml,用一个目标是列出类别而不是发现的设置替换了第一个设置。不过,我似乎仍然需要比较几个文件,才能看到设置在哪里生效。因为我可以向第一个设置添加类别,但它似乎还没有起作用。
我知道我需要多读,并使用比我的手机更好的 IDE 来真正发展我的理解和意识。我会到达那里的,我只需要有谦逊和专注去做。
为此,我非常感谢我们拥有这个伟大而理解我的社区,他们经常在我需要时给予我指导,并以许多人不会给予的高度耐心。
我知道通过学习代码和花时间,我会到达那里的。我太固执了,不会放弃。
我确实使用 Linux,并且现在已经设置了我的桌面以更好地促进这些事情。此外,我还需要了解设计方面桌面和移动端的区别,以创造一个均衡的设计。我一直在学习新东西。我以 Air Theme 为基础,因为它是一个很好的起点。