Search found 17 matches for mod

Push Notification (thông báo đẩy) đang được ưa chuộng ở nhiều trang web hiện đại, nhằm gửi thông báo quan trọng đến người dùng, ngay trên trình duyệt của họ.

Hình thức gửi thông báo này có phần tương tự API HTML5 Notification trước đây, nhưng tối ưu hơn ở điểm có thể gửi thông báo ngay cả khi người dùng không mở trang web. Và nó cũng thân thiện với người dùng hơn so với hình thức gửi Email vì nội dung sẽ hiển thị ngay khi mở trình duyệt và họ có thể dừng nhận tin bất kỳ lúc nào.

Để ứng dụng công nghệ Push Notification thì trang web của bạn phải được bật SSL (HTTPS), và cấu hình server khá rắc rối. Nếu làm thế thì Forumotion xem như vô vọng rồi. Vì vậy, chúng ta sẽ dùng một dịch vụ trong gian là OneSignal để gửi thông báo. Có nhiều dịch vụ tương tự bao gồm miễn phí và trả phí, có cả từ Việt Nam nữa, nhưng mình chọn OneSignal vì nó cho phép tùy biến tốt hơn và hoàn toàn miễn phí.

Demo

Hướng dẫn cài đặt

Vì bài viết chứa rất nhiều hình ảnh nên mình sẽ chỉ để hình thu nhỏ, các bạn đọc hướng dẫn khó hiểu thì nhấn vào đó để xem hình gốc.

Bước 1

Mở trang OneSignal.com, nhấn vào nút Sign up free để đăng ký tài khoản.



Bạn có thể dùng tài khoản Github, Facebook có sẵn, hoặc dùng Email của bạn.
Trong mục Company or Organization Name, hãy nhập tên diễn đàn của bạn.

Bước 2

Sau khi đăng ký thành công, đăng nhập vào trang quản lý, lúc này bạn chưa có ứng dụng nào được tạo.



Nhấn Add a new app để tạo ứng dụng mới.
Trong mục App name, điền tên diễn đàn của bạn.
Nhất Create để tạo ứng dụng.

Bước 3

Chọn nền tảng cho ứng dụng vừa tạo.



Chọn Website Push, vì diễn đàn cũng Forumotion thuộc kiểu trang web.
Nhấn Next để tiếp tục.

Bước 4

Chọn nền tảng để cấu hình.



Chọn Google Chrome & Mozilla Firefox để cấu hình trước. Nếu bạn nào sử dụng Mac thì cấu hình Safari trước cũng được.
Nhấn Next để tiếp tục.

Bước 5

Cấu hình cho Google Chrome và Mozilla Firefox.

Để thực hiện được bước này, bạn phải có Server API Key và Sender ID.

Hướng dẫn tạo Server API Key và Sender ID:

Điền đầy đủ thông tin. Lưu ý, trong khung này có nhiều mục nên phải cuộn xuống (trong khung) để xem hết.



Site URL: Điền URL diễn đàn của bạn. Ví dụ:

Code:

http://devs.forumvi.com

Google Server API Key: Điền Server API Key của ứng dụng bạn tạo trên Google Services Wizard.
Default Notification Icon URL: Điền URL icon, kích thước tối thiểu 192 x 192 px. Bạn nên dùng logo của diễn đàn, nếu không, có thể dùng URL sau:

Code:

http://i.imgur.com/srF9Tzi.png

Tích vào My site is not fully HTTPS.
Choose Subdomain: Nên điền tên miền diễn đàn, nó sẽ được dùng làm tên miền phụ của OneSignal. Ví dụ mình điền devs, nó sẽ thành:

Code:

https://devs.onesignal.com

Google Project Number: Điền Sender ID của ứng dụng bạn tạo trên Google Services Wizard.
Nhấn Save và qua bước tiếp theo.

Bước 6

Chọn bộ SDK để tích hợp vào diễn đàn.



Chọn Website Push.
Nhấn Next để tiếp tục.

Bước 7

Cài đặt SDK của OneSignal vào diễn đàn.



Ghi lại mã Your App ID.
Không đóng OneSignal. Đi đến diễn đàn của bạn để cài đặt SDK.
Lưu ý không dùng trình duyệt ở chế độ ẩn danh, tắt các tiện ích chặn Popup và nên dùng Google Chrome.

Sao chép và chỉnh sửa code sau:

Code:

<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async='async'></script>
<script>
    var OneSignal = OneSignal || [];
    OneSignal.push(['init', {
        appId: 'APP_ID',
        safari_web_id: 'SAFARI_WEB_ID',
        autoRegister: true,
        subdomainName: 'SUBDOMAIN',
        notifyButton: {
            enable: true,
            size: 'small',
            position: 'bottom-left',
            prenotify: true,
            showCredit: false,
            text: {
                'tip.state.unsubscribed': 'Đăng ký nhận thông báo',
                'tip.state.subscribed': 'Bạn đã đăng ký nhận thông báo',
                'tip.state.blocked': 'Bạn đã chặn hiển thị thông báo',
                'message.prenotify': 'Click để đăng ký nhận thông báo',
                'message.action.subscribed': 'Cảm ơn bạn đã đăng ký!',
                'message.action.resubscribed': 'Bạn đã đăng ký nhận thông báo',
                'message.action.unsubscribed': 'Bạn đã hủy đăng ký nhận thông báo',
                'dialog.main.title': 'Quản lý thông báo',
                'dialog.main.button.subscribe': 'ĐĂNG KÝ',
                'dialog.main.button.unsubscribe': 'HỦY ĐĂNG KÝ',
                'dialog.blocked.title': 'Bỏ chặn thông báo',
                'dialog.blocked.message': 'Thực hiện các hướng dẫn sau để cho phép thông báo:'
            }
        },
        welcomeNotification: {
            title: 'SITE_NAME',
            message: 'Cảm ơn bạn đã đăng ký!'
        },
        promptOptions: {
            siteName: 'SITE_NAME',
            actionMessage: 'Chúng tôi muốn hiển thị thông báo cho bạn khi có bài viết hoặc cập nhật mới.',
            exampleNotificationTitle: 'Thông báo mẫu',
            exampleNotificationMessage: 'Ví dụ cách thông báo sẽ hiển thị',
            exampleNotificationCaption: 'Bạn có thể dừng nhận thông báo bất kỳ lúc nào',
            acceptButtonText: 'CHO PHÉP',
            cancelButtonText: 'BỎ QUA'
        }
    }]);
</script>

Trong code trên:
Thay APP_ID bằng mã Your App ID vừa lấy.
Thay SUBDOMAIN bằng tên miền phụ từ OneSignal tạo ở Bước 5 (mục Choose Subdomain).
Thay 2 vị trí SITE_NAME bằng tên diễn đàn của bạn.

Sau khi chỉnh sửa xong, mở template overall_header:
ACP >> Display >> Templates >> General >> overall_header

Tìm </head> và thêm code vừa chỉnh sửa vào phía trước nó.
Save template và Publish.

Bước 8

Kiểm tra hoạt động. Truy cập diễn đàn của bạn và kiểm tra thông báo.



Nhấn CHO PHÉP trong bảng yêu cầu xác nhận hiện ra. Nếu không hiện thì có thể code bạn sửa bị sai, kiểm tra lại Bước 7.

Sau đó một Popup sẽ hiện ra. Nhấn Cho phép (Allow) khi được yêu cầu xác nhận hiển thị thông báo.



Nếu nó không hiện, kiểm tra xem bạn có dùng tiện ích chặn Popup không, nếu có thì tắt nó đi, rồi nhấn vào icon thông báo ở góc dưới, bên trái diễn đàn.
Nếu bạn dùng trình duyệt ẩn danh sẽ không thể cho phép hiển thị thông báo được.

Bước 9

Kiểm tra người dùng nhận thông báo. Lúc này thì đó chính là bạn.



Nhấn vào nút Check Subscribed Users.
Nếu bạn làm Bước 8 đúng thì sẽ qua được bước này. Nhấn Next để tiếp tục.

Bước 10

Kiểm tra hoạt động của ứng dụng.



Nhấp vào nút Send Test Notification, một thông báo sẽ được hiện ra.



Nhấn vào thông báo vừa hiện ra, trình duyệt sẽ mở một tab mới, dẫn đến trang kiểm tra ứng dụng hoạt động.



Tắt trang kiểm tra đó và quay lại trang cấu hình. Nhấn vào nút Check Notification Status.
Nhấn Done.



Vậy là bạn đã cấu hình xong cho Google Chrome và Mozilla Firefox. Nhấn Done để kết thúc.

Bước 11

Cấu hình cho Safari.



Nhấn vào App Settings.
Nhấn nút Configure ở dòng Apple Safari.

Bước 12

Điền đầy đủ thông tin. Lưu ý, trong khung này có nhiều mục nên phải cuộn xuống (trong khung) để xem hết.



Site Name: Điền tên diễn đàn của bạn
Site URL: Điền URL diễn đàn của bạn.
Không tích vào I'd like to upload my own .p12 certificate
Tích vào I'd like to upload my own notification icons, và tải lên logo diễn đàn của bạn theo các kích thước được yêu cầu. Nếu không, bạn có thể tải về Bộ icon BELL để sử dụng.
Nhấn Save và qua bước tiếp theo.

Bước 13

Lấy mã Web ID cho Safari



Đóng Dialog lại, bằng cách nhấn vào Kí hiệu X.
Do mình không có máy Mac nên không hướng dẫn tiếp được. Hơn nữa, bước tiếp theo chỉ là kiểm thử ứng dụng tương tự như Google Chrome và Mozilla Firefox, chỉ còn thêm Web ID cho Safari vào code mà còn sai nữa thì mình cũng chịu.
Dù sao bạn cũng yên tâm, mình đã nhờ người kiểm tra bằng Safari trên Mac rồi, đảm bảo hoạt động.



Sau khi đóng Dialog thì tại dòng cấu hình Apple Safari bạn sẽ thấy mã Web ID của nó, sao chép lại.
Đi đến diễn đàn của bạn, mở template overall_header.
Tìm trong code mà bạn đã thêm vào ở Bước 7.
Thay SAFARI_WEB_ID bằng mã Web ID mà bạn vừa lấy được.
Save template và Publish.

Vậy là xong rồi đó, giờ bạn đã có thể tạo thông báo cho người dùng (nếu họ cho phép).

Cách tạo thông báo

Nhấn New Message
Điền tiêu đề thông báo trong mục Title và nội dung trong mục Content.



Nhấn vào Options để mở tùy chọn thêm.



Mở mục Launch URL và điền URL, để khi người dùng nhấn vào thông báo, trình duyệt sẽ chuyển đến URL đó.

Các tùy chọn khác, ít dùng hơn:
Include Additional Data: Bạn sẽ cần biết cách dùng API, có kiến thức javascript kha khá mới dùng được.
Include Android / iOS Action Buttons: Dùng cho ứng dụng Web, không sài được.
Include Chrome Web Push Action Buttons: Tùy chọn này chỉ hoạt động trên Google Chrome 48+, nó cho phép tạo thêm tối đa 2 nút phụ bên dưới thông báo.



Sau khi thông báo được gửi, bạn cũng có thể xem thống kê số người dùng tương tác với nó.

Nguồn

Zzbaivong (devs.forumvi.com)

---

Tags: #firefox #mod #tutorial #phpbb2 #phpbb3 #punbb #invision #notification #chrome #safari

Trong forum về code như Devs forumvi thì vấn đề màu mè cho khung code luôn được đặt lên hàng đầu. :D

Trước đây, mình đã có hướng dẫn vài cách ứng dụng các plugin syntax highlighter cho forum, mỗi cái có ưu và nhược điểm riêng, tạm kể ra vài tội như:
- Google Code Prettify: Tự nhận diện ngôn ngữ nhưng không chính xác lắm, xử lý rất chậm khi gặp code dài, kích thước file js lớn.
- Prismjs: Lỗi ở một số mã Regexp phức tạp, không tự nhận diện ngôn ngữ.
- CodeMirror: Không tự nhận diện ngôn ngữ, kích thước file js khá lớn.

