渐变

在本章中，您将了解如何：

• 向部分或标题添加渐变。

• 将自定义渐变添加到网站生成器调色板。

标准

在标准中，可以直接从网站生成器中选择多个渐变。但是，对于自定义主题，必须使用 style 属性直接在 section 标记中添加渐变。

使用

<section
   class="s_text_image"
   data-snippet="s_text_image"
   data-name="Text - Image"
   style="background-image: linear-gradient(135deg, rgb(255, 204, 51) 0%, rgb(226, 51, 255) 100%) !important;">
   <!-- Content -->
</section>

要将渐变应用于文本，请使用 font 标签和 text-gradient 类。

<h2>
   <font
      class="text-gradient"
      style="background-image: linear-gradient(135deg, rgb(203, 94, 238) 0%, rgb(75, 225, 236) 100%);">
      A Section Subtitle
   </font>
</h2>

风俗

将自定义渐变添加到网站生成器。这样，用户可以轻松使用它们，而无需手动重新创建它们。

/website_airproof/static/src/website_builder/gradients.js

import { ColorPickerGradientTab } from "@html_editor/main/font/color_picker_gradient_tab";
import { registry } from "@web/core/registry";
import { _t } from "@web/core/l10n/translation";

export class AirproofColorPickerGradientTab extends ColorPickerGradientTab {
   setup() {
      super.setup();
      this.DEFAULT_GRADIENT_COLORS = [
         ...this.DEFAULT_GRADIENT_COLORS,
         "linear-gradient(0deg, rgb(41, 128, 187) 0%, rgb(11, 142, 230) 100%)",
      ];
   }
}

const colorPickerTabs = registry.category("color_picker_tabs");

colorPickerTabs.remove("html_editor.gradient");
colorPickerTabs.add(
   "html_editor.gradient",
   {
      id: "gradient",
      name: _t("Gradient"),
      component: AirproofColorPickerGradientTab,
   },
   { sequence: 60 }
);

注解

将 JavaScript 文件添加到 website.website_builder_assets 包中，以便编辑器加载它。