sidebarMod: Добавить/удалить ссылки и разделы боковой панели

sidebarMod

Вот мой скрипт для модификации боковой панели (впервые упомянут в теме о кастомных разделах боковой панели).

Он использует промисы и MutationObserver для отслеживания изменений в боковой панели (например, при раскрытии или сворачивании) и эффективного добавления/удаления элементов.

Я считаю, что сделал его достаточно гибким для большинства случаев использования. Вы можете добавлять ссылки (размещая их путем добавления в конец, в начало или вставки до/после существующих ссылок), удалять разделы, удалять ссылки и даже убирать ⋮Ещё.

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

Это отличное дополнение к новой функции кастомных разделов боковой панели (включается через SiteSetting.enable_custom_sidebar_sections), поэтому я не стал добавлять возможность создавать разделы.

Дайте знать, если обнаружите ошибки или понадобятся дополнительные функции.

Установка

Создайте новый компонент темы и вставьте его в Head. Не забудьте включить его для вашей темы.

Конфигурация

Вам нужно отредактировать только injections и removals в верхней части.

Я рекомендую сначала оставить настройки как есть, чтобы вы увидели, что именно он делает. Я постарался сделать пример конфигурации наглядным.

Лично я использую его следующим образом:

  /**
   * Позиционирование ссылок:
   *   (bool) prepend, append: добавить ссылку в начало/конец раздела
   *   (str)  addBeforeKebab, addAfterKebab: добавить ссылку до/после существующей ссылки
   * Видимость ссылок:
   *   (str)  injectFor: вставлять ссылку только для 'anon' (анонимных) пользователей, только для 'registered' (зарегистрированных) пользователей или для 'both' (обоих) (по умолчанию: 'both')
   */
  injections: [
    { sectionSelector: '.sidebar-section[data-section-name="community"]',
      links: [
        { text: 'Guidelines', kebab: 'guidelines', title: 'Guidelines for using this site', href: '/guidelines', icon: 'gavel', addBeforeKebab: 'faq', injectFor: 'registered' }
      ]
    },
    { sectionSelector: '.sidebar-section[data-section-name="categories"]',
      links: [
        { text: 'Site Map', kebab: 'site-map', title: 'Site Map', href: '/t/32', icon: 'map-marker-alt', prepend: true }
      ]
    }
  ],

  /**
   * Опции разделов:
   *   (str) removeFor: удалять раздел только для 'anon' пользователей, только для 'registered' пользователей или для 'both' (по умолчанию: 'none')
   *   (str) removeMore: удалять '⋮Ещё' только для 'anon' пользователей, только для 'registered' пользователей или для 'both' (по умолчанию: 'none')
   *                       полезно, если вы знаете, что он пуст из-за удаления ссылок
   * Опции удаления ссылок:
   *   (str) removeFor: удалять ссылку только для 'anon' пользователей, только для 'registered' пользователей или для 'both' (по умолчанию: 'both')
   */
  removals: [
    { sectionSelector: '.sidebar-section[data-section-name="community"]',
      links: [{ kebab: 'badges', removeFor: 'anon' }]
    },
    { sectionSelector: '.sidebar-custom-sections .sidebar-section[data-section-name="my-topics"]',
      removeFor: 'anon'
    }
  ],

Вопросы от меня

Я изучал возможность реализации этого через API, но мне кажется, что пока реализовано недостаточно функционала.

Если бы я хотел сделать это «правильным способом», вместо того чтобы внедрять изменения прямо в DOM, как бы я это сделал? Нужно ли создавать плагин на Ruby? Любые подсказки будут очень кстати.

обновлено для работы с data-link-name

Спасибо, это было очень полезно для меня при реализации пользовательской секции боковой панели, которую нужно обновлять при переходах между страницами (см. Making custom changes to the sidebar programmatically). Одна проблема, с которой я столкнулся, заключается в том, что при клике на пользовательские ссылки происходит полная перезагрузка страницы. Вы как-то обошли это?

К сведению, решение найдено здесь: Reload page body when clicking a link in a custom header