Trung tâm Cộng đồng
Register
Advertisement
VD hop thong tin

Ví dụ hộp thông tin cho nhân vật

Hộp thông tin giống như tờ thông tin hoặc các sidebar trong một bài viết của tạp chí, được thiết kế để hiển thị tóm tắt chủ để của trang. Chúng hiển thị các tiêu điểm theo một định dạng gọn gàng và dễ đọc. Các để mục của hộp thông tin thường phải giống nhau giữa các trang bài viết để tạo tính kiên định cho wiki. Hộp thông tin được tạo bằng bản mẫu, nhằm mang lại tính thống nhất cho các trang.

Wikia đã phát triển một phương pháp mới để viết hộp thông tin, gọi là hộp thông tin lưu động, giúp hộp thông tin hiển thị tốt trên nhiều thiết bị. Cách sử dụng không có gì thay đổi, nhưng cách bạn viết trên trong bản mẫu sẽ thay đổi nhiều. Một công cụ giúp chuyển đổi hộp thông tin cũng được tạo giúp bạn thực hiện việc chuyển đổi một cách dễ dàng và nhanh chóng.

Các liên kết hữu ích

Cách chèn hộp thông tin vào bài viết[]

PI-VE

Chèn hộp thông tin lưu động với trình soạn thảo trực quan

Bạn có thể chèn một hộp thông tin vào bài viết tương tự như cách bạn thực hiện với các bản mẫu khác thông qua các công cụ tích hợp sẵn, hoặc chế độ mã nguồn của trình soạn thảo. Trong trình soạn thảo trực quan, hộp thông tin lưu động có thể được chèn nhanh chóng thông qua tùy chọn 'Infobox' trong danh mục thả 'Chèn'.

Trong khi đó, ở chế độ mã nguồn, bạn cần sao chép cú pháp từ tài liệu trang bản mẫu (thường xuất hiện ở dưới cuối trang bản mẫu) và dán vào bài viết, thay đổi một số từ sau dấu bằng để cung cấp những thông tin cần thiết. Ví dụ:

{{Hộp thông tin nhân vật
 | tên        = Sasuke
 | ảnh        = Sasuke-manga.jpg
 | chú-thích  = Sasuke xuất hiện trong manga
}}

Hộp thông tin lưu động hoạt động hoàn toàn tương tự các bản mẫu khác. Tuy nhiên, các mã thẻ trên trang bản mẫu có phần khác, được thể hiện chi tiết bên dưới.

Cách tạo hộp thông tin[]

Hộp thông tin hướng dẫn

Hộp thông tin cơ bản

Đầu tiên, tạo một bản mẫu mới với tên bất kì - ví dụ như: Bản mẫu:Ví dụ. Nếu như trước đây, ta phải sử dụng các bảng table hoặc thẻ div, thì giờ đây ta sử dụng các thẻ infobox. Chúng ta sẽ bắt đầu với hộp thông tin có bố cục ngang (horizontal), chứa những thẻ cơ bản là tiêu đề và hình ảnh:

<infobox layout="horizontal">
  <title source="tên"><default>{{PAGENAME}}</default></title>
  <image source="ảnh" />
</infobox>

Đoạn mã này sẽ yêu cầu bản mẫu của bạn dùng các biến tênảnh cho thành phần tiêu đềhình ảnh. Hơn nữa, bạn có thể cung cấp thẻ default chứa giá trị mặc định nếu người dùng không nhập vào biến name.

Tiếp theo, ta chỉ cần thêm 3 trường nữa để chứa thêm thông tin:

<data source="xuất-hiện"><label>Xuất hiện</label></data>
<data source="nhật"><label>Diễn viên lồng tiếng Nhật</label></data>
<data source="anh"><label>Diễn viên lồng tiếng Anh</label></data>

Sau khi đã hoàn tất, ta sẽ có đoạn mã như sau:

<infobox layout="horizontal">
  <title source="tên"><default>{{PAGENAME}}</default></title>
  <image source="ảnh" />
  <data source="xuất-hiện"><label>Xuất hiện</label></data>
  <data source="nhật"><label>Diễn viên lồng tiếng Nhật</label></data>
  <data source="anh"><label>Diễn viên lồng tiếng Anh</label></data>
</infobox>

Giờ chúng ta đã có thể sử dụng bản mẫu vào bài viết, chèn vào các thông số tương ứng đề được một hộp thông tin hoạt động:

{{Ví dụ
 |tên = Haruno Sakura
 |ảnh = sakura.jpg
 |xuất-hiện = Truyện tranh chương 3
 |nhật = [[Chie Nakamura]]
 |anh = [[Kate Higgins]]
}}

