NAS\NASPC
57 lines
3.5 KiB
Markdown
57 lines
3.5 KiB
Markdown
# S.I.S Cần Thơ Custom Drupal Theme
|
|
|
|
Theme cao cấp được xây dựng chuẩn hóa cho **Drupal 10** và **Drupal 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:
|
|
```bash
|
|
# Đườ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 **Structure** ➔ **Block 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 **Configuration** ➔ **Development** ➔ **Performance** ➔ Click **Clear all caches**.
|
|
* Hoặc chạy lệnh qua Drush:
|
|
```bash
|
|
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.
|