[TUTs] zzPrefix - Màu nền cho tiền tố trên tiêu đề

  Bài viết hay nhất1
First topic message reminder :

zzPrefix - Màu nền cho tiền tố trên tiêu đề


Bạn nào hay ghé qua các diễn đàn Xenforo sẽ biết cái này, tên gốc là Thread Prefix Listing.
Forumotion thì vốn thiếu thốn sẵn, thấy cái gì hay thì ta mô phỏng lại.

Chức năng

zzPrefix sẽ làm nổi bật các tiền tố đầu tiêu đề bằng cách chuyển các từ đặt trong dấu ngoặc vuông [], sang dạng HTML để mình có thể thêm CSS màu nền cho nó.


Demo


Tiền tố trên Thống kê bài viết


Tiền tố tại các khu vực khác


Hướng dẫn


Bước 1

ACP >> Modules >> HTML & JAVASCRIPT >> Javascript Codes >> Create a new javascript: In all the pages

Code:
function lang_vi(a) {
   a = a.toLowerCase();
   a = a.replace(/\u00e0|\u00e1|\u1ea1|\u1ea3|\u00e3|\u00e2|\u1ea7|\u1ea5|\u1ead|\u1ea9|\u1eab|\u0103|\u1eb1|\u1eaf|\u1eb7|\u1eb3|\u1eb5/g, "a");
   a = a.replace(/\u00e8|\u00e9|\u1eb9|\u1ebb|\u1ebd|\u00ea|\u1ec1|\u1ebf|\u1ec7|\u1ec3|\u1ec5/g, "e");
   a = a.replace(/\u00ec|\u00ed|\u1ecb|\u1ec9|\u0129/g, "i");
   a = a.replace(/\u00f2|\u00f3|\u1ecd|\u1ecf|\u00f5|\u00f4|\u1ed3|\u1ed1|\u1ed9|\u1ed5|\u1ed7|\u01a1|\u1edd|\u1edb|\u1ee3|\u1edf|\u1ee1/g, "o");
   a = a.replace(/\u00f9|\u00fa|\u1ee5|\u1ee7|\u0169|\u01b0|\u1eeb|\u1ee9|\u1ef1|\u1eed|\u1eef/g, "u");
   a = a.replace(/\u1ef3|\u00fd|\u1ef5|\u1ef7|\u1ef9/g, "y");
   a = a.replace(/\u0111/g, "d");
   a = a.replace(/\W+/g, "-");
   return a.replace(/^\-+|\-+$/g, "")
}
$(function () {
   $("a[href^='/t'], a[href^='http://" + location.host + "/t']").html(function () {
      var a = $(this).text();
      if (/^\[(code|tool|hỏi đáp|thông báo|zzbaivong)\]/i.test(a)) return a.replace(/^\[[^\[\]]+\]/, function (a) {
         return '<span class="prefix ' + lang_vi(a) + '">' + a.slice(1,-1) + "</span>"
      })
   });
});

Lưu ý:
+ Nếu bạn đang sử dụng code trong bài Việt hóa URL thì trong đó đã có sẵn hàm lang_vi, nên bạn hãy xóa hàm này đi (Dòng 1 - 12).
+ Trong code trên là cách dùng giới hạn từ khóa, mỗi từ cách nhau bằng dấu gạch đứng. Nếu bạn không muốn giới hạn, tức là bất kì từ nào đặt trong dấu ngoặc vuông cũng sẽ chuyển sang dạng tiền tố nổi bật, thì bạn thay đoạn code sau:
Code:
if (/^\[(code|tool|hỏi đáp|thông báo|zzbaivong)\]/i.test(a))
...bằng:
Code:
if(/^\[([^\[\]]+)\]/.test(a))

Bước 2

