Drupal 8 Theming with Twig电子书

Drupal 8 Theming with Twig

Table of Contents

Drupal 8 Theming with Twig

Credits

About the Author

Acknowledgments

About the Reviewer

www.PacktPub.com

eBooks, discount offers, and more

Why subscribe?

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

1. Setting Up Our Development Environment

Installing an AMP (Apache, MySQL, PHP) stack

Introducing MAMP

Downloading MAMP

Installing MAMP

A quick tour of MAMP PRO

General settings for MAMP PRO

Host settings

Installing Drupal 8

Downloading Drupal 8

Creating our document root

Creating our host entry

Creating a new database for Drupal

Using phpMyAdmin

Completing Drupal 8 installation

Choosing a language

Choosing a profile

Verifying requirements

Database configuration

Configuring the site

Site maintenance account

Regional settings

Update notifications

Reviewing the new admin interface

Exploring the admin menu

Previewing the interface

Exploring Drupal 8 folder structure

The core folder

The modules folder

The sites folder

The themes folder

Using the project files

Downloading and extracting the exercise files

Database backup

Export settings

Database restore

Using Google Chrome to inspect elements

Summary

2. Theme Administration

What is a theme?

Exploring the Appearance interface

Drupal's core themes

Bartik

Seven

Stark

Classy

Theme states

Installed themes

Uninstalled themes

Default theme

Installing and uninstalling themes

Step one – installing a theme

Step two – uninstalling a theme

Theme settings

Toggling the display of page elements

Logo image settings

Shortcut icon settings

Theme-specific settings

Using prebuilt themes

Installing a new theme

Installing from a URL

Uploading a module or theme archive to install

Manually installing a theme

Cleaning up our themes folder

Managing content with blocks

Exploring the Block layout

Blocks and regions

Demonstrating block regions

Placing blocks into regions

Configuring a block

Managing the title

Managing visibility settings

Content types restriction

Page restriction

Role restriction

Creating a custom block

Managing custom blocks

Exploring the custom block library

Exploring block types

Managing fields

Managing display

Summary

3. Dissecting a Theme

Setting up a local development environment

Managing sites/default folder permissions

Configuring settings.local.php

Disabling CSS and JS aggregation

Disabling render and page cache

Disabling test modules and themes

Default themes versus custom themes

Folder structure and naming conventions

Managing configuration in Drupal 8

Reviewing the new info.yml file

Metadata

Libraries

Defining a library

Overriding libraries

Extending libraries

Attaching a library

Using Twig to attach a library

Using the preprocess functions to attach a library

Regions

The role of templates in Drupal

How templates work

Where to find templates

Creating our first basic theme

Step One – creating a new folder

Step two – create an info file

Step three – copy core templates

Step four – include a screenshot

Step five – installing our theme

Step six – Welcome to Twig

Introducing Twig

Enabling Twig debug

Twig fundamentals

Commenting variables

Setting variables

Printing variables

Dumping variables

Filters

Control structures

Template variables

The role of the theme file in Drupal

Preprocessors and hooks

Overriding variables

Summary

4. Getting Started – Creating Themes

Starter themes

Creating a Bootstrap starter

Understanding grids and columns

Setting up a theme folder

Adding a screenshot

Configuring our theme

Installing our theme

Working with libraries

Adding assets

Creating a library reference

Including our library

Creating a Jumbotron

Step one – managing block content

Step two – hiding the page title

Rethinking our layout

Adding regions

Managing the block content

Using Twig templates

Creating a homepage template

Creating region templates

Working with the Theme layer

Using Devel to print variables

Printing variables from a function

Subthemes

Adding the theme folder

Including a screenshot

Configuring our theme

Installing our theme

Touring Classy

Overriding a library

Summary

5. Prepping Our Project

Walking through the design mockup

Homepage layout

Defining homepage regions and user interaction

Basic page layout

Defining interior regions

Landing page layout

Blog detail layout

Contact page

Search results

Restoring our database snapshot

Creating a custom theme

Setting up theme folders

Adding a screenshot

Creating our configuration file

Installing our theme

Setting up our regions

Setting up our assets

Adding additional assets

Handling default files

Summary

6. Theming Our Homepage

Creating our HTML wrapper

Introducing web fonts

Creating our homepage

Using page templates

Working with static content

Implementing our Header Top region

Creating our Social Icons block

Installing Font Awesome library

Refactoring Header Top region

Implementing our Header region

Adding a logo

Enabling Site branding

Printing our Header region

Creating Block templates

Implementing our search form block

Placing our search form block

Creating a search form block template

Adding custom JavaScript

Creating an input element template

Working with menus

Creating a menu template

Creating System Menu block template

Creating a sticky header

Implementing our Headline Region

Creating our Headline View and Block

Adding our Headlines Block

Printing our Headline region

Configuring FlexSlider library

Attaching a library using Twig

Enable FlexSlider

Implementing Parallax

Adding a scroll effect

Enabling the scroll script

Attaching ScrollTo library using Twig

Implementing our Before Content region

Creating our Services block

Creating our Features block

Refactoring Before Content region

Implementing the footer

Creating our custom blocks

Refactoring our main footer

Footer first

Footer second

Footer third

Footer bottom left

Footer bottom right

Summary

7. Theming Our Interior Page

Reviewing the About Us mockup

Creating our interior page template

Adding our Global Header

Implementing our page title

Working with static HTML

Adding new regions

Reassigning the Page title block

Printing the Title Bar region

Creating a block template

Implementing our main page structure

Creating a Node template

Implementing our Team members section

Prepping our Team Member View

Creating our Team Member View

Managing our Team Members listing block

Formatting Views with CSS

Adding CSS classes to Views

Using Twig variables to rewrite field content

Rearranging View fields

Adding a View header

Refactoring the After Content region

Adding our global footer

Fixing JavaScript errors

Summary

8. Theming Our Blog Listing Page

Reviewing the Blog Listing mockup

Creating our blog listing

Adding a new display mode

Managing the display

Enabling fields

Field label visibility

Formatting fields

Creating a Post Listing view

Using Content Display modes with views

Managing our Post Listing block

Implementing our Node template

Adding CSS classes to Twig

Working with content variables

Using the without filter

Creating our post image slider

Working with field templates

Adding the Owl Carousel library

Using Twig filters for dates

Printing title and teaser

Creating our post metadata

Field templates and taxonomy

Handling comments in Drupal 8

Creating a theme file

Printing our comment count

Adding a read more link

Creating a Categories block

Managing our Categories block

Implementing responsive sidebars

Theming a Block template

Drupal Views and Twig templates

Managing popular versus recent content

Creating our recent posts block

Creating our popular posts block

Sorting views by comment count

Attaching a view to the footer

Managing our popular posts block

Using Twig and Bootstrap tabs

Recent Posts Twig template

Popular Posts Twig template

Using Views-view templates

Creating a Post Teaser Twig template

Adding the About Us block

Implementing the About Us template

Summary

9. Theming Our Blog Detail Page

Reviewing the Blog detail mockup

Previewing our Blog detail page

Creating a Post Full template

Altering fields

Working with comments

Introducing Comment types

Reviewing Default Comment type fields and display

Enabling Post Type Comments field

Creating a Field Comments template

Theming the Comment thread

Enabling user photos for Comment threads

Cleaning up the User Picture field

Creating the Field User Picture template

Date and time formats

Implementing social sharing capabilities

The Add This buttons

Creating a library entry

Attaching the library to our Blog detail page

Displaying buttons

Summary

10. Theming Our Contact Page

Reviewing the contact page mockup

Introducing contact forms

Editing a contact form

Managing form fields

Managing form display

Contact page layout

Adding a Callout block

Creating the Callout block template

Integrating Google Maps into our contact page

Configure Google Maps

Creating our Google Maps block

Creating the Callout Map template

Summary

11. Theming Our Search Results

Reviewing the Search Results mockup

Looking at default Search results

Introducing core search

Indexing content

Editing search pages

Disabling search pages

Working with Search Results templates

Modifying the item list template

Cleaning up each result

Search alternatives

Search API

Installing the Search API

Adding a server

Adding an index

Configuring bundles

Adding fields to our index

Creating a Search Results View

Using the Search index view mode

Adding filter criteria

Placing our exposed search form

Adding our placeholder attribute

Using our search form

Displaying the number of search results

Adding a No Results message

Summary

12. Tips, Tricks, and Where to Go from Here

Working with Local Tasks

Theming local tasks

Working with Status messages

Adding the Highlighted region

Theming our Status message block

Reusing Twig templates

Using extends to share layouts

Working with Twig blocks

Where do we go from here?

Summary

Index