QR-коды для обмена

:information_source: Краткое описание Добавляет генератор QR-кодов для обмена ссылками на источники
:eyeglasses: Предпросмотр https://discourse.theme-creator.io/theme/Alteras/qr-code-shareables
:hammer_and_wrench: Репозиторий https://github.com/Alteras1/discourse-qr-code-shareables
:question: Руководство по установке Как установить тему или компонент темы
:open_book: Новичок в темах Discourse? Начинающее руководство по использованию тем Discourse

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

Добавляет QR-код к источникам для ссылок, которыми можно поделиться. Включает настройки для изменения стиля QR-кода.

Скриншоты

Настройки

Название Описание
share_in_private Разрешает использование QR-кодов в приватных контекстах (сайты с обязательным входом и личные сообщения).
dots_color Цвет точек в QR-коде.
dots_type Тип точек, используемых в QR-коде.
Варианты: rounded, dots, classy, classy-rounded, square, extra-rounded
corners_square_color Цвет квадратных углов в QR-коде.
corners_square_type Тип квадратных углов в QR-коде.
Варианты: dots, square, extra-rounded, dot, rounded, classy, classy-rounded
corners_dots_type Тип точек, используемых в углах QR-кода.
Варианты: dot, square, dots, rounded, classy, classy-rounded, extra-rounded
background_color Цвет фона QR-кода.
image Изображение для встраивания в QR-код. Если изображение не указано, QR-код будет сгенерирован в обычном режиме без изображения
image_hide_background_dots Фоновые точки должны быть скрыты за изображением.
image_margin Отступ вокруг встроенного изображения в QR-коде. В px
image_size Размер встроенного изображения относительно QR-кода. Это соотношение от 0 до 1

Примечания

После ознакомления с некоторыми запросами на новые функции (Create a QR code for invites и Possible to share a post by save a picture with a QR code?), мне очень понравилась идея добавления QR-кодов для ссылок, которыми можно поделиться. В настоящее время это касается только обмена темами и сообщениями, поскольку модальное окно создания приглашений не имеет никаких плагинов и не использует API обмена.

Для настройки QR-кода используется пакет https://www.npmjs.com/package/qr-code-styling.

17 лайков

Как это следует распространять? Я привык использовать QR-коды только в печатных СМИ :man_shrugging:

3 лайка

Это полезно в ситуациях, когда люди, с которыми вы хотите поделиться темой, могут видеть ваш экран (например, чтобы быстро показать QR-код на мобильном устройстве). Вы можете сохранить QR-код, так как он является элементом HTML canvas, щелкнув правой кнопкой мыши и выбрав «Сохранить как изображение».

4 лайка

Сохранение или копирование не работают на iPad.

1 лайк

Ах, я знал, что забыл что-то, оставив это в HTML canvas. Я выпустил исправление, которое преобразует его в PNG.

5 лайков


Кажется немного странным, что центр можно вырезать, как на изображении ниже, в виде QR-кода.

2 лайка

Отличное дополнение, спасибо!

Это пробел, который как-то нужно закрыть? QR-приглашения были бы просто эпичны!

8 лайков

Выпущено исправление. image hide background dots и image margin теперь должны работать корректно.

5 лайков

Отправил PR в ядро с несколькими новыми плагинами-выходами! Не уверен, есть ли какая-то особая причина, по которой API обмена не используется в приглашениях, поэтому оставлю PR только для плагинов-выходов.

7 лайков

Обсудите это с командой.

6 лайков

Как заставить это работать для постов? У меня получается только для тем:

У меня сейчас получается вот что:

Я также жадный и хотел бы иметь возможность делать это (то есть создавать QR-код) для любой ссылки на моём сайте нативно!!

4 лайка

