Полное руководство по модулю Paragraphs в Drupal

За последние несколько месяцев мы работали со все большим количеством сайтов на Drupal 8. У всех этих проектов была одна общая черта... они использовали модуль Drupal Paragraphs.

Paragraphs — очень популярный модуль для обработки контента в Drupal 8.

Абзацы работают так же, как поля контента, но также предоставляют широкий спектр параметров для дизайна, макета и группировки вашего контента.

Если вы хотите выучить абзацы, это идеальное руководство! Читайте, смотрите и следуйте всем 10 частям этого руководства. К концу вы также будете использовать Paragraphs для всех своих сайтов!

Часть №1. Зачем использовать модуль Drupal Paragraphs?

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

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

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

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

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

Для этого руководства мы представим, что создаем веб-сайт под названием «Бесплатные советы по жизни», который предлагает информационный контент в виде статей. Вы можете продолжить работу на любом другом веб-сайте разработки, если хотите, внося небольшие коррективы по мере необходимости.

Часть 2. Установка модуля абзацев Drupal

Для этого проекта мы рекомендуем использовать пустой тестовый сайт Drupal 8.

• Нажмите здесь, чтобы загрузить модуль Paragaphs.
• Для Paragraphs также требуется модуль Entity Reference Revisions.
• После того, как вы загрузили эти два модуля и поместили их в каталог /modules, установите их для своего сайта.

Часть №3. Создание первых абзацев

Абзацы работают, позволяя нам создавать так называемые «типы абзацев», которые в нашем случае будут коллективно заменять поле «Тело» любого заданного типа контента, с которым мы хотим использовать эти типы абзацев.

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

В нашей демонстрации мы заменим поле «Тело» стандартного типа контента «Статья» несколькими типами «Абзац».

Важно: Если вы тестируете это на сайте, на котором уже есть контент типа «Статья», не удаляйте поле «Тело» типа контента «Статья», как мы собираемся сделать в этой демонстрации. Если вы это сделаете, вы потеряете текст всех статей на своем веб-сайте. Если вы работаете с сайтом, на котором уже использовался тип контента «Статья», вам следует создать новый тип контента, на котором можно протестировать модуль «Абзацы».

На нашем сайте «Life Advice for Free» мы начнем настройку абзацев, отредактировав тип контента «Статья».

• Перейдите в раздел Структура > Типы контента.
• Нажмите кнопку «Управление полями» в строке «Статья».
• Теперь вы окажетесь на странице «Управление полями» для типа контента «Статья». На этой странице щелкните стрелку раскрывающегося списка рядом с кнопкой «Изменить» в строке «Тело» и нажмите «Удалить».
• Подтвердите удаление на следующей странице.

Теперь мы создадим наш первый тип Paragraphs.

• Перейдите к Структуре > Типы абзацев.
• Нажмите «Добавить тип абзаца».
• На следующей странице нам нужно указать метку для этого типа абзацев. Для нашей демонстрации мы назовем его «Основной текст», так как мы собираемся использовать его в качестве основной части нашего контента.
• Нажмите «Сохранить поля и управлять ими».
• На этой странице «Управление полями» нажмите «Добавить поле».
• В следующем раскрывающемся списке «Добавить новое поле» прокрутите вниз и в разделе «Текст» выберите «Текст (форматированный, длинный, с резюме)». Это похоже на поле «Тело» по умолчанию, которое часто используется в типе контента «Статья» — область длинного текста с редактором WYSIWYG.
• На следующей странице «Добавить поле» мы также назовем это конкретное поле «Основной текст».
• Нажмите «Сохранить и продолжить».
• Далее мы попадаем на вкладку «Настройки поля» этого поля. Для любого из этих полей мы можем указать допустимое количество значений. Может быть полезно разрешить более 1 значения для некоторых полей, особенно тех, которые принимают отдельные незаметные фрагменты информации, такие как даты, файлы изображений или краткие текстовые поля для такой информации, как имена, но для длинных текстовых областей. , часто нет необходимости указывать дополнительные значения, поскольку абзацы можно просто размещать один за другим в одной текстовой области. В этом примере оставим настройки по умолчанию «Ограничено» и 1.
• Нажмите «Сохранить настройки поля».
• На следующей странице «Настройки основного текста для основного текста» мы можем сохранить все значения по умолчанию. Обратите внимание, что пользователи по-прежнему будут иметь все параметры форматирования, которые они обычно используют в текстовом редакторе WYSIWYG. Мы ничего у них не отнимаем. Вместо этого мы предоставим им дополнительный улучшенный метод добавления определенных типов элементов к их содержимому.
• Нажмите «Сохранить настройки».
• Теперь вы увидите новые поля внутри нового типа абзаца:

• На этой следующей странице щелкните вкладку «Управление отображением».
• В настоящее время этот тип абзацев имеет только одно поле — текстовое поле основного текста. Мы не хотим, чтобы метка отображалась вместе с текстом из этого поля, поэтому выберите «Скрытый» в столбце «Метка» для этого поля. Формат должен оставаться по умолчанию.
• Нажмите «Сохранить».

Теперь нам нужно добавить этот тип Paragraphs к типу контента Article, чтобы этот тип контента мог его использовать. Вот как мы это делаем:

