لقد رأيت مواضيع حول وجود تنقل بزر الرجوع للهاتف المحمول لمتصفحات الهاتف المحمول ولم أجد حلاً على الرغم من أنني ربما فاتني شيء ما 
أنا لست مبرمجًا وماهرًا بما يكفي في Discourse لأكون خطيرًا 
ولكني تعثرت مع ChatGPT لصنع زر رجوع أزرق عامل في هذه الصورة مع جروي.
أريد إخفاءه في صفحات معينة ولكني لم أكتشف كيفية إخفاء العناصر بعد. إذا عرف أي شخص، فسأقوم بالتعديل والإضافة إلى التعليمات.
كيفية إضافة زر رجوع عائم في Discourse (لمستخدمي الهاتف المحمول)
يساعدك هذا الدليل في إضافة زر “رجوع” عائم للأجهزة المحمولة في منتدى Discourse الخاص بك. يضمن ظهور الزر لمستخدمي الهاتف المحمول فقط ويحسن التنقل للتطبيقات أو المتصفحات التي تفتقر إلى أزرار رجوع مدمجة.
الخطوة 1: إنشاء مكون سمة جديد
- تسجيل الدخول كمسؤول:
- انتقل إلى منتدى Discourse الخاص بك وسجل الدخول باستخدام حساب مسؤول.
- الوصول إلى تخصيص السمة:
- انتقل إلى
Admin > Customize > Themes.
- انتقل إلى
- إنشاء مكون سمة:
- انقر على Components.
- انقر على Install > Create New.
- قم بتسمية المكون “Mobile Back Button” وانقر على Create.
الخطوة 2: إضافة كود زر الرجوع
- تحرير مكون السمة:
- انقر على مكون السمة الذي تم إنشاؤه حديثًا.
- انتقل إلى قسم CSS/HTML.
- إضافة JavaScript لزر الرجوع:
- قم بالتبديل إلى علامة التبويب Mobile.
- انقر على قسم
</head>. - الصق الكود التالي:
html
انسخ الكود
<script type="text/discourse-plugin" version="0.8">
function addMobileBackButton() {
const isMobileView = api.container.lookup('site:main').mobileView;
if (isMobileView) {
const existingButton = document.querySelector('.floating-back-button');
if (!existingButton) {
const backButton = document.createElement('button');
backButton.className = 'floating-back-button';
backButton.innerHTML = '←'; // Unicode for left arrow
backButton.onclick = (event) => {
event.preventDefault();
window.history.back();
};
document.body.appendChild(backButton);
}
}
}
// Add the button on initial page load
document.addEventListener('DOMContentLoaded', addMobileBackButton);
// Re-check on subsequent page transitions
api.onPageChange(addMobileBackButton);
</script>
الخطوة 3: إضافة CSS للتصميم
- إضافة أنماط زر الرجوع:
- في علامة التبويب Mobile، انقر على قسم CSS.
- الصق CSS التالي:
css
انسخ الكود
.floating-back-button {
position: fixed;
bottom: 20px;
left: 20px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #0088cc; /* Customize the color */
color: #fff;
border: none;
font-size: 24px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
z-index: 1000;
cursor: pointer;
}
الخطوة 4: تطبيق مكون السمة
- العودة إلى السمات:
- انتقل مرة أخرى إلى
Admin > Customize > Themes.
- انتقل مرة أخرى إلى
- تحرير السمة النشطة الخاصة بك:
- انقر على السمة النشطة الخاصة بك.
- ضمن Theme Components، أضف مكون “Mobile Back Button” من القائمة المنسدلة.
- انقر على Add ثم Save.
الخطوة 5: اختبار التغييرات الخاصة بك
- افتح منتدىك على الهاتف المحمول:
- استخدم متصفح الهاتف المحمول أو قم بمحاكاة عرض الهاتف المحمول باستخدام أدوات المطور.
- تحقق من زر الرجوع:
- يجب أن يظهر الزر في الزاوية السفلية اليسرى من الشاشة.
- يجب أن ينقلك النقر على الزر إلى الوراء في سجل المتصفح الخاص بك.
ملاحظات:
- للهاتف المحمول فقط: نظرًا لأن الكود و CSS موجودان في علامة التبويب Mobile، فسيظهر الزر فقط على الأجهزة المحمولة.
- التخصيص:
- يمكنك ضبط موضع الزر أو حجمه أو لونه في CSS لمطابقة تصميم منتدىك.
- الوظائف:
- يستخدم زر الرجوع
window.history.back(). إذا لم تكن هناك صفحة سابقة، فلن ينتقل إلى أي مكان.
- يستخدم زر الرجوع
