Thư HTML Drupal

Từ thông báo xác nhận gửi biểu mẫu đến yêu cầu khôi phục mật khẩu, email hệ thống là một phần quan trọng của bất kỳ trang web hoặc ứng dụng nào. Do đó, thiết kế của những email này là một điểm tiếp xúc quan trọng không nên quên. Trong hướng dẫn này, tôi sẽ giải thích từng bước quy trình kích hoạt và định kiểu email HTML tùy chỉnh trong Drupal 8

1. Bật mô-đun

Có rất nhiều mô-đun khác nhau, tôi đã thành công nhất với sự kết hợp của ba mô-đun này. Hệ thống thư, Mime Mail và SMTP

2. Định cấu hình mô-đun

Hệ thống thư

Sau khi các mô-đun của bạn được cài đặt và kích hoạt, hãy chuyển đến trang cấu hình Hệ thống Thư [Cấu hình > Hệ thống > Hệ thống Thư]. Tại đây, bạn sẽ đặt trình định dạng và người gửi thư của mình. Chúng tôi đã thấy kết quả tốt nhất khi kết hợp sử dụng trình gửi thư Mime Mail làm Trình định dạng và Trình gửi thư SMTP làm Người gửi. Cuối cùng, đặt chủ đề để hiển thị email thành chủ đề đang hoạt động của bạn. Bạn có thể bỏ qua cấu hình dành riêng cho mô-đun trừ khi bạn thấy rằng bạn cần nó cho trường hợp sử dụng cụ thể của mình

thư câm

Bây giờ, bạn sẽ định cấu hình Mime Mail [Cấu hình > Hệ thống > Mime Mail]. Tất cả những gì bạn thực sự cần làm ở đây là chọn định dạng văn bản email của bạn. Nếu bạn không sử dụng tệp mail.css, bạn cũng có thể xem xét việc bỏ chọn “Bao gồm biểu định kiểu trang web” để tránh bao gồm quá nhiều kiểu không cần thiết

3. Tạo/sửa đổi các mẫu email cơ sở

Bằng cách sử dụng trình định dạng Mime Mail, chúng tôi có quyền truy cập vào mẫu có tên mimemail-message.html.twig mà chúng tôi có thể ghi đè trong chủ đề của mình. Mẫu này sẽ được sử dụng bởi tất cả các email liên quan đến tài khoản được gửi từ hệ thống, chẳng hạn như tạo tài khoản và khôi phục mật khẩu. Đối với các email được gửi qua mô-đun Webform, mẫu bạn cần là webform-email-html.html.twig. Các mô-đun khác cũng có thể có các mẫu email riêng, vì vậy hãy nhớ kiểm tra tất cả các email được gửi bởi trang web của bạn

4. Áp dụng kiểu

Bây giờ chúng ta đã có các mẫu email của mình, chúng ta có thể bắt đầu áp dụng các kiểu cho các email này. Theo mặc định, Mime Mail sẽ tìm tệp mail.css trong chủ đề của bạn và sẽ đưa tệp đó vào mẫu email của bạn. Mime Mail cũng sẽ tự động xử lý việc chuyển đổi biểu định kiểu thành thuộc tính kiểu nội tuyến trước khi gửi email, nhưng bạn cũng có thể nội tuyến kiểu của mình theo cách thủ công nếu cần. Theo mặc định, Biểu mẫu web không bao gồm bất kỳ biểu định kiểu nào trong email do mô-đun gửi, vì vậy nếu bạn cũng phải thêm các kiểu của mình vào tệp mẫu biểu mẫu web theo cách thủ công

5. Kiểm tra, kiểm tra, kiểm tra

Ứng dụng email nổi tiếng là khó tính khi hiển thị email. Một email có thể xuất hiện hoàn hảo trong Apple Mail nhưng bị hỏng trong Gmail và Outlook. Đó là lý do tại sao việc kiểm tra từng email trước khi gửi chúng cho người dùng thực là vô cùng quan trọng. Bạn có thể thực hiện kiểm tra thủ công bằng cách đăng ký một vài nhà cung cấp email khác nhau và sử dụng từng nhà cung cấp để xem email do trang web của bạn gửi.

