Hãy tưởng tượng một mô-đun có tên là Hình ảnh có thể định cấu hình. Bạn muốn đường dẫn đến hình ảnh có thể được định cấu hình thông qua giao diện người dùng quản trị. Đường dẫn là một chuỗi, vì vậy điều đầu tiên cần làm là xác định cấu hình cho đường dẫn. Trong trường hợp này, đối tượng cấu hình sẽ là configable_picture.settings đường_đến_hình.
configurable_picture/config/schema/configurable_picture.schema.yml:
configable_picture.settings:
gõ: config_object
nhãn: 'Cài đặt hình ảnh có thể định cấu hình'
lập bản đồ:
đường_đến_hình:
loại: chuỗi
nhãn: 'Đường dẫn đến Ảnh'
Bước tiếp theo là tạo một biểu mẫu cấu hình cho phép bạn chỉnh sửa mục cấu hình được xác định trong lược đồ trên. Đây là tài liệu về cách tạo các biểu mẫu cấu hình: https://www.drupal.org/docs/drupal-apis/configuration-api/working-with-configuration-forms
Với các bước trên, bạn sẽ có thể lưu đường dẫn đến hình ảnh trên trang cấu hình mà bạn đã tạo.
Cần có hai bước để cung cấp cài đặt cấu hình đó cho tệp JavaScript. Đầu tiên là thêm một phụ thuộc vào lõi/drupalSettings vào thư viện JS của bạn.
configurable_picture/configurable_picture.libraries.yml:
hình_hình:
js:
đường dẫn/đến/file.js: {}
phụ thuộc:
- lõi/drupalSettings
Sau đó, bạn đính kèm thư viện và cài đặt vào biểu mẫu:
$form['#attached']['library'][] = 'configurable_picture/picture_form';
// Khóa configurableSettings sẽ trở thành không gian tên trong
// đối tượng drupalSettings trong tệp JS.
$form['#attached']['drupalSettings']['configurablePicture'] = [
// Đặt đường dẫn dựa trên giá trị được lưu trong cấu hình:
'pathToPicture' => \Drupal::config('configurable_picture')->get('path_to_picture'),
];
Sau đó, path/to/file.js có thể truy cập đối tượng cài đặt như thế này:
(hàm ($, Drupal, drupalSettings) {
hàm getPathToPicture() {
trả về drupalSettings.configurablePicture.pathToPicture;
}
// Hoặc, từ đối tượng cài đặt trong Drupal.behaviors:
Drupal.behaviors.configurablePicture = {
đính kèm: chức năng (bối cảnh, cài đặt) {
console.log(settings.configurablePicture.pathToPicture);
}
};
}(jQuery, Drupal, drupalSettings));
