Custom Header Links

В целом это верно: CSS — ненадёжный способ скрыть что-либо, поскольку технически подкованный человек может в любой момент просмотреть исходный код страницы… Однако мы предоставляем версию без JavaScript для поисковых роботов, поэтому в этом случае контент, добавляемый темами, обычно всё равно не индексируется.

3 лайка

Предпросмотр не работает

3 лайка

Я обновил ссылку на превью, теперь она должна работать!

3 лайка

Возможно ли использовать этот компонент для вызова JavaScript с помощью
javascript:script('function');
вместо реального URL?

(Кажется, что это почти работает, но я сталкиваюсь с нарушениями CSP.)


Редактирование: добавил:
Мне удалось это реализовать. Если кому-то другому когда-нибудь это понадобится, я использовал # в интерфейсе компонента вместо URL, а затем добавил обработчик событий для вызова функции JavaScript.

Другие, вероятно, знают лучший способ, и я надеюсь, что они поделятся этим знанием, если это так!

2 лайка

Привет! Я хотел бы изменить стиль и размер шрифта ссылок в заголовке. Не могли бы вы подсказать правильный CSS для этого? Спасибо!

2 лайка

Привет @brentoshiro, свойства будут различаться в зависимости от того, что именно вы хотите стилизовать, но способ выбора ссылок будет следующим:

Чтобы стилизовать все ссылки в заголовке:

.custom-header-links .headerLink a {
    font-size: 1rem; // замените на нужный размер шрифта
    color: #96b67b; // также можно использовать переменные, например var(--tertiary);
    font-style: italic; // варианты: normal, italic, oblique
}

Чтобы стилизовать конкретную ссылку
Вы можете обратиться к ссылке либо через её заголовок (разделённый дефисами и в нижнем регистре), например для «Privacy»:

.custom-header-links .headerLink.privacy-custom-header-links a:hover {
    color: red;
}

либо через атрибут title, указав заголовок ссылки:

.custom-header-links .headerLink a[title='Our Privacy Policy'] {
    color: purple;
}

Чтобы добавить стили при наведении, просто добавьте :hover после тега a:

.custom-header-links .headerLink a:hover {
    color: var(--primary-low);
}
2 лайка

Здравствуйте, можно ли стилизовать ссылки так, чтобы они были по центру, а не только слева или справа?

1 лайк

Это действительно круто. Интересно, сколько дополнительной работы потребуется, чтобы разрешить разные списки ссылок в заголовке для каждой группы? На нашем сайте есть сотрудники и студенты, и мы хотели бы иметь возможность предоставлять разные основные ссылки в заголовке для каждой группы.

3 лайка

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

Это будет хорошо работать, если одна из ваших двух групп довольно статична (или хотя бы меньше) — ваша группа сотрудников кажется идеальным вариантом для этого. Или, по крайней мере, если у вас есть только одна динамическая группа.

Затем сделайте ссылки для студентов темой по умолчанию для сайта, а для ваших сотрудников вручную настройте соответствующие ссылки (либо через интерфейс, либо через консоль Rails).

6 лайков

Я как раз собирался задать этот вопрос, так как наконец заметил, что эти ссылки появляются на экране входа.

В моём случае одна из ссылок меняется каждый месяц (при этом заголовок остаётся прежним). Можно ли скрыть заголовок с помощью кода, не редактируя его каждый раз для скрытия ссылки? Например, используя ваш пример, у меня будет:

Поддержка клиентов
2022-customer-support/26903 — это моя ссылка, затем customer-support-july и так далее.

Как видите, скрытие customer-support-june сработает, но это придётся обновлять ежемесячно, а не просто скрывать «FAQ» (к тому же я не могу добавить /26903 из темы в CSS-код, чтобы скрыть эту конкретную ссылку, хотя, возможно, можно обойти это, опубликовав страницу?). Если другого способа нет, это вообще не проблема, усилий это не требует, просто я гарантированно забуду это сделать.

2 лайка

Здравствуйте! Мне интересно, возможно ли получить переводы для текста? Может быть, путём включения ключей перевода, если компонент их содержит :slight_smile:

2 лайка

****Есть ли какая-то причина, по которой по умолчанию это не отображается для пользователей, не вошедших в систему?

Игнорируйте. По какой-то причине, когда я применяю компонент к теме, он не появляется. Мне приходится добавлять компонент непосредственно в тему.

1 лайк

Использование иконок UTF-8

Обратите внимание, что вы можете использовать иконки UTF-8 в качестве якорей ссылок.

В этом случае вы можете попробовать этот CSS, чтобы они соответствовали другим иконкам выпадающих меню заголовков:

.custom-header-links .headerLink {
    margin-top: -1px;
}
.custom-header-links .headerLink a {
    padding: 3px 10px;
    color: var(--primary-low-mid);
    font-size: var(--font-up-5);
    font-weight: bold;
}
.custom-header-links .headerLink:hover {
    background-color: var(--primary-low);
}
.custom-header-links .headerLink:hover a {
    color: var(--primary-medium);
}

Это работает примерно так:

image

image

1 лайк

Я только что установил этот компонент и добавил несколько ссылок, но они не отображались.

Я обнаружил, что указание языка мешает отображению ссылок на моём сайте. Изначально я добавил значение ‘blank’ для полноты, хотя это и не было необходимо. Ссылки всё равно не отображались, когда я изменил ‘blank’ на ‘en’. Полное удаление значения решило проблему в моём случае. Не имею понятия, почему это происходит, но решил упомянуть об этом на случай, если у кого-то возникнет подобная проблема.

2 лайка

Я сам недавно попал в эту ловушку:

Посмотрю, не получится ли изменить примеры по умолчанию, чтобы сделать их более интуитивными.

2 лайка

Я убрал локаль из настроек по умолчанию здесь: UX: remove locale from default settings by awesomerobot · Pull Request #38 · discourse/discourse-custom-header-links · GitHub

Теперь значения по умолчанию должны отображаться независимо от того, какая локаль установлена на сайте. Спасибо @packman и @JammyDodger!

2 лайка

Мои ссылки исчезли после последнего обновления (ПК, Ubuntu, Brave)
Не могли бы вы это проверить?

@cmdntd – см. тематическую ветку. У вас, вероятно, доступно обновление Discourse в разделе Администрирование | Обновление, которое решит эту проблему.

1 лайк

Недавно моя пользовательская ссылка была заменена тремя стандартными ссылками. В режиме предварительного просмотра всё работает.

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

Кря! Я протестировал плагин в разных темах, и он везде работал. Я вышел из системы, и он продолжал работать. Я переключил браузер, и он тоже работал. Здесь очень сильно пахнет котом Шрёдингера.

1 лайк