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

Đăng ký tên miền để nhận ưu đãi ngay hôm nay !
  • .com
    195.000/năm
  • .net
    195.000/năm
  • .top
    55.000/năm
  • .info
    85.000/năm
  • Khuyến mãi
    Mua 2 tặng phiếu quà tiki 50.000đ
    .com.vn
    550.000/năm
  • Khuyến mãi
    Mua 2 tặng phiếu quà tiki 50.000đ
    .vn
    650.000/năm

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

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
Mục lục

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 dưới:

$xtpl->assign('TOOLTIP_POSITION', $module_config[$module_name]['tooltip_position']);

Đ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ó:

<!-- 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é !


Thứ ba - 04/05/2021 09:42


File đính kèm

Tổng số điểm của bài viết là: 5 trong 1 đánh giá

Click để đánh giá bài viết
Đây là bài viết hướng dẫn làm cách nào để tạo mục lục cho website một cách tự động !
Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây