Главная » MODx- профессиональный инструмент для разработки сайтов » Как создать в MODx Evo ссылку-якорь HTML
    РейтингРейтингРейтингРейтингРейтинг

Как создать в MODx Evo ссылку-якорь HTML

HTML якоря — это элементы навигации по странице сайта. Их используют для перемещения в пределах одной страницы. Если страница слишком большого объема, тогда, для удобства пользователей, у веб дизайнера есть возможность обеспечить навигацию по странице путем простановки специальных меток – HTML якорей.

Якорь – это невидимая ссылка с уникальным названием,

например <a id="top"></a>.

Шаг 1: добавляем якорь

Вначале нужно сделать метку (вставить якорь) в соответствующем месте страницы сайта и дать ей имя. В примере ниже, якорю дано имя "link", но вы можете присвоить якорю своё имя. Обычно это слово обобщает смысл текста, на который вы даёте ссылку и пишется на латинице, может содержать и латинские буквы, и цифры. Количество якорей на странице может быть сколько угодно, но обязательное условие - имя якоря должно быть уникальным и не должно повторяться.

Для создания ссылки в HTML используется тег <a>. Атрибут <name> данного тега - задает имя якоря внутри документа.

Пример: <a name="link"></a>

добавляем якорь

Шаг 2: добавляем ссылку

Когда якорь добавлен к тексту, необходимо создать ссылку, которая будет перенаправлять посетителей вашего сайта на место, отмеченное якорем. Добавьте нужный вам текст ссылки, например, "Вернуться в начало" или, если вы хотите перенаправить посетителей на нужный раздел то "Перейти к ....".

Пример: <a href="#link">Текст для перехода </a>

добавляем ссылку

Для создания ссылки в HTML используется тег <a>. Атрибут <href> данного тега - задает адрес документа, куда следует перейти. Тег <a> с атрибутом <href> - обычная ссылка, к которой, для создания ссылки на якорь в конце URL адреса нужно добавить символ решетки # и имя якоря.

Сохраните изменения! Теперь, кликнув на ссылку вы перейдете в место, отмеченное якорем.


Сколько якорей можно поместить на одну страницу?

На одну страницу может быть добавлено несколько якорей. Но, обратите внимание, их названия должны быть уникальными. Т.е. если для первого якоря и ссылки вы использовали название top, то для другого якоря и ссылки, привязанной к нему, должно быть подобрано другое название.

Например:

для <a id="top1"></a> ссылка <a href="#top1">Текст</a>,

для <a id="top2"></a> ссылка <a href="#top2">Текст</a>,

для <a id="top3"></a> ссылка <a href="#top3">Текст</a>.


Можно ли добавить якорь непосредственно к заголовку или тексту?

Можно установить якорь на сам заголовок или нужный  абзац. Для этого вы можете вставить ваш текст в модуль Widget/HTML и следовать инструкциям по установке якоря.

Для создания текстового абзаца, окружите ваш текст тегом <p> </p>. Для создания заголовка вокруг текста должны стоять теги заголовков, например: <h1> </h1>, <h2> </h2>, <h3> </h3>.

Например, если вы хотите добавить якорь к заголовку Новая статья, вы должны вставить в модуль Widget/HTML следующее: 

  • <h1>
  • Новая статья
  • <a id="new"></a>
  • </h1>

css template

Не забывайте написать ваш комментарий, понравилась ли статья. От вас пару слов, а мне — признание поисковых систем, что пишу нормальные человеческий статьи. Заранее спасибо вам!