Drupal 8 Training (Summer 2018)

Session 1

We started by using a Git repo set up by Pete Inge: d8train
We documented the Pantheon/CircleCI/Lando setup
We created a branch for each person (i.e., git checkout -b mark)
We created a basic content type
We exported the content type using drush (lando drush cex)
We committed the config changes and pushed the config to origin
We created a pull request from our branches to generate a Pantheon multidev environment

Session 2

We covered basic theming concepts:

What is a theme, how to activate one
Creating a twig template
Rendering our content types

Session 3

We covered preprocessors. Helpful links:

In our theme file (bluecadet_base.theme) we created a variable in the node preprocess hook bluecadet_base_preprocess_node(), i.e.

$variables\['foo'] = bar;

Finally in our node’s Twig template file (themes/custom/bluecadet_base/templates/node/node--[content type].html.twig) we added the output for our variable:

{{ foo }}

We also covered debugging. Helpful links:

Session 4

Menus

We covered:

Menu configuration (data side)
Menu block and regions (layout side)
Menu twig templates

Helpful links:

Menus: https://drupalize.me/topic/menus
Regions: https://drupalize.me/tutorial/regions?p=2512

Core Twig templates can be found in /core/modules/system/templates

An example header template can be used to wrap block output, for ex:

<header role="banner">
    {%  if page.header.bluecadet_base_main_menu %}
      <div class="col-center">
        {{ page.header.bluecadet_base_main_menu }}
      </div>
    {% endif %}
    {%  if page.header.bluecadet_base_search %}
      <div class="col-right">
        {{ page.header.bluecadet_base_search }}
      </div>
    {% endif %}
</header>

Wherein:

page.header denotes the page object, header region
bluecadet_base_main_menu denotes the theme and the block machine name

In this example we are checking for the presence of the main menu block within the header region, and if it exists we will wrap it within a <div> with the class col-center

For menu Twig modifications we focused on two files:

menu.html.twig (/themes/custom/bluecadet_base/templates/menu/menu.html.twig)
header.html.twig (/themes/custom/bluecadet_base/templates/includes/header.html.twig)

Session 5

JavaScript

Helpful links: