Hallo zusammen,
es wird wieder Zeit für ein neues Modul, was bei langen Webartikeln sehr praktisch ist: Ein automatisch generiertes Inhaltsverzeichnis, das per Anker direkt den Seitenbereich anspringt.
Dabei werden für die Ankergenerierung H2, H3 und H4 berücksichtigt, die im Konfigurationsreiter per Dropdown in den vorbereiteten Kombinationen H2 / H2,H3 / H2,H3,H4 wählbar sind. Erfolgt keine Auswahl, wird das Inhaltsverzeichnis nicht angezeigt.
INSTALLATION
1) Modul "content_text":
Im Modul-Template get.tpl ein div mit der ID "table_of_contents" ergänzen:
Code: Alles auswählen
<!-- content_text -->
{if 0 lt $label|strlen}
<p><label class="content_type_label">{$label|escape}</label></p>
{/if}
<div class="content_text" id="table_of_contents">
{$text}
</div>
<!-- /content_text -->
Modul-Eingabe:
Code: Alles auswählen
/***********************************************
* CONTENIDO MODUL - INPUT
*
* Modulname : table_of_contents_sd
* Author(s) : Seamless-Design Markus Hübner
* Copyright : Markus Hübner
* Created : 04/2019
************************************************/
echo 'Welche Überschriften sollen für das Inhaltsverzeichnis berücksichtigt werden? ';
echo '<select name="CMS_VAR[100]">';
echo '<option value="none"';
if("CMS_VALUE[100]"=="none") echo 'selected';
echo '>keine</option>';
echo '<option value="h2"';
if("CMS_VALUE[100]"=="h2") echo 'selected';
echo '>h2</option>';
echo '<option value="h2,h3"';
if("CMS_VALUE[100]"=="h2,h3") echo 'selected';
echo '>h2,h3</option>';
echo '<option value="h2,h3,h4"';
if("CMS_VALUE[100]"=="h2,h3,h4") echo 'selected';
echo '>h2,h3,h4</option>';
echo '</select>';
Code: Alles auswählen
<?php
/***********************************************
* CONTENIDO MODUL - OUTPUT
*
* Modulname : table_of_contents_sd
* Author(s) : Seamless-Design Markus Hübner
* Copyright : Markus Hübner
* Created : 04/2019
************************************************/
$headlines_to_consider="CMS_VALUE[100]";
$array_possible_headline_combinations=array("h2","h2,h3","h2,h3,h4");
$table_of_contents_headline=mi18n("ueberschrift inhaltsverzeichnis");
$table_of_contents_jump_to=mi18n("zum abschnitt");
if($headlines_to_consider!="" AND in_array($headlines_to_consider,$array_possible_headline_combinations)) //in_array: check implemented if this module is installed afterwards and you do not want to configure every single article initially. if there is no configuration given, the table of contents will not be shown.
{
?>
<div id="table_of_contents_linklist" class="table_of_contents_linklist"></div>
<script>
document.addEventListener("DOMContentLoaded", function() {
var var_h_tags='<?php echo $headlines_to_consider; ?>'; //h2 | h2,h3 | h2,h3,h4 | h2,h4 | ...
var var_table_of_contents_area=document.getElementById('table_of_contents');
var var_givenObject = document.getElementById("table_of_contents");
var var_headlines_to_consider=var_h_tags;
var var_table_of_contents_headlines=var_table_of_contents_area.querySelectorAll(var_headlines_to_consider);
var arr_table_of_contents_area_headlines=new Array();
var var_table_of_contents_linklist_items='<b><?php echo $table_of_contents_headline; ?></b><ul>';
for (var i = 0; i < var_table_of_contents_headlines.length; i++) {
var var_insertObject = document.createElement("span");
var_insertObject.id = "headline_anchor_h_"+i;
var_insertObject.innerHTML = "";
var var_table_of_contents_headlines_innerhtml = var_table_of_contents_headlines[i].innerHTML;
var_table_of_contents_linklist_items+='<li class="'+var_table_of_contents_headlines[i].tagName+'"><a href="front_content.php?idart=<?php echo $idart; ?>#headline_anchor_h_'+i+'" title="<?php echo $table_of_contents_jump_to; ?>">'+var_table_of_contents_headlines_innerhtml+'</a></li>';
var_givenObject.insertBefore(var_insertObject,var_table_of_contents_headlines[i]);
}
var_table_of_contents_linklist_items+='</ul>';
document.getElementById('table_of_contents_linklist').innerHTML=var_table_of_contents_linklist_items;
}, false );
</script>
<?php
}
?>
Code: Alles auswählen
div.table_of_contents_linklist {
border: 1px solid #999999;
width: 30%;
padding: 0.5em;
margin-top: 1.5em;
margin-left: 2em;
margin-right: 1em;
margin-bottom: 1em;
float: left;
}
div.table_of_contents_linklist ul {
padding-left: 0em;
}
div.table_of_contents_linklist li {
list-style-type: none;
}
div.table_of_contents_linklist li.H2 {
}
div.table_of_contents_linklist li.H3 {
margin-left: 1em;
list-style-type: none;
}
div.table_of_contents_linklist li.H4 {
margin-left: 2em;
}
div.table_of_contents_linklist li a {
text-decoration: none;
color: #000000;
}
div.table_of_contents_linklist li a:hover {
color: #ff0000;
}
3) Modul "table_of_contents_sd" vor dem Modul "content_text" in der Vorlage einbinden.
4) Im Artikel-Reiter "Konfiguration" die gewünschten H-Tags für die Generierung des Inhaltsverzeichnisses auswählen.