Fandom

Cộng đồng Wikia Tiếng Việt

Cộng đồng Wikia Tiếng Việt

Trợ giúp:Hộp thông tin

358trang trên
Trung tâm Cộng đồng
Add New Page
Thảo luận0 Share
VD hop thong tin.png

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.png

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.png

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.17.png

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

Screen Shot 2015-06-16 at 12.10.54.png

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.png

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.png

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.08.png

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.png

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

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.

Vòng quanh Wikia

Wikia ngẫu nhiên