如何从头开始创建一个简单的响应DRUPAL 8主题

hrs 提交于 2019/07/27 - 23:51 , 周六

任何Drupal开发人员需要做的第一个工作之一就是了解Drupal如何工作并习惯它。从头开始创建Drupal主题是他们绝对需要的技能。

但是drupal主题可能很难,而且势不可挡,特别是对于没有这方面经验的新用户。

但别担心。当我们打算通过一个详细的过程来创建您自己的基本和响应式drupal 8主题时,让您的思绪消失。

为什么要从头开始创建D8主题?

  • 了解drupal主题如何工作 - 为什么会有这样一个步骤,为什么你需要这些文件。
  • 有自己的基本主题,而不是依赖别人的产品。
  • 提高Drupal教学技巧。最有用的学习方法是从头开始练习并为自己创造一个。
  • 了解Drupal 8和Drupal 7主题之间的区别。

假设

  • 阅读我们关于基本Drupal 8主题的帖子(如果你没有,没有问题。你仍然可以创建一个)。
  • 关于样式的基本知识(html,css)。
  • 关于响应式设计的基础知识(我们使用Bootstrap进行响应)(如果你不想使用Bootstrap,请跳过这个)

了解主题文件夹结构和主题文件

在开始之前,我们需要知道完整的D8主题结构是什么样的。这是为了帮助您在头脑中获得可视图像,以便在后续步骤中更轻松地完成工作。

| - config
| | -install 
| | | -themename.settings.yml 
| | -schema 
| | | -themename.schema.yml 
| - css
| | -style.css 
| - js
| | -business.js 
| - images
| | -buttons.png 
| - 包括
| | -bootstrap 
| | -flexlider 
| - templates
| | -block.html.twig 
| | -comment.html.twig 
| | -html.html.twig 
| | -maintenance-page.html.twig 
| | -node.html.twig 
| | -page.html.twig 
| - favicon.ico
| - logo.png
| - screenshot.png
| - themename.breakpoints.yml
| - themename.info.yml
| - themename.libraries.yml
| - themename.theme

以下是您可以在D8主题中找到的最常见主题文件和键的说明。

  • .info.yml
    此强制文件提供有关您的主题的信息
  • .libraries.yml
    定义你的库(主要是你的JS,CSS文件)。
  • .breakpoints.yml
    定义适合不同屏幕设备的点。
  • .theme
    PHP文件,用于在变量与.html.twig文件中的标记合并之前存储变量的条件逻辑和数据预处理。
  • /css
    你的css文件所在的位置。必须在info和libraries文件中定义才能运行。
  • /js
    你的js文件所在的位置。必须在info和libraries文件中定义才能运行。
  • /images
    存储主题图像的位置。将图像放在此文件夹中是一种很好的做法。
  • /includes
    其中放置了第三方图书馆(如Bootstrap,Foundation,Font Awesome等)。将它们存储在此文件夹中是一种很好的做法
  • /templates
    放置所有模板文件(提供主题页面的html标记的文件)。
  • logo.png
    你的主题标志,如果你正在使用它。
  • favicon.ico
    你的主题图标,如果你正在使用它。
  • screenshot.png
    你的主题截图将显示在admin/appereance

您的主题布局显示

我们应该首先确定网站布局的样子。我们将使它变得非常简单。如下所示,您的Drupal模板将包含标题,侧边栏,内容区域和页脚。

内容

侧边栏

页脚

在掌握了关于模板文件夹,文件和主题布局的一些基本想法之后,让我们转到主要部分 - 创建一个简单的响应式Drupal 8模板。

一步一步创建你的Drupal主题

1.创建主题文件夹

你必须知道的最重要的事情是,在Drupal 8中,主题文件夹位于core/theme,而不是像Drupal 7中的sites / all / theme。基本主题文件夹将包含图像,CSS,JS,模板的子文件夹(这个包含模板文件),并包含(存储第三方库)。
我们将创建一个基本的主题文件夹结构如下:

  • 主题
    •      CSS
    •      JS
    •      模板
    •      包括

2.创建.info.yml文件

Drupal模板引擎如何扫描您的主题信息?该.info.yml文件就是答案。
无可否认,.info.yml文件是您首先需要包含的最重要的文件。
请注意,如果您熟悉Drupal 7主题系统,则不再应用[theme_name] .info。在D8中,您必须使用.info.yml信息文件的扩展名。

