Đây là hướng dẫn chi tiết về heritage XEDITION, giao diện mặc định đi kèm lõi từ Zittme 1.0.0. Đây là một giao diện rộng kế thừa nguyên cấu trúc và hệ thống cài đặt của giao diện heritage, đồng thời vẽ lại theo chuẩn hiện nay phong cách thiết kế của bố cục XEDITION và skin bảng tin XEDITION thời XE (điểm nhấn vàng · xám đậm · phân khối góc vuông · bảng tin dạng bảng cổ điển). Giao diện hỗ trợ sẵn liên kết màu nhấn, chế độ tối và thiết kế đáp ứng.

Điểm khác biệt so với giao diện heritage là "thiết kế". Các mục cài đặt layout, quy tắc lớp menu (m / sl / sf) và cách áp dụng giao diện đều giống heritage, nên dù dùng bên nào bạn cũng có thể vận hành theo cùng một cách.

Thành phần

Mọi thành phần dùng chung một bộ design token (màu · phông chữ · khoảng cách · góc vuông). Phông nội dung là Pretendard, tiêu đề tiếng Anh và chữ logo dùng Raleway (chữ Hàn hiển thị bằng Pretendard).

Khác biệt so với giao diện heritage

Áp dụng

1. Vào Quản trị > Cài đặt thiết kế.
2. Chọn Heritage XEDITION trong danh sách giao diện rồi nhấn Áp dụng.
3. Layout và skin của từng mô-đun được áp dụng cùng lúc. Nếu muốn bỏ riêng thành phần nào, hãy bỏ chọn nó trên màn hình áp dụng.

Trang web cài mới Zittme 1.0.0 đã được áp dụng sẵn giao diện này ngay từ đầu (layout + skin bảng tin · thành viên · tin nhắn). Trang web cập nhật từ Rhymix hoặc 0.0.x vẫn giữ cài đặt cũ, nên bạn cần tự áp dụng theo các bước trên.

Việc áp dụng giao diện ghi nhớ trạng thái trước đó, nên bạn có thể quay lại trạng thái trước khi áp dụng bất cứ lúc nào. Với giao diện đang dùng, nút xóa trong danh sách giao diện đã cài sẽ bị vô hiệu hóa.

Toàn bộ mục cài đặt layout

Bạn thay đổi tại Quản trị > Cài đặt layout, hoặc tại "Cài đặt layout" trên thanh quản trị phía trước ở góc dưới bên trái khi đang xem trang. Cài đặt được chia thành 4 nhóm (tab).

Cơ bản

Mục	Mặc định	Mô tả
Ảnh logo	Không	Hiển thị theo chiều cao 40px. Để trống thì dùng chữ logo
Ảnh logo chế độ tối	Không	Logo hiển thị thay thế ở chế độ tối. Để trống thì dùng nguyên logo mặc định
Chữ logo	Không	Để trống thì hiển thị tiêu đề trang web. Hiển thị bằng phông Raleway
Màu nhấn	#cda25a	Quyết định cùng lúc màu nút · liên kết · trạng thái kích hoạt · hộp hồ sơ · đường trên menu thả xuống và màu nhấn của skin bảng tin · widget
Độ rộng nội dung tối đa	1440px	Hẹp 1320 / Mặc định 1440 / Rộng 1600. Vì là giao diện rộng nên mặc định rộng hơn heritage
Căn menu	Đặt cạnh logo	Cạnh logo / Giữa. Đầu trang luôn dùng toàn chiều rộng màn hình, tùy chọn này chỉ đổi vị trí menu
Màu thanh menu	Tối	Tối / Màu nhấn / Sáng. Ngăn kéo trên di động luôn có tông tối, không phụ thuộc giá trị này
Vị trí nút chế độ tối trên di động	Trong ngăn kéo menu	Trong ngăn kéo menu / Đầu trang / Chân trang. Trên PC luôn hiển thị ở đầu trang
Vị trí chọn ngôn ngữ trên di động	Trong ngăn kéo menu	Trong ngăn kéo menu / Đầu trang / Chân trang. Trên PC luôn hiển thị ở đầu trang. Chỉ xuất hiện khi lõi bật từ hai ngôn ngữ trở lên
Chế độ màu	Theo cài đặt thiết bị của khách	Tự động / Luôn sáng / Luôn tối

Màn hình đầu (thanh trượt ảnh chính)

