Nhất tâm niệm Phật Nam mô Tiếp Dẫn Đạo Sư A Di Đà Phật

Hướng dẫn chỉnh sửa 1 linh đường (Online)

14/08/202612:57 SA(Xem: 378)
Hướng dẫn chỉnh sửa một Linh đường
QUY TRÌNH TỪNG BƯỚC

Hướng dẫn chỉnh sửa một Linh đường (Online)

Quy trình tìm đúng Linh đường đã có, xác định phần cần chỉnh sửa, cập nhật hình ảnh, thông tin hương linh, múi giờ, lịch cúng và Audio Playlist; đồng thời kiểm tra lại trên giao diện Online trước khi hoàn tất.

Tài nguyên thiết kế

Tải bộ file SVG dành cho Linh đường

Bộ tài nguyên bao gồm các file SVG của mẫu bàn thờbảng thông tin hương linh, dùng để chỉnh sửa nội dung và xuất hình theo đúng mẫu thiết kế.

Tải bộ file SVG LINH-DUONG-SVG.zip Nên tải bộ tài nguyên trước khi bắt đầu.

1. Tổng quan khi chỉnh sửa Linh đường

Việc chỉnh sửa được thực hiện trực tiếp trên Linh đường đã có. Trước khi thay đổi, hãy xác định rõ nội dung cần cập nhật để chỉ sửa đúng phần liên quan và giữ nguyên các thiết lập đang hoạt động ổn định.

  • Linh đường có thể gồm nhiều hình nền không có mâm cúng và một hình có mâm cúng hiển thị theo khung giờ đã thiết lập.
  • Các nội dung có thể điều chỉnh gồm: di ảnh, bảng thông tin hương linh, hình nền, hình mâm cúng, thời gian chuyển hình, múi giờ, lịch cúng và Audio Playlist.
  • Sau mỗi lần cập nhật, cần lưu và kiểm tra trực tiếp trên giao diện Online trước khi xem là hoàn tất.
Nguyên tắc: Chỉ thay đổi đúng nội dung có yêu cầu cập nhật. Không sao chép lại toàn bộ HTML từ mẫu nếu Linh đường hiện tại chỉ cần điều chỉnh một hoặc một vài thành phần. Nếu không chắc vị trí cần sửa, hãy tìm đúng tên biến được nêu trong tài liệu trước khi thay đổi.

2. Tìm và mở Linh đường cần chỉnh sửa

Bước 1 - Tìm đúng Linh đường

Vào Admin → Tin/Bài viết (Articles), sau đó tìm Linh đường cần chỉnh sửa theo tên hương linh, tiêu đề bài viết hoặc Category cá nhân/nhóm đã được thiết lập trước đó.

Màn hình Tin/Bài viết
Màn hình Tin/Bài viết: mở đúng Linh đường trước khi vào phần NỘI DUNG → HTML.
Khuyến nghị: Đối chiếu tên hương linh và mẫu đang sử dụng trước khi mở bài để hạn chế chỉnh nhầm Linh đường.

Bước 2 - Mở phần nội dung HTML

Mở Tin/Bài viết tương ứng, vào NỘI DUNG → HTML. Đây là khu vực chứa các thiết lập chính của Linh đường và là nơi thực hiện các thay đổi được hướng dẫn trong tài liệu này. Không nên xóa hoặc thay toàn bộ nội dung HTML nếu chỉ cần chỉnh một phần nhỏ.

Màn hình Tin/Bài viết
Tab HTML: Nơi chứa mã cấu hình và đường dẫn hình ảnh dùng để thiết lập nội dung hiển thị trên trang.
Bạn đã làm đúng nếu: Tên hương linh và Linh đường đang mở trùng với nội dung cần chỉnh sửa.

3. Xác định nội dung cần điều chỉnh

Trước khi chỉnh sửa, nên xác định rõ yêu cầu thay đổi thuộc nhóm nào. Việc này giúp thao tác gọn hơn và tránh ảnh hưởng đến những nội dung không liên quan.

Nhu cầu điều chỉnhPhần cần kiểm tra trong HTML
Thay hoặc bổ sung hình nền window.funeralAssets.backgrounditems: []
Điều chỉnh thời gian chuyển hình nền defaultDurationMinutes
Thay hình mâm cúng window.funeralAssets.ceremonyBackground
Điều chỉnh múi giờ cúng window.funeralAssets.ceremonyTimeZone
Điều chỉnh khung giờ cúng window.funeralAssets.ceremonySchedules
Thay bảng thông tin hương linh window.funeralAssets.infoOverlay
Thay di ảnh hoặc nội dung Media Player const funeralContent
Lưu ý: Nếu chỉ cần cập nhật một nội dung, không nên thay đổi các phần cấu hình khác. Trước khi sửa, nên xác định đúng tên biến tương ứng trong bảng trên. Sau khi sửa xong, kiểm tra lại phần vừa thay đổi trước rồi mới rà soát toàn bộ Linh đường.

4. Các phần cấu hình chính trong nội dung tab HTML

Biến / cấu trúcChức năng
window.funeralAssets.background = {...} Chứa danh sách các hình nền của bàn thờ.
defaultDurationMinutes: 1 Thời gian chuyển đổi giữa hai hình nền, tính bằng phút.
items: [] Danh sách các hình nền đang được sử dụng.
window.funeralAssets.ceremonyBackground = {...} Chứa hình bàn thờ có mâm cúng.
window.funeralAssets.ceremonyTimeZone = "" Múi giờ dùng để xác định thời điểm hiển thị hình cúng cơm.
window.funeralAssets.ceremonySchedules Khung giờ bắt đầu và kết thúc việc hiển thị hình cúng cơm.
window.funeralAssets.infoOverlay = {...} Bảng thông tin hương linh.
const funeralContent = {...} Thông tin hương linh, gồm di ảnh, nội dung văn bản và Audio Playlist.
Cách chỉnh HTML an toàn

Chỉ sửa đúng giá trị cần thay đổi

Nên làm
  • Tìm đúng tên biến hoặc đúng cụm dữ liệu cần chỉnh.
  • Chỉ thay giá trị bên trong phần được hướng dẫn, ví dụ URL, giờ hoặc tên file.
  • Giữ nguyên dấu ngoặc, dấu phẩy, dấu nháy và tên biến nếu tài liệu không yêu cầu thay.
Không nên làm
  • Không xóa toàn bộ đoạn HTML để nhập lại từ đầu.
  • Không đổi tên các biến như ceremonyTimeZone, items hoặc audioPlaylists.
  • Không để lại phần tử rỗng sau khi xóa hình hoặc audio.

4.1. Điều chỉnh múi giờ cúng cơm

  • Nếu để ceremonyTimeZone trống, thời gian cúng được xác định theo múi giờ của thiết bị đang mở Linh đường.
  • Nếu thiết lập một múi giờ cụ thể, ví dụ "America/Los_Angeles", tất cả thiết bị sẽ sử dụng cùng múi giờ này để xác định thời gian cúng.
Chỉ thay phần nằm trong dấu ngoặc kép
window.funeralAssets.ceremonyTimeZone = "America/Los_Angeles";

Không sửa: window.funeralAssets.ceremonyTimeZone =

Bạn đã làm đúng nếu: Linh đường hiển thị hình mâm cúng đúng theo múi giờ mong muốn trên các thiết bị kiểm tra.

4.2. Điều chỉnh khung giờ hiển thị mâm cúng

Chỉ thay giờ bắt đầu và giờ kết thúc. Giữ nguyên tên start, end và cấu trúc dấu ngoặc.

Ví dụ đang cài 11:00 - 11:45
window.funeralAssets.ceremonySchedules = [
{ start: "11:00", end: "11:45" }
];
Ví dụ

Nếu muốn đổi thành 10:30 - 11:15, chỉ thay hai giá trị thời gian:

window.funeralAssets.ceremonySchedules = [
{ start: "10:30", end: "11:15" }
];
Bạn đã làm đúng nếu: Hình mâm cúng tự xuất hiện khi bắt đầu khung giờ và tự ẩn sau thời gian kết thúc.