• Перейдите к Структуре > Типы контента.
• Нажмите «Управление полями» для типа контента «Статья».
• Нажмите «Добавить поле».
• Чтобы использовать наш новый тип «Абзац» с этим полем, откройте раскрывающийся список «Выберите тип поля» и выберите «Абзац» в разделе «Справочные версии».
• После выбора «Абзац» укажите метку «Основная часть», потому что это то, что мы используем в качестве основной части нашего контента.
• Нажмите «Сохранить и продолжить».
• На следующей странице «Тип элемента для ссылки» должен быть установлен на «Абзац».
• «Разрешенное количество значений должно быть «Неограниченным». Выбрав «Неограниченно», мы можем вставлять это специальное поле, предоставляемое нашими настроенными типами абзацев, столько раз, сколько захотим. Это станет полезным, когда мы начнем вставлять другие вещи, помимо текста, в тело содержимого.
• Нажмите «Сохранить настройки поля».
• На следующей странице «Настройки основного текста для статьи» нам нужно сделать наш ранее созданный тип абзацев доступным для этого поля. Для этого установите флажок «Основной текст» в разделе «Тип» в нижней части страницы. Вот как мы делаем этот конкретный тип абзаца доступным в этом поле. Когда мы добавим на наш сайт больше типов абзацев, мы сможем вернуться и сделать их доступными и для этого поля.

• Нажмите «Сохранить настройки», и сайт должен вернуть вас на страницу «Управление полями» для типа контента.

Теперь мы закончили замену предыдущего (по умолчанию) поля «Тело» нашим новым полем «Тело», в котором используются абзацы, и, в частности, тип абзацев «Основной текст», который мы создали. Теперь мы настроим еще несколько параметров, чтобы он выглядел так, как мы хотим.

• Для начала мы перейдем на вкладку «Управление отображением формы», чтобы разместить новое поле «Основная часть» на видном месте на странице создания контента для статей.
• На этой странице прокрутите вниз, чтобы найти наше новое поле «Тело», и перетащите его в верхнюю часть списка, чуть ниже «Заголовок».
• Нажмите «Сохранить».

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

• Нажмите «Управление отображением».
• Снова вы найдете Тело внизу. Перетащите его вверху, чуть ниже изображения. Мы будем рассматривать это поле изображения как большое вступительное или начальное изображение для наших статей, а не как часть самого контента.
• Нажмите «Сохранить».

На этом этапе мы завершили настройку нашего типа контента «Статья», используя это новое поле «Абзацы». Теперь пришло время создать контент, чтобы протестировать его.

• Перейдите на страницу контента вашего сайта и нажмите «Добавить контент».
• Нажмите «Статья».
• Вы можете ввести любое название для своей статьи. Для этого примера назовем нашу статью «Как завести 100 друзей».
• Теперь, что касается поля «Текст», вы, возможно, заметили, что оно выглядит немного по-другому, хотя оно по-прежнему использует то же самое поле полной формы с редактором WYSIWYG, как и раньше. Разница теперь в том, что у нас есть охватывающее поле Body, которое в настоящее время содержит одно текстовое поле Body. Прямо под текстовым полем «Основной текст» вы должны увидеть кнопку «Добавить основной текст», которая позволяет нам добавить несколько полей. На данный момент в этом нет необходимости, потому что используемое в настоящее время длинное текстовое поле идеально подходит для ввода длинного текста, состоящего из нескольких абзацев, поэтому нам не нужно добавлять дополнительное поле, когда мы можем просто добавить больше текста в то же поле. . Позже, однако, мы увидим, что становится очень полезной возможность добавлять дополнительные поля абзацев, когда вы реализуете несколько типов абзацев на своем сайте. А пока просто введите абзац или два текста в текстовое поле основного текста.

Сохраните статью и просмотрите страницу так, как ее увидит любой посетитель.

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

Часть №4. Добавление вашего CSS в абзацы

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

Во многих реальных случаях вы, вероятно, будете работать с пользовательской темой или собственной подтемой, и в этом случае вы можете свободно редактировать ее. Для этого урока мы собираемся создать быструю и простую подтему темы Bartik по умолчанию, чтобы мы могли следовать передовым методам и добавлять собственный CSS, не редактируя сам Bartik. (Мы избегаем редактирования Bartik — или любой другой основной или предоставленной темы — напрямую, потому что, если мы сделаем это, а затем применим к этой теме выпущенное обновление, наши собственные модификации будут потеряны.) Если вы не знакомы с созданием подтем, это нормально. Мы не углубляемся в процесс, а вместо этого создаем прямую копию темы, к которой затем применим некоторые небольшие изменения. Это простой процесс.

• Чтобы создать подтему, вам сначала нужно получить доступ к серверу, на котором размещен ваш сайт, и перейти в корневой каталог вашего сайта.
• Оказавшись там, откройте каталог «темы». Здесь размещаются все пользовательские и добавленные темы и подтемы. В этом каталоге «темы» создайте новую папку с именем «custombartik» и перейдите в этот новый каталог.

