إزالة أزرار الفئات والوسوم

الدعم
1

هل هناك طريقة سهلة لإزالة هذين الزرين؟ السبب الذي يجعلني أسأل هو أنني كنت أقرأ (على هذا الموقع) آراء بعض الأشخاص حول كون Discourse مربكًا بعض الشيء للمستخدمين الجدد. أشعر فقط أن زر الفئات (categories) زائد عن الحاجة بعض الشيء نظرًا لوجود علامة تبويب الفئات (categories) هناك، وإذا أراد المستخدم الخبير البحث حسب العلامة (tag) فيمكنه استخدام القائمة الجانبية. تعجبني الميزة ولكنها تجعل الأمور “مزدحمة” بعض الشيء في رأيي.

أدرك أنه يمكنني العثور على علامات CSS وإخفائها، لكنني كنت أتساءل عما إذا كانت هناك طريقة أقل “اختراقًا” لإنجاز هذه المهمة. أعتقد أن ميزة لطيفة ستكون السماح للمستخدمين بتشغيلها بأنفسهم لاحقًا عندما يشعرون بالراحة مع المنصة.

image
image803×160 8.35 KB

إعجابَين (2)
Breadcrumb Links
2

لا يوجد إعداد مدمج غير CSS في Discourse لإزالة أو تبديل أزرار “الفئات” (Categories) أو “الوسوم” (Tags) عالميًا من واجهة المستخدم.

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

آخذ الفكرة بعين الاعتبار لمجتمعي، شكرًا!

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

تجدر الإشارة إلى أن هذه الأزرار توفر وظيفة بحث - والتي يمكن أن تكون مفيدة إذا كان لديك الكثير من الفئات أو العلامات:

image
image273×174 7.27 KB

(لقد تركت الأزرار كما هي، وأخفيت قسم العلامات من القائمة الجانبية. إما أن يصبح طويلاً وغير عملي، أو تضطر إلى تحديد العلامات الافتراضية التي سيتم عرضها، ولم أرغب في إظهار تفضيلات :sweat_smile:)

CSS 
// إخفاء قائمة العلامات من الشريط الجانبي لتبسيط المظهر
.sidebar-section[data-section-name="tags"] {
 display: none
}
إعجابَين (2)
5

لم أكن أعرف… شكرًا

لقد اخترت إخفاء الشريط الجانبي بالكامل افتراضيًا للمستخدمين المجهولين (غير المسجلين أو الزوار) باستخدام مكون بسيط من Don للقيام بالحيلة. يمكنك العثور عليه هنا (شكرًا Don)

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

على أي حال…

إليك الصلصة الخاصة التي اكتشفتها لجعل الزرين يختفيان:

.category-breadcrumb {
display: none
}

لا تتردد في تصحيحي إذا لم تكن هذه هي الطريقة التي ينبغي القيام بها

في رأيي، هذا يجعل واجهة المستخدم أنظف قليلاً دون فقدان أي وظيفة

آندي

تعديل للإضافة:

لاحظت أن الزرين يختفيان على الهاتف المحمول افتراضيًا، لذا فمن الواضح أن المطورين لم يشعروا أن العالم سينتهي إذا لم تظهر هذه الأزرار

إعجابَين (2)
6

تظهر محددات القائمة المنسدلة لمسار التنقل في الجزء العلوي من صفحات الفئة على الهاتف المحمول

IMG_4897
IMG_48971290×2235 245 KB

وعلى صفحات الاكتشاف (/latest، إلخ) على الهاتف المحمول في بعض السمات، مثل FKB Social.

تذكر أنك قمت بإزالتها لأن “علامة تبويب الفئات موجودة هناك” - بافتراض أنك تقصد زر الحبة في شريط التنقل، عليك النقر عليه للانتقال إلى صفحة الفئات ثم العثور على الفئة التي تريد الانتقال إليها - فمن البديهي أكثر تحديد الفئة من القائمة المنسدلة للانتقال مباشرة إلى المكان الذي تريد الذهاب إليه، خاصة إذا كان شخص ما يبحث عن فئة فرعية. بالإضافة إلى ذلك، كيف يتنقل المستخدم عبر العلامات (tags) في موقعك الآن؟

إعجابَين (2)
7

وهذا السكريبت اللعين الذي قمت بإنشائه لاستبدال المسارات الأصلية

