Drupal 8 предоставляет возможность легко создавать кастомные страницы с собственными формами и JavaScript. В этой статье мы рассмотрим, как добавить кастомную форму и JS на одну страницу в Drupal 8.

Шаг 1: Создание модуля Drupal 8

Первым шагом является создание модуля Drupal 8, который будет содержать нашу кастомную форму и JS. Давайте назовем наш модуль «custom_form_example». Создайте папку «custom_form_example» внутри папки «modules/custom» и создайте файл «custom_form_example.info.yml» внутри нее со следующим содержимым:


name: 'Custom Form Example'
type: module
core_version_requirement: ^8
package: 'Custom'
dependencies:
  - drupal:block

Шаг 2: Создание кастомной формы

Для создания кастомной формы вам потребуется создать класс формы. Создайте файл «CustomFormExampleForm.php» внутри папки «data-src/Form» вашего модуля и добавьте в него следующий код:


namespace Drupal\custom_form_example\Form;

use Drupal\Core\Form\FormBase;
use Drupal\Core\Form\FormStateInterface;

class CustomFormExampleForm extends FormBase {

  /**
   * {@inheritdoc}
   */
  public function getFormId() {
    return 'custom_form_example_form';
  }

  /**
   * {@inheritdoc}
   */
  public function buildForm(array $form, FormStateInterface $form_state) {
    $form['name'] = [
      '#type' => 'textfield',
      '#title' => $this->t('Name'),
      '#required' => TRUE,
    ];
    $form['email'] = [
      '#type' => 'email',
      '#title' => $this->t('Email'),
      '#required' => TRUE,
    ];
    $form['actions']['submit'] = [
      '#type' => 'submit',
      '#value' => $this->t('Submit'),
    ];
    return $form;
  }

  /**
   * {@inheritdoc}
   */
  public function submitForm(array &$form, FormStateInterface $form_state) {
    // Ваш код для обработки отправленной формы
  }

}

Шаг 3: Создание контроллера страницы

Теперь мы создадим контроллер страницы, который будет содержать нашу кастомную форму. Создайте файл «CustomFormExampleController.php» внутри папки «data-src/Controller» вашего модуля и добавьте в него следующий код:


namespace Drupal\custom_form_example\Controller;

use Drupal\Core\Controller\ControllerBase;
use Drupal\custom_form_example\Form\CustomFormExampleForm;

class CustomFormExampleController extends ControllerBase {

  /**
   * {@inheritdoc}
   */
  public function content() {
    $form = $this->formBuilder()->getForm(CustomFormExampleForm::class);
    return [
      '#theme' => 'custom_form_example_page',
      '#form' => $form,
      '#attached' => [
        'library' => 'custom_form_example/custom_script',
      ],
    ];
  }

}

Шаг 4: Добавление маршрута

Добавим маршрут, который будет отображать нашу кастомную страницу с формой. Внутри файла «custom_form_example.routing.yml» внутри папки «custom_form_example» добавьте следующий код:


custom_form_example.content:
  path: '/custom-form-example'
  defaults:
    _controller: '\Drupal\custom_form_example\Controller\CustomFormExampleController::content'
    _title: 'Custom Form Example'
  requirements:
    _permission: 'access content'

Добавление JavaScript на страницу

Теперь, чтобы добавить JavaScript на нашу кастомную страницу, мы создадим библиотеку JavaScript. Внутри файла «custom_form_example.libraries.yml» внутри папки «custom_form_example» добавьте следующий код:


custom_script:
  version: VERSION
  js:
    js/custom_script.js: {}
  dependencies:
    - core/jquery

Затем создайте файл «custom_script.js» внутри папки «js» вашего модуля и добавьте в него ваш JavaScript-код.

Вопросы и ответы

1. Как добавить кастомный блок на страницу?

1. Создайте класс блока, унаследованный от «BlockBase».

2. Внутри класса блока переопределите методы «build» и «getCacheTags».

3. Создайте файл «block.plugin.yml» внутри папки «data-src/Plugin/Block» вашего модуля и добавьте в него описание блока.

2. Как создать кастомные поля контента в Drupal 8?

1. Создайте класс поля, унаследованный от «FieldItemBase».

2. Внутри класса поля переопределите методы «propertyDefinitions» и «getPropertyValues».

3. Создайте файл «field.field.node.FIELD_NAME.yml» внутри папки «config/install» вашего модуля, где «FIELD_NAME» — имя вашего поля, и добавьте в него описание поля.

3. Как добавить дополнительные роуты в свой модуль?

1. Создайте файл «modulename.routing.yml» внутри папки «modules/custom/modulename» вашего модуля и добавьте в него описания роутов.

2. В файле «modulename.info.yml» вашего модуля добавьте следующую строчку:


'routing.yml' : ['./modulename.routing.yml']

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