Теперь нам нужно добавить пару файлов в этот новый каталог. Первым будет информационный файл темы. Откройте любое программное обеспечение для редактирования кода, которое вы используете для веб-разработки. Эти информационные файлы требуют нескольких частей информации: название проекта (название нашей темы), тип проекта (в данном случае «тема»), машинное имя базовой темы, если это подтема (как наша is), краткое описание и основную версию Drupal (7.x, 8.x и т. д.), для которой создана тема. Мы введем эту информацию в следующую форму (вводите все именно так, как видите):

 name: Custom Bartik type: theme base theme: bartik description: A custom theme based on the core Bartik theme core: 8.x

Убедитесь, что базовое имя темы «bartik» не пишется с заглавной буквы — это машиночитаемое имя с учетом регистра, которое нам нужно. Введя эту информацию, сохраните файл как «custombartik.info.yml». Важно, чтобы вы сохранили его с тем же именем, что и созданная вами папка, а затем «.info.yml».

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

• Откройте новый файл. В этом файле обратите внимание на отступы здесь. Каждый отступ должен быть табуляцией с двумя пробелами.
• Введите следующую информацию точно так, как она появляется:

 global-css:  version: 0.1  css:    theme:      css/style.css: {}

• Сохраните этот файл как «custombartik.libraries.yml». Этот файл, по сути, сообщает веб-сайту, что это версия темы 0.1 (мы могли бы указать любой номер версии) и что таблица стилей будет находиться внутри каталога нашей темы («custombartik») в css/style.css.

Теперь нам нужно вернуться к нашему информационному файлу, чтобы указать Drupal использовать информацию в контейнере «global-css», чтобы найти нашу таблицу стилей.

• Откройте файл custombartik.info.yml, добавьте пустую строку под строкой «core: 8.x», а затем добавьте следующую строку информации, снова сохранив отступ точно так, как показано ниже:

 libraries:  - custombartik/global-css

Теперь весь файл должен выглядеть так:

 name: Custom Bartik type: theme base theme: bartik description: A custom theme based on the core Bartik theme. core: 8.x libraries:  - custombartik/global-css

На данный момент мы готовы добавить эти два файла в нашу тему.

• Загрузите или скопируйте файлы custombartik.info.yml и custombartik.libraries.yml в папку custombartik.
• Теперь добавьте папку с именем «css» в вашу папку custombartik.
• Идите вперед и создайте пустой файл с именем «style.css» и загрузите его в этот каталог. Это будет наша таблица стилей.
• Однако прежде чем мы создадим нашу таблицу стилей, перейдите на страницу «Внешний вид» вашего веб-сайта.
• Прокрутите страницу вниз и в разделе «Удаленная тема» вы увидите свою пользовательскую тему Bartik. Если вы его не видите, убедитесь, что ваша папка custombartik и все ее файлы присутствуют в папке themes файловой системы вашего сайта.
• Нажмите «Установить и установить по умолчанию» под пользовательской темой, чтобы ваш сайт начал использовать вашу тему.
• Как только это будет сделано, перейдите на свою домашнюю страницу, и она должна выглядеть почти так же, как тема Bartik по умолчанию в Drupal, за исключением того, что вы, вероятно, увидите значок сломанного изображения вместо логотипа Drupal. Тема выглядит так же, как Bartik, потому что то, что мы создали, является подтемой Bartik без настройки. Если ваш сайт не похож на Bartik, и особенно если он выглядит как обычный HTML без стилей CSS, вернитесь к своим двум файлам .yml и убедитесь, что они выглядят точно так, как напечатано выше.

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

• Перейдите в корневой каталог вашего сайта и перейдите в core/themes/bartik. Здесь вы увидите файл с именем «logo.svg».
• Скопируйте этот файл в свою подтему (каталог «custombartik»).
• На своем веб-сайте перейдите в «Конфигурация»> «Производительность» и нажмите «Очистить все кеши». Теперь логотип должен появиться на вашем сайте.

Часть №5. Стилизация полей парагафов

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

• Перейдите к Структуре > Типы абзацев.
• Нажмите «Добавить тип абзаца».
• Мы установим метку для этого как «Центрированное изображение».
• Нажмите «Сохранить поля и управлять ими».
• На следующей странице нажмите «Добавить поле» и выберите «Изображение» в разделе «Добавить новое поле».
• Мы также назовем это поле «Изображение по центру».
• Нажмите «Сохранить и продолжить».
• На следующей странице мы можем сохранить все значения по умолчанию, поэтому нажмите «Сохранить настройки поля».
• Затем на странице «Настройки изображения по центру для изображения по центру» мы добавим несколько простых ограничений. Установите Максимальное разрешение изображения на 650x450 и минимальное разрешение на 50x50. Установите максимальный размер загрузки на 1 МБ и нажмите «Сохранить настройки». Эти конкретные настройки не являются обязательными для правильной работы типа «Абзацы»; мы включаем их просто для имитации реального сценария.

• Теперь нажмите на вкладку «Управление отображением», установите для метки изображения по центру значение «Скрытый» и нажмите «Сохранить».

На этом этапе нам нужно добавить этот тип «Абзац» в поле «Абзац», которое у нас есть в нашем типе контента «Статья».

• Перейдите в раздел Структура > Типы контента.
• Нажмите «Управление полями» рядом со «Статьей».

