Files
sisvietnamvn_01/sis_theme/README.md
T
2026-05-27 09:01:38 +07:00

3.5 KiB

S.I.S Cần Thơ Custom Drupal Theme

Theme cao cấp được xây dựng chuẩn hóa cho Drupal 10Drupal 11, mang giao diện và phong cách chuyên nghiệp của Bệnh Viện Đa Khoa Quốc Tế S.I.S Cần Thơ.


🛠 Hướng dẫn Cài đặt & Sử dụng

Bước 1: Sao chép thư mục theme vào dự án Drupal của bạn

Di chuyển hoặc sao chép thư mục sis_theme này vào thư mục chứa các theme tùy chỉnh trong dự án Drupal của bạn:

# Đường dẫn chuẩn trong Drupal:
[thư_mục_gốc_drupal]/web/themes/custom/sis_theme

Bước 2: Kích hoạt Theme trong Drupal Admin

  1. Đăng nhập vào trang quản trị Drupal bằng tài khoản Administrator.
  2. Truy cập vào menu Appearance (/admin/appearance).
  3. Tìm kiếm S.I.S Can Tho Theme dưới phần Uninstalled themes.
  4. Chọn Install and set as default để thiết lập làm theme mặc định cho trang web.

Bước 3: Cấu hình Khối hiển thị (Blocks Layout)

Theme này cung cấp 12 Regions tương ứng với từng phân vùng trên giao diện gốc của S.I.S Cần Thơ. Bạn hãy vào StructureBlock layout (/admin/structure/block) để phân chia các khối nội dung:

  • Header: Đặt block Logo của trang web (Site Branding).
  • Primary menu: Đặt block Menu điều hướng chính (Main navigation).
  • Hero Banner: Đặt slide banner hoặc block chào mừng.
  • Quick Links (Step Into): Chứa thông tin đặt lịch khám nhanh.
  • About Us Section: Khối giới thiệu tổng quan về bệnh viện.
  • Statistics Section: Hiển thị hotline 1800 1115 & các con số thống kê đột quỵ/tim mạch.
  • Featured News Grid: Lưới bài viết nổi bật.
  • Healthcare Services: Danh sách thẻ dịch vụ tầm soát, cấp cứu đột quỵ.
  • Contact CTA Buttons: Các nút thao tác nhanh gọi tổng đài, xem bản đồ y khoa.
  • Quick Search Links: Lưới liên kết tra cứu nhanh bảng giá, kết quả xét nghiệm.
  • News and Events Section: Nơi đặt View danh sách tin tức bệnh viện và các sự kiện sắp diễn ra.
  • Footer: Cột thông tin địa chỉ liên hệ và bản quyền (Copyright).

💡 Mẹo hữu ích: Mặc định khi chưa cấu hình Block nào, theme sẽ tự động kích hoạt chế độ fallback thông minh hiển thị chính xác toàn bộ nội dung mẫu của S.I.S Cần Thơ giúp trang web của bạn trông lung linh ngay khi vừa cài đặt thành công!

Bước 4: Xóa Cache của Drupal (Clear Cache)

Sau mỗi lần cập nhật hoặc cấu hình lại tệp Twig, đừng quên xóa bộ nhớ đệm cache của Drupal để cập nhật thay đổi:

  • Sử dụng giao diện Admin: Vào ConfigurationDevelopmentPerformance ➔ Click Clear all caches.
  • Hoặc chạy lệnh qua Drush:
    drush cr
    

🎨 Kiến trúc Mã nguồn của Theme

  • sis_theme.info.yml: Định nghĩa tên theme, cấu hình core engine, và danh sách các layout regions.
  • sis_theme.libraries.yml: Khai báo và tối ưu tải các thư viện CSS/JS.
  • sis_theme.theme: File xử lý backend động (PHP preprocess).
  • css/style.css: Hệ thống CSS pixel-perfect cực đẹp, tối ưu hóa responsive hoàn toàn cho Mobile & Tablet.
  • templates/: Thư mục chứa các tệp Twig kế thừa giao diện sạch sẽ, chống sinh mã HTML thừa trong Drupal.