عندما أنقر على رابط يحتوي على مرساة (Anchor) على سطح المكتب، فإن الصفحة تنزلق إلى هذا الموقع. ومع ذلك، على الأجهزة المحمولة (أندرويد، فايرفوكس وكروم)، يتم إزالة المرساة من عنوان URL، لذا لا يحدث أي انزلاق إلى هذا الموقع.
ما أحاول فعله:
لدينا وثيقة إرشادات وطرح الأسئلة الشائعة طويلة تحتاج إلى ربط بالعناوين. نظرًا لأن Discourse يزيل معاملات id، فقد قمت بإنشاء مكون قالب بسيط يستخدم سمات البيانات المخصصة في المستند المستهدف ويستمع إلى المراسي في عنوان URL للانزلاق إلى العنصر الذي يحتوي على سمة البيانات المطابقة.
يعمل على سطح المكتب!
ومع ذلك، على الأجهزة المحمولة، يبدو أن المراسي يتم إزالتها بحيث عندما تصل إلى الصفحة المستهدفة، لا يحدث أي انزلاق إلى العنصر الصحيح. وبالطبع، مع وثيقة طويلة، تكون الأجهزة المحمولة هي المكان الذي تحتاج فيه إلى هذا التنقل أكثر من أي وقت مضى.
الآن، أجد أن المراسي التي ينشئها مكون فهرس المحتويات تعمل عند فتحها في رابط جديد. فهي لا تزال موجودة في عنوان URL وينزلق المتصفح إلى المكان الصحيح.
لا أستخدم أندرويد، لذلك لا يمكنني اختبار هذا، لكنني استخدمت الارتباط بالعناوين العديد من مرات، وتعمل بشكل جيد على آيفون الخاص بي. أنا فضولي لمعرفة سبب استخدامك لمراسي المعرف (id anchors) بدلاً من الارتباط المباشر بالعنوان الذي تريده؟
ترى -13 في النهاية؟ إنه موجود لأنه العنوان الثالث عشر. بمجرد إضافة عنوان جديد في بداية المستند، ينكسر الرابط. وبطبيعة الحال، إذا قمت بتغيير نص العنوان، ينكسر أيضًا.
عندما أقول “ينكسر”، أعني التغييرات في المستند الهدف. ومن ما أستطيع استنتاجه، يتم إنشاء هذه الروابط المرساة ديناميكيًا عند تحميل الصفحة. لذا إذا كنت تستخدم إضافة فهرس المحتويات (TOC)، فإن تغيير المستند لا يمثل مشكلة.
في حالتنا الاستخدامية، هذا دليل الأسئلة الشائعة (FAQ) الذي يتم وضع رابط له. لذلك، من الشائع إضافة أسئلة/عناوين جديدة.
لكنك على حق في أن Discourse يبدو أنه يكشف عن نمط هذه الروابط المرساة ويسمح بمرورها. ولكن إذا لم يتطابق مع النمط المتوقع، فإنه يتم إزالته.
إنها مجرد معرفات أبجدية رقمية عادية. لذا إذا كنت أحاول إنشاء مرساة لأمثلة أعلاه، سأستخدم فقط cloudflare-r2.
في اختباراتي، يقوم معالج Markdown بإزالة سمات name. هذا هو سبب مشكلتي الأولى.
ومع ذلك، فإن المشكلة التي أثارها في هذا الموضوع هي أنه حتى لو تمكنت من جعل ذلك الرابط يعمل، فإن #cloudflare-r2 يتم إزالته على الأجهزة المحمولة. ولا يحدث ذلك على سطح المكتب.
أه فهمت، نعم يبدو أن محرر النصوص الغني يزيل تلك العناصر، لكن محرر Markdown لا يفعل ذلك… في المحرر الغني أعتقد أنه يجب عليك تغليفها داخل عنصر div للحفاظ على كود HTML