أنا أحب ميزة Onebox تمامًا، ولكن للأسف ليست كل مواقع الويب مهيأة بشكل صحيح لتغذية البيانات إلى Onebox. يمكن أن تبدو إضافة روابط متعددة إلى موضوع ما فوضوية عندما لا تكون التنسيقات موحدة. ستجد هنا حلاً لحل هذه المشكلة باستخدام القليل من CSS و markdown.
مثال على Onebox متعددة في صف مع عدد قليل من المواقع العشوائية التي لا يتم تحميلها بشكل صحيح.
هل ترى كيف أن الثاني والثالث لا يتم تحميلهما بشكل صحيح؟ يمكننا إصلاح ذلك عن طريق إنشاء Onebox يدويًا لتلك الروابط المحددة.
… ليبدو الأمر هكذا:
كيفية إنشاء Onebox يدوي
توقف يرجى ملاحظة أنني لست مبرمجًا ماهرًا. على الرغم من أن هذا الكود يعمل، إلا أنني أشك في أنه مُحسَّن. إذا رغب أي شخص في تحسين الكود، فيرجى الرد أدناه، وسأقوم بربطه هنا.
1. أضف كود CSS المخصص التالي إلى سمة Discourse الخاصة بك.
/*========================================================================================
OneBox - إنشاء Onebox يدوي لموقع ويب لا يقوم بتحميل البيانات بشكل صحيح.
=========================================================================================*/
[data-wrap="onebox-wrapper"] {
border: 5px solid var(--primary-low);
margin: 1em 0;
padding: 1em;
font-size: var(--font-0);
background: var(--secondary);
}
[data-wrap="onebox-header"] {
align-items: center;
display: flex;
margin-bottom: 1em;
}
[data-wrap="onebox-header"] a[href] {
color: var(--primary-med-or-secondary-med);
text-decoration: none;
}
[data-wrap="onebox-header"] p {
margin-top: 0em;
margin-bottom: 0em;
}
[data-wrap="onebox-body"] {
clear: both;
}
[data-wrap="onebox-body"] h3 {
margin-top: 0em;
margin-bottom: 0em;
}
[data-wrap="onebox-body"] p {
margin-top: 0em;
margin-bottom: 0em;
}
[data-wrap="onebox-image"] {
max-height: 170px;
--magic-ratio: calc(var(--aspect-ratio) + 0.15);
width: calc(128px*var(--magic-ratio));
max-width: 20%;
float: left;
margin-right: 1em;
height: auto;
padding-bottom: 0em;
}
2. استخدم markdown التالي في مشاركتك.
استبدل الروابط والنص بناءً على موقع الويب الذي تريد إنشاء Onebox له.
[wrap="onebox-wrapper"]
[wrap="onebox-header"] [نص العنوان](https://example.com) [/wrap]
[wrap="onebox-body"]
[wrap="onebox-image"][/wrap]
### [نص العنوان](https://example.com)
وصف الجسم
[/wrap]
[/wrap]
3. تحميل صورة (اختياري)
- اسحب وأفلت أو قم بتحميل صورة في الموضوع.
- انسخ المسار (على سبيل المثال
upload://ucs5Tw4ovoDhIxUbfCdQJ2W7wKi.png) - قم بتمييز المسار الموجود
upload://your_uploaded_url.pngثم الصق المسار الذي نسخته في الخطوة أعلاه.
النتيجة
تحسين إضافي
ليست كل مواقع الويب تحتوي على صورة. لذا للحفاظ على التوحيد، سنقوم إما بإزالة جميع الصور، أو بدلاً من ذلك استخدام عنصر نائب للروابط التي لا تحتوي على صور. لقد اخترت خيار العنصر النائب. لقد قمت بسحب وإفلات صورة في موضوعي لتحميلها إلى discourse. ثم أستخدم هذا الرابط في التفاف onebox-image. أخيرًا، قمت بنسخ markdown بالكامل واستخدمته كقالب للروابط المستقبلية. لذا فإن الصورة النائبة موجودة دائمًا (لا حاجة لإعادة تحميلها في كل مرة).
آمل أن يجد شخص ما هذا مفيدًا بقدر ما وجدته أنا 