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

TikTok требует @, а YouTube использует URL форума :man_shrugging:

Я не пользуюсь TikTok. Не могли бы вы привести пример имени пользователя, чтобы я мог поэкспериментировать?

Что ж, мой — jagster64 — это вполне безопасно использовать, так как я ничего не публикую.

Исправлено — добавлено в запрос на слияние

2 лайка

Отправлен pull request для добавления поддержки Strava — надеюсь, @weallwegot простит мой немного неаккуратный pull request :-s

1 лайк

Хм, temporary-twitter-x снова изменили на fab-twitter. Это было сделано намеренно или по ошибке? В любом случае, старый логотип птицы Twitter снова появился вместо нового логотипа X.

1 лайк

Спасибо за указание — я создал pull request, чтобы обновить его в соответствии с ребрендингом Twitter.

2 лайка

Спасибо! Но, к сожалению, вам нужно изменить fa-x-twitter на temporary-twitter-x, так как fa-x-twitter — это Fontawesome 6, который пока не работает в Discourse.

2 лайка

Должен работать:

3 лайка

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

3 лайка

Провели тестирование — могу подтвердить, что иконка FA6 работает. Запрос на слияние обновлён.

2 лайка

Да, интересно, Fontawesome 6 теперь, кажется, работает с Discourse! :slight_smile:

С правильным значком я тоже его вижу. Круто! Большое спасибо!

2 лайка

Привет, можно ли добавить кастомную SVG-иконку вместо одной из FontAwesome, как это позволяет сделать ссылка Custom Header Links (icons)?

Вот так?

Только что понял, что снятие галочки «Показывать на публичном профиле» скрывает поле из публичного профиля (как и ожидалось), но поведение иконки, предоставляемой этим компонентом темы, более непредсказуемо:

  • в моём аккаунте администратора иконка всё ещё видна
  • в моём тестовом аккаунте (уровень доверия 1) иконка также исчезает

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

Это странно, но я проверял это в разных браузерах, в режиме инкогнито, и могу воспроизвести проблему стабильно. Удалось ли кому-то ещё воспроизвести эту проблему?

Это одна из тех вещей, которую легко пропустить как администратору. Я заметил это только после того, как пользователь сообщил о проблеме, которая заставила меня обратить внимание на такое поведение.

На всякий случай, если это поможет: я тестирую это с иконкой Mastodon.

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

Пока что я заметил это для Steam и Discord.

Посмотрев репозиторий на GitHub в файле links-settings.js, я не нашёл строк с base: или baseregex: для Steam и Discord… Bluesky и Twitter (извините, X — приложение для всего) работают корректно, и у них обе эти строки есть. Возможно, в этом и причина?

{
        name: "Discord",
        icon: "fab-discord",
        link: {
          value: settings.discord_custom_field_name,
        },
      },
      {
        name: "Steam",
        icon: "fab-steam",
        link: {
          value: settings.steam_custom_field_name,
        },
      },

Для Bluesky:

{
        name: "Bluesky",
        icon: "fab-bluesky",
        link: {
          value: settings.bluesky_custom_field_name,
          base: "https://bsky.app/profile/",
          baseregex: "^http(s)?://(www.)?bsky.app/profile/",
        },
      },

Для Twitter:

{
        name: "X",
        icon: "fab-twitter",
        link: {
          value: settings.twitter_custom_field_name,
          base: "https://twitter.com/",
          baseregex: "^http(s)?://(www.)?twitter.com/",
        },
      },

Пробежавшись взглядом по остальным записям, вижу, что у них тоже нет строк base: или baseregex:, но у меня нет живых примеров для их проверки.

  • email
  • mastodon
  • discord
  • steam
  • linkedin
  • bandcamp

(отредактировано, добавлено) Я создал pull request:
09096b8: добавлены базовые URL для email, Steam и LinkedIn
0ec40a0: добавлены Discord, Bandcamp и Mastodon, обновлён README. Я сделал это отдельно, потому что базовые URL для Bandcamp и Mastodon зависят от пользователя и не являются постоянными; а для Discord пользователь вводит свой User ID, а не имя пользователя, поэтому, как мне кажется, это требует пояснения в README.

Возможно ли обновить иконку Facebook на fab-facebook-f, переименовать Twitter в X и использовать иконку fab-x-twitter, а также добавить Snapchat с иконкой fab-snapchat?

Необходимо изменить Twitter на x.com (URL и иконку).

Это было бы здорово. Не уверен, что сам компонент можно обновить для этого.

Вы настроили отображение этого поля пользователя на карточке пользователя?

1 лайк

Очень полезно, спасибо.

Хорошо, для тех, кто хочет обновить Twitter на X (как иконку, так и URL), выполните следующие шаги.

  1. Перейдите в Администрирование > Внешний вид > Темы и компоненты > Компоненты > Установить > Создать новый

  2. Добавьте этот код во вкладку CSS (замените «XXXXX» на ваш пользовательский идентификатор с символом @):

/* 1. Скрыть оригинальную иконку Twitter в формате SVG */
a[href="https://twitter.com/XXXXX"] svg.d-icon-fab-twitter,
a[href="https://x.com/XXXXX"] svg.d-icon-fab-twitter {
    display: none;
}

/* 2. Вставить иконку X с помощью псевдоэлемента и CSS-маски */
a[href="https://twitter.com/XXXXX"]::before,
a[href="https://x.com/XXXXX"]::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>') no-repeat center;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>') no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
  1. Добавьте этот код во вкладку (замените «XXXXX» на ваш пользовательский идентификатор с символом @):
<script>
// Создать функцию, которая находит и изменяет ссылку
function updateTwitterLinks() {
    const oldLinks = document.querySelectorAll('a[href="https://twitter.com/XXXXX"]');
    oldLinks.forEach(link => {
        link.href = 'https://x.com/XXXXX';
    });
}

// 1. Попробовать запустить её сразу, на всякий случай
updateTwitterLinks();

// 2. Настроить «наблюдателя» для динамически загружаемого контента (например, постов Discourse)
const observer = new MutationObserver(function(mutations) {
    updateTwitterLinks();
});

// Начать наблюдение за всем телом страницы на наличие новых элементов
observer.observe(document.body, { childList: true, subtree: true });
</script>

Готово.