What is Drupal?

Drupal is an open source Content Management System (CMS) that is used to build websites with either simple or complex content relationships.

Drupal is a system of pages, not static pages

Content (HTML) is stored in the database, not code. It is separated from the Presentation (CSS) and Behavioral (JavaScript) layers.

All the Terminology!

Terminology (1)

• Node: a page that is created by a content administrator entering the content into the system. These are compromised of fields created in the Content Type.
• Content Type: You can create different types of nodes based on the need of the site. This could be News, Blogs, Partners.

Terminology (2)

• Taxonomy: A way of categorizing entities (nodes, users, etc).
• Modules: Contributed code that you can add to extend the functionality of your site.
• Theme: The front end layer where you define regions, add JavaScript, CSS/Sass, and Templates.

Terminology (3)

• Blocks: Customizable Content that can appear in a page region. IE: Contact Information Sidebar
• Views: Dynamic lists of content that accumulates in a highly customizable fashion. IE: A list of blog posts or a Related News Block with a similar taxonomy term.

Intro to Sitebuilding

Creating a Content Type

1. Go to Structure > Content Types
2. You can create your own Content Type or Manipulate what exists.
3. Click Manage Fields on 'Article' Content Type.
4. Click Add Field and lets add a date field and name it Date.
5. Let's do Date Only and limit it to one value.

Creating a Taxonomy

1. Go to Structure > Taxonomy
2. Let's add a Taxonomy called Region and give it areas of the US.
3. Click on Add terms and let's add a bunch.

Add Taxonomy to Articles

1. Go to Structure > Content Types
2. Click Manage Fields on 'Article' Content Type.
3. Let's add a reference field to a taxonomy term and select regions.
4. Once we have saved this field we can reference the region of this content.

Create some Dummy Content

1. Go to https://www.drupal.org/project/devel and right click on the Drupal 8 tar.gz version of the module. Click Copy Link Address
2. Click on Extend
3. Click on Install New Module. Paste the link you copied in the Install From a URL field.
4. Go to Configuration > Development > Generate Content and let's Generate some sample articles.

Create a Dynamic News Page

1. Go to Structure > Views. Then Click Add New View.
2. View Name is News and in View Settings we want show Content of Article Type.
3. Check Create a Page. And for display settings we will do Unformatted List of fields. Keep everything else the same.
4. Click "Save and edit".

Create a Dynamic News Page (continued...)

1. Now over here we are going to create a view fields. Let's add the Date field that we creates and a region field.
2. Click save and let's look at our news page!

Introduction to Theming

Creating a SubTheme

• Starts with a info.yml file where you put all the information about your theme and define your regions.
• Add a libraries.yml file to start adding CSS and JS
• Go to Appearance to enable the new theme!

Important Keys in YML theme files

• name, type, description, core, base theme, and regions.
• Read more about these keys here.

TWIG Templating

• First, we shall set up Twig Debug.
• Copy the file sites/default/default.services.yml to sites/default/services.yml
• In the Drupal Site, go to Configuration > Development > Performance and Click on Clear Caches
• Go back to your site, refresh the page if you haven't already and inspect element

TWIG Templating

• The 3 Twig Syntaxes

• {{ say something }}

  IE: I want something printed.

• {% do something %}

  IE: I want to use some logic.

• {# comment something #}

  IE: I want to write comments that won't render.

TWIG Templating

• Create a sample template
• Create a templates directory in your theme folder.
• Make a copy of the file in core/themes/classy/templates/layout/page.html.twig and put it in your templates folder
• Clear Cache and see what is rendering for page now in the element inspector.

Adding New Regions

• Create a new region and render it.
• Add a search region in your YML file right under the Header region. Clear Cache and check out the block pages.
• We now need to make sure we actually render it in the twig template.