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

  Bài viết hay nhất1

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ất2
tuyệt vời ^^
  Bài viết hay nhất3
Thanks huynh :3
  Bài viết hay nhất4
sao forum e nó k thễ hiện tốt trên last vậy a ?

http://vietgame.123.st/
  Bài viết hay nhất5
Đầu tiên xin gửi lời cám ơn bạn về bài viết, mình dùng [Code] Thống kê bài viết 5 cột và Code Màu nền cho tiền tố trên tiêu đề của bạn thì không thấy hiển thị trên Thống kê bài viết 5 cột, mặc dù ở viewtoppic vẫn hiện.
Mong bạn giúp đỡ.
Xin trân thành cám ơn!
  Bài viết hay nhất6
Bạn tìm trong code, dòng 15:
Code:
this.innerHTML

Thay bằng:
Code:
$(this).text()
  Bài viết hay nhất7
Cám ơn bạn, nhưng vẫn chưa thể khắc phục được vấn đề mình gặp phải, mình đang sử dụng kèm [Code] Việt hóa URL của bạn hướng dẫn.
Mong hồi âm!
  Bài viết hay nhất8
Mình trả lời cho AnChina, còn bạn không có demo nên mình bó tay.
  Bài viết hay nhất9
@Admin wrote:Mình trả lời cho AnChina, còn bạn không có demo nên mình bó tay.

Xin lỗi vì làm mất thời gian của bạn, đây là demo trang web: http://dhsv-nttu.forumvi.com/
Mong bạn giúp đỡ!
  Bài viết hay nhất10
Bạn dò trong code "Tự động thêm tiền tố theo chuyên mục":
Code:
b[0].href

...thay bằng:
Code:
b.attr("href")
  Bài viết hay nhất11
Xin lỗi bạn do đọc không kĩ, mình đã thành công.
Cám ơn bạn về lòng nhiệt tình và tài năng!

Chúc bạn 1 buổi tối vui vẻ!
  Bài viết hay nhất12
@tidadinh wrote:Xin lỗi bạn do đọc không kĩ, mình đã thành công.
Cám ơn bạn về lòng nhiệt tình và tài năng!

Chúc bạn 1 buổi tối vui vẻ!
Ah, không phải lỗi do bạn, mà là do mình dùng js sai, cứ nghĩ sẽ ngắn gọn hơn, không ngờ lại gây lỗi, ảnh hưởng đến các code khác.
Chúc bạn 1 buổi tối vui vẻ!
  Bài viết hay nhất13
@Admin wrote:Bạn dò trong code "Tự động thêm tiền tố theo chuyên mục":
Code:
b[0].href

...thay bằng:
Code:
b.attr("href")
cái chrome dùng cách trên có lúc được lúc không. Dùng getAttribute hoặc attr cho chắc ăn @_______@
  Bài viết hay nhất14

Sao em làm nó lại bị lỗi như này nhỉ
đemo sống: www.conggamevn.com
  Bài viết hay nhất15
KhaiTâm wrote:
Sao em làm nó lại bị lỗi như này nhỉ
đemo sống: www.conggamevn.com
k acc test hả bạn :D
  Bài viết hay nhất16
acc test
tk: test5
pass: thienthan1a
  Bài viết hay nhất17
@Admin wrote:Bạn tìm trong code, dòng 15:
Code:
this.innerHTML

Thay bằng:
Code:
$(this).text()


Thanks !

- Mà cho e hõi thêm , bây giờ E không muốn khi viết tiền tố [Gunny] hay [Code] nó mới hiện màu , E muốn miễm ghi chữ Gunny hay Code là nó in màu được không anh ?
  Bài viết hay nhất18
@AnChina wrote:E muốn miễn ghi chữ Gunny hay Code là nó in màu được không anh ?

Trong code bài hướng dẫn, xóa dòng 16:
Code:
if (/^\[(code|tool|hỏi đáp|thông báo|zzbaivong)\]/i.test(a)) return a.replace(/^\[[^\[\]]+\]/, function (a) {
Thay bằng:
Code:
if (/\b(code|gunny)\b/i.test(a)) return a.replace(/\b(code|gunny)\b/i, function (a) {
  Bài viết hay nhất19
Admin ơi ? sao e làm được có chữ Gunny với code k vậy ? con các chữ khác k dc . VD : chữ Game . e làm sao k dc ạ ?

demo : http://vietgame.123.st/
  Bài viết hay nhất20
@AnChina wrote:Admin ơi ? sao e làm được có chữ Gunny với code k vậy ? con các chữ khác k dc . VD : chữ Game . e làm sao k dc ạ ?

demo : http://vietgame.123.st/
đây là js tiền tố bạn add vào
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']").html(function(){var a=$(this).text();if(/\b(game|gunny)\b/i.test(a))return a.replace(/\b(code|gunny)\b/i,function(a){return'<span class="prefix '+lang_vi(a)+'">'+a.replace(/[\[\]]/g,"")+"</span>"})})});
trong đó có đoạn if(/\b(game|gunny)\b/i.test(a)) (có tới 2 đoạn)
bạn add lại js, rồi sửa lại theo hướng dẫn nhé
vả lại ở demo bạn chữ game k nằm trong [...] (http://vietgame.123.st/t2648-topic#5201)
  Bài viết hay nhất21
@anhoang_qn wrote:
@AnChina wrote:Admin ơi ? sao e làm được có chữ Gunny với code k vậy ? con các chữ khác k dc . VD : chữ Game . e làm sao k dc ạ ?

demo : http://vietgame.123.st/
đây là js tiền tố bạn add vào
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']").html(function(){var a=$(this).text();if(/\b(game|gunny)\b/i.test(a))return a.replace(/\b(code|gunny)\b/i,function(a){return'<span class="prefix '+lang_vi(a)+'">'+a.replace(/[\[\]]/g,"")+"</span>"})})});
trong đó có đoạn if(/\b(game|gunny)\b/i.test(a)) (có tới 2 đoạn)
bạn add lại js, rồi sửa lại theo hướng dẫn nhé
vả lại ở demo bạn chữ game k nằm trong [...] (http://vietgame.123.st/t2648-topic#5201)


mình làm k cần [...] như trên Admin hd mà . gunny thì hiện , còn game thì k hiện ? mình thêm vài chữ vd : vip , hay gì cũng chã hiện

mà bạn nói có 2 đoạn gì / trong code cũa a admin có 1 đoạn mà
  Bài viết hay nhất22
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']").html(function () {
       var a = $(this).text();
       if (/\b(game|gunny)\b/i.test(a)) return a.replace(/\b(game|gunny)\b/i, function (a) {
          return '<span class="prefix ' + lang_vi(a) + '">' + a + "</span>"
       })
    });
 });
  Bài viết hay nhất23
@Admin wrote:
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']").html(function () {
       var a = $(this).text();
       if (/\b(game|gunny)\b/i.test(a)) return a.replace(/\b(game|gunny)\b/i, function (a) {
          return '<span class="prefix ' + lang_vi(a) + '">' + a + "</span>"
       })
    });
 });

tks ! e đã xem lại kĩ rùi
  Bài viết hay nhất24
sao giờ lại thêm chữ Private nó lại k hiện game típ :(
  Bài viết hay nhất25
Chào Anh! Em làm giống như hướng dẫn những chỉ đổi màu được chữ "Soft" thôi, còn chữ THÔNG BÁO, Hướng dẫn, Thủ thuật ...Nó không đổi màu theo ý mình được! Mong Anh giúp đỡ! Thanks!
Demo: http://thegioi-tinhoc.forumvi.com/
You cannot reply to topics in this forum