Hướng dẫn thay tiêu đề cho mỗi node khác nhau bằng cách sử dụng TM

[PVS]

Vnxf.vn - Tài liệu này được dựa trên resource của bài phong cách khác nhau cho mỗi node trên Titlebar mà bạn có thể tìm thấy ở đây. Tất cả các css dựa trên css trong bài đó.

Tuy nhiên, như trong trường hợp của mình, nếu bạn có nhiều loại chủ đề khác nhau với các diễn đàn con và bạn muốn tạo kiểu cách khác nhau theo chủ đề thật chất thì điều này có thể dẫn đến khá nhiều trong css Extra.css. Mình không muốn có nhiều css tải về mà không được sử dụng vì vậy mình đã làm nó theo cách này.

Những gì mình đã làm là tạo ra ba mẫu. Thay đổi "whatever" với bất cứ điều gì có liên quan đến dự án của bạn, nhưng bạn phải sử dụng một mô tả độc đáo ở đây. Nếu bạn có các loại khác của các node sau đó bạn sẽ tạo css mẫu mới cho nó là tốt nhất.

whatever_forum_view.css
whatever_thread_view.css
whatever_category_view.css

Sau đó, bạn sẽ đặt các css trong các tập tin dù đó được sử dụng trong một node category, forum node hoặc thread.

Ví dụ. Sử dụng ví dụ sẽ đặt trong whatever_forum_view.css. Chú ý mình không phân biệt các node hoặc .forum_view . Mình sẽ làm điều đó trong TM.

.titleBarr {
  background: #5e29c6; /* Old browsers */
  background: -moz-linear-gradient(left, #5e29c6 0%, #5c2db2 50%, #37206b 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#5e29c6), color-stop(50%,#5c2db2), color-stop(100%,#37206b)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left, #5e29c6 0%,#5c2db2 50%,#37206b 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, #5e29c6 0%,#5c2db2 50%,#37206b 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(left, #5e29c6 0%,#5c2db2 50%,#37206b 100%); /* IE10+ */
  background: linear-gradient(to right, #5e29c6 0%,#5c2db2 50%,#37206b 100%); /* W3C */
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #59358a;
  box-shadow: 0 0 1px #bb9dc7 inset;}
.titleBar h1
{
  color: #dfcffc; text-shadow: 0 1px 3px #33163f;
}
.titleBar h1:before {
  background: url("@imagePath/xenforo/icons/icons&f.png") no-repeat center left transparent;
  content: "";
  padding-left: 45px;}

Bây giờ bạn cần phải tạo một Template Modification trên mẫu forum_view. Sử dụng TM cũng được bao phủ trên trang web này vì vậy mình sẽ không để thêm thông tin cần thiết cho hướng dẫn này. Bạn nên biết những gì bạn đang làm khi sử dụng TM.

1. Tạo một template modification mới và chọn forum_view như template.
   
2. Tạo một unique modification key. Ex: whatever_forum_view_title_css. Nó phải là duy nhất
   
3. Thêm một chi tiết nếu bạn muốn. Làm cho nó dễ dàng để tìm thấy sau đó.
   
4. Để lại lựa chọn tìm kiếm mặc định là Simple Replacement.
   
5. Sau đó bạn thêm tìm và thay thế sự lựa chọn cho hộp văn bản tương ứng của họ.

Tìm:

<xen:title>{$forum.title}{xen:helper pagenumber, $page}</xen:title>

Thay thế:

<xen:if is="in_array({$forum.parent_node_id}, array(x,y,z))">
<xen:require css="whatever_forum_view.css" />
</xen:if>
<xen:title>{$forum.title}{xen:helper pagenumber, $page}</xen:title>

Tôi đã sử dụng các npde cú pháp gốc trên để trang trải tất cả các node dưới những node gốc. Các css sẽ được nạp cho tất cả các nút dưới node gốc x, y, z.

Bạn cũng có thể giới hạn bởi các node cụ thể nếu như sử dụng tốt

<xen:if is="in_array({$forum.node_id}, array(x,y,z))">
<xen:require css="whatever_forum_view.css" />
</xen:if>
<xen:title>{$forum.title}{xen:helper pagenumber, $page}</xen:title>

Các css sẽ được nạp cho các node x, y, z được liệt kê ở trên.

Hoặc cho một node duy nhất sử dụng

<xen:if is="{$forum.node_id} == x">
<xen:require css="whatever_forum_view.css" />
</xen:if>
<xen:title>{$forum.title}{xen:helper pagenumber, $page}</xen:title>

Các css sẽ được nạp cho node x liệt kê ở trên.

Với phương pháp này, bạn có thể giới hạn các css mỗi node, thể loại, chủ đề hoặc bất kỳ loại node khác và không cần phải liệt kê node id trong css vì nó sẽ chỉ được sử dụng trong các node chọn trong template modification.

Bạn sẽ cần phải làm tương tự cho các loại bằng cách tạo ra một whatever_category_view.css và tạo ra một template modification trên mẫu category_view. Đối với category_view bạn sẽ sử dụng $category.node_id thay vì $forum.node_id và $category.parent_node_id thay vì $forum.parent_node_id.

Sự khác biệt tương tự sẽ được áp dụng cho các template thread_view sử dụng các chủ đề $thread.

Với điều này bạn có thể sử dụng kỹ năng css tuyệt vời bằng nhiều cách khác nhau mà không cần tải một tấn css trên nhiều trang.

Nguồn: xenforo.com​