Компоненты пользовательского интерфейса и типографика

Используете v2.6? Ищете документацию для v2.6? Ознакомьтесь со старой документацией.

Оглавление

Похожие посты

Большинство этих функций можно использовать только в режиме 'HTML-вид', и вы не можете переключиться в режим 'Режим написания', используя некоторые из этих функций.

1. В режиме редактора поста нажмите значок в правом нижнем углу заголовка.
2. Появятся два варианта: HTML-вид и Режим написания.
3. Выберите 'HTML-вид'.
4. Скопируйте и вставьте код компонента туда, где вы хотите его добавить, и внесите необходимые изменения.

Абзац

Используйте тег p для добавления абзацев в статью.

<!--[ Абзац ]-->
<p>Это абзац</p>

Абзац с отступом

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

<!--[ Абзац с отступом ]-->
<p class='pIndent'>Это абзац с отступом.</p>

Абзац с буквицей

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

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

<!--[ Абзац с буквицей ]-->
<p><span class='dropCap'>Э</span>то абзац с буквицей.</p>

Абзац с ссылкой на источник

Для написания списка ссылок или сносок в конце поста.

Источник:
www.example.com

<!--[ Абзац с ссылкой на источник ]-->
<p class='pRef'>Источник:<br> www.example.com</p>

Изображение в посте

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

<!--[ Стандартное изображение ]-->
<img class='full' alt='alt_здесь' width='1280' height='720' src='ссылка_на_изображение'/>

Совет!
Вы заметили имя класса full? Добавление этого имени класса к тегу img убирает горизонтальные отступы и адаптирует изображение под полную ширину экрана на мобильных устройствах.

Полезно знать:

• Мы рекомендуем добавлять атрибуты alt, width и height к тегам img.

Изображение с подписью

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

Подпись к изображению здесь! Где вы её искали?

<!--[ Изображение с подписью ]-->
<table class='tr-caption-container'>
  <tbody>
    <tr>
      <td>
        <img alt='alt_изображения' src='ссылка_на_изображение'/>
      </td>
    </tr>
    <tr>
      <td class='tr-caption'>подпись_здесь</td>
    </tr>
  </tbody>
</table>

Внимание!
Не следует вручную добавлять этот компонент в пост или страницу, так как это фрагмент HTML-кода, используемый Blogger для изображений с подписями. Поэтому мы рекомендуем использовать приведённый ниже подход при ручном добавлении компонента изображения с подписью.

Возможно, вы задаётесь вопросом, зачем использовать тег table просто для добавления подписи к изображению, хотя существуют HTML-теги figure и figcaption?

Позвольте мне объяснить! Это связано с тем, что когда мы добавляем подпись к изображению через редактор постов Blogger, а не вручную, редактируя HTML, он использует приведённый выше фрагмент кода для изображения с подписью. Поэтому важно поддерживать этот формат.

Вы также можете использовать теги figure и figcaption вместо тега table, как показано ниже.

Подпись к изображению с использованием тега figcaption.

<!--[ Изображение с подписью ]-->
<figure>
  <img alt='alt_изображения' src='ссылка_на_изображение'/>
  <figcaption>подпись_здесь</figcaption>
</figure>

Изображение с автоматическим лайтбоксом

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

Где вы ищете лайтбокс? Кликните на это изображение!

Полезно знать:

• Все изображения в посте автоматически получат функцию лайтбокса, если изображение обёрнуто в родительский контейнер с одним из классов lbx, separator, psImg, btImg, glImg или удовлетворяет одному из селекторов .pS .separator >a, .pS .tr-caption-container td >a, .pS .separator >img, .pS .tr-caption-container td >img, figure img.
• Если изображение с лайтбоксом обёрнуто в тег a, клик по изображению откроет ссылку только после показа лайтбокса.
• Чтобы явно отключить автоматическую функцию лайтбокса для конкретного изображения, добавьте атрибут data-lightbox='false' к тегу img.
• Чтобы явно отключить автоматическое отображение содержимого атрибута alt в лайтбоксе, добавьте атрибут data-caption='false' к тегу img.

Изображения с сеточным макетом

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

<!--[ Изображения с сеточным макетом ]-->
<div class='psImg grImg'>
  <img alt='alt_изображения' src='ссылка_на_изображение'/>
  <img alt='alt_изображения' src='ссылка_на_изображение'/>
  <img alt='alt_изображения' src='ссылка_на_изображение'/>
  <img alt='alt_изображения' src='ссылка_на_изображение'/>
</div>

Изображения с функцией "Показать всё"

Используется для скрытия некоторых изображений, которые будут показаны, когда пользователь нажмёт кнопку Показать всё. Функция "Показать всё" может быть активирована только один раз, изображения нельзя снова скрыть после её активации.

Показать всё

<!--[ Изображения с функцией "Показать всё" ]-->
<input hidden class='inImg' id='hideImg1' type='checkbox'>
<div class='psImg hdImg'>
  <img alt='alt_изображения' src='ссылка_на_изображение'/>
  <img alt='alt_изображения' src='ссылка_на_изображение'/>
  <img alt='alt_изображения' src='ссылка_на_изображение'/>
  
  <div class='btImg'>
    <!--[ Изображение, действующее как кнопка ]-->
    <img alt='alt_изображения' src='ссылка_на_изображение'/>
    
    <!--[ Кнопка для активации ]-->
    <label for='hideImg1' aria-label='Показать все изображения'>Показать всё</label>
  </div>

  <!--[ Скрытые изображения ]-->
  <div class='psImg shImg'>
    <img alt='alt_изображения' src='ссылка_на_изображение'/>
    <img alt='alt_изображения' src='ссылка_на_изображение'/>
    <img alt='alt_изображения' src='ссылка_на_изображение'/>
    <img alt='alt_изображения' src='ссылка_на_изображение'/>
  </div>
</div>

Изображения с прокруткой

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

<!--[ Изображения с прокруткой (Стиль 1) ]-->
<div class='glImg'>
  <img alt='alt_изображения' src='ссылка_на_изображение'/>
  <img alt='alt_изображения' src='ссылка_на_изображение'/>
  <img alt='alt_изображения' src='ссылка_на_изображение'/>
  <img alt='alt_изображения' src='ссылка_на_изображение'/>
</div>

Совет!
Вы можете изменить высоту изображения с прокруткой, добавив один из классов h150, h200, h250 к элементу div.galWrp.

Этот стиль прокрутки будет активен только в мобильном виде. Пожалуйста, попробуйте открыть эту страницу на мобильном устройстве.

<!--[ Изображения с прокруткой (Стиль 2) ]-->
<div class='psImg scImg scrlH'>
  <img alt='alt_изображения' src='ссылка_на_изображение'/>
  <img alt='alt_изображения' src='ссылка_на_изображение'/>
  <img alt='alt_изображения' src='ссылка_на_изображение'/>
  <img alt='alt_изображения' src='ссылка_на_изображение'/>
</div>

Ленивая загрузка изображений

Полезно для отложенной загрузки изображений, чтобы повысить показатель PageSpeed блога. Изображение загрузится только тогда, когда пользователь прокрутит страницу до области с изображением. Эта функция использует @aFarkas/lazysizes для ленивой загрузки изображений.

<!--[ Ленивая загрузка изображений ]-->
<img class='lazyload' alt='название_изображения' data-src='ссылка_на_изображение' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>

Внимание!
Никогда не используйте ленивую загрузку для первого изображения в посте. Это может привести к неожиданным последствиям.
Также рекомендуется не использовать этот метод вручную, вместо этого вы можете включить Ленивую загрузку изображений в настройках блога. Это автоматически загрузит изображения с ленивой загрузкой.

Внешняя ссылка

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

Внешняя ссылка

<a class='extL' href='ссылка_здесь' rel='nofollow noreferrer noopener' target='_blank'>название_ссылки</a>

Альтернативный стиль:

Внешняя ссылка

