Drupal 8 自定义主题
in PHP with 0 comment, Views is 219

Drupal 8 自定义主题

in PHP with 0 comment, Views is 219

GitHub:https://github.com/drupal/drupal

中文网:http://drupalchina.cn/

Drupal Composer 官网:http://drupal-composer.org/

Drupal 官网:https://www.drupal.org/

安装

Composer 安装

若未安装 Composer,请查阅《Windows 下配置 Composer 环境变量》

安装 Drupal Composer

> composer create-project drupal-composer/drupal-project:8.x-dev drupal --stability dev --no-interaction --no-install
> cd drupal
> composer require "drupal/devel"
> composer update

站点是在 web 目录下

安装模块(可选)

> composer require drupal/ctools
> composer require drupal/token
> composer require drupal/pathauto

安装主题(可选)

> composer require drupal/bootstrap
> composer require drupal/adminimal_theme

Git 安装

> git clone git@github.com:drupal/drupal.git
> cd drupal
> composer install

汉化

若连不上 Drupal 的翻译服务器,可以手动汉化

汉化包:下载 Drupal 8.6.4 汉化包

将下载好的汉化包放到 sites/default/files/translations 目录下即可

自动清理缓存(无缓存)

《Drupal 8 自动清除缓存(disable cache)》

主题机制

Drupal 8 的四个核心主题位于 /core/themes 文件夹内,这些主题都是响应式的。

所有的核心主题(除了基主题)都能充当管理主题进行使用。

|-- core
   |-- themes
      |-- bartik    默认主题
      |-- classy    纯基主题
      |-- engines
      |-- seven     管理主题
      |-- stable    标准主题(默认基主题)
      |-- stark     最简主题(没有任何主题模板和css样式表)

当自定义主题没有指定所依赖的主题时,默认使用 stable 基主题,除非在自定义主题中声明了禁用基主题。

1.png

Seven 主题

Drupal 8 的缺省主题,具有干净的线条,简单的区块,便于后台管理。

Seven 在 Drupal 7 中诞生,用作缺省的管理主题,它的设计目的是增强 Drupal 7 的用户体验。在 Drupal 8 中仍然是缺省的管理主题。

根据样式指南和 CSS 新标准,Seven 中的很多 CSS 正在使用更加抽象、可复用的 CSS 组件。

Seven 会在 8.x 的组件基础上发展,以适应 Drupal 核心和第三方不断增长的需求。

Bartik 主题

Bartik 是一个随 Drupal 7 诞生的简洁主题,在 Drupal 8 下成为缺省的面向用户的主题。

这个主题在 Drupal 8 升级为响应式,并提供了更多新特性。

Bartik 主题非常经典,它的区域划分合理、颜色设置简便。我们日常创建网站,原则上使用该主题就可以满足基本的需求。

Stable 主题

Stable 在 Drupal 8 中是用来作为核心标记、CSS 以及 JS 的向下兼容层而存在的。

当自定义主题没有指定基主题时,就会自动使用 Stable 主题。

Drupal 8 核心通过这一主题提供了一个最小化的标记集。

对前端开发者来说,可以在这个基础上加入更加丰富的内容,而无需去移除 Drupal 8 自带的缺省类。

对 Bootstrap 或者 Foundation 这样的前端框架尤其有益。

自定义主题

Drupal 8 允许安装第三方贡献主题,在 Drupal 8 官网有很多第三方贡献主题供下载。

Drupal 8 规定:自定义主题统一放在 /themes 目录下,与核心自带主题的 /core/themes 目录相区分。

创建自定义主题的约定规则(或步骤):

【注】通过 Composer 安装的 Drupal

1、在网站根目录的 /themes 文件夹下创建一个文件夹,命名自定义(以下使用 myTheme 命名),不允许用中文。

2、在 /themes/myTheme 文件夹下创建 cssimagesjstemplates 文件夹,分别用于放置样式表、图片、js脚本和模板文件。

3、在 /themes/myTheme 文件夹下创建 myTheme.info.yml 文件,用以申明主题的必要信息。复制的时候将 # 注释全部删掉。

name: myTheme
type: theme
description: '这是我的第一个自定义主题'
core: '8.x'
base theme: classy

libraries:
  - myTheme/global-styling

regions:
  header: Header
  primary_menu: 'Primary menu'
  page_top: 'Page top'
  page_bottom: 'Page bottom'
  breadcrumb: Breadcrumb
  content: Content

4、在 /themes/myTheme 文件夹下创建 myTheme.libraries.yml 文件,用以引入 CSSJS 文件。

