روابط أيقونات وسائل التواصل الاجتماعية القابلة للنقر في الملف الشخصي

يحتاج تيك توك إلى @ ويستخدم يوتيوب رابط المنتدى :man_shrugging:

لا أستخدم تيك توك - هل لديك اسم مستخدم تجريبي يمكنني استخدامه للتجربة؟

حسنًا ، اسمي هو jagster64 - هذا آمن تمامًا للاستخدام لأنني لا أنشر.

تم الإصلاح - تمت الإضافة إلى طلب السحب

إعجابَين (2)

تم تقديم طلب سحب لإضافة دعم Strava - نأمل أن يتحمل @weallwegot طلب السحب الفوضوي قليلاً الخاص بي :-s

إعجاب واحد (1)

حسنًا، تم تغيير temporary-twitter-x مرة أخرى إلى fab-twitter. هل تم ذلك عن قصد أم عن طريق الخطأ؟ على أي حال، عاد شعار طائر تويتر القديم بدلاً من شعار X الجديد.

إعجاب واحد (1)

شكراً على الملاحظة - لقد قمت بإنشاء طلب سحب لتحديثه إلى إعادة تسمية تويتر

إعجابَين (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، كما هو مسموح به في https://meta.discourse.org/t/custom-header-links-icons/86307؟

مثل هذا؟

لقد أدركت للتو أن إلغاء تحديد “إظهار في الملف الشخصي العام” يزيل حقل المستخدم من الملف الشخصي العام (كما هو متوقع) ولكن سلوك الأيقونة المقدمة من مكون السمة هذا أكثر اضطرابًا:

  • في حسابي الإداري، لا يزال بإمكاني رؤية الأيقونة
  • في حسابي التجريبي (مستوى الثقة 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

(تم التعديل للإضافة) لقد قمت بإنشاء طلب سحب:
09096b8: إضافة عناوين URL الأساسية للبريد الإلكتروني و Steam و LinkedIn
0ec40a0: تمت إضافة Discord و Bandcamp و Mastodon، وتحديث ملف القراءة. لقد فعلت هذا بشكل منفصل لأن Bandcamp و Mastodon سيكون لهما عناوين URL أساسية مختلفة اعتمادًا على المستخدم، فهي ليست متسقة؛ وبالنسبة لـ Discord، سيدخل المستخدم معرف المستخدم الخاص به وليس اسم المستخدم الخاص به، لذلك بدا الأمر وكأنه سيحتاج إلى شرح في ملف القراءة.

لقد أنشأت حقول مستخدم مخصصة تطابق تلك التي أردت استخدامها. أظهرت فقط عدد قليل من الأيقونات، ولكن بعد ذلك أظهرت أيضًا اسم الشبكة الاجتماعية ورابط URL في أسفل بطاقة الملف الشخصي أيضًا. كيف أتجنب ذلك وأتأكد من ظهور جميع الأيقونات؟ يجب تحديث أيقونة فيسبوك إلى: fab-facebook-f وتغيير اسم تويتر إلى X واستخدام هذه الأيقونة: fab-x-twitter و… وإضافة سناب شات بهذه الأيقونة: fab-snapchat

أحتاج إلى تغيير تويتر إلى X (رابط URL وأيقونة)… ولست متأكدًا من سبب ظهورها كنص أيضًا. انظر هنا:

هل قمت بتهيئة حقل المستخدم ليتم عرضه على بطاقة المستخدم؟

إعجاب واحد (1)

مفيد للغاية، شكرًا لك.

حسنًا، بالنسبة لأولئك الذين يرغبون في تحديث تويتر إلى X (الأيقونة ورابط URL على حد سواء)، اتبعوا هذه الخطوات.

  1. انتقل إلى الإدارة (Admin) > المظهر (Appearance) > السمات والمكونات (Themes & components) > المكونات (Components) > تثبيت (Install) > إنشاء جديد (Create new)

  2. أضف هذا الكود إلى علامة التبويب CSS (استبدل “XXXXX” باسم المستخدم الخاص بك):

/* 1. إخفاء أيقونة تويتر 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. أضف هذا الكود إلى علامة التبويب <head> (استبدل “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>

تم.