-
Notifications
You must be signed in to change notification settings - Fork 12
Hướng dẫn nâng cấp giao diện tương thích NukeViet 4.0.23 lên 4.0.29
Bài viết này hướng dẫn các bước thực hiện để nâng cấp giao diện từ bản 4.0.23 lên 4.0.29.
Chú ý: Bài viết chỉ hướng dẫn nâng cấp phần lõi giao diện và các module mặc định của hệ thống, nếu giao diện có các module cài từ bên ngoài thì tùy vào module đó mà sẽ cần phải thực hiện thêm.
Giao diện mặc định là cơ sở để xây dựng các giao diện khác do đó cần chú ý một số thay đổi bên dưới để có thể tùy chỉnh các giao diện riêng hợp lý nhất.
Việc thay đổi tên gọi các layout không ảnh hưởng tới các giao diện khác tuy nhiên mục đích là để tránh việc nhầm lẫn trong khi sử dụng. Cụ thể các layout giao diện mặc định, cột body được thay thành cột main
layout.left-body-right.tpl => layout.left-main-right.tpl
layout.left-body.tpl => layout.left-main.tpl
layout.left-right-body.tpl => layout.left-right-main.tpl
layout.body-left-right.tpl => layout.main-left-right.tpl
layout.body-right.tpl => layout.main-right.tpl
layout.body.tpl => layout.main.tpl
Các thư viện sau được loại khỏi giao diện và đưa vào thư mục assets của site
font-awesome
Các phần sau đã được đưa cho hệ thống quản lý (1 file tpl sử dụng cho tất cả các giao diện)
system/flood_blocker.tpl
system/dump.tpl
layout/rss.tpl
- users
- news
- contact
- menu
- comments
- banners
Nếu giao diện của bạn có tồn tại những file sau
system/flood_blocker.tpl
system/dump.tpl
layout/rss.tpl
css/sitemapindex.xsl
css/sitemap.xsl
css/rss.xsl
Nên xóa các file đó vì chúng không còn được sử dụng nữa.
Nếu giao diện của bạn có gọi từ giao diện mặc định các thành phần sau:
apple-touch-icon.png
favicon.ico
css/font-awesome.min.css
Cần:
- Xóa bỏ những chỗ gọi
apple-touch-icon.pnghoặc tạo mới file apple-touch-icon.png vào giao diện của bạn và thay lại đường dẫn tới giao diện của bạn - Xóa bỏ những chỗ gọi
favicon.icohoặc tạo mới file favicon.ico vào giao diện của bạn và thay lại đường dẫn tới giao diện của bạn - Thay lại đường dẫn tới font-awesome.min.css ví dụ file theme.php có gọi
$html_links[] = array( 'rel' => 'StyleSheet', 'href' => NV_BASE_SITEURL . 'themes/default/css/font-awesome.min.css' );Thay lại thành
$html_links[] = array( 'rel' => 'StyleSheet', 'href' => NV_BASE_SITEURL . NV_ASSETS_DIR . '/css/font-awesome.min.css' );**Nếu giao diện của bạn tồn tại các file **
css/font-awesome.min.css
fonts/fontawesome-webfont.eot
fonts/fontawesome-webfont.svg
fonts/fontawesome-webfont.ttf
fonts/fontawesome-webfont.woff
fonts/fontawesome-webfont.woff2
fonts/FontAwesome.otf
Hãy kiểm tra lại, nếu chúng chưa được tùy chỉnh gì mà vẫn giữ nguyên bản gốc thì nên thay đổi lại những chỗ gọi file font-awesome.min.css về thư mục assets của site và xóa bỏ các file trên để giảm dung lượng.
Giao diện này sẽ được sử dụng nếu trong module có những chỗ gọi hàm nv_theme_alert, nếu bạn không cần thiết phải làm giao diện cho phần này có thể bỏ qua, nếu cần thiết hãy sao chép file themes/default/system/alert.tpl sang giao diện của bạn và chỉnh sửa cho hợp lý.
Nếu giao diện của bạn muốn hỗ trợ thay đổi favicon.ico theo cấu hình trong admin (Nếu không cần thiết, bỏ qua bước này) thì. Mở theme.php tìm
$xtpl = new XTemplate($layout_file, NV_ROOTDIR . '/themes/' . $global_config['module_theme'] . '/layout');Hoặc tương đương. Thêm lên trên
$site_favicon = NV_BASE_SITEURL . 'favicon.ico';
if (! empty($global_config['site_favicon']) and file_exists(NV_ROOTDIR . '/' . $global_config['site_favicon'])) {
$site_favicon = NV_BASE_SITEURL . $global_config['site_favicon'];
}Tìm
$xtpl->assign('NV_COOKIE_PREFIX', $global_config['cookie_prefix']);Hoặc tương đương, thêm xuống dưới
$xtpl->assign('SITE_FAVICON', $site_favicon);Mở header_only.tpl (Hoặc tương đương) tìm
<link rel="shortcut icon" href="{NV_BASE_SITEURL}themes/{TEMPLATE}/favicon.ico">Thay lại thành
<link rel="shortcut icon" href="{SITE_FAVICON}">Mở theme.php tìm
new GfontsThay lại thành
new NukeViet\Client\GfontsNếu giao diện của bạn có sử dụng chức năng hỗ trợ chuyển đổi mobile, desktop thì thực hiện hướng dẫn bên dưới, nếu không hãy bỏ qua bước này.
Nếu giao diện của bạn sử dụng nguyên bản code từ giao diện mặc định thì: Mở theme.php tìm các dòng từ
// Change theme types
.... khoảng 8 dòng code nữa
$xtpl->parse('main.theme_type.loop');
}
$xtpl->parse('main.theme_type');Thay toàn bộ thành
// Change theme types
if (sizeof($global_config['array_theme_type']) > 1) {
$mobile_theme = empty($module_info['mobile']) ? $global_config['mobile_theme'] : (($module_info['mobile'] != ':pcmod' and $module_info['mobile'] != ':pcsite') ? $module_info['mobile'] : '');
if (empty($mobile_theme) or empty($global_config['switch_mobi_des'])) {
$array_theme_type = array_diff($global_config['array_theme_type'], array( 'm' ));
} else {
$array_theme_type = $global_config['array_theme_type'];
}
$icons = array('r' => 'random', 'd' => 'desktop', 'm' => 'mobile');
$current_theme_type = (isset($global_config['current_theme_type']) and ! empty($global_config['current_theme_type']) and in_array($global_config['current_theme_type'], array_keys($icons))) ? $global_config['current_theme_type'] : 'd';
foreach ($array_theme_type as $theme_type) {
$xtpl->assign('STHEME_TYPE', NV_BASE_SITEURL . 'index.php?' . NV_LANG_VARIABLE . '=' . NV_LANG_DATA . '&' . NV_NAME_VARIABLE . '=' . $module_name . '&nv' . NV_LANG_DATA . 'themever=' . $theme_type . '&nv_redirect=' . nv_redirect_encrypt($client_info['selfurl']));
$xtpl->assign('STHEME_TITLE', $lang_global['theme_type_' . $theme_type]);
$xtpl->assign('STHEME_INFO', sprintf($lang_global['theme_type_chose'], $lang_global['theme_type_' . $theme_type]));
$xtpl->assign('STHEME_ICON', $icons[$theme_type]);
if ($theme_type == $current_theme_type) {
$xtpl->parse('main.theme_type.loop.current');
} else {
$xtpl->parse('main.theme_type.loop.other');
}
$xtpl->parse('main.theme_type.loop');
}
$xtpl->parse('main.theme_type');
}Nếu giao diện của bạn viết code theo cách riêng thì
Lưu ý các vấn đề sau để viết lại:
- Chỉ có thể chuyển đổi giao diện khi
sizeof($global_config['array_theme_type']) > 1 - Giao diện mobile được xác định theo nguyên tắc
$mobile_theme = empty($module_info['mobile']) ? $global_config['mobile_theme'] : (($module_info['mobile'] != ':pcmod' and $module_info['mobile'] != ':pcsite') ? $module_info['mobile'] : '');- Sau khi kiểm tra các vấn đề trên viết lại đoạn code hỗ trợ chuyển đổi giao diện cho hợp lý.
Chú ý: Kiểm tra các link chuyển đổi giao diện cần thêm thuộc tính
rel="nofollow"tránh bị các máy chủ tìm kiếm đọc vào các link này.
Nếu giao diện của bạn tồn tại modules/banners. Mở addads.tpl, trong đó nếu có gọi jquery UI cần chỉnh sửa lại theo hướng dẫn https://github.com/nukeviet/update/wiki/H%C6%B0%E1%BB%9Bng-d%E1%BA%ABn-n%C3%A2ng-c%E1%BA%A5p-module-t%C6%B0%C6%A1ng-th%C3%ADch-b%E1%BA%A3n-4.0.23-l%C3%AAn-4.0.29#c%E1%BA%ADp-nh%E1%BA%ADt-l%E1%BA%A1i-nh%E1%BB%AFng-ch%E1%BB%97-g%E1%BB%8Di-jquery-ui
Ví dụ cần thay
<link type="text/css" href="{NV_BASE_SITEURL}{NV_ASSETS_DIR}/js/ui/jquery.ui.core.css" rel="stylesheet" />
<link type="text/css" href="{NV_BASE_SITEURL}{NV_ASSETS_DIR}/js/ui/jquery.ui.theme.css" rel="stylesheet" />
<link type="text/css" href="{NV_BASE_SITEURL}{NV_ASSETS_DIR}/js/ui/jquery.ui.datepicker.css" rel="stylesheet" />
<script type="text/javascript" src="{NV_BASE_SITEURL}{NV_ASSETS_DIR}/js/ui/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="{NV_BASE_SITEURL}{NV_ASSETS_DIR}/js/ui/jquery.ui.datepicker.min.js"></script>Thành
<link type="text/css" href="{NV_BASE_SITEURL}{NV_ASSETS_DIR}/js/jquery-ui/jquery-ui.min.css" rel="stylesheet" />
<script type="text/javascript" src="{NV_BASE_SITEURL}{NV_ASSETS_DIR}/js/jquery-ui/jquery-ui.min.js"></script>Nếu giao diện của bạn tồn tại thư mục modules/comment. Mở main.tpl, trong đó nếu có đoạn
<!-- BEGIN: jsfile -->
<script type="text/javascript" src="{NV_BASE_SITEURL}themes/{TEMPLATE}/js/comment.js"></script>
<!-- END: jsfile -->
<!-- BEGIN: cssfile -->
<link rel="StyleSheet" href="{NV_BASE_SITEURL}themes/{TEMPLATE}/css/comment.css" type="text/css" />
<!-- END: cssfile -->Cần thay thành
<script type="text/javascript" src="{NV_BASE_SITEURL}themes/{TEMPLATE_JS}/js/comment.js"></script>
<link rel="StyleSheet" href="{NV_BASE_SITEURL}themes/{TEMPLATE_CSS}/css/comment.css" type="text/css" />Giải thích đoạn trên: Luôn luôn gọi file
comment.jsvàcomment.cssra thay vì như phiên bản trước gọi ra có điều kiện. Thư mục giao diện cho JS là{TEMPLATE_JS}và cho CSS là{TEMPLATE_CSS}
Bên dưới, nếu tìm thấy loginForm() cần thay lại thành loginForm('')
Nếu giao diện của bạn tồn tại thư mục modules/contact thì làm các việc sau:
Thêm giao diện cho block.contact_list.php
Giao chép file modules/contact/block.contact_list.tpl từ giao diện default và chỉnh sửa giao diện cho phù hợp với giao diện của bạn.
Chỉnh sửa block block.contact_form.php
Mở block.contact_form.tpl tìm {CHECKSS} nếu có thay lại thành {NV_CHECK_SESSION}
Tìm vị trí nút gửi nội dung (Nút submit), thêm vào đó thuộc tính data-module="{MODULE}". VÍ dụ
<button type="button" class="ctb btn btn-primary btn-sm"><em class="fa fa-pencil-square-o"></em>{GLANG.feedback}</button>Thay lại thành
<button type="button" class="ctb btn btn-primary btn-sm" data-module="{MODULE}"><em class="fa fa-pencil-square-o"></em>{GLANG.feedback}</button>Nếu giao diện của bạn tồn tại js/contact.js, mở contact.js tìm đoạn ajax giống dạng
nv_name_variable + "=contact"Sửa lại thành
nv_name_variable + "=" + b.attr( "data-module" )Giải thích: Đoạn trên nhằm đưa giá trị module_name vào phần ajax request để cho phép ảo hóa module contact
Chỉnh sửa giao diện block block.department.php
Mở block.department.tpl nếu có, tìm
<!-- END: phone -->Thêm vào sau
<!-- BEGIN: address -->
<tr>
<td>{LANG.address}</td>
<td>{DEPARTMENT.address}</td>
</tr>
<!-- END: address -->Giải thích: Hiển thị địa chỉ bộ phận hỗ trợ sau thông tin điện thoại hỗ trợ.
Chỉnh sửa giao diện gửi contact
Mở form.tpl nếu có. Tìm loginForm() nếu có cần thay lại thành loginForm('')
loginForm()Tìm
<div class="form-group">
<div class="middle text-right clearfix">
<img width="{GFX_WIDTH}" height="{GFX_HEIGHT}" title="{LANG.captcha}" alt="{LANG.captcha}" src="{NV_BASE_SITEURL}index.php?scaptcha=captcha&t={NV_CURRENTTIME}" class="captchaImg display-inline-block">Nếu có thêm lên trên
<div class="form-group">
<label><input type="checkbox" name="sendcopy" value="1" checked="checked" /><span>{LANG.sendcopy}</span></label>
</div>Mục đích: Hiển thị tùy chọn gửi bản sao cho tôi khi người sử dụng gửi liên hệ.
Chỉnh sửa giao diện nội dung liên hệ đã gửi
Mở sendcontact.tpl nếu có, trong có cần đặt toàn bộ các nội dung khác {TITLE} và {CONTENT} nằm vào cặp thẻ
<!-- BEGIN: sendinfo -->
<!-- END: sendinfo -->Ví dụ:
-------------------------------------<br /><br />
{LANG.sendinfo}: {SITE_NAME} (<a href="{SITE_URL}">{SITE_URL}</a>)<br />
{LANG.sendinfo2}:<br />
<ul>
<li>{LANG.fullname}: {FULLNAME}</li>
<li>{LANG.email}: {EMAIL}</li>
<!-- BEGIN: phone -->
<li>{LANG.phone}: {PHONE}</li>
<!-- END: phone -->
<li>IP: {IP}</li>
<!-- BEGIN: cat -->
<li>{LANG.cat}: {CAT}</li>
<!-- END: cat -->
<!-- BEGIN: part -->
<li>{LANG.part}: {PART}</li>
<!-- END: part -->
</ul>Thay lại thành
<!-- BEGIN: sendinfo -->
-------------------------------------<br /><br />
{LANG.sendinfo}: {SITE_NAME} (<a href="{SITE_URL}">{SITE_URL}</a>)<br />
{LANG.sendinfo2}:<br />
<ul>
<!-- BEGIN: cat -->
<li>{LANG.cat}: {CAT}</li>
<!-- END: cat -->
<li>{LANG.part}: {PART}</li>
<li>{LANG.fullname}: {FULLNAME}</li>
<li>{LANG.email}: {EMAIL}</li>
<!-- BEGIN: phone -->
<li>{LANG.phone}: {PHONE}</li>
<!-- END: phone -->
<li>IP: {IP}</li>
</ul>
<!-- END: sendinfo -->Kiểm tra lại nếu giao diện của bạn có thư mục modules/menu, trong đó các file tpl có sử dụng jquery.UI cần cập nhật theo hướng dẫn https://github.com/nukeviet/update/wiki/H%C6%B0%E1%BB%9Bng-d%E1%BA%ABn-n%C3%A2ng-c%E1%BA%A5p-module-t%C6%B0%C6%A1ng-th%C3%ADch-b%E1%BA%A3n-4.0.23-l%C3%AAn-4.0.29#c%E1%BA%ADp-nh%E1%BA%ADt-l%E1%BA%A1i-nh%E1%BB%AFng-ch%E1%BB%97-g%E1%BB%8Di-jquery-ui
Ví dụ: modules/menu/global.slimmenu.tpl có
<script src="{NV_BASE_SITEURL}{NV_ASSETS_DIR}/js/ui/jquery.ui.effect.js"></script>Cần thay lại thành
<script src="{NV_BASE_SITEURL}{NV_ASSETS_DIR}/js/jquery-ui/jquery-ui.min.js"></script>Nếu giao diện của bạn tồn tại thư mục modules/news cần thực hiện các công việc dưới:
Chỉnh sửa block block_category.tpl
Mở block_category.tpl lên tìm <!-- BEGIN: main --> thêm lên trên
<!-- BEGIN: subcat -->
<ul>
<!-- BEGIN: loop -->
<li>
<a href="{SUBCAT.link}" title="{SUBCAT.title}">{SUBCAT.title0}</a>
<!-- BEGIN: sub -->
{SUB}
<!-- END: sub -->
</li>
<!-- END: loop -->
</ul>
<!-- END: subcat -->Tìm {HTML_CONTENT}, thay lại thành
<!-- BEGIN: cat -->
<li>
<a href="{CAT.link}" title="{CAT.title}">{CAT.title0}</a>
<!-- BEGIN: subcat -->
<span class="fa arrow expand"> </span>
{SUBCAT}
<!-- END: subcat -->
</li>
<!-- END: cat -->Mục đích: Tùy chỉnh được nội dung xuất ra theo mã trong cặp thẻ
<!-- BEGIN: subcat --><!-- END: subcat -->thay vì fix cứng trong code.
Cập nhật block block_newscenter.tpl
Nếu site có sử dụng block block_newscenter.tpl thì mở block_newscenter.tpl tìm các chỗ có {main.title} thay thành {main.titleclean60}, nếu cần hiển thị tiêu đề đầy đủ, thẻ a cần thêm thuộc tính title="{main.title}".
Cập nhật giao diện đăng tin ngoài site
Mở content.tpl ra tìm onclick="get_alias();" thay lại thành onclick="get_alias('{OP}');"
Cập nhật giao diện chi tiết tin
Mở detail.tpl tìm {DETAIL.bodytext} thay lại thành {DETAIL.bodyhtml}
Cập nhật giao diện in bài viết
Mở file print.tpl lên thêm vào vị trí thích hợp đoạn
<!-- BEGIN: no_public -->
<div class="alert alert-warning">
{LANG.no_public}
</div>
<!-- END: no_public -->Mục đích: Hiển thị cảnh báo bài viết chưa được xuất bản.
Cập nhật giao diện tìm kiếm
Nếu file search.tpl có sử dụng jquery UI cần cập nhật theo hướng dẫn https://github.com/nukeviet/update/wiki/H%C6%B0%E1%BB%9Bng-d%E1%BA%ABn-n%C3%A2ng-c%E1%BA%A5p-module-t%C6%B0%C6%A1ng-th%C3%ADch-b%E1%BA%A3n-4.0.23-l%C3%AAn-4.0.29#c%E1%BA%ADp-nh%E1%BA%ADt-l%E1%BA%A1i-nh%E1%BB%AFng-ch%E1%BB%97-g%E1%BB%8Di-jquery-ui
Chỉnh sửa viewcat_grid.tpl
Mở viewcat_grid.tpl:
Tìm {CONTENT.hitscm} nếu có, đưa thành phần chứa nó vào cặp thẻ <!-- BEGIN: comment --> và <!-- END: comment -->. Ví dụ:
<li>
<em class="fa fa-comment-o"> </em> {LANG.total_comment}: {CONTENT.hitscm}
</li>Thay thành
<!-- BEGIN: comment -->
<li>
<em class="fa fa-comment-o"> </em> {LANG.total_comment}: {CONTENT.hitscm}
</li>
<!-- END: comment -->Xác định vị trí code giữa thẻ <!-- BEGIN: viewcatloop --> và <!-- END: viewcatloop -->. Trong đó tìm phần data của thẻ và đưa chúng vào cặp <!-- BEGIN: tooltip --> <!-- END: tooltip -->. Ví dụ:
<h4><a class="show" href="{CONTENT.link}" data-content="{CONTENT.hometext_clean}" data-img="{CONTENT.imghome}" data-rel="tooltip" data-placement="{TOOLTIP_POSITION}" title="{CONTENT.title}">{CONTENT.title}</a></h4>Thay lại thành
<h4><a class="show" href="{CONTENT.link}" <!-- BEGIN: tooltip -->data-content="{CONTENT.hometext_clean}" data-img="" data-rel="tooltip" data-placement="{TOOLTIP_POSITION}"<!-- END: tooltip --> title="{CONTENT.title}">{CONTENT.title}</a></h4>Chỉnh sửa viewcat_list.tpl
Mở viewcat_list.tpl:
Xác định vị trí code giữa thẻ <!-- BEGIN: viewcatloop --> và <!-- END: viewcatloop -->. Trong đó tìm phần data của thẻ và đưa chúng vào cặp <!-- BEGIN: tooltip --> <!-- END: tooltip -->. Ví dụ:
<a class="show h4" href="{CONTENT.link}" data-content="{CONTENT.hometext}" data-img="{CONTENT.imghome}" data-rel="tooltip" data-placement="{TOOLTIP_POSITION}" title="{CONTENT.title}">Thay lại thành
<a class="show h4" href="{CONTENT.link}" <!-- BEGIN: tooltip -->data-content="{CONTENT.hometext}" data-img="{CONTENT.imghome}" data-rel="tooltip" data-placement="{TOOLTIP_POSITION}"<!-- END: tooltip --> title="{CONTENT.title}">Chỉnh sửa viewcat_main_bottom.tpl
Mở viewcat_main_bottom.tpl:
Thêm vào file tại những vị trí thích hợp hai đoạn sau:
<!-- BEGIN: block_topcat -->
<div class="block-top clear">
{BLOCK_TOPCAT}
</div>
<!-- END: block_topcat -->Và
<!-- BEGIN: block_bottomcat -->
<div class="bottom-cat clear">
{BLOCK_BOTTOMCAT}
</div>
<!-- END: block_bottomcat -->Ví dụ bên trên
<div class="panel-body">
<!-- BEGIN: image -->Và bên dưới
<!-- END: related -->
</div>
</div>Mục đích: Chèn thêm block riêng ở mỗi chuyên mục
Tìm các phần hiển thị số bình luận của tin (Có chứa {LANG.total_comment}: {CONTENT.hitscm}) nếu có, đưa chúng vào cặp thẻ <!-- BEGIN: comment --> và <!-- END: comment -->.
Tìm các phần định nghĩa tooltip (có chứa dạng data-content="{OTHER.hometext}" data-img="{OTHER.imghome}" data-rel="tooltip" data-placement="{TOOLTIP_POSITION}") đưa chúng vào cặp thẻ <!-- BEGIN: tooltip --> và <!-- END: tooltip -->.
Thực hiện công việc tương tự như trên (phần sửa viewcat_main_bottom.tpl) cho viewcat_main_left.tpl, viewcat_main_right.tpl, viewcat_page.tpl, viewcat_top.tpl
Chú ý: viewcat_page.tpl, viewcat_top.tpl không có phần hiển thị quảng cáo
{BLOCK_TOPCAT}và{BLOCK_BOTTOMCAT}.
Nếu giao diện của bạn tồn tại thư mục modules/page hãy làm những việc bên dưới:
Mở main.tpl tìm <!-- BEGIN: image --> thay thành <!-- BEGIN: imagecenter -->, tìm <!-- END: image --> thay thành <!-- END: imagecenter -->
Tìm
<!-- END: socialbutton -->Thêm xuống dưới
<!-- BEGIN: imageleft -->
<figure class="article left noncaption pointer" style="width:100px" onclick="modalShow('', '<img src={CONTENT.image} />');">
<img alt="{CONTENT.title}" src="{CONTENT.image}" width="{CONTENT.imageWidth}" class="img-thumbnail" />
<!-- BEGIN: alt --><figcaption>{CONTENT.imagealt}</figcaption><!-- END: alt -->
</figure>
<!-- END: imageleft -->Mục đích: Thay đổi phần ảnh đại diện hiện tại thành kiểu hiển thị chính giữa và thêm cấu hình hiển thị ảnh bên trái
Nếu giao diện của bạn tồn tại thư mục modules/users thì làm các việc bên dưới.
Copy hai file getuserid.tpl và groups.tpl từ giao diện mặc định sang giao diện của bạn và chỉnh sửa giao diện cho phù hợp
Hai file này thuộc về giao diện phần chức năng của trưởng nhóm làm việc ngoài site.
Chỉnh sửa block.login.tpl
Mở file block.login.tpl, tìm
<!-- BEGIN: main -->Thêm xuống dưới
<!-- BEGIN: display_button -->Tìm
<!-- END: allowuserreg2 -->Thêm xuống dưới
<!-- BEGIN: allowuserreg_link -->
<a href="{USER_REGISTER}" class="register btn btn-primary btn-sm">{GLANG.register}</a>
<!-- END: allowuserreg_link -->Tìm
<!-- BEGIN: allowuserreg -->Thêm lên trên
<!-- END FORFOOTER -->
<!-- END: display_button -->
<!-- BEGIN: display_form -->
{FILE "login_form.tpl"}
<!-- END: display_form -->Tìm và thay thế các đoạn gọi jquery UI theo hướng dẫn https://github.com/nukeviet/update/wiki/H%C6%B0%E1%BB%9Bng-d%E1%BA%ABn-n%C3%A2ng-c%E1%BA%A5p-module-t%C6%B0%C6%A1ng-th%C3%ADch-b%E1%BA%A3n-4.0.23-l%C3%AAn-4.0.29#c%E1%BA%ADp-nh%E1%BA%ADt-l%E1%BA%A1i-nh%E1%BB%AFng-ch%E1%BB%97-g%E1%BB%8Di-jquery-ui
Tìm
<!-- END: signed -->Thêm lên trên
<script src="{NV_BASE_SITEURL}themes/default/js/users.js"></script>Mục đích: Hỗ trợ giao diện đăng nhập / đăng ký dạng form thay vì popup như trước
Chỉnh sửa block.user_button.tpl
Mở block.user_button.tpl:
Tìm và thay thế các đoạn gọi jquery UI theo hướng dẫn https://github.com/nukeviet/update/wiki/H%C6%B0%E1%BB%9Bng-d%E1%BA%ABn-n%C3%A2ng-c%E1%BA%A5p-module-t%C6%B0%C6%A1ng-th%C3%ADch-b%E1%BA%A3n-4.0.23-l%C3%AAn-4.0.29#c%E1%BA%ADp-nh%E1%BA%ADt-l%E1%BA%A1i-nh%E1%BB%AFng-ch%E1%BB%97-g%E1%BB%8Di-jquery-ui
Tìm đoạn sau:
<div class="text-center margin-top-lg">
<a href="{USER_LOSTPASS}">{GLANG.lostpass}?</a>
</div>Đoạn hiển thị liên kết quên mật khẩu thành viên
Thêm vào thẻ
id="other_form"
Mục đích: Dùng javascript cho ẩn liên kết sau khi đăng nhập bằng ajax thành công.
Chỉnh sửa info.tpl
Tìm và thay thế các đoạn gọi jquery UI theo hướng dẫn https://github.com/nukeviet/update/wiki/H%C6%B0%E1%BB%9Bng-d%E1%BA%ABn-n%C3%A2ng-c%E1%BA%A5p-module-t%C6%B0%C6%A1ng-th%C3%ADch-b%E1%BA%A3n-4.0.23-l%C3%AAn-4.0.29#c%E1%BA%ADp-nh%E1%BA%ADt-l%E1%BA%A1i-nh%E1%BB%AFng-ch%E1%BB%97-g%E1%BB%8Di-jquery-ui
Phần nav, đưa toàn bộ các item vào cặp thẻ điều kiện, mẫu như sau:
<li class="{BASIC_ACTIVE}"><a data-toggle="tab" data-location="{EDITINFO_FORM}/basic" href="#edit_basic">{LANG.edit_basic}</a></li>
<li class="{AVATAR_ACTIVE}"><a data-toggle="tab" href="#edit_avatar" data-location="{EDITINFO_FORM}/avatar">{LANG.edit_avatar}</a></li>
<!-- BEGIN: edit_username --><li class="{USERNAME_ACTIVE}"><a data-toggle="tab" data-location="{EDITINFO_FORM}/username" href="#edit_username">{LANG.edit_login}</a></li><!-- END: edit_username -->
<!-- BEGIN: edit_email --><li class="{EMAIL_ACTIVE}"><a data-toggle="tab" data-location="{EDITINFO_FORM}/email" href="#edit_email">{LANG.edit_email}</a></li><!-- END: edit_email -->
<li class="{PASSWORD_ACTIVE}"><a data-toggle="tab" data-location="{EDITINFO_FORM}/password" href="#edit_password">{LANG.edit_password}</a></li>
<li class="{QUESTION_ACTIVE}"><a data-toggle="tab" data-location="{EDITINFO_FORM}/question" href="#edit_question">{LANG.edit_question}</a></li>
<!-- BEGIN: edit_openid --><li class="{OPENID_ACTIVE}"><a data-toggle="tab" data-location="{EDITINFO_FORM}/openid" href="#edit_openid">{LANG.openid_administrator}</a></li><!-- END: edit_openid -->
<!-- BEGIN: edit_group --><li class="{GROUP_ACTIVE}"><a data-toggle="tab" data-location="{EDITINFO_FORM}/group" href="#edit_group">{LANG.group}</a></li><!-- END: edit_group -->
<!-- BEGIN: edit_others --><li class="{OTHERS_ACTIVE}"><a data-toggle="tab" data-location="{EDITINFO_FORM}/others" href="#edit_others">{LANG.edit_others}</a></li><!-- END: edit_others -->
<li class="{SAFEMODE_ACTIVE}"><a data-toggle="tab" data-location="{EDITINFO_FORM}/safemode" href="#edit_safemode">{LANG.safe_mode}</a></li>Chuyển thành
<li class="{BASIC_ACTIVE}"><a data-toggle="tab" data-location="{EDITINFO_FORM}/basic" href="#edit_basic">{LANG.edit_basic}</a></li>
<!-- BEGIN: edit_avatar --><li class="{AVATAR_ACTIVE}"><a data-toggle="tab" href="#edit_avatar" data-location="{EDITINFO_FORM}/avatar">{LANG.edit_avatar}</a></li><!-- END: edit_avatar -->
<!-- BEGIN: edit_username --><li class="{USERNAME_ACTIVE}"><a data-toggle="tab" data-location="{EDITINFO_FORM}/username" href="#edit_username">{LANG.edit_login}</a></li><!-- END: edit_username -->
<!-- BEGIN: edit_email --><li class="{EMAIL_ACTIVE}"><a data-toggle="tab" data-location="{EDITINFO_FORM}/email" href="#edit_email">{LANG.edit_email}</a></li><!-- END: edit_email -->
<!-- BEGIN: edit_password --><li class="{PASSWORD_ACTIVE}"><a data-toggle="tab" data-location="{EDITINFO_FORM}/password" href="#edit_password">{LANG.edit_password}</a></li><!-- END: edit_password -->
<!-- BEGIN: edit_question --><li class="{QUESTION_ACTIVE}"><a data-toggle="tab" data-location="{EDITINFO_FORM}/question" href="#edit_question">{LANG.edit_question}</a></li><!-- END: edit_question -->
<!-- BEGIN: edit_openid --><li class="{OPENID_ACTIVE}"><a data-toggle="tab" data-location="{EDITINFO_FORM}/openid" href="#edit_openid">{LANG.openid_administrator}</a></li><!-- END: edit_openid -->
<!-- BEGIN: edit_group --><li class="{GROUP_ACTIVE}"><a data-toggle="tab" data-location="{EDITINFO_FORM}/group" href="#edit_group">{LANG.group}</a></li><!-- END: edit_group -->
<!-- BEGIN: edit_others --><li class="{OTHERS_ACTIVE}"><a data-toggle="tab" data-location="{EDITINFO_FORM}/others" href="#edit_others">{LANG.edit_others}</a></li><!-- END: edit_others -->
<!-- BEGIN: edit_safemode --><li class="{SAFEMODE_ACTIVE}"><a data-toggle="tab" data-location="{EDITINFO_FORM}/safemode" href="#edit_safemode">{LANG.safe_mode}</a></li><!-- END: edit_safemode -->Bên dưới, đưa các tab content vào trong cặp thẻ mở và đóng tương ứng. Ví dụ:
Đoạn
<div id="edit_avatar" class="tab-pane fade {TAB_AVATAR_ACTIVE}">
<div class="page panel panel-default">
<div class="panel-body bg-lavender">
<div class="margin-bottom">
<img id="myavatar" class="img-thumbnail bg-gainsboro" src="{DATA.photo}" width="{DATA.photoWidth}" height="{DATA.photoHeight}" data-default="{AVATAR_DEFAULT}" />
</div>
<div>
<button type="button" class="btn btn-primary btn-xs margin-right-sm" onclick="changeAvatar('{URL_AVATAR}');">{LANG.change_avatar}</button>
<button type="button" class="btn btn-danger btn-xs" id="delavatar" onclick="deleteAvatar('#myavatar','{DATA.checkss}',this)"{DATA.imgDisabled}>{GLANG.delete}</button>
</div>
</div>
</div>
</div>Thêm lên trên
<!-- BEGIN: tab_edit_avatar -->Thêm xuống dưới
<!-- END: tab_edit_avatar -->Tiếp tục tương tự cho các tab content:
edit_password
edit_question
edit_safemode
Chỉnh sửa login.tpl
Mở login.tpl tìm thẻ chứa đoạn <!-- BEGIN: navbar --> và <!-- END: navbar --> thêm vào thuộc tính id="other_form".
Mục đích: Cho ẩn menu sau khi đăng nhập bằng ajax thành công.
Chỉnh sửa login_form.tpl
Mở login_form.tpl:
Tìm placeholder="{GLANG.username}" nếu có thay bằng placeholder="{GLANG.username_email}".
Tìm thêm vào trên <!-- BEGIN: openid --> hoặc vị trí thích hợp đoạn code:
<!-- BEGIN: allowuserreg2_form -->
<div class="form-group">
<div class="text-right clearfix">
<a href="#" onclick="modalShowByObj('#guestReg_{BLOCKID}')">{GLANG.register}</a>
</div>
</div>
<!-- END: allowuserreg2_form -->
<!-- BEGIN: allowuserreg_linkform -->
<div class="form-group">
<div class="text-right clearfix">
<a href="{USER_REGISTER}">{GLANG.register}</a>
</div>
</div>
<!-- END: allowuserreg_linkform -->Mục đích: Hỗ trợ cho block login có thể hiển thị theo dạng form và dạng button.
Chỉnh sửa lostactivelink.tpl
Mở lostactivelink.tpl:
Tìm placeholder="{LANG.field}" nếu có thay bằng placeholder="{GLANG.username_email}"
Chỉnh sửa lostpass_form.tpl
Mở lostpass_form.tpl:
Tìm placeholder="{LANG.field}" nếu có thay bằng placeholder="{GLANG.username_email}"
Chỉnh sửa register.tpl
Tìm và thay thế các đoạn gọi jquery UI theo hướng dẫn https://github.com/nukeviet/update/wiki/H%C6%B0%E1%BB%9Bng-d%E1%BA%ABn-n%C3%A2ng-c%E1%BA%A5p-module-t%C6%B0%C6%A1ng-th%C3%ADch-b%E1%BA%A3n-4.0.23-l%C3%AAn-4.0.29#c%E1%BA%ADp-nh%E1%BA%ADt-l%E1%BA%A1i-nh%E1%BB%AFng-ch%E1%BB%97-g%E1%BB%8Di-jquery-ui
Chỉnh sửa register_form.tpl
Mở register_form.tpl:
Tìm {GLANG.username_empty} nếu có thay bằng {USERNAME_RULE}.
Tìm {GLANG.password_empty} nếu có thay bằng {PASSWORD_RULE}
Đưa toàn bộ các thẻ chứa input name="agreecheck" vào trong thẻ <!-- BEGIN: agreecheck --> và <!-- END: agreecheck -->. Ví dụ:
<div>
<div>
<div class="form-group text-center check-box required" data-mess="">
<input type="checkbox" name="agreecheck" value="1" class="fix-box" onclick="validErrorHidden(this,3);"/>{LANG.accept2} <a onclick="usageTermsShow('{LANG.usage_terms}');" href="javascript:void(0);"><span class="btn btn-default btn-xs">{LANG.usage_terms}</span></a>
</div>
</div>
</div>Thay lại thành
<!-- BEGIN: agreecheck -->
<div>
<div>
<div class="form-group text-center check-box required" data-mess="">
<input type="checkbox" name="agreecheck" value="1" class="fix-box" onclick="validErrorHidden(this,3);"/>{LANG.accept2} <a onclick="usageTermsShow('{LANG.usage_terms}');" href="javascript:void(0);"><span class="btn btn-default btn-xs">{LANG.usage_terms}</span></a>
</div>
</div>
</div>
<!-- END: agreecheck -->Chỉnh sửa userinfo.tpl
Mở userinfo.tpl:
Thêm vào sau khu vực hiển thị ngày tham gia của thành viên ({USER.regdate}) đoạn code
<!-- BEGIN: group_manage -->
<tr>
<td>{LANG.group_manage_count}</td>
<td>{USER.group_manage} <a href="{URL_GROUPS}" title="{LANG.group_manage_list}">({LANG.group_manage_list})</a></td>
</tr>
<!-- END: group_manage -->Mục đích: Hiển thị liên kết và số nhóm quản lý nếu thành viên là trưởng nhóm.
Kiểm tra javascript chính (thường ở file main.js hoặc ten-theme.js) nếu có hàm function loginForm() cần thêm tham số truyền vào redirect. Ví dụ
function loginForm()Thay thành
function loginForm(redirect)Trong hàm, đoạn url request cần bổ sung thêm redirect ví dụ:
url: nv_base_siteurl + 'index.php?' + nv_lang_variable + '=' + nv_lang_data + '&' + nv_name_variable + '=users&' + nv_fc_variable + '=login',Thay thành
url: nv_base_siteurl + 'index.php?' + nv_lang_variable + '=' + nv_lang_data + '&' + nv_name_variable + '=users&' + nv_fc_variable + '=login' + redirect,Với
if(redirect != '') redirect = '&nv_redirect=' + redirect;Nếu giao diện của bạn tồn tại file js/news.js cần kiểm tra như sau:
Hàm get_alias() cần truyền vào tham số op
Ví dụ:
function get_alias() {Thay thành
function get_alias(op) {Bên trong hàm
$.post(script_name + '?' + nv_name_variable + '=' + nv_module_name + '&' + nv_fc_variable + '=content&nocache=' + new Date().getTime(), 'get_alias=' + encodeURIComponent(title), function(res) {Thay lại thành $.post(script_name + '?' + nv_name_variable + '=' + nv_module_name + '&' + nv_fc_variable + '=' + op + '&nocache=' + new Date().getTime(), 'get_alias=' + encodeURIComponent(title), function(res) {
**Chỉnh sửa tối ưu phần chỉnh kích thước ảnh tại trang xem bài viết**
Nếu có đoạn như sau
```js
$(window).load(function(){
var newsW = $('#news-bodyhtml').innerWidth();
$.each($('#news-bodyhtml img'), function(){
var w = $(this).innerWidth();
var h = $(this).innerHeight();
if( w > newsW ){
$(this).prop('width', newsW);
$(this).prop('height', h * newsW / w);
}
});
});Thay lại thành
function fix_news_image(){
var news = $('#news-bodyhtml'), newsW, w, h;
if( news.length ){
var newsW = news.innerWidth();
$.each($('img', news), function(){
if( typeof $(this).data('width') == "undefined" ){
w = $(this).innerWidth();
h = $(this).innerHeight();
$(this).data('width', w);
$(this).data('height', h);
}else{
w = $(this).data('width');
h = $(this).data('height');
}
if( w > newsW ){
$(this).prop('width', newsW);
$(this).prop('height', h * newsW / w);
}
});
}
}
$(window).load(function(){
fix_news_image();
});
$(window).on("resize", function() {
fix_news_image();
});Chú ý: Nội dung bài viết cần nằm trong thẻ có ID = news-bodyhtml, nếu ID khác hãy đổi giá trị
$('#news-bodyhtml')thành giá trị tương ứng.
Nếu giao diện của bạn tồn tại file js/page.js cần kiểm tra như sau:
Để hỗ trợ việc chỉnh kích thước ảnh tại trang xem bài viết phù hợp với nhiều loại màn hình, tiến cử thêm vào cuối file đoạn code:
function fix_page_image(){
var postHtml = $('#page-bodyhtml'), postHtmlW, w, h;
if( postHtml.length ){
var postHtmlW = postHtml.innerWidth();
$.each($('img', postHtml), function(){
if( typeof $(this).data('width') == "undefined" ){
w = $(this).innerWidth();
h = $(this).innerHeight();
$(this).data('width', w);
$(this).data('height', h);
}else{
w = $(this).data('width');
h = $(this).data('height');
}
if( w > postHtmlW ){
$(this).prop('width', postHtmlW);
$(this).prop('height', h * postHtmlW / w);
}
});
}
}
$(window).load(function(){
fix_page_image();
});
$(window).on("resize", function() {
fix_page_image();
});Chú ý: Nội dung bài viết cần nằm trong thẻ có ID = page-bodyhtml, nếu ID khác hãy đổi giá trị
$('#page-bodyhtml')thành giá trị tương ứng.
Nếu giao diện của bạn tồn tại file js/users.js cần kiểm tra như sau:
Chỉnh sửa tối ưu code xử lý ajax
Tìm những đoạn có dạng sau:
$("[name=" + e.input + "]"
$(a).find("[name=" + d.input + "]")Thay tương ứng thành
$("[name=\"" + e.input + "\"]"
$(a).find("[name=\"" + d.input + "\"]")Nếu có
function usageTermsShow(t) {Trong hàm đó tìm
modalShow(t, e)Thay lại thành
if ($('#sitemodal').length) {
if (!$('#sitemodalTerm').length) {
$('body').append('<div id="sitemodalTerm" class="modal fade" role="dialog">' + $('#sitemodal').html() + '</div>')
}
"" != t && 'undefined' != typeof t && $("#sitemodalTerm .modal-content").prepend('<div class="modal-header"><h2 class="modal-title">' + t + '</h2></div>');
$("#sitemodalTerm").find(".modal-title").html(t);
$("#sitemodalTerm").find(".modal-body").html(e);
$('#sitemodalTerm').on('hidden.bs.modal', function () {
$("#sitemodalTerm .modal-content").find(".modal-header").remove()
});
$("#sitemodalTerm").modal({backdrop: "static"})
} else {
alert(strip_tags(e))
}Mục đích: Khắc phục lỗi bị mất form đăng ký tại block user_button khi ấn vào quy định đăng ký thành viên.
Nếu có
function login_validForm(a) {Trong hàm đó tìm
, $(".form-detail", a).hide()Thêm sau đó
, $("#other_form").hide(),Nếu có
function changemail_validForm(a) {Trong hàm đó tìm
"ok" == b.inputThay lại thành
"ok" == b.statusCập nhật lại phần crop ảnh avatar
Nếu có
UAV.commonBên dưới tìm
var img = document.getElementById(UAV.config.target);Thêm xuống dưới
var boxWidth = $('#' + UAV.config.target).innerWidth();
var boxHeight = Math.round(boxWidth * img.naturalHeight / img.naturalWidth);Tìm
bgOpacity: .3,Thêm xuống dưới
boxWidth: boxWidth,
boxHeight: boxHeight,Tìm
var bounds = this.getBounds();
$('#' + UAV.config.w).val(bounds[0]);
$('#' + UAV.config.h).val(bounds[1]);
$('#' + UAV.config.displayDimension).html(bounds[0] + ' x ' + bounds[1]);Thay lại thành
$('#' + UAV.config.w).val(boxWidth);
$('#' + UAV.config.h).val(boxHeight);
$('#' + UAV.config.displayDimension).html(boxWidth + ' x ' + boxHeight);