<a class='extL alt' href='ссылка_здесь' rel='nofollow noreferrer noopener' target='_blank'>название_ссылки</a>

Кнопка

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

Текст кнопки

<!--[ Кнопка ]-->
<a class='button' href='ссылка_здесь'>название_ссылки</a>

Текст кнопки

<!--[ Контурная кнопка ]-->
<a class='button ln' href='ссылка_здесь'>название_ссылки</a>

Скачать

<!--[ Кнопка с иконкой загрузки ]-->
<a class='button' href='ссылка_здесь'><i class='icon dl'></i>название_ссылки</a>

Демо

<!--[ Кнопка с иконкой демо ]-->
<a class='button' href='ссылка_здесь'><i class='icon demo'></i>название_ссылки</a>

Ссылка для скачивания

Предоставляет пользователям информацию о скачиваемых файлах.

имя_файла.zip 200КБ

<!--[ Блок загрузки ]-->
<div class='dlBox'>
  <!--[ Измените атрибут data-text='...', чтобы добавить новый тип файла ]-->
  <span class='fT' data-text='zip'></span>
  <div class='fN'>
    <!--[ Имя файла ]-->
    <span>имя_файла.zip</span>
    <span class='fS'>200КБ</span>
  </div>

  <!--[ Ссылка для скачивания (измените атрибут href='...', чтобы добавить ссылку для скачивания) ]-->
  <a class='button' aria-label='Скачать' href='ссылка_здесь' rel='nofollow noreferrer noopener' target='_blank'><i class='icon dl'></i></a>
</div>

Цитата

Две вещи бесконечны: Вселенная и человеческая глупость; и я не уверен насчёт Вселенной.

Альберт Эйнштейн

<!--[ Стандартная цитата ]-->
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.</p>
  <span>Аноним</span>
</blockquote>

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

Бернард М. Барух

<!--[ Цитата (Стиль 1) ]-->
<blockquote class='s1'>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.</p>
  <span>Аноним</span>
</blockquote>

Я понял, что люди забудут, что вы сказали, люди забудут, что вы сделали, но люди никогда не забудут, как вы заставили их чувствовать себя.

Майя Анжелу

<!--[ Цитата (Стиль 2) ]-->
<blockquote class='s2'>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.</p>
  <span>Аноним</span>
</blockquote>

Блок заметки

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

Информация!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.

<!--[ Заметка (информация) ]-->
<p class='note'><b>Информация!</b><br/>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>

Внимание!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.

<!--[ Заметка (предупреждение) ]-->
<p class='note wr'><b>Внимание!</b><br/>
  Lorem ipsum dolor, sit amet consectetur adipisicing elit.
</p>

Оповещение

Аналогично блоку заметки, единственное отличие в том, что оповещение имеет другой стиль и больше вариантов:

По умолчанию Простое оповещение по умолчанию - Lorem ipsum dolor sit amet.

<!--[ Оповещение по умолчанию ]-->
<div class='alert'><b>По умолчанию</b>
  Простое оповещение по умолчанию - Lorem ipsum dolor sit amet.
</div>

Контур Простое оповещение с контуром - Lorem ipsum dolor sit amet.

<!--[ Оповещение с контуром ]-->
<div class='alert outline'><b>Контур</b>
  Простое оповещение с контуром - Lorem ipsum dolor sit amet.
</div>

Информация! Простое информационное оповещение - Lorem ipsum dolor sit amet.

<!--[ Оповещение (информация) ]-->
<div class='alert info'><b>Информация!</b>
  Простое информационное оповещение - Lorem ipsum dolor sit amet.
</div>

Предупреждение! Простое оповещение-предупреждение - Lorem ipsum dolor sit amet.

<!--[ Оповещение (предупреждение) ]-->
<div class='alert warning'><b>Предупреждение!</b>
  Простое оповещение-предупреждение - Lorem ipsum dolor sit amet.
</div>

Успех! Простое оповещение об успехе - Lorem ipsum dolor sit amet.

