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

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

.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;
}

#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;
}