Một hiệu ứng theo chủ đề giúp website tạo cảm giác mới mẻ trong dịp lễ mà không cần chỉnh sửa mã nguồn cốt lõi. Với website sử dụng mã nguồn CMSNT, bạn có thể kích hoạt hiệu ứng chào mừng ngày Giải phóng miền Nam 30/4 trực tiếp từ trang quản trị.
Hướng dẫn dưới đây tập trung vào cách triển khai nhanh, kiểm tra hiển thị trên nhiều thiết bị và gỡ bỏ sau sự kiện để website luôn nhẹ, ổn định.
Chuẩn bị trước khi cài hiệu ứng
Bạn cần tài khoản có quyền truy cập phần Cài đặt trong Admin Panel. Nên sao lưu nội dung hiện có ở ô Script Header trước khi thêm mã mới để có thể khôi phục ngay khi cần.
- Đăng nhập đúng trang quản trị của website cần cấu hình.
- Kiểm tra website đang hoạt động bình thường và không có lỗi giao diện.
- Lưu lại nội dung Script Header hiện tại vào một tệp riêng.
Các bước chèn hiệu ứng 30/4
-
01
Mở khu vực Script Header
Trong Admin Panel, vào Cài đặt và tìm ô Script Header. Tên mục có thể khác đôi chút tùy phiên bản mã nguồn.
-
02
Dán mã hiệu ứng
Đặt hai dòng mã bên dưới sau nội dung đang có. Không xóa các thẻ hoặc đoạn script khác nếu bạn chưa xác định rõ chức năng của chúng.
-
03
Lưu và làm mới website
Nhấn Lưu, mở trang chủ trong cửa sổ ẩn danh và tải lại trang để kiểm tra tệp CSS, JavaScript đã được nạp.
<link rel="stylesheet" href="https://api.cmsnt.co/cdn/3041975/style.css">
<script src="https://api.cmsnt.co/cdn/3041975/script.js" defer></script>Lưu ý: Thuộc tính defer giúp tệp JavaScript chạy sau khi HTML đã được phân tích, hạn chế ảnh hưởng đến tốc độ hiển thị nội dung chính.
Kiểm tra sau khi cài đặt
Hãy kiểm tra cả máy tính và điện thoại vì hiệu ứng phủ toàn màn hình có thể che nút điều hướng hoặc nội dung quan trọng trên màn hình nhỏ. Nếu dùng hệ thống cache, bạn có thể cần xóa cache ứng dụng, CDN hoặc trình duyệt trước khi thấy thay đổi.
- Trang vẫn cuộn, bấm nút và mở menu bình thường.
- Không xuất hiện thanh cuộn ngang hoặc phần tử che nút mua hàng.
- Console của trình duyệt không báo lỗi tải style.css hoặc script.js.
- Tốc độ tải trang không thay đổi đáng kể.
Cách tắt hoặc gỡ hiệu ứng sau ngày lễ
Quay lại ô Script Header, xóa đúng hai dòng đã thêm rồi lưu cấu hình. Sau đó xóa cache và kiểm tra lại trang chủ. Việc gỡ đúng thời điểm giúp giao diện giữ được tính chuyên nghiệp và tránh tải tài nguyên không còn cần thiết.
Lưu ý về hiệu năng và an toàn
Mọi tệp JavaScript bên ngoài đều có quyền tác động đến giao diện trang. Chỉ dùng đường dẫn từ nguồn bạn tin tưởng, theo dõi website trong thời gian kích hoạt và luôn giữ bản sao cấu hình trước đó. Nếu website có chính sách CSP nghiêm ngặt, tên miền api.cmsnt.co cần được cho phép trong chỉ thị phù hợp.
Bot có thể tạo tài khoản hàng loạt, gửi spam biểu mẫu và tiêu tốn tài nguyên máy chủ. Google reCAPTCHA bổ sung một lớp đánh giá để phân biệt hành vi người dùng hợp lệ với truy cập tự động đáng ngờ.
Để tích hợp vào mã nguồn CMSNT, bạn cần đăng ký đúng tên miền, chọn phiên bản reCAPTCHA mà mã nguồn hỗ trợ và nhập chính xác cặp khóa được cấp.
reCAPTCHA là gì?
reCAPTCHA là dịch vụ bảo vệ biểu mẫu do Google cung cấp. Tùy phiên bản, hệ thống có thể hiển thị thử thách, hộp kiểm hoặc đánh giá rủi ro ngầm dựa trên hành vi truy cập.
reCAPTCHA giúp giảm spam nhưng không thay thế hoàn toàn các biện pháp bảo mật khác. Website vẫn cần giới hạn tần suất gửi yêu cầu, kiểm tra dữ liệu đầu vào và theo dõi hành vi bất thường ở phía máy chủ.
Các bước tạo Site Key và Secret Key
-
01
Đăng nhập Google reCAPTCHA
Mở trang giới thiệu reCAPTCHA bằng tài khoản Google, sau đó truy cập Admin Console.
-
02
Tạo cấu hình mới
Chọn biểu tượng tạo mới, nhập nhãn dễ nhận biết và chọn loại reCAPTCHA đúng với phiên bản mã nguồn CMSNT đang sử dụng.
-
03
Khai báo tên miền
Nhập tên miền không kèm https:// và không có đường dẫn. Thêm cả tên miền phụ nếu website vận hành trên subdomain.
-
04
Lấy cặp khóa
Hoàn tất đăng ký rồi sao chép Site Key và Secret Key. Hai giá trị có vai trò khác nhau và không được nhập đảo vị trí.
Nhập khóa vào Admin Panel CMSNT
Đăng nhập trang quản trị, mở phần Cài đặt bảo mật hoặc cấu hình reCAPTCHA, sau đó dán Site Key và Secret Key vào đúng trường tương ứng. Bật tính năng, lưu cấu hình và xóa cache nếu phiên bản website có cơ chế cache cài đặt.
Lưu ý: Secret Key chỉ được dùng ở phía máy chủ. Không đăng khóa này lên ảnh hướng dẫn, kho mã công khai hoặc gửi trong nhóm chat đông người.
Cách kiểm tra reCAPTCHA hoạt động
- Mở trang đăng ký hoặc biểu mẫu cần bảo vệ trong cửa sổ ẩn danh.
- Gửi biểu mẫu hợp lệ và xác nhận quy trình vẫn hoàn tất bình thường.
- Thử gửi liên tiếp để kiểm tra cơ chế giới hạn tần suất.
- Kiểm tra log khi website báo lỗi xác minh hoặc không hiển thị thử thách.
Lỗi thường gặp và cách xử lý
- Invalid domain for site key: tên miền hiện tại chưa được thêm vào cấu hình Google.
- Invalid key type: loại reCAPTCHA trên Google không khớp với loại mã nguồn hỗ trợ.
- Xác minh luôn thất bại: Secret Key sai, máy chủ không gọi được dịch vụ xác minh hoặc thời gian hệ thống bị lệch.
- Widget không hiển thị: tệp JavaScript bị CSP, tiện ích trình duyệt hoặc hệ thống cache chặn.