<!--[ Оповещение (успех) ]-->
<div class='alert success'><b>Успех!</b>
  Простое оповещение об успехе - Lorem ipsum dolor sit amet.
</div>

Ошибка! Простое оповещение об ошибке - Lorem ipsum dolor sit amet.

<!--[ Оповещение (ошибка) ]-->
<div class='alert error'><b>Ошибка!</b>
  Простое оповещение об ошибке - Lorem ipsum dolor sit amet.
</div>

Информация! Простое информационное оповещение с контуром - Lorem ipsum dolor sit amet.

<!--[ Оповещение (информация с контуром) ]-->
<div class='alert info outline'><b>Информация!</b>
  Простое информационное оповещение с контуром - Lorem ipsum dolor sit amet.
</div>

Предупреждение! Простое оповещение-предупреждение с контуром - Lorem ipsum dolor sit amet.

<!--[ Оповещение (предупреждение с контуром) ]-->
<div class='alert warning outline'><b>Предупреждение!</b>
  Простое оповещение-предупреждение с контуром - Lorem ipsum dolor sit amet.
</div>

Успех! Простое оповещение об успехе с контуром - Lorem ipsum dolor sit amet.

<!--[ Оповещение (успех с контуром) ]-->
<div class='alert success outline'><b>Успех!</b>
  Простое оповещение об успехе с контуром - Lorem ipsum dolor sit amet.
</div>

Ошибка! Простое оповещение об ошибке с контуром - Lorem ipsum dolor sit amet.

<!--[ Оповещение (ошибка с контуром) ]-->
<div class='alert error outline'><b>Ошибка!</b>
  Простое оповещение об ошибке с контуром - Lorem ipsum dolor sit amet.
</div>

Таблица

Использование таблиц в HTML немного сложнее, мы рекомендуем вам больше узнать о таблицах HTML перед их использованием. Ниже приведён пример таблицы с данными:

Имя	Должность	Офис	Возраст	Дата начала	Зарплата
Tiger Nixon	Системный архитектор	Эдинбург	61	2011/04/25	$320,800
Garrett Winters	Бухгалтер	Токио	63	2011/07/25	$170,750
Ashton Cox	Младший технический автор	Сан-Франциско	66	2009/01/12	$86,000

<!--[ Таблица ]-->
<div class='table sticky bordered stripped hovered'>
  <table>
    <thead>
      <tr>
        <th>Имя</th>
        <th>Должность</th>
        <th>Офис</th>
        <th>Возраст</th>
        <th>Дата начала</th>
        <th>Зарплата</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Tiger Nixon</td>
        <td>Системный архитектор</td>
        <td>Эдинбург</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
      </tr>
      <tr>
        <td>Garrett Winters</td>
        <td>Бухгалтер</td>
        <td>Токио</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$170,750</td>
      </tr>
      <tr>
        <td>Ashton Cox</td>
        <td>Младший технический автор</td>
        <td>Сан-Франциско</td>
        <td>66</td>
        <td>2009/01/12</td>
        <td>$86,000</td>
      </tr>
    </tbody>
  </table>
</div>

Для стилей таблиц вы можете добавить класс к элементу .table, включая:

• cborder : граница для контейнера таблицы.
• bordered / noborder (выберите один): граница содержимого таблицы.
• clr / primary / warning / success / error : фон заголовка таблицы.
• stripped : стиль чередующихся строк таблицы.
• hovered : эффект при наведении на строку таблицы.
• mh100 / mhvh / mh200 / mh300 : максимальная высота таблицы.
• sp5 / sp10 / sp20 : отступы содержимого таблицы.

stripped и hovered классы были добавлены в версии 3.1.0

Шаги

Используется для определения шагов в руководстве.

1. шаг_1
2. шаг_2
3. шаг_3

<!--[ Шаги ]-->
<ol class='steps'>
  <li>шаг_1</li>
  <li>шаг_2</li>
  <li>шаг_3</li>
</ol>

Блок кода