<script>
document.addEventListener('DOMContentLoaded', function() {
   
    const updateLinks = () => {
        document.querySelectorAll('a[href*="/l/latest"]').forEach(link => {
            link.href = 'https://segredin.com/';
        });
        document.querySelectorAll('a[href*="/l/hot"]').forEach(link => {
            link.href = 'https://segredin.com/hot';
        });
        document.querySelectorAll('a[href*="/latest"]').forEach(link => {
            link.href = 'https://segredin.com/';
        });
    };
    
    const ocultarElementos = () => {
        // أضف الكود هنا لإخفاء العناصر إذا لزم الأمر
    };

    const applyStylesToPosts = () => {
        // أضف منطق تنسيق المشاركات الخاص بك هنا
        // مثال: document.querySelectorAll('.post').forEach(post => { ... });
    };
    
    const replaceTextNodes = (node) => {
        node.childNodes.forEach(child => {
            if (child.nodeType === Node.TEXT_NODE) {
                child.textContent = child.textContent
                    .replace(/-E-/gi, ' & ')
                    .replace(/-/g, ' ');
            } else {
                replaceTextNodes(child);
            }
        });
    };

    const processTags = () => {
        document.querySelectorAll('.discourse-tag.box').forEach(tag => {
            replaceTextNodes(tag);
        });
        document.querySelectorAll('#sidebar-section-content-tags .sidebar-section-link-content-text').forEach(tag => {
            replaceTextNodes(tag);
        });
    };
 
    const TITLES = {
    "home": "Segredin - Desabafo Anônimo e Contos",
    "hot": "Segredin - Tópicos Populares"
};

const HOMEPAGE_URLS = [
    "https://segredin.com/", 
    "https://segredin.com"
];

const HOT_PAGE_URLS = [
    "https://segredin.com/hot",
    "https://segredin.com/hot/"
];

const getCurrentPageType = () => {
    const currentUrl = window.location.href;
    
    // تحقق مما إذا كانت صفحة /hot
    if (HOT_PAGE_URLS.some(url => 
        currentUrl === url || 
        currentUrl.startsWith(url.replace(/\\/$/, '') + '?') ||
        currentUrl === url.replace(/\\/$/, '')
    )) {
        return "hot";
    }
    
    // تحقق مما إذا كانت الصفحة الرئيسية
    if (HOMEPAGE_URLS.some(url => 
        currentUrl === url || 
        currentUrl.startsWith(url.replace(/\\/$/, '') + '?') ||
        currentUrl === url.replace(/\\/$/, '')
    )) {
        return "home";
    }
    
    return null;
};

const getDesiredTitle = () => {
    const pageType = getCurrentPageType();
    return pageType ? TITLES[pageType] : null;
};

const enforceTitle = () => {
    const desiredTitle = getDesiredTitle();
    if (!desiredTitle) return;
    
    if (document.title !== desiredTitle) {
        document.title = desiredTitle;
    }
};

const startTitleObserver = () => {
    const titleObserver = new MutationObserver(enforceTitle);
    const titleElement = document.querySelector('title');
    if (titleElement) {
        titleObserver.observe(titleElement, {
            childList: true,
            subtree: true,
            characterData: true
        });
    }
    return titleObserver;
};

const monitorUrlChanges = (titleObserver) => {
    let lastUrl = window.location.href;
    setInterval(() => {
        if (window.location.href !== lastUrl) {
            lastUrl = window.location.href;
            const pageType = getCurrentPageType();
            if (pageType) {
                enforceTitle();
                titleObserver.disconnect();
                startTitleObserver();
            } else {
                titleObserver.disconnect();
            }
        }
    }, 300);
};

const mainObserver = new MutationObserver(() => {
    applyStylesToPosts();
    updateLinks();
    ocultarElementos();
    processTags();
    enforceTitle();
});

    // التنفيذ الأولي
    applyStylesToPosts();
    updateLinks();
    ocultarElementos();
    processTags();
    
    const titleObserver = startTitleObserver();
    monitorUrlChanges(titleObserver);
    
    mainObserver.observe(document.body, { 
        childList: true, 
        subtree: true 
    });

    document.addEventListener('page:changed', () => {
        processTags();
        enforceTitle();
    });
});
</script>

سأقوم بزيادة هذا الكود ولكن في الوقت الحالي هو يعمل

8

بالمناسبة، هذه هي النتيجة:

image
image1068×466 56.5 KB

image
image788×414 30.2 KB

9

إذا كان هذا زر حبوب تنقل فنعم

image
image803×160 7.87 KB

آسف، لم أكن أعرف ماذا أسميها

أتفق
ولكن… هل سيعرف المستخدم الجديد إلى أين يريد الذهاب؟ هل سيبحث عن فئة فرعية؟

قائمة الشريط الجانبي؟
هل سيعرف المستخدم لأول مرة البحث عن علامة محددة؟

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

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

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

10

شكرًا لك سامي، أنا أدرس الكود الخاص بك.

أفترض أنه يمكنني إدراج شيء كهذا في قسم الرأس (head) الخاص بالثيم إذا أردت (بمجرد أن أفهم كيف يعمل :thinking: :face_with_monocle: :confused: :joy: )

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

لقد قررت في النهاية عدم إزالة زري الفئة (Category) والوسوم (Tags) باستخدام CSS كما هو موضح أعلاه لأنه بمجرد نقر المستخدم على فئة ما، لم تكن هناك طريقة للعودة إلى عرض قائمة الفئات. لقد وجدت مؤخرًا مكون السمة هذا الذي قد يوفر حلاً

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