Custom Top Navigation Links

Настройка Компонент темы
,
74

Спасибо за дополнительные детали! Действительно, проблема была в хрупком CSS. Теперь у нас есть имена классов там, где раньше их не было, поэтому мы можем быть более точными.

Я немного рефакторировал компонент здесь:

Так что теперь потребуется только обновление.

Я обновил это так, чтобы «Скрыть ссылки по умолчанию» скрывало все ссылки по умолчанию, а не только «Последние» и «Категории». Думаю, это сделает поведение скрытия более понятным.

Элементы навигации, добавленные этим компонентом, теперь получают класс nav-item_custom_item-name, где item-name — это отображаемое имя элемента навигации (пробелы заменены дефисами). Так, например, элемент навигации с именем «my bookmarks» можно адресовать через CSS следующим образом:

#navigation-bar {
   li.nav-item_custom_my-bookmarks {
     background: skyblue; 
   }
}

Элементы по умолчанию имеют имя класса вида nav-item_name, поэтому, если вы хотите скрыть ссылку «Категории» по умолчанию, вы можете сделать так:

#navigation-bar {
   li.nav-item_categories {
     display: none;
   }
}

Теперь это должно получать активный класс.

3 лайка
75

Привет,

В последнем обновлении текст отображения ссылки навигации переведен в нижний регистр и добавлены дополнительные дефисы.

В поле ссылки навигации у нас указано следующее:

⮉ Home;show all categories;/forums

Ссылка навигации отображается следующим образом:
image

Ранее она отображалась как: ⮉ Home

Похоже, что виновником является эта строка:

2 лайка
76

Спасибо, что упомянули об этом! Я только что внес незначительное обновление, которое исправляет эту проблему!

3 лайка
77

Учитывая, что мы здесь находимся в стране самых смелых фантазий — огромное спасибо за эти исправления @awesomerobot! — полезным дополнением к этому компоненту была бы возможность отображать пользовательское меню перед выпадающими списками категорий и тегов. Возможно ли это (без больших усилий)?!

1 лайк
78

Это можно сделать, добавив немного CSS в тему:

.desktop-view {
  #navigation-bar {
    order: -1;
    margin-right: 0;
  }
  .category-breadcrumb {
    margin-right: auto;
  }
}
3 лайка
79

Это похоже на магию.

80

Здравствуйте,
Как мне настроить URL в Nav, чтобы он открывался в новой вкладке?
Спасибо!

image
image1444×302 25.2 KB

81

Это невозможно сделать через плагин; для этого необходимо добавить собственный JavaScript.

1 лайк
82

Привет, ребята,

Подскажите, пожалуйста, можно ли отображать ссылку на мобильных устройствах?

Спасибо!

83

Привет! Вы имеете в виду полные ссылки вместо выпадающего меню на мобильных устройствах?
Если да, то на мобильном устройстве просто не хватает места для отображения всех ссылок. Выпадающее меню компактно объединяет их в один элемент.

84

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

Спасибо за ваш быстрый ответ!

Извините, я должен был больше поэкспериментировать с настройками. Ссылки не отображаются на мобильном устройстве, потому что я установил галочку «Скрыть стандартные ссылки» и для мобильных, и для настольных устройств.

Подскажите, пожалуйста, как скрыть эти стандартные ссылки, но при этом оставить отображение моих ссылок на мобильном устройстве?

86

Я подал отчет об ошибке по этому ТЗ:

Это действительно сильно нарушает функциональность; если это не будет исправлено, возможно, стоит пометить это тегом broken?

4 лайка
87

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

Скриншот от 2025-07-27 21-14-38
Скриншот от 2025-07-27 21-14-381056×141 14.2 KB

88

Существует компонент, который позволяет добавлять иконки к ссылкам в верхней навигации: Discourse Nav Item Icon / Emoji
Он также работает с пользовательскими ссылками, добавленными этим компонентом. Единственное отличие заключается в том, что перед именем пункта навигации нужно добавить префикс custom_.

Например,
я добавил ссылку «Настройки» с помощью этого компонента: Preferences;edit your preferences;/my/preferences

Настройка параметра «nav links»: "Preferences;edit your preferences;/my/preferences"
Настройка параметра «nav links»: "Preferences;edit your preferences;/my/preferences"910×255 8.94 KB

Затем я настроил компонент иконок/эмодзи, чтобы добавить иконку гаечного ключа: icon:custom_preferences:solid:wrench:currentColor

Настройка параметра «Nav item prefix»: "icon:custom_preferences:solid:wrench:currentColor"
Настройка параметра «Nav item prefix»: "icon:custom_preferences:solid:wrench:currentColor"912×306 8.92 KB

Результат:
image

1 лайк
89

Привет, пожалуйста, исправь это. Это ломает URL ссылок по умолчанию (Последние, Все категории).