Drupal 主题设置

使用 DDEV 安装 Drupal 环境

  • 安装ddev
    1
    $ curl -LO https://raw.githubusercontent.com/drud/ddev/master/scripts/install_ddev.sh && bash install_ddev.sh
  • 搭建环境 # Replace my-site-name
    1
    2
    3
    4
    5
    6
    7
    $ export SITE_NAME=my-site-name

    $ mkdir $SITE_NAME

    $ cd $SITE_NAME

    $  ddev config --project-type=drupal9 --project-name $SITE_NAME --docroot=web --create-docroot
  • 启动 DDEV 容器
    1
    $ ddev start
  • 创建drupal应用程序
    • 如果您的机器上没有安装 Composer，到官网上下载安装，或者使用my-site-nameddev composer
  • 开始安装
    1
    2
    3
    $ ddev composer create "drupal/recommended-project"

    $ ddev composer require drush/drush
  • 安装drupal
    1
    2
    3
    $ ddev drush site:install --account-name=admin --account-pass=admin

    $ ddev launch
  • 安装开发生成模块
    • 下载并安装Devel Generate 模块（Devel 项目的一部分）并使用它来生成一些示例内容
      1
      2
      3
      $ ddev composer require drupal/devel

      $ ddev drush en devel_generate
    • 没有ddev安装
      1
      2
      3
      $ composer require drupal/devel

      $ drush en devel_generate
  • 生成用户、标签和内容
    Devel Generate 带有自定义 Drush 命令，我们可以使用这些命令来生成用户、标签和内容。我们建议您按以下顺序运行命令，以便将您生成的内容分配给随机用户以模拟更真实的体验。
    1
    2
    3
    $ ddev drush devel-generate-users 10
    $ ddev drush devel-generate-terms 20 --bundles tags --max-depth 1
    $ ddev drush devel-generate-content 25
    (optional) (required in Drupal 9, optional for Drupal 8) (optional) (optional) (optional) (optional) (optional) (optional) (optional) (deprecated) (optional)

建立主题

  • 在web/themes目录下建立自己的主题reboot文件夹
    jCpZQA.png
  • 在reboot文件夹下面创建reboot.info.yml(命名规范必须是THEME.info.yml)
  • THEME.info.yml文件配置属性
    参数 是否必填 描述
    name 是 主题名称
    type 是 表示扩展的类型，”module”, “theme”, or “profile”对于主题，应始终将其设置为“主题”。此值区分大小写。
    description 否 主题描述信息
    dependencies 否 一个依赖字符串数组，在 8.9.x 中引入。
    package 否 指定允许您将主题组合在一起的“包”。
    core Drupal 8所需的，如果包含 core _ version _ request 则为可选，对 Drupal 9无效 指定主题兼容的 Drupal 核心版本。
    php 否 所需的最低 PHP 版本。默认为DRUPAL_MINIMUM_PHP常量的值。
    version 否 指定版本。对于托管在 drupal.org 上的主题，版本号将由打包脚本填写。不要手动指定它，而是完全省略版本行。
    libraries 否 要添加到主题处于活动状态的所有页面的库列表（可以包含 CSS 和 JavaScript 资产）
    libraries-override 否 要覆盖的库和资产的集合，更多内容覆盖和扩展库
    libraries-extend 否 附加库时要添加的库和资产的集合
    base theme Drupal9必须, Drupal8可选 一个主题可以通过将其指定为基本主题来继承另一个主题的资源。建议使用 classy 或 stable9（如果使用 Drupal 8 则为 stable）。如果设置为 false，则不使用基本主题。
    hidden 否 指示是否从“外观”页面隐藏主题，使其无法通过 UI 启用/禁用。
    engine 否 主题引擎。默认为“twig”。
    logo 否 logo相对于主题文件的路径。默认情况下，Drupal 将在主题文件夹的根目录中查找名为“logo.svg”的文件并将其用作主题的logo。 .info.yml
    screenshot 否 相对于主题文件的截图路径。屏幕截图应为 588 像素宽和 438 像素高，尽管它们以较小的尺寸显示。默认情况下，Drupal 将在主题文件夹的根目录中查找名为“screenshot.png”的文件，并将其用作“外观”页面上的主题图像。
    regions 否 主题区域列表。（请注意，区域键前面没有破折号。）content区域是必需的。阅读有关将区域添加到主题的更多信息。
    regions_hidden 否 要删除的继承区域列表。
    features 否 在主题“设置”页面上公开的功能列表。
    ckeditor_stylesheets 否 要添加到 CKEditor 框架的样式表列表。