Cách thay đổi bố cục hộp thông tin[]

Các hộp thông tin sử dụng loại mã này sẽ được tự động thiết kế, lấy những màu sắc từ chủ đề tùy chỉnh của cộng đồng bạn. Nếu bất kì biến nào bỏ trống thì hàng đó sẽ không hiển thị (trừ phi thẻ 'default' được sử dụng).

Các lựa chọn bố cục[]

Có 2 lựa chọn cho bố cục của hộp thông tin:

Bố cục mặc định (bố cục bảng) Bố cục chồng
Các nhãn hiển thị bên trái giá trị Các nhãn hiển thị bên trên giá trị
<infobox>
   ...
</infobox>
<infobox layout="stacked">
   ...
</infobox>
Screen Shot 2015-06-16 at 12.12

Bố cục mặc định (bố cục bảng)

Screen Shot 2015-06-16 at 12.10

Bố cục chồng

Chủ đề tùy chỉnh[]

Chủ đề mặc định của hộp thông tin có thể được ghi đè thông qua CSS cộng đồng và bằng các thuộc tính theme hoặc theme-source trên thẻ infobox.

  • Thuộc tính theme dùng để định lớp (class) CSS tùy chỉnh cho bản mẫu hộp thông tin.
  • Thuộc tính theme-source cho phép bạn đa dạng hóa lớp CSS thông qua thông số của bản mẫu.

Để biết thêm thông tin về cách dùng các thuộc tính và cách thiết kế chủ đề hộp thông tin, xem trang Trợ giúp:Hộp thông tin/CSS.

Cách chèn nhiều hình ảnh hoặc video[]

Infoboxtabs

Các thẻ ảnh

Để chèn nhiều hình ảnh vào cùng một hộp thông tin, bạn chỉ cần truyền vào thẻ <gallery>.

{{Example
 |name   = Naruto
 |image  = <gallery>
Naruto 1.jpg|Naruto xuất hiện trong manga
Naruto 2.jpg|Naruto xuất hiện trong anime
Naruto 3.jpg|Naruto xuất hiện trong anime phần 2
</gallery>
}}

Để thêm video vào hộp thông tin, chỉ cần sử dụng thẻ <image> như cách bạn làm với hình ảnh. Khi video được chèn vào thay vì hình ảnh, một thumbnail với nút biểu tượng phát và thông tin độ dài sẽ xuất hiện trên hộp thông tin, và nhấp vào sẽ mở lên trình phát video. Nếu bạn muốn thêm nhiều video, thêm thẻ <image> cho mỗi video.

Cách nhóm các dữ liệu[]

Advancedinfobox

Các nhóm và thứ tự trong hộp thông tin

Giờ bạn đã biết cách tạo một hộp thông tin đơn giản, tiếp theo, chúng tôi sẽ hướng dẫn cách xây dựng hộp thông tin nâng cao như hình bên.

Hộp thông tin này bắt đầu với 3 trường, sau đó là trường tiêu đề và hình ảnh. Như bạn thấy, trường tiêu đề không bắt buộc phải là trường đầu tiên.

<infobox layout="stacked">
  <data source="trước"><label>Trước</label></data>
  <data source="đang-xem"><label>Đang xem</label></data>
  <data source="kế"><label>Kế tiếp</label></data>
  <title source="tên" />
  <image source="ảnh" />
</infobox>

Nhóm các thông tin bên trong thẻ group[]

Thẻ <group> cho phép bạn nhóm các trường lại với nhau và đặt cho chúng một đề mục. Nhớ: các trường được khai báo nhưng không chứa giá trị sẽ không được hiển thị. Quy tắc này cũng áp dụng đối với nhóm - nếu không có trường nào (ngoài thẻ header) bên trong nhóm có giá trị, toàn bộ nhóm sẽ không hiển thị.

<infobox layout="stacked">
  <data source="trước"><label>Trước</label></data>
  <data source="đang-xem"><label>Đang xem</label></data>
  <data source="kế"><label>Kế tiếp</label></data>
  <title source="tên" />
  <image source="ảnh" />
  <group>
    <header>Chi tiết</header>
    <data source="ngày"><label>Ngày</label></data>
    <data source="nơi"><label>Địa điểm</label></data>
    <data source="kết-quả"><label>Kết quả</label></data>
  </group>
</infobox>

Bố cục ngang cho các nhóm[]

Screen Shot 2015-06-16 at 13.27

Nhóm theo bố cục ngang

