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

مكوّن سمة يتضمن أيقونات اجتماعية قابلة للنقر ضمن ملف المستخدم وبطاقات المستخدمين إذا كنت تستخدم مكوّن سمة دليل بطاقات المستخدمين

تم نسخه بنسبة 99% من المناقشة وعينات الكود التي قدمها @LeoMcA والمضمنة في هذه المحادثة على Meta وفي سمة ملف بطاقة المستخدم Namati، لكن اعتقدت أنه سيكون مفيدًا استخراجها من الموضوع وجعلها أكثر عمومية قليلاً.

ملاحظات

  • لن تظهر الأيقونة المقابلة في بطاقة المستخدم/الملف الشخصي لأي مستخدم لم يتضمن قيمة لإدخال معين.
  • حقول المستخدم المخصصة الخاصة بـ Instagram و Twitter تتوقع فقط أسماء المستخدمين (بدون تضمين “@”)، حيث يتم إرفاق الاسم بـ URL الأساسي.
  • أنصح بجعل حقول المستخدم المخصصة التي ستحتوي على أيقونات لا تظهر في بطاقة المستخدم، لأن ذلك سيجعل وجود النص والأيقونات القابلة للنقر يبدو متكررًا بعض الشيء. هذا مجرد رأي، لكن السمة لا تخفيها تلقائيًا.

إعدادات الموقع

يجب أن يتطابق كل إدخال لاسم الحقل المخصص مع ما تسميه الحقل المخصص للمستخدم في مثيل Discourse لديك. بشكل افتراضي، سيتوقع مكوّن السمة أن تكون الأسماء كما هو موضح أدناه، ولكن يمكنك بالطبع تغييرها. السلسلة حساسة لحالة الأحرف.

instagram_custom_field_name: 'Instagram'
twitter_custom_field_name: 'Twitter'
linkedin_custom_field_name: 'LinkedIn Profile'

استمتع!

39 إعجابًا

عمل رائع! المشكلة الوحيدة التي ألاحظها هي أن شارة الصورة الرمزية تنتقل للأسفل بسبب هذا. يجب أن تتداخل أيقونة الشجرة مع صورتك الرمزية.

7 إعجابات

شكرًا لك على تجربتها واكتشاف هذه المشكلة
لا أعتقد أن لديّ أي شارات في مجتمعاتي،
لقد نظرت في مجتمعاتك وأعتقد أن حجم الأيقونات هو ما يجعل البطاقة أكبر. لست خبيرًا في CSS، لكنني أعتقد أنني سأحتاج إلى تطبيق هامش على صورة المستخدم بشكل مشروط للمستخدمين الذين لديهم أيقونات.

5 إعجابات

لاحظ أن زر الرسالة والخلفية يتحركان أيضًا. تمكنت من تصحيح كل شيء باستخدام هذا، لكن نعم، يجب تطبيقه بشكل شرطي

#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;
}
3 إعجابات

هناك عدم توافق مع إضافة المتابعة: تعمل هذه البطاقة التقنية (TC) بشكل جيد عندما أكون مسجلاً للدخول، ولكن عند الوصول إلى الموقع كمستخدم مجهول، فإن بطاقات المستخدمين وصفحة ملف المستخدم تتعطل.

تحديث: هذا لا يتعلق بروابط أيقونات التواصل الاجتماعي في هذه البطاقة التقنية. سأبلغ عن المشكلة في موضوع إضافة المتابعة.

في /logs أرى:

NoMethodError (الطريقة id غير معرفة لـ nil:NilClass) /var/www/discourse/plugins/discourse-follow/plugin.rb:74:in `block (2 levels) in activate!’

cc @angus

أعجبني هذا! مشكلتي الوحيدة هي أن اسم الحقل والرابط يظهران على البطاقة والملف الشخصي بالإضافة إلى الأيقونة. كيف يمكنني إخفاء جزء النص الخاص بالحقل/الرابط؟

شكرًا لك،
راي

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

مرحبًا، شكرًا لك على تجربتها

فقط قمت بإلغاء تحديد خيار “إظهار على بطاقة المستخدم؟” ضمن الحقول المخصصة

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

شكرًا لك، نعم، توصلت إلى نفس الاستنتاج. لم أستطع بعد فهم تطبيق النمط الشرطي، آسف. سأحاول العثور على شخص لديه خبرة أكبر في هذه الأمور.

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

آه، هذا ما كان مطلوبًا. هذا رائع حقًا، شكرًا لك على البرمجة!

راي

هل يمكنك إضافة دعم لـ YouTube أيضًا من فضلك؟

إعجابَين (2)

نعم، يجب أن يكون محدّثًا الآن. لقد أضفته باسمه فقط. يمكنك رؤيته هنا:

4 إعجابات

يعمل بشكل رائع، لكنني ألاحظ أنك قمت بتثبيت استخدام قنوات يوتيوب بشكل ثابت. قد يفضل بعض الأشخاص إدخال اسم المستخدم بدلاً من ذلك؟ (فبعض المستخدمين لا يملكون قنوات). أعتقد أن الأمر سيكون أفضل إذا سمحت للناس بإدخال رابط يوتيوب فقط بدلاً من القناة أو اسم المستخدم.

فكرة أخرى تتعلق بحقول إنستغرام وتويتر: رغم إضافة ملاحظة حول إدخال أسماء المستخدمين فقط في حقول الملف الشخصي هذه، فإن الكثير من الناس يدخلون الرابط الكامل - أفترض أن هذا هو الأسلوب الأكثر شيوعًا في العديد من المواقع. هذا دفعني للتفكير: ربما يمكنك اكتشاف وجود ‘https://’ في القيمة، وإذا وجد، فلا تضيف قاعدة الرابط إليه بعد الآن؟ هذا سيجعل الأمور أكثر تسامحًا ومتانة.

إعجابَين (2)

ممتاز، لقد أضفت هذا الاقتراح الآن، ويجب أن يعمل الآن مع كلا النوعين من المدخلات.

لسوء الحظ، لست متأكدًا من معرفتي بالفرق بين القنوات وملفات تعريف المستخدمين في يوتيوب. ما الذي تقترحه ليكون الرابط الأساسي ليوتيوب؟ هل هو ببساطة https://youtube.com/؟

إعجابَين (2)

أعتقد أن هناك روابط /c/ و /u/ للقنوات والمستخدمين على التوالي. بصراحة، أعتقد أن أفضل نهج هنا هو ببساطة السماح للأشخاص بإدخال عنوان URL وعدم الإزعاج بجعله يبدو رائعًا للغاية؟

4 إعجابات

أجل، هذا صحيح. سأقوم بإزالة ميزة عنوان URL الأساسي لروابط YouTube، بحيث يمكن للمستخدمين إدخال الرابط الكامل، تمامًا كما هو الحال مع LinkedIn. شكرًا على الاقتراح، تم التحديث مؤخرًا.

3 إعجابات

رائع، شكرًا لك!

أنا جديد هنا — حاولت تخصيص CSS لتغيير لون أيقونات الأيقونات لأنني أستخدم سمة داكنة، لكنني لم أستطع جعلها تعمل.

أرى أن الفئة هي iconic-user-fields، أعتقد. حاولت تغيير لون تلك الفئة وكذلك باستخدام !important لكن لم ينجح الأمر.

هل لديك أي اقتراحات؟

شكرًا!
راي

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

نعتذر عن التأخير الفادح في الرد - نأمل أن تكون قد تمكنت من إيجاد حل في غضون ذلك.

أضفنا إعدادًا جديدًا يتيح لك اختيار لون الأيقونة في لوحة تكوين السمات.
الآن يمكنك ببساطة تغييره إلى اللون الأبيض أو أي لون آخر أكثر توافقًا مع السمات الداكنة. يجب أن يكون متاحًا الآن!

إعجابَين (2)

أولاً، شكرًا لك على هذا المكون للقالب :slight_smile: لقد قمت بتفعيله في مجتمعي ويبدو رائعًا.

لا أعرف ما إذا كان أي شخص آخر واجه هذه المشكلة، ولكن مع تفعيل مكون القالب، تظهر بعض التداخلات في بطاقة المستخدم على الهاتف المحمول:

استخدمت كود CSS التالي للهاتف المحمول كحل مؤقت لجعل البطاقة تبدو كما كانت من قبل عند عدم توفير روابط اجتماعية:

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

ربما لا يكون هذا حلاً عامًا، لكنه نجح في مجتمعنا في السيناريوهات ذات الصلة.

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

لا أعرف ما إذا كان هذا مرتبطًا بأي تغيير حديث في النواة الأساسية: عند تسجيل الدخول بحسابي، تظهر الروابط على بطاقات المستخدمين، لكن عند الخروج من تسجيل الدخول (أقوم باختبار ذلك في تبويب مجهول)، يتم إخراج خطأ إلى وحدة التحكم لأن userFields غير معرف في هذا السطر. في هذه الحالة، تظهر بطاقة المستخدم فقط الصورة الرمزية واسم المستخدم، ولا شيء آخر.

إذا قمت بالتحقق من وجود userFields قبل استخدامه لأول مرة كما اختبرت هنا، تُعرض البطاقة بالكامل، لكن لا تظهر روابط أيقونات التواصل الاجتماعي.

هل يواجه أي شخص آخر هذه المشكلة؟

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