Используется для определения строк компьютерного кода (HTML, CSS, JavaScript и т.д.) в постах.

<pre data-comment='.html' data-source='src/index.html'><code>экранированный_код_здесь</code></pre>

Тег code может использоваться для определения встроенного кода, например: экранированный_код_здесь.

<code>экранированный_код_здесь</code>

Тег kbd может использоваться для определения ввода с клавиатуры, например: ⌘ + A.

<kbd>⌘ + A</kbd>

Внутри тега <code> часть текста может быть выделена с помощью обёртки в тег <mark>.

// примеры выделения
console.log("Привет, мир!");
console.log("Привет, мир!");
console.log("Привет, мир!");
console.log("Привет, мир!");
console.log("Привет, мир!");
console.log("Привет, мир!");
console.log("Привет, мир!");
console.log("Привет, мир!");
console.log("Привет, мир!");
console.log("Привет, мир!");
console.log("Привет, мир!");
console.log("Привет, мир!");
console.log("Привет, мир!");

// примеры кода с выделением
console.log("<mark>Привет, мир!</mark>");
console.log("<mark class='block'>Привет, мир!</mark>");
console.log("<mark class='gray'>Привет, мир!</mark>");
console.log("<mark class='red'>Привет, мир!</mark>");
console.log("<mark class='orange'>Привет, мир!</mark>");
console.log("<mark class='blue'>Привет, мир!</mark>");
console.log("<mark class='green block'>Привет, мир!</mark>");
console.log("<mark class='gold'>Привет, мир!</mark>");
console.log("<mark class='purple'>Привет, мир!</mark>");
console.log("<mark data-before='Сообщение перед'>Привет, мир!</mark>");
console.log("<mark class='block red' data-after='Сообщение после'>Привет, мир!</mark>");
console.log("<mark class='green' data-before='$'>Привет, мир!</mark>");
console.log("<mark data-after='$'>Привет, мир!</mark>");

Полезно знать:

• Внутри тегов <code> необходимо использовать экранированный код, что означает замену всех символов & на &, < на < и > на >.
• Все блоки кода автоматически подсвечиваются с использованием библиотеки @highlightjs/highlight.js, одной из популярных библиотек для подсветки кода, и пользовательского плагина. Кнопка копирования и номера строк также добавляются автоматически.
• Библиотека загружается только в том случае, если в посте есть хотя бы один блок кода, чтобы избежать лишних запросов.
• Встроенные коды также подсвечиваются.
• Библиотека автоматически определяет наиболее подходящий язык для вашего кода и подсвечивает его, но иногда может ошибаться.
• Если библиотека неправильно определяет язык или вы хотите явно указать язык кода, вы можете добавить класс в формате language- с указанием языка к элементу <code>. Например, если ваш код написан на JavaScript, вы можете добавить класс language-js или language-javascript к элементу <code>.

Многотабовый блок кода

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

[HTML] экранированный_код_здесь

[CSS] экранированный_код_здесь

[JS] экранированный_код_здесь

[JSON] экранированный_код_здесь

<!--[ Многотабовый блок кода с подсветкой ]-->
<div class='pre tabs'>
  <!--[ Функция активации ]-->
  <input id='preT1-1' type='radio' name='preTab1' checked=''/>
  <input id='preT1-2' type='radio' name='preTab1'/>
  <input id='preT1-3' type='radio' name='preTab1'/>
  <input id='preT1-4' type='radio' name='preTab1'/>
  
  <!--[ Заголовок/название ]-->
  <div>
    <!--[ Измените атрибут data-text='...', чтобы заменить название ]-->
    <label for='preT1-1' data-text='HTML'></label>
    <label for='preT1-2' data-text='CSS'></label>
    <label for='preT1-3' data-text='JS'></label>
    <label for='preT1-4' data-text='JSON'></label>
  </div>

  <!--[ Содержимое ]-->
  <pre class='preC1-1' data-source='src/index.html'><code>[HTML] экранированный_код_здесь</code></pre>
  <pre class='preC1-2' data-source='src/style.css'><code>[CSS] экранированный_код_здесь</code></pre>
  <pre class='preC1-3' data-source='src/main.js'><code>[JS] экранированный_код_здесь</code></pre>
  <pre class='preC1-4' data-source='src/rules.json'><code>[JSON] экранированный_код_здесь</code></pre>