完整的info.yml文件将具有以下以下键:

  1. name (必填)
    主题的名称,将显示在管理/外观D8管理员中
  2. description(可选,但建议)
    您想要描述的主题,也出现在管理/外观中
  3. version(可选)
    主题的版本。它将显示主题名称。
  4. type(必填)
    通知Drupal有关扩展类型的信息。例如主题,模块或配置文件。
  5. core(必需)
    支持的Drupal核心主要版本
  6. base theme(可选但建议使用)
    指明自定义主题将继承的基本主题。如果没有定义,Drupal将使用“稳定”作为基本主题。
  7. region(可选)
    定义放置块的主题区域。如果不在.info.yml文件中声明任何区域,Drupal将使用核心的默认区域。请记住,如果您只定义一个区域,则不再应用默认区域。如果在info文件中定义区域,则需要存在“content”区域

现在,对于.info.yml文件,我们将包含这些值

名称:基础
类型:主题
基础主题:优雅

描述:“现代和响应的Drupal 8主题” 
包:自定义
核心:8.x

区域:
      标题:标题
      标题:标题
      内容:内容
      侧栏:侧栏
      页脚:页脚

headlineheadercontentsidebarfooter已包括在该区域部分。这是为了通知Drupal模板机您的主题将具有这些区域。
但是,在这里定义它们是不够的。这些地区仍然没有出现。您还必须将它们包含在page.html.twig文件中。(我们将在第4步中介绍)。

请注意,classy它用作基本主题。在D8中,有2个默认基本主题 - 稳定和优雅。我们在过去的帖子中解释了两者的不同之处。基本上,

稳定:最小标记和极少数类
Classy:提供一些默认标记,带有合理的样式类

我们喜欢使用Classy,因为它给出了一些预定义的正确类,使样式工作更方便。

3.定义库文件

这是D8的变化。在D7中,您将在.info文件中指出所有库(如样式 - css和scripts -js),现在您必须在单独的文件中定义它们 - .libraries.yml文件。

在您的主题的情况下,我们将style.css用于样式,以及Bootstrap用于响应显示的库。所以我们将把style.css文件放在core/css文件夹中。引导库(bootstrap.css)将位于includes/bootstrap/css目录中。

global-styling:
   version:VERSION 
   css:
     theme:
       includes / bootstrap / css / bootstrap.css:{} 
       css / style.css:{}

4.创建主题区域

4.1了解drupal模板文件

如果你问Drupal如何呈现主题的html,答案是template files。它们都以扩展名命名.html.twig

这是D8中的新更新。由于在D8中Twig取代了D7的PHP引擎,所有tpl.php模板文件都改为.html.twig。这些文件放在templates文件夹中。

让我们浏览每个模板文件的功能。

 

themename.info.yml - 定义主题 themename.theme - 编程主题

html.html.twig - 定义网站上的每个页面

page.html.twig - 定义网站上的每个页面

node.html.twig - 定义站点上的每个节点

region.html.twig - 定义站点上的每个区域

block.html.twig - 定义网站上的每个块

field.html.twig - 定义站点上的每个动态元素

如果要更改默认HTML和页面的显示方式,可以创建上面文件的自己版本。

您现在要更改的最重要文件是page.html.twig。是页面的所谓HTML框架,因为它将呈现页面HTML布局的外观。

Drupal将读取此文件并告知您的主页如何显示,如果您不包含其他模板文件,甚至会显示所有页面的显示方式。

所以现在的工作就是创建一个page.html.twig文件。

4.2创建page.html.twig文件

从空的page.html.twig文件开始。这里存储了主题正文部分的所有代码。该文件包含3个主要元素:

  • 主题的Html标记。
  • 区域定义。
  • 其他内容项的变量(目前,我们希望它是基本的,所以page.html.twig仅用于创建区域)

注意:您也可以使用核心的page.html.twig core\modules\system\templates\page.html.twig作为参考,并根据您的需要更改此文件。

我们将创建一个基本的HTML区域的页面,包括标题标题,和页脚区域。请注意,如果添加这些区域,则必须先在info.yml文件中定义它们。

