Giới thiệu tổng quan về trang Appearance của Init Manga

Để truy cập, vào Init Manga → Appearance. Lưu ý: bạn cần kích hoạt license trước khi có thể lưu bất kỳ cài đặt nào.

1. Appearance & Branding

• Site Logo Data
  Nhập theo định dạng: URL|width|height|class
  Ví dụ: https://site.com/logo.png|200|60|uk-border-circle
  Giúp bạn kiểm soát kích thước & class của logo mà không cần CSS thủ công.
• Theme Color: Màu nhấn (accent) cho nút, viền, hover và các thành phần UI. Ví dụ: #ff4757.
• Cover Image Quality: Chất lượng ảnh bìa:
  • Optimized (Faster Loading) – tải nhanh hơn, dung lượng nhẹ.
  • High Quality (Sharper Images) – ảnh sắc nét hơn nhưng tải chậm hơn.

Lưu ý: Nếu đổi chất lượng ảnh khi site đã chạy, hãy dùng plugin Regenerate Thumbnails để tái tạo ảnh bìa.

2. Homepage Layout

• Homepage Style – Chọn bố cục trang chủ:
  • Default (Two Column Layout): 2 cột kèm sidebar.
  • One Column (Centered Layout): 1 cột chính giữa, tối giản.
• Novel Label Text
  Nhãn hiển thị cho nội dung tiểu thuyết (Novel). Để trống nếu không dùng.
  Ví dụ: Novel, LN, Light Novel, Web Novel.
• Hot Genre Display: Chọn genre để hiển thị block “Hot [Genre]” trên trang chủ (sắp xếp theo lượt xem). Chọn “Disable” để tắt.
  Lưu ý: Hot Genre sẽ không khả dụng khi dùng bố cục Default (Two Column); hãy chuyển sang One Column để bật.
• Slider Mode – Nguồn dữ liệu cho slider:
  • Top View (all time): Top lượt xem mọi thời điểm.
  • Trending: Đang thịnh hành (tự chuyển về Top nếu thiếu dữ liệu).
  • Newest: Mới đăng gần đây.
• Slider Layout – Kiểu hiển thị slider:
  • Square (1:2:1)
  • Square (3:4:3)
  • Carousel
  • Image Slider (slider dạng ảnh toàn màn hình, cần set banner thủ công cho từng manga).
  • Layered Image Slider (slider ảnh nhiều lớp, cần set banner thủ công cho từng manga).
• Slider Max Height: Chiều cao tối đa của Image Slider và Layered Image Slider (mặc định 350px).
• Slider Item Limit: Số lượng truyện hiển thị trong slider (mặc định 10).
• Personalized Homefeed: Bật các slider cá nhân hoá (Similar Reads / Suggestions / Finish Reminders) dành cho người dùng đã đăng nhập.
• New Chapter Badge: Hiển thị nhãn “New” cho các chương vừa xuất bản gần đây trên trang chủ và danh sách truyện.

Lưu ý: Khi chọn Image Slider hoặc Layered Image Slider, mục Slider Mode sẽ bị vô hiệu hoá.

3. Single Manga Page

• Page Layout Style – Bố cục trang chi tiết truyện:
  • Default (Single Column Grid)
  • Large Image (Big Cover Display)
  • With Sidebar (Grid + Sidebar)
  • Cover Split Layout (Bố cục mới cho trang chi tiết truyện: ảnh bìa hiển thị bên trái, thông tin và tab bên phải, chia 2 cột rõ ràng).
• Cover Image with Padding & Background: Thêm padding quanh ảnh bìa và dùng phiên bản làm mờ ở nền cho giao diện đẹp hơn (chỉ áp dụng với Cover Split).
• Show Chapter Cover Images: Hiển thị ảnh bìa chương trong danh sách chương (chỉ áp dụng cho truyện Comic). Tự lấy ảnh phù hợp đầu chương làm thumbnail.
• Related Manga Mode – Cách xác định truyện liên quan:
  • Search Related by Title (theo tên gần giống)
  • Same Genre
  • Same Translation Group
  • Same Author
• Show Related on Chapter Page: Bật block truyện liên quan ở cuối trang chương để tăng giữ chân người đọc.

4. Chapter Reader

• Reader Style: Hiện tại chỉ có Default (Standard Reader). Sẽ bổ sung thêm trong các bản cập nhật sau.
• Show Chapter Intro Block: Hiển thị block giới thiệu (ảnh, tiêu đề, tác giả/nhóm) trước nội dung chương. Có thể tắt để giao diện đọc tối giản hơn.
• Image Optimization: Tối ưu hình ảnh trong chương: tự động chuyển WebP, giảm dung lượng ảnh ~40%, cải thiện tốc độ tải.

5. Display Options

• Grid Display Mode
  • Default (kích thước chuẩn)
  • Compact (nhiều mục hơn mỗi hàng)
• Show Manga Card Stats: Hiển thị thống kê view/follow/rating dạng overlay nổi trên bìa truyện. Tắt nếu muốn giao diện sạch hơn hoặc tự tuỳ biến.

6. Reader UX Enhancements

• Continue Reading Suggestions: Gợi ý tiếp tục đọc dạng sticky ở cuối màn hình cho người dùng đã đăng nhập. Nếu người dùng tắt (X), block sẽ ẩn trong 1 giờ.
• Swipe to Show Chapter Navigation: Trên mobile, vuốt trái/phải để hiện nút chương trước/sau (không tự đổi trang).
• Sticky Chapter Navigation Bar: Thanh điều hướng cố định ở cuối khi đọc chương (trang chủ, thông tin truyện, danh sách chương, cấu hình đọc, trước/sau).
• Back to Top Button: Nút “Lên đầu trang” nổi, hiển thị trên mọi trang.
• Quick Filter in Sidebar: Hiển thị bộ lọc nhanh (thể loại, trạng thái, sắp xếp) ngay ở sidebar để người dùng tìm truyện tiện hơn.

7. Skin & Typography (mới trong 1.5.3)

• Skin Style (init_manga_skin_style)
  Tuỳ chọn giao diện khung thẻ:
  • Default: không áp dụng skin.
  • Card: khung bo + bóng đổ kiểu UIkit, hỗ trợ Dark Mode.

  Mẹo: Dùng “Card” để làm grid manga rõ lớp, nổi bật nội dung trên nền tối.

• Typography System (Headings & Body)
  Hai nhóm font độc lập:
  • Default: không nạp Google Fonts cho nhóm đó (giữ font hệ thống).
  • Presets: danh sách gợi ý (Inter, Roboto, Be Vietnam Pro, v.v.).
  • Custom: nhập chuỗi Google Fonts CSS2 (ví dụ Be+Vietnam+Pro:wght@400;500;600;700) hoặc tên font (mặc định hiểu 400;700).

  Google Fonts Loader (CSS2): encode khoảng trắng an toàn (fix “Be Vietnam Pro”), không gặp CORB. Cả Headings & Body đều hỗ trợ tiếng Việt tốt.

Kết luận

Trang Appearance cung cấp đầy đủ tuỳ chọn để tinh chỉnh nhận diện và trải nghiệm hiển thị của site. Nắm vững các cài đặt này giúp bạn xây dựng giao diện đẹp, hiệu quả và thân thiện với người đọc.

Luôn nhớ kích hoạt license để mở khoá toàn bộ tính năng và đừng quên lưu thay đổi sau mỗi lần cập nhật.