Ghi chú: Hướng dẫn này được viết cho các bạn sửa giao diện mặc định của NukeViet. Với các giao diện tự xây dựng, các bạn cần dựa vào đây để chỉnh sửa cho phù hợp.

themes/ten-theme/js/main.js

Thêm lên trên cùng:

var gEInterval,    siteMenu = $("#menu-site-default");

• Sửa lại function checkAll, checkWidthMenu, openID_load, openID_result, tipShow, ftipShow, change_captcha, modalShow, loginForm
• Thêm functions: cookie_notice_hide, isRecaptchaCheck, reCaptcha2Recreate, reCaptcha2OnLoad, reCaptcha2Callback, reCaptcha2ApiLoad, reCaptcha3OnLoad, reCaptcha3ApiLoad
• Xóa functions: reCaptchaLoadCallback, reCaptchaResCallback, add_hint
• Thay đổi nội dung $(document).ready(function() {...})
• Thay đổi nội dung $(window).on('load', function() {...})

Xem các nội dung nêu trên tại đây: https://github.com/nukeviet/nukeviet/blob/nukeviet4.5/themes/default/js/main.js

themes/ten-theme/theme.php

Thêm ngay trên cùng:

$theme_config = [    'pagination' => [        // Nếu dùng bootstrap 3: 'pagination'        // Nếu dùng bootstrap 4/5: 'pagination justify-content-center'        'ul_class' => 'pagination',        // Nếu dùng bootstrap 3: '',        // Nếu dùng bootstrap 4/5: 'page-item'        'li_class' => '',        // Nếu dùng bootstrap 3: '',        // Nếu dùng bootstrap 4/5: 'page-link'        'a_class' => ''    ]];

Xem mẫu ở đây

tìm đến function nv_mailHTML, tìm đến:

global $global_config, $lang_global;

Thêm xuống dưới:

$title = nv_autoLinkDisable($title);

Xem mẫu ở đây

tìm đến function nv_mailHTML, tìm đến:

    $xtpl->parse('main');    return $xtpl->text('main');}

Thêm lên trên:

    if (!empty($global_config['phonenumber'])) {        $xtpl->parse('main.phonenumber');    }

Xem mẫu ở đây

Tìm đến:

    $xtpl->parse('main');    $sitecontent = $xtpl->text('main');

Thêm lên trên:

    if (defined('SSO_REGISTER_DOMAIN')) {        $xtpl->assign('SSO_REGISTER_ORIGIN', SSO_REGISTER_DOMAIN);        $xtpl->parse('main.crossdomain_listener');    }    if ($global_config['cookie_notice_popup'] and !isset($_COOKIE[$global_config['cookie_prefix'] . '_cn'])) {        $xtpl->assign('COOKIE_NOTICE', sprintf($lang_global['cookie_notice'], NV_BASE_SITEURL . 'index.php?' . NV_LANG_VARIABLE . '=' . NV_LANG_DATA . '&' . NV_NAME_VARIABLE . '=siteterms&' . NV_OP_VARIABLE . '=privacy' . $global_config['rewrite_exturl']));        $xtpl->parse('main.cookie_notice');    }

Xem mẫu ở đây

themes/ten-theme/layout/footer_only.tpl

Tìm đến:

<!-- BEGIN: lt_ie9 --><p class="chromeframe">{LANG.chromeframe}</p><!-- END: lt_ie9 -->

Thêm xuống dưới:

<!-- BEGIN: cookie_notice --><div class="cookie-notice"><div><button onclick="cookie_notice_hide();">&times;</button>{COOKIE_NOTICE}</div></div><!-- END: cookie_notice -->

Xem mẫu ở đây

Tìm đến:

<script src="/themes/{TEMPLATE}/js/bootstrap.min.js"></script>

Thêm lên trên:

        <!-- BEGIN: crossdomain_listener -->        <script type="text/javascript">        function nvgSSOReciver(event) {            if (event.origin !== '{SSO_REGISTER_ORIGIN}') {                return false;            }            if (                event.data !== null && typeof event.data == 'object' && event.data.code == 'oauthback' &&                typeof event.data.redirect != 'undefined' && typeof event.data.status != 'undefined' && typeof event.data.mess != 'undefined'            ) {                $('#openidResult').data('redirect', event.data.redirect);                $('#openidResult').data('result', event.data.status);                $('#openidResult').html(event.data.mess + (event.data.status == 'success' ? ' <span class="load-bar"></span>' : ''));                $('#openidResult').addClass('nv-info ' + event.data.status);                $('#openidBt').trigger('click');            }        }        window.addEventListener('message', nvgSSOReciver, false);        </script>        <!-- END: crossdomain_listener -->

Xem mẫu ở đây

themes/ten-theme/css/style.css

Tìm đến:

@font-face {    font-family:'NukeVietIcons';    src:url('../../default/fonts/NukeVietIcons.eot?avyewf');    src:url('../../default/fonts/NukeVietIcons.eot?#iefixavyewf') format('embedded-opentype'),url('../../default/fonts/NukeVietIcons.ttf?avyewf') format('truetype'),url('../../default/fonts/NukeVietIcons.woff?avyewf') format('woff'),url('../../default/fonts/NukeVietIcons.svg?avyewf#NukeVietIcons') format('svg');    font-weight:normal;    font-style:normal;}

Thay bằng:

@font-face {  font-family: 'NukeVietIcons';  src:    url('../fonts/NukeVietIcons.woff2') format('woff2'),    url('../fonts/NukeVietIcons.woff') format('woff'),    url('../fonts/NukeVietIcons.ttf') format('truetype'),    url('../fonts/NukeVietIcons.svg') format('svg');  font-weight: normal;  font-style: normal;  font-display: swap;}

Xem mẫu ở đây

Tìm đến:

.centered {   text-align: center;   font-size: 0}.centered > div {   float: none;   display: inline-block;   text-align: left;   font-size: 14px;}

Thay bằng:

.centered {   display: flex;   justify-content: center;}

Xem mẫu ở đây

Xóa toàn bộ:

/* guestBlock */.guestBlock {    width:350px;}.guestBlock > h3 {    border-bottom-width :1px;    border-bottom-style: solid;    border-bottom-color: #cccccc;}.guestBlock > h3 > a {    display:inline-block;    line-height:34px;    padding:0 17px;    background-color:#e5e5e5;    border-top-right-radius:5px;    border-top-left-radius:5px;}.guestBlock > h3 > a:hover,.guestBlock > h3 > a.current {    background-color:#cccccc;}

Tìm đến:

.nv-recaptcha-compact {    margin: 0 auto;    width: 164px;    height: 144px;}

Thêm xuống dưới:

.grecaptcha-badge {    visibility: hidden;}

Xem mẫu ở đây

Thêm xuống dưới cùng:

/*cookie-notice popup*/.cookie-notice {    position:fixed;    bottom: 20px;    left: 20px;    width: 350px;    z-index:99999999999999;    background-color: #eee;    border: solid 1px #dedede;    border-radius: 4px;    box-shadow:0 0 4px rgba(0,0,0,0.15);}.cookie-notice a {    color: #1a3f5e;    text-decoration: underline;}.cookie-notice div {    position: relative;    width: 100%;    padding: 20px;    color: #333;}.cookie-notice button {    float: right;    margin-top: -20px;    margin-right: -20px;    margin-left: 10px;    margin-bottom: 10px;    width: 40px;    height: 40px;    border: 0;    font-size: 24px;}

Xem mẫu ở đây

themes/ten-theme/css/style.responsive.css

Tìm đến khu vực:

@media (max-width: 499.98px) {    ...}

Thêm vào trong:

    .cookie-notice {        left: 0;        width:100%;    }

Xem mẫu ở đây

themes/mobile_default/layout/header_only.tpl

Tìm đến:

<script type="application/ld+json">...</script>

Thêm lên trên:

        <!-- Use passive listeners to improve scrolling performance, https://web.dev/uses-passive-event-listeners/?utm_source=lighthouse&utm_medium=unknown -->        <script>jQuery.event.special.touchstart={setup:function(c,a,b){this.addEventListener("touchstart",b,{passive:!a.includes("noPreventDefault")})}};jQuery.event.special.touchmove={setup:function(c,a,b){this.addEventListener("touchmove",b,{passive:!a.includes("noPreventDefault")})}};</script>

Xem mẫu ở đây

Tích hợp reCaptcha v3

• Sửa ở các file tpl hiển thị captcha, ví dụ: themes/default/module/users/login_form.tpl. Tìm đến FORM có chứa các mã hiển thị captcha, ví dụ:

<form action="{USER_LOGIN}" method="post" onsubmit="return login_validForm(this);" autocomplete="off" novalidate>

Thay bằng:

<form action="{USER_LOGIN}" method="post" onsubmit="return login_validForm(this);" autocomplete="off" novalidate<!-- BEGIN: recaptcha3 --> data-recaptcha3="1"<!-- END: recaptcha3 -->>

Xem mẫu ở đây

Tìm đến đoạn kiểu như:

<!-- BEGIN: recaptcha -->...<div id="{RECAPTCHA_ELEMENT}"></div>...<!-- END: recaptcha -->

div có chứa id="{RECAPTCHA_ELEMENT}" thay bằng:

<div id="{RECAPTCHA_ELEMENT}" data-toggle="recaptcha" data-pnum="4" data-btnselector="[type=submit]"></div>

Trong đó giá trị của data-pnum bằng số bước ngược lên kể từ phần tử này đến khi gặp thẻ FORM (chính là pnum của nv_recaptcha_elements.push ngay dưới), data-btnselector là selector nhận diện nút submit của FORM.

Xóa toàn bộ đoạn mã javascript ở dưới (<script type="text/javascript">...</script>).

Xem mẫu ở đây

Ngoài ra cần tham khảo cách chỉnh sửa các files php khác tại đây

Thay NV_BASE_SITEURL thành NV_STATIC_URL

(Không bắt buộc làm việc này nếu code của bạn chỉ có 1 hosting duy nhất)

Tìm tất cả:

/assets

Nếu đó là đường dẫn đến file tĩnh (js, css, jpg, png, gif...) thay bằng:

/assets

Tìm tất cả:

/assets/editors

Nếu đó là đường dẫn đến file tĩnh (js, css, jpg, png, gif...) thay bằng:

/assets/editors

Tìm tất cả:

/themes

Nếu đó là đường dẫn đến file tĩnh (js, css, jpg, png, gif...) thay bằng:

/themes

rel="noopener noreferrer nofollow"

Vì lý do bảo mật, hệ thống tự động thêm rel="noopener noreferrer nofollow" vào các link chuyển hướng đến một site khác. Để tránh việc thêm này bạn cần tự thêm vào link đoạn sau:

rel="dofollow"