Drupal 用于 JavaScript 的 Twig 扩展

Drupal 开发者通常使用样式引导工具来记录/播放项目的前端组件. 这些风格引导工具大多用JavaScript来编写,并且不易与Twig中的PHP代码相融合. 幸运的是,Twig有两个不同的港口进入了JavaScript, Wig.js 财务报告和审定财务报表 旋转。 。 。 .

这个工程是Drupal 9的Twig扩展的JavaScript端口,用于Twig.js或Twing.

安装

为了让这个项目成功,你 必须安装 Twig.js 或 Twing 。 。 。 .

安装 Twig.js : npm install --save-dev twig

要安装 Twing : npm install --save-dev twing

然后用 :
npm install --save-dev drupal-twig-extensions

使用量

在你的Twig模板中,只要遵循下面的集成代码就可以像这样使用Drupal扩展:

{{ 'Hello World!'|drupal_escape }}

Twig.js 1.15.0 或晚点

如果你使用Twig.js和 import 语句(即 ES 模块语法) 在您的 JavaScript 中, 使用以下 JavaScript 与 Twig 集成 :

import Twig from 'twig';
import { addDrupalExtensions } from 'drupal-twig-extensions/twig';

// Add the extensions for Drupal.
addDrupalExtensions(Twig, {
  // Optionally, set options to configure how the Drupal
  // extensions should behave. See "Options" below for
  // details.
});

如果你使用Twig.js和 require 在您的 JavaScript 中, 语句( 即 commonJS 语法), 使用以下 JavaScript 与 Twig 整合 :

const Twig = require('twig');
const { addDrupalExtensions } = require('drupal-twig-extensions/twig');

// Add the extensions for Drupal.
addDrupalExtensions(Twig, {
  // Optionally, set options to configure how the Drupal
  // extensions should behave. See "Options" below for
  // details.
});

转会5.1.0或后会

如果你使用Twing和 import 在您的 JavaScript 中的语句( 即 ES 模块语法), 使用以下 JavaScript 与 Twing 集成 :

import { TwingEnvironment, TwingLoaderRelativeFilesystem } from 'twing';
import { addDrupalExtensions } from 'drupal-twig-extensions/twing';

// Create an instance of the Twing Environment.
const twingEnvironment = new TwingEnvironment(
  new TwingLoaderRelativeFilesystem(),
);

// Add the extensions for Drupal.
addDrupalExtensions(twingEnvironment, {
  // Optionally, set options to configure how the Drupal
  // extensions should behave. See "Options" below for
  // details.
});

// If you use twing-loader, it will need access to the same
// twing environment.
export default twingEnvironment;

如果你使用Twing和 require 在您的 JavaScript 中, 使用以下 JavaScript 语句( 即 commonJS 语法) 与 Twing 整合 :

const { TwingEnvironment, TwingLoaderRelativeFilesystem } = require('twing');
const { addDrupalExtensions } = require('drupal-twig-extensions/twing');

// Create an instance of the Twing Environment.
const twingEnvironment = new TwingEnvironment(
  new TwingLoaderRelativeFilesystem(),
);

// Add the extensions for Drupal.
addDrupalExtensions(twingEnvironment, {
  // Optionally, set options to configure how the Drupal
  // extensions should behave. See "Options" below for
  // details.
});

// If you use twing-loader, it will need access to the same
// twing environment.
module.exports = twingEnvironment;

添加 DrupalExtension () 的选项

通常,这些扩展会从德鲁帕尔本身得到它们的配置. 由于这是 JavaScript 环境, 您需要自己提供一些配置; 只要在第二个参数中添加指定的属性 addDrupalExtensions。 。 。 .

addDrupalExtensions(twigOrTwing, {
  // Set the active theme's machine name; defaults to 'stark'.
  active_theme: 'zen',

  // Set the active theme's path. Uses the active_theme name
  // to determine the default value. Core themes default to
  // 'core/themes/[active_theme]'. Other themes default to
  // 'themes/custom/[active_theme]'.
  active_theme_path: 'themes/contrib/zen',

  // Set the base_url of the Drupal install; defaults to '/'.
  base_url: '/',

  // Override any of Drupal's default stream wrappers.
  // Or add your own stream wrappers; new stream wrappers will
  // be merged with the default ones.
  streamWrapper: {
    'public://': 'sites/default/files',
    'private://': 'sites/default/private',
    'temporary://': 'sites/default/tmp',
  },

  // Override any of Drupal's default date_format patterns.
  // Or add your own custom formats; new formats will be
  // merged with the default ones.
  date_format: {
    long: 'Y-m-d H:i:s',
  },
});

如果您不想指定任何配置选项,可以跳过第二个参数. 像这样:

addDrupalExtensions(twigOrTwing);

执行详情

过滤器

这个 过滤器的官方列表在 Drupal 9 的代码中 说明 Drupal 的 Twig 过滤文档。 。 。 .

• clean_class
• clean_id
• drupal_escape
• format_date
• placeholder
• render^1个
• safe_join
• t^2个
• trans^2个
• without

^1个 这个 render 过滤器与它在 Drupal 中的功能不同; 它只是将输入返回到字符串中 toString 方法。 它的被实施是为了在Twig模板中使用这个 Drupal 特定过滤器时防止Twig 编译被打破.

^2个 这些滤波器与Drupal的功能不同;它们只是不作修改地返回输入. 它们的实施是为了防止Twig编译在Twig模板中使用这些Drupal特定过滤器时被打破.

职能

这个 正式的函数列表在 Drupal 9 的代码中 说明 Drupal 的 Twig 函数文件。 。 。 .

• active_theme
• active_theme_path
• attach_library^3个
• create_attribute
• file_url
• link
• path^2个
• render_var^1个
• url^2个

^1个 见 上文关于 render 过滤器。 。 。 .

^2个 这些功能与德鲁帕尔的功能不同;它们只是不作修改地返回输入. 它们的实施是为了防止Twig编译在Twig模板中使用这些Drupal特定功能时被打破.

^3个 此函数在 Drupal 中并不相同; 它只是返回一个空字符串 。 它的被执行是为了在Twig模板中使用这个 Drupal 特定功能时防止Twig 编译被打破.

标记

注:该项目尚未实施标记.

这个 官方标签列表在 Drupal 9 的代码中。 。 。 .

• trans, (中文(简体) ), plural,以及 endtrans: 这些标签在 Drupal的 " Twig模板翻译 " 文件。 。 。 .

测试和操作员

Drupal 9目前没有执行任何自定义的Twig测试或Twig操作器.