У вас может возникнуть соблазн нажать «Добавить поле» здесь для нашего нового типа абзацев «Изображение по центру», но помните, что это будет смешано с нашим пользовательским полем «Тело». Поэтому вместо этого мы добавим центрированное изображение в созданное нами поле Body.

• Нажмите «Изменить» рядом с «Тело» и прокрутите страницу вниз.
• Здесь вы увидите «Изображение по центру», доступное под нашим типом абзацев «Основной текст».
• Установите флажок рядом с «Изображение по центру», чтобы сделать его доступным для этого поля, и сохраните настройки.

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

• Перейдите на страницу «Материалы» и отредактируйте статью «Как завести 100 друзей».
• Давайте представим, что мы хотим добавить изображение по центру где-то в середине нашей статьи. Под текстовым полем «Основной текст» вы снова увидите кнопку «Добавить основной текст», чтобы добавить еще одно текстовое поле «Основной текст» в это поле «Основной текст». Однако, если вы щелкнете стрелку раскрывающегося списка рядом с этой кнопкой, вы увидите, что теперь также доступно «Изображение по центру». Нажмите эту кнопку и выберите файл изображения для загрузки сюда. Затем укажите альтернативный текст, поскольку он необходим.

Теперь мы добавили изображение к нашему содержимому, но в настоящее время оно размещено под всем текстом. Здесь мы будем использовать дополнительное текстовое поле Body.

• Нажмите «Добавить основной текст». Теперь у нас есть сверху вниз поле основного текста, центрированное изображение и еще одно поле основного текста. Обратите внимание, что, хотя вам не нужно делать это на этом этапе, вы можете свободно перемещать их с помощью стрелок перетаскивания в левом верхнем углу отдельных полей абзацев. Чтобы центрированное изображение оказалось зажатым между текстом статьи, просто перейдите к первому текстовому полю «Основной текст», выберите любой текст, который вы хотите разместить после изображения, и вырежьте этот текст из поля. Затем прокрутите вниз и вставьте этот вырезанный текст во второе текстовое поле основного текста (после изображения).
• Нажмите «Сохранить».

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

Часть №6. Управление абзацами с помощью CSS

Теперь мы перейдем к нашей пользовательской подтеме, чтобы начать стилизацию вывода созданных нами полей абзацев. На данный момент мы будем нацеливаться конкретно на поле «Изображение по центру», а не на охватывающее поле «Абзацы» из типа контента. Мы делаем это, потому что мы хотим, чтобы это поле было в центре в любое время, независимо от того, где оно находится. Таким образом, устанавливая правила непосредственно для «Центрированного изображения», мы избегаем установки ненужных множественных правил для нескольких контекстов.

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

• Откройте таблицу стилей вашей подтемы «custombartik» по адресу custombartik/css/style.css.
• Файл все еще должен быть пустым, но сейчас мы начнем добавлять в него правила. Мы будем держать вещи простыми на данный момент. Добавьте в таблицу стилей следующие строки кода:

 .node .field--name-field-centered-image {  float: none;  text-align: center; } .node .field--name-field-centered-image img {  max-width: 100%;  max-height: 450px; }

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

• После того, как вы добавите это в свой файл style.css, сохраните свои изменения (здесь и далее любая ссылка на сохранение изменений в вашей подтеме также предполагает загрузку или иное копирование файлов на ваш сервер, если вы не редактируете непосредственно на сервере на где находится ваш тестовый сайт).
• Затем на своем сайте перейдите в «Конфигурация»> «Производительность» и нажмите «Очистить все кеши», чтобы загрузить изменения темы на свой сайт.
• Вернитесь к статье, в которую вы добавили изображение по центру (или обновите страницу, если она уже открыта).

Изображение, размещенное с помощью типа абзацев «Изображение по центру», теперь должно располагаться по центру, а текст не плавает по обе стороны от него. Возможно, мы хотели бы добавить дополнительные стили, но для целей этого руководства мы сделали то, что хотели сделать на данный момент — убедиться, что вывод этого поля строго контролируется CSS, чтобы пользователи, добавляющие контенту не нужно самостоятельно стилизовать что-либо с помощью редактора WYSIWYG или других встроенных методов стилизации.

Часть №7. Абзацы с несколькими полями

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

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

Давайте создадим этот тип «Изображение по центру с подписью», чтобы попрактиковаться в создании типа «Абзацы» с несколькими полями. Как и следовало ожидать, этот процесс будет похож на процесс создания типа с одним полем.

• Перейдите к «Структура» > «Типы абзацев» и нажмите «Добавить тип абзацев».
• Назовите этот тип «Изображение по центру с подписью» и нажмите «Сохранить поля и управлять ими».
• Нажмите «Добавить поле».

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

• В разделе «Повторно использовать существующее поле» выберите «Изображение: field_centered_image».
• Сохраните метку «По центру изображения» и нажмите «Сохранить и продолжить».
• Нам нужно настроить наши параметры для границ размера изображения на следующей странице. Давайте еще раз введем максимальное разрешение изображения 650x450 пикселей и минимальное 50x50 пикселей. Установите максимальный размер загрузки 1 МБ.
• Нажмите «Сохранить настройки».

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

