Custom Hamburger Menu Links

[Don]

Я тоже это заметил, и, похоже, внешние ссылки не отображаются в разделе Ещё.

[MarcP]

В этом компоненте я использую внутренние ссылки, например, ссылка, открывающая приглашения пользователей: /my/invited/pending/

При открытии ссылки из боковой панели я получаю сообщение: «Ой! Страница не существует или является частной».

Ссылка работает, если открыть её через адресную строку.

При вводе полного URL (https://domain.com/my/invited/pending/) страница открывается следующим образом:
https://domain.com/https://domain.com/my/invited/pending/

[Jagster (Jakke Flemming)]

Да. Известная проблема.

2.9.0beta 10 and chat link is broken

In the new sidebar under community/more is link to adminpage of chat. There is minor typo’ish bug. I’ll get error 404 because of this: https://foorumi.katiska.eu/https://foorumi.katiska.eu/chat/browse/open

[Don]

Здравствуйте,
Это должно работать с: Chat,/chat/browse/open

[Jagster (Jakke Flemming)]

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

Дополнительная ссылка для чата… ну, новый боковой панель полностью изменил песочницу, и она больше не нужна.

[Canapin (Coin-coin le Canapin)]

Я изучил код боковой панели Discourse и тему @manuel добавление иконок.

Кажется, что в настоящее время невозможно настроить пользовательские ссылки для иконок, поскольку метод декорирования гамбургер-меню не учитывает константу prefixValue (которая содержит имя иконки) или что-то в этом роде…

Мне также кажется, что декорирование гамбургер-меню с помощью api.decorateWidget устареет. См.:
https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.js#L534

Кроме того, тот факт, что внешние ссылки больше не работают, может быть связан с этим:
https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.js#L524

Поэтому для реализации этой возможности, вероятно, потребуются изменения в ядре.

Мои знания о том, как работает Discourse, практически отсутствуют, так что я могу сильно ошибаться.

Прав ли я в своих выводах?

[asirota (Alex Sirota)]

Я установил этот компонент темы из репозитория GitHub. У меня на Discourse запущена версия 3.0.0.beta15, и хотя, казалось бы, я его добавил, в меню-гамбургере моя ссылка не отображается… Есть какие-нибудь идеи?

[Canapin (Coin-coin le Canapin)]

Это может быть связано с:

Custom Hamburger Menu Links

I noticed this too and it seems to only the external links not appears under More.

По сей день внешние ссылки всё ещё не работают.
А внутренние ссылки должны начинаться с относительного пути, а не с полного.

[rahim123]

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

[nathank (Nathan Kershaw)]

@rahim123

Существуют ли какие-либо CSS-хаки для решения этой задачи?

Думаю, это выходит за рамки возможностей CSS. Команда Discourse включила это в свой план работ, но реализация займёт время (насколько я знаю):

Ability to add a custom section of links to the sidebar

We want to allow users to add a custom section of links to their sidebar. In a first pass for this feature, we plan to build upon the existing sidebar preferences page, and allow a user to add a single custom section for these links. We think it can work something like this: checkbox for “Show Custom Section”. If checked Custom Section appears above Categories Section and values must have valid Name and at least one valid Link to “Save Changes” textbox for Name of the custom section (defaul…

[hosch (Holger Schmermbeck)]

@rahim123

Есть ли какие-либо CSS-хаки для решения этой задачи?

Я использую:

<script>
  const customHeader = document.createElement("div");
  customHeader.className = "sidebar-section-wrapper sidebar-section-community";
  customHeader.innerHTML = `
            <div class="sidebar-section-header-wrapper sidebar-row">
              <button id="ember11" class="sidebar-section-header sidebar-section-header-collapsable btn-flat btn no-text" type="button">
                <span class="sidebar-section-header-text"> Правовая информация </span>
              </button>
          </div>
          <div class="sidebar-section-content" id="customNavigation"/>
      `;

  $(document).ready(function () {
    // Создаём ссылки
    const links = [
      { title: "Impressum", src: "/impressum" },
      { title: "Datenschutz", src: "/privacy" },
    ];

    // Мобильная версия
    let hamburger = document.getElementById("toggle-hamburger-menu");
    if (hamburger) {
      hamburger.addEventListener("click", addCustomLinks);
    } else {
      addCustomLinks();
    }
    
    let bool = false;
    function addCustomLinks() {
      setTimeout(function () {
        // Ждём, пока навигация загрузится
        const sidebar = document.getElementsByClassName("sidebar-sections")[0];
        if (sidebar) {
          sidebar.append(customHeader);
          if (bool) return;
          // Получаем ID customNavigation
          const customNavigation = document.getElementById("customNavigation");
          if (customNavigation) {
            links.filter(function (link) {
              let linkDiv = document.createElement("div");
              linkDiv.className = "sidebar-section-link-wrapper";
              linkDiv.innerHTML = `<a href="${link.src}" class="sidebar-section-link sidebar-section-link-everything sidebar-row ember-view">
                        <span class="sidebar-section-link-prefix icon"></span>
                        <span class="sidebar-section-link-content-text"> ${link.title} </span>
                    </a>
                  `;
              customNavigation.append(linkDiv);
              let linkIcon = document.getElementById("link_" + link.title);
            });
          }
        }
        bool = true;
      }, 0);
      
    }
  });
</script>

Результат можно увидеть здесь: https://forum.courservio.de/
Оригинальная версия этого кода находится по адресу: https://meta.discourse.org/t/add-custom-links-to-sidebar/246848. Возможно, она вам поможет.

[rahim123]

@hosch Вау, очень круто, именно то, что я искал! Большое спасибо.

[rahim123]

@hosch Не случится ли так, что его можно будет переместить выше? Я бы хотел, чтобы он появлялся после раздела Сообщество или, возможно, даже до него.

---

Редактирование: Кажется, это возможно с помощью варианта этого:
Rearrange Existing Hamburger Menu Items - #3 by awesomerobot

.sidebar-sections {
  display: flex; /* Настройка flex-раскладки, чтобы можно было менять порядок элементов */
  flex-direction: column;
  .sidebar-section-community {
    order: -1;
  }
}

Интересно, можно ли переместить его на самое верхнее место?

[rahim123]

В этом методе есть особенность: пользовательский div исчезает при переключении видимости боковой панели, например, если окно браузера узкое. Это особенно проблема для планшетов, которые обычно получают десктопную версию Discourse и требуют нажатия на меню-гамбургер для отображения боковой панели. Есть ли какие-либо возможные обходные пути? Спасибо!

---

Редактирование: Решено здесь:

Ability to add a custom section of links to the sidebar

@Ryan_Hyer Very nice! You figured out the way to make the items appear (or continue appearing) after the hamburger toggle event, which was the problem I was running into here: Your code is very orderly and clean too. Thanks to that I was able to hack it into displaying what I want in the Community menu without being hidden under More: Head: <script> const links = [ // FontAwesome icons may need to be added in the site settings if they don't correctly appear { title: "User Directory"…

[bquast (Bastiaan Quast)]

Спасибо @hosch и @Olivier_Lambert за это.

Не могли бы вы объяснить новичку, куда именно это нужно вставить?

[bquast (Bastiaan Quast)]

Как можно изменить порядок элементов в боковой панели / меню-гамбургере?

Например, я хочу разместить «Все категории» выше категорий в разделе «Категории», то же самое касается «Все теги».

Спасибо!

[Jagster (Jakke Flemming)]

@Бастиян Кваст

Где мне это вставить?

Вы уже знаете, как использовать компонент для CSS, верно? Добавьте его в секцию head.

@Бастиян Кваст

Как я могу изменить порядок элементов?

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

[bquast (Bastiaan Quast)]

@Jakke Flemming

Добавьте это в секцию head

Я попробовал это, но получил ошибку при использовании точки с запятой рядом с src.

Давайте попробуем снова. Спасибо.

[MarcP]

@MarcP

Я использую внутренние ссылки в этом компоненте, например, у меня есть ссылка, открывающая приглашения пользователей: /my/invited/pending/

При открытии ссылки из боковой панели я получаю: Ой! Страница не существует или является приватной.

Эта проблема всё ещё актуальна, предложенные ранее решения не исправили её.

Настройка: Пригласить друзей,/my/invited/pending/,f

Не по теме:

@asirota

image1920×1032 126 КБ

Я раньше видел такой сжатый стиль боковой панели, но не могу нигде его найти. Это компонент темы?

[Canapin (Coin-coin le Canapin)]

@Бастиян Кваст

Я хочу разместить «Все категории» над категориями в разделе «Категории», то же самое касается и «Все теги».

Вы можете использовать этот CSS:

#sidebar-section-content-categories,
#sidebar-section-content-tags {
    display: flex;
    flex-direction: column;
    li:last-child {
        order: -1;
    }
}