Текст рядом с логотипом в Discourse оба являются ссылками

Поддержка
1

Здравствуйте,

Я хотел добавить текст рядом с логотипом на моем экземпляре Discourse, и эта тема помогла мне в этом:

Однако текст не является ссылкой. Как можно сделать текст ссылкой на URL форума, точно так же, как это сделано для логотипа?

Буду признателен за ваши рекомендации по этому вопросу.

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>

Теперь я хочу, чтобы текст после логотипа также был ссылкой на форум (логотип уже содержит ссылку на сайт, как и задумано в Discourse).

4

Сначала, в самой первой строке CSS есть опечатка (двоеточие : написано дважды).
Затем, если вы измените селектор, чтобы он указывал на саму ссылку, содержащую логотип:

.d-header .title a:after {

Текст будет находиться внутри тега <a> и будет кликабельным.

image

Похоже, что на этом сайте используется широкий логотип, включающий текст. Как насчет того, чтобы сделать так?

Странно, что Роберт задал тот же вопрос в связанной теме, но тоже не получил ответа :upside_down_face:

5

Если я правильно понимаю… Это может помочь? :slightly_smiling_face:

Это добавит следующий HTML после логотипа: <a href="/" class="after-logo">Текст после логотипа</a>

Заголовок

<script type="text/discourse-plugin" version="0.8">
  api.decorateWidget('home-logo:after', helper => {
    return helper.h('a.after-logo', {
      href:'/',
      text: 'Текст после логотипа'
    });
  });
</script>
6

На мобильных телефонах это выглядит плохо. Я могу скрыть текст с помощью CSS на маленьких экранах, но хочу, чтобы логотип отображался всегда.

7

Это идеально. Спасибо, @Don

8

Для этого случая, думаю, будет лучше, если вы используете другой логотип на мобильных устройствах? В настройках сайта есть параметр под названием mobile logo в разделе «Брендинг».

yoursite/admin/site_settings/category/branding

9

Вы правы. Я не знал, что это существует. Я старый пользователь. Не тестировал много новых функций. Спасибо. [quote=“pfaffman, post:2, topic:218345, full:true”] Похоже, что на этом сайте используется широкий логотип, включающий текст. Как насчёт того, чтобы сделать так? [/quote] Теперь это имеет больше смысла.