• Нажмите «Добавить поле» и добавьте новое поле типа «Текст (обычный)».
• Назовите это поле «Заголовок».
• Нажмите «Сохранить и продолжить».
• Для некоторых более длинных заголовков может потребоваться превышение установленного по умолчанию предела в 255 символов, поэтому измените максимальную длину этого поля на 500. Оставьте допустимое количество значений равным «Ограничено» и 1 и сохраните настройки.
• Все следующие настройки подписи по умолчанию подходят, поэтому сохраните настройки и на этой странице.

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

• Перейдите на вкладку «Управление отображением», чтобы мы могли удалить ненужные в данном случае метки полей.
• Выберите «Скрытый» в столбце «Ярлык» для обоих полей и нажмите «Сохранить».
• Если бы два поля были не в порядке, мы бы переставили их так, чтобы поле заголовка располагалось после поля изображения, но поскольку мы добавили поле заголовка последним, оно уже должно располагаться после поля изображения, как мы и хотели. .

Теперь мы добавим новый тип к нашему типу контента Article.

• Перейдите в «Структура» > «Типы контента» и нажмите «Управление полями» для статьи. Как и в случае, когда мы добавили наш первый тип абзаца «Изображение по центру» к типу контента, мы добавим этот новый тип абзаца в наше пользовательское поле «Тело», а не добавляя новое поле вообще.
• На странице «Управление полями» для статьи нажмите «Изменить» для основной части.
• Прокрутите страницу вниз и установите флажок рядом с «Изображение по центру с подписью», чтобы сделать этот тип доступным в этом поле «Тело».
• Нажмите «Сохранить настройки».
• Теперь этот новый тип абзацев будет доступен тем, кто добавляет статьи на сайт.

Давайте продолжим и создадим новую статью, используя это поле, а затем добавим наш стиль для управления ее отображением.

• Перейдите на страницу «Содержание», нажмите «Добавить содержимое» и нажмите «Статья».
• Назовем эту статью «Обучение игре на музыкальном инструменте может улучшить вашу жизнь».
• Нажмите «Добавить основной текст», чтобы начать добавлять текст в статью. Введите в это поле абзац или два текста.
• Затем под полем «Основной текст» щелкните стрелку раскрывающегося списка рядом с «Добавить основной текст» и выберите новую доступную опцию «Добавить изображение по центру с подписью». Обратите внимание, что теперь нам представлены два поля для ввода данных, как и следовало ожидать — поля «Изображение по центру» и «Подпись», которые принадлежат этому типу «Абзац».
• Загрузите любое изображение в поле изображения и укажите альтернативный текст.
• Затем введите «Les Paul — одна из самых легендарных гитар в рок-н-ролле».

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

• Под изображением и заголовком «Тип абзацев» еще раз нажмите «Добавить основной текст».
• Добавьте еще один абзац или два текста.
• Наконец, нажмите «Сохранить и опубликовать».

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

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

Мы центрируем наш текст подписи, потому что соответствующее изображение находится в центре, и чтобы обеспечить визуальное различие между этим текстом и текстом статьи, мы сделаем его полужирным (курсив также обеспечит этот эффект).

• Добавьте следующие строки кода в таблицу стилей и сохраните изменения:

