Якорь ссылка: Якоря | htmlbook.ru

Leave a Comment / Разное / By /

Содержание

docs/guides/yfm-syntax-ru.md at master · yandex-cloud/docs · GitHub

Содержание

  • Заголовки
    • Якоря
  • Начертания
  • Списки
    • Неупорядоченный список
    • Упорядоченный список
  • Таблицы
  • Ссылки
    • Ссылки на якорь
    • Ссылки с автоматической подстановкой текста из заголовка
  • Вставка кода
    • Фрагмент кода внутри текста
    • Фрагмент кода отдельным блоком
  • Изображения
    • Прямая вставка
    • Вставка через ссылку
  • Заметки
    • Примечание
    • Совет
    • Важно
    • Внимание
    • Свой заголовок
  • Переиспользование контента
  • Табы
  • Каты
  • Видео
  • Переменные
    • Подстановки
    • Условные операторы
    • Фильтры
    • Циклы
    • Функции
  • Метаданные

Заголовки

Чтобы создать заголовок, используйте символ (#), например:

# Заголовок h2
## Заголовок h3
### Заголовок h4
#### Заголовок h5

В YFM используется 4 уровня заголовков. Заголовок страницы должен быть первого уровня. Для заголовков подразделов можно использовать второй, третий и четвертый уровни.

Важно! Нельзя пропускать вложенность заголовков.

Якоря

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

Чтобы якорь не изменялся, укажите его в явном виде после заголовка. Вы можете указать несколько якорей одновременно:

## Заголовок h3 {#custom} {#header} {#custom-header}

Начертания

Чтобы задать для текста

полужирное начертание, заключите его в двойные звездочки (*):

Этот текст выделен **полужирным шрифтом**.

Чтобы задать для текста курсивное начертание, заключите его в знаки подчеркивания:

Этот текст выделен _курсивом_. .

Списки

Неупорядоченный список

Чтобы оформить неупорядоченный маркированный список, используйте символы *, - или +. Рекомендуемый символ — *.

Например, разметка:

* Элемент 1
* Элемент 2
* Элемент 3

будет отображаться как:

  • Элемент 1
  • Элемент 2
  • Элемент 3

Чтобы оформить вложенный маркированный список, добавьте отступ для элементов дочернего списка. Допустимый размер отступа — от двух до пяти пробелов. Рекомендуемый размер отступа — четыре пробела.

Например, разметка:

* Элемент 1
   * Элемент A
   * Элемент B
* Элемент 2

будет отображаться как:

  • Элемент 1
    • Элемент A
    • Элемент B
  • Элемент 2

Упорядоченный список

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

Например, разметка:

1. Первый пункт
1. Второй пункт
1. Третий пункт

будет отображаться как:

  1. Первый пункт
  2. Второй пункт
  3. Третий пункт

Чтобы оформить вложенный упорядоченный список, добавьте отступ для элементов дочернего списка. Допустимый размер отступа — от двух до пяти пробелов. Рекомендуемый размер отступа — четыре пробела.

Например, разметка:

1. Первый пункт
    1. Вложенный пункт
    1. Вложенный пункт
1. Второй пункт

будет отображаться как:

  1. Первый пункт
    1. Вложенный пункт
    2. Вложенный пункт
  2. Второй пункт

Таблицы

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

Каждая строка таблицы состоит из ячеек, отделенных друг от друга символами |.

В ячейках разделительной строки используются только символы

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

Таблицу нужно отделять от предшествующего и последующего текста пустыми строками.

Например, разметка:

Колонка по левому краю | Колонка по правому краю | Колонка по центру
:--- | ---: | :---:
Текст | Текст | Текст

будет отображаться как:

Колонка по левому краюКолонка по правому краюКолонка по центру
ТекстТекстТекст

Ссылки

Ссылки имеют вид [текст](ссылка), где:

  • [текст] — текст ссылки.
  • (ссылка) — URL или путь до файла, на который делается ссылка.

Например, разметка:

[ссылка на README.md](README.md)

будет отображаться так:

ссылка на README.md

Ссылки на якорь

Ссылки на якорь имеют вид [текст](путь_до_файла#якорь).

Например, чтобы сделать ссылку на якорь anchor в файле basic.md, воспользуйтесь разметкой вида:

[Link to anchor](./basic.md#anchor)

Если файл basic.md расположен в папке _includes, в ссылке необходимо указать путь до того файла, в котором он используется.

Например, файл basic.md расположен в папке _includes и используется в файле hard.md:

 
 
{% include [File content](../_includes/basic.md) %}

В таком случае, чтобы сделать ссылку на якорь anchor в файле basic. md, воспользуйтесь разметкой вида:

[Link to anchor](./hard.md#anchor)

Ссылки с автоматической подстановкой текста из заголовка

В YFM вы можете добавлять ссылки на другие md-файлы без указания текста ссылки. Он подставится автоматически из заголовка указанного файла.

Например, ссылка:

[{#T}](README.md)

будет отображаться так:

Yandex Flavored Markdown

Вставка кода

Вы можете встроить фрагмент кода в текст абзаца или вынести его в отдельный блок.

Фрагмент кода внутри текста

Чтобы вставить фрагмент кода в текст, используйте символ `.

Например, разметка:

Предложение с `фрагментом кода`.

будет отображаться так:

Предложение с фрагментом кода.

Фрагмент кода отдельным блоком

Чтобы оформить фрагмент кода как отдельный блок, используйте утроенный символ `. Для подсветки синтаксиса укажите язык, на котором написан код.

Например, разметка:

«`js
let a= 10;
«`

будет отобраться как фрагмент кода с подсветкой:

let a= 10;

Изображения

Прямая вставка

Чтобы вставить изображение в документ, воспользуйтесь разметкой вида

![alt text](_assets/image.png "Текст подсказки" =100x200)

Здесь:

  • [alt text] — альтернативный текст изображения;

  • _assets/image.png — путь до файла изображения;

    Важно! изображения должны храниться в каталоге, имя которого начинается с символа _, иначе они будут удалены при сборке.

  • "Текст подсказки" — текст подсказки при наведении указателя на изображение;

  • =100x200 — размер изображения в пикселях.

Вставка через ссылку

Вы можете один раз объявить изображение в тексте документа, а затем вызывать его в тексте с помощью короткой ссылки. Для этого:

  1. Объявите изображение:

    [image]: _assets/image.png "Текст подсказки"

  2. Вставьте изображение с помощью разметки:

    ![alt text][image]

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

Заметки

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

Существует 4 типа заметок: примечание (info), совет (tip), важно (warning) и внимание (alert).

Не следует часто использовать блоки заметок, так как они могут отвлекать пользователя от основного содержимого. Также, хотя эти элементы могут содержать YFM, лучше не перегружать их, делая простыми и понятными.

Примечание 

{% note info %}
Это примечание.
{% endnote %}

Совет 

{% note tip %}
Это совет.
{% endnote %}

Важно 

{% note warning %}
Это важная информация.
{% endnote %}

Внимание 

{% note alert %}
Это предупреждение.
{% endnote %}

Свой заголовок

По умолчанию заметки имеют стандартный заголовок, но его можно переопределить:

{% note info "Custom title" %}
Это важная информация.
{% endnote %}

Если в кавычках ничего не указывать, у заметки не будет никакого заголовка:

{% note info "" %}
Это важная информация.
{% endnote %}

Переиспользование контента

Вы можете вынести повторяющийся контент в отдельный файл и вставлять его в документ с помощью элемента {% include %}. Часто такой подход оказывается удобнее, чем «копировать-вставить».

Чтобы использовать один и тот же контент в нескольких местах:

  1. Сохраните такой текст в отдельном md-файле.

    Важно! Такие файлы должны храниться в каталоге, имя которого начинается с символа _, например _includes. Если этого не сделать, файлы будут удалены при сборке.

  2. Вставьте в документ ссылку на файл:

    {% include notitle [Описание](_includes/file.md) %}

    Здесь:

    • notitle — если параметр указан, заголовок файла будет не будет вставлен в текст.
    • [Описание] — описание файла. Не влияет на сборку, нужно только для удобства рефакторинга документа.
    • (_includes/file.md) — путь до файла.

В результате при сборке контент файла будет вставлен в документ. Если в файле есть относительные ссылки на другие документы или изображения, они будут перестроены.

Вкладки

Вы можете оформить текст в виде вкладок. Это может быть полезно, например, чтобы разделить схожий контент и не перегружать страницу текстом.

Чтобы создать вкладки, используйте разметку вида:

{% list tabs %}
- Название таба1
  Контент таба1.
  * Можно использовать списки.
  * И **другую** разметку.
- Название таба2
  Контент таба2.
{% endlist %}

Важно! При использовании вкладок обязательно оставлять пустые строки:

  • Перед и после строк {% list tabs %} и {% endlist %}.
  • Между текстом одной вкладки и заголовком следующей вкладки.

Внутри вкладок можно использовать YFM-разметку: списки, таблицы, изображения, код и т.д.

Каты

Каты позволяют сворачивать контент («убирать под кат»). Это можно использовать в длинных листингах, примерах кода и тд. Внутри катов можно использовать YFM.

Чтобы создать кат, используйте разметку вида:

{% cut "Заголовок ката" %}
Контент который мы хотим скрыть
{% endcut %}

Видео

Вы можете вставлять в страницу видео с наиболее популярных платформ:

@[youtube](dQw4w9WgXcQ)
@[vimeo](19706846)
@[vine](etVpwB7uHlw)
@[prezi](1kkxdtlp4241)

Больше подробностей на странице плагина.

Переменные

В YFM вы можете объявлять и использовать переменные. При сборке переменные будут подставлены в текст документации или использованы для вычисления условий. Это удобно, например, для сборки документации разных версий сервиса из одних и тех же исходных файлов.

Подстановки

Чтобы объявить и использовать переменные в документе:

  1. Создайте в корневом каталоге документа файл presets.yaml.

  2. Объявите переменные в файле presets.yaml в формате:

    default:
  variable-name-1: значение переменной 1
  variable-name-2: значение переменной 2

  3. Чтобы вставить значение переменной в документ как текст, используйте разметку:

    Какой-то текст {{ variable-name-1 }} продолжение текста.

  4. Чтобы оставить значение в документе как текст, используйте разметку:

    Какой-то текст not_var{{ variable-name-1 }} продолжение текста.

Условные операторы

Вы можете включать в сборку документа тот или иной фрагмент текста в зависимости от значений переменных.

Например, чтобы собрать две версии документа для разных ОС используйте разметку вида:

{% if  OS == 'iOS' %}
Скачайте приложение в [App Store](https://www.apple.com/ios/app-store/).
{% else %}
Скачайте приложение в [Google Play](https://play.google.com).
{% endif %}

Фильтры

Важно! Перед и после оператора фильтра обязательно ставить пробел

Переменные в presets.yaml для примеров ниже:

default:
  user:
    name: Alice
  users:
    - Alice
    - Mark
capitalize
Hello {{ user.name | capitalize }}! => Hello Alice!
length
{{ users | length }} => 2
{{ user.name | length }} | length => 5

Циклы

Переменные в presets. yaml для примеров ниже:

default:
  users:
    - Alice
    - Mark
Примеры циклов
Prefix {% for user in users %} {{user}} {% endfor %} Postfix
Prefix Alice Mark Postfix

Prefix
{% for user in users %}
{{user}}
{% endfor %}
Postfix
Prefix
Alice
Mark
Postfix

Prefix {% for user1 in users %} {% for user2 in users %} {{user1}}+{{user2}} {% endfor %} {% endfor %} Postfix
Prefix Alice+Alice Alice+Mark Mark+Alice Mark+Mark Postfix

Функции

Переменные в presets.yaml для примеров ниже:

default:
  user:
    name: Pasha
slice
Hello M{{ user.name.slice(1) }}! => Hello Masha!

Hello M{{ user.name.slice(1, 2) }}sha! => Hello Masha!

Метаданные

В начале файла можно добавить метаданные в формате yaml.

---
title: Заголовок
description: Описание
---

Якорь ссылка в статье html

Ссылка html якорь, по комментариям на сайте rtr24. ru, используется крайне редко начинающими вебмастерами. Хотя для seo оптимизации сайта, использование якорей очень важно. Причина же, по которой люди не ставят ссылок якорей (anchor), заключается попросту в незнании того, что такое этот якорь и с чем едят «anchor». И надо признать, есть где запутаться в этих якорях.

Итак по порядку. Anchor, анкор, якорь, ссылка html якорь, якорь ссылка — такими словами называют две вещи в html. И каждое название будет правильным в обоих случаях.

Ведь, «anchor», хоть и читается «а`нкё» и больше все же похоже на «анкер», с ударением на первый слог (все слышали про анкерные болты например), но в русском языке вебмастеров, прижилось слово «анкор», с ударением на последнюю гласную. Причина здесь проста.

Грамотное английское «anchor», с переводом «якорь» и произношением «а`нкё», русские сеошники заменили на уже знакомое на слух слово «анкор» (известное всем по названию кинофильма «Анкор, еще анкор!»), считая слова тождественными.

Однако, в названии фильма использовалось французское слово «encore», которое хотя и произносят как «анкор», но имеет совсем другое значение. Если говорить точно, то переводится оно «еще, еще больше, опять, снова», делая название кино попросту глупым. «Анкор, еще анкор!», «Еще, еще еще!», масло масляное получается.

В итоге, в российском сайтостроении мы имеем

anchor = якорь = анкор

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

Итак с грамматикой мы разобрались, переходим к практике использования анкоров.

 

1. Анкор. Когда вы ставите обычную ссылку, она выглядит так 

Текст о seo оптимизации «Как поставить <a title=»тайтл» href=»https://rtr24.ru»>анкор, якорь</a> и для чего он нужен?»

Видимая часть ссылки, и есть анкор (якорь). И хотя ее можно назвать и анкором и якорем, однако принято называть эту часть обычной ссылки, просто анкором.

Кстати во всех ссылках очень важно прописывать тайтлы (title). Они могут совпадать с названием статьи, на которую ведет ссылка или содержать ключевики той статьи. Много полезного про тайтлы, вы почерпнете из моей работы «Идеальная длина title».

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

 Итак, если у вас Joomla и вы установили редактор статей Tiny MCE в положение «Расширенный» (я  советую), то при создании нового материала, вы увидите такую картину.

 

Вот она и есть кнопка назначения якоря. Смело нажимаем на нее. Видим следующее окошко.   loadposition vteleverh}

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

Иногда в Joomla случается конфуз и она не принимает имена якорей на русским языке. Отважно пишем название якоря латинскими буквами, по большому счету оно не имеет значения, главное чтоб вы смогли потом прочитать и понять, куда ведет этот якорь.

 

a) Определили место где нужно поставить якорь. Нажали на «Якорь» в редакторе, написали название для якоря.

б) В любой статье вашего сайта («Как правильно писать статью»), если вам нужно поставить ссылку на тот материал, что помечен у вас якорем, вы делаете ссылку как обычную html ссылку. Но! Смотрим на картинку.

Вместо url в обычной ссылке, вы выбираете в выпадающем списке «Anchors», нужный вам якорь.

Внимание!

Графа «Anchors» с якорями вашего сайта, появится у вас только тогда, когда будет создан хотя бы один якорь.

Теперь, когда вы знаете все о якорях и анкорах, вы сможете более рационально ставить ссылки на своем сайте, такая работа безусловно только увеличит его вес и вы сможете зарабатывать намного больше. Используйте проверенные партнерки которые платят, пишите статьи в Блогун («Как заработать на своем блоге в Блогуне»), используйте эротический трафик, монетезируйте свой сайт разными способами.

И якоря со ссылками html, вам в этом помогут.

Как создавать якорные ссылки в WordPress (без плагина)

Вы ищете простой способ добавить якорные ссылки в свои сообщения и страницы WordPress? Якорные ссылки — отличный способ добавить оглавление к сообщениям, помогая пользователям перемещаться по длинным статьям. Вы также можете использовать якорные ссылки, чтобы помочь вам появляться в определенных результатах поиска, чтобы улучшить свой рейтинг.

Эта статья покажет вам, как легко создавать якорные ссылки в WordPress.

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