Unidadvirtual : Funcionamiento Tabla de Contenido

→ Vea tambien el articulo Crear una Tabla de Contenidos en PHP    

→ La tabla de contenido el codigo esta en index.php   

if (!empty($codcont)) {
	// Sacado de articulopagina.php,articuloderecha.php,etc

	// tabla-contenido-articulos.php crea una tabla de contenidos en las publicaciones 
	// y el script lo pone en el header de los articulos es decir publicaciones.
	//echo $codcont."----------------";exit;
	//$codcont  si presenta un valor es que 
       //  estamos consultando la tabla contenido y 
       //es un articulo es decir una publicacion	

	include_once($_SERVER['DOCUMENT_ROOT'] . 
'/modulos/tabla-contenido-articulos-5Niveles.php');
}
?>

→ tabla-contenido-articulos-5Niveles.php   

<!--
	Alex Se implementa en index.php

Los estilos estn en  _tabla_contenido_articulos.scss

#tabla-contenido p.n3 {
    margin-left: 40px;
}

Fuente
https://decodecms.com/tabla-contenidos-wordpress-sin-plugins/
https://github.com/jmarreros/Genera-Tabla-de-contenidos
-->
<?php //echo "------- esta en tabla-contenido-articulos.php -------";exit; ?>
<script>
	(function($){
		$.noConflict();		
	
		//NOTA los iconos se definen en D:\Google Drive\Web\Wampserver64\www\desarrollounidadvirtualphp7.com\templates\2modelo>
		//inicializar-valores-font-awesome.php
		
		//alert('test');
	//Comprobación para que se ejecute sólo al ver el detalle de una entrada

		//Plantillas para la tabla
		var icono_articulos_flecha_derecha = "<?=$icono_articulos_flecha_derecha?>";
		
		var tmplwrap ="<div id='tabla-contenido'>\n<p class='titulo'>Tabla de Contenido</p>\n{contenido}</div>";
		//var tmpllink = "<p {clase}><i class='fa fa-caret-right'></i> <a href={link}>{texto}</a></p>\n";
		var tmpllink = "<p {clase}> "+icono_articulos_flecha_derecha+"  <a href={link}>{texto}</a></p>\n";
		var cadena 	= "";
		var v_articulo = document.querySelector('article');
		var xnumeroconsecutivo_h1=0;
		var xnumeroconsecutivo_h2=0;
		var xnumeroconsecutivo_h3=0;

		
		var xnumeroconsecutivo_h4=0; 
		var xnumeroconsecutivo_h5=0;
		var xnumeroN2paraN3=0;
		
		//https://stackoverflow.com/questions/5237989/how-is-a-non-breaking-space-represented-in-a-javascript-string
		var espacioblanco = String.fromCharCode("160");
		//ejemplo de uso para gregar espacio en blanco
		//texto 	= xnumeroconsecutivo_h1+"."+xnumeroconsecutivo_h3 +")  "+espacioblanco+ $(this).text();
		
		
		//Preparamos el segundo ,  tercer nivel y cuarto nivel para que tenga una clase		
		$('article h2').siblings('h2').addClass('n2');
		$('article h2').siblings('h3').addClass('n3');  
		$('article h2').siblings('h4').addClass('n4');  // Agregado
		$('article h2').siblings('h5').addClass('n5');  // Agregado 
		
				
		if ( $('article h2').length >= 1 ){ // Si hay etiquetas h2 mas de 3 o igual comienza el buble
			
			
			//Bucle, recorremos elementos para construir la tabla usando Jquery
			
			$('article h2, article h3, article h4 , article h5').each(function(index, element){	
				
				
				// Evitar que se liste Artículos Relacionados porque tienela etiqueta h3 pero 
				//como lo estamos poniendo abajo ya no es necesario
				if ( $(this).text()!="Artículos Relacionados" ){
				  
					//alert($(this).text());

					clase = "";
					if ($(this).hasClass('n2'))
						clase = 'class="n2"';
					if ($(this).hasClass('n3'))
						clase = 'class="n3"';
					if ($(this).hasClass('n4'))
						clase = 'class="n4"';
					else if($(this).hasClass('n5'))
						clase = 'class="n5"';	
					
					texto 	 	=  $(this).text();  //Original				
					
					enlace_id	= texto.replace(/\d-\s|\?|¿/g,'');
					enlace_id 	= enlace_id.replace(/\s+/g, '-');
					$(this).attr('id',enlace_id);
					
				/*--------------INICIO Agregando Numeral -------------------*/
					
				/*-------------------<h1> ------------------------*/		
					if ($(this).hasClass('')){ // Es un H1						
						xnumeroconsecutivo_h1++; //Agregado alex
						texto  	 	= xnumeroconsecutivo_h1 +") "+ $(this).text();				
						//$(this).append('your text'); agrega al texto 
						$(this).text(texto);
						
					}
				
				/*-------------------<h2> ------------------------*/	
					if ($(this).hasClass('n2')){ //Es un H2
						xnumeroconsecutivo_h2++; //Agregado alex
						xnumeroconsecutivo_h3=0;
						//xnumeroN2paraN3=0; 
						texto  	 	= xnumeroconsecutivo_h2 +") "+ $(this).text();
						$(this).text(texto);
					} else {
						//xnumeroconsecutivo_h2=0; // si ya es otro titulo lo vuelve a 0 
					}
					
				/*-------------------<h3> ------------------------*/	
					if ($(this).hasClass('n3')){ //Es un H3
						xnumeroconsecutivo_h3++; //Agregado alex
						xnumeroconsecutivo_h4=0;
						//xnumeroN2paraN3++;

						//alex esto agregue 26 octubre 2022 porque 	modifique 
						// $('article h2').length >= 1   antes era 2 
						// solo ponia en tabla contenido cuando tenia 2 h2  y NO uno
						if (xnumeroconsecutivo_h2==0) { 
							xnumeroconsecutivo_h2=1;
						}		
						
						texto  	 	= xnumeroconsecutivo_h2+"."+ xnumeroconsecutivo_h3 +")  "+ $(this).text();
						
						$(this).text(texto);
					} else {
						//xnumeroconsecutivo_h3=0; // si ya es otro titulo lo vuelve a 0 
					}
					
					/*-------------------<h4> ------------------------*/	
					//http://foros.cristalab.com/crear-un-abecedario-usando-js-t73897/
					var abecedario=new Array('a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z');
						//xnumeroconsecutivo_h4 deveser de 0 a 27 para tomar valor de array
					
					if ($(this).hasClass('n4')){ //Es un H2											
						cabecedario = abecedario[xnumeroconsecutivo_h4]; 
						xnumeroconsecutivo_h4++; //Agregado alex
						
						//Resultado =  3.3.a) 3.3.b)  3.3.c)					
						texto  	 	= 							
						xnumeroconsecutivo_h2+"."+xnumeroconsecutivo_h3+"."+cabecedario +")  " +$(this).text();
						
						$(this).text(texto);
						
					} else {
						//xnumeroconsecutivo_h4=0; // si ya es otro titulo lo vuelve a 0 
					}
					
					
					/*-------------------<h5> ------------------------*/	
					if ($(this).hasClass('n5')){ //Es un H2
						xnumeroconsecutivo_h5++; //Agregado alex
						
						texto  	 	= "  ⇒ "+ $(this).text();
						
						$(this).text(texto);
					} else {
						//xnumeroconsecutivo_h5=0; // si ya es otro titulo lo vuelve a 0 
					}
					
					/*--------------FIN Agregando Numeral -------------------*/
					
										
					//Agregamos en una variable cadena
					cadena += tmpllink.replace('{link}',"'#" + enlace_id + "'");
					cadena  = cadena.replace('{texto}',texto);
					cadena 	= cadena.replace('{clase}',clase);
					
					
					//alert(cadena);			
				}	//Fin Artículos Relacionados
			});	 	

			/*---------------INICIO articulos Relacionados------------------------------------*/
			//Ejemplo de link adicional articulo relacionado, descomentar

			//$('div.rel_posts h3').attr('id','relacionados');
			//cadena +="<p><i class='fa fa-link'></i> <a href='#relacionados'>- Artículos relacionados</a></p>\n";
			var icono_articulos_relacionados = "<?php echo $icono_articulos_relacionados;?>";
		
			// Formato del HTML 
			//<div class="rel_posts">   // Este es el contenedor del articulo relacionado
		    //El Titulo articulo relacionado deve estar entre etiqueta H3 
			//<h3>Artículos Relacionados</h3>	aqui se agrega al h3  id="relacionados" quedando asi 
			//<h3 id="relacionados">Artículos Relacionados</h3>	
		
			$('div.rel_posts h3').attr('id','relacionados');
			
			//cadena +="<p><i class='fas fa-link'></i> <a href='#relacionados'>- Artículos relacionados</a></p>\n";
			var icono_articulos_relacionados = "<?=$icono_articulos_relacionados?>";
			cadena +="<p> " +icono_articulos_relacionados+" <a href='#relacionados'>- Artículos relacionados</a></p>\n";
			
			/*---------------FIN articulos Relacionados------------------------------------*/
			
			cadena = tmplwrap.replace('{contenido}',cadena);
			//alert(cadena);	

			//Finalmente insertamos la cadena (.contenido_articulo es una clase para un  div )
			//$(cadena).insertBefore( $('article .fecha_publicacion').first() );		
			$(cadena).insertBefore( $('article .contenido_articulo'));				
			
		} // Fin contador h2		

	})(jQuery);
</script>