mirror of
https://github.com/LCTT/TranslateProject.git
synced 2024-12-26 21:30:55 +08:00
230 lines
8.7 KiB
Markdown
230 lines
8.7 KiB
Markdown
[#]: collector: (lujun9972)
|
||
[#]: translator: ( )
|
||
[#]: reviewer: ( )
|
||
[#]: publisher: ( )
|
||
[#]: url: ( )
|
||
[#]: subject: (Creating Custom Themes in Drupal 8)
|
||
[#]: via: (https://opensourceforu.com/2019/11/creating-custom-themes-in-drupal-8/)
|
||
[#]: author: (Bhanu Prakash Poluparthi https://opensourceforu.com/author/bhanu-poluparthi/)
|
||
|
||
Creating Custom Themes in Drupal 8
|
||
======
|
||
|
||
[![][1]][2]
|
||
|
||
_A theme in a website is a set of files that defines the overall look and the user experience of a website. It usually comprises all the graphical elements such as colours and window decorations that help the user to customise the website. Drupal provides the user with a bunch of basic themes for a website that are very generic. However, these default themes do not suit all types of users. So there is a need to build themes that meet one’s requirements._
|
||
|
||
Creating and customising themes in Drupal 8 is easy because of a modern template engine for PHP named Twig, which is a part of the Symfony 2 framework. Moving from a PHP template to Twig, and from the INI format to YAML, are some of the main changes in Drupal 8 theming. These changes in Drupal 8 have improved the security and inheritance, making theming more distinguished.
|
||
|
||
With reference to Figure 1,
|
||
|
||
* _.info_ provides information about your theme.
|
||
* _html.tpl.php_ displays the basic HTML structure of a single Drupal page.
|
||
* _page.tpl.php_ is the main template that defines the contents on most of the pages.
|
||
* _style.css_ is the CSS file that sets the CSS rules for the template.
|
||
* _node.tpl.php_ defines the contents of the nodes.
|
||
* _block.tpl.php_ defines the contents in the blocks.
|
||
* _comment.tpl.php_ defines the contents in the comments.
|
||
* _Template.php_ is used to hold preprocessors for generating variables before they are merged with the markup inside .tpl.php files.
|
||
* _Theme-settings.php_ is used to modify the entire theme settings form.
|
||
* _.libraries.yml_ defines your libraries (mostly your JS, CSS files).
|
||
* _.breakpoints.yml_ defines the points to fit different screen devices.
|
||
* _.theme_ is the PHP file that stores conditional logic and data preprocessing of the variables before they are merged with markup inside the .html.twig file.
|
||
* _/includes_ is where third-party libraries (like Bootstrap, Foundation, Font Awesome, etc) are put. It is a standard convention to store them in this folder.
|
||
|
||
|
||
|
||
The basic requirement to create a new Drupal theme is to have Drupal localhost installed on your system.
|
||
|
||
![Figure 1: Drupal 7 theme structure \(https://www.drupal.org/docs/7/theming/ overview-of-theme-files\)][3]
|
||
|
||
**Drupal 8 theme structure**
|
||
A custom theme can be made by following the steps mentioned below.
|
||
|
||
_**Step 1: Creating the custom themes folder**_
|
||
Go to the Drupal folder in which you can find a folder named Theme.
|
||
|
||
* Enter the folder ‘theme’.
|
||
* Create a folder ‘custom’.
|
||
* Enter the folder ‘custom’.
|
||
* Create a folder ‘osfy’.
|
||
|
||
|
||
|
||
Start creating your theme files over here. The theme name taken here is osfy.
|
||
|
||
_**Step 2: Creating a YML file**_
|
||
To inform the website about the existence of this theme, we use _.yml_ files. The basic details required in the YML are mentioned below:
|
||
1\. Name
|
||
2\. Description
|
||
3\. Type
|
||
4\. Core
|
||
|
||
```
|
||
name: osfy
|
||
description: My first responsive custom theme.
|
||
type: theme
|
||
package: custom
|
||
base theme: classy
|
||
core: 8.x
|
||
|
||
regions:
|
||
head: head
|
||
header: header
|
||
content: content
|
||
sidebar: sidebar
|
||
footer: Footer
|
||
|
||
Stylesheets-remove:
|
||
-”Remove Stylesheets”
|
||
```
|
||
|
||
We can proceed once the theme appears in the uninstalled section of your website’s _Appearance_ tab.
|
||
Open the Drupal website and check for the new theme in the _Appearance_ section. It will be under the uninstalled list of themes in the _Appearance_ tab.
|
||
|
||
**Note:** 1\. Base theme indicates which base theme your custom theme is going to inherit. The default base theme provided by Drupal is ‘Stable’.
|
||
|
||
2\. Regions defines the regions in which your blocks are to be placed in your theme. If not declared, Drupal uses default regions from the core.
|
||
|
||
---
|
||
|
||
_**Step 3: Adding the .libraries.yml file:**_
|
||
We have indicated all the libraries comprising JavaScript and CSS styling, and now we will define them in the _libraries.yml_ file.
|
||
|
||
```
|
||
global-components:
|
||
version: 1.x
|
||
css:
|
||
theme:
|
||
css/style.css: {}
|
||
includes/bootstrap/css/bootstrap.css: {}
|
||
```
|
||
|
||
We will use _style.css_ for the theme styling and bootstrap.css for responsive display using Bootstrap libraries. Style.css resides in the core/css folder, whereas bootstrap.css resides in the _includes/bootstrap/css_ folder.
|
||
|
||
![Figure 2: Drupal 8 theme structure][4]
|
||
|
||
_**Step 4: Creating theme regions**_
|
||
To better understand how Twig has made things easier, use the following code:
|
||
|
||
```
|
||
<?php print render($title_prefix); ?>
|
||
<?php if ($title): ?>
|
||
<h1 class="title" id="page-title">
|
||
<?php print $title; ?>
|
||
</h1>
|
||
<?php endif; ?>
|
||
|
||
{{ title_prefix }}
|
||
{% if title %}
|
||
<h1 class="title" id="page-title">
|
||
{{ title }}
|
||
</h1>
|
||
{% endif %}
|
||
```
|
||
|
||
The template file functions are:
|
||
|
||
_html.html.twig_ – Theme implementation for the basic structure of a single page
|
||
_page.html.twig_ – Theme implementation to display a single page
|
||
_node.html.twig_ – Default theme implementation to display a node
|
||
_region.html.twig_ – Default theme implementation to display a region
|
||
_block.html.twig_ – Default theme implementation to display a block
|
||
_field.html.twig_ – Theme implementation for a field
|
||
|
||
To create the page.html.twig file, give the following commands:
|
||
|
||
```
|
||
/**
|
||
* @file
|
||
* Default theme implementation to display a single page.
|
||
*
|
||
* example code for basic header, footer and content page
|
||
**/
|
||
|
||
<div id="page">
|
||
{% if page.head %}
|
||
<section id="head">
|
||
<div class= "container">
|
||
{{ page.head }}
|
||
</div>
|
||
</section>
|
||
{% endif %}
|
||
<header id="header">
|
||
<div class="container">
|
||
{{ page.header }}
|
||
</div>
|
||
</header>
|
||
<section id="main">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div id="content" class="col-md-10 col-sm-10 col-xs-12">
|
||
{{ page.content }}
|
||
</div>
|
||
{% if page.sidebar %}
|
||
<aside id="sidebar" class="sidebar col-md-2 col-sm-2 col-xs-12">
|
||
{{ page.sidebar}}
|
||
</aside>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
{% if page.footer %}
|
||
<footer id="footer">
|
||
<div class="container">
|
||
{{ page.footer }}
|
||
</div>
|
||
</footer>
|
||
{% endif %}
|
||
</div>
|
||
```
|
||
|
||
_**Step 5: Enabling the theme**_
|
||
To place content in the respective regions, in the Manage administrative menu, navigate to _Structure > Block layout > Custom block library (admin/structure/block/block-content)_. Click Add custom block. The Add custom block page appears. Fill in the fields and click on _Save_.
|
||
The block design used here is as in Figure 2.
|
||
|
||
**A few more things to do**
|
||
|
||
* Place a _logo.svg_ file in the theme folder. Drupal will look for it by default and enable the logo for the theme.
|
||
* To show your theme picture in the admin interface next to your theme name, place an image screenshot.png in your theme directory itself.
|
||
* Use your creativity from here onwards to style and customise the appearance of your theme.
|
||
* While writing the code for Twig files, remember to comment all the important information for future reference.
|
||
|
||
|
||
|
||
To make your theme work on your Drupal localhost, go to _/admin/appearance_ where you can find the theme ‘osfy’. Choose the option ‘Set as default’.
|
||
|
||
You can start using your theme from now.
|
||
|
||
![Avatar][5]
|
||
|
||
[Bhanu Prakash Poluparthi][6]
|
||
|
||
The author is an open source enthusiast and has been a part of
|
||
the Drupal organisation since 2017. He was an intern at Google
|
||
Summer of Code 2017 and a mentor at Google Code-In 2018.
|
||
|
||
[![][7]][8]
|
||
|
||
--------------------------------------------------------------------------------
|
||
|
||
via: https://opensourceforu.com/2019/11/creating-custom-themes-in-drupal-8/
|
||
|
||
作者：[Bhanu Prakash Poluparthi][a]
|
||
选题：[lujun9972][b]
|
||
译者：[译者ID](https://github.com/译者ID)
|
||
校对：[校对者ID](https://github.com/校对者ID)
|
||
|
||
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出
|
||
|
||
[a]: https://opensourceforu.com/author/bhanu-poluparthi/
|
||
[b]: https://github.com/lujun9972
|
||
[1]: https://i0.wp.com/opensourceforu.com/wp-content/uploads/2019/11/d8-1.jpg?resize=696%2C397&ssl=1 (d8)
|
||
[2]: https://i0.wp.com/opensourceforu.com/wp-content/uploads/2019/11/d8-1.jpg?fit=788%2C449&ssl=1
|
||
[3]: https://i0.wp.com/opensourceforu.com/wp-content/uploads/2019/11/Figure-1-Drupal-7-theme-structure.jpg?resize=350%2C308&ssl=1
|
||
[4]: https://i2.wp.com/opensourceforu.com/wp-content/uploads/2019/11/Screenshot-from-2019-11-14-16-13-53.png?resize=350%2C298&ssl=1
|
||
[5]: https://secure.gravatar.com/avatar/a0a27865017dd4456f47f0a9e7d964a6?s=100&r=g
|
||
[6]: https://opensourceforu.com/author/bhanu-poluparthi/
|
||
[7]: https://opensourceforu.com/wp-content/uploads/2019/11/assoc.png
|
||
[8]: https://feedburner.google.com/fb/a/mailverify?uri=LinuxForYou&loc=en_US
|