正在开发一个 Drupal 站点,使用了最新的版本 8。因为春节的关系加上自己拖延症晚期,进度已经完全不知道飞去哪儿咯。

笔记参考了 官方文档视频教程

1. 基本配置

在 drpual 安装目录下的 themes 文件夹中建立 custom 文件夹,并在其中创建以主题命名的文件夹,我这里就产生了一个这样的路径:drupal8/themes/custom/Metro16/,在该路径下创建 Metro16.info.yml 文件,写入:

name: Metro16
description: 使用 Metro 设计语言创作的一款主题
type: theme
core: 8.x
stylesheets-remove:
  -

drupal8_theme_dev_0

保存,来到 drupal 后台,在 外观 菜单中安装我们刚才创建的主题,并设置它为默认。在后台 -> 配置 -> 开发 -> 性能菜单内将合并 CSS 和 JS 的勾选去除,保存。此时前台就是没有 CSS 的样子。

drupal8-theme-dev-1接下来去除前台默认的 CSS,在 Metro16.info.yml 文件中追加如下内容:

stylesheets-remove:
  - core/themes/stable/css/views/views.module.css
  - core/themes/stable/css/system/components/tree-child.module.css
  - core/themes/stable/css/system/components/tablesort.module.css
  - core/themes/stable/css/system/components/tabledrag.module.css
  - core/themes/stable/css/system/components/sticky-header.module.css
  - core/themes/stable/css/system/components/resize.module.css
  - core/themes/stable/css/system/components/reset-appearance.module.css
  - core/themes/stable/css/system/components/progress.module.css
  - core/themes/stable/css/system/components/position-container.module.css
  - core/themes/stable/css/system/components/nowrap.module.css
  - core/themes/stable/css/system/components/js.module.css
  - core/themes/stable/css/system/components/item-list.module.css
  - core/themes/stable/css/system/components/hidden.module.css
  - core/themes/stable/css/system/components/details.module.css
  - core/themes/stable/css/system/components/clearfix.module.css
  - core/themes/stable/css/system/components/container-inline.module.css
  - core/themes/stable/css/system/components/fieldgroup.module.css
  - core/themes/stable/css/system/components/autocomplete-loading.module.css
  - core/themes/stable/css/system/components/align.module.css
  - core/themes/stable/css/system/components/ajax-progress.module.css

在 drupal8/themes/custom/Metro16/ 路径下创建文件:Metro16.libraries.yml,在其中写入如下内容:

globle-css:
  css:
    theme:
      css/style.css: {}
globle-js:
  js:
    js/main.js: {}
  dependencies:
    - core/jquery

drupal8-theme-dev-4.png回到 Metro16.info.yml,补充如下内容:

libraries:
  - Metro16/globle-css
  - Metro16/globle-js

做完以上这些后,基本配置就到此结束。在后台清空所有缓存,使用未登录状态查看前台首页源代码,看到下图红框就表示成功完成操作(JS 文件的引入在源码末尾附近,不在图中)。

drupal8-theme-dev-5

2. Drupal 的命令行工具 Drush

首先安装 Drush,http://docs.drush.org/en/master/install-alternative/

若执行 drush status 命令提示 command not found,尝试执行 export PATH="$HOME/.composer/vendor/bin:$PATH" 来解决此问题。

了解几个用于 Drupal 8 的命令

  • drush cache-rebuild
  • drush pm-download
  • drush pm-enable
  • drush pm-uninstall
  • drush sql-dump
  • drush browse
  • drush archive-dump
  • drush archive-restore

3. Drupal 8 中的区块和区域

所谓区域(regions),就是指网页中的 Header、Sidebar、footer 等部分,而区块(block)则可以放置在区域中。简单来说,区域用来分界,是抽象的;区块提供功能,是具体的。

4. 安装新模块

5. twig 模版

首先打开 twig debug,这样就可以通过右键审查元素的方式来获悉页面的每个部分是从哪个 twig 模版输出的。定位到 drupal 根目录下的 sites/default/ 目录,可以看到 default.services.yml 文件。打开它,

查找文本:twig.config,将下方的 debug: false 改为 debug: trueauto_reload: false 改为 auto_reload: true,以及 cache: true 改为 cache: false 如下图所示:

drupal8-theme-dev-twig-debug

6. 将 Bootstrap 应用到 Drupal 8

  • 访问 https://www.drupal.org/project/bootstrap,下载或复制主题链接。

  • 到后台,管理 -> 外观 -> 安装新主题,可以在线安装也可以直接上传。若都不行,请将解压后的主题文件夹放入 Drupal 的 themes 文件夹中。

  • 复制 /drupal/core/themes/bootstrap/starterkits/cdn 文件夹到 themes 文件夹下。这样做使得我们获得了一个子主题。将之前的 Metro 16 的相关内容转移到这里,比如 Metro16.info.yml 文件,也可以直接将 THEMENAME.starterkit.yml 改成 Metro16.info.yml。

  • 转移完毕后,在后台卸载之前的 Metro 16 主题,删掉之前的 custom 文件夹。现在的目录结构将是这样的:

drupal8-theme-dev-bootstrap-cdn

未完待续