Кликабельные ссылки на иконки соцсетей в профиле

[weallwegot (juicecounty.prodigy)]

Тема-компонент, который включает иконки социальных сетей в качестве кликабельных элементов в профиле пользователя и карточках пользователей, если вы используете компонент темы «Каталог карточек пользователей».

Это решение на 99% скопировано из обсуждения и примеров кода, предоставленных @LeoMcA в этом обсуждении на Meta, а также в теме «Namati User Card Profile». Однако я решил вынести это из ветки обсуждения и сделать его немного более универсальным.

Примечания

• Пользователи, которые не указали значение для какого-либо поля, не будут видеть соответствующую иконку на своей карточке профиля.
• Пользовательские поля для Instagram и Twitter ожидают только имена пользователей (без символа “@”); имя добавляется к базовому URL.
• Я рекомендую настроить пользовательские поля, для которых будут отображаться иконки, так, чтобы они не показывались на карточке пользователя, иначе наличие текста и кликабельных иконок может показаться избыточным. Это лишь мое мнение, но тема не скрывает их автоматически.

Настройки сайта

Каждое имя пользовательского поля должно совпадать с тем, как вы назвали соответствующее поле в вашем экземпляре Discourse. По умолчанию компонент темы ожидает имена, указанные ниже, но вы, конечно, можете изменить их. Строки чувствительны к регистру.

instagram_custom_field_name: 'Instagram'
twitter_custom_field_name: 'Twitter'
linkedin_custom_field_name: 'Профиль LinkedIn'

Приятного использования!

	Репозиторий на GitHub	Discourse-Social-Links-Clickable
	Руководство по установке	Как установить тему или компонент темы

[davidkingham]

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

[weallwegot (juicecounty.prodigy)]

Спасибо, что протестировали и нашли это.

Кажется, у меня в сообществах нет флейров. Я посмотрел у вас и думаю, что дело в размере иконок, из-за чего карточка становится больше. Я не особо разбираюсь в CSS, но, похоже, мне придётся условно применять отступ к аватару для пользователей с иконками.

[davidkingham]

Обратите внимание, что кнопка сообщения и фон также перемещаются. Мне удалось исправить всё с помощью этого, но да, это нужно применять условно.

#user-card.no-bg .card-content {
    margin-top: 0px;
}

.user-card-avatar .avatar-flair.rounded, .user-profile-avatar .avatar-flair.rounded {
    bottom: 19px;
}

#user-card .usercard-controls {
    margin-top: 0px !important;
}

[bartv (Bart)]

Обнаружена несовместимость с плагином Follow: этот TC работает корректно при авторизованном пользователе, но при доступе к сайту как анонимный пользователь карточки пользователей и страница профиля пользователя некорректно отображаются.

Обновление: это не связано с TC ссылок на иконки социальных сетей. Я сообщу об этом в теме плагина Follow.

В /logs я вижу:

NoMethodError (undefined method id' for nil:NilClass) /var/www/discourse/plugins/discourse-follow/plugin.rb:74:in block (2 levels) in activate!’

cc @angus

[Solari]

Мне это нравится! Единственная проблема в том, что имя поля и URL отображаются на карточке и в профиле вместе с иконкой. Как можно скрыть текстовую часть поля/URL?

Спасибо,
Рэй

[weallwegot (juicecounty.prodigy)]

Привет, спасибо, что попробовали!

Просто снимите галочку с опции «Показывать на карточке пользователя?» в разделе пользовательских полей.

[weallwegot (juicecounty.prodigy)]

Спасибо, да, я пришел к такому же выводу, хотя пока не до конца разобрался с условным применением стилей, извините. Постараюсь найти кого-то с большим опытом в таких вопросах.

[Solari]

Ах, сработало. Это очень приятно, спасибо за написание кода!

Рэй

[bartv (Bart)]

Не могли бы вы также добавить поддержку YouTube, пожалуйста?

[weallwegot (juicecounty.prodigy)]

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

add support for youtube profiles

[bartv (Bart)]

Это работает как по маслу, но я вижу, что вы «зашиваете» использование каналов YouTube. Некоторые пользователи, возможно, предпочтут указывать там своё имя пользователя? (У некоторых пользователей каналов нет). Думаю, было бы лучше, если бы вы позволяли людям просто вставлять ссылку на YouTube вместо канала или имени пользователя.

Ещё одна мысль насчёт полей Instagram и Twitter: несмотря на то, что вы добавили примечание о том, что в эти поля профиля нужно вводить только имена пользователей, многие люди всё равно вводят целую ссылку — полагаю, на многих сайтах это более распространённый способ. Это навело меня на мысль: возможно, вы могли бы определять наличие «https://» в значении и, если оно есть, больше не добавлять базовый URL? Это сделало бы процесс чуть более гибким и надёжным.

[weallwegot (juicecounty.prodigy)]

@bartv

Возможно, стоит проверять наличие «https://» в значении и, если оно есть, больше не добавлять базовый URL? Это сделало бы процесс более гибким и надёжным.

Отлично, я добавил это предложение, и теперь оно должно работать для обоих типов ввода.

@bartv

Некоторые люди могут предпочесть указать там своё имя пользователя? (У некоторых пользователей нет каналов). Я считаю, что было бы лучше, если бы вы позволяли людям просто вставлять ссылку на YouTube вместо канала или имени пользователя.

К сожалению, я не совсем понимаю разницу между каналами и профилями пользователей на YouTube. Что вы предлагаете в качестве базового URL для YouTube? Просто https://youtube.com/?

[bartv (Bart)]

По-моему, есть ссылки /c/ и /u/ на каналы и пользователей соответственно. Честно говоря, думаю, лучший подход здесь — просто позволить людям вводить URL и не усложнять, делая интерфейс слишком красивым?

[weallwegot (juicecounty.prodigy)]

Да, верно, я просто уберу функцию базового URL для ссылок на YouTube, чтобы пользователи могли вводить полные ссылки, как это уже сделано для LinkedIn. Спасибо за предложение, только что обновил.

[bartv (Bart)]

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

[Solari]

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

Кажется, класс называется iconic-user-fields. Я пробовал менять цвет для этого класса и даже с !important, но ничего не вышло.

Есть какие-нибудь советы?

Спасибо!
Ray

[weallwegot (juicecounty.prodigy)]

Приносим извинения за крайне запоздалый ответ — надеемся, что вы уже смогли найти решение.

Мы добавили новую настройку, которая позволяет выбрать цвет иконки в панели конфигурации темы.
Теперь вы можете просто изменить его на белый или любой другой цвет, более совместимый с тёмной темой. Обновление уже доступно!

[renato (Renato Atilio)]

Сначала спасибо за этот компонент темы Я включил его на своём сообществе, и он выглядит отлично.

Не знаю, сталкивался ли кто-то ещё с этой проблемой, но при включённом компоненте темы на мобильной версии карточка пользователя имеет наложение элементов:

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

.iconic-user-fields {
  padding-bottom: 0 !important;
}
#user-card {
  .usercard-controls {
      margin-top: 1em !important;
  }
}

Скорее всего, это не универсальное решение, но оно сработало для нашего сообщества в соответствующих сценариях.

[renato (Renato Atilio)]

Не знаю, связано ли это с каким-то недавним изменением в ядре: если я авторизован под своим аккаунтом, ссылки отображаются на карточках пользователей, но если я не авторизован (тестирую в анонимной вкладке), в консоль выводится ошибка, потому что в этой строке переменная userFields не определена. В этом случае на карточке пользователя отображаются только аватар и имя пользователя, ничего больше.

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

У кого-то ещё возникает эта проблема?