 |
ملخص | يضيف أيقونة للروابط الخارجية في المواضيع والمنشورات |
 |
المستودع | GitHub - denvergeeks/discourse-external-links-icon |
 |
دليل التثبيت | كيفية تثبيت سمة أو مكون سمة |
 |
جديد على سمات Discourse؟ | دليل المبتدئين لاستخدام سمات Discourse |
Install this theme component
يستخدم أيقونة SVG الافتراضية (نفس الأيقونة المستخدمة للروابط المميزة في النواة) مثل هذا الرابط
تعمل المكونات بشكل جيد مع لوحات ألوان مختلفة
لكن لقطة الشاشة لن تتكيف مع لوحة الألوان. ماذا تقترح لتقديم الميزة في منتدى حيث لم يتم تثبيت المكون؟ لقطة شاشة أكبر تتضمن الرابط؟
كنت على وشك اقتراح استخدام مكون أيقونة Discourse، ولكنني غير قادر على تغيير لون الأيقونة:
[example.com [wrap=icon id=up-right-from-square][/wrap]]()
نعم، أعتقد ذلك؟ سيكون هذا تمثيلاً أفضل لما يمكن توقعه.
لقد قمت بتغيير الصورة في الوصف/المثال إلى ملف .webp شفاف مع تعبئة رمادية.
رائع، يبدو أفضل بكثير!
مرحباً، لا يعمل معي، يظهر الرمز على جميع الروابط، حتى الداخلية.
شيء آخر، بالنسبة للعناوين التي تحتوي على رابط خارجي مباشر مثل فيديو يوتيوب، يظهر الرمز مرتين:
نفس الشيء هنا. يظهر الرمز أيضًا على الروابط الداخلية.
إذا فهمت الكود بشكل صحيح، فإنه يبحث عن “http*” في عنوان URL لتحديد الروابط الخارجية. لسوء الحظ، تستخدم أداة الربط في المحرر تلقائيًا عناوين URL مؤهلة بالكامل (مطلقة) تبدأ بـ “https:///..”.
أفترض أن هذا يسبب ظهور الأيقونات الخارجية على الروابط “الداخلية”.
هل يمكن توسيع الكود للتحقق من “https:///..” وتصنيفها على أنها داخلية؟
لقد أنشأت طلب سحب (PR) لإصلاح هذه المشكلات.
سيؤدي هذا إلى إخفاء أيقونة الرابط للروابط الداخلية، سواء كانت نسبية أو مطلقة، بالإضافة إلى إخفائها في روابط العناوين.
شكرًا لكِ @Lilly، لقد قمت بدمج هذا.
لقد قمت بشيء مشابه باستخدام CSS النقي منذ فترة طويلة عندما كان Discourse يستخدم Font Awesome في font-family.
لم يعد ذلك ممكنًا، ولكن يمكن تحقيق تأثير مماثل باستخدام هذا:
.cooked {
a[href^="http"]:not([href*="www.yourdomain.com"]) {
display: inline-flex;
align-items: center;
&::after {
content: "";
width: 0.8em;
height: 0.8em;
margin-left: 0.2em;
margin-bottom: 0.4em;
background-color: currentColor;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M384 64C366.3 64 352 78.3 352 96C352 113.7 366.3 128 384 128L466.7 128L265.3 329.4C252.8 341.9 252.8 362.2 265.3 374.7C277.8 387.2 298.1 387.2 310.6 374.7L512 173.3L512 256C512 273.7 526.3 288 544 288C561.7 288 576 273.7 576 256L576 96C576 78.3 561.7 64 544 64L384 64zM144 160C99.8 160 64 195.8 64 240L64 496C64 540.2 99.8 576 144 576L400 576C444.2 576 480 540.2 480 496L480 416C480 398.3 465.7 384 448 384C430.3 384 416 398.3 416 416L416 496C416 504.8 408.8 512 400 512L144 512C135.2 512 128 504.8 128 496L128 240C128 231.2 135.2 224 144 224L224 224C241.7 224 256 209.7 256 192C256 174.3 241.7 160 224 160L144 160z'/%3E%3C/svg%3E");
mask-size: contain;
}
}
}
على الرغم من أن SVG مُشفّر بشكل ثابت.
مرحباً، أنا مجدداً، آسف 
الأيقونات الخارجية تظهر في Custom Header Links (icons) TC، لا ينبغي لها أن تظهر. شكراً.
مرحباً 
إليك مثال على كيفية استخدامي لهذا في مكون الثيم الخاص بي.
في حالتي، أستخدم الإعدادات لهذا الغرض لأن المكون يغير الأيقونات ديناميكيًا عبر CSS، مما يسمح لي باستهداف تلك الإعدادات مباشرةً. (إضافة فئة إلى الروابط لا تعمل دائمًا بشكل جيد في بعض الحالات.)
ومع ذلك، بالنسبة للمكون الخاص بك، يمكنك ببساطة استبعاد اسم المضيف الحالي ديناميكيًا بشيء كهذا، على ما أعتقد:
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer((api) => {
api.decorateCookedElement(
(element) => {
const currentHost = window.location.hostname;
const selector = `a[href*='//']:not([href^='/']):not([href*='${currentHost}'])`;
const links = element.querySelectorAll(selector);
links.forEach((link) => {
console.log("External link:", link.href);
});
},
{ id: "external-link", onlyStream: true }
);
});