Приветствуем, геймер! Ты можешь или
16+
Rufus

Автор Da4ik 2

84

Редактирование - Якорь

Договорились, однажды, мы с уважаемым nemsik'ом, совместно составить прохождение Baldur's Gate: Siege of Dragonspear. Игра насыщенная, главы с виду хоть и не длинные, но в результате сбора разных фактов и проверки вариативности квестов лишь по одной главе получилась довольно объемная статья. При этом события в ней настолько взаимосвязаны, что разделить ее на несколько постов мы посчитали не лучшей идеей. Сверстав финальную версию поста на сайте в редакторе, мне пришла мысль: было бы не плохо создать оглавление для удобной навигации по статье. Порылся в нашем редакторе глубже, пробежался по "гайдам" на сайте и... Жаль. Не нашел я функцию якоря и слегка сник. Но тут в голове у руля стал мой внутренний #ТыжПрограммист. Решил проверить одну фишку, результат которой оказался довольно успешным. И сейчас с вами ей поделюсь.






О ЧЕМ ДАННЫЙ ПОСТ

"Якорем" называется функция состоящая из двух элементов: своеобразной закладки с уникальным именем на определенном месте страницы и ссылки, предназначенной для перехода к закладке. Их удобно применять в документах большого объема, чтобы можно было быстро переходить к нужному разделу. В языке разметки HTML он основан на гиперссылках. Для тех кто незнаком с концепцией, кратко опишу принцип.

В HTML-коде это выглядит так:

Редактирование - Якорь
GAMER.ru - Редактирование - ЯкорьРедактирование - Якорь

Атрибут id - это уникальное имя закладки.

Редактирование - Якорь
GAMER.ru - Редактирование - ЯкорьРедактирование - Якорь

Ссылка на закладку

Как видим, один элемент является закладкой, второй элемент используется в качестве ссылки на неё.