</div>

Спойлер

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

Спойлер:

текст_здесь

<!--[ Спойлер ]-->
<details class='sp'>
  <summary data-show='Показать всё' data-hide='Скрыть всё'>Спойлер:</summary>
  <div>
    <p>текст_здесь</p>
  </div>
</details>

Аккордеон

Определяет дополнительное содержимое, которое пользователь может открывать и закрывать по своему желанию в группах, обычно используется для списка вопросов или FAQ (Часто задаваемые вопросы).

Заголовок_здесь

текст_здесь

<!--[ Аккордеон ]-->
<details class='ac'>
  <summary>Заголовок_здесь</summary>
  <div>
    <p>текст_здесь</p>
  </div>
</details>

Заголовок_здесь

текст_здесь

<!--[ Аккордеон (Альтернативный) ]-->
<details class='ac alt'>
  <summary>Заголовок_здесь</summary>
  <div>
    <p>текст_здесь</p>
  </div>
</details>

Заголовок_здесь

текст_здесь

Заголовок_здесь

текст_здесь

Заголовок_здесь

текст_здесь

Заголовок_здесь

текст_здесь

<!--[ Аккордеон (Группированный) ]-->
<div class='showH'>
  <details class='ac'>
    <summary>Заголовок_здесь</summary>
    <div>
      <p>текст_здесь</p>
    </div>
  </details>
  <details class='ac'>
    <summary>Заголовок_здесь</summary>
    <div>
      <p>текст_здесь</p>
    </div>
  </details>
  <details class='ac alt'>
    <summary>Заголовок_здесь</summary>
    <div>
      <p>текст_здесь</p>
    </div>
  </details>
  <details class='ac alt'>
    <summary>Заголовок_здесь</summary>
    <div>
      <p>текст_здесь</p>
    </div>
  </details>
</div>

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

Страница с часто задаваемыми вопросами (FAQ) содержит список вопросов и ответов, относящихся к определённой теме. Правильно размеченные страницы FAQ могут быть отображены в виде расширенных результатов в поисковой выдаче и в Google Assistant, что может помочь вашему сайту привлечь нужных пользователей.

<!--[ Аккордеон (FAQPage) ]-->
<div class='showH' itemscope itemtype='https://schema.org/FAQPage'>
  <details class='ac' itemscope itemprop='mainEntity' itemtype='https://schema.org/Question'>
    <summary itemprop='name'>Заголовок_здесь</summary>
    <div itemscope itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
      <p itemprop='text'>текст_здесь</p>
    </div>
  </details>
  <details class='ac' itemscope itemprop='mainEntity' itemtype='https://schema.org/Question'>
    <summary itemprop='name'>Заголовок_здесь</summary>
    <div itemscope itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
      <p itemprop='text'>текст_здесь</p>
    </div>
  </details>
  <details class='ac alt' itemscope itemprop='mainEntity' itemtype='https://schema.org/Question'>
    <summary itemprop='name'>Заголовок_здесь</summary>
    <div itemscope itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
      <p itemprop='text'>текст_здесь</p>
    </div>
  </details>
  <details class='ac alt' itemscope itemprop='mainEntity' itemtype='https://schema.org/Question'>
    <summary itemprop='name'>Заголовок_здесь</summary>
    <div itemscope itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
      <p itemprop='text'>текст_здесь</p>
    </div>
  </details>
</div>

Внимание!
Вы не можете использовать этот компонент более чем в одном месте в одном посте или на странице. Рекомендуется объединить все FAQ в один компонент.

Оглавление

Оглавление (TOC, сокращение от Table of Contents) помогает пользователям быстро перемещаться по содержимому веб-страницы, предоставляя прямые ссылки на различные разделы. Это особенно полезно для длинных статей или страниц с несколькими разделами.

