Tin tức và cập nhật

Hướng dẫn làm mục lục tự động cho bài viết trong NukeViet

Posted on by osv.thuan
Tạo mục lục tự động cho bài viết trên website rất tốt cho việc tương tác trên website và tiện lợi cho người dùng, nhất là đối với những bài viết dàihơn nữa phần nào cũng giúp ích phần nào đó cho việc SEO website điều này được google đánh giá cao. Hôm nay Thế Anh Group sẽ chia sẻ cách làm điều đó cho website sử dụng mã nguồn NukeViet CMS

Tải file js đính kèm cuối bài viết

Tài file zip đính kèm cuối bài viết giản nén ra file tocbot.min.js copy vào thư mục js của theme đang dùng

Kiểm tra xem bài viết có đạt chuẩn để tạo mục lục hay không

Để có được mục lục tự động thì yêu cầu trong bài viết phải có các thẻ từ h1, h2, h3, h4 vì vậy đoạn code sau sẽ làm điều đó

Mở file: modules/news/theme.php

Tìm đến function detail_theme

Thêm vào bên trên:

if (!empty($news_contents['post_name'])) {

Đoạn code sau

preg_match('|<h[^>]+>(.*)</h[^>]+>|iU', $news_contents['bodyhtml'], $heading);
if(sizeof($heading) > 0)
{
	$xtpl->parse('main.allowed_toc');
	$xtpl->parse('main.allowed_toc_js');
}

Thêm phần hiển thị ngoài site

Ở đây ta dùng javascrip cụ thể là thư viện tocbot.min.js download đính kèm bên dưới bài viết

Giải nén và copy file tocbot.min.js vào thư mục theme/<theme đang dùng>/js

Mở file theme/<theme đang dùng>/modules/news/detail.tpl

<!-- END: showhometext -->

Thêm bên dưới nó

<!-- BEGIN: allowed_toc -->
<button class="btn-danh-sach-show"><i class="fa fa-list-ol" aria-hidden="true"></i></button>
<div class="danh-sach-box" style="margin-bottom:20px">
	<div class="danh-sach">
		<div class="head-danh-sach">
			<i class="fa fa-list-ol" aria-hidden="true"></i>Mục lục
			<button class="btn-danh-sach-close"><i class="fa fa-times" aria-hidden="true"></i></button>
		</div>
		<div id="js-toc" class="toc js-toc z-1 transition--300 pa4">
		</div>
	</div>
</div>
<!-- END: allowed_toc -->

Tiếp đó tìm đến dòng

<div id="news-bodyhtml" class="bodytext margin-bottom-lg">

Sửa thành

<div id="news-bodyhtml" class="js-toc-content">

Tìm đến gần cuối file đoạn

<!-- END: main -->

Thêm bên trên nó: (nhớ thay theanhgroup bằng tên theme đang dùng nhé !

<!-- BEGIN: allowed_toc_js -->
<script type="text/javascript" defer="async" src="/themes/theanhgroup/js/tocbot.min.js"></script>
<script>
$(document).ready(function(){if($(window).width()>768)var e=".danh-sach";var t=$(document).width()-($("#news-bodyhtml").offset().left+$("#news-bodyhtml").width())-140,s=$(document).width()-($("#news-bodyhtml").offset().left+$("#news-bodyhtml").width())-60,a=document.getElementsByClassName("danh-sach"),o=document.getElementsByClassName("btn-danh-sach-show");if(a[0].style.right=t+"px",o[0].style.right=s+"px",$(".is-position-fixed .danh-sach").show(),$(".btn-danh-sach").click(function(){$(".js-toc").addClass("picaso")}),$(document).click(function(e){$(e.target).hasClass("btn-danh-sach")||0!==$(e.target).parents(".js-toc").length||$(".js-toc").removeClass("picaso")}),$("#news-bodyhtml h2, #news-bodyhtml h3, #news-bodyhtml h4, #news-bodyhtml h5, #news-bodyhtml h6").each(function(e){var t=$(this),s=t.text().toLowerCase().trim().replace(/[.,-/#!?$%^&*;:{}=-_`~()]/g,"");s=(s=s.replace(/à|á|ạ|ả|ã|â|ầ|ấ|ậ|ẩ|ẫ|ă|ằ|ắ|ặ|ẳ|ẵ/g,"a").replace(/è|é|ẹ|ẻ|ẽ|ê|ề|ế|ệ|ể|ễ/g,"e").replace(/ì|í|ị|ỉ|ĩ/g,"i").replace(/ò|ó|ọ|ỏ|õ|ô|ồ|ố|ộ|ổ|ỗ|ơ|ờ|ớ|ợ|ở|ỡ/g,"o").replace(/ù|ú|ụ|ủ|ũ|ư|ừ|ứ|ự|ử|ữ/g,"u").replace(/ỳ|ý|ỵ|ỷ|ỹ/g,"y").replace(/đ/g,"d").replace(/À|Á|Ạ|Ả|Ã|Â|Ầ|Ấ|Ậ|Ẩ|Ẫ|Ă|Ằ|Ắ|Ặ|Ẳ|Ẵ/g,"A").replace(/È|É|Ẹ|Ẻ|Ẽ|Ê|Ề|Ế|Ệ|Ể|Ễ/g,"E").replace(/Ì|Í|Ị|Ỉ|Ĩ/g,"I").replace(/Ò|Ó|Ọ|Ỏ|Õ|Ô|Ồ|Ố|Ộ|Ổ|Ỗ|Ơ|Ờ|Ớ|Ợ|Ở|Ỡ/g,"O").replace(/Ù|Ú|Ụ|Ủ|Ũ|Ư|Ừ|Ứ|Ự|Ử|Ữ/g,"U").replace(/Ỳ|Ý|Ỵ|Ỷ|Ỹ/g,"Y").replace(/Đ/g,"D")).replace(/s+/g,"-"),t.attr("id",s)}),tocbot.init({tocSelector:".js-toc",contentSelector:".js-toc-content",headingSelector:"h1, h2, h3, h4, h5",ignoreSelector:".js-toc-ignore",linkClass:"toc-link",extraLinkClasses:"tocextra",activeLinkClass:"is-active-link",listClass:"toc-list",extraListClasses:"",isCollapsedClass:"is-collapsed",collapsibleClass:"is-collapsible",listItemClass:"toc-list-item",collapseDepth:5,scrollSmooth:!0,scrollSmoothDuration:500,scrollEndCallback:function(e){},headingsOffset:-180,throttleTimeout:50,positionFixedSelector:e,positionFixedClass:"is-position-fixed",fixedSidebarOffset:"auto",includeHtml:!1,onClick:!1,orderedList:!0,scrollContainer:null,occho:170}),$(window).width()>768){$flag=0,$(".danh-sach-box").height($(".danh-sach").outerHeight()),$(".btn-danh-sach-close").click(function(){$(".danh-sach").fadeOut(250),$flag=0}),$(".btn-danh-sach-show").click(function(){$(".danh-sach").fadeIn(250),$flag=1});var l=0;$(document).scroll(function(){l=$(this).scrollTop();var e=$(".danh-sach-box").offset().top+$(".danh-sach-box").height();l>e?($(".btn-danh-sach-show").show(),0==$flag?$(".danh-sach").hide():$(".danh-sach").show()):($(".btn-danh-sach-show").hide(),$(".danh-sach").show(),$flag)})}});
</script>
<!-- END: allowed_toc_js -->

Mở file: theme/<theme đang dùng>/css/style.css

Thêm vào cuối file:

.danh-sach {
	border: 2px solid #000;
    padding: 10px;
    background: #f3f3f3;
    margin-bottom: 20px;
    border-radius: 6px;

}

.danh-sach .fa {
	margin-right: 10px;
}

.head-danh-sach {
	background: none;
	border: none;
	width: 100%;
	font-weight: 700;
	text-transform: uppercase;
	text-align: left;
	font-size: 16px;
	padding: 5px 0;
}

.js-toc {
	margin-bottom: 10px;
    max-height: 400px;
    overflow-y: auto;
}

ol.toc-list {
	padding-left: 20px;
	list-style-type: decimal;
	margin-bottom: 0;
	margin-bottom: 5px;
}

ol.toc-list:last-child {
	margin-bottom: 0
}

ol.toc-list>li:last-child {
	margin-bottom: 0
}

ol.toc-list a {
	width: 100%;
	background: linear-gradient(to right, #ddd 50%, #f3f3f3 50%);
	background-size: 200% 100%;
	background-position: right bottom;
	transition: all.25s ease;
	padding: 3px;
	display: inline-block;
}

ol.toc-list .is-active-link {
	background-position: left bottom;
}

ol.toc-list>li>a {
	font-weight: 700;
	color: #000
}

ol.toc-list>li>ol.toc-list>li>a {
	font-weight: 400
}

.is-position-fixed {
	position: fixed !important;
	top: 50px;
	z-index: 99
}

.is-position-fixed .js-toc {
	height: auto !important;
	width: 200px !important;
	visibility: visible !important;
	transition: .25s;
	visibility: hidden;
}

.picaso {
	transition: .25s;
}

.transition--300 {
	transition: all 300ms ease-in-out;
}

.btn-danh-sach-close {
	border: none;
	background: none;
	position: absolute;
	top: 13px;
	right: 0;
	width: 40px;
	padding: 0;
	display: none;
}

.btn-danh-sach-show {
	position: fixed;
	top: 50px;
	font-size: 20px;
	border: 2px solid #000;
	padding: 10px;
	background: #f3f3f3;
	line-height: 1;
	border-radius: 7px;
	z-index: 9;
	display: none;
	opacity: .7;
	transform: .25s
}

.btn-danh-sach-show:hover {
	opacity: 1;
	transform: .25s
}

.is-position-fixed .btn-danh-sach-close, .is-position-fixed .btn-danh-sach-show {
	display: block;
}

#bodyhtml h1:before, #bodyhtml h2:before, #bodyhtml h3:before, #bodyhtml h4:before, #bodyhtml h5:before, #bodyhtml h6:before {
    display: block;
    content: " ";
    height: 15px;
    margin-top: -15px;
    visibility: hidden;
}

Hãy chú ý dòng này để điều chỉnh đích trượt đến cho phù hợp với website của mình

#bodyhtml h1:before, #bodyhtml h2:before, #bodyhtml h3:before, #bodyhtml h4:before, #bodyhtml h5:before, #bodyhtml h6:before {
    display: block;
    content: " ";
    height: 15px;
    margin-top: -15px;
    visibility: hidden;
}

Đây là cách làm của mình và nó có 1 hạn chế là….à mà thôi tự tìm hiểu nhé !

osv.thuan