automatisch generiertes Webartikel-Inhaltsverzeichnis

Alles rund um Module und Plugins in CONTENIDO 4.9.
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:41

Dieses Modul gibt es auch für die Version 4.10: viewtopic.php?f=116&t=43522

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 die 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]";
$table_of_contents_headline=mi18n("ueberschrift inhaltsverzeichnis");
$table_of_contents_jump_to=mi18n("zum abschnitt");
if($headlines_to_consider!="")
{
?>

<div id="table_of_contents_linklist" class="table_of_contents_linklist"></div>

<script>
window.addEventListener("load", 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.
table_of_contents_sd-fe-001.jpg
Zuletzt geändert von McHubi am Do 4. Apr 2019, 12:28, insgesamt 1-mal geändert.
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)

Faar
Beiträge: 1915
Registriert: Sa 8. Sep 2007, 16:23
Wohnort: Brandenburg
Kontaktdaten:

Re: automatisch generiertes Webartikel-Inhaltsverzeichnis

Beitrag von Faar » Mi 3. Apr 2019, 07:34

Moin.
CMS_VAR[100] könnte schon vom Content_Teaser Modul benützt sein, für die Vorschautexte oder Bilder.
Fliegt der Bauer übers Dach, ist der Wind weißgott nicht schwach.

McHubi
Beiträge: 1209
Registriert: Do 18. Nov 2004, 23:06
Wohnort: Mettmann
Kontaktdaten:

Re: automatisch generiertes Webartikel-Inhaltsverzeichnis

Beitrag von McHubi » Mi 3. Apr 2019, 13:51

könnte schon vom Content_Teaser Modul benützt sein,
?
1. ist das nicht der Fall, da dort CMS_TEASER, CMS_IMG und CMS_IMGEDITOR verwendet werden und nicht CMS_VAR/VALUE und
2. gibt es nur innerhalb des gleichen Moduls Konflikte wenn zwei Mal die gleiche ID bei VAR/VALUE verwendet wird.

Zwei unterschiedliche Module mit jeweils CMS_VAR[100] und CMS_VALUE[100] in der gleichen Vorlage verursachen keine Probleme. Bei CMS_TEASER oder CMS_FILELIST usw. sieht das natürlich anders aus.
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)

Faar
Beiträge: 1915
Registriert: Sa 8. Sep 2007, 16:23
Wohnort: Brandenburg
Kontaktdaten:

Re: automatisch generiertes Webartikel-Inhaltsverzeichnis

Beitrag von Faar » Mi 3. Apr 2019, 15:15

Stimmt, bei VAR und VALUE betrifft es nur das Modul.
Warum nimmst Du dann die ID 100? :|
Fliegt der Bauer übers Dach, ist der Wind weißgott nicht schwach.

McHubi
Beiträge: 1209
Registriert: Do 18. Nov 2004, 23:06
Wohnort: Mettmann
Kontaktdaten:

Re: automatisch generiertes Webartikel-Inhaltsverzeichnis

Beitrag von McHubi » Mi 3. Apr 2019, 16:06

Kannst auch die 4378 nehmen... Is wurscht... Hauptsache Zahl. Mir war die 100 sympathischer als die 7, 65, 329 oder gar 666! :mrgreen:
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