Изменить ссылку логотипа

Поддержка
1

У меня есть сайт, где у множества групп есть свои собственные категории, и существует желание брендировать эти категории логотипами владельцев групп.

Для каждой категории используется код вроде этого:

.category-org .d-header {
    color: white !important;
    background-color: white !important;
    background-image: none !important;
    background:white !important;
}

.category-org #site-text-logo {
  content: url("/uploads/default/original/1X/a9d7d4f215f2013907002ffe13456d3f90a7f108.png") !important;
  display: inline-block;
  height: 50px;
  font-size: 0;
  margin-top: 5px;
  margin-bottom: 0px;
}

Сложность в том, что при клике на логотип вы переходите на главную страницу сайта, а не в категорию. Это (в основном) решается следующим кодом:

<script type="text/javascript">
$(document).ready(function() {
  $(".title #site-text-logo").click(function(event){

    // не переходить на базовый URL
    event.preventDefault();
    
    // получить активную категорию из id элемента div
    div = $("body[class*='category-']")[0];

    // извлечь slug из класса, начинающегося с category-
    var classes = $(div).attr('class');

    var slug = classes.match(/category\-.+/g)[0].replace("category-","").split(" ")[0];
    // установить href как URL slug
    document.location = "/c/" + slug + "/";
  })
});
</script>

Если кликнуть на логотип на странице категории или темы, вы попадёте на страницу категории. Отлично!

НО если кликнуть в крошечное пространство между логотипом и нижней частью заголовка, вы попадёте на главную страницу, а не на страницу категории. Почти невозможно определить, какое действие произойдёт. При наведении мыши на URL в нижней части Chrome отображается главная страница сайта, а не URL категории, независимо от того, куда вы собираетесь перейти.

(Я использовал Custom Header Links, чтобы добавить ссылку на главную страницу. Я не считаю, что это связано с описанным выше поведением.)

И я не могу поделиться ссылкой на сайт, так как категории, привязанные к конкретным подразделениям, видны только участникам групп.

2

По-моему, дело в том, что вы кликаете по крошечному участку ссылки, содержащему #site-text-logo?

Структура такая: div.title a #site-text-logo, и вы перехватываете клики именно по #site-text-logo, но не по обёрнутому в него тегу a.

Возможно, стоит вызвать event.preventDefault(); для ссылки .title a в вашем JS-коде, либо попробовать добавить в CSS правило .title a {pointer-events: none;}?

3

Ты просто супер. Я очень ценю твою помощь. Помочь мне разобраться с дубликатом ключа в PostgreSQL — конечно, но при этом только самый простой CSS имеет смысл, а синтаксис JavaScript я понимаю лишь на самом базовом уровне.

Но подожди.

Совершенно по другому поводу: я только что настроил так, что на канбан-сайте моей жены при клике на логотип сайта открывается категория TODO. Я создал компонент темы, позволяющий установить произвольный URL в качестве домашней страницы. Вот как я это сделал:

<script type="text/discourse-plugin" version="0.8">
    const { setDefaultHomepage } = require('discourse/lib/utilities');
    if (settings.home_url_override) {
      setDefaultHomepage(settings.home_url_override);
    }
</script>

Может быть, мне стоит просто сделать что-то подобное? Хотя я не уверен, как определить, какие категории должны иметь переназначенную домашнюю страницу. Может быть, добавить настройку сайта с массивом ID категорий? Думаю, я смогу разобраться в этом через Google: получить текущую категорию и проверить, есть ли её ID в массиве в настройках сайта.

РЕДАКТИРОВАНИЕ: Хм, но я не понимаю, как в теге <script type="text/javascript"> определить категорию текущей страницы, чтобы выборочно изменить setDefaultHomepage.

Кажется, это проще?

Но вернёмся к первоначальному решению

Мне кажется, это звучит правильно, но это не очень помогает.

Я думаю, что somehow тег <h1> работает как надо, а тег <a> ведёт на главную страницу сайта?

Я просто как пещерный человек. Я не совсем понимаю, что это значит. В уже существующем JavaScript есть что-то очень похожее. Мне нужно создать ещё одну такую конструкцию $(document).ready(function() { или просто добавить туда ещё одну строку $(".title #site-text-logo").click(function(event){?

То, что я попробовал, вроде бы ничего не изменило.

Этот вариант я понял лучше и сделал следующее:

/* чтобы крошечный участок рядом с логотипом не вел на главную */
.title a {pointer-events: none;}

Это что-то изменило! И я вижу, что это сработало, потому что теперь логотип вообще ничего не делает.