global-styling:
  version: VERSION
  css:
    theme:
      css/style.css: {}
  js:
    js/main.js: {}

5、上述两个文件的文件名前缀必须与主题目录名保持一致。

6、保存所有文件,启用自定义主题。

Twig 引擎

Drupal 8 引入了新的主题引擎 Twig,使得 PHP 不再是主题化 Drupal 的必备知识,这有效降低了 Drupal 新手的学习门栏。

优点

1、基于标签的语法提高了主题层的安全性

2、在模板文件中不再混合 PHP 和 HTML

3、预处理函数的减少使得主题系统更加简单

4、易于学习且一致性强的标签语法,更适合模块开发中最常见的使用案例

5、模板文件的重用性(通过 Twig Includes)

6、IDE 整合(Netbeans/Vim/PHPStorm/Eclipse/Textmate/Sublime)

7、完善的文档(Twig 文档)

8、促进 Symfony 和 Drupal 两大开源社区的密切合作

基本用法

输出一个变量

{{变量}} 的方式输出模板中的一个变量,例如 {{ foo }}{{ foo.bar }}

注释

{# 这是被注释的文本 #}

条件判断

{% if site_slogan %}
    <div class="site-slogan">{{ site_slogan }}</div>
{% endif %}

循环

{% for item in items %}
    {{ item.content }}
{% endfor %}

调试

Drupal 8 核心的一个新特性就是 Twig 调试工具。

这一工具让开发者可以通过跟踪,来得知某些标记来自于哪一个模板文件。

要启用 Twig 调试,可以在 wtig.config 文件中把 debug 参数设置为 true

具体做法:将 /sites/default/default.services.yml 复制一份到相同目录,并重命名为 services.yml,将其中的 debug 参数设置为 true

Devel 和 Kint

在 PHP 中要输出(模板文件中)所有的可用变量,可以使用 dump() 函数。要获取一个特定变量的内容,只要把变量传递给这个函数即可。

当使用 dump() 的时候,可能会遭遇白屏。这个命令会递归遍历和输出所有变量,造成大量内存消耗。

dump() 在调试单个变量的时候很好用,但是在输出所有变量的时候就比较辛苦了。

这就是使用 Devel Module 的时机了,在这个第三方模块的很多子模块中,有个将 Kint 的模块,它提供了一个友好的界面来展现调试数据。

下载安装并启用 Devel 以及 Kint:

> composer require drupal/devel

手动安装看《学习在Drupal8中调试Twig》《Devel Modules》

主题模板

在 Drupal 8 中,theme_函数名 已经不复存在,几乎所有的核心主题(以及模块)都包含了新的名为 templates 的目录。

在这个目录中保存了 Twig 的模板文件。

常用模板命名规则

模板说明
htmlhtml.html.twig 为默认的 html 模板文件
pagepage.html.twig 为所有页面的默认 html 模板文件
特殊命名:
page--front.html.twig 定义首页 html 模板文件
page--node.html.twig 定义所有节点的 html 模板文件
page--node--1.html.twig 定义节点1的 html 模板文件
【注】优先特殊命名模板文件,没有则使用默认模板文件
block如果有一个区块,位于 help 区域,id 为 2:
block.html.twig 定义所有区块的显示
block--help.html.twig 定义 help 区域内的所有区块显示
block--block.html.twig
block--block--2.html.twig 定义 id 为 2 的区块显示
nodenode 模板除了可以根据路径来确定命名规则,还可以通过节点类型来确定命名,
例如 node/3 这个文章为 article 类型:
node--article.html.twig 定义 article 类型的节点显示
node--3.html.twig 定义 node /3 的节点显示
drupal 默认只有 page 和 node 可以直观的通过路径来确定模板命
regionregion.html.twig
region--help.html.twig

模板的就近使用原则:当前主题若有适合的模板就选择当前主题的模板。当前主题没有的模板就选择基主题的模板。

套用网站源码

1、将网站源码放入 myTheme 文件夹下(回看上面:自定义主题)

2、根据网站源码结构将 cssjs 写入 myTheme.libraries.yml 文件

3、所有 html 文件都放入 templates 文件夹下,根据模板命名规则修改

4、以 index.html 为例,将 index.html 修改为 page-front.html.twig 放入 templates

5、删除 <body></body> 标签以外的所有代码,包括 <body> 标签本身

6、删除 js 链接的相关代码

7、在 img 引用路径前加上 {{ base_path }}themes/myTheme

8、配置自动清理缓存(无缓存)

Responses
选择表情