{codecitation}.paragraph--type--centered-image-with-caption .field--name-field-caption {начертание шрифта: полужирный; выравнивание текста: по центру; {кодирование}

• Затем, чтобы увидеть наши изменения на сайте, перейдите в «Конфигурация»> «Производительность» и очистите все кеши.
• Вернитесь и обновите недавно созданную статью, и вы должны увидеть новые правила стиля в действии. Текст подписи теперь должен быть жирным и располагаться по центру под изображением.

Конечно, мы можем применить некоторые стили к этому типу абзацев в целом. Одна из причин сделать это — отделить элемент изображения/заголовка от окружающего текста и сделать визуально ясным, что его следует рассматривать как единое целое.

• Добавьте следующий код в таблицу стилей и сохраните изменения:

{codecitation}.paragraph--type--centered-image-with-caption {граница: 2px серая сплошная; поле: 4px 0; отступ: 4px; }

Теперь снова очистите кеш вашего сайта и обновите страницу статьи. Изображение и подпись должны выглядеть примерно одинаково; однако теперь весь блок изображения/подписи окружен серой рамкой и имеет небольшие поля сверху и снизу. Мы могли бы сделать больше, чтобы улучшить эстетику здесь (и рамка, скорее всего, не нужна), но это демонстрирует нашу способность обеспечивать стиль для отдельных компонентов типов Paragraphs, а также для типов Paragraphs в целом.

Теперь, если пользователь, не обладающий техническими знаниями, добавляет контент на сайт и хочет включить большое центрированное изображение с подписью, все, что ему нужно сделать, это выбрать это поле «Абзацы» при редактировании статьи, загрузить изображение и ввести текст в поле заголовка. Форматирование будет применено автоматически.

Часть №8. Использование целых узлов в абзацах

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

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

Во-первых, нам нужно создать тип контента для этих «информационных полей».

• Перейдите в «Структура» > «Типы контента» и нажмите «Добавить тип контента».
• Мы дадим этому типу контента имя «Информационное поле».
• Для описания напишите «Краткие фрагменты информации, используемые для дополнения статей».
• Click the “Display settings” tab, and uncheck “Display author and date information” because we don't want author and date information showing up within our Info box content.
• All of the rest of the default settings on this page should be fine. Click “Save and manage fields.”
• On the “Manage fields” page, we already have a basic long-form “Body” field, and this is all we want for this content type, since all pieces of content of this type should be short and simple. No changes are therefore necessary here. Click “Add field.”

Now that our content type has been created, we need to create the Paragraphs type that will reference it.

• Navigate to Structure > Paragraphs types, and click “Add paragraphs type.”
• Give this type the label “Info box.”
• On the “Manage fields” page, click “Add field".
• Beneath “Add a new field,” select “Content,” found under the “Reference” header.
• For the label, write “Info box,” and save.
• All defaults are fine on the next page, so click “Save field settings” there.
• On the next settings page, scroll down until you see the “Reference type” settings.
• Since we want to use this Paragraphs type to reference and display Info box nodes, check the box next to “Info box” beneath the “Content types” header. You can leave “Sort by” set to “None” because the field will autofill based on what we type and is not a list of all content of this type. Click “Save settings.”
• Back on the “Manage fields” page, click the “Manage display” tab.
• As we've been doing so far, we'll remove the label, so select “Hidden” under the label column for the Info box field.
• Then, because we want to display the entire Info box node whenever we choose to include an Info box in one of our articles, we need to select “Rendered entity” in the column labeled “Format.”
• Click “Save.”

It's time to make this Paragraphs type available to our Article content type.

• Navigate to Structure > Content types, and click the “Manage fields” button for the Article content type.
• As we've been doing, click “Edit” for the Body field.
• Scroll down and check the box next to “Info box” under the “Paragraph types” header.
• Save your settings.

With the structure side of this implementation complete, we'll now create some content to test it out. We'll start by adding our site's first “Info box.”

• Navigate to the “Content” page, and click “Add content.”
• Choose Info box.
• For the title, enter “A Short History of the Harp.”
• Enter two or three paragraphs of text into the Body field, and click “Save and publish.”

At this point we will divert briefly from Paragraphs. Currently the home page of our site lists all of our articles and info boxes, but we don't want the latter to appear on the homepage; we want them only placed within other articles. So, let's quickly edit the view for our homepage to exclude these pieces of content.

• You can either click the “Edit view” icon (which is displayed as a pencil icon) on the top right corner of the view area of the homepage.
• Navigate to Structure > Views, and edit the “Frontpage” view.
• On the view's settings page, next to the “Filter criteria” header, click “Add.”
• Select “Content type,” and then click “Apply (all displays).”
• For the filter criterion, select “Is not one of” under “Operator,” and under “Content types,” check “Info box.” Then click “Apply (all displays).” This, as you probably know, will exclude all content of type “Info box” from the Frontpage view.
• Back at the view's settings page, click “Save.”
• Now when you view the homepage of your site, you will no longer see the “A Short History of the Harp” info box.

Now we'll add our Info box to the “Learning to Play an Instrument” article.

• Scroll down to the bottom of the Body Paragraphs field (the larger field encompassing all individual Paragraphs fields).
• Click the dropdown arrow next to “Add Body text,” and select “Add Info box.” You can type in any piece of the title of your “A Short History of the Harp” Info box node into the autofill field, and that Info box should then be displayed as an option.
• Select it to include that Info box in the body of this article.

With the Info box now included in our Body, we need to place it where we want it.

• Drag and place it after the first Body text field and before the Centered image field.

With this new organization, we should probably have some text between the Info box and the Centered image. To simulate doing this in a real-world scenario, we'll cut some of our current text and paste it into a new Body text field, as opposed to arbitrarily adding text to the article.

• So that we have a field to paste our new text in, go ahead and click the “Add Body text” button beneath all of the Paragraphs fields.
• Then scroll to the first Body text field and select and cut one or two paragraphs of text from the field (making sure to leave at least some text in the field).
• Paste the cut text into the newly created (currently empty) Body text field.
• Once this is done, drag the new Body text field, and place it after the Info box field and before the Centered image field.
• Click “Save and keep published”.

Upon viewing the article, you'll see that the referenced Info box node is displayed in its entirety within the larger article. (If all you see is the title of the Info box node, that means you forgot to select “Rendered entity” in the Format column Paragraph type's “Manage Display” page.) As it currently is, the lack of styling on the referenced Info box is likely to be confusing to most viewers. We won't go through the task of applying additional CSS to these Info box references because we already now how to do that, but it is important to note that, in practice, these references should be styled to appear significantly different from the containing article. It should be made extremely clear—through the use of some combination of background color, borders, text size, and font family—that the information contained in the Info box is not part of containing article and is simply supplementary information.

Part #9. Using Field Layout with Paragraphs

Just as the Field Layout module can be used to control the layout of nodes, it can also be used to control the layout of individual Paragraphs types. In some cases, this can be a viable alternative to controlling the layout via CSS, depending on the situation and on the developer's (your) preference.

Important: As of this writing, Field Layout is an experimental module. As such, any implementation of Field Layout should be considered a risk. If you do decide to use the module during its experimental phase, it should be tested extremely thoroughly on a development site before being used on a production site. Otherwise, play it safe by considering this information useful for future situations after the module has graduated into non-experimental core.

Because Field Layout is a core module, it does not need to be downloaded.