Mục	Mặc định	Mô tả
Hiển thị thanh trượt ảnh chính	Chỉ khi ở dạng trang chính	Chỉ khi ở dạng trang chính / Hiển thị cả ở trang con / Không dùng. Nếu không đăng ký slide nào thì không hiển thị
Khoảng thời gian tự chuyển (giây)	6	Nếu là 0 thì không tự chuyển
Slide ảnh chính	Không	Trường lặp lại. Dùng nút Thêm để đăng ký nhiều slide và kéo để đổi thứ tự

Các mục của một slide: ảnh nền, tiêu đề, mô tả, tên nút, liên kết nút, căn chữ (trái/giữa).

Thanh trượt luôn hiển thị toàn chiều rộng màn hình bất kể độ rộng nội dung, chiều cao tự điều chỉnh trong khoảng 320px đến 600px theo độ rộng màn hình. Nên dùng ảnh nền rộng từ 1920px trở lên. Mũi tên trái phải là nút vuông bán trong suốt, chỉ báo trang là các chấm vuông, slide hiện tại được biểu thị bằng thanh màu nhấn dài theo chiều dọc.

Nội dung · thanh bên

Mục	Mặc định	Mô tả
Dùng tìm kiếm tổng hợp	Bật	Có hiển thị biểu tượng tìm kiếm trên đầu trang và lớp phủ tìm kiếm hay không
Hiển thị hộp đăng nhập ở thanh bên	Tắt	Hiển thị widget đăng nhập ở thanh bên của trang con (LNB)

Chân trang

Mục	Mô tả
Đoạn giới thiệu trang web	Văn bản giới thiệu bên trái chân trang
Thông tin doanh nghiệp · liên hệ	Mỗi dòng xuống hàng hiển thị thành một mục (tên công ty · người đại diện · số đăng ký kinh doanh · địa chỉ, v.v.)
Ghi chú bản quyền	Hiển thị trên thanh bản quyền tối phía dưới

Menu chân trang hiển thị khi bạn liên kết mục vào "Menu chân trang" (footer_menu) trong phần chỉnh sửa menu trang web (1 cấp). Bên phải thanh bản quyền có nút lên đầu trang, và nếu bạn đặt tùy chọn vị trí trên di động là "Chân trang" thì nút chế độ tối và chọn ngôn ngữ sẽ hiển thị ở đây.

Loại trang (lớp menu m / sl / sf / slx / sfx)

Mỗi trang được chỉ định một trong năm ký hiệu làm lớp menu.

Loại	Lớp menu	Hình thức
Dạng trang chính	m	Dùng cho trang chủ có thanh trượt ảnh chính. Không có dải tiêu đề trang con
Dạng trang con	sl	Dải tiêu đề trang con + LNB bên trái (khi menu hiện tại có menu con) + nội dung
Dạng trang con toàn chiều rộng	sf	Dải tiêu đề trang con + nội dung toàn chiều rộng, không có LNB
Dạng trang con (không dải)	slx	Giống sl nhưng không hiển thị dải tiêu đề trang con
Dạng trang con toàn chiều rộng (không dải)	sfx	Giống sf nhưng không hiển thị dải tiêu đề trang con

Dải tiêu đề trang con là dải màu xám nằm trên nội dung, hiển thị tên menu hiện tại làm tiêu đề. Nếu nó trùng với chức năng tiêu đề bảng tin của skin bảng tin, bạn có thể tắt dải bằng slx / sfx và chỉ dùng tiêu đề bảng tin, hoặc ngược lại giữ dải và để trống tiêu đề bảng tin.

Cách chỉ định

1. Mở mục menu trong Quản trị > Chỉnh sửa menu trang web.
2. Nhập một trong m, sl, sf, slx, sfx vào ô Lớp.
3. Sau khi lưu, trang truy cập qua menu đó sẽ hiển thị theo loại tương ứng.

Quy tắc hoạt động:

• Menu không chỉ định lớp sẽ theo Dạng bố cục trong cài đặt layout (mặc định: trang con). Trang chủ (trang đầu tiên) nếu không chỉ định sẽ hiển thị dạng trang chính.
• Nếu đặt lớp cho menu con, trên trang đó giá trị của menu con được ưu tiên hơn menu cha; nếu menu con không chỉ định thì kế thừa lớp của menu cha (đến 3 cấp).
• Có thể ghi cùng các lớp khác trong ô lớp, cách nhau bằng khoảng trắng. Ví dụ: sfx highlight
• Màn hình thành viên · tin nhắn · zittme Pay · tìm kiếm tổng hợp tự động dùng toàn chiều rộng nếu không chỉ định lớp.