Bạn cũng có thể thử gửi một email kiểm tra tới nhiều địa chỉ email cùng một lúc [tôi đã nhờ đồng nghiệp và thậm chí cả các thành viên trong gia đình giúp cung cấp cho tôi một nhóm ứng dụng email đa dạng] bằng dịch vụ miễn phí như Putsmail. Nếu bạn quan tâm đến dịch vụ trả phí, Litmus sẽ tạo ảnh chụp màn hình email của bạn trong các ứng dụng email phổ biến khác nhau để bạn có thể kiểm tra mọi thứ cùng một lúc.

Bạn không thể thực hiện hành động đó vào lúc này

Bạn đã đăng nhập bằng tab hoặc cửa sổ khác. Tải lại để làm mới phiên của bạn. Bạn đã đăng xuất trong một tab hoặc cửa sổ khác. Tải lại để làm mới phiên của bạn

Tháng trước, chúng tôi đã triển khai câu chuyện của người dùng cho bản phân phối Drupal OpenLucius của chúng tôi. chúng tôi cần gửi html sạch từ các mô-đun Drupal 9. Điều này cũng nên được mở rộng, như trong. các mô-đun khác nhau sẽ có thể gửi nội dung khác nhau qua thư trong một mẫu nhất quán. Sau một thời gian mã hóa và thử các mô-đun và tùy chọn khác nhau trong các mô-đun đó, cuối cùng chúng tôi đã kết hợp nó lại với nhau theo một cách đẹp, rõ ràng và có thể mở rộng

Vì vậy, tôi nghĩ sẽ có nhiều người muốn gửi thư html đẹp từ Drupal 8/9 theo chương trình. Tôi đã trích xuất mã và tạo một mô-đun ví dụ riêng biệt, thậm chí có thể cài đặt được

Sao chép và chạy đi

Tôi đã xuất bản nó ở đây trên Github, vì vậy bạn có thể sao chép nó và sử dụng nó để làm bất cứ điều gì bạn cần. Hiện tại nó không phải là một Drupal được xuất bản. dự án org với tất cả các loại nội dung có thể định cấu hình

hướng dẫn cài đặt

Sao chép repo này và cài đặt nó giống như một mô-đun tùy chỉnh trong Drupal; . Mô-đun drupal phụ thuộc vào mô-đun Swiftmailer, mô-đun này phụ thuộc vào mô-đun Mailsystem Drupal. Sau khi bạn cài đặt, ba mô-đun này sẽ được kích hoạt

hướng dẫn cấu hình

Định cấu hình hệ thống thư Đi tới /admin/config/system/mailsystem và sao chép cấu hình này

1. trình định dạng. chọn 'Người đưa thư'
2. Người gửi. chọn 'Mặc định PHP Mailer', bằng cách nào đó nó không hoạt động khi tôi chọn 'Swiftmailer' tại đây. Điều đó đã mất một thời gian loooong để tìm ra
3. Chọn chủ đề đang hoạt động của bạn [tùy chỉnh hoặc đóng góp], điều này là cần thiết để Swiftmailer sẽ phát hiện ghi đè Twig html sạch của bạn cho các email

Sao chép ghi đè mẫu Twig

Sao chép tệp 'swiftmailer--lucius-html-mail. html. twig' vào thư mục '/templates' của chủ đề tùy chỉnh của bạn. Đây là ghi đè mẫu email html sạch mà Swiftmailer sẽ sử dụng sau này và bạn có thể điều chỉnh bất kỳ cách nào bạn muốn

Cấu hình Swiftmailer Xin thông tin cho bạn, tất cả 'Cài đặt vận chuyển' trong cấu hình Swiftmailer có thể để mặc định [xem /config/swiftmailer/transport]

Giải thích code Drupal

1. hook_mail[] trong. tập tin mô-đun

Trước hết, để sử dụng hệ thống gửi thư của Drupal. bạn cần triển khai hook_mail trong. tập tin mô-đun

