Когда я нажимаю на ссылку с якорем на рабочем столе, страница прокручивается к нужному месту. Однако на мобильных устройствах (Android, FF и Chrome) якорь удаляется из URL, поэтому прокрутки к этому месту не происходит.
Что я пытаюсь сделать:
У нас есть длинный документ с инструкциями и часто задаваемыми вопросами, в котором необходимо использовать ссылки на заголовки. Поскольку Discourse удаляет параметры id, я создал простой компонент темы, который использует пользовательские атрибуты данных в целевом документе и отслеживает якоря в URL, чтобы прокрутить страницу к элементу с соответствующим атрибутом данных.
На рабочем столе это работает!
Однако на мобильных устройствах якоря, похоже, удаляются, поэтому при переходе на целевую страницу прокрутки к нужному элементу не происходит. И, конечно же, именно на мобильных устройствах навигация по длинным документам нужна больше всего.
При этом я заметил, что якоря, созданные компонентом «Содержание», работают при открытии в новой вкладке. Они не удаляются из URL, и браузер прокручивает страницу к нужному месту.
Кто-то предложил использовать вместо этого параметры запроса. Похоже, что на мобильных устройствах они не удаляются. Но удивительно, что на настольных компьютерах они удаляются.
я не использую android, поэтому не могу это протестировать, но я много раз использовал ссылки на заголовки, и на моем iphone они работают отлично. мне интересно, почему вы используете id-якоря вместо того, чтобы просто ссылаться на нужный заголовок?
Видите -13 в конце? Он там потому, что это тринадцатый заголовок. Как только вы добавите новый заголовок выше по тексту, ссылка перестанет работать. И, разумеется, она сломается, если вы измените текст самого заголовка.
Под «сломается» я имею в виду изменения в целевом документе. Насколько я понимаю, такие якоря генерируются динамически при загрузке страницы. Поэтому, если вы используете плагин TOC (содержание), изменение документа не станет проблемой.
В нашем случае это ссылка на FAQ. Поэтому добавление новых вопросов/заголовков — дело нередкое.
Но вы правы в том, что Discourse, кажется, распознаёт паттерн таких якорей и пропускает их. Однако если он не соответствует ожидаемому паттерну, якорь удаляется.
Это обычные буквенно-цифровые идентификаторы. Так что, если бы я хотел создать якорь для вашего примера выше, я бы просто использовал cloudflare-r2.
В моих тестах Markdown-процессор удаляет атрибуты name. Это корень моей первой проблемы.
Однако проблема, которую я поднимаю в этой теме, заключается в том, что даже если бы я смог заставить этот якорь работать, на мобильных устройствах #cloudflare-r2 всё равно обрезается. На десктопе этого не происходит.
Ах, понял, да, похоже, что редактор форматированного текста удаляет их, а редактор Markdown — нет… В редакторе форматированного текста, думаю, нужно обернуть это в div, чтобы сохранить HTML
Я уже пробовал это. Текст всё равно выводится как код. Кроме того, я не могу полагаться на то, что кто-то в будущем не будет использовать редактор Markdown.
Я вставил этот HTML выше в визуальный редактор для проверки. Посмотрим…