配置好主题之后会在界面的后台找到
jCAIER.md.png

配置regions

区域在主题的.info.yml文件中表示为键/值对，其中键是用于在代码中标识区域的区域的内部名称，值是用户界面在识别地区。出于这个原因，使用在代码和 UI 中都有意义的键/值对和区域名称非常重要，这样任何人都可以轻松理解预期用途。

区域的内容由放置在当前正在查看的页面上可见的区域中的任何块组成，并且通常在包装标记内的主题的page.html.twig模板文件中输出，就像div旨在提供布局和结构一样。

  • info.yml
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    regions:
      header: Header1
      primary_menu: Primary menu1
      secondary_menu: Secondary menu1
      page_top: Page top1
      page_bottom: Page bottom1
      highlighted: Highlighted1
      featured_top: Featured top1
      breadcrumb: Breadcrumb1
      content: Content1
      sidebar_first: Sidebar first1
      sidebar_second: Sidebar second1
      footer_first: Footer first1
      footer_second: Footer second1
      + aaa_content: AAA content
  • page.html.twig(建templates文件夹，把page.html.twig复制进来) 修改内容
    jCm4ts.md.png

资源模块，外部内部引用

Asset Libraries是THEMENAME.libraries.yml文件中的 YAML 数据结构，它指定一个或多个 CSS 和 JavaScript 文件及其设置，并以唯一标识的库名称捆绑在一起。一旦定义了库，将其添加到页面或将其附加到特定类型的元素，无论库的内容如何，​​都以相同的方式完成。这意味着现在有一种统一的机制来添加 CSS 和 JavaScript，无论是添加到模块还是主题中。

  • THEMENAME.libraries.yml
    声明模块 aaa、bbb、ccc，模块中定义需要用到的js、css、依赖包等,
    加载顺序按照文件列出顺序加载
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    # aaa模块
    aaa:
      version: 1.0
      css:
        theme:
          css/aaa.css: {}
      header: true # 设置在头部先加载
      js:
        js/aaa.js: {}

    # bbb模块
    bbb:
      version: 1.0
      css:
        theme:
          css/bbb.css: {}
      js:
        js/bbb.js: {}

    # ccc模块
    ccc:
      version: 1.0
      remote: https://github.com/xoxco/rainbow-text
      license:
        name: MIT
        url: https://github.com/xoxco/Rainbow-Text/blob/master/README.md
        gpl-compatible: true
      css:
        theme:
          css/ccc.css: {}
      js:
        js/ccc.js: {}
      dependencies: # 声明依赖
        - core/jquery
        - my_module/my_library
        - my_theme/my_library
    • remote： 如果库是第三方脚本，则提供存储库 URL 以供参考。
    • license： 如果设置了remote属性，则需要license信息。它有 3 个属性：
      • 名称： 许可证的可读名称。
      • url： 所用库版本的许可文件/信息的 URL。
      • gpl-compatible： 此库是否与 GPL 兼容的布尔值。
  • 定义的模块如何使用
    • 全局使用
      在THEME.info.ymllibraries引入
      1
      2
      3
      4
           libraries:
      - reboot/aaa
      - reboot/bbb
      - reboot/ccc
      jClcXq.md.png
    • 特定页面使用
      在THEME.theme,首页使用aaa模块
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      <?php
      /**
      * Implements hook_preprocess_page() for PAGE document templates.
      */
      function reboot_preprocess_page(&$variables) {
        if ($variables['is_front'] == TRUE) {
          $variables['#attached']['library'][] = 'reboot/aaa';
        }
      }

      jERjKS.md.png

为主题开发配置环境

jEfdw4.md.png
jEfrf1.md.png
jEfgOO.md.png
jEffTH.md.png

什么是模板文件？Drupal 如何确定使用哪个模板？

jE4jWn.md.png
jE5eQx.md.png
jE5QTe.md.png
jE58fA.md.png
jE5wTg.md.png
jE5H6x.md.png

覆盖模板文件

jETxNF.md.png
jE7VAO.md.png

确定模板的基本名称

jV95Sx.md.png
jV9TOO.md.png
jV9xpt.md.png