نريد السماح للمستخدمين بإضافة قسم مخصص من الروابط إلى الشريط الجانبي الخاص بهم.
في المرحلة الأولى لهذه الميزة، نخطط للبناء على صفحة تفضيلات الشريط الجانبي الحالية، والسماح للمستخدم بإضافة قسم مخصص واحد لهذه الروابط.
نعتقد أنها يمكن أن تعمل على النحو التالي:
مربع اختيار لـ “إظهار القسم المخصص”.
إذا تم تحديده، يظهر القسم المخصص فوق قسم الفئات ويجب أن تحتوي القيم على اسم صالح ورابط صالح واحد على الأقل لـ “حفظ التغييرات”.
مربع نص لاسم القسم المخصص (الافتراضي: روابطي، لا يمكن أن يكون فارغًا).
زر لـ “إضافة رابط”. عند النقر عليه، يظهر مربع حوار لإضافة رابط.
الروابط المضافة تظهر زرًا لإزالتها.
مربع حوار إضافة رابط
يحتوي مربع حوار إضافة رابط على صندوقي نص: الاسم، عنوان URL.
لا يمكن أن يكون الاسم فارغًا، وقد يتضمن رموزًا تعبيرية (يجب عرضها في الشريط الجانبي).
يجب أن يكون عنوان URL رابطًا إلى داخل موقع Discourse نفسه*.
الحفظ يضيف الرابط، والإلغاء يتجاهله.
عند تكوين قسم مخصص صالح وحفظه، سيعرض الشريط الجانبي هذا القسم فوق “الفئات”.
* لماذا؟
نود أن نكون قادرين على “تمييز” / “جعل الخط عريضًا” للرابط في الشريط الجانبي عندما تكون في الصفحة المقابلة.
نود تخزين جزء “المسار”، لذلك تعمل عمليات إعادة تسمية الموقع كما هو متوقع.
نعتقد أن إضافة الروابط اليوم ستكون قيمة لأنها ستسمح للأشخاص بالوصول بسهولة إلى أشياء مثل “الأخطاء المفتوحة في الشريط الجانبي” وتمكننا من الاستفادة من أي تحسينات مستقبلية لقوائم المواضيع مثل عوامل تصفية قوائم المواضيع المحسنة. طالما أن الأشياء لها عنوان URL، يمكن للأشخاص إضافتها إلى الشريط الجانبي الخاص بهم.
نعتقد أن المستخدمين سيرغبون في القدرة على إضافة أقسام متعددة وإعادة ترتيبها، لكننا سنبقي ذلك خارج النطاق في البداية.
سؤال واحد حول هذا، @mcwumbly. يبدو هذا كاستراتيجية للسماح للمستخدم بإضافة روابط شخصية إلى الشريط الجانبي. هل سيسمح هذا النهج لأصحاب المواقع بإضافة روابط يراها جميع المستخدمين؟
هل سيكون هناك حد لعدد الروابط المخصصة التي يُسمح للمستخدم بإضافتها؟
هل سيتم اقتطاع نهاية الروابط (في الشريط الجانبي) كما في النموذج الأولي التالي؟ (سأكون سعيدًا بذلك).
وإذا كان الأمر كذلك، فهل سيتمكن المستخدم من قراءة نصها بالكامل في تلميح (إذا مرر مؤشر الماوس فوق الروابط)؟
في البداية، اعتقدت أن 10 روابط قد تكون كافية، لكنني أعتقد أن أعضاء المنتدى الآخرين سيرغبون في المزيد. ربما 20. لهذا السبب، سأحاول بـ 20 وأنتظر ملاحظات المستخدمين وأرى ما إذا كانوا يطلبون المزيد (لكنني أعتقد أن 20 هو بالفعل عدد جيد).
لإطالة “سهولة الاستخدام” لهذه الميزة، سيكون من الرائع السماح للمستخدم بسحب وإفلات الروابط (أي رابط من صفحة Discourse الحالية) مباشرة إلى الشريط الجانبي.
سيشير مؤشر (بين الروابط التي تمت إضافتها مسبقًا إلى قسم “روابطي”) إلى مكان وضع الرابط.
نموذج أولي (انقر بزر الماوس الأيمن \u003e “فتح الصورة في علامة تبويب جديدة” لرؤية الرسوم المتحركة بالحجم الكامل):
ربما يمكن للصفحة التالية المساعدة في تنفيذ السحب والإفلات؟
أود أن أتمكن من تعيين روابط افتراضية لموقعي، والتي يمكن للمستخدمين تجاهلها. هذا من شأنه أن يجعل هذا أفضل بشكل صارم من روابط الرأس المخصصة التي أستخدمها الآن، كما أراها.
+1 على إضافة روابط مخصصة. كانت لدينا بعض الروابط المخصصة المضافة إلى القائمة المنسدلة الأصلية. سيكون من الجيد إضافتها مرة أخرى، بشكل مشابه لكيفية وجود “أعياد الميلاد” و “المستندات” في Discourse تحت خيار “المزيد”.
\n\nما هي الطريقة الأكثر فعالية للقيام بذلك؟\n\n—\n\n### تعديل\n\nتم نقل سؤالي إلى هنا… لست متأكدًا لماذا بما أنني أسأل عن نفس الشيء حقًا.\n\nعلى أي حال، إليك ما فعلته لحلها. إنها ليست حلاً جميلاً ويجب أن تكون هناك طريقة للتكامل مع نظام القوالب الخاص بـ discourse.\n\nإليك الطريقة:\n\n\u003cscript\u003e\n let logo = \"\" // لقد قمت بإزالة مسارات SVG لأنكم لستم بحاجة إليها.\n const div = document.createElement('div') // إنشاء الرابط المراد إضافته\n div.className = 'sidebar-section-link-wrapper' // إضافة الفئات ذات الصلة\n div.innerHTML = `\n \u003ca title=\"جميع المواضيع\" href=\"https://www.latranchee.com\" id=\"ember12\" class=\"sidebar-section-link sidebar-section-link-everything sidebar-row ember-view\"\u003e\n \u003cspan class=\"sidebar-section-link-prefix icon\"\u003e\n \u003csvg viewBox=\"0 0 100 100\" class=\"logoIcon\" xmlns=\"http://www.w3.org/2000/svg\"\u003e${logo}\u003c/svg\u003e\n \u003c/span\u003e\n \u003cspan class=\"sidebar-section-link-content-text\"\u003e الصفحة الرئيسية \u003c/span\u003e\n \u003c/a\u003e\n ` // ملء الرابط\n \n $( document ).ready(() =\u003e { // هذا ضروري للانتظار حتى ينتهي ember من عمله\n // إضافة التنقل على سطح المكتب\n let desktop = document.getElementsByClassName('sidebar-section-content')[0];\n if(desktop) desktop.prepend(div)\n \n // إضافة التنقل على الهاتف المحمول\n let hamburger = document.getElementById('toggle-hamburger-menu').addEventListener(\"click\", addMobileNav);\n function addMobileNav () {\n setTimeout(function(){ // فرض الانتظار حتى يتم تحميل التنقل\n document.getElementsByClassName('sidebar-section-content')[0].prepend(div);\n }, 0);\n }\n })\n\u003c/script\u003e\n\n\nالنتيجة على سطح المكتب…\n\n
شكراً لاهتمامك بهذا الأمر، أعتقد أنه بالنسبة لقاعدة مستخدمي منتداي هذه ميزة مهمة جدًا. عادة ما يكون المستخدمون سيئين في اكتشاف حتى المعلومات المخفية قليلاً، وأحتاج إلى إضافة بعض الروابط البارزة لأشياء مثل “الاتصال بالمسؤول” و “قواعد المنتدى”. لا أمانع إذا ذهبوا مباشرة تحت عنوان المجتمع، لكنهم بالتأكيد لن يتم اكتشافهم تحت قائمة المزيد. كما أن المرونة في الحصول على روابط داخلية وخارجية ستكون مهمة، الروابط الخارجية معطلة حاليًا في قائمة Hamburger المخصصة:
هذا مثال آخر آمل أن يكون مفيدًا لشخص ما، بناءً على الأمثلة المذكورة أعلاه. لا يضيف هذا الرمز قسمًا جديدًا تمامًا، ولكنه يضيف روابط إضافية إلى أسفل لوحة “المزيد” في قسم “المجتمع” (ولكن قبل روابط الأسئلة الشائعة و"حول" في التذييل). وهو يدعم أيقونات FontAwesome (بافتراض إضافتها في إعدادات الموقع) والروابط الخارجية. وهو يتعامل مع الحالات الاستثنائية حيث يتم إغلاق الشريط الجانبي وإعادة فتحه، و/أو يتم طي قسم المجتمع وإعادة توسيعه. وهو يعمل على سطح المكتب والجوال.
أنا لست خبيرًا في JavaScript، لذا أعتذر عن أي رمز سيء أو غير أمثل. على موقعي، على الأقل، يبدو أنه يعمل كما هو مقصود.
فقط قم بإلقاء هذا الرمز في علامة التبويب “Header” لمكون سمة وقم بتخصيصه حسب الحاجة:
<script>
const links = [
// قد تحتاج أيقونات FontAwesome إلى إضافتها في إعدادات الموقع إذا لم تظهر بشكل صحيح
{ title: "حسابي", src: "/my/billing/subscriptions", icon: "file-invoice-dollar" },
{ title: "دليل المستخدم", src: "/u?asc=true&cards=yes&order=username&period=all", icon: "address-book" },
{ title: "المستندات", src: "/docs", icon: "book-reader" },
{ title: "موقع خارجي", src: "https://google.com/", icon: "globe" }
]
$(document).ready(function () {
if (document.getElementById("toggle-hamburger-menu")) {
// نحن في وضع العرض للجوال
addToggleListener(document.getElementById("toggle-hamburger-menu"))
} else {
// نحن في وضع العرض لسطح المكتب
addToggleListener(document.getElementsByClassName("btn-sidebar-toggle")[0])
addHeaderListener()
addMoreListener()
}
function addToggleListener(toggleEl) {
if (toggleEl) {
toggleEl.addEventListener("click", function () {
// انتظر قليلاً لتحميل الشريط الجانبي
setTimeout(function() {
let sidebar = document.getElementsByClassName("sidebar-section-header").length
if (sidebar) {
addHeaderListener()
addMoreListener()
}
}, 100)
})
}
}
function addHeaderListener() {
let communityHeader = document.getElementsByClassName("sidebar-section-header")[0]
if (communityHeader) {
communityHeader.addEventListener("click", function () {
// انتظر قليلاً لتوسع القسم
setTimeout(function() {
let communitySection = document.getElementById("sidebar-section-content-community")
if (communitySection) {
addMoreListener()
}
}, 100)
})
}
}
function addMoreListener() {
let buttonMore = document.getElementsByClassName("sidebar-more-section-links-details")[0]
if (buttonMore) {
buttonMore.addEventListener("click", addCustomLinks)
}
}
function addCustomLinks() {
// انتظر قليلاً حتى يتم تحميل التنقل
setTimeout(function () {
const parentEl = document.getElementsByClassName("sidebar-more-section-links-details-content-main")[0]
let linksAlreadyAdded = document.getElementsByClassName("sidebar-section-custom-link").length
if (parentEl && !linksAlreadyAdded) {
links.filter(function (link) {
let linkDiv = document.createElement("li")
let linkTitleTrim = link.title.replace(/\s+/g, '')
linkDiv.className = "sidebar-section-link-wrapper sidebar-section-custom-link"
linkDiv.innerHTML = `<a href="${link.src}" class="sidebar-section-link sidebar-section-link-everything sidebar-row ember-view">
<span class="sidebar-section-link-prefix icon" id="link_${linkTitleTrim}"></span>
<span class="sidebar-section-link-content-text"> ${link.title} </span>
</a>
`
parentEl.append(linkDiv)
let linkIcon = document.getElementById("link_" + linkTitleTrim)
if (linkIcon && link.icon) {
linkIcon.innerHTML = `<svg viewBox="0 0 640 512" class="fa d-icon svg-icon prefix-icon svg-string d-icon-${link.icon}" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="#${link.icon}"></use>
</svg>
`
}
})
}
}, 100)
}
})
</script>
