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

Thứ ba - 31/10/2023 05:24
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ài hơ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 vncode sẽ chia sẻ cách làm điều đó cho website sử dụng mã nguồn NukeViet CMS
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

Thêm đoạn này vào trước bodyhtml
<!-- 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 -->
<!-- BEGIN: allowed_toc_js -->
<script type="text/javascript" defer="async" src="/themes/default/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())-120,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>
Mở file: theme/<theme đang dùng>/css/style.css
.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;
}
File đính kèm

Tác giả: admin

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

Click để đánh giá bài viết

  Ý kiến bạn đọc

Những tin mới hơn

Những tin cũ hơn

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