Kết hợp với ảnh chính

• Hiển thị ảnh chính "Chỉ khi ở dạng trang chính" (mặc định) + m cho menu trang chủ: cấu hình thông thường, thanh trượt chỉ hiện ở trang chủ
• Hiển thị ảnh chính "Hiển thị cả ở trang con": thanh trượt ở đầu mọi trang bất kể loại
• Hiển thị ảnh chính "Không dùng": không hiển thị ở đâu cả

LNB (menu con bên trái)

Trên trang dạng trang con (sl / slx), nếu menu cấp 1 hiện tại có menu con thì danh sách menu con xuất hiện ở vùng 260px bên trái. Đây là dạng danh sách không có khung, dưới tiêu đề có đường phân cách và một đường ngắn màu nhấn, mục hiện tại được đánh dấu bằng thanh màu nhấn 3px bên trái. Mục có menu cấp 3 có mũi tên bên phải, các mục con được mở ra sẽ thụt lề với biểu tượng mũi tên gấp khúc. Menu không có menu con chỉ hiển thị nội dung, không có LNB.

Đầu trang và menu trên cùng (GNB)

Đầu trang luôn dùng toàn chiều rộng màn hình. Từ trái sang là logo, menu, tiện ích bên phải; khi cuộn xuống, đầu trang thu nhỏ chiều cao và cố định ở trên cùng, nền chuyển sang mờ bán trong suốt.

• Các mục liên kết vào "Menu trên cùng" (gnb) trong phần chỉnh sửa menu trang web sẽ hiển thị, hỗ trợ đến 3 cấp. Khi rê chuột vào menu cấp 1, menu thả xuống tối mở ra bên dưới mục đó với đường màu nhấn 3px ở trên. Menu cấp 3 hiển thị thụt lề trong menu thả xuống.
• Menu cấp 1 của trang hiện tại có gạch chân màu nhấn 3px ở phía dưới.
• Với tùy chọn căn menu, bạn có thể đặt menu cạnh logo hoặc ở giữa đầu trang.

Tiện ích bên phải theo thứ tự từ trái sang như sau.

Thành phần	Mô tả
Nút chế độ tối	Khách tự chuyển sáng/tối (lưu theo thiết bị)
Biểu tượng tìm kiếm	Nhấn để mở ô tìm kiếm cỡ lớn che đầu trang. Đóng bằng X, Esc hoặc nhấn ra ngoài. Bị ẩn khi tắt Dùng tìm kiếm tổng hợp
Nút ngôn ngữ	Hiển thị bằng mã rút gọn như KR / EN. Nhấn để mở danh sách ngôn ngữ, chỉ đổi ngôn ngữ mà vẫn giữ trang đang xem. Chỉ xuất hiện khi lõi bật từ hai ngôn ngữ trở lên
Khu vực hồ sơ	Chưa đăng nhập: nút đăng nhập màu nhấn. Đã đăng nhập: hộp màu nhấn gồm ảnh hồ sơ + biệt danh + chuông thông báo. Rê chuột vào sẽ mở menu Thông tin của tôi · Quản trị (khi có quyền quản trị) · Đăng xuất

Chuông thông báo hiển thị trên trang web có cài mô-đun Trung tâm thông báo (ncenterlite), cho biết số thông báo chưa đọc và danh sách thông báo gần đây. Khi đó widget nổi mặc định của Trung tâm thông báo sẽ tự động tắt.

Di động

Ở độ rộng 1024px trở xuống, menu bị ẩn và bạn mở menu ngăn kéo bằng nút hamburger ở tận cùng bên phải. Ngăn kéo có tông tối dựa trên màu nhấn, chứa toàn bộ menu (3 cấp) cùng liên kết đăng nhập · Thông tin của tôi · Quản trị. Nút chế độ tối và chọn ngôn ngữ hiển thị ở một trong ba nơi: dòng công cụ cuối ngăn kéo, đầu trang hoặc chân trang, tùy theo tùy chọn "Vị trí ... trên di động" trong cài đặt layout.

Skin bảng tin

Chọn heritage_xedition trong Cài đặt bảng tin > Cài đặt skin. Vì là thiết kế đáp ứng nên bạn không cần skin di động riêng.

Skin theo kiểu bảng cổ điển của skin bảng tin XEDITION. Danh sách nằm giữa các đường phân cách đậm ở trên và dưới, hàng tiêu đề có nền sáng và viền đôi. Hàng thông báo được phân biệt bằng nền xám nhạt.