Hôm nay mình sẽ hướng dẫn cách dùng highlightjs, một plugin syntax highlighter khắc phục được các nhược điểm trên.

Demo

Tính năng

1. Hỗ trợ 146 ngôn ngữ và 66 giao diện (Xem ví dụ).
   
2. Tự động nhận diện ngôn ngữ.
   
3. Kích thước file js nhỏ ~17Kb.
   
4. Sao chép nhanh dùng Clipboard.
   

Hạn chế

1. Không hỗ trợ phpBB2. Do cấu trúc phpBB2 khác biệt với 3 mã nguồn còn lại, và ít người dùng nên mình không làm.
   
2. Làm nổi bật cú pháp không chi tiết bằng 3 plugin mình giới thiệu trước đây.
   
3. Không có các tính năng phụ như: số dòng, tìm dòng, chọn giao diện, chọn toàn bộ (đã thay bằng nút copy). Mình thấy các tính năng này ít dùng, lại làm chậm xử lý nên bỏ bớt cho nó nuột.
   

Hướng dẫn

ACP >> Display >> QLTT >> overall_header

Tìm:

Code:

<script src="{JQUERY_PATH}" type="text/javascript"></script>
<script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>

Và thêm vào bên dưới nó, code sau:

Code:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/styles/github-gist.min.css">
<style>
/* Zzhljs - http://devs.forumvi.com */
dl.codebox:not(.spoiler) dt {
    display: none;
}
dl.codebox:not(.spoiler) dd {
    border: 0 none;
    background: #f8f8f8;
    position: relative;
    max-height: 100%;
}
.clipboard {
    display: block;
    color: #333;
    position: absolute;
    right: 4px;
    top: 4px;
    background: url(http://i.imgur.com/o9NOYtH.png) no-repeat center center #eee;
    border: 1px solid #D5D5D5;
    width: 30px;
    height: 30px;
    text-align: center;
    border-radius: 3px;
    transition: opacity 0.3s ease-in-out 0s;
    opacity: 0;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    -webkit-appearance:none;
    cursor: pointer;
}
.clipboard.check-circle {
    background-image: url(http://i.imgur.com/CBEkyLH.png);
}
.clipboard.exclamation-triangle {
    background-image: url(http://i.imgur.com/QQkE9Wj.png);
}
dl.codebox:not(.spoiler) dd:hover .clipboard {
    opacity: 1;
}
.clipboard:hover {
    background-color:#ddd;
    border-color:#ccc;
}
.hljs {
    background: #f8f8f8;
}
dl.codebox:not(.spoiler) code,
.codebox:not(.spoiler) dd.cont_code {
    max-height: 100%;
    margin: 0;
}
.codebox:not(.spoiler) {
    background-color: transparent;
    border: 0 none;
    margin: 0;
}
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/highlight.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.5/clipboard.min.js"></script>
<script>
/* Zzhljs - http://devs.forumvi.com */
jQuery(function($){
    var $code = $("code");
    if ($code.length) {
        hljs.configure({
            useBR: true
        });
        $code.each(function (i, block) {
            hljs.highlightBlock(block);
        });

        function fallbackMessage(action) {
            var actionMsg = '';
            var actionKey = (action === 'cut' ? 'X' : 'C');

            if (/iPhone|iPad/i.test(navigator.userAgent)) {
                actionMsg = 'No support!';
            } else if (/Mac/i.test(navigator.userAgent)) {
                actionMsg = 'Press ⌘-' + actionKey + ' to ' + action;
            } else {
                actionMsg = 'Press Ctrl-' + actionKey + ' to ' + action;
            }

            return actionMsg;
        }

        function afterClipboard(ele) {
            setTimeout(function(){
                ele.className = 'clipboard clipboard';
            }, 400);
        }

        var snippets = document.querySelectorAll('.codebox:not(.spoiler) > dd');

        [].forEach.call(snippets, function (snippet) {
            snippet.firstChild.insertAdjacentHTML('beforebegin', '<i class="clipboard clipboard" data-clipboard></i>');
        });

        var clipboardSnippets = new Clipboard('[data-clipboard]', {
            target: function (trigger) {
                return trigger.nextElementSibling;
            }
        });

        clipboardSnippets.on('success', function (e) {
            e.clearSelection();
            e.trigger.className = 'clipboard check-circle';
            afterClipboard(e.trigger);
        });

        clipboardSnippets.on('error', function (e) {
            e.trigger.className = 'clipboard exclamation-triangle';
            afterClipboard(e.trigger);
            alert(fallbackMessage(e.action));
        });
    }
});
</script>

Tài nguyên

Icon từ FlatIcon.
Javascript plugin HighlightJs và ClipboardJs.
Ứng dụng cho Forumotion viết bởi Zzbaivong.

---

Tags: #mod #template #tutorial #highlight #clipboard #hljs

II. Chức năng

1. Đăng nhập tự động. Ngay cả khi dissconect cũng sẽ tự đăng nhập lại.
   
2. Sử dụng bộ font emoticont thay thế cho emoticont bằng hình ảnh sẵn có của fm để giảm thời gian tải ảnh.
   
3. Hỗ trợ Buzz như yahoo.
   
4. Hỗ trợ các khung chèn link, chèn ảnh và chèn youtube.
   
5. Xem video youtube bằng popup.
   
6. Hỗ trợ chat riêng. Với nội dung chat riêng được mã hóa. Cho dù có xem trên link /chatbox cũng sẽ mã hóa. Giúp bảo vệ một ích riêng tư của thành viên. (Chức năng này hiện vẫn đang phát triển, có thể sẽ xảy ra một số lỗi nhỏ. Sẽ cố gắng khắc phục vào version kế.
   

III. Cài Đặt.

Vào Acp > Moduel > Chatbox > Cấu Hình 
Chọn:

1. Activate the ChatBox : Có
   
2. Display users avatars in the chatbox : Muốn bật avata thì chọn có, còn nếu không thì chọn không.
   
3. Chatbox display: Do no display
   

Vào ACP > Moduel > HTML pages management > Tạo một html mới. Chép toàn bộ code này vào.

HTML:

Thêm vào code này vào index_body chỗ nào tùy thích.. Tốt nhất là đề sau {CHATBOX_TOP}:

Code:

<iframe scrolling="no" width="100%" height="340" src="{page}" frameborder="0" allowfullscreen=""></iframe>


Thay {page} thành địa chỉ trang html bạn tạo ở trên.

IV. Tống Kết

Vậy là xong rồi. Mọi thứ còn lại js sẽ tự động làm. Bạn không cần phải làm gì nữa. Mọi góp ý và thắc mắc vui lòng gửi tại topic này. Xin cám ơn.

---

Tags: [You must be registered and logged in to see this link.]

Việt hóa thanh Toolbar

Giới thiệu

Code này sẻ Việt hóa toàn bộ thanh Toolbar của Forumotion.

Demo

Cài đặt

ACP >> Display >> Templates >> General >> overall_header

Tìm:

Code:

{HOSTING_JS}

Thêm vào bên dưới nó, code sau:

Code:

<script type="text/javascript">
//<![CDATA[
if(typeof(_userdata) == "undefined") var _userdata = new Object();
_lang["Share"] = "Chia sẻ";
_lang["Login"] = "Đăng nhập";
_lang["Register"] = "Đăng ký";
_lang["Welcome"] = "Xin chào";
_lang["Notifications"] = "Thông báo";
_lang["See_my_profile"] = "Xem lý Lịch";
_lang["Edit_profile"] = "Thay đổi lý lịch của bạn";
_lang["All_Topics"] = "Tất cả chủ đề";
_lang["All_Messages"] = "Tất cả tin nhắn";
_lang["js_topics_followed"] = "Bài viết đang theo dõi";
_lang["Admin_panel"] = "Bảng điều khiển quản trị";
_lang["Logout"] = "Thoát";

_lang["Notif_see_all"] = "Xem tất cả các thông báo.";
_lang["Notif_priv_msg"] = "Bạn nhận được một <a href=\"/privmsg?folder=inbox&amp;nid=%(nid)s\">tin nhắn riêng</a> từ <a href=\"/u%(id)d\">%(name)s</a>.";
_lang["Notif_report"] = "<a href=\"/u%(id)d\">%(name)s</a> đã gửi một <a href=\"/report?nid=%(nid)s\">tin báo cáo</a>.";
_lang["Notif_friend_req"] = "Bạn nhận được một <a href=\"/profile?mode=editprofile&amp;nid=%(nid)s&amp;page_profil=friendsfoes\">yêu cầu kết bạn</a> từ <a href=\"/u%(id)d\">%(name)s</a>.";
_lang["Notif_group_req"] = "<a href=\"/u%(id)d\">%(name)s</a> đã gửi một yêu cầu tham gia nhóm <a href=\"/g%(group_id)d-%(group_url_name)s?nid=%(nid)s\">%(group_name)s</a>.";
_lang["Notif_friend_con"] = "<a href=\"/u%(id)d\">%(name)s</a> đã đăng nhập";
_lang["Notif_wall_msg"] = "<a href=\"/u%(id)d\">%(name)s</a> vừa viết một tin nhắn lên <a href=\"/u%(self)dwall?nid=%(nid)s\">tường nhà bạn</a>.";
_lang["Notif_abuse"] = "<a href=\"/admin/index.forum?mode=active&amp;nid=%(nid)s&amp;part=misc&amp;sub=support\">Một tố cáo</a> đã được gửi.";
_lang["Notif_topic_watch"] = "<a href=\"/u%(id)d\">%(name)s</a> đã gửi bài <a href=\"/t%(topic_id)d-%(topic_name)s?nid=%(nid)s#%(post_id)d\">vào bài viết bạn đang theo dõi</a>.";
_lang["Notif_topic_watch_p"] = "<a href=\"/u%(id)d\">%(name)s</a> đã gửi bài <a href=\"/t%(topic_id)dp%(start)d-%(topic_name)s?nid=%(nid)s#%(post_id)d\">vào bài viết bạn đang theo dõi</a>.";
_lang["Notif_topic_watch_guest"] = "Có một khách đã gửi bài <a href=\"/t%(topic_id)d-%(topic_name)s?nid=%(nid)s#%(post_id)d\">vào bài viết bạn đang theo dõi</a>.";
_lang["Notif_topic_watch_p_guest"] = "Có một khách đã gửi bài <a href=\"/t%(topic_id)dp%(start)d-%(topic_name)s?nid=%(nid)s#%(post_id)d\">vào bài viết bạn đang theo dõi</a>.";
_lang["Notif_mention"] = "Tên bạn là <a href=\"/u%(id)d\">%(name)s</a> được nhắc trong <a href=\"/t%(topic_id)dp%(start)d-%(topic_name)s?nid=%(nid)s#%(post_id)d\">bài viết này</a>.";
_lang["Notif_hashtag"] = "Từ khóa <a href=\"/tags/%(tag)s\">#%(tag)s</a> được ghi vào <a href=\"/t%(topic_id)dp%(start)d-%(topic_name)s?nid=%(nid)s#%(post_id)d\">bài viết này</a>.";
_lang["All_PMs"] = "Tin nhắn riêng";
_lang["No_assigned_rank"] ="Không có chỉ định cấp bậc đặc biệt.";
_lang["Posts"] = "Số bài";
_lang["PMs"] = "Tin nhắn riêng";
_lang["Reputation"] ="Được cảm ơn";
 
if(typeof(_board) == "undefined") var _board = new Object();
_board["Forumotion"] = "";
_board["toolbar_title_url"] = "http://" + location.host;
//]]>
</script>

NGUỒN

@markai30 (viethoagame.forumvi.com)

---

Tags: #mod #tutorial #việt-hóa #toolbar

Đây là cách để đưa các nút Quote, Edit, Delete,... từ dạng hình ảnh về dạng văn bản thuần.

Lưu ý: Tut này được viết dựa trên mã nguồn mặc định của viewtopic_body trên tất cả các version. Nếu bạn đã đổi template này thì phải kiểm tra lại phần tử bọc ngoài của các nút này.

Đây là kết quả bạn có được:
https://jsfiddle.net/maclucpham/Lgk8rh1u/embedded/result/

Hướng dẫn

ACP >> Display >> Pictures and Colors >> Colors >> CSS Stylesheet
Chèn đoạn này vào CSS:

Code:

/* Việt hóa postOption */
a[href^="/"][href*="mode="][href*="p="] {display:inline-block;padding:2px 8px;}
a[href^="/"][href*="mode="][href*="p="] .optionpLink {padding-left:5px;}

ACP >> Modules >> HTML & JAVASCRIPT >> Javascript codes management >> Create a new javascript

Title * : Việt hóa postOption
Placement : In the topic
Javascript Code * :

Code:

$(function() {
  var version = 0;
  var selection = [".posting-icons", ".post-options", ".profile-icons"][version];
  var topicOption = {
    'edit': {
      text: "Sửa bài viết",
      icon: "pencil"
    },
    'delete': {
      text: "Xóa bài viết",
      icon: "times"
    },
    'quote': {
      text: "Trích dẫn",
      icon: "comment"
    },
    'ip': {
      text: "Xem IP",
      icon: "flag"
    }
  };
  $.each(topicOption, function(mode, val) {
    $(selection).find('a[href*=' + mode + ']').html('<i class="fa fa-' + val.icon + '"></i><span class="optionpLink">' + val.text + '</span>');
  });
});

Ghi chú:

Trong hướng dẫn trên ở dòng thứ 2, các bạn sẽ thấy số 0:

Code:

 var version = 0;

Đây là phiên bản Forumotion của bạn. Mặc định mình để là invision
Thay vào đó là một trong các giá trị sau tùy theo phiên bản của forum bạn:
0 : Invision
1 : punBB & phpBB2
2 : phpBB3

Nếu template viewtopic_body của bạn đã thay đổi thì dòng thứ 2 và 3:

Code:

 var version = 0;
  var selection = [".posting-icons", ".post-options", ".profile-icons"][version];

Các bạn sử thành

Code:

 var selection = "selector";

Thay selector thành Phần tử bọc ngoài của postOption


Nếu forum bạn chưa có bộ Font Awesome thì vào over_header đặt sau

Code:

{CSS}

đoạn code này:

Code:

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />

Để tìm hiểu về bộ font này, mời các bạn xem qua bài viết: [Tips] Huớng dẫn sử dụng Font Awesome

Nguồn

KirigayaKazuto (Mạc Lục Phàm) - devs.forumvi.com

---

Tags: #mod #tutorial #tut #việt-hóa #post-option

Thanh breadcrumb giúp người dùng dễ dàng điều hướng, biết được vị trí trong diễn đàn. Trong phiên bản PunBB thì nó gặp lỗi nhỏ ở các trang phụ, và cũng khó tùy chỉnh giao diện. Hướng dẫn này sẽ dùng Javascript điều chỉnh lại cấu trúc của breadcrumb trong PunBB, và thêm CSS để có được giao diện thân thiện hơn.

Hướng dẫn

Trước tiên hãy xóa hết CSS và JS liên quan đến breadcrumb (thanh đường dẫn) mà bạn đã thêm vào, rồi làm theo hướng dẫn sau:

Bước 1

Trong template overall_footer_begin, tìm:

Code:

<div id="pun-foot">

Thêm vào trước đó, code sau:

Code:

<script type="text/javascript">
//<![CDATA[
/* breadcrumb for punbb - devs.forumvi.com */
$(".pun-crumbs").each(function() {
    var $crumbs = $(this);
    $crumbs.find("strong").has("a").replaceWith(function() {
        return this.innerHTML;
    });
    var $items = $crumbs.find(".crumbs").children(),
        $navstrip = $('<ul class="navstrip clearfix"></ul>');
    $crumbs.empty().html($navstrip);
    $items.not(":empty").appendTo($navstrip).wrap("<li></li>");
    $items.first().parent().addClass("begin");
}).html(function() {
    return this.innerHTML.replace(/(»\s|&nbsp\;»&nbsp\;)/g, "");
});
//]]>
</script>

Bước 2

Thêm vào CSS:

Code:

/* breadcrumb for punbb - devs.forumvi.com */
.pun-crumbs{padding:1em 0}
.navstrip{color:#e8e8e8;font-weight:700;list-style:none;background:#fff;margin:20px 0;border:1px solid #ddd}
.navstrip > li{float:left;color:#666;margin:0;padding:0;line-height:36px;height:36px;display:block;position:relative;background:#FFF;padding:0 5px 0 20px}
.navstrip > li.begin{background-color:#1f537b;background-image:none;background-position:center;background-repeat:no-repeat;width:47px;padding-left:4px}
.navstrip li a{font-weight:700;text-decoration:none}
.navstrip > li.begin > a{text-indent:-9999px;display:block;background:url(http://i39.servimg.com/u/f39/19/09/43/62/house411.png) no-repeat center center transparent}
.navstrip > li:before,.navstrip > li:after{content:" ";border:18px solid transparent;border-left-width:12px;border-right:0;border-left-color:#FFF;display:block;position:absolute;right:-12px;top:0;z-index:10;width:0;height:0}
.navstrip > li:after{border-left-color:#DBDBDB;right:-13px;z-index:5}
.navstrip > li.begin:before{border-left-color:#1f537b}
.navstrip > li:hover,.navstrip > li:hover a{background-color:#333;color:#FFF}
.navstrip > li:hover:before{border-left-color:#333}

Tác giả

@Zzbaivong

---

Tags: #punbb #breadcrumb #mod #tutorial

zzRank sẽ tạo ra nhiều kiểu huân chương cho từng mốc bài viết. Bằng cách kết hợp với điều kiện điểm thưởng và lượt cảm ơn, huân chương của bạn sẽ phong phú và hợp lý hơn.

Khi bạn sử dụng rank mặc định của forumotion sẽ chỉ có một huân chương cho mỗi cấp bậc, thay đổi mỗi khi lên cấp. Với zzRank, bạn có thể giữ lại huân chương của cấp bên dưới và bổ sung thêm các điều kiện về điểm thưởng, lượt cảm ơn để tạo thêm nhiều kiểu huận chương mới trong cùng cấp bậc đó.

Các thông số cho từng kiểu huân chương được viết ở dạng plainObject nên rất dễ tùy chỉnh và áp dụng.

Demo

http://jsfiddle.net/baivong/a5k3yjgo/2/show/

Hướng dẫn

Bước 1

Tìm trong temp viewtopic_body:

Code:

<!-- BEGIN profile_field -->
{postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->

Sửa thành:

Code:

<!-- BEGIN profile_field -->
<p class="profile_field_mess">
    {postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
</p>
<!-- END profile_field -->

Bước 2

Đặt code sau ở nơi muốn hiển thị rank:

Code:

<div class="rank_mess"></div>

Lưu ý: Vị trí của code phải nằm trong .post

Bước 3

Tạo một file js, check vào In the topics:

Code:

/*!
 * zzRank v0.2.1 by Zzbaivong <devs.forumvi.com>
 * Thêm huân chương dựa theo số lượng bài viết
 */
$(function() {
    var data_rank = {
        10: {
            title: "10 bài viết",
            desc: "Huân chương tưởng thưởng cho thành viên tích cực, đăng 10 bài viết trở lên. Điểm thưởng tối thiểu là 20.",
            icon: "http://blog.uhm.vn/emo/laluot/2.gif",
            point: 20
        },
        50: {
            title: "50 bài viết",
            desc: "Huân chương tưởng thưởng cho thành viên tích cực, đăng 50 bài viết trở lên. Điểm tưởng lớn hơn hoặc bằng số bài viết.",
            icon: "http://blog.uhm.vn/emo/laluot/5.gif",
            point: ">"
        },
        100: {
            title: "100 bài viết",
            desc: "Huân chương tưởng thưởng cho thành viên tích cực, đăng 100 bài viết trở lên. Được cảm ơn từ 10 lần trở lên.",
            icon: "http://blog.uhm.vn/emo/laluot/20.gif",
            thank: 10
        },
        500: {
            title: "500 bài viết",
            desc: "Huân chương tưởng thưởng cho thành viên tích cực, đăng 500 bài viết trở lên. Điểm tưởng lớn hơn hoặc bằng số bài viết. Được cảm ơn từ 99 lần trở lên.",
            icon: "http://blog.uhm.vn/emo/laluot/10.gif",
            point: ">",
            thank: 99
        },
        x500: {
            title: "Spamer",
            desc: "Thành viên đăng 500 bài viết trở lên, nhưng điểm thưởng thấp hơn số bài viết.",
            icon: "http://blog.uhm.vn/emo/laluot/24.gif",
            point: "<"
        }
    };
    
    function checkif(key, check, val, post) {
        var cPost = data_rank[key][check];
        if (($.type(cPost) === "number" && cPost <= val) || ($.type(cPost) === "string" && cPost === ">" && val >= post) || ($.type(cPost) === "string" && cPost === "<" && val < post)) {
            return true;
        } else {
            return false;
        }
    }

    function getNumber(t, txt) {
        return parseInt($(t).closest(".post").find(".profile_field_mess:contains('" + txt + " : ')").text().match(/\d+/)[0], 10);
    }

    $(".rank_mess").html(function() {
        var all = "";

        var post_mess = getNumber(this, "Posts"),
            point_mess = getNumber(this, "Points"),
            thank_mess = getNumber(this, "Thanked");

        $.each(data_rank, function(key, val) {

            var point = data_rank[key].point,
                thank = data_rank[key].thank;

            if (post_mess >= parseInt(key.match(/\d+/)[0], 10)) {
                if ((point === undefined && thank === undefined) || (point !== undefined && thank === undefined && checkif(key, "point", point_mess, post_mess)) || (point === undefined && thank !== undefined && checkif(key, "thank", thank_mess, post_mess)) || (point !== undefined && checkif(key, "point", point_mess, post_mess) && thank !== undefined && checkif(key, "thank", thank_mess, post_mess))) {

                    all += '<fieldset><legend>' + data_rank[key].title + '</legend><img src="' + data_rank[key].icon + '" alt="' + data_rank[key].title + '" title="' + data_rank[key].desc + '" /></fieldset>';

                }
            }

        });

        return all;
    });
});

Lưu ý: Trong code trên, ở dòng 56, thay từ Posts bằng từ chú thích số lượng bài viết của thành viên, trong diễn đàn của bạn. Tương tự với từ Points, Thanked.

Ghi chú

Chỉnh sửa lại thông số data_rank(dòng 6 - 38) theo ý muốn, trong đó:

Code:

// Đây là thiết lập cho một rank, ở một mức bài viết
10: { // 10 là số bài tối thiểu để đạt được huân chương
    title: "10 bài viết", // Ghi chú ngắn gọn cho huân chương
    desc: "Huân chương tưởng thưởng cho thành viên tích cực, đăng 10 bài viết trở lên.", // Ghi chú chi tiết cho huân chương
    icon: "http://blog.uhm.vn/emo/laluot/2.gif" // Ảnh huân chương sẽ hiển thị
}

Bạn cũng có thể thêm điều kiện point và thank nếu muốn, ví dụ:

Code:

point: ">" // point >= post
point: "<" // point < post
point: 3 // point >= 3

Nếu như mức bài viết trùng nhau, như trong ví dụ trên, trùng mức 500 bài viết, thì bạn thêm ký tự bất kỳ ở trước.

Để thêm từng mức bài khác nhau thì bạn dùng lặp lại cấu trúc trên, lưu ý là ở nhóm cuối cùng không có dấu phẩy (,).

Nếu biết cách sử dụng plainObject, bạn cũng có thể tự thêm các thông tin khác cho phù hợp.


Xem v0.1 tại: https://devs.forumvi.com/t861-hoi-ap-js-xet-rank-nhe-nhat-co-the?showpost=p5584

Nguồn

Zzbaivong (devs.forumvi.com)

---

Tags: #mod #tutorial #phpbb2 #phpbb3 #punbb #invision #rank

Cập nhật mod Topic prefixes cũ của Việt K. Mod này sẽ tạo ra một danh mục các tiền tố (prefix) cho người dùng lựa chọn khi họ đăng bài viết.

Thay code prefix của ViệtK bằng code này:

Code:

var prefixes = ["Thông báo", "Tài liệu", "Bàn luận", "Chia sẻ", "Giải trí", "Truyện", "Tin tức", "Video - Clip", "Âm nhạc", "Bầu chọn", "Kiến thức", "Kĩ năng", "Tranh luận"]; //danh sách các prefix
var _pm = false; //true: cho phép dùng prefix khi gửi tin nhắn
/*!
 * Topic prefixes - Copyright © 2011 by Viet K - chinhphuc.info
 * Fix by Zzbaivong - devs.forumvi.com
 */
$(function() {
    var chk = false;
    if (_pm) chk = /\privmsg/.test(location.href);
    if (/\/post/.test(location.href) || chk) {
        var $select = $("<select>", {
            id: "prefix",
            style: "margin-top: 2px; margin-right:5px; height: 21px",
            size: 1,
            html: '<option value="">(Chọn tiền tố)</option>'
        });
        $.each(prefixes, function(i, val) {
            $("<option>", {
                value: val,
                text: val
            }).appendTo($select);
        });
        var $subject = $("input[name='subject']");
        $select.insertBefore("input[name='subject']");
        $subject.width($subject.width() - $select.width() - 5);
        var testPrefix = new RegExp("^\\[(" + prefixes.join("|") + ")\\]");
        var title = $subject.val();
        if (testPrefix.test(title)) {
            var prefix = title.match(/^\[([^\[\]]+)\]\s*(.*)/);
            $select.find("option[value='" + prefix[1] + "']").attr("selected", true);
            console.log($select.find("option[value='" + prefix[1] + "']"));
            $subject.val(prefix[2]);
        }
        $("input[name='post']").click(function() {
            if ($subject.val().trim() !== "" && $select.val() !== "") $subject.val("[" + $select.val() + "] " + $subject.val())
        });
    }
});

---

Tags: #mod #javascript #jquery #prefix

jQuery plugin Announcement sẽ gói gọn tất cả thông báo vào một bảng nhỏ nằm bên dưới diễn đàn, cách sử dụng không có nhiều khác biệt với chức năng mặc định nên bạn sẽ không gặp chút khó khăn nào để làm quen với nó.
Nếu bạn đã thấy nhàm chán với thông báo chạy phía trên diễn đàn thì đây chắc chắn sẽ là lựa chọn tuyệt vời dành cho bạn.

Demo

https://baivong.github.io/announcement/

Chức năng

1. Giữ lại các tuỳ chọn của chức năng thông báo mặc định.
   
2. Dễ dàng xem từng tin riêng.
   
3. Cho phép người dùng ẩn hoặc tắt bảng.
   
4. 15 hiệu ứng chuyển tin.
   

Hướng dẫn

Cài đặt

ACP >> Display >> Templates >> QLTT >> overall_header

Tìm:

Code:

{JS_DIR}jquery/ticker/ticker.css

và thay bằng:

Code:

//baivong.github.io/announcement/dist/jquery.announcement.css

Tìm:

Code:

{JS_DIR}jquery/ticker/ticker.js

và thay bằng:

Code:

//baivong.github.io/announcement/dist/jquery.announcement.min.js

Tìm:

Code:

Ticker.start({
    height : {switch_ticker.HEIGHT},
    spacing : {switch_ticker.SPACING},
    speed : {switch_ticker.SPEED},
    direction : '{switch_ticker.DIRECTION}',
    pause : {switch_ticker.STOP_TIME}
});

và thay bằng:

Code:

var tickerDirection = '{switch_ticker.DIRECTION}',
    tickerEffect = '',

    tickerWidth = {switch_ticker.SPACING},
    tickerHeight = {switch_ticker.HEIGHT};

if (tickerWidth === 0) tickerWidth = 'auto';
if (tickerHeight === 0) tickerHeight = 'auto';

switch (tickerDirection) {
    case 'top':
        tickerEffect = 'zoom-in';
        break;

    case 'left':
        tickerEffect = 'rotate-left';
        break;

    case 'bottom':
        tickerEffect = 'zoom-out';
        break;

    case 'right':
        tickerEffect = 'shuffle';
        break;

    default:
        tickerEffect = 'fading';
}

$('#announcements').announcement({

    title: 'Thông báo',

    showToggle: true,
    showClose: !!{switch_ticker.STOP_TIME},

    position: 'bottom-right',

    width: tickerWidth,
    height: tickerHeight,

    speed: {switch_ticker.SPEED},

    effect: tickerEffect

});

Nếu bạn muốn bảng thông báo nằm bên trái thì trong code trên, dòng 38, sửa bottom-right thành bottom-left. Ở dòng 33, bạn cũng có thể thay Thông báo, bằng tiêu đề khác phù hợp hơn.

Tìm:

Code:

<!-- BEGIN switch_ticker -->
<div id="fa_ticker_block" style="padding-top:4px;">
    <div class="module main">
        <div class="main-content clearfix">
            <div id="fa_ticker_container">
                <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                    <div class="fa_ticker_content">
                        <!-- BEGIN ticker_row -->
                        <div>{switch_ticker.ticker_row.ELEMENT}</div>
                        <!-- END ticker_row -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END switch_ticker -->

và thay bằng:

Code:

<!-- BEGIN switch_ticker -->
<div id="fa_ticker_block" style="display: none;">
    <ul id="announcements">
        <!-- BEGIN ticker_row -->
        <li>{switch_ticker.ticker_row.ELEMENT}</li>
        <!-- END ticker_row -->
    </ul>
</div>
<!-- END switch_ticker -->

Tìm và xoá:

Code:

<!-- BEGIN switch_ticker_new -->
Bao gồm cả code nằm bên trong nó
Có 3 đoạn switch_ticker_new như thế này
<!-- END switch_ticker_new -->

Sử dụng

ACP >> QLTT >> Messages and e-mails >> Announcements

>> General announcements options: Tùy chọn chức năng

• Activate announcements : Bật/tắt chức năng thông báo
  
• Announcements display : Trang sẽ hiển thị thông báo
  
• Scrolling : Hiệu ứng chuyển tin thông báo.
  
• Scrolling speed : Thời gian chuyển giữa 2 tin kế tiếp. Đơn vị: giây(seconds).
  
• Stop time : jQuery Announcement sử dụng thông số này với vai trò showClose, nhận 2 giá trị 0 hoặc 1 để tắt hoặc bật nút đóng.
  
• Space between announcements (in pixels) : jQuery Announcement sử dụng thông số này với vai trò width để xác định chiều rộng. Đơn vị: px(pixels).
  
• Announcements block height (in pixels) : jQuery Announcement sử dụng thông số này với vai trò height để xác định chiều cao. Đơn vị: px(pixels).
  

>> Announcements: Danh sách các tin thông báo

Bạn có thể thêm nhiều thông báo mới bằng cách click vào nút +.
Nếu bạn chọn Scrolling là Deactivate, thì thông báo sẽ chỉ hiển thị duy nhất tin đầu tiên.

Nguồn

Zzbaivong (devs.forumvi.com)

---

Tags: #mod #jquery-plugin #tutorial #phpbb2 #phpbb3 #punbb #invision #announcement

CodeMirror là một Text editor, viết bằng Javascript hoạt động trên trình duyệt, được dùng trong dev tool của Chrome, Firefox và nhiều Text editor khác như Brackets,  Light Table, ... Trong forumotion, nó được dùng làm công cụ chỉnh sửa CSS, Templates, trang html.
Ở bài này mình sẽ ứng dụng nó để làm nổi bật cú pháp trong code. Xét về dung lượng, nó có vẻ hơi khủng nếu đem so với 2 cách dùng plugin Google Code Prettify và Prismjs mà mình giới thiệu trước đây. Tuy nhiên, trái với vẻ bề ngoài nặng nề, nó có tốc độ xử lý rất nhanh và ổn định.

Chức năng

Ưu điểm

• Chức năng di chuyển nhanh bằng cách nhập số dòng. Nhập 0 để chuyển đến dòng cuối.
  
• Hỗ trợ chọn nhanh toàn bộ code.
  
• Xử lý nhanh chóng, phân biệt rõ cú pháp trong code.
  
• 30 giao diện thoải mái lựa chọn.
  
• Hỗ trợ rất nhiều Add-on và API nếu bạn muốn tùy chỉnh thêm.
  

Nhược điểm

• Chỉ áp dụng cho 3 loại ngôn ngữ HTML-CSS-JS.
  
• Một số mã regexp không được xác định đúng.
  

Cập nhật: Sử dụng phiên bản mới nhất cho các addon (21/6/2015), và thay thế core của codemirror bằng addon stand-alone, giúp giảm dung lượng từ 192kb xuống còn 48kb.

Demo

Hướng dẫn

Tạo file javascript zzCodeMirror
Title * : zzCodeMirror
Placement : In all the pages
Javascript Code * :

Code:

$(function() {
    window.codeTranslate = {
        gotoLineOffsetTop: 5
    };
    $("code").length && $.getScript("http://baivong.github.io/cdn/devsforumvi/js/35300.js");
});

Trong code trên, gotoLineOffsetTop là tham số khoảng cách của dòng code với mép trên trình duyệt. Nếu bạn sử dụng Toolbar của forumotion thì thay số 5 bằng 35.

Chú ý:
zzCodeMirror không sử dụng được cho phpBB2.
Gỡ bỏ các mod, plugin liên quan đến khung code trước khi sử dụng.
Nên upload lại file CSS và Javascript lên host của riêng bạn khi sử dụng, ví dụ như Google. Xem hướng dẫn [You must be registered and logged in to see this link.].
zzCodeMirror được tùy biến để nhận dạng 3 ngôn ngữ HTML - CSS - Javascript, đây là phần mình viết thêm nên nếu gặp lỗi thì gửi báo cáo ngay tại chủ đề này. Thử nghiệm tại [You must be registered and logged in to see this link.]

Phiên bản áp dụng

phpBB3, punBB, Invision

Source code

CSS

[You must be registered and logged in to see this link.]

Javascript

[You must be registered and logged in to see this link.]

Nguồn

Zzbaivong (devs.forumvi.com)

---

Tags: [You must be registered and logged in to see this link.]

Cách 1

Dùng thuộc tính background.

Trong temp viewforum_body, tìm:

Code:

{BOARD_INDEX}

... thêm vào bên dưới:

Code:

<div id="banner{FORUM_ID}" class="main paged banner-category"></div>

Thêm vào CSS (mẫu):

Code:

.banner-category {
    height: 150px;
    background: url(IMG_1) no-repeat center center/auto 100% transparent;
    background-size: cover;
}
#banner2 {
    background-image: url(IMG_2);
}
#banner7 {
    background-image: url(IMG_7);
}

Lưu ý

Trong code trên:

IMG_1 là link ảnh dùng làm banner mặc định cho tất cả chuyên mục.

Để đặt banner riêng cho mỗi chuyên mục thì thêm thuộc tính background-image cho [b]#banner<forum id>[/b] (trong ví dụ trên là chuyên mục 2 và 7).

Nếu không muốn dùng banner mặc định thì,
sửa: url(IMG_1) thành none,
và xóa height: 150px;
Nếu dùng cách này thì khi thêm banner riêng, nhớ bổ sung thuộc tính height.

Cách 2

Dùng link ảnh cố định.

Để dùng cách này thì bạn phải tải ảnh lên host cho phép giữ nguyên tên ảnh và đường dẫn chung, ví dụ photobucket, dropbox... Trong đó tên ảnh là forum id.

Trong temp viewforum_body, tìm:

Code:

{BOARD_INDEX}

... thêm vào bên dưới:

Code:

<div class="main paged">
    <img src="../images/{FORUM_ID}.png" />
</div>

Lưu ý

Code trên chỉ là ví dụ, link ảnh thay đổi theo host bạn dùng.

---

Tags: #mod #tutorial #punbb #category

Hướng dẫn này sẽ giúp bạn tạo chức năng Đăng ký nhanh cho diễn đàn, người dùng sau khi điền đủ thông tin đăng ký, tài khoản sẽ được kích hoạt và tự đăng nhập ngay sau đó.

Chức năng

• Đăng ký thành viên nhanh.
  
• Tự đăng nhập sau khi đăng ký.
  
• Quay trở lại trang đang xem.
  
• Không cần kích hoạt tài khoản.
  
• Giới hạn số lần đăng ký theo IP.
  
• Áp dụng cho tất cả liên kết đăng ký.
  
• Giao diện gọn, đẹp.
  
• Hỗ trợ ngôn ngữ Anh - Việt.
  

Demo

Hướng dẫn

Bước 1

Tùy chỉnh
ACP >> General >> Forum >> Security >> Security Administration
Giới hạn số tài khoản có thể tạo trong 24h cho một IP:
IP address accounts creation limit, for each 24 hours : 10

ACP >> Users & Groups >> Users >> Users options
Cho phép tự kích hoạt tài khoản:
New accounts activation : No activation
Bỏ yêu cầu nhập mã captcha:
Confirmation code : No
Cho phép đăng ký thành viên:
Allow new members : Yes

ACP >> Users & Groups >> Users >> Profiles >> Profile fields >> [You must be [You must be registered and logged in to see this link.] and [You must be registered and logged in to see this link.] to see this image.]Modify
Bỏ hết các field bắt buộc khi đăng ký:
Necessarily filled ? No

Bước 3

Sửa Template
ACP >> Display >> Templates >> General >> overall_footer_begin

Tìm:

Code:

<div id="pun-foot">

Đặt trước nó:

Code:

<!-- Quick register by Zzbaivong - devs.forumvi.com -->
<!-- BEGIN switch_user_logged_out -->
<div id="qick_reg_overlay" style="z-index:99999;"></div>
<div id="qick_reg" style="z-index:999999;">
   <div id="reg_loder">Đang kiểm tra dữ liệu...</div>
   <p id="reg_tip">Bạn phải điền đầy đủ thông tin đăng ký.</p>
   <a href="javascript:void(0)" class="modal_close"></a>
   <form onsubmit="submit_reg(); return false" action="/register?agreed=true&step=2" method="post" name="post" id="ucp">
      <div class="main-content frm" style="border: 0px none;">
         <fieldset class="frm-set multi" style="border: 0px none; margin:0;background-color: #FFF;">
            <dl>
               <dt>
                  <label>Tên tài khoản :</label>
               </dt>
               <dd>
                  <input autocomplete="off" type="text" id="username_reg" name="username" value="" size="25" maxlength="25" required />
                  <div id="name_reg" class="check_reg">
                     <div class="pwd_img reg_er kytu">Số ký tự phải từ 3 trở lên</div>
                     <div class="pwd_img reg_er loi">Hãy chọn tài khoản khác</div>
                     <div class="pwd_img reg_ok">Có thể dùng tài khoản này</div>
                  </div>
               </dd>
            </dl>
            <dl>
               <dt>
                  <label>Địa chỉ E-mail :</label>
               </dt>
               <dd>
                  <input autocomplete="off" class="ltr" type="email" id="email" name="email" value="" size="25" maxlength="64" required />
                  <div id="email_reg" class="check_reg">
                     <div class="pwd_img reg_er">Không sử dụng địa chỉ này</div>
                     <div class="pwd_img reg_wa">E-mail sẽ được kiểm sau</div>
                  </div>
               </dd>
            </dl>
            <dl>
               <dt>
                  <label>Mật khẩu :</label>
               </dt>
               <dd>
                  <input autocomplete="off" class="ltr" type="password" id="password_reg" name="password" value="" size="25" maxlength="25" required />
                  <div class="check_reg" id="cont_pwd">
                     <div class="pwd_img reg_er kytu">Số ký tự phải từ 3 trở lên</div>
                     <div class="pwd_img reg_er trung">Trùng tên đăng nhập</div>
                     <div class="pwd_img" id="pwd_bad" style="display: none;">Quá đơn giản</div>
                     <div class="pwd_img" id="pwd_middle" style="display: none;">Tạm ổn</div>
                     <div class="pwd_img" id="pwd_good" style="display: none;">Vãi</div>
                  </div>
               </dd>
            </dl>
            <dl>
               <dt>
                  <label>Gõ lại mật khẩu :</label>
               </dt>
               <dd>
                  <input autocomplete="off" type="password" id="password_confirm" size="25" maxlength="25" name="password_confirm" class="inputbox narrow" required />
                  <div id="pass_co" class="check_reg">
                     <div class="pwd_img reg_er">Chưa đúng</div>
                     <div class="pwd_img reg_ok">Chính xác</div>
                  </div>
               </dd>
            </dl>
            <dl class="frm-buttons">
               <p style="padding: 10px 0px 0px; text-align: center;">
                  <input class="button2" type="submit" name="submit" value="Đăng ký" />
                  <input class="button2" type="reset" name="reset" value="Làm mới" />
               </p>
            </dl>
         </fieldset>
      </div>
   </form>
</div>
<script type="text/javascript" src="{Js}"></script>
<!-- END switch_user_logged_out -->

Bước 4

ACP >> Modules >> HTML & JAVASCRIPT >> Javascript codes management
Tạo file javascript, lấy liên kết (Không check Placement) thay vào vị trí {Js} ở cuối code trong bước 3

Code:

/* Quick register by Zzbaivong - devs.forumvi.com */
var shortPass = "bad",
    badPass = "bad",
    goodPass = "good",
    strongPass = "strong";

function passwordStrength(a, b) {
    score = 0;
    if ("" == a) return null;
    if (4 > a.length) return shortPass;
    if (void 0 != b && a.toLowerCase() == b.toLowerCase()) return badPass;
    score += 4 * a.length;
    score += 1 * (checkRepetition(1, a).length - a.length);
    score += 1 * (checkRepetition(2, a).length - a.length);
    score += 1 * (checkRepetition(3, a).length - a.length);
    score += 1 * (checkRepetition(4, a).length - a.length);
    a.match(/(.*[0-9].*[0-9].*[0-9])/) && (score += 5);
    a.match(/(.*[!,@,#,$,%,^,&,*,?,_,~].*[!,@,#,$,%,^,&,*,?,_,~])/) && (score += 5);
    a.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/) &&
        (score += 10);
    a.match(/([a-zA-Z])/) && a.match(/([0-9])/) && (score += 15);
    a.match(/([!,@,#,$,%,^,&,*,?,_,~])/) && a.match(/([0-9])/) && (score += 15);
    a.match(/([!,@,#,$,%,^,&,*,?,_,~])/) && a.match(/([a-zA-Z])/) && (score += 15);
    if (a.match(/^\w+$/) || a.match(/^\d+$/)) score -= 10;
    0 > score && (score = 0);
    100 < score && (score = 100);
    return 34 > score ? badPass : 68 > score ? goodPass : strongPass
}

function checkRepetition(a, b) {
    res = "";
    for (i = 0; i < b.length; i++) {
        repeated = !0;
        for (j = 0; j < a && j + i + a < b.length; j++) repeated = repeated && b.charAt(j + i) == b.charAt(j + i + a);
        j < a && (repeated = !1);
        repeated ? (i += a - 1, repeated = !1) : res += b.charAt(i)
    }
    return res
}

function submit_reg() {
    $("#reg_tip").text("Đang kiểm tra dữ liệu...");
    $("#qick_reg .reg_er").each(function() {
        "block" == $(this).css("display") && $(this).parent().parent().addClass("error")
    });
    $("#qick_reg input").each(function() {
        "" == $(this).val() && $(this).parent().addClass("error")
    });
    $("#qick_reg .error").length ? $("#reg_tip").text("Lỗi thông tin đăng ký.") : ($("#reg_loder").show(), $.ajax({
        type: "POST",
        url: "/register?agreed=true&step=2",
        data: {
            username: $("#username_reg").val(),
            email: $("#email").val(),
            "profile_field_3_-10": $("#profile_field_3_-10").val(),
            password: $("#password_reg").val(),
            submit: "Save"
        },
        success: function(a) {
            if ($(a).find("p.message").length) $("#reg_tip").text("Quản trị viên đã giới hạn số lần tạo tài khoản hôm nay."), $("#reg_loder").fadeOut(500), $("#ucp").hide();
            else if ($("#reg_tip").text("Đang kiểm tra tài khoản, mật khẩu..."),
                $(a).find("#form_confirm").length) $("#qick_reg .frm-buttons input[name='confirm_pass'], #qick_reg .frm-buttons input[name='auth[]']").remove(), $(a).find("input[name='confirm_pass'], input[name='auth[]']").prependTo("#qick_reg .frm-buttons"), $("#reg_tip").text("Đang kiểm tra E-mail..."), $.ajax({
                type: "POST",
                url: "/register?agreed=true&step=2",
                data: {
                    password_confirm: $("#password_confirm").val(),
                    "auth[]": $("#qick_reg input[name='auth[]']:first").val(),
                    username: $("#username_reg").val(),
                    email: $("#email").val(),
                    "profile_field_3_-10": $("#profile_field_3_-10").val(),
                    password: $("#password_reg").val(),
                    confirm_pass: $("#qick_reg input[name='confirm_pass']").val(),
                    submit: "Save"
                },
                success: function(a) {
                    if ($(a).find("p.message a").length) $("#reg_tip").text("Đăng ký thành công."), $.ajax({
                        type: "POST",
                        url: "/login",
                        data: {
                            username: $("#username_reg").val(),
                            password: $("#password_reg").val(),
                            login: "true"
                        },
                        success: function() {
                            window.location.reload()
                        }
                    });
                    else if (-1 != $(a).find("p.center:first span").text().indexOf("e-mail address") || -1 != $(a).find("p.center:first span").text().indexOf("địa chỉ email")) $("#reg_tip").text("Địa chỉ E-mail không hợp lệ hoặc đã được sử dụng."), $("#reg_loder").fadeOut(500), $("#email").parent().addClass("error"), $("#email_reg .reg_er").show().next().hide()
                }
            });
            else if (-1 != $(a).find("#main-content p.center:first span").text().indexOf("username has") ||
                -1 != $(a).find("p.center:first span").text().indexOf("ên truy cập")) $("#reg_tip").text("Tài khoản đã được sử dụng hoặc bị cấm."), $("#reg_loder").fadeOut(500), $("#username_reg").parent().addClass("error"), $("#name_reg div").hide(), $("#name_reg .reg_er.loi").show();
            else if (0 == $(a).find("p.center:first span").text().indexOf("Your password") || 0 == $(a).find("p.center:first span").text().indexOf("Mật khẩu")) $("#reg_tip").text("Mật khẩu phải từ 6 - 32 ký tự và không được trùng tài khoản."),
                $("#reg_loder").fadeOut(500), $("#password_reg, #password_confirm").val("").parent().addClass("error"), $("#cont_pwd div, #pass_co div").hide()
        }
    }))
}

function conpass() {
    "" != $("#password_confirm").val() ? ($("#password_confirm").parent().removeClass("error"), $("#password_reg").val() != $("#password_confirm").val() ? $("#pass_co .reg_er").show().next().hide() : $("#pass_co .reg_er").hide().next().show()) : $("#pass_co div").hide()
}

function isEmail(a) {
    return /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/.test(a)
}
$(function() {
    "/register" != location.pathname ? ($("a[href='/register']").click(function(a) {
        a.preventDefault();
        $("#qick_reg, #qick_reg_overlay").fadeIn()
    }), $("#qick_reg_overlay, .modal_close").click(function() {
        $("#qick_reg, #qick_reg_overlay").fadeOut()
    }), $("#qick_reg input[name='reset']").click(function() {
        $("#reg_tip").text("Bạn phải điền đầy đủ thông tin đăng ký.");
        $("#qick_reg dd").removeClass("error");
        $("#qick_reg .pwd_img").hide()
    }), $("#username_reg").on("blur",
        function() {
            "" != $("#username_reg").val() ? ($("#username_reg").parent().removeClass("error"), 3 > $("#username_reg").val().length ? ($("#name_reg .reg_er.kytu").show(), $("#name_reg .reg_er.loi, #name_reg .reg_ok").hide()) : $.ajax({
                type: "GET",
                url: "/search?mode=searchuser&fieldname=username",
                data: {
                    search_username: $("#username_reg").val(),
                    time: timestamp()
                },
                success: function(a) {
                    $("#name_reg div").hide();
                    $(a).find("#username_list").val() == $("#username_reg").val() ?
                        $("#name_reg .reg_er.loi").show() : $("#name_reg .reg_ok").show()
                }
            })) : $("#name_reg div").hide()
        }), $("#email").on("blur", function() {
        "" != $("#email").val() ? ($("#email").parent().removeClass("error"), isEmail($("#email").val()) ? $("#email_reg .reg_er").hide().next().show() : $("#email_reg .reg_er").show().next().hide()) : $("#email_reg div").hide()
    }), $("#password_confirm").on("input", function() {
        conpass()
    }), $("#password_reg, #username_reg").on("input",
        function() {
            if ("" != $("#password_reg").val())
                if ($("#password_reg").parent().removeClass("error"), 3 > $("#password_reg").val().length) $("#cont_pwd div").hide(), $("#cont_pwd .reg_er.kytu").show();
                else if ($("#cont_pwd .reg_er.kytu").hide(), $("#password_reg").val() == $("#username_reg").val()) $("#cont_pwd div").hide(), $("#cont_pwd .reg_er.trung").show();
            else switch ($("#cont_pwd .reg_er.trung").hide(), passwordStrength($("#password_reg").val(), $("#username_reg").val())) {
                case "bad":
                    $("#pwd_middle,#pwd_good").hide();
                    $("#pwd_bad").show();
                    break;
                case "good":
                    $("#pwd_good,#pwd_bad").hide();
                    $("#pwd_middle").show();
                    break;
                case "strong":
                    $("#pwd_middle,#pwd_bad").hide(), $("#pwd_good").show()
            } else $("#cont_pwd div, #pass_co div").hide(), $("#password_confirm").val("");
            "" != $("#password_confirm").val() && conpass()
        })) : $("#qick_reg, #qick_reg_overlay").remove()
});

Bước 5

Thêm vào CSS
ACP >> Display >> Pictures and Colors >> Colors >> CSS Stylesheet

Code:

/* Quick register by Zzbaivong - devs.forumvi.com */
#qick_reg_overlay{background:#000;position:fixed;left:0;top:0;width:100%;height:100%;display:none;opacity:0.8}
#qick_reg, #qick_reg *{box-sizing:border-box;-o-box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}
#qick_reg{background-color:#FFF;border:1px solid rgba(0,0,0,0.333);box-shadow:0 4px 16px rgba(0,0,0,0.2);color:#000;outline:0 none;position:fixed;width:500px;display:none;left:50%;top:50%;margin-left:-250px;margin-top:-200px;padding:40px}
#qick_reg input{width:100%}
#qick_reg fieldset.frm-set dl dd,#qick_reg fieldset.frm-set dl dt{padding:0}
#qick_reg fieldset.frm-set dl dt{width:13em}
#qick_reg fieldset.frm-set dl dd{margin-left:14em}
#qick_reg #cont_pwd, #qick_reg .check_reg{float:none;height:24px;width: 100%;padding:2px 0!important}
#pwd_bad, .reg_er{background: url(http://i15.servimg.com/u/f15/16/58/89/73/001_3010.png) no-repeat scroll left center/16px 16px transparent;color:red}
#pwd_middle, .reg_wa{background:url(http://i15.servimg.com/u/f15/16/58/89/73/alert_10.png) no-repeat scroll left center/16px 16px transparent;color:blue}
#pwd_good, .reg_ok{background:url(http://i15.servimg.com/u/f15/16/58/89/73/001_0610.png) no-repeat scroll left center/16px 16px transparent;color:green}
#qick_reg .pwd_img{float:left;height:24px;line-height:24px;text-align:left;width: 100%;padding: 0 0 0 20px;}
#reg_tip{background-color:#FCF8E3;color:#C09853;border-color:#FBEED5;border:1px solid;padding:5px 7px}
#qick_reg form{margin-top:20px}
#reg_loder{background:url(http://i15.servimg.com/u/f15/16/58/89/73/ajax-l11.gif) no-repeat scroll center 130px rgba(255, 255, 255, 0.65);color:#086CC5;display:none;font-family:Comic Sans MS;font-weight:700;height:100%;left:0;line-height:350px;position:absolute;text-align:center;top:0;width:100%}
.modal_close{background:url(http://i40.servimg.com/u/f40/17/70/81/78/close-10.png) repeat scroll 0 0 transparent;content:"";height:11px;position:absolute;right:17px;top:17px;width:11px}
.error input{border:1px solid #F5A7A7;background-color:#F2DEDE}
#qick_reg .button2{background:#055fff;border:1px solid #DDD;color:#FFF;padding:7px 15px}
#qick_reg .button2:hover{background:#666;cursor:pointer}
#qick_reg .button2[name="reset"]{background:url(http://i15.servimg.com/u/f15/16/58/89/73/reload10.png) no-repeat center scroll green;text-indent:-9999px}

Ghi chú

Áp dụng cho phiên bản PunBB.
Cập nhật ngày 19/04/2015

Nguồn

Zzbaivong (devs.forumvi.com)

---

Tags: [You must be registered and logged in to see this link.]

Tạo nhóm các chuyên mục con trong một dropdown-menu theo phong cách Xenforo.

ACP >> Display >> Homepage >> Structure and hierarchy >> Hierarchy:
Sub-level links on index : Yes

ACP >> Display >> Templates >> QLTT >> Index_box:
Tìm:

Code:

{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
<strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}

Thay bằng:

Code:

<span class="sub4r stat4r">{catrow.forumrow.LINKS}</span>

Đặt ở cuối index_box

Code:

<script type="text/javascript">
//<![CDATA[
/* subForum by Zzbaivong - devs.forumvi.com */
$(".sub4r.stat4r").each(function() {
    var sub = $(this);
    if (!sub.is(":empty")) {
        sub.contents().filter(function() {
            return this.nodeType === 3;
        }).remove().end().filter("a").wrap("<li></li>");
        sub.wrapInner('<ul class="subLink"></ul>').append("Diễn đàn con: <strong>" + sub.find("a").length + "</strong>");
    }
});
//]]>
</script>

ACP >> Display >> Pictures and Colors >> CSS Stylesheet:
Thêm vào CSS:

Code:

/* subForum by Zzbaivong - devs.forumvi.com */
.pun table .tcl{overflow:auto}
.stat4r{color:#888;font-size:12px;padding-right:10px}
.stat4r > strong{color:#333}
.sub4r.stat4r{position:relative}
.subLink{padding:0!important;position:absolute;display:none;left:0;list-style:none;background:#FFF;top:13px;z-index:30;min-width:97px;border:2px solid #666}
.sub4r.stat4r:hover .subLink{display:block}
.stat4r .subLink + strong{padding-right:15px;background:url(//i56.servimg.com/u/f56/18/59/49/93/arrow_10.png) no-repeat right center transparent}
.subLink li a{white-space:nowrap;height:20px;line-height:20px;display:block;padding:0 7px}
.subLink li a:hover{background:#f2f2f2}

---

Tags: #mod #template #xenforo #sub-forum

Hướng dẫn này sẽ giúp bạn tạo icon riêng cho từng chuyên mục trong PunBB.

Bạn vào cài đặt từng chuyên mục, thêm URL Icon cho phù hợp.

Trong cài đặt icon trạng thái chuyên mục, ẩn phần icon thường, thêm ảnh icon chuyên mục có bài mới và chuyên mục bị khóa. Lưu ý, icon này phải nhỏ hơn icon chuyên mục (khoảng 32 x 32px). Ví dụ:

Có bài mới:

Code:

http://i56.servimg.com/u/f56/18/59/49/93/new-ic10.png

Đã khóa:

Code:

http://i83.servimg.com/u/f83/16/58/89/73/lock10.png

Thêm vào CSS:

Code:

.indexbox .forum_desc img[style="float:left"][alt^="http://"]{-webkit-transition:all .2s;height:45px;margin-left:-60px;margin-top:-20px;position:absolute;transition:all .2s;width:45px}
.indexbox .statused tr:hover .forum_desc img[style="float:left"][alt^="http://"]{-ms-transform:rotate(360deg);-webkit-transform:rotate(360deg);transform:rotate(360deg)}

Template Index_box:
Tìm:

Code:

<br />
{catrow.forumrow.FORUM_DESC}

Thay bằng:

Code:

<div class="forum_desc">{catrow.forumrow.FORUM_DESC}</div>

Tìm:

Code:

class="main-content"

sửa thành:

Code:

class="main-content indexbox"

---

Tags: #mod #tutorial #punbb #forum-icon

Chức năng này sẽ tạo ra thông báo nhắc nhở người dùng, khi họ click vào liên kết lạ.
Đối với một Admin, đa phần đều muốn 4rum có lượng truy cập đông, thời gian ở lại lâu, tất nhiên sẽ chẳng ai muốn người xem rời đi chỉ vì click nhầm vào liên kết nào đấy. Một thông báo, nhắc nhở khi người xem click vào liên kết lạ, sẽ có ích trong trường hợp này. Trong lúc người xem đang suy tư với thì một số Admin còn gắn thêm quảng cáo, hoặc kèm vài lời đe dọa như: Chúng tôi không chịu trách nhiệm khi bạn chuyển đến liên kết này, bala bala...

Demo

https://www.google.com.vn/

Chức năng

• Khi người xem click vào liên kết ngoài (trừ liên kết ảnh), sẽ xuất hiện một thông báo chuyển hướng với 2 lựa chọn: Trở về hoặc tiếp tục.
  
• Tự chuyển trang sau 5 giây nếu người dùng không lựa chọn.
  
• Thông báo lỗi nếu sai thông số chuyển hướng
  

Hướng dẫn

Bước 1

Tạo trang HTML:
ACP >> Modules >> HTML & JAVASCRIPT >> HTML pages management >> Create in advanced mode (HTML)

Do you wish to use your forum header and footer ?: Có
Page content *

Code:

<script type="text/javascript">
//<![CDATA[
/* zzRedirects v3.1.1 - devs.forumvi.com */
(function($) {

    'use strict';

    $('head').append($('<style>', {
        text: '#redirects{background:#FFF;width:75%;margin:30px auto;padding:20px 30px;border:1px solid #DDD}#redirects h3{border-bottom:1px solid #ddd;font-size:17px;font-weight:400;padding-bottom:10px;color:#830000;margin:0 0 20px}#redirects p{color:#222;font-size:13px;line-height:20px;margin:5px auto 15px}.redirectFooter{background-color:#fff;padding:20px 0 30px}#redirectButtons{float:right;list-style-type:none;margin:0;padding:0}#redirectButtons li{float:left}#redirectButtons a{transition:all .2s linear 0;-moz-transition:all .2s linear 0;-o-transition:all .2s linear 0;-webkit-transition:all .2s linear 0;background-color:#0063dc;border:0 none;color:#fff!important;font-size:12px;line-height:30px;min-width:45px;text-align:center;display:block;text-decoration:none!important;padding:0 10px}#redirectButtons a.cancel{background-color:#eee;color:#888!important;margin-right:10px}#redirectButtons a:hover{background-color:#333}'
    }));

    $('#content-container').html('<div id="redirects"><h3><span id="reTitle">Lỗi</span> chuyển hướng...</h3><p id="redirectMess"><span style="color:red">Không tìm thấy tham số cần thiết.</span><br />Đây là trang xác nhận chuyển hướng đến các liên kết ngoài diễn đàn. Nếu bạn vô tình vào trang này, hãy nhấn <a href="/" rel="nofollow" style="font-weight: bold;">vào đây</a> để quay lại. Nếu không, hãy <a href="/contact" rel="nofollow" style="font-weight: bold;">liên hệ</a> với BQT để báo lỗi này.</p><div class="redirectFooter"><ul id="redirectButtons"><li><a id="fromLink" class="cancel" href="/">Quay lại</a></li></ul></div></div>');

    var external = GetParam('url');
    if (null === external || !window.atob) return;

    var goback = document.referrer,
        page = window.name,
        timer, second = 5;

    $('#reTitle').text('Đang');
    $('#redirectMess').html('Bạn đang chuẩn bị rời khỏi <span id="fromTitle">diễn đàn</span> và di chuyển đến đường dẫn: <b><a id="toLink" href="#error" title="No link" rel="nofollow">...</a></b> trong vòng <b><span class="delayTime">5</span></b> giây nữa...<br />Bạn có chắc chắn là muốn đến đường dẫn này không?');

    if (page !== '') $('#fromTitle').html('<strong>' + page + '</strong>');
    if (goback !== '') $('#fromLink').attr('href', goback);

    window.name = '';
    external = window.atob(external);
    page = external;

    if (35 <= page.length) page = page.slice(0, 32) + '...';
    $('#toLink').attr({
        href: external,
        title: external
    }).text(page);

    $('#redirectButtons').append('<li><a href="' + external + '" id="gotoBtn" class="redirectSkip forward" rel="nofollow">Tiếp tục (<span class="delayTime">5</span>)</a></li>');
    timer = setInterval(function() {
        var count = second--;
        0 > count ? (clearInterval(timer), window.location = external) : $('.delayTime').text(count);
    }, 1E3);
    $('a', '#redirectButtons').click(function() {
        clearInterval(timer);
    });

})(jQuery);
//]]>
</script>

Chú ý: Ghi nhớ PAGE ID của trang HTML vừa tạo.
Nếu diễn đàn của bạn không sử dụng sidebar (forum widget) thì ở trong code trên, dòng 12, tìm: #content-container sửa thành:

• punBB: #main-content
  
• Invision: #content
  
• PhpBB2, PhpBB3: #emptyidcc
  

Bước 2

Tạo file Javascript:
ACP >> Modules >> HTML & JAVASCRIPT >> Javascript codes management >> Create a new javascript

Title * : zzRedirect
Placement : In all the pages
Javascript Code * :

Code:

/* zzRedirects v3.1.1 - devs.forumvi.com */
jQuery(function($) {
    'use strict';
    if (window.btoa && window.atob) $('.post-entry a').not('a[href$=".jpg"],a[href$=".jpeg"],a[href$=".png"],a[href$=".gif"],a[href$=".bmp"],a[href^="/"],a[href^="#"],a[href^="?"],a[href^="http://' + location.host + '"]').addClass('external').click(function(e) {
        e.preventDefault();
        window.open('/h{PAGE_ID}-redirect?url=' + window.btoa(this.href), document.title);
    });
});

Chú ý: Thay {PAGE_ID} trong code trên bằng số thứ tự trang HTML tạo ở bước 2.
Nếu diễn đàn của bạn sử dụng phiên bản PhpBB2 hoặc PhpBB3, thì ở trong code trên, dòng 4, tìm: .post-entry a sửa thành: .postbody a

Credit

Zzbaivong (devs.forumvi.com)

---

Tags: #mod #tutorial #phpbb2 #phpbb3 #punbb #invision #redirect

Thử nghiệm: [You must be registered and logged in to see this link.]

So với phiên bản trước đây, code đã được tối ưu, rút gọn dữ liệu tối đa.
Nếu như trước đây, do giới hạn kích thước mà code chỉ dùng tốt với forum 3000~5000 thành viên, thì phiên bản này giới hạn đó đã tăng lên 80000~100000 thành viên.

Cụ thể:

1. Loại bỏ các thành viên không dùng avatar.
   
2. Loại bỏ protocol trong URL.
   
3. Rút gọn các đường dẫn mặc định.
   
4. Rút gọn 4 loại đuôi ảnh thường gặp.
   

Một số cải tiến:

1. Thêm bộ đếm thời gian tải.
   
2. Cấm thành viên thông thường sử dụng.
   
3. Bản ghi hoạt động chi tiết.
   
4. Tự tạo tệp dữ liệu khi không tìm thấy.
   
5. Tải trang kế tiếp ngay khi trang trước được tải xong.
   
6. Dừng tải khi gặp lỗi và tự tải lại sau 2 phút.
   
7. Tự cập nhật tệp dữ liệu khi tải xong.
   

Hướng dẫn:


Bước 1: Tạo trang avatar obj

• Title * :  avatar obj
  
• HTML source * :
  

  Code:

  [{}]

  
  
  

Bước 2: Tạo trang HTML Update Avatar

• Title * :  HTML Update Avatar
  
• HTML source * :
  

  Code:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" id="min-width" lang="vi" xml:lang="vi">

<head>
 <title>Update Avatar - version 2 | DEVs.forumvi.com</title>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <meta http-equiv="content-script-type" content="text/javascript" />
 <meta http-equiv="content-style-type" content="text/css" />
 <link rel="shortcut icon" type="image/x-icon" href="http://dl.dropboxusercontent.com/u/126946313/DEVs/devs.ico" />
 <meta name="author" content="Zzbaivong" />
 <meta name="title" content="Update Avatar - version 2 | DEVs.forumvi.com" />
 <meta name="description" content="Tạo tệp dữ liệu avatar của các thành viên có đăng bài viết" />
 <style type="text/css">
 * {
 margin: 0;
 padding: 0
 }
 body {
 background-attachment: fixed;
 background-color: transparent;
 background-image: url(http://i40.servimg.com/u/f40/17/70/81/78/83512010.jpg);
 background-position: center top;
 background-repeat: no-repeat;
 background-size: 120% auto
 }
 body * {
 -o-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box
 }
 #devs {
 float: right;
 text-indent: -9999px;
 display: block;
 width: 16px;
 height: 16px;
 background: url(http://i56.servimg.com/u/f56/18/59/49/93/l111.png) no-repeat center transparent;
 }
 .note {
 float: none;
 width: 270px;
 background: url(http://i40.servimg.com/u/f40/17/70/81/78/tip10.png) no-repeat scroll 5px center #FFFBCC;
 border: 1px solid #E6DB55;
 clear: both;
 color: #666452;
 font-size: .9em;
 position: relative;
 margin: 0 auto;
 padding: 5px 5px 5px 25px
 }
 #getavatar {
 background: none repeat scroll 0 0 padding-box #FFF;
 border: 1px solid rgba(0, 0, 0, 0.333);
 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
 color: #000;
 left: 50%;
 margin-left: -50px;
 margin-top: -210px;
 outline: 0 none;
 position: absolute;
 top: 50%;
 width: 520px;
 padding: 40px
 }
 #getavatar button {
 background: #F5F5F5;
 border: 1px solid rgba(0, 0, 0, 0.1);
 clear: none;
 color: #444;
 cursor: pointer;
 float: none;
 font-size: 11px;
 font-weight: 700;
 height: 29px;
 line-height: 27px;
 margin-top: 10px;
 min-width: 72px;
 outline: 0 none;
 padding: 0 8px
 }
 #getavatar #start {
 background: rgb(203, 255, 207);
 }
 #getavatar #pause {
 background: rgb(255, 228, 229);
 }
 #getavatar button: hover {
 background: #999!important;
 color: #FFF;
 }
 #time,
 #page {
 padding: 0 20px 0 25px;
 width: 168px;
 display: inline-block;
 }
 #page {
 background: url(http://i57.servimg.com/u/f57/17/70/81/78/list_b10.png) no-repeat scroll left center transparent
 }
 #time {
 background: url(http://i40.servimg.com/u/f40/17/70/81/78/14578910.png) no-repeat scroll left center transparent;
 cursor: pointer
 }
 #avatarjson {
 width: 100%;
 height: 100px;
 resize: vertical;
 overflow: auto!important;
 }
 #paging {
 font-size: 12px;
 font-weight: 700;
 margin-top: 10px;
 text-align: center;
 visibility: hidden
 }
 #paging b {
 background-color: #0567AD;
 border: 1px solid #00487A;
 color: #FFF;
 text-shadow: 0 1px 0 #000;
 visibility: visible;
 padding: 3px 5px
 }
 #paging a[href="javascript:Pagination();"] {
 display: none
 }
 #paging a {
 text-decoration: none;
 background-color: #E5E5E5;
 border: 1px solid #D6D6D6;
 text-shadow: 0 1px 0 #FFF;
 visibility: visible;
 margin: 2px;
 padding: 3px 5px
 }
 .warning {
 border: 1px solid rgb(171, 218, 255);
 padding: 10px;
 text-align: justify;
 font: 12px sans-serif;
 background: rgb(239, 247, 255);
 margin: 10px 0;
 }
 .btn,
 .timepage,
 #paging,
 #avatarjson {
 display: none;
 }
 </style>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
 <script type="text/javascript">
 //<![CDATA[ var _gaq = _gaq || []; _gaq.push(["_setAccount", "UA-26966514-1"]); _gaq.push(["_trackPageview"]); (function () { var ga = document.createElement("script"); ga.type = "text/javascript"; ga.async = true; ga.src = ("https:" == document.location.protocol ? "https://ssl" : "http://www") + ".google-analytics.com/ga.js"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ga, s) })(); //]]>
 </script>
</head>

<body>
 <script tyle="text/javascript">
var page_ID = 0,
 avatar = {}, data = {}, reset = 120,
 second = 0,
 avapage,
 time, refresh, adtid,
 link = "/memberlist?change_temp&mode=posts&order=DESC",
 filter = "",
 imgfast = "";

$("body").prepend('<div style="width: 100%; height: 100%; background: none repeat scroll 0% 0% rgb(221, 221, 221); position: absolute; top: 0px; left: 0px; opacity: 0.7;"></div><div id="getavatar"><p class="timepage"><a id="devs" target="_blank" href="http://devs.forumvi.com/">DEVs</a><span id="time">0</span><span id="page">0/0</span></p><p class="note">\u00a9 2013 Zzbaivong</p><p class="btn"><button id="reset">Làm lại</button> <button id="start">Bắt đầu</button><button style="display:none" id="pause">Tạm dừng</button></p><textarea id="avatarjson"></textarea><p id="paging"></p></div>');

function active() {
 $(".note").css({
 "float": "right",
 "margin": "10px 0"
 });
 $(".btn,.timepage,#paging").show();
}

function created(a) {
 $.get("/admin/index.forum?part=modules&sub=html&extended_admin=1&tid=" + a, {
 sort_method: "page_time",
 sort_order: "DESC",
 submit: "submit"
 }, function (e) {
 page_ID = $(e).find("#pageListHtml td:contains('avatar obj'):first").next().next().find("a:last").attr("href").replace(/\S+\/h(\d+)-\S+/, "$1");
 active();
 $("#getavatar").append('<p class="warning">Tệp <strong><font color="#339933">avatar obj</font></strong> đã được tạo thành công với <strong><font color="#ff3333">page_ID</font></strong> là <strong><font color="#ff3333">' + page_ID + '</font></strong>.<br><br>Ngay bây giờ bạn có thể nhấn <font color="#333399"><strong>Bắt đầu</strong></font> để cập nhật dữ liệu.<br>Trong lúc chờ tải, bạn cần sửa lại mã <strong><font color="#ff3333">page_ID</font></strong> trong javascript của 2 tệp <font color="#9933ff"><strong>HTML Update Avatar</strong></font> và <font color="#cc6633"><strong>javascript Update Avatar</strong></font>.<br><br><i>Xem hướng dẫn chi tiết tại</i>: <a target="_blank" href="http://devs.forumvi.com/h14-avatar?pageid=' + page_ID + '">http://devs.forumvi.com/h14-avatar?pageid=' + page_ID + '</a></p>');
 console.log("page_ID = " + page_ID);
 });
}

function clock() {
 $("#time").text(second++)
}

function note(a, b) {
 $(".note").text(a);
 switch (b) {
 case "w":
 console.warn(a)
 break;
 case "e":
 console.error(a)
 break;
 default:
 console.log(a)
 }
}

function viTime(a) {
 var a = (new Date(a)).toString().split(/\s/);
 return a[2] + "/" + {
 Jan: "01",
 Feb: "02",
 Mar: "03",
 Apr: "04",
 May: "05",
 Jun: "06",
 Jul: "07",
 Aug: "08",
 Sep: "09",
 Oct: "10",
 Nov: "11",
 Dec: "12"
 }[a[1]] + "/" + a[3] + " " + a[4]
}

function getavatar(c) {
 $.get(c).done(function (a) {
 if ($(a).find("a[href^='/admin/index.forum']").length) {
 $("#paging").html($(a).find(".paging:first").html());
 $("#paging img").parent().remove();
 var page = $("#paging b").text(),
 allpage = $("#paging > *:last").text();
 if ("" == page) {
 page = 0
 };
 if ("" == allpage) {
 allpage = 0
 };
 $("#page").text(page + "/" + allpage);
 avapage = 0;
 $(a).find(".tcl.avatar-mini").each(function () {
 var b = $(this).find("img").attr("src");
 if (!new RegExp("^(" + filter + ")$").test(b) && "0" != $(this).siblings(".tc3:last").prev().text()) {
 avapage++;
 var a = $(this).find("a").attr("href").replace(/\/u(\d+)\?change_temp=/,
 "$1"),
 b = b.replace(new RegExp("https?:|//r\\d+.imgfast.net|" + imgfast, "gi"), "").replace("//illiweb.com/fa/i/avatars/", "*").replace("gallery/", "!").replace(".png", "{").replace(".gif", "}").replace(".jpg", "[").replace(".jpeg", "]");
 0 == b.indexOf(a + "-") && (b = b.replace(a + "-", "@"));
 eval("avatar[" + a + "]='" + b + "'")
 }
 });
 avatar.lastUpdate = new Date().getTime();
 $("#avatarjson").val("[" + JSON.stringify(avatar) + "]");
 note("Trang " + page + " có " + avapage + " người dùng avatar.");
 if ($("#paging b").is(":last-child") || $("#pause").is(":hidden") || "0" == $(a).find(".table .tc3:last").prev().text() || $("#paging").is(":empty")) {
 clearInterval(time);
 $("#start, #reset").show();
 $("#pause").hide();
 data = {
 title: "avatar obj",
 mode: "go_edit",
 page: page_ID,
 submit: "submit",
 html: $("#avatarjson").val()
 };
 $.post("/admin/index.forum?part=modules&sub=html&extended_admin=1&tid=" + $(a).find("a[href^='/admin/index.forum']").attr("href").replace(/\S+tid=(\w+)&change_temp=/, "$1"), data, function (b) {
 if ($(b).find(".messagebox:contains('HTML page successfully updated')").length) {
 note("Cập nhật thành công.");
 } else {
 note("Cập nhật thất bại.", "w");
 note("Cập nhật lại lần 2.");
 adtid = $(b).find("#activetab a").attr("href").replace(/\S+&tid=(\w+)/, "$1");
 $.post("/admin/index.forum?part=modules&sub=html&extended_admin=1&tid=" + adtid, data, function (b) {
 if ($(b).find(".messagebox:contains('HTML page successfully updated')").length) {
 note("Cập nhật thành công.");
 } else {
 note("Xảy ra lỗi! Dừng cập nhật tự động.", "e");
 }
 })
 }
 });
 note("Tổng số avatar: " + (Object.keys(avatar).length - 1), "w");
 if ($("#paging b").is(":last-child") || $("#paging").is(":empty")) {
 note("Hoàn thành! Tải toàn bộ avatar.")
 } else if ("0" == $(a).find(".table .tc3:last").prev().text()) {
 note("Kết thúc! Thành viên có 0 bài viết.")
 } else if ($("#pause").is(":hidden")) {
 note("[Tạm dừng] lúc " + viTime(new Date()));
 }
 } else {
 link = $("#paging b").next().attr("href");
 getavatar(link)
 };
 } else {
 note("Bạn cần quyền admin để tiếp tục.", "w");
 $(".btn,.timepage,#paging,#avatarjson").remove();
 $(".note").css({
 "float": "none",
 "margin": "0 auto"
 });
 }
 }).fail(function () {
 clearInterval(time);
 $("#start, #reset").show();
 $("#pause").hide();
 var a = reset;
 $(".note").html("Xảy ra lỗi! Cập nhật lại sau <strong id='refresh'>" + a + "</strong> giây.");
 console.warn("Xảy ra lỗi! Cập nhật lại sau " + a + " giây.");
 refresh = setInterval(function () {
 var b = a--;
 $("#refresh").text(b);
 if (0 >= b) {
 note("Tiếp tục chạy cập nhật");
 $("#start").click()
 }
 }, 1E3)
 })
}

$.get("/h" + page_ID + "-avatar", function (a) {
 if (a.indexOf("[") != 0) {
 note("Đường dẫn tệp dữ liệu không đúng.", "w");
 if ($(a).find("a[href^='/admin/index.forum']").length) {
 data = {
 title: "avatar obj",
 mode: "add",
 submit: "submit",
 html: "[{}]"
 };
 adtid = $(a).find("a[href^='/admin/index.forum']").attr("href").replace(/\S+&tid=(\w+)/, "$1");
 $.post("/admin/index.forum?part=modules&sub=html&extended_admin=1&tid=" + adtid, data, function (b) {
 if ($(b).find(".successbox:contains('HTML page successfully created')").length) {
 note("Tạo tệp [avatar obj] thành công");
 created(adtid)
 } else {
 note("Tạo tệp [avatar obj] thất bại", "w");
 note("Tạo lại tệp [avatar obj] lần 2.");
 adtid = $(b).find("#activetab a").attr("href").replace(/\S+&tid=(\w+)/, "$1");
 $.post("/admin/index.forum?part=modules&sub=html&extended_admin=1&tid=" + adtid, data, function (b) {
 if ($(b).find(".successbox:contains('HTML page successfully created')").length) {
 note("Tạo tệp [avatar obj] thành công.");
 created(adtid)
 } else {
 note("Xảy ra lỗi! Dừng tạo tệp [avatar obj].", "e");
 }
 });
 }
 });
 } else {
 note("Bạn cần quyền admin để tiếp tục.", "w");
 }
 } else {
 avatar = $.parseJSON(a)[0];
 if (avatar.lastUpdate != undefined) {
 note("Cập nhật cuối: " + viTime(avatar.lastUpdate));
 } else {
 note("Chưa có dữ liệu");
 }
 active();
 }
});
$("#start").click(function () {
 note("[Bắt đầu] lúc " + viTime(new Date()));
 time = setInterval("clock()", 1000);
 getavatar(link);
 $("#start, #reset").hide();
 $("#pause").show();
 $("#avatarjson").slideDown();
 clearInterval(refresh)
});
$("#reset").click(function () {
 note("[Làm lại] lúc " + viTime(new Date()));
 $("#avatarjson").slideUp();
 data = {};
 second = 0;
 link = "/memberlist?change_temp&mode=posts&order=DESC";
 $("#avatarjson").val("");
 $("#paging").empty();
 $("#time").text("0");
 $("#page").text("0/0");
 note("\u00a9 2013 Zzbaivong")
});
$("#pause").click(function () {
 $(this).hide().siblings().show()
});
 </script>
</body>

</html>

  
  
  

Chỉnh sửa: Tìm trong code trên, phần javascript

page_ID: Thay 0 bằng page id của trang avatar obj tạo ở bước 1. Ví dụ:

Code:

page_ID = 7,

filter: URL avatar mặc định của diễn đàn, nếu có nhiều avatar mặc định dùng dấu gạch đứng để ngăn cách. Ví dụ:

Code:

filter = "http://i56.servimg.com/u/f56/18/59/49/93/noavat10.jpg",

...dùng nhiều avatar mặc định:

Code:

filter = "http://r15.imgfast.net/users/1513/21/33/80/avatars/gallery/defaul10.png|http://r15.imgfast.net/users/1513/21/33/80/avatars/gallery/1-5911.gif",

Xem avatar mặc định tại: ACP >> Display >> Avatars >> Avatar gallery >> Default avatar

imgfast: Đường dẫn thư mục avatar. Mỗi diễn đàn sẽ có một thư mục chứa avatar riêng trên imgfast, bạn có thể dùng bất kỳ URL avatar(được upload), lấy đoạn từ /users/ đến /avatars/. Ví dụ:
URL avatar của mình là [You must be registered and logged in to see this link.] thì nhập code như sau:

Code:

imgfast = "/users/2816/63/36/82/avatars/";

Bước 3: Tạo tệp Javascript Update Avatar

• Title * :  Javascript Update Avatar
  
• Placement : In the home page, In the sub-forums
  
• Javascript Code * :
  

  Code:

  var page_ID = 0,
 noAvatar = "//i56.servimg.com/u/f56/18/59/49/93/noavat10.jpg",
 imgfast = "",
 avatar;

function imgAva(a) {
 var u = a.replace(/.*\/u(\d+)(\?tt=1)?/, "$1").toString();
 a = avatar[u];
 void 0 == a && (a = noAvatar); - 1 == a.indexOf("/") && (a = imgfast + a);
 a = a.replace("@", u + "-");
 a = a.replace("*", "//illiweb.com/fa/i/avatars/");
 a = a.replace("!", "gallery/");
 a = a.replace(/\{$/, ".png");
 a = a.replace(/\}$/, ".gif");
 a = a.replace(/\[$/, ".jpg");
 a = a.replace(/\]$/, ".jpeg");
 return '<img class="statusAva" src="' + a + '" alt="avatar" onerror="this.src=\'' + noAvatar + '\';" />'
}

$(function () {
 $.get("/h" + page_ID + "-avatar", function (data) {
 avatar = $.parseJSON(data)[0];
 /* Viết code ở đây */
 });
});

  
  
  

---

Tags: [You must be registered and logged in to see this link.]

Mặc dù Forumtion đã câp nhật URL theo tiêu đề từ rất lâu, tuy nhiên đến nay vẫn không hỗ trợ Tiếng Việt.
Cách thường dùng nhất hiện nay là cài đặt ngôn ngữ hệ thống về Tiếng Anh, cách này không tiện với những diễn đàn mà thành viên ít dùng Tiếng Anh, hơn nữa URL cũng không hiển thị tốt với Tiếng Việt có dấu (lỗi mất chữ đ).
Bài viết này, mình sẽ hướng dẫn cách tạo URL theo tiêu đề mà không phụ thuộc vào ngôn ngữ diễn đàn.

Demo

Phần 1

Sửa URL trên thanh địa chỉ trình duyệt

ACP >> Display >> Templates >> QLTT >> overall_header
Tìm:

Code:

<title>{SITENAME_TITLE}{PAGE_TITLE}</title>

Thêm vào bên dưới:

Code:

<script type="text/javascript">
//<![CDATA[
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, "-");
    a = a.replace(/^\-+|\-+$/g, "");
    a = a.replace(/(-group)$/, "");
    return a.replace(/(-page-\d+)$/, "")
}
var path = location.pathname,
    canonical = path + location.search + location.hash;
/(\-category|\-forum|\-topic|\-group)/.test(path) && history.replaceState(null, null, canonical.slice(1).replace(/(\-category|\-forum|\-topic|\-group)/, "-" + lang_vi(document.title)));
//]]>
</script>

Phần 2

Sửa URL liên kết (tùy chọn)

Tạo file javascript, đặt In all the pages.

Code:

$(function() {
    $("a[href^='/c'], a[href^='/f'], a[href^='/t']").attr({
        href: function() {
            var a = $.trim($(this).text());
            if ("" != a) return this.href.replace(location.origin, "").replace(/(\-category|\-forum|\-topic)/, "-" + lang_vi(a.replace(/Re:\s/i, "")))
        }
    });
});

Ngoài lề

ligerv từng bàn về Việt hóa URL có tốt cho SEO không, vì ở đây là dùng javascript, mình cũng không chắc về vụ SEO nhưng xem trên Google analytics thì nó hiển thị URL Tiếng Việt, có vẻ là chỉ cần chạy trước mã theo dõi của Google là được.

Nguồn

Zzbaivong (devs.forumvi.com)

---

Tags: #mod #tutorial #việt-hóa #permarklink