automatisch generiertes Webartikel-Inhaltsverzeichnis

Alles rund um Module und Plugins in CONTENIDO 4.10.
Antworten
McHubi
Beiträge: 1209
Registriert: Do 18. Nov 2004, 23:06
Wohnort: Mettmann
Kontaktdaten:

automatisch generiertes Webartikel-Inhaltsverzeichnis

Beitrag von McHubi » Di 2. Apr 2019, 21:31

Dieses Modul gibt es auch für die 4.9: viewtopic.php?f=99&t=43523

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 -->
2) Neues Modul "table_of_contents_sd" anlegen:
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>';
Modul-Ausgabe:

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
}
?>
Modul-Reiter "CSS" des Moduls "table_of_contents_sd":

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;
}
Übersetzungen im Modul "table_of_contents_sd" wie gewünscht eintragen.
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.

:D
table_of_contents_sd-fe-001.jpg
(138.4 KiB) Noch nie heruntergeladen
seamless-design.de
"Geht nicht!" wohnt in der "Will nicht!"-Strasse.

Das Handbuch zur Version 4.10: CONTENIDO für Einsteiger (4.10)

Das Handbuch zur Version 4.9: CONTENIDO für Einsteiger (4.9)

Antworten