<div id="page"> <section id="headline"> </section> <header> </header> <section id="main"> </section> <footer> </footer> </div>

接下来,将页面的所有区域放入Bootstrap容器中,以便于响应。
我们将在每个部分(标题,标题,主页脚,页脚)之间添加这些代码。

<div class="container">... </div>

对于内容和侧边栏区域,我们将使用Bootstrap的列类,以便将这两个区域划分如下:
主要内容将占站点宽度的75%,侧栏将占25%。那是桌面。
对于移动屏幕,主要内容和侧边栏将显示为全宽(100%)。

您的主要部分代码将如下所示

<section id="main"> <div class="container"> <div class="row"> <div id="content" class="col-md-9 col-sm-9 col-xs-12"> {{ page.content }} </div> {% if page.sidebar %} <aside id="sidebar" class="sidebar col-md-3 col-sm-3 col-xs-12"> {{ page.sidebar}} </aside> {% endif %} </div> </div> </section>

page.html.twig文件的最后一步是将这些树枝代码添加到标题部分,以将它们呈现给页面。(如果您不知道twig语法,请返回我们过去的帖子,或阅读twig语法文档)。

{%if headline.sidebar%} 
   {{headline.sidebar}} 
{%endif%}

上面的代码创建了一个条件来检查标题区域是否包含某些内容。如果有,标题区域将被打印出来。这是一种很好的做法,可确保不会在页面上打印空标记。

现在将相似和相关的代码添加到标题,内容,侧边栏和页脚。

内容部分是一个例外。它不需要条件语句,因为内容区域中总会存在某些内容。

完成后,page.html.twig文件的完整代码将如下所示:

<div id="page"> {% if page.headline %} <section id="headline"> <div class= "container"> {{ page.headline }} </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-9 col-sm-9 col-xs-12"> {{ page.content }} </div> {% if page.sidebar %} <aside id="sidebar" class="sidebar col-md-3 col-sm-3 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>

5.创建主题内容

现在您已经为主题提供了足够的定义,让我们开始启用主题,并创建内容。

5.1启用主题

在激活之前,您的主题将无效。
转到/admin/appearance,找到您的基础主题,然后选择设置为默认值。

5.2将内容放在各自的区域

Drupal上的每个部分都将被称为块。要使其显示在正确的位置,您需要将其放在正确的区域。

由于我们已创建区域,导航到basis/admin/structure/block,您将看到许多部分,包括标题,标题,内容,侧边栏,页脚。
对于您的基础主题,我们希望它具有可见的网站设计布局。

标题 - 网站徽标和菜单

内容 - 您的帖子内容

边栏 - 搜索表单

页脚 - 由Drupal页脚提供支持

为此,请将这些块放在相关区域中 basis/admin/structure/block

头 主导航(您的菜单) 网站品牌(您的徽标和标语) 内容(您的头版显示) 侧边栏 搜索表格 页脚 由Drupal提供支持

5.3。创建徽标

默认情况下,Drupal将logo.svg在主题\ logo.svg中查找徽标显示。所以你需要创建一个来启用它。
您还可以选择要显示的内容 - 网站徽标,网站名称或网站标语/admin/structure/block/manage/sitebranding

5.4创建主题截图

您的屏幕截图将显示在管理界面中您主题旁边admin/appearance。要创建一个,请放置screenshot.png在主题目录中命名的图像文件。

6.为您的主题设计样式

现在,您可以使用您的网页设计,前端技巧和创意来创建您喜欢的主题外观。对于我们的D8主题,我们使用Bootstrap进行响应,使用SASS进行风格化。但这是我们的工作方法。做你想做的事。

7.享受结果

最后,您有一个响应式Drupal主题,左侧是菜单和主要内容,右侧是带搜索表单块的侧边栏。并根据您的前端即兴技巧设计它。

下载主题

您可以使用我们在本文中指导您的主题作为参考。请注意,我们在style.css文件中创建了非常基本的样式,使页面不那么粗糙。因此,如果您想要设置自己的主题样式,只需根据自己的喜好更改css文件即可。

问题
如果您对创建Drupal 8主题的步骤有任何疑问,或者有关Drupal 8主题的任何问题,请在下面发表评论。

标签

The website encountered an unexpected error. Please try again later.