Mục	Mô tả
Tiêu đề · mô tả bảng tin	Nếu nhập trong cài đặt skin, phần đầu bảng tin (tiêu đề + đường ngắn màu nhấn + mô tả) hiển thị trên danh sách và nút Viết bài chuyển lên bên phải phần đầu. Để trống thì không có phần đầu, nút Viết bài nằm ở dòng nút dưới danh sách. Phần đầu không hiển thị ở màn hình xem bài
Kiểu danh sách	Dạng danh sách / Dạng thẻ (ảnh thu nhỏ) / Dạng tạp chí (ảnh thu nhỏ + tóm tắt) / Dạng FAQ (nhấn câu hỏi để mở câu trả lời)
Căn người viết	Trái / Giữa
Hiển thị ảnh hồ sơ · chữ ký · tệp đính kèm	Có hiển thị ở màn hình xem bài hay không
Nút thích · không thích	Có dùng hay không (mặc định: chỉ dùng thích)

• Số bình luận hiển thị cạnh tiêu đề dưới dạng +N.
• Bài mới được đánh dấu bằng chấm vuông màu nhấn 7px trước tiêu đề, theo "Thời gian hiển thị bài mới" trong cài đặt bảng tin (mặc định 24 giờ).
• Màn hình xem bài gồm tiêu đề lớn và dòng thông tin có gạch chân (người viết · ngày · lượt xem · lượt thích) thay cho thanh tiêu đề tối.
• Nút là nút vuông phẳng màu xám nhạt, rê chuột vào sẽ tô màu nhấn. Nút hành động chính (Đăng · Viết bài) có màu nhấn ngay từ đầu.
• Phân trang là dãy số không viền, chỉ trang hiện tại hiển thị bằng số màu nhấn và gạch chân, trang đầu/cuối là biểu tượng mũi tên đôi.
• Ảnh thu nhỏ được cắt góc vuông.
• Màu nhấn liên kết với màu nhấn của layout.

Skin thành viên · tin nhắn

Chọn heritage_xedition lần lượt trong cài đặt mô-đun thành viên và cài đặt tin nhắn.

• Đầu màn hình có tiêu đề và một đường ngắn màu nhấn bên dưới, giữa tiêu đề và nội dung có khoảng trống đủ rộng.
• Khu vực hồ sơ ở trang cá nhân · hộp tin nhắn hiển thị thành thẻ gồm ảnh hồ sơ 52px + biệt danh + hạng · ngày tham gia, trên thẻ có đường màu nhấn 3px.
• Menu điều hướng bên trái dùng cùng ngữ pháp với LNB của bố cục (tiêu đề có đường phân cách + thanh kích hoạt 3px bên trái).
• Ô nhập · hộp chọn · nút đều thống nhất chiều cao 46px nên không bị lệch khi nằm trên một dòng. Nút là nút vuông phẳng giống bảng tin.
• Trên di động, thẻ hồ sơ và biểu mẫu tìm kiếm xếp chồng theo chiều dọc.

Skin widget

Widget nội dung tổng hợp và widget thương mại tổng hợp có skin "Heritage XEDITION" (có sẵn trong widget lõi, không cần cài riêng).

• Không dùng khung, chia vùng bằng đường phân cách và đường ngắn màu nhấn dưới dòng tiêu đề (cùng ngữ pháp với phần đầu bảng tin).
• Dạng tab chỉ kẻ một dòng tab đến hết, liên kết "Xem thêm" nằm bên phải dòng tab.
• Cách hiển thị như số bình luận +N, chấm vuông bài mới, ảnh thu nhỏ góc vuông giống skin bảng tin.

Chế độ tối

• Khi chế độ màu là "Tự động", giao diện theo cài đặt sáng/tối của thiết bị khách, và khách cũng có thể tự đổi bằng nút chuyển trên đầu trang (lưu theo thiết bị).
• Bảng màu tối là than ấm (xám đậm pha chút nâu) hợp với điểm nhấn vàng. Skin bảng tin · thành viên · tin nhắn · thương mại · widget cũng chuyển theo.
• Nếu đăng ký riêng ảnh logo chế độ tối, logo đó sẽ hiển thị thay thế ở chế độ tối. Nếu không đăng ký thì dùng nguyên logo mặc định, nên bạn nên dùng logo nền trong suốt.

Đổi màu nhấn

