如何在主题中重写ajax-进度-throbber？

Question

在我的Drupal 7站点中，我创建了一个自定义主题。在我的主题中，我希望更改AJAX进度throbber HTML结构，默认情况下，该结构如下。

<div class="ajax-progress ajax-progress-throbber"><div class="throbber"> </div><div class="message">Please wait...</div></div>

我搜索了很多关于这个问题，但我找不到任何有用的文件或样本。

Answer 1

对于Drupal 8，有一种新的方法可以按照这个变化记录来实现

将以下内容添加到相应的文件中

THEMENAME.info.yml

libraries-extend:
  core/drupal.ajax:
    - THEMENAME/throbber

THEMENAME.libraries.yml

throbber:
  css:
    css/throbber.css: {}
  js:
    js/throbber.js: {}
  dependencies:
    - core/jquery
    - core/drupal

js/throbber.js

/**
 * @file
 * Replaced Drupal cores ajax throbber(s), see: https://www.drupal.org/node/2974681
 *
 */
(function ($, Drupal) {
  Drupal.theme.ajaxProgressThrobber = function () {
    return "<div class=\"ajax-spinner ajax-spinner--inline\"><span class=\"ajax-spinner__label\">" + Drupal.t('Loading …', {}, {
      context: "Loading text for Drupal cores Ajax throbber (inline)"
    }) + "</span></div>";
  };
  
  Drupal.theme.ajaxProgressIndicatorFullscreen = function () {
    return "<div class=\"ajax-spinner ajax-spinner--fullscreen\"><span class=\"ajax-spinner__label\">" + Drupal.t('Loading …', {}, {
      context: "Loading text for Drupal cores Ajax throbber (fullscreen)"
    }) + "</span></div>";
  };
    // You can also customize only throbber message:
    // Drupal.theme.ajaxProgressMessage = message => '<div class="my-message">' + message + '</div>';
})(jQuery, Drupal);

css/throbber.css

// optional code of your ajax-spinner classes

另一种选择是使用阿贾克斯_装载机模块，它允许您自定义throbber。