• Begin by navigating to your site's Extend page.
• Select the Field Layout and Layout Discovery (a dependency) modules, and click “Install.”
• Then, if prompted, click “Continue.”

Let's use Field Layout to control the layout of a new Paragraphs type in which we create a two-column unit of “Pros and cons” information.

• Navigate to Structure > Paragraphs types, and add a new Paragraphs type.
• Give it the label “Pros and cons,” and add a field.
• For this field, select “Text (formatted, long),” and give this first field the label “Pros”.
• Save and continue, and keep all of the default settings through the next two pages.
• You are back at the “Manage fields” page. Add another field with a Text (formatted, long) input type, and label this one “Cons”.
• Save, and continue through the subsequent settings pages, once again keeping all default settings.
• Once you're back at the “Manage fields” page, click the “Manage display” tab. This time we will keep the label (positioned above, as is default) for each field so that when visitors are reading them, they know that we are listing pros and cons accordingly.

If we look below the listed fields, we will see a new group of settings called “Layout settings.” This is made available by the Field Layout module. Click to expand these settings.

• We have a handful of options here, and for our Pros and cons lists, we'll select “Two column.”
• Then click “Save,” and you'll be taken back to the “Manage display” page.
• Now we have additional layout areas to place our fields in for this Paragraphs type. In total, we have “Top” for the area spanning the width of the content space above our columns, “First” for the left column, “Second” for the right column, “Bottom” for the area spanning the width of our content space below the columns, and “Disabled” for fields we do not want to display.
• Drag-and-drop your Pros and Cons fields so that Pros is in the “First” column and Cons is in the “Second” column, and save.

Now, as usual, we need to add the new Paragraphs type to our Article content type.

• Navigate to Structure > Content types, and click “Manage fields” for Article.
• Edit the Body field, scroll to the bottom of that field's settings.
• Check the box next to “Pros and cons” to add that Paragraphs type to this custom Body field. Then save.

Now we're ready to begin using this “Pros and cons” Paragraphs type. Let's use it in a new article.

• Create a new article called “Swimming Is a Great Way to Stay in Shape.”
• Add two or so paragraphs of Body text to this article.
• Click the dropdown arrow next to the “Add Body text” button, and select “Add Pros and cons.” Notice that this Paragraphs type has two long-form text areas to fill in, one labeled “Pros” and the other labeled “Cons.”
• Enter text for five or so pros, each separated by a simple line break (in other words, separated by pressing the Enter key). If you'd like, you can alternatively make these 5 bullet points. Do the same in the Cons field.
• If you'd like to fill out this article a bit more, you can then add another field of Body text below the Pros and cons field.
• Click “Save and publish.”

Viewing the article, you'll see your comparison of pros and cons listed, with the pros listed in a left-hand column and the cons listed next to them in a right-hand column. You should also see your “Pros” and “Cons” labels above each list.

In most cases you would likely want to apply some CSS to these elements via your stylesheet. Again, we won't take the time do so here because you have seen how that works. Some styling suggestions might be to add a vertical border between the lists of pros and cons (and potentially borders surrounding the entire Paragraphs type) and to make the “Pros” and “Cons” labels more prominent. Additionally, you may consider going back and editing the Pros and cons Paragraphs type to add a title field which can be displayed in the “Top” area above both columns. In this case, such a field might read, “Some Pros and Cons of Swimming for Exercise.”

Part #10. Permissions for the Paragraphs Module

At this point, we've set up all of our Drupal Paragraphs types and integrated them the way we want, aside from some styling we would need to apply to the Info box and Pros and cons types. However, we have not yet configured any permissions pertaining to Paragraphs. This is an important step. Currently, if an anonymous visitor were to view our site, they would not be able to see any of the content entered via Paragraphs types (which is all of the content we have entered in this tutorial) because by default, only administrators have permission to view such content. You can see this for yourself by logging out of the site in its current state and trying to view the content. You will see the titles of articles but none of the body content.

Additionally, we want to have a “Content creator” (or similar) role on the site so that not everyone adding content has full access to all administrative configuration on the site. These users need permission not only to view Paragraphs content but to create, edit, and delete it.

We'll start by giving everyone permission to view Paragraphs content.

• Перейдите на страницу «Люди» вашего сайта и нажмите на вкладку «Разрешения».
• Прокрутите вниз, пока не увидите раздел «Разрешения для типов абзацев». Под этим заголовком найдите «Основной текст: просмотр содержимого» и установите флажки для анонимного пользователя и пользователя, прошедшего проверку подлинности.
• Сделайте то же самое для разрешения «Просмотр содержимого» всех остальных созданных нами типов абзацев: изображение по центру, изображение по центру с заголовком, информационное поле и плюсы и минусы.
• Нажмите «Сохранить разрешения».

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

Теперь создадим новую роль для тех, кто будет добавлять и редактировать контент на нашем сайте.