4.3. Thông tin hương linh và Media Player

  • images: {...}: Di ảnh hương linh hiển thị trong khung ảnh thờ.
  • texts: {...}: Nội dung thông tin hương linh. Theo cấu hình hiện tại, phần này chưa được sử dụng để hiển thị trực tiếp trên giao diện Linh đường.
  • audioPlaylists: {...}: Nội dung Media Player.
  • ceremony: {...}: Playlist cho tab Nghi thức dâng cơm.
  • normal: {...}: Playlist cho tab Kinh / Nhạc / Khác.

5. Các phương án chỉnh sửa Linh đường

Tùy theo nội dung cần cập nhật, lựa chọn phương án phù hợp dưới đây. Mỗi phương án tập trung vào đúng nhóm thông tin cần điều chỉnh để quá trình cập nhật được rõ ràng và hạn chế tác động đến các thiết lập khác.

Hình hương linh
Hình hương linh nên có kích thước tối thiểu 1500 × 2000 px.
Yêu cầu chungƯu tiên hình hương linh chất lượng cao

Nên sử dụng ảnh chân dung dọc có kích thước tối thiểu 1500 × 2000 px để bảo đảm độ rõ nét khi hiển thị trên màn hình có độ phân giải cao.

01
Phương án 1

Chỉ cập nhật thông tin hương linh

Nội dung cần thực hiện

  • Di ảnh hương linh: Chuẩn bị ảnh chân dung dọc có độ phân giải tốt; kích thước khuyến nghị tối thiểu 1500 × 2000 px.
  • Bảng thông tin hương linh: Mở đúng file SVG tương ứng với mẫu đang sử dụng. Với mẫu #B, sử dụng design-mau-B-text-thong-tin-ngang.svg; cập nhật chính xác thông tin, lựa chọn kiểu bảng phù hợp và xuất PNG ở kích thước 3840 × 2160 px.
  • Cập nhật URL: Tải các hình mới vào đúng thư mục trên máy chủ, sao chép URL và chỉ thay đường dẫn cũ bằng đường dẫn mới tại đúng vị trí của di ảnh hoặc bảng thông tin trong HTML. Không thay tên biến hoặc cấu trúc xung quanh.
Kết quả: Linh đường giữ nguyên bố cục, hình nền, mâm cúng và lịch cúng; chỉ thông tin hương linh được cập nhật.
Bạn đã làm đúng nếu: Di ảnh và bảng thông tin mới hiển thị chính xác, trong khi hình nền, mâm cúng và lịch cúng không thay đổi.
02
Phương án 2

Điều chỉnh hình nền hoặc hình mâm cúng

Áp dụng khi Linh đường vẫn giữ mẫu hiện tại nhưng cần lựa chọn lại một số hình nền, thay hình mâm cúng hoặc điều chỉnh danh sách hình đang sử dụng.

Nội dung cần thực hiện

  • Hình nền và hình mâm cúng: Vào Thư viện mẫu để xem trước và lựa chọn hình phù hợp. Tên file được hiển thị ở góc dưới bên phải.
  • Cập nhật danh sách hình nền: Nếu chỉ thay một hình, thay đúng URL của hình đó. Nếu thêm hoặc xóa hình, thao tác với toàn bộ cụm dữ liệu của hình trong items: [].
  • Cập nhật hình mâm cúng: Thay URL tại window.funeralAssets.ceremonyBackground.
Nguyên tắc khi điều chỉnh hình ảnh
  • Khi thêm hoặc xóa hình nền, cần thao tác với toàn bộ cụm dữ liệu của hình; không chỉ xóa URL bên trong và không để lại phần tử rỗng dạng { src: "", alt: "" }.
  • Tên hình nền mẫu #B3 có cấu trúc phong-tho-nen-mau-b3-01.jpg. Khi chọn hình khác trong cùng mẫu, cập nhật đúng số thứ tự của file.
03
Phương án 3

Kết hợp hình nền từ các mẫu #B1 - #B6

Áp dụng khi cần làm mới danh sách hình nền bằng cách lựa chọn hình từ nhiều mẫu #B khác nhau, trong khi vẫn giữ cấu trúc Linh đường hiện tại.