ACP >> Display >> Pictures and Colors >> Colors >> CSS Stylesheet
Code:
.prefix{background:#008287;color:#FFF;border-radius:2px;display:inline-block;height:18px;line-height:18px;padding:0 4px} /* Mặc định cho các tiền tố chưa đặt style riêng */
.prefix.code{background:#16499a} /* Màu riêng cho tiền tố code */
.prefix.tool{background:#60a917} /* Màu riêng cho tiền tố Tool */
.prefix.thong-bao{background:#fa6800} /* Màu riêng cho tiền tố Thông báo */
.prefix.zzbaivong{background:#4390df} /* Màu riêng cho tiền tố zzbaivong */

Lưu ý:
+ Ngoài dòng css đầu tiên - mặc định, bạn có thể thêm màu tùy ý theo số tiền tố thường gặp trong diễn đàn của bạn.
+ Khi đặt css, bạn đặt như sau .prefix.TÊN-TIỀN-TỐ.
Tên tiền tố đặt theo nguyên tắc: Viết thường, Không dấu, Ký tự đặc biệt thì thay bằng gạch ngang. Ví dụ:

  • [Thông báo] => .prefix.thong-bao
  • [CODE] => .prefix.code


Nguồn

Zzbaivong (devs.forumvi.com)
  Bài viết hay nhất76

bangpro_IT wrote:Em đã làm theo hướng dẫn nhưng không thấy hiện màu
Demo online: iterforum.forumvi.com
nick test: memtest001
mật khẩu: Bang942850

bạn chưa add CSS thì phải
  Bài viết hay nhất77

bangpro_IT wrote:Em đã làm theo hướng dẫn nhưng không thấy hiện màu
Demo online: iterforum.forumvi.com
nick test: memtest001
mật khẩu: Bang942850
Demo đâu bạn? Cũng chẳng thấy Prefix?
  Bài viết hay nhất78
demo như trên, vào lại xem
  Bài viết hay nhất79
Vui lòng đọc kỹ hướng dẫn.
  Bài viết hay nhất80

KirigayaKazuto wrote:Vui lòng đọc kỹ hướng dẫn.
Bạn có thể chỉ giúp mình đã làm thiếu bước nào k :'(
  Bài viết hay nhất81
tại sao 4rum của em làm như các bước mà vẫn làm ko đc @@
  Bài viết hay nhất82

Kelvin_Kingleon wrote:tại sao 4rum của em làm như các bước mà vẫn làm ko đc @@

Không có lý do nào lại không được cả. Bạn vui lòng "đọc kỹ" hướng dẫn, nếu vẫn không được thì vui lòng cung cấp demo để mọi người giải quyết.
  Bài viết hay nhất83
em đã làm giống như thế, ko sai bước nào, demo đây ạ: http://translatorsteam.forumvi.com/
  Bài viết hay nhất84
Kiểm tra lại một trong những thứ sau:
1. Hãy chắc chắn forum bạn đã bật JavaScript
2. Bạn có check mục Placement chưa?
  Bài viết hay nhất85
đã có rồi, cảm ơn nhiều ^^
  Bài viết hay nhất86
Sao trang của mình từ đầu mấy cái chữ tiền tố đó có màu mà sau khi mình cài bảng thông báo vào là nó tắt phụt luôn, ko cong màu nữa,có ai biết tại sao ko, giúp mình với

Demo: http://studymore.forumvi.com
  Bài viết hay nhất87
Mình làm được rồi. Cảm ơn bạn
  Bài viết hay nhất88
Cho mình hỏi nếu trong tiêu đề chứ nhiều tiền tố cùng 1 lúc như:

Code:
[Tiền tố 1] [Tiền tố 2] ... Tiêu đề topic

Thì phải làm thế nào để code có thể gán span prefix cho từng tiền tố vậy?

Demo:
  Bài viết hay nhất89

anhdaodaica1 wrote:Cho mình hỏi nếu trong tiêu đề chứ nhiều tiền tố cùng 1 lúc như:

Code:
[Tiền tố 1] [Tiền tố 2] ... Tiêu đề topic

Thì phải làm thế nào để code có thể gán span prefix cho từng tiền tố vậy?

Demo:

Thay code tương ứng với phần trong hướng dẫn:
Code:
$("a[href^='/t'], a[href^='http://" + location.host + "/t']").html(function() {
    var a = $(this).text();
    if (/^\[([^\[\]]+)\]/.test(a)) return a.replace(/\[[^\[\]]+\]/g, function(a) {
        return '<span class="prefix ' + lang_vi(a) + '">' + a.slice(1, -1) + "</span>"
    })
});
  Bài viết hay nhất90
@Zzbaivong Mình làm được rồi, thank :D
You cannot reply to topics in this forum