أنا أحاول حاليًا إضافة مقطع فيديو إلى صفحات ملفات تعريف مستخدمين معينة، بحيث يكون لدى جميع رعاتنا مقطع فيديو خلفي معين على ملفاتهم الشخصية. (قبل أن تنزعجوا، سيكون مجرد رسوم متحركة متكررة، وليس فيديو كامل - يجب أن يبدو لطيفًا جدًا، على غرار خلفيات ملفات تعريف Steam.)
رمز HTML و CSS التالي يعمل لجميع المستخدمين - ولكن من الواضح أن هذا ليس ما نسعى إليه حقًا:
// هذا يذهب في علامة التبويب "Header"
<video playsinline autoplay muted loop id="myVideo" poster="[INSERT LINK]">
<source src="[INSERT LINK]" type="video/webm">
<source src="[INSERT LINK]" type="video/mp4">
</video>
على عكس استخدام body.category-general لإضافة صورة إلى الصفحات الموجودة في فئة “general” فقط، لا يبدو أن هناك علامات محددة مخصصة لصفحات الملفات الشخصية للمستخدمين في مجموعة معينة أو باسم مستخدم معين. نحن جدد جدًا في هذا الأمر ولدينا خبرة في CSS بشكل أساسي بدلاً من العمل المباشر مع HTML، ولذلك لسنا متأكدين مما إذا كانت هناك طريقة سهلة ومريحة لجعل هذا يعمل كما نرغب.
نتخيل أن النهج الأفضل سيكون إضافة علامة مشابهة لملفات تعريف المستخدمين بناءً على مجموعتهم، لكننا لسنا متأكدين من كيفية تحقيق ذلك وكيفية جعل الفيديو يظهر فقط في الصفحات ذات المحتوى الصحيح، كما أننا لسنا ملتزمين باستخدام هذا النهج تحديدًا إذا كانت هناك طريقة أخرى أسهل.
على سبيل المثال، سنكون منفتحين أيضًا على فكرة القيام بذلك على أساس كل مستخدم على حدة بدلاً من أساس كل مجموعة، إذا كان ذلك أسهل بطريقة ما.
نفضل فقط عدم الاضطرار إلى ترميز الفيديو بشكل ثابت على كل صفحة، بحيث يتم تحميله فقط عند زيارة المستخدم (المستخدمين) المعنيين.
تعديل: ربما يجب أن أشير إلى أننا نستخدم الفرع المستقر، في حال كان ذلك يغير شيئًا.
نهجنا الحالي هو معرفة ما إذا كان بإمكاننا ببساطة اكتشاف أننا على صفحة مستخدم معين عبر الرابط الأساسي، وإذا كنا كذلك، فسنقوم بتطبيق الفيديو. على هذا النحو، لدينا ما يلي:
<script type="text/discourse-plugin" version="0.8">
api.onPageChange(() => {
determineUser();
});
function determineUser() {
var pageURL = document.querySelector("link[rel='canonical']").getAttribute("href");
var isUserPage = pageURL.includes("https://www.fortressoflies.com/u/");
document.documentElement.style.setProperty('--currUsername', pageURL);
if(isUserPage)
{
document.documentElement.style.setProperty('--lastUsername', pageURL);
$('body').css('background-color', '#'+(Math.random()*0xFFFFFF<<0).toString(16));
}
}
</script>
ومع ذلك، يبدو أن هذا يعمل فقط عند التحديث الكامل - لأي سبب كان، فإن التنقل بين الصفحات لا يؤدي إلى تحديث خاصية --currUsername، وبدلاً من تطبيق خلفية ملونة عشوائية لصفحات المستخدم، فإنه يطبق خلفية ملونة عشوائية لجميع الصفحات إذا تم الضغط على F5 مؤخرًا على صفحة مستخدم، بينما لا يطبق شيئًا على أي صفحة إذا تم الضغط على F5 مؤخرًا على صفحة غير مستخدم.
بصراحة، لست خبيرًا بما يكفي في JavaScript لمعرفة سبب ذلك - يبدو لي أنه عند تغيير الصفحة، يجب تشغيل الدالة (وهو ما يحدث)، مما يؤدي إلى تحديث متغير pageURL، وهذا يجب أن يؤدي إلى تحديث خاصية --currUsername عند تحميل صفحة. ومع ذلك، يحدث هذا فقط عند التحديث الكامل، وإلا فإن المتغيرات لا تتغير على ما يبدو.
يبدو أن هذا يرجع إلى أن عنوان URL الأساسي لا يتم تحديثه، بينما يتم تحديث خاصية “og:url”.
المشكلة الوحيدة هي أن استخدام var pageURL = document.querySelector("meta[property='og:url']").getAttribute("content"); يتم تحديثه قبل تحديث العلامة الوصفية نفسها - أي أن هذا الرمز يعطيني عنوان URL للصفحة السابقة، وليس الحالي.
إذا كنت ترغب في إضافة محتوى إلى صفحة محددة، فإن أفضل خيار لديك هو “plugin-outlet”. باختصار، plugin-outlets هي مساحات محجوزة في قوالب Discourse يمكنك استخدامها لإضافة محتوى جديد.
أول ما ستحتاج إلى اكتشافه هو ما إذا كان هناك plugin-outlet موجود في الصفحة التي تستهدفها. هناك مكون موضوع يمكنك تثبيته لمساعدتك في ذلك.
بمجرد تثبيت هذا المكون، قم بتفعيله، ثم انتقل إلى الصفحة التي تستهدفها وتحقق مما لديك للعمل به. في حالتك، يوجد مثل هذا plugin-outlet (مُظلل باللون الأخضر)
لنفترض أنه لم يكن موجودًا… ماذا بعد؟ في هذه الحالة، أفضل خيار هو طلب إضافته أو إرسال طلب سحب (PR) لإضافته إلى النواة. سيتم قبوله في معظم الأحيان إذا كان استخدامك منطقيًا.
على أي حال، كما قلت، إنه موجود بالفعل في هذه الحالة. لذا، دعنا نرى كيف يمكنك إضافة علامات HTML إليه. لن تحتاج إلى المكون المذكور أعلاه لبقية هذا الدليل، لذا يمكنك تعطيله الآن لأنك حصلت بالفعل على اسم plugin outlet.
كل ما عليك فعله هو إضافة شيء مثل هذا في تبويب الرأس (header) في موضوعك.
<script type="text/x-handlebars" data-template-name="/connectors/OUTLET_NAME/SOME_NAME">
Your markup goes here...
</script>
يجب عليك تغيير OUTLET_NAME إلى اسم outlet الذي تريد استهدافه. ثم غيّر SOME_NAME إلى الاسم الذي تريد إعطاؤه لهذا التخصيص. يمكن أن يكون الاسم أي شيء، لكن حاول أن تكون وصفيًا إذا أمكن. إنها ممارسة جيدة. إذن، ننتهي بهذا.
<script type="text/x-handlebars" data-template-name="/connectors/above-user-profile/add-profile-videos">
Your markup goes here...
<h1>مرحبًا بالعالم!!</h1>
</script>
لنجرب ذلك ونرى ما يحدث… تذكر، المقطع أعلاه يذهب في تبويب common > header في موضوعك.
لا تريد أن تظهر مقاطع الفيديو الخاصة بك على كل ملف شخصي، بل تريد أن تظهر فقط بناءً على شرط معين. إذن، كيف تفعل ذلك؟ حسنًا، ستحتاج إلى شيئين: بعض البيانات للاستهلاك وقليل من جافا سكريبت.
دعنا نجد البيانات. أتذكر عندما قلت إن plugin-outlets هي مساحات محجوزة؟ حسنًا، ما فائدة وجودها بدون سياق؟ لهذا السبب يمرر Discourse الأجزاء ذات الصلة من السياق إلى كل plugin outlet… لكن أولاً، دعنا نرجع خطوة للوراء. عندما تضيف هذا
الآن، هل أي من هذه الأشياء مفيد؟ نعم… لكن ليس في الوقت الحالي. سنعود إلى هذا لاحقًا. دعنا نرجع خطوة أخرى للوراء ونرى كيف يمرر Discourse السياق إلى outlet. إذا بحثت عن اسم outlet على Github - أو محليًا - فستحصل على هذا.
يمكنك تصفح تلك البيانات ورؤية ما إذا كانت تحتوي على ما تحتاجه. يجب أن تكون كذلك لأنها تحتوي على جميع البيانات حول المستخدم المستخدمة في عناصر أخرى على تلك الصفحة. إنها “النموذج” لصفحة المستخدم لتلك المستخدم المحدد.
إحدى الخصائص المتاحة هناك هي… دق الطبل … المجموعات التي ينتمي إليها المستخدم.
إذن، إذا قمت بـ:
{{log args.model.groups}}
ستحصل على جميع المجموعات التي ينتمي إليها المستخدم في وحدة التحكم.
حسنًا، الآن لدينا البيانات التي نحتاجها، لذا كل ما تبقى هو إضافة شرط (شروط) بناءً على ذلك.
قد تميل إلى التفكير في أننا يمكننا القيام بذلك في نفس المقطع، لكن، للأسف، لا يمكننا ذلك. Handlebars هي لغة قوالب. لديها دعم جدًا بسيط للمنطق - لا شيء أبعد من شروط صحيحة/خاطئة بسيطة وحلقات. لا يمكنك إجراء مقارنات وأشياء أخرى من هذا القبيل.
إذن أين يمكنك بالضبط القيام بذلك؟ في فئة connector، يبدو ذلك رائعًا… أعرف.
باختصار، فئة connector هي في الأساس جزء من جافا سكريبت متصل بـ outlet. الأمر أكثر دقة من ذلك، لكن هذا كل ما تحتاج حقًا إلى معرفته الآن.
داخل فئة connector لدينا، يمكننا القيام ببعض العمل… لكن… يجب أن نكون حذرين من أنه ليس مثل أي ملف جافا سكريبت. ولعدم وجود وصف أفضل… اعتبره مكون Ember على نظام غذائي. توسيع هذا خارج نطاق هذا الدليل، لذا دعنا نتابع.
يمكنك بعد ذلك استدعاء هذا الإجراء من داخل outlet، مثل عند الضغط على زر. لن نحتاج إلى هذا هنا، لذا دعنا نتابع.
api.registerConnectorClass("above-user-profile", "add-profile-videos", {
shouldRender(args, component) {
// return true or false here
}
});
لن نستخدم هذا أيضًا لأن outlet يتم عرضه فقط على صفحات الملفات الشخصية، وليس لدينا أي متطلبات أخرى في الوقت الحالي. ومع ذلك، يمكنك استخدام هذا لإضافة أي شروط تريد اختبارها قبل عرض outlet. على سبيل المثال، مستوى الثقة للمستخدم الحالي أو أشياء من هذا القبيل. تابع…
هذا هو الذي نريد التركيز عليه. أي شروط جافا سكريبت أو متغيرات تريد تعيينها تذهب هنا. قبل أن نغوص أعمق في ذلك، دعنا نغطي الطريقة الأخيرة أولاً من أجل الاكتمال:
سترى نفس المعلومات في وحدة تحكم المتصفح التي رأيناها سابقًا. المجموعات التي ينتمي إليها مالك الملف الشخصي. هنا تبدأ المتعة، الآن لديك البيانات، ولديك الخطاف الصحيح. لذا يمكنك فعل أي شيء تريده هنا. لذا، إذا أردت أن يظهر الفيديو فقط على ملفات الأعضاء الذين ينتمون إلى مجموعة معينة، يمكنني فعل هذا:
إذا جربت هذا على صفحة ملف شخصي ينتمي إلى مستخدم في مجموعة staff، فسيتم طباعة true في وحدة التحكم. لذا، الآن كل ما تبقى لنا هو تمرير ذلك إلى قالب outlet. إليك كيف يمكنك فعل ذلك.
component الممرر إلى setupComponent هنا مشترك بين connector و outlet. يمكنك تمرير أشياء إلى outlet عن طريق تعيينها كخصائص على component كما يلي:
غيّر TARGET_GROUP إلى اسم المجموعة التي تريد استهدافها وأضف سمات src لمقاطع الفيديو الخاصة بك.
كان هذا المنشور طويلًا بعض الشيء… لا تثبط عزيمتك بذلك. بمجرد استيعاب المفهوم، يمكن القيام بكل ما فعلناه أعلاه في أقل من 3-5 دقائق.
الشيء الجميل هنا هو أن كل الأشياء التي تحدثنا عنها متشابهة تقريبًا لأي plugin outlet. الشيء الوحيد الذي يتغير هو الاسم. لذا، ينطبق هذا على أي تعديلات plugin-outlet تريد القيام بها في المستقبل.
هذا مفصل بشكل لا يصدق وسأتأكد من مراجعته عندما يكون لدي بعض الوقت الأسبوع المقبل، ولكن يكفي القول من خلال التصفح السريع يبدو أفضل بكثير من تطبيقي الحالي (تضمين الفيديو في كل صفحة على حدة وإظهاره فقط في ملف تعريف المستخدم، والذي أنجزته باستخدام برنامج نصي يضيف علامة إلى جسم صفحة المستخدم إذا كان اسم حسابه شيئًا معينًا). شكرًا على الشرح المفصل، لا أطيق الانتظار للبدء فيه!
ومع ذلك، نواجه مشكلة في CSS الخاص بنا - نرغب في إجراء بعض التغييرات على كيفية ظهور صفحة المستخدم لهؤلاء المستخدمين فقط.
في الوقت الحالي، نحقق ذلك عبر نفس الكود السابق:
<script type="text/discourse-plugin" version="0.8">
api.onPageChange(() =>{
window.onload = determineUser();
});
async function determineUser() {
await sleep(50);
var pageURL = document.querySelector("meta[property='og:url']").getAttribute("content");
var isUserPage = pageURL.includes("https://www.siteurl.com/u/");
var isUser1 = pageURL.includes("u/User1/");
document.body.className = document.body.className.replace(" user-page-animated","");
if(isUserPage)
{
if(isUser1)
{
document.body.className += ' user-page-animated';
}
}
}
function sleep(ms)
{
return new Promise(resolve => setTimeout(resolve, ms));
}
</script>
يتيح لنا هذا ببساطة نسخ ولصق كود “User1” لكل مستخدم جديد، ولكنه يعتمد على تأخير 50 مللي ثانية بعد كل تحميل للصفحة قبل التشغيل، وهو ما يكون مرئيًا للمستخدم النهائي (وإذا تمت إزالته، فإنه لا يعمل لأي سبب).
هل هناك أي طريقة لربط إضافة الفئة هذه إلى الجسم بالكود الذي قدمته، حتى نتمكن من استخدامه لتنسيق الصفحات التي تحتوي على مقاطع فيديو بشكل مختلف عن تلك التي لا تحتوي عليها؟
… المجموعات التي ينتمي إليها المستخدم.