1. Nhận tên trang web toàn cầu -và email
2. Điều này mất rất nhiều thời gian để tìm ra, nhưng bạn cần xác định các tiêu đề này để thư html Drupal hoạt động
3. Các tham số bổ sung để điền vào mẫu email Twig html

2. Dịch vụ thư Drupal tùy chỉnh 'lucius_html_mail. thư'

Tôi đã triển khai Dịch vụ Drupal tùy chỉnh 'lucius_html_mail. mail', vì khả năng mở rộng trong số những thứ khác. dịch vụ này xử lý tất cả nội dung chung để gửi email, trong khi các mô-đun khác có thể sử dụng dịch vụ này thông qua Quy trình nội xạ phụ thuộc và gửi thư với các tham số khác nhau. nội dung tin nhắn trong trường hợp này

1. Xác định Dịch vụ thư tùy chỉnh của chúng tôi và thêm 2 Dịch vụ bên ngoài
2. Trình xây dựng để hỗ trợ 2 Dịch vụ bên ngoài
3. Xây dựng các biến gửi thư, lặp qua người dùng, lấy tên và email, cuối cùng gửi thư

3. Drupal Route and Controller để kiểm tra và gửi email mẫu

Tôi đã xác định tuyến đường '/send_test_mail'. Nếu bạn truy cập url đó trong trình duyệt của mình, thì mã trong sendTestMail[] sẽ thực thi

Nếu tất cả đều ổn. tất cả người dùng sẽ nhận được thư mẫu

] Vì vậy, hãy đảm bảo rằng bạn đang thử nghiệm điều này trong môi trường mà thư không thể chuyển ra thế giới bên ngoài, ví dụ: chúng tôi sử dụng Docker cục bộ với Mailhog. [

1. Drupal's Dependency Injection đang hoạt động. thêm Dịch vụ tùy chỉnh của chúng tôi 'lucius_html_mail. thư'
2. Chuẩn bị tất cả các tham số cho thư với các văn bản ví dụ tĩnh. Sau đó, gửi thư qua Phương thức dịch vụ của chúng tôi 'sendMail[]'
3. Chức năng trợ giúp đơn giản để có được tất cả người dùng

Vì vậy, nếu bạn truy cập '/send_test_mail', tất cả người dùng sẽ nhận được email giống như thế này

4. Tệp ghi đè Twig tùy chỉnh 'swiftmailer--lucius-html-mail. html. cành cây'

Như đã đề cập trước đó, swiftmailer--lucius-html-mail. html. twig nên được sao chép ở đâu đó vào thư mục /templates của chủ đề tùy chỉnh của bạn. Tôi đã tìm thấy mã html này trong kho lưu trữ mã nguồn mở này. Nó thậm chí còn phản hồi nhanh và sử dụng nhiều kiểu nội tuyến, cần thiết để làm cho nó tương thích với tất cả các ứng dụng email lớn

Như bạn có thể thấy, có các biến Cành, chủ yếu tôi sử dụng các giá trị trong mảng $message. Các biến này phù hợp với các tham số chúng tôi xây dựng trước đó. Hàm Lucius_html_mail_mail[] [hook_mail] biến các tham số của chúng ta thành một mảng $message, có thể được sử dụng trong mẫu Twig như trong hình trên

Vì vậy, điều chỉnh mẫu này theo bất kỳ cách nào bạn muốn hoặc triển khai một mẫu hoàn toàn mới với các biến khác. Giờ đây, tất cả đều nằm trong tay bạn, hãy biến nó theo cách bạn muốn một cách rõ ràng, nhạy bén và có thể mở rộng

tiện dụng. Đề xuất ghi đè tệp mẫu Twig

Nếu bật Chế độ phát triển trong Drupal, bạn có thể xem tất cả các đề xuất mẫu để tiến xa hơn nữa trong tương lai

Gói [lại

Ok, đó là nó cho bây giờ. Hy vọng rằng bây giờ bạn có thể triển khai các email sạch đẹp cho hệ thống Drupal 8/9 của mình. Nếu bạn cần giải thích thêm hoặc bạn không thể làm cho nó hoạt động. làm ơn cho tôi biết