Мне очень нравится этот компонент темы! На моём семейном форуме есть категория с инструкциями, например, как поддерживать чистоту в лотках для кошек. Я уже думал распечатать краткие инструкции и разместить их рядом с лотками. Там мог бы быть QR-код, ведущий на форум с подробными инструкциями. Я мог бы создать его где-то ещё, используя URL, но мне нравится делать это прямо в Discourse.

Интересно. Не могли бы вы побаловать меня и рассказать эпическую историю о том, как это станет улучшением системы приглашений? Как и где будут распространяться QR-приглашения и как они будут приниматься? Можете привести примеры из других платформ, показывающие, как это делается у других? Также, где, по вашему мнению, QR-код должен быть доступен в системе приглашений?

Вы используете новую ссылку для обмена. Она просто копирует URL для обмена без модального окна. Если вы перейдёте в настройки меню поста на сайте, вы сможете включить оригинальный пункт меню обмена, который теперь также будет показывать QR-код. Вы также можете нажать на временную метку поста, чтобы открыть оригинальное всплывающее окно обмена.

5 лайков

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

Отмечу, что мой телефон на Android (Pixel 7 Pro) автоматически создаёт QR-коды; это работает и с модальным окном приглашения. И это мой основной сценарий использования. Хотя я так и не изучал это подробно. Ах, путь открытий!

Однако они не так красивы, как те, что создаёт этот TC!

3 лайка

О! Да. Это уже реализовано на Android. Кто бы мог подумать! Отлично! :rocket: Спасибо, что просветили меня. Значит, это уже потрясающе!

Но погодите!

Я не вижу этой опции на iOS? :green_apple:

На iOS я не вижу варианта с QR-кодом?

2 лайка

Дорого ли обходится генерация QR-кода? Если нет, почему бы не отображать его автоматически в модальном окне обмена, вместо того чтобы требовать нажатия кнопки для его показа?

Это ничего не стоит, так что остальное — это просто кодирование. Но для большинства людей QR-код — это просто шум, поэтому его нельзя отображать напрямую.

2 лайка

Визитные карточки. Компания, использующая Discourse, могла бы разместить QR-код для присоединения к своей платформе. Или, например, использовать его на плакатах мероприятий и т.д.

ИЗМ: только что увидел пост Роба об Android. Однако, как вы сами сказали, предпочитаю сделать это внутри Discourse
:wink:

3 лайка

Как уже сказал @Jagster, генерация QR-кода не стоит дорого; всё сводится к личным предпочтениям относительно того, насколько акцентированным и мгновенным должен быть QR-код. TC уверенно использует Sharing API (и немного манипуляций с DOM) для отображения QR-кода, фактически приравнивая его к другим источникам обмена. Это в целом совпадало с моим представлением о QR-кодах как о вторичном методе отправки информации. Однако, начав свой отпуск за пределами США, я был весьма удивлён, насколько широко распространены QR-коды в физическом мире.

Я мог бы рассмотреть возможность добавления опции immediate QR code в настройки, но, скорее всего, мне пришлось бы пересмотреть, как и где размещается QR-код. Честно говоря, текущее расположение QR-кода в модальном окне (как в десктопной, так и в мобильной версии) действительно было «впихнуто» с помощью манипуляций с DOM. В идеале в десктопной версии QR-код, приравненный к кнопке «Копировать ссылку», занимал бы всю правую часть модального окна, но для этого потребовалась бы новая точка расширения плагина и существенные изменения CSS. В настоящее время в модальном окне обмена есть только одна точка расширения плагина, расположенная рядом с кнопкой «Новая тема», и я действительно хочу избежать сложного CSS или дополнительных манипуляций с DOM.

Кратко: Я ещё подумаю над этим и решу, стоит ли добавлять настройку immediate QR code, когда вернусь из отпуска.

4 лайка

Когда я использую изображение, QR-код не появляется. Есть ли какие-то требования к используемому формату, размеру и т.д.?

2 лайка

Хм, это странно. К самому изображению не должно быть каких-то особенно строгих требований…

Какие настройки изображения и размера изображения вы используете?