Пользовательские ссылки в верхней навигации

:discourse2: Краткое описание Custom Top Navigation Links позволяет добавлять ссылки в верхнюю навигацию Discourse.
:eyeglasses: Предпросмотр Предпросмотр в Discourse Theme Creator
:hammer_and_wrench: Ссылка на репозиторий https://github.com/discourse/Discourse-nav-links-component
:open_book: Новичок в темах Discourse? Руководство для начинающих по использованию тем Discourse

Установить этот компонент темы

Возможности

Настольная версия

Мобильная версия

Настройки:

Имя Описание
Ссылки навигации Разделены точкой с запятой в следующем порядке: отображаемое имя;описание;URL
Скрыть выпадающие списки Скрыть выпадающие списки категорий и тегов
Скрыть ссылки по умолчанию Скрыть ссылки по умолчанию как на мобильной, так и на настольной версиях.
  • Ссылки навигации — должны содержать 3 части:

    • Имя
    • Описание
    • Путь или URL

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

    Путь/URL — это адрес, куда должна вести ссылка.

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

    имя;описание;URL

    URL может быть относительным, например

    /c/staff, /t/232, /groups/plugin_authors, /about, /tags/official

  • Скрыть выпадающие списки

    Скрывает выпадающие списки категорий и тегов по умолчанию

    Screenshot 2023-05-11 at 3.10.55 PM

  • Скрыть ссылки по умолчанию

    Скрывает ссылки в этом разделе

    Screenshot 2023-05-11 at 3.11.29 PM


:discourse2: Хостинг у нас? Компоненты тем доступны для использования на наших тарифах Standard, Business и Enterprise.

64 лайка
Categories in "top menu"?
Add /groups to top nav
How to make some categories like Bugs and Features here visible in top menu?
What about adding tags in the top menu?
How to add breadcrumb?
How can I add a menu item
Displaying all non-solved topics
Create a Tag filter like 'Make & Model' on community.cartalk.com
A playful approach to category moderation
Adding link to blog on main page
What is the proper way to extend categories route and filter topics?
Link to find all deleted posts by all users in a particular period
Traditional multi level hierarchy vs flat discourse hierarchy
Add topics-sorted-by-create-time to `top menu`
Categories Customization
Volunteer Activities - a simple setup for non-hierarchical collaboration
How to make the recommanded topics collection
Reply reminder - Remind users to reply to new users topics with zero replies
How to add a topic in top nav in a specific category?
Following tags and top feed for followed tags
Show latest list sorted by creation date
Following tags and top feed for followed tags
Change Topic List home router - from Latest to Following
Ocultar menú flotante
Can we add "Groups" to top menu?
Missing category and tags breadcrumbs
A "Votes" option for the top menu in main page
Adding a chat link in the top navigation links?
Add a specific class for wikis (when first post) at the topic list level
How to add an icon in a navigation link?
Customizing your site with existing theme components
Show Latest topics, not by comment on home page
How to add links on home page menu to other site?
Why we can't add groups to top menu
Custom Button For Discourse
Add Follow feed to top navigation
Is it possible to have the Board view as the only view?
Improvements i want for my discourse for making it less overwhelming/noisy for newcomers
Sidebar link / top button to PM admin
Adding 'Upcoming Events' to top navigation
New Theme: Tag-Pages Navigation
Strange repetition in menu items
Disclaimer section on the "about" page
Alternative component (plugin?) to categories navbar
Alternative component (plugin?) to categories navbar
FKB Pro - Social theme
2023: The Year in Review
Docs: Add link to top menu
How can I add a link to the top menu area?
Adding "Category" as a topic list option within categories
How to add Button in Section
How to add new button in different color
Brave default Theme
Air Theme
Automatically fill category with topics? "Best of" category?
Discourse Solved
The first Custom Top Nav link inappropriately appears selected
Add another tab to menu bar
How can I remove the Category and tag filter?
How to Disable ALL User-to-User DMs/Chat without breaking Other Features?
Disable personal message between members
Ability to create Custom Navigation Filters in top menu
Ordering topics - how do the links work?
Add category in Top Menu?
Provide a way to access tracked/watched topics (outside search)
Knowledge Base
Where can I see posts created by me?
Custom nav bar options
Showing categories statically above most recent posts
Custom nav items no longer showing after recent update
Add /groups to top nav
Simple Unread List

Привет

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

Вместо «Agora» я хотел бы видеть «Agora (3)» для пользователя, у которого три непрочитанные темы в этой категории (такое же поведение, как у стандартной ссылки «Непрочитанные»).

Есть какие-то идеи?

Заранее спасибо.

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

Например: пользователь находится в категории /c/feedback/7. При выборе О нас он должен перейти по адресу /tags/c/feedback/7/about.

2 лайка

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

  • При использовании параметра «Скрыть ссылки по умолчанию» скрываются первые два дочерних элемента («Последние» и «Категории»). Однако при переходе в категорию стандартная ссылка «Категории» уже не отображается в меню. В этом случае настройка скрывает дополнительный элемент навигации — тот, который в ином случае был бы третьим по порядку.

Screenshot from 2022-05-10 18-29-05

  • Я добавил элемент меню для прямой ссылки на категорию (/c/game-talk). При переходе по ней ему не присваивается активный класс, и он не подсвечивается. Вместо этого подсвечивается ссылка «Последние», и ей присвоен активный класс. Причём это не стандартная ссылка «Последние», а та, которую я добавил через компонент (ссылающаяся только на /latest).

