Styling the Maintenance, Taxonomy, Search Results, and 403/404 Pages

In this chapter, we’ll explore the remaining set of pages that are usually present on any website.

We’ll start with the maintenance page, which is useful to provide a nice message to your users when the site is down. Then, we’ll see how to leverage the page that shows details about a taxonomy term, along with nodes tagged with it.

You’ll then discover how to style a fully featured search page, using one of the most powerful contributed modules, the Search API.

Finally, we’ll talk about errors, as they are often around the corner and we must deal with them.

The topics covered in this chapter are as follows:

• Styling the maintenance page
• Styling the taxonomy page
• Styling the search results page
• Styling the error pages

Styling the maintenance page

When you need to perform a massive update to your website, it’s a good practice to put it in maintenance mode.

Drupal allows you to enable maintenance mode and provide a custom message to show to your customers:

Figure 10.1 – The form to configure and enable maintenance mode

The URL of the configuration page shown in Figure 10.1 is /admin/config/development/maintenance. Here, you can enable maintenance mode and set a message. The message text only allows plain strings, and the only dynamic part is @site, which will be replaced with the name of the site (as configured on /admin/config/system/site-information).

Suggestions for the maintenance page are as follows:

• maintenance-page--offline.html.twig: Used when the site is offline due to some internal error, such as a broken database connection
• maintenance-page--front.html.twig: Used for the front page of the site and also for pages such as update...

Styling the taxonomy page

Taxonomies play an important role in Drupal data modeling, as they are used to categorize other entities (such as nodes or media). For every taxonomy term, Drupal provides a route that renders the full display mode of the term itself.

You may have noticed that we’ve tagged every trip with terms that come from two vocabularies, Duration and Level. The Duration vocabulary contains terms that indicate the duration of a trip, such as 1 Day or 5 Days. The Level vocabulary contains terms about the difficulty of the trip itself, such as Easy or Difficult. Every time we print those terms (i.e., on the Home page or the Trips page), we render them as a link that points to a page with the details of the term itself. The page for the Difficult term from the Level vocabulary looks like this:

Figure 10.3 – The page for the Difficult term

By using WebProfiler or inspecting the source code, we can discover that in the main content...

Styling the search results page

Drupal core provides a simple module to perform searches, but it’s tailored to a very simple websites that doesn’t need any advanced features.

On the demo website, we’ll use the Search API contributed module (https://www.drupal.org/project/search_api). One of the main advantages of Search API is that for every search index, the module provides us with a data source that we can use in a view.

The demo website defines a view that queries the search index; you can find it at https://packt.ddev.site/search.

The search view renders indexed contents (nodes) using a specific display mode called Search index. Check the configuration of every content type to see that such a display mode is present in any of them.

Using a specific display mode for search results is not mandatory, but it’s useful to normalize every content type to render a uniform markup. Having a unique display mode for every content type allows us to define...

Styling the error pages

Drupal provides some suggestions for typical 4xx errors, such as File not found or Access denied.

Every time an error occurs on Drupal, the system triggers a redirect to one of those routes:

• system.401: The user is trying to access an unauthorized resource
• system.403: The user is trying to access a forbidden resource
• system.404: The user is trying to access a resource that doesn’t exist

Every time the page for one of those routes is rendered, the system looks for a related page template:

• page--401.html.twig
• page--403.html.twig
• page--404.html.twig

For example, for a Page not found error, Drupal checks whether a template called page--404.html.twig exists in the currently enabled theme.

To see this in action, follow these steps:

1. Create a templates/layout/page--404.html.twig file with this content:

   {{ include('@organisms/page-error.html.twig', {

     srMessage: 'Error'|t...

Summary

In this chapter, we saw how to style some pages that Drupal provides by default, such as the maintenance page and the error pages.

You also learned that for every taxonomy term that has been defined, Drupal provides, by default, a view that shows the term fields, along with a list of every node tagged with the term itself.

Finally, we also talked about Search. Most sites have this feature and the best way to implement it is by using the Search API module. We added a new display mode to our content types and styled it, along with the view that lists the search results.

With this chapter, we’ve completed the styling of the demo website; every page and section is now ready to be deployed in production. In the next four chapters, we’ll talk about some advanced topics, including providing custom filters and functions for Twig and how to make a configurable theme.