• Перейдите к «Люди», перейдите на вкладку «Роли» и нажмите «Добавить роль».
• Назовите эту роль «Создатель контента».
• Вернитесь на страницу «Роли», щелкните стрелку раскрывающегося списка рядом с ролью «Создатель контента» и выберите «Изменить разрешения».
• Есть довольно много разрешений, которые нам нужно будет предоставить пользователям этой роли. Некоторые из них не связаны с абзацами, но мы все равно включаем их, чтобы имитировать реальный сценарий. Кроме того, будет сложно надежно протестировать новую роль, если у нее нет всех разрешений, которые она имела бы на практике. Также обратите внимание, что мы предоставляем эти разрешения, предполагая, что все наши создатели контента работают внутри компании. То есть у нас нет большого количества технически аутентифицированных, но все еще псевдоанонимных пользователей, создающих контент на нашем сайте, поэтому мы считаем, что можем безопасно предоставить этим пользователям разрешение на такие вещи, как использование полнотекстового формата HTML, который в других случаи могут вызвать некоторые проблемы с безопасностью.

Вот список разрешений, которые должны быть предоставлены роли создателя контента:

Комментарий

• Редактировать собственные комментарии
• Публиковать комментарии
• Пропустить одобрение комментариев
• Посмотреть комментарии

Контакт

• Посмотреть контактную форму на сайте
• Используйте личные контактные формы пользователей

Фильтр

• Используйте текстовый формат Basic HTML
• Используйте полный текстовый формат HTML
• Используйте ограниченный текстовый формат HTML

Узел

• Доступ к странице обзора содержимого
• Администрирование контента
• Просмотр собственного неопубликованного контента
• Отменить все версии
• Посмотреть все версии
• Просмотр собственного неопубликованного контента
• Статья: Редактировать любой контент
• Статья: Редактировать собственный контент
• Статья: Вернуть версии
• Статья: Просмотр изменений
• Информационное окно: Создать новый контент
• Информационное окно: редактировать любой контент
• Информационное окно: Редактировать собственный контент
• Информационное окно: Отменить изменения
• Информационное окно: просмотр ревизий

Разрешения типа абзаца

Предоставьте все разрешения в этом разделе, кроме «Обход контроля доступа к контенту типа абзаца».

Поиск

• Используйте расширенный поиск
• Воспользуйтесь поиском

Система

• Используйте страницы администрирования и помощь
• Используйте сайт в режиме обслуживания
• Посмотреть административную тему

Таксономия

• Изменить термины в тегах

Панель инструментов

• Используйте панель инструментов администрирования

Пользователь

• Просмотр информации о пользователе

Убедитесь, что вы нажали «Сохранить разрешения», когда закончите.

Несколько замечаний о некоторых разрешениях, которые мы давали и не давали здесь: Мы не давали разрешения на администрирование типов абзацев, потому что не хотим, чтобы они создавали новые типы абзацев или изменяли способ работы существующих типов абзацев. Они будут просто вводить информацию, используя типы абзацев, которые мы, как разработчики, создали для них. Кроме того, хотя в некоторых случаях целесообразно избегать предоставления неадминистративным ролям возможности удалять контент (в большинстве случаев достаточно, чтобы они могли отменить публикацию контента, а удаление контента делает его невосстановимым), мы все же должны дать им разрешение чтобы удалить содержимое типов абзацев в разделе «Разрешения для типов абзацев». Это необходимо, потому что, если они не смогут удалить этот тип контента и если они случайно щелкнут, чтобы добавить какой-либо контент с помощью типа «Абзацы», который им на самом деле не нужен в данной статье, у них не будет возможности удалить эту единицу. содержание из статьи. Это было бы похоже на запрет использования клавиши Backspace.

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

• Перейдите к «Люди» и нажмите «Добавить пользователя».
• Создайте пользователя с именем Мэри (адрес электронной почты можно пропустить) с паролем, который вы легко сможете запомнить.
• Убедитесь, что статус пользователя отмечен как «Активен», и, самое главное, убедитесь, что вы отметили роль «Создатель контента» для этого пользователя.
• Затем нажмите «Создать новую учетную запись».
• Выйдите из системы и войдите снова как Мэри. Если права были назначены правильно, у вас должен быть доступ к панели инструментов администратора.
• Нажмите «Управление» на панели инструментов, если вы не видите административных ссылок («Содержание», «Структура» и т. д.).
• Затем перейдите к разделу «Контент» и добавьте новый элемент контента типа «Статья». Д
• Вы можете назвать эту статью «Брокколи полезна для вас».
• Добавьте текстовое поле «Основной текст» и введите текст.
• Затем вы должны просмотреть и попытаться добавить содержимое каждого типа абзацев, который мы создали: изображение по центру, изображение по центру с заголовком, информационное поле и плюсы и минусы.
• После этого сохраните статью и просмотрите ее. Этот полный процесс должен быть таким же, как когда мы делали это в качестве администратора сайта, и тогда вы сможете без проблем просматривать весь контент.

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

Завершение урока по абзацам

После того как вы подтвердите, что можете создавать и просматривать контент с помощью контента Paragraphs в качестве создателя контента, вы завершили это руководство. На этом этапе у вас должно быть понимание того, почему и как использовать модуль «Абзацы».

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

С Paragraphs их просто просят предоставить контент для этих частей наших статей, и мы, как разработчики, можем написать правила для всего сайта (используя CSS) о том, как этот контент должен отображаться. Это упрощает процесс создания контента для нетехнических пользователей и делает внешний вид такого контента более согласованным как для технических, так и для нетехнических пользователей.