关于 Drupal & jQuery

目录

theme.info.yml文件

theme.libraries.yml文件

Drupal.behaviors

data-once 属性

.eslintrc.json 文件

文件中可能包含的内容：

---

theme.info.yml文件

theme.info.yml文件是Drupal主题的信息文件，用于定义和配置主题的基本信息、功能和样式。该文件包含了主题的名称、描述、版本号、作者、主题区域和样式表等信息。

大致有以下作用：

1. 定义主题的基本信息，如名称、描述、版本号和作者等。
2. 声明主题所支持的核心版本和其他模块的依赖关系。
3. 指定主题的父主题（如果有的话）。
4. 定义主题的区域（如header、content、footer等）和其对应的样式表。
5. 指定主题所使用的库（libraries）和其对应的样式表和脚本。
6. 配置主题的设置选项，如颜色样式、布局等。

第4点主题的区域，可以根据需求自行配置所需的区域。

theme.libraries.yml文件

在Drupal中，theme.libraries.yml文件用于定义主题的库（libraries）。库是一组相关的CSS和JavaScript文件，可以在主题或模块中使用。

theme.libraries.yml文件包含了库的名称、版本号、依赖关系以及所包含的CSS和JavaScript文件的路径。通过使用libraries.yml文件，开发人员可以轻松地管理和加载主题所需的库，并将其应用于相应的页面或元素。

在主题中定义库后，可以在主题的模板文件或主题的.info.yml文件中通过调用库的名称来加载所需的CSS和JavaScript文件。这使得主题的开发人员能够更好地组织和管理主题的资源文件，并将它们应用到不同的页面和元素上。

Drupal.behaviors

Drupal.behaviors是一个对象，用于组织和管理Drupal的JavaScript代码。它可以包含多个behavior，每个behavior都是一个包含attach函数的对象。当页面加载完成后，Drupal会自动调用这些attach函数来执行相应的JavaScript代码。

ElementNew ：命名空间。它是独一无二的。它可以是模块名称，但这不是强制性的。

Attach ：这包含应该执行的实际函数。

context ：第一次加载页面时，上下文将包含整个文档，但在 AJAX 请求之后，它将保存所有新加载的元素。在这种情况下，跨度。这样，我们就可以在 AJAX 请求上处理所需的元素本身，而不必考虑最初加载的整个文档。

settings ：这包含通过PHP传递到 Javascript 的信息，类似于通过 Drupal.settings 访问它。

data-once 属性

Drupal中，data-once属性是一种用于标记DOM元素的自定义属性。它通常与JavaScript行为一起使用，用于确保一个特定的JavaScript行为只被附加到一个DOM元素上一次。

当在Drupal的JavaScript行为中使用once函数时，它会接收两个参数：行为的名称和一个选择器。该选择器可以是一个CSS类、一个ID或任何有效的jQuery选择器。

在Drupal的行为中，通过将data-once属性设置为行为的名称和选择器，可以确保该行为只会被附加到具有匹配选择器的DOM元素上一次。这可以避免在DOM元素被多次加载或刷新时重复附加行为。

例如，可以在DOM元素中添加data-once属性如下：

<div class="paragraph--type--global_hero_slider" data-once="global_slide"></div>

然后，Drupal的行为可以使用once函数来附加到具有匹配选择器和行为名称的元素上一次。这样，无论DOM元素被多次加载或刷新，行为都只会被附加一次。

.eslintrc.json 文件

在 Drupal 中，.eslintrc.json 文件用于配置 ESLint（JavaScript 代码静态分析工具）的规则和选项。ESLint 可以帮助开发人员检查代码中的错误、风格问题和潜在的问题，以确保代码的质量和一致性。

.eslintrc.json 文件是一个 JSON 格式的配置文件，其中包含了一系列规则和选项。这些规则和选项可以用来定义代码的编码风格，包括缩进、变量命名、代码注释等。开发人员可以根据自己的项目需求和团队约定，在 .eslintrc.json 文件中配置适当的规则。

文件中可能包含的内容

parser：设置代码解析器的选项，如 ECMAScript 版本、解析模块等。

extends： 继承其他配置文件的规则和选项。

root:true：指定该配置文件为 ESLint 配置的根文件，在项目根目录中生效。

"parser": "@babel/eslint-parser",
"extends": [
  "airbnb",
  "plugin:prettier/recommended"
],
"root": true,

env：指定代码运行的环境，如浏览器环境、Node.js 环境等。

"env": {
  "browser": true,
  "es6": true,
  "node": true
},

globals：指定全局变量，以避免 ESLint 报错。

"globals": {
  "Drupal": true,
  "once": true,
  "CKEDITOR": true,
  "Swiper": true,
},

settings：配置一些特定的插件的设置。

"settings": {
  "react": {
    "version": "latest"
  }
},

rules：定义规则并指定它们的错误级别，如禁止使用未声明的变量、强制使用一致的缩进等。其中一些规则被设为 "off"，即不启用。

"rules": {
  "prettier/prettier": "error",
  "consistent-return": [
    "off"
  ],
}

plugins：配置使用的 ESLint 插件，以扩展规则和功能。

ignore：指定需要忽略的文件、文件夹或模式。

overrides：对特定文件或文件夹应用不同的 ESLint 配置。