Атрибут href обычно хранит адрес куда ведет ссылка (например: http://www.gamer.ru/CatsPost). В нашем случае она содержит id закладки с решеткой.

Получая страницу с такой разметкой, современные браузеры понимают, что данная ссылка с "хэштэгом" вместо адреса направлена на закладку в тексте. При нажатии на неё, браузер, не перезагружая страницу, прокручивает её к месту, где расположена закладка. Таким образом мы получаем удобную навигацию в пределах одной страницы. Еще один вариант использования якоря, добавить id закладки в конец адреса ссылки (пример: http://www.gamer.ru/CatsPost#Top). В данном случае, после перехода на страницу, она отобразится с указанной закладки.






КАК ПРИМЕНИТЬ

Прочитав предыдущий раздел, может возникнуть вопрос: Как данная абракадабра относится к нам? Все просто. Наш текстовый редактор имеет функцию вставки ссылки (значок цепочки на панели инструментов). В редакторе текста он отображается в виде:

Редактирование - Якорь
GAMER.ru - Редактирование - ЯкорьРедактирование - Якорь

При отображении поста данный тег превращается вот в такую ссылку:

Редактирование - Якорь
GAMER.ru - Редактирование - ЯкорьРедактирование - Якорь

Из чего можно понять, значение параметра url добавляется в атрибут href. Но есть пара нюансов.

Во-первых. Сайт к нашей ссылке приписывает префикс "http://". Если мы просто напишем url = #Top. то получим ссылку "http://#Top". Это нам не подходит. Поэтому следует как-то убрать префикс. Тут нам поможет "магия" верстки, а именно волшебное слово "javascript". Адрес прописываем таким образом: url = javascript:top. И, о чудо, слово сработало. Мы получили href="#Top". Не спрашивайте подробности механизма работы этой "фичи", я лучше промолчу, чтобы сойти за умного.

Во-вторых. В ссылке, которую формирует сайт, мы видим дополнительный атрибут target равный _blank. Благодаря ему ссылки, вставленные в пост, открываются в новой вкладке. Он тоже мешает использовать "Якорь" и его необходимо изменить, а если точнее, поменять значение _blank, на значение - _self. Почему на него? Отвечу кратко, оно является значением по умолчанию, если в элементе не указан атрибут target. Для этого обратимся снова к примеру сформированной сайтом ссылке. Видно что адрес написан внутри кавычек, в то время как мы в url пишем адрес без кавычек. Следовательно <наша строка> в ссылке расположена так:

<a href="http://<наша строка>" target="_blank">

Отсюда делаем вывод: для того чтобы в строке url прописать свое значение target, нужно после javascript:top вставить кавычку ("), далее пишем target = "_self, в значении _self не закрываем кавычки, вторую сгенерирует сайт. Тем самым мы отделили строку адреса для атрибута href от атрибута target. И получаем такую строку в редакторе поста:

Редактирование - Якорь
GAMER.ru - Редактирование - ЯкорьРедактирование - Якорь

Сайт видит нашу ссылку так:

Редактирование - Якорь
GAMER.ru - Редактирование - ЯкорьРедактирование - Якорь

То что надо (напомню: <a id = "top"> - тоже самое, что и <a id = "top" target = "_self">, так как значение _self применяется к элементу по умолчанию, если в нем не указан атрибут target ). Теперь у нас есть ссылка которая будет проматывать страницу к нужной закладки.

Далее нам нужна сама закладка. Тут все проще. Элемент не будет использовать атрибут href, следовательно, в редакторе в поле url прописываем строку без указания имени элемента - javascript:". Потом добавляем параметры id = "top" target="_self. Так как это закладка и читатель не должен видеть её, между открывающим и закрывающим тегом не должно быть текста описания. Получаем следующий тег для редактора:

Редактирование - Якорь
GAMER.ru - Редактирование - ЯкорьРедактирование - Якорь

В итоге, получили нужный нам элемент:

Редактирование - Якорь
GAMER.ru - Редактирование - ЯкорьРедактирование - Якорь

Теперь у нас есть все что нужно. Можем перейти к использованию "Якоря" в постах.






КАК ИСПОЛЬЗОВАТЬ

Текст выше был составлен с целью описать основной принцип работы данной фишки. Чтобы не заморачиваться самостоятельно, прописывая все это непотребство, используйте шаблон предоставленный тут:

Закладка - [url=javascript:" id = "<Имя закладки>" target = "_self][/url]

Ссылка - [url=javascript:<Имя закладки>" target = "_self] описание ссылки... [/url]

Закладка прописывается в тексте, куда должна привести ссылка, даже можно и выше, чтобы необходимый раздел отображался чуть ближе к центру экрана и сразу оказался в поле зрения читателя. Саму ссылку используем, как и обычную.

Еще посоветую прописывать подробные имена закладок, чтобы избежать повторений с именами элементов самого сайта (например #Comments, ведет к разделу с комментариями).

Примеры: MyPostCastleBridge или Gothic_post1_chapter1 и т.п.

Для лучшей работоспособности закладки, старайтесь не вставлять её внутри других тегов (например спойлеров).

Пример использования можно увидеть в разделе "Оглавление" в посте с прохождением Siege of Dragonspear.






О ПРОБЛЕМЕ РЕДКАТОРА

При работе над данным экспериментом был обнаружен интересный «баг» редактора. После публикации поста с прохождением, в комментариях уважаемый Andrew_Merron сообщил, что пост невозможно «лайкнуть», так как плюс не активен. Меня это смутило. Что это? Проблема на сайте? Или мои ссылки так, неожиданно, повлияли? Отредактировал статью убрав все якоря, предварительно, скопировав разметку в пост-двойник в личный блог. После чего оригинальный пост исправился.

«Ладно, - подумал я, - посмотрим в чем мог ошибиться. Под «капот» сайта доступа ведь нет. Как из редактора можно «сломать» функции сайта на странице?»

Проведя, анализ поста-двойника оказалось, что тэг в редакторе [url=][/url], довольно опасная вещь. Простая скобка после знака равенства приводит к нарушению работы Джава скриптов страницы. И не важно какой текст будет написан после скобки.

Итого: [url= "] [/url] — если это добавить в текст, то:

- нельзя смотреть карточку автора (обычно появляется при наведении на имя);

- нельзя плюсовать пост и комментарии (Это как раз тот симптом, что был замечен);

- спойлер перестает открываться (или вовсе пропадает).

И самое гадкое в этом всем - в режиме предпросмотра проблем не увидеть, они возникают уже после публикации. Так что, в теории, автор может попасть в подобную ситуацию, например, нечаянно скопировав адрес с кавычкой в начале. Потому, лишний повод быть внимательней при работе с редактором. Если у Вас возникла данная проблема, обратите внимание на текст ссылок.






Спасибо за внимание






84
Еще в блоге
Интересное на Gamer.ru

4 комментария к «Редактирование - Якорь»

    Загружается
Чат