Xin chào. Đã lâu rồi kể từ khi tôi viết một cái gì đó. Tôi muốn chia sẻ một số ví dụ về việc thêm các lớp vào các thành phần khác nhau trong chủ đề Drupal 9. Rất muốn biết bạn đang thêm những lớp nào và làm như thế nào
- Thêm một lớp CSS vào nội dung nếu người dùng đã đăng nhập
- Thêm một lớp CSS vào phần thân nếu bạn đang ở trang đầu
- Thêm lớp tên khu vực vào mẫu khu vực
- Thêm các lớp CSS
{% set body_classes = [
7 và
is_front ? 'is_front' : 'not_front',
]
%}
...{% set body_classes = [
8 vào phần thân
is_front ? 'is_front' : 'not_front',
]
%}
... - Thêm các lớp CSS cho nút Thêm, Chỉnh sửa và Xóa biểu mẫu vào phần thân
- Thêm
{% set body_classes = [
9 và xem các lớp CSS
is_front ? 'is_front' : 'not_front',
]
%}
...{%0 vào phần thân
set region_classes = [
'region_' ~ region|clean_class,
]
%} - Thêm các lớp CSS của riêng bạn vào các nút Lượt xem
- Thêm các lớp CSS của riêng bạn vào các hành động cục bộ
- Thêm các lớp CSS của riêng bạn vào các liên kết Đọc thêm và Nhận xét
- Thêm lớp CSS của riêng bạn vào biểu mẫu tìm kiếm
- Thêm lớp CSS của riêng bạn vào một trường
- Thêm CSS của riêng bạn vào các trường đa giá trị
- Thêm lớp CSS của riêng bạn để tạo mô tả phần tử
- Sử dụng các giá trị trường làm tên lớp CSS
- Sử dụng cài đặt chủ đề làm lớp CSS trong mẫu chủ đề
- Thêm loại khối dưới dạng lớp CSS trong các mẫu khối
Những thứ bạn nên thay thế bằng thông tin của riêng bạn được in đậm
Thêm một lớp CSS vào nội dung nếu người dùng đã đăng nhậpBiến
{%
set region_classes = [
'region_' ~ region|clean_class,
]
%}1 có sẵn trong các mẫu chủ đềTrong mẫu
{%
set region_classes = [
'region_' ~ region|clean_class,
]
%}2 nơi {%
set region_classes = [
'region_' ~ region|clean_class,
]
%}3 liv{% set body_classes = [Thêm một lớp CSS vào phần nội dung nếu bạn đang ở trang đầu
logged_in ? 'logged-in',
]
%}
...
Trong mẫu
{%
set region_classes = [
'region_' ~ region|clean_class,
]
%}2 nơi {%
set region_classes = [
'region_' ~ region|clean_class,
]
%}3 sống{% set body_classes = [
is_front ? 'is_front' : 'not_front',
]
%}
...
Điều này cũng hoạt động trong các mẫu khác như
{%
set region_classes = [
'region_' ~ region|clean_class,
]
%}6, {%
set region_classes = [
'region_' ~ region|clean_class,
]
%}7, {%
set region_classes = [
'region_' ~ region|clean_class,
]
%}8, v.v.{%
set region_classes = [
'region_' ~ region|clean_class,
]
%}9 được tích hợp sẵnTrong
{% set body_classes = [50 [hoặc các mẫu sẽ ghi đè lên nó]
is_front ? 'is_front' : 'not_front',
]
%}
...
{%
set region_classes = [
'region_' ~ region|clean_class,
]
%}Thêm các lớp CSS {% set body_classes = [51 và
is_front ? 'is_front' : 'not_front',
]
%}
...
{% set body_classes = [52 vào
is_front ? 'is_front' : 'not_front',
]
%}
...
{%
set region_classes = [
'region_' ~ region|clean_class,
]
%}3Trong tệp
{% set body_classes = [54
is_front ? 'is_front' : 'not_front',
]
%}
...
{% set body_classes = [5Thêm các lớp CSS cho nút Thêm, Chỉnh sửa và Xóa biểu mẫu vào phần thân
is_front ? 'is_front' : 'not_front',
]
%}
...
Trong
{% set body_classes = [54
is_front ? 'is_front' : 'not_front',
]
%}
...
{% set body_classes = [3
is_front ? 'is_front' : 'not_front',
]
%}
...
Sau đó, trong
{%
set region_classes = [
'region_' ~ region|clean_class,
]
%}2{% set body_classes = [5Thêm các lớp CSS view_id và view display_id vào nội dung
is_front ? 'is_front' : 'not_front',
]
%}
...
{% set body_classes = [6Thêm các lớp CSS của riêng bạn vào các nút Chế độ xem
is_front ? 'is_front' : 'not_front',
]
%}
...
{% set body_classes = [7Thêm các lớp CSS của riêng bạn vào các hành động cục bộ
is_front ? 'is_front' : 'not_front',
]
%}
...
{% set body_classes = [8Thêm các lớp CSS của riêng bạn vào các liên kết Đọc thêm và Nhận xét
is_front ? 'is_front' : 'not_front',
]
%}
...
{% set body_classes = [9
is_front ? 'is_front' : 'not_front',
]
%}
...
Có một số nút. Lặp lại dòng
{% set body_classes = [57 cho từng loại nút bằng cách thay thế
is_front ? 'is_front' : 'not_front',
]
%}
...
{% set body_classes = [58 bằng các loại nút bên dưới nếu cần
is_front ? 'is_front' : 'not_front',
]
%}
...
{% set body_classes = [
59
is_front ? 'is_front' : 'not_front',
]
%}
...{% set body_classes = [
30
is_front ? 'is_front' : 'not_front',
]
%}
...{% set body_classes = [
31
is_front ? 'is_front' : 'not_front',
]
%}
...{% set body_classes = [
32
is_front ? 'is_front' : 'not_front',
]
%}
...{% set body_classes = [
33
is_front ? 'is_front' : 'not_front',
]
%}
...{% set body_classes = [
34
is_front ? 'is_front' : 'not_front',
]
%}
...{% set body_classes = [
35
is_front ? 'is_front' : 'not_front',
]
%}
...
{% set body_classes = [0Thêm lớp CSS của riêng bạn vào một trường
is_front ? 'is_front' : 'not_front',
]
%}
...
Có thể có những cách khác để làm điều này, nhưng đây là một cách
{% set body_classes = [1Thêm CSS của riêng bạn vào các trường đa giá trị
is_front ? 'is_front' : 'not_front',
]
%}
...
{% set body_classes = [2Thêm lớp CSS của riêng bạn để tạo mô tả phần tử
is_front ? 'is_front' : 'not_front',
]
%}
...
{% set body_classes = [3
is_front ? 'is_front' : 'not_front',
]
%}
...
Bạn có thể thay thế
{% set body_classes = [36 bằng loại biểu mẫu nếu cần, chẳng hạn như
is_front ? 'is_front' : 'not_front',
]
%}
...
{% set body_classes = [37 hoặc
is_front ? 'is_front' : 'not_front',
]
%}
...
{% set body_classes = [38. Tìm danh sách tên thành phần biểu mẫu tại đây tại tài liệu API Drupal. các yếu tố biểu mẫu và kết xuấtSử dụng giá trị trường làm tên lớp CSS trong Drupal 8/9
is_front ? 'is_front' : 'not_front',
]
%}
...
Sử dụng các giá trị trường làm tên lớp CSS trong Drupal 8 với Twig
Tôi có Loại khối tùy chỉnh và tôi đã tạo một số trường để kiểm soát kiểu thẻ bằng cách sử dụng các giá trị trường dưới dạng CSS…
mã sarah. Trung bình. com
Sử dụng cài đặt chủ đề làm lớp CSS trong mẫu chủ đềTrong ví dụ này, tôi muốn sử dụng chúng trong các mẫu khối của mình
{% set body_classes = [4
is_front ? 'is_front' : 'not_front',
]
%}
...
Sau đó, trong mẫu, ví dụ
{% set body_classes = [5
is_front ? 'is_front' : 'not_front',
]
%}
...
Thông tin thêm và cách thêm cài đặt chủ đề của riêng bạn tại tài liệu chủ đề chính thức của Drupal. Kỹ thuật tương tự này hoạt động hoàn toàn tốt cho cả
{% set body_classes = [39 và
is_front ? 'is_front' : 'not_front',
]
%}
...
{% set body_classes = [50
is_front ? 'is_front' : 'not_front',
]
%}
...