Discourse 中带有徽标的文本均已链接

支持
1

您好，

我想在我的 Discourse 实例的 Logo 旁边添加文字，并且这个主题帮助了我：

但是，文字没有链接。我该如何像 Logo 一样将文字链接到论坛 URL？

非常感谢您的指导。

2

这个网站似乎是通过一个包含文字的宽幅 Logo 来实现的。要不要也这样做？

2 个赞
3

基本上，它会显示 discourse 的默认徽标，就像在站点设置中设置的那样。然后添加一个 :after 内容来包含文本。所以文本来自 CSS。

这是代码：

.d-header .title::after {
    padding-left: 20px;
    font-size: 1.5em;
    color:  #333;
    content: "Some text after logo";
}
.archetype-regular #main.no-text .d-header .title::after,
.archetype-private_message #main.no-text .d-header .title::after {
    display:none;
}

这是脚本：

<script>
$(document).ready(function() {
	$(window).scroll(function(){
		checkScroll()
    });

	function checkScroll() {
		var y = $(window).scrollTop();
		if (y > 55) {
            document.getElementById("main").classList.add('no-text');
        } else {
            document.getElementById("main").classList.remove('no-text');
        }
	}
	checkScroll();
});
</script>

现在我希望将论坛链接也设置为 after 文本。（徽标按 discourse 的意图包含网站链接）。

4

首先，第一行 CSS 有一个拼写错误（冒号写了两次）。
然后，如果将选择器更改为定位包含徽标的实际链接：

.d-header .title a:after {

然后文本将包含在 <a> 标签内，并带有链接。

image

看起来这个网站的做法是使用一个包含文本的宽大徽标。为什么不这样做呢？

奇怪的是，Robert 在链接的主题中问了同样的问题，也没有得到答复 :upside_down_face:

1 个赞
5

如果我没理解错的话……这能有帮助吗？:slightly_smiling_face:

这将在 logo 后添加此 html <a>After logo text</a>

Header

<script type="text/discourse-plugin" version="0.8">
  api.decorateWidget('home-logo:after', helper => {
    return helper.h('a.after-logo', {
      href:'/',
      text: 'After logo text'
    });
  });
</script>
2 个赞
6

它在手机上看起来很难看。我可以用 CSS 在小屏幕上隐藏文本，但我希望徽标始终显示。

7

这太完美了。谢谢你，@Don

1 个赞
8

对于这个用例，我认为如果你在手机上使用不同的徽标可能会更好？有一个网站设置叫做“移动徽标”，在品牌推广下。

yoursite/admin/site_settings/category/branding

1 个赞
9

你说得对。我不知道这个存在。我是一个老派人士。我没有测试过很多新功能。谢谢

现在这更有意义了。

3 个赞
10

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.