Thay vì một danh sách dọc, nhóm có thể có bố cục ngang, các phần nội dung hiển thị cạnh nhau trên cùng một hàng bằng cách thêm thuộc tính layout=horizontal vào thẻ group.

<group layout="horizontal">
   ...
</group>

Buộc tất cả các thành phần trong nhóm phải hiển thị[]

Sử dụng thuộc tính show=incomplete, bạn có thể buộc tất cả các thành phần trong nhóm hiển thị, kể cả khi trường đó rỗng - trừ phi tất cả trường đều rỗng thì nhóm mới không thể hiển thị.

<group layout="horizontal" show="incomplete">
  <header>Các phe</header>
  <data source="phe1" />
  <data source="phe2" />
</group>

Sau khi hoàn tất, bản mẫu cuối cùng sẽ có dạng như sau:

<infobox layout="stacked">
  <data source="trước"><label>Trước</label></data>
  <data source="đang-xem"><label>Đang xem</label></data>
  <data source="kế"><label>Kế tiếp</label></data>
  <title source="tên" />
  <image source="ảnh" />
  <group>
    <header>Chi tiết</header>
    <data source="ngày"><label>Ngày</label></data>
    <data source="nơi"><label>Địa điểm</label></data>
    <data source="kết-quả"><label>Kết quả</label></data>
  </group>
  <group layout="horizontal" show="incomplete">
    <header>Các phe</header>
    <data source="phe1" />
    <data source="phe2" />
  </group>
</infobox>

Giờ bạn đã có thể sử dụng bản mẫu vào bài viết:

{{Trận chiến
 |trước = 
 |đang-xem = 
 |kế = 
 |tên = 
 |ảnh = 
 |ngày = 
 |nơi = 
 |kết-quả = 
 |phe1 = 
 |phe2 = 
}}

Nhóm thu gọn[]

PI-Collapse

Minh họa nhóm thu gọn

Các nhóm có thể được thu gọn bằng các thêm thuộc tính collapse vào thẻ group với một trong hai trạng thái khởi đầu là mở hoặc đóng. Hàng tiêu đề nhóm sẽ có thể nhấp vào (để mở rộng hoặc thu gọn nhóm).

<group collapse="closed">
  <header>Xuất hiện</header>
  <data source="phim" />
  <data source="truyện" />
</group>

Ghi chú: hàng tiêu đề phải được đặt ngay sau thẻ group thì cơ chế mới có thể hoạt động.

Tùy chỉnh nâng cao[]

Định dạng[]

Nếu bạn muốn thêm một vài thông tin mở rộng vào dữ liệu, như thêm biểu tượng, thể loại hoặc để xử lý các giá trị được truyền vào, định dạng trường sẽ cho phép bạn thực hiển điều đó.

  • Khi thẻ format được dùng, biến được cung cấp từ source= sẽ được định dạng/chỉnh sửa theo thẻ format
  • Nếu biến được cung cấp từ source= là rỗng, giá trị hiển thị ra ngoài được cung cấp sẽ là từ thẻ default (hoặc không hiển thị nếu thẻ default không được định).

Ví dụ một vài trường hợp sử dụng:

  • Thêm ký tự: <format>{{{giá}}} VNĐ</format>
  • Liên kết: <format>[[{{{trang}}}]]</format>
  • Thể loại: <format>[[Thể loại: Nhân vật {{{giới-tính}}}]]</format>

Hàm phân tích cú pháp[]

Hàm phân tích cú pháp có thể được thêm vào hộp thông tin. Tuy nhiên, kết quả sẽ tự động được ẩn nếu thông số, thẻ hoặc nguồn dữ liệu không chứa bất kì văn bản gì.

Code của bản mẫu Kết quả xuất
<data source="level">
  <label>Loại thuật</label>
  <default>{{#switch:{{{loại}}}|1=Nhẫn thuật|2=Ảo thuật|3=Thể thuật|#default=Không rõ}}</default>
</data>

Các hộp thông tin mẫu[]

Trợ giúp và phản hồi[]

  • Tìm đọc thêm các trang trợ giúp khác tại Trợ giúp:Mục lục.
  • Truy cập Trợ giúp:Trung tâm Cộng đồng Fandom để xem giới thiệu chung về cộng đồng và được hỗ trợ thêm.
  • Truy cập Trợ giúp:Liên hệ Fandom để được hỗ trợ, tư vấn, báo cáo lỗi hoặc quét dọn cộng đồng của bạn.
  • Tìm hiểu thêm về cách sử dụng FANDOM trên Đại học FANDOM, bao gồm các video ngắn cho tất cả các bậc kinh nghiệm.
Advertisement