FANDOM


Có rất nhiều cách khác nhau trong việc ứng dụng mã wiki mà chúng hữu dụng đối với người dùng có trình độ cao trên giao diện desktop nhưng lại cản trở việc hiển thị nội dung trên các nền tảng di động. Bảng lồng nhau là một ví dụ điển hình.

Một nhắc nhở về Thực hành trên Di động: Bạn luôn luôn có thể xem trước những sửa đổi của mình sẽ trông như thế nào trên thiết bị di động bằng cách thêm chuỗi ?useskin=wikiamobile vào cuối URL hoặc nếu bạn sử dụng trình soạn thảo cổ điển, khi xem trước các sửa đổi của mình, bạn có thể chọn mục 'Điện thoại' từ danh mục xổ xuống ở góc trái trên cùng của mành hình.

Bảng lồng nhau là gì?

Bảng lồng nhau đơn giản là một bảng chứa một hoặc nhiều bảng và trong các bảng này có thể lại chứa các bảng khác.

Dưới đây là một ví dụ về các bảng lồng nhau trên cộng đồng Brave Frontier. Lưu ý sự khác biệt giữa kiểu hiển thị gọn gàng trên desktop và kiểu hiển thị chưa được tối ưu trên di động.
Desk Mob

Tại sao không nên lồng bảng?

Bạn nên tránh việc lồng các bảng mọi lúc có thể. Nhìn chung, các bảng luôn chiếm độ rộng ở mức ít nhất có thể và thậm chí mở rộng ra theo chiều dọc khi vùng không gian theo chiều ngang bị giới hạn. Tuy nhiên, nếu một bảng được đặt trong một bảng khác thì các ô của bảng bao bọc này sẽ buộc phải dãn độ rộng để chứa các bảng bên trong. Về bản chất, việc này buộc toàn bộ cấu trúc bảng phải dãn rộng hơn vùng không gian cho phép. Đây là điều cực kì tồi tệ đối với màn hình di động, bởi kích thước của màn hình di động thì nhỏ hơn rất nhiều.

Kết quả: rất nhiều phần nội dung của bảng theo chiều ngang sẽ bị ẩn đi và tạo một thanh cuộn ngang buộc người dùng phải cuộn thì mới có thể xem. Nếu bạn gỡ các bảng lồng nhau thành nhiều bảng độc lập thì phần nội dung sẽ được hiển thị theo chiều dọc thay vì ngang.

Việc này cũng cho phép các bảng trở nên linh hoạt hơn. Định dạng nội dung sẽ được định bởi kích cỡ màn hình di động. Do đó, trình duyệt sẽ dời các bảng đến những vị trí mà chúng có thể được hiển thị để cải thiện sự bố trí của nội dung khi cuộn.

Làm gì nếu cộng đồng của bạn sử dụng bảng lồng nhau?

Khuyến khích họ tách các bảng này ra và nỗ lực tìm ra giải pháp để tạo một cơ cấu mới không phụ thuộc vào vấn đề bảng lồng bảng. Giải pháp xếp các bảng cạnh nhau thường cũng cho ra kết quả tương tự. Nếu nội dung được hiển thị tốt nhất dưới định dạng bảng, bạn luôn có thể cân chỉnh các ô theo cách chúng sẽ được hiển thị như bảng lồng bảng, nhưng về bản chất vẫn là một bảng.

Thực hành tránh lồng bảng

Cách nhận dạng bảng lồng nhau

Trong mã nguồn, các bảng luôn bắt đầu bằng mã wiki dạng {| hoặc HTML <table>. Bảng được đóng bằng mã |} hoặc </table>. Vì vậy, nếu bạn duyệt từ đầu đến cuối của bảng mà thấy có chứa thêm một mã mở bảng thì bảng đó đang lồng bảng khác.

Dưới đây là đoạn mã ví dụ về bảng lồng nhau:
Ví dụ mã bảng lồng nhau

Làm thế nào để gỡ các bảng lồng nhau?

Bước đầu tiên là xác định có bao nhiêu bảng được lồng trong bảng chính. Bước thứ hai là tìm bảng được lồng trong cùng nhất, kéo nó ra khỏi chuỗi các bảng. Giờ nhấp chọn xem thử và bạn sẽ thấy bảng đó nếu đặt riêng sẽ trông như thế nào. Sau khi chọn xem thử, bạn có thể khắc phục các bảng còn lại nếu chúng trông không như mong đợi bằng cách kiểm tra các thông số của bảng (đoạn mã ngay sau mã mở bảng {|) Sau khi bạn đã gỡ hết các bảng bên trong ra khỏi bảng chính, bạn có thể xóa đoạn mã bảng chính. Giờ các bảng đã có thể hiển thị tốt hơn trên di động.

Làm thế nào để giữ gìn kiểu hiển thị trên desktop khi mà các bảng đã bị tách?

Các bảng nên được xếp từ trên xuống hoặc cạnh nhau. Việc này cho phép trình duyệt di động có thể đẩy và dịch chuyển các bảng sao cho phù hợp với không gian được phân phối trên màn hình di động. Nếu các bảng được đặt cạnh nhau và không vừa với độ rộng màn hình, trình duyệt sẽ tự động đẩy bảng cuối cùng xuống bên dưới.

Tuy nhiên, một trong những thách thức lớn nhất mà bạn sẽ gặp trong giai đoạn này là việc tìm một vị trí phù hợp với cả kiểu hiển thị trên desktop và di động. Việc này có thể cần chỉnh sửa inline CSS (CSS trực tiếp trên cùng dòng) để kiểm soát cách hiển thị bảng trên desktop. CSS được viết cho bảng sẽ chỉ ảnh hưởng tới desktop nên di động sẽ vẫn được hiển thị chính xác. Nếu bạn cần thêm trợ giúp về các đặt vị trí bảng, xem danh sách ở dưới cuối trang.

Nhiều thông tin hữu ích hơn về Lồng bảng

Nên lưu ý rằng nếu một bản mẫu đang được dùng để hiển thị một bảng trên nhiều trang khác nhau, việc sửa bảng lồng nhau trên bản mẫu đó cũng sẽ sửa các hiển thị trên di động cho tất cả các trang có chứa bản mẫu đó. Điều này có nghĩa việc áp dụng bản mẫu tối ưu hóa này có thể tác động nặng nề đến cộng đồng của bạn.

Các bảng chứa ảnh bên trong từng ô sẽ ép độ rộng các ô này thích ứng với kích thước ảnh. Vì vậy, các ảnh nên được giảm kích thước phù hợp việc hiển thị trên đi động hoặc kéo ra khỏi ô của bảng hoàn toàn. Nếu ảnh rất lớn và nằm bên ngoài bảng, trình duyệt đi động sẽ tự động giảm kích thước cho vừa với màn hình.

Các nguồn khác

Liên hệ nhân viên Fandom

Bạn cần hỗ trợ chuyển đổi các bảng lồng nhau trên cộng đồng của mình? Liên hệ với chúng tôi thông qua Đặc biệt:Liên hệ. Vui lòng thêm Di động: Bảng lồng nhau vào dòng tựa đề.

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.