Để dùng màu khác thay cho màu vàng mặc định (#cda25a), bạn chỉ cần đổi màu nhấn trong cài đặt layout. Màu nút · liên kết · trạng thái kích hoạt · hộp hồ sơ · đường trên menu thả xuống · màu nhấn của bảng tin và widget, cả màu các phần tử nhập như hộp kiểm · nút chọn đều đổi cùng lúc. Ở chế độ tối, độ sáng được tự động hiệu chỉnh dựa trên màu bạn chọn.

Nếu dùng xanh navy đậm hoặc đen làm màu nhấn, giao diện sẽ gần với không khí đơn sắc của bản XEDITION gốc; giữ màu vàng sẽ tạo cảm giác cổ điển.

Tùy biến (biến CSS)

Màu được quản lý bằng biến CSS. Phần lớn chỉ cần một màu nhấn là đủ, nhưng để chỉnh chi tiết hơn, hãy định nghĩa lại biến trong CSS con. Nếu sửa trực tiếp tệp bố cục, thay đổi có thể bị ghi đè khi cập nhật giao diện.

Biến	Ý nghĩa
--hr-brand	Màu nhấn (giá trị cài đặt layout được đưa vào)
--hr-brand-dark / --hr-brand-light	Biến thể tối · sáng của màu nhấn (khi rê chuột, liên kết ở chế độ tối)
--hr-ink	Màu chữ nội dung
--hr-muted	Màu chữ phụ
--hr-bg	Nền trang
--hr-surface	Nền thẻ · bảng
--hr-line	Đường phân cách
--hr-nav-bg	Nền các phần tử tối như menu thả xuống · thanh chân trang · ngăn kéo di động
--hr-w	Độ rộng nội dung tối đa (giá trị cài đặt layout)
--hr-font-display	Phông cho tiêu đề · logo (mặc định Raleway)
--hr-radius	Bán kính góc (giao diện này là 0)

Ví dụ cấu hình trang chính

1. Đặt lớp của menu trang chủ là m và đăng ký từ 2 slide ảnh chính trở lên.
2. Tạo nội dung trang chủ bằng mô-đun trang và xếp các widget nội dung tổng hợp theo từng hàng. Chọn skin widget "Heritage XEDITION".
3. Nếu có nhiều bảng tin, hãy gom chúng bằng widget dạng tab để hiển thị trong một vùng.
4. Nếu vận hành cả cửa hàng, hãy thêm hàng sản phẩm bằng widget thương mại tổng hợp.

Câu hỏi thường gặp

• Thanh trượt ảnh chính không hiện: Hãy kiểm tra theo thứ tự ① đã đăng ký ít nhất 1 slide chưa ② hiển thị ảnh chính có phải "Không dùng" không ③ trang hiện tại có phải dạng trang chính (m) không (khi cài đặt hiển thị là "Chỉ khi ở dạng trang chính").
• Tôi muốn bỏ dải xám (tiêu đề) phía trên trang con: Hãy đổi lớp menu thành slx hoặc sfx.
• Menu bên trái (LNB) không hiện: Trang phải ở dạng trang con (sl / slx) và menu cấp 1 hiện tại phải có menu con.
• Sau khi chuyển menu ra giữa, thấy một đường dọc mảnh cạnh menu đang kích hoạt: Đây là lỗi của 1.0.0. Hãy cập nhật giao diện lên 1.0.1 trở lên.
• Chế độ tối không được áp dụng: Hãy kiểm tra chế độ màu có đang cố định ở "Luôn sáng" không.
• Một số màn hình mô-đun vẫn là thiết kế mặc định: Hãy kiểm tra skin trong cài đặt của mô-đun đó đã chọn heritage_xedition chưa. Áp dụng giao diện hàng loạt chỉ áp dụng cho các mô-đun được liên kết với menu trang web, nên những mô-đun không liên kết với menu như liên hệ cần được chọn riêng trong cài đặt mô-đun.
• Đã đổi màu nhấn nhưng chỉ một phần thay đổi: Có thể do bộ nhớ đệm. Hãy tạo lại bộ nhớ đệm tại Quản trị rồi tải lại trang.
• Phông tiêu đề tiếng Anh trông khác: Phần tiếng Anh trong tiêu đề và chữ logo hiển thị bằng Raleway (Google Fonts). Trong môi trường chặn tải phông bên ngoài, phông sẽ được thay bằng Pretendard.
• Đã cập nhật từ Rhymix nhưng giao diện không được áp dụng: Việc cập nhật giữ nguyên cài đặt thiết kế hiện có. Hãy tự áp dụng Heritage XEDITION tại Quản trị > Cài đặt thiết kế.