Screenshot from 2022-05-10 18-25-39

  • На самом деле, ссылка «Последние» также не получает активный класс, если она названа не «Последние». Таким образом, активный класс на текущем маршруте, по-видимому, вообще не работает из-за компонента. Вот как это выглядит на странице /latest, но с другим названием для ссылки «Последние»:

Screenshot from 2022-05-10 18-39-15

2 лайка

Вопрос на скорую руку —
Пытаюсь создать это и сделать URL ?order=created, чтобы пользователи могли просматривать недавние темы.

На компьютере всё работает отлично, но на мобильном не получается — навигационная панель просто перезагружается и не показывает выпадающее меню.

У меня тот же вопрос… Это решение? :face_with_monocle:

Думаю, я понял, почему это произошло…
в компоненте есть строка ниже:

if (window.location.pathname.match(sec2)) {
          $(navHeader).html(filter + markd);
        }

Из-за регулярного выражения… символ ? сам по себе используется как специальный знак в регулярных выражениях, а параметр должен сравниваться с window.location.search.
Я форкнул компонент, изменил его на следующий код, и теперь всё работает.

if (sec[2].indexOf("?") === -1) {
        if (window.location.pathname.match(sec[2])) {
          $(navHeader).html(filter + markd);
        }
      } else {
        // регулярное выражение ? -> /?
        sec[2] = sec[2].replace(/\?/g, "/?");
        const pathWithSearch = window.location.pathname + window.location.search;
        if (pathWithSearch.match(sec[2])) {
          $(navHeader).html(filter + markd);
        }
      }
1 лайк

Ого, отлично сделано :clap:

Где вы разместили этот фрагмент кода?

Discourse-nav-links-component/mobile/head_tag.html, замените соответствующий код. :face_with_peeking_eye:

1 лайк

Почему бы не оформить это в виде PR, чтобы все могли этим воспользоваться?

4 лайка

Могу ли я это сделать? Я всегда думаю, что мой уровень программирования слишком низкий… и чувствую немного неловко. Спасибо за совет!!! Я исправлю это и сделаю PR!

1 лайк

Я тоже так думаю о своих попытках внести вклад!!

Однако команда @team (и их автоматизированные инструменты) кажется довольно хорошо справляется с приведением кода в порядок.

Как только вы создадите PR, вы можете опубликовать ссылку на него здесь в Meta, и он отобразит потрясающее встроенное живое обновление статуса PR.

5 лайков

Вам когда-нибудь удавалось решить эту проблему? У меня возникла похожая ситуация.

Я не могу сказать, что нашел идеальное решение, но понял, в чём была проблема для меня.

Проблема находится здесь:
https://github.com/discourse/Discourse-nav-links-component/blob/main/desktop/head_tag.html

А именно в этой части:

    api.modifyClass("component:navigation-item", {
      pluginId: 'discourse-nav-links-component',
      active: Ember.computed("contentFilterMode", "filterMode", function() {
        let contentFilterMode = this.get("content").get("filterMode");

        if (window.location.pathname === location) {
          return contentFilterMode === filter;
        } else {
          return this._super(contentFilterMode, this.get("filterMode"));
        }
      })
    });

Похоже, что этот код устанавливает свойство “active” для каждой ссылки навигации. Честно говоря, логика того, как он принимает решения и что означают все эти переменные, для меня довольно запутанна. Но проблема здесь:

        if (window.location.pathname === location) {
          return contentFilterMode === filter;
        } else {
          return this._super(contentFilterMode, this.get("filterMode"));
        }

На мой взгляд, здесь проверяется, совпадает ли URL страницы с location (адресом) ссылки в навигационной панели, и если да, то возвращается результат выражения contentFilterMode === filter, при этом обе переменные для меня немного неясны. Если условие не выполняется, похоже, что просто запускается обычная логика определения того, должно ли что-то быть помечено как активное (поэтому мои нестандартные ссылки, кажется, работают нормально). Проблема в том, что, хотя этот код корректно выполняется один раз для каждой ссылки навигации, переменная location всегда, кажется, равна “categories”, поэтому условие if всегда ложно для пользовательских ссылок. Кроме того, даже если я исправлю переменную “location”, заменив её на this.get("content").href, возвращаемое значение также всегда будет ложным, потому что переменная filter также всегда установлена в значение “categories”.

Обычно я бы просто создал PR с исправлением, но истинная корневая проблема всё ещё ускользает от меня. Я придумал обходное решение, которое работает для меня, но немного меняет задокументированную функциональность этого компонента, поэтому я бы не хотел отправлять его в виде PR. Мне кажется, что будут пограничные случаи, когда оно не сработает, например, если ваша домашняя страница установлена как /latest.

    api.modifyClass("component:navigation-item", {
      pluginId: 'discourse-nav-links-component',
      active: Ember.computed("contentFilterMode", "filterMode", function() {
        return window.location.pathname.includes(this.get("content").href);
      })
    });

По сути, здесь просто проверяется, содержит ли текущий URL адрес ссылки в навигационной панели как подстроку. Если да, то она подсвечивается.

4 лайка

4 сообщения были перенесены в новую тему: Фильтр относительных тегов в навигационной панели

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

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

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

Можете ли вы уточнить, какие именно ошибки мешают вам использовать компонент?

Да, извините, основная проблема, с которой я столкнулся, — это следующая:

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

1 лайк