Существует два способа определения оглавления.

Ручное оглавление

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

Автоматическое оглавление

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

Оглавление

<!--[ Автоматическое оглавление ]-->
<details class='sp toc' open=''>
  <summary data-show='Показать всё' data-hide='Скрыть всё'>Оглавление</summary>  
  <div class='aToc'></div>
</details>

Похожие посты

Похожие посты — это ссылки или предложения контента на веб-странице, которые ведут на статьи или темы, связанные с текущей, помогая пользователям находить больше релевантной информации.

Существует два способа определения этого компонента.

Ручные похожие посты

Ручные похожие посты выбираются и добавляются автором на основе релевантности, что даёт полный контроль над предложениями.

Возможно, вам будет интересно прочитать:

• название_поста
• название_поста
• название_поста

<div class='pRelate'>
  <!--[ Заголовок похожих постов ]-->
  <b>Возможно, вам будет интересно прочитать:</b>
  <ul>
    <li><a href='ссылка_на_пост'>название_поста</a></li>
    <li><a href='ссылка_на_пост'>название_поста</a></li>
    <li><a href='ссылка_на_пост'>название_поста</a></li>
  </ul>
</div>

Автоматические похожие посты

Автоматические похожие посты генерируются алгоритмами на основе категорий, что экономит время, но с меньшей точностью.

Похожие посты

<!--[ Автоматические похожие посты ]-->
<details class='sp arp' open=''>
  <summary data-show='Показать всё' data-hide='Скрыть всё'>Похожие посты</summary>  
  <div class='aRel'></div>
</details>

Полезно знать:

• Эта функция показывает список постов с определённой меткой.
• Чтобы указать метку, добавьте атрибут data-label='Моя метка' к элементу .aRel.
• Если атрибут data-label не указан или нет постов с указанной меткой, то будет использована случайная метка из текущего поста (если используется в посте) или случайная метка из блога (если используется на странице).
• Пост, который просматривается, будет исключён из списка.
• Чтобы установить максимальное количество постов, добавьте атрибут data-max-posts='6', где 6 — это максимальное количество постов.

Ленивая загрузка YouTube

Загружает iframe только после нажатия кнопки воспроизведения, в противном случае показывает изображение-заглушку, которое загружается с использованием @aFarkas/lazysizes.

<!--[ Ленивая загрузка YouTube ]-->
<div class='lazyYt' data-embed='video_id'></div>

Отложенная загрузка YouTube

Откладывает загрузку iframe с использованием @aFarkas/lazysizes.

<!--[ Отложенная загрузка YouTube ]-->
<div class='videoYt'>
  <iframe class='lazyload' data-src='https://www.youtube.com/embed/video_id' title='Проигрыватель видео YouTube' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share' referrerpolicy='strict-origin-when-cross-origin' allowfullscreen=''></iframe>
</div>

Подзаголовок заголовка

Добавляет подзаголовок рядом с заголовком в определённом посте или на странице.

<style>
  /* Пользовательский подзаголовок заголовка */
  .headH::after{content:'Подзаголовок'}
</style>

Основы

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

Явное указание сниппета поста

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

<!--[ Явное указание сниппета поста ]-->
<div hidden aria-hidden='true'>сниппет_поста</div>

<!--more-->

Явное указание миниатюры поста

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

<!--[ Явное указание миниатюры поста ]-->
<!--[
  <div class='separator'><img src='ссылка_на_изображение'/></div>
]-->

<!--more-->

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

<!--[ Явное указание сниппета поста ]-->
<div hidden aria-hidden='true'>сниппет_поста</div>

<!--[ Явное указание миниатюры поста ]-->
<!--[
  <div class='separator'><img src='ссылка_на_изображение'/></div>
]-->

<!--more-->

Хотите улучшить этот пост?
Если вы хотите предложить изменения, сообщить об опечатках или добавить больше объяснений в этот пост, не стесняйтесь связаться с нами.