Modernizing Drupal 10 Theme Development: Build fast, responsive Drupal websites with custom theme design to deliver a rich user experience

A comprehensive guide to creating Drupal themes from scratch, from design to fully styled websites with custom Twig templates and headless architecture

Key Features:

• Explore real-world examples with proven methodologies to gain a deeper insight into the Drupal theme layer
• Learn how to translate a graphic design into a maintainable and robust Drupal theme
• Improve performance and accessibility with a decoupled frontend to consume data exposed by Drupal's APIs
• Purchase of the print or Kindle book includes a free PDF eBook

Book Description:

Working with themes in Drupal can be challenging, given the number of layers and APIs involved. Modernizing Drupal 10 Theme Development helps you explore the new Drupal 10's theme layer in depth.

With a fully implemented Drupal website on the one hand and a set of Storybook components on the other, you'll begin by learning to create a theme from scratch to match the desired final layout. Once you've set up a local environment, you'll get familiarized with design systems and learn how to map them to the structures of a Drupal website. Next, you'll bootstrap your new theme and optimize Drupal's productivity using tools such as webpack, Tailwind CSS, and Browsersync. As you advance, you'll delve into all the theme layers in a step-by-step way, starting from how Drupal builds an HTML page to where the template files are and how to add custom CSS and JavaScript. You'll also discover how to leverage all the Drupal APIs to implement robust and maintainable themes without reinventing the wheel, but by following best practices and methodologies. Toward the end, you'll find out how to build a fully decoupled website using json: api and Next.js.

By the end of this book, you'll be able to confidently build custom Drupal themes to deliver state-of-the-art websites and keep ahead of the competition in the modern frontend world.

What You Will Learn:

• Map design systems made by Storybook components to Drupal structures
• Understand and use render arrays and Twig templates
• Get familiarized with the new Single Directory Component feature introduced in Drupal 10.1
• Define, import, and use CSS and JavaScript libraries
• Discover how to style content created with fields and paragraphs
• Define, place, customize, and style blocks
• Explore advanced topics like extending Twig, making a theme configurable, and boosting performance and accessibility
• Find out how to build a decoupled website using json: api and Next.js

Who this book is for:

If you are a Drupal backend developer or frontend developer who wants to create Drupal themes that follow industry best practices and are fast and maintainable, this book is for you. Basic knowledge of HTML, CSS, and JavaScript and working knowledge of a CMS are needed to grasp the concepts present in this boo

一本從頭開始創建Drupal主題的全面指南，從設計到完全樣式化的網站，包括自定義的Twig模板和無頭架構。

主要特點：
- 通過實際案例和成熟的方法探索Drupal主題層，以深入了解
- 學習如何將圖形設計轉化為可維護和堅固的Drupal主題
- 通過解耦的前端來提高性能和可訪問性，以使用Drupal的API公開的數據
- 購買印刷版或Kindle版書籍可獲得免費的PDF電子書

書籍描述：
在Drupal中使用主題可能具有挑戰性，因為涉及到多個層次和API。《現代化Drupal 10主題開發》幫助您深入探索新的Drupal 10主題層。

一方面，您將使用完全實現的Drupal網站，另一方面，您將使用一組Storybook組件，從頭開始創建主題以匹配所需的最終佈局。一旦設置了本地環境，您將熟悉設計系統並學習如何將其映射到Drupal網站的結構。接下來，您將啟動新主題並使用webpack、Tailwind CSS和Browsersync等工具來優化Drupal的生產力。隨著進一步的學習，您將逐步深入探索所有主題層，從Drupal如何構建HTML頁面到模板文件的位置以及如何添加自定義CSS和JavaScript。您還將發現如何利用所有Drupal API來實現堅固且易於維護的主題，而無需重新發明輪子，而是遵循最佳實踐和方法論。最後，您將了解如何使用json: api和Next.js構建完全解耦的網站。

通過閱讀本書，您將能夠自信地構建自定義的Drupal主題，提供最先進的網站，並在現代前端世界中保持領先地位。

學到什麼：
- 將由Storybook組件製作的設計系統映射到Drupal結構
- 理解並使用渲染數組和Twig模板
- 熟悉Drupal 10.1中引入的新的單目錄組件功能
- 定義、導入和使用CSS和JavaScript庫
- 發現如何為使用字段和段落創建的內容設置樣式
- 定義、放置、自定義和設置區塊的樣式
- 探索高級主題，如擴展Twig、使主題可配置以及提高性能和可訪問性
- 了解如何使用json: api和Next.js構建解耦的網站

適合閱讀者：
如果您是Drupal後端開發人員或前端開發人員，想要創建遵循行業最佳實踐、快速且易於維護的Drupal主題，那麼本書適合您。需要基本的HTML、CSS和JavaScript知識以及對CMS的工作知識，以理解本書中介紹的概念。