Nội dung cần thực hiện

  • Vào Thư viện mẫu để xác định đúng hình nền hoặc hình mâm cúng muốn sử dụng.
  • Cập nhật URL từng hình trong danh sách, bảo đảm mỗi phần tử vẫn giữ đầy đủ cấu trúc.
  • Tên file hình nền theo cấu trúc phong-tho-nen-mau-b[số mẫu]-[số thứ tự].jpg.
Ví dụ

Nếu đang sử dụng hình b3-01 và cần chuyển sang hình #B1-05, sử dụng tên file:

phong-tho-nen-mau-b1-05.jpg
Lưu ý quan trọng: Khi thêm, xóa hoặc thay đổi một hình, cần giữ nguyên cấu trúc hợp lệ của danh sách. Nếu xóa hình, hãy xóa nguyên cụm dữ liệu của hình đó; không để lại phần tử hình ảnh rỗng.
Bạn đã làm đúng nếu: Danh sách hình nền hiển thị đúng các hình đã chọn, không có hình lỗi và quá trình chuyển hình vẫn hoạt động bình thường.

6. Điều chỉnh Audio Playlist

Mỗi audio cần có đầy đủ cấu trúc như sau:

{
number: "02",
title: "Nhạc Thiền",
artist: "Thiền Phật Giáo",
src: "https://media.azchannels.com/audios/nhac-thien.mp3"
}
  • Thêm audio: Sao chép nguyên một cụm từ dấu { mở đến dấu } đóng, sau đó cập nhật số thứ tự, tiêu đề, nghệ sĩ và đường dẫn audio.
  • Thay audio: Giữ nguyên cấu trúc của cụm audio và chỉ cập nhật trường cần thay đổi, đặc biệt là src nếu thay file âm thanh.
  • Xóa audio: Xóa toàn bộ cụm tương ứng của audio cần loại bỏ, không chỉ xóa nội dung bên trong.
  • Không để phần tử rỗng dạng { number: "", title: "", artist: "", src: "" } trong danh sách.
Bạn đã làm đúng nếu: Audio mới xuất hiện đúng tên trong Media Player và có thể phát thử bình thường.

7. Lưu và kiểm tra Linh đường

Bước hoàn tất

Lưu thay đổi và kiểm tra lại trên giao diện Online

Sau khi hoàn tất nội dung cần điều chỉnh, hãy lưu lại và kiểm tra trực tiếp trên giao diện Online. Chỉ xác nhận hoàn tất khi các nội dung đã thay đổi hiển thị đúng và các phần còn lại của Linh đường vẫn hoạt động ổn định.

1
LưuGhi nhận thay đổi
2
Kiểm traĐối chiếu trên Online
3
Hoàn tấtXác nhận nội dung
01
Lưu thay đổi

Lưu toàn bộ nội dung vừa cập nhật

Trong Tin/Bài viết (Articles), sau khi hoàn tất phần NỘI DUNG → HTML, chọn Lưu / Cập nhật để ghi nhận các thay đổi.

Xác nhận nội dung đã được lưu thành công

Chỉ chuyển sang bước kiểm tra sau khi hệ thống xác nhận lưu thành công.

02
Checklist kiểm tra

Đối chiếu nội dung sau khi chỉnh sửa

Thứ tự kiểm tra nên làm: kiểm tra phần vừa thay đổi trước → kiểm tra các nội dung có liên quan → mở Fullscreen để rà soát tổng thể. Cách này giúp phát hiện lỗi nhanh hơn nếu có.

03
Hoàn tất kiểm tra

Xác nhận hoàn tất khi các nội dung đều đạt yêu cầu

Tất cả hạng mục đều đạt

Các thay đổi đã được cập nhật chính xác và Linh đường sẵn sàng tiếp tục sử dụng.

Có hạng mục cần điều chỉnh

Quay lại Tin/Bài viết → NỘI DUNG → HTML, cập nhật phần liên quan, lưu lại và kiểm tra lần nữa.

TIÊU CHUẨN HOÀN TẤTMọi thay đổi cần được kiểm tra trực tiếp trên giao diện Online sau lần lưu cuối cùng trước khi xác nhận hoàn tất.