teilen sie einen artikel in mehrere abteilungen auf, indem sie &lt;div&gt; -tags hinzufügen
<p>ich bin neu in joomla und möchte einen artikel in joomla mit mehreren unterteilungen entwickeln, so wie wir eine normale html-seite durch hinzufügen von <strong> tags </strong> unterteilen. ich habe versucht, dem artikel mit hilfe von <strong> sourcerer </strong> css-code hinzuzufügen, aber es hat nicht funktioniert. brauche eine bessere lösung als diese. ich habe es auch mit der <strong> add custom css </strong> erweiterung von joomla versucht, aber keinen fortschritt. die folgenden bilder sind die css-datei und der artikelcode von joomla.</p><p> <a href="https://i.stack.imgur.com/9mmjm.png"><img src="https://i.stack.imgur.com/9mmjm.png" alt="css file"></a> css-datei</p><p> <a href="https://i.stack.imgur.com/aoon0.png"><img src="https://i.stack.imgur.com/aoon0.png" alt="joomla article code"></a> joomla-artikelcode</p><p> <a href="https://i.stack.imgur.com/thaol.png"><img src="https://i.stack.imgur.com/thaol.png" alt="output"></a> ausgabe</p>
<p>sie können alle ihre benutzerdefinierten css-definitionen im ordner <strong> yourjoomla/templates/yourtemplate/css </strong> ablegen, wenn sie in diesem ordner eine datei custom.css oder user.css erstellen. da dies nicht immer mit allen vorlagen funktioniert, können sie ein kostenloses plugin zum laden ihrer benutzerdefinierten css-codes/stile verwenden:</p><p> <a href="https://extensions.joomla.org/extension/add-custom-css/">https://extensions.joomla.org/extension/add-custom-css/</a> </p><p>auf diese weise können sie ihre 'speziellen' div-klassenstile auch in anderen artikeln wiederverwenden und müssen div-stile nicht artikel für artikel definieren ...</p><p>und ich habe wirklich vergessen zu erwähnen, dass sie zum beispiel den codemirror-editor in ihrem joomla verwenden müssen und sie in diesem fall die artikel im vollständigen html-modus bearbeiten können, den sie unter <strong> global configuration-&gt; default editor einstellen können -&gt; editor-codemirro </strong> r. und auf diese weise können sie zusammen mit der obigen styling-lösung oder mit inline-styling jede art von html-seiten/artikeln erstellen. (es tut mir leid, dass ich diesen wichtigen teil meiner antwort weggelassen habe).</p><p><strong> sehr wichtig bei der verwendung dieses css-lade-plugins: </strong> sie müssen dieses plugin am ende der plugin-reihenfolge im plugin-manager einfügen.</p><p><strong> ergebnisse meiner prüfung der oben genannten: </strong></p><p><strong> mein artikel html: </strong></p><pre><code>&lt;div class="col"&gt; &lt;div class="coll\_1"&gt; &lt;p&gt; this is col 1 &lt;/p&gt; &lt;/div&gt; &lt;div class="coll\_2"&gt; &lt;p&gt; this is col 2 &lt;/p&gt; &lt;/div&gt; &lt;/div&gt; </code></pre><p><strong> mein kurzes css in der datei custom.css: </strong></p><pre><code>.coll\_1 { width: 100px; height: 50px; background-color: red; } .coll\_2 { width: 200px; height:50px; background-color: blue; } </code></pre><p>und mein visuelles ergebnis im artikel im joomla-frontend:</p><p> <a href="https://i.stack.imgur.com/j4atv.jpg"><img src="https://i.stack.imgur.com/j4atv.jpg" alt="custom css loading in joomla with add custom css plugin"></a> </p><p>so funktioniert es problemlos.</p><p><strong> aber das ganze thema viel einfacher machen: </strong> wenn sie <strong> codemirror </strong> als ihren <strong> standard-editor in joomla verwenden , </strong> dann brauchen sie das add custom css plugin eigentlich nicht, um ihre artikel zu stylen. mit dem codemirror-editor können sie einfach ihren inline-css-stil innerhalb von <code>&lt;style&gt;</code> - tags im artikel platzieren, den artikel speichern und das gleiche ergebnis erhalten (einen gestalteten artikel). fügen sie also einfach das ganze in einen ein der artikel und sie werden das haben.</p><p><strong> dann sollte ihr artikel so aussehen: </strong></p><pre><code>&lt;div class="col"&gt; &lt;div class="coll\_1"&gt; &lt;p&gt; this is col 1 &lt;/p&gt; &lt;/div&gt; &lt;div class="coll\_2"&gt; &lt;p&gt; this is col 2 &lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;style&gt; .coll\_1 { width: 100px; height: 50px; background-color: red; } .coll\_2 { width: 200px; height:50px; background-color: blue; } &lt;/style&gt; </code></pre><p><strong> und zum schluss: </strong> sie können sogar <strong> bootstrap </strong> mit codemirror editor in joomla inline importieren/laden, wenn es nicht standardmäßig in ihrer seite geladen ist . sie können bootstrap in ein 'leeres' modul laden, wenn es nicht geladen ist, und sie können bootstrap auch das styling verwenden, wie sie möchten. ich verwende meistens <strong> uikit bibliothek </strong> in layouts und stilen.</p><p>wenn sie diesen code einfach kopieren und in ihren artikel einfügen, erhalten sie 3 spaltenunterteile im artikel, wobei bootstrap (dies ist nur ein beispiel und nicht das laden von bootstrap langfristig):</p><pre><code>&lt;div class="col"&gt; &lt;div class="coll\_1"&gt; &lt;p&gt; this is row1 1 &lt;/p&gt; &lt;/div&gt; &lt;div class="coll\_2"&gt; &lt;p&gt; this is row2 2 &lt;/p&gt; &lt;/div&gt; &lt;div class="coll\_3"&gt; &lt;p&gt; this is row 3 &lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-gn5384xqq1aowxa+058rxpxpg6fy4iwvtnh0e263xmfcjlsawiggfaw/dais6jxm" crossorigin="anonymous"&gt; &lt;div class="container-fluid"&gt; &lt;div class="row"&gt; &lt;div class="col-sm"&gt; one of three columns &lt;/div&gt; &lt;div class="col-sm"&gt; second of three columns &lt;/div&gt; &lt;div class="col-sm"&gt; third of three columns &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;style&gt; .coll\_1 { width: 100px; height: 50px; background-color: red; } .coll\_2 { width: 200px; height:50px; background-color: blue; } .coll\_3 { width: 100px; height: 50px; } &lt;/style&gt; </code></pre><p>und das ergebnis mit bootstrap wo sie die 3 spalten einteilung sehen können:</p><p> <a href="https://i.stack.imgur.com/gfkff.jpg"><img src="https://i.stack.imgur.com/gfkff.jpg" alt="codemirror editor using bootstrap"></a> </p><p>mit dem codemirror-editor in joomla können sie also endlose dinge tun.</p>
<h2>moderne html5-techniken zum ändern von klassen</h2><p>moderne browser haben <a href="https://developer.mozilla.org/en-us/docs/dom/element.classlist"><strong>classlist</strong></a> hinzugefügt, das methoden zur verfügung stellt, mit denen klassen leichter ohne bibliotheken bearbeitet werden können:</p><pre><code>document.getelementbyid("myelement").classlist.add('myclass'); document.getelementbyid("myelement").classlist.remove('myclass'); if ( document.getelementbyid("myelement").classlist.contains('myclass') ) document.getelementbyid("myelement").classlist.toggle('myclass'); </code></pre><p>leider funktionieren diese in internet explorer vor version 10 nicht, obwohl es ein <a href="http://en.wikipedia.org/wiki/shim\_(computing)">shim</a> gibt, um die unterstützung für ie8 und ie9 hinzuzufügen, die unter <a href="https://developer.mozilla.org/en-us/docs/dom/element.classlist">diese seite</a> verfügbar ist. es wird jedoch immer mehr <a href="http://caniuse.com/#feat=classlist">unterstützt</a> .</p><h2>einfache browserübergreifende lösung</h2><p>die standard-javascript-methode zur auswahl eines elements ist <a href="https://developer.mozilla.org/en-us/docs/dom/document.getelementbyid"><code>document.getelementbyid("id")</code></a> . dies wird in den folgenden beispielen verwendet. sie können elemente natürlich auch auf andere weise erhalten. in der richtigen situation können sie stattdessen einfach <code>this</code> verwenden ins detail geht dies nicht in den rahmen der antwort.</p><h3>so ändern sie alle klassen für ein element:</h3><p>um alle vorhandenen klassen durch eine oder mehrere neue klassen zu ersetzen, legen sie das classname-attribut fest:</p><pre><code>document.getelementbyid("myelement").classname = "myclass"; </code></pre><p>(sie können eine durch leerzeichen getrennte liste verwenden, um mehrere klassen anzuwenden.)</p><h3>so fügen sie einem element eine zusätzliche klasse hinzu:</h3><p>um einem element eine klasse hinzuzufügen, ohne vorhandene werte zu entfernen/zu beeinflussen, fügen sie ein leerzeichen und den neuen klassennamen wie folgt hinzu:</p><pre><code>document.getelementbyid("myelement").classname += " myclass"; </code></pre><h3>so entfernen sie eine klasse aus einem element:</h3><p>um eine einzelne klasse zu einem element zu entfernen, ohne andere potenzielle klassen zu beeinflussen, ist ein einfacher regex-ersetzen erforderlich:</p><pre><code>document.getelementbyid("myelement").classname = document.getelementbyid("myelement").classname.replace ( /(?:^|\s)myclass(?!\s)/g , '' ) /* code wrapped for readability - above is all one statement */ </code></pre><p>eine erklärung dieser regex lautet wie folgt:</p><pre><code>(?:^|\s) # match the start of the string, or any single whitespace character myclass # the literal text for the classname to remove (?!\s) # negative lookahead to verify the above is the whole classname # ensures there is no non-space character following # (i.e. must be end of string or a space) </code></pre><p>das flag <code>g</code> weist das ersetzen an, nach bedarf zu wiederholen, falls der klassenname mehrmals hinzugefügt wurde.</p><h3>so prüfen sie, ob eine klasse bereits auf ein element angewendet wurde:</h3><p>der gleiche reguläre ausdruck, der oben zum entfernen einer klasse verwendet wurde, kann auch zur überprüfung verwendet werden, ob eine bestimmte klasse vorhanden ist:</p><pre><code>if ( document.getelementbyid("myelement").classname.match(/(?:^|\s)myclass(?!\s)/) ) </code></pre><p><br/></p><h3>zuweisen dieser aktionen zu onclick-ereignissen:</h3><p>es ist zwar möglich, javascript direkt in die html-ereignisattribute (z. b. <code>onclick="this.classname+=' myclass'"</code>) zu schreiben, dies wird jedoch nicht empfohlen. insbesondere bei größeren anwendungen wird durch die trennung von html-markup von javascript-interaktionslogik ein wartungsfähigerer code erzielt.</p><p>der erste schritt dazu ist das erstellen einer funktion und das aufrufen der funktion im onclick-attribut. beispiel:</p><pre><code>&lt;script type="text/javascript"&gt; function changeclass(){ // code examples from above } &lt;/script&gt; ... &lt;button onclick="changeclass()"&gt;my button&lt;/button&gt; </code></pre><p><sub><em>(es ist nicht erforderlich, dass dieser code in skript-tags enthalten ist. dies ist lediglich der kürze halber als beispiel gedacht. das einschließen von javascript in eine andere datei ist möglicherweise geeigneter.)</em></sub></p><p>der zweite schritt besteht darin, das onclick-ereignis aus dem html-code in javascript zu verschieben, beispielsweise mit <a href="https://developer.mozilla.org/en-us/docs/dom/element.addeventlistener">addeventlistener</a> </p><pre><code>&lt;script type="text/javascript"&gt; function changeclass(){ // code examples from above } window.onload = function(){ document.getelementbyid("myelement").addeventlistener( 'click', changeclass); } &lt;/script&gt; ... &lt;button id="myelement"&gt;my button&lt;/button&gt; </code></pre><p>(beachten sie, dass der window.onload-teil erforderlich ist, damit der inhalt dieser funktion <em>ausgeführt wird, nachdem der html-code</em> vollständig geladen wurde. andernfalls ist das myelement möglicherweise nicht vorhanden, wenn der javascript-code aufgerufen wird, sodass die zeile fehlschlägt .)</p><p><br/></p><h2>javascript frameworks und bibliotheken</h2><p>der obige code ist alles in standard-javascript enthalten. es ist jedoch üblich, entweder ein framework oder eine bibliothek zu verwenden, um allgemeine aufgaben zu vereinfachen und von behobenen fehlern und edge-fällen zu profitieren, an die sie beim schreiben des codes nicht denken.</p><p>während einige leute es für übertrieben halten, ein ~ 50 kb-framework für das einfache ändern einer klasse hinzuzufügen, ist die überlegung, wenn sie umfangreiche javascript-arbeiten ausführen oder etwas, das ungewöhnliches cross-browser-verhalten hat, eine überlegung wert.</p><p><em>(in groben zügen handelt es sich bei einer bibliothek um eine reihe von werkzeugen, die für eine bestimmte aufgabe entwickelt wurden, während ein framework im allgemeinen mehrere bibliotheken enthält und eine reihe von aufgaben ausführt.)</em></p><p>die obigen beispiele wurden im folgenden mit <a href="http://jquery.com">jquery</a> wiedergegeben, wahrscheinlich der am häufigsten verwendeten javascript-bibliothek (obwohl es auch andere gibt, die es zu untersuchen gilt).</p><p>(beachten sie, dass <code>$</code> hier das jquery-objekt ist.)</p><h3>klassen mit jquery ändern:</h3><pre><code>$('#myelement').addclass('myclass'); $('#myelement').removeclass('myclass'); if ( $('#myelement').hasclass('myclass') ) </code></pre><p>darüber hinaus bietet jquery eine verknüpfung zum hinzufügen einer klasse, wenn sie nicht angewendet wird, oder zum entfernen einer klasse, die folgendes ausführt:</p><pre><code>$('#myelement').toggleclass('myclass'); </code></pre><p><br/></p><h3>zuweisen einer funktion zu einem klickereignis mit jquery:</h3><pre><code>$('#myelement').click(changeclass); </code></pre><p>oder, ohne eine id zu benötigen:</p><pre><code>$(':button:contains(my button)').click(changeclass); </code></pre><p><br/></p> Hey [@Olaf3](/c/user/viewprofilepage/user-id/696053) 


Da Shopify [Canonical URLs und Tags](https://help.shopify.com/de/manual/promoting-marketing/seo/seo-overview#seo-verbessern) verwendet werden beide URLs für SEO-Zwecke als identisch und nicht als doppelte Seiten behandelt. 


Wir haben hier einen vollständigen Leitfaden für die Einrichtung kanonischer Tags innerhalb [deines Theme Codes hier](https://help.shopify.com/themes/development/getting-started/search-engine-optimization#duplicate-content-and-canonical-urls) falls das hilfreich ist. Vielleicht sind auch Punkte 5, 6 und 8 in [diesem Blog Artikel](https://www.searchenginejournal.com/technical-seo/url-structure/#close) hilfreich. Es wird empfohlen, notfalls eine 301-Umleitung einzurichten und eine XML-Sitemap zu erstellen.


VG,


 



 **Gabe | Social Care @ Shopify**  
   
  - War meine Antwort hilfreich? Klicke **Like** um es mich wissen zu lassen!   
  - Wurde deine Frage beantwortet? Markiere es als **Als Lösung anerkennen**   
 

 Um mehr zu erfahren, besuche unseren [Shopify Help Center](https://help.shopify.com/de/?&utm_source=community&utm_medium=web&utm_campaign=signature&utm_content=de<br>) oder unseren [Shopify Blog](https://www.shopify.de/blog?&utm_source=community&utm_medium=web&utm_campaign=signature&utm_content=de) <p>erwägen sie die verwendung eines <strong> mehrfachauswahl-designs mit token </strong>. die filter-as-you-type-funktion ist nett, aber nicht unbedingt erforderlich. diese funktionieren gut, wenn im allgemeinen anwendungsfall entweder einer oder nur wenige ausgewählt werden. die benutzerfreundlichkeit nimmt jedoch schnell ab, wenn sie viele auswählen müssen, da der benutzer das menü für jedes element erneut aufrufen muss.</p><p><img src="https://i.stack.imgur.com/fth7o.png" alt="multi-select with tokens, via harvesthq.github.com/chosen"></p><ul> <li> <a href="http://harvesthq.github.com/chosen/">http://harvesthq.github.com/chosen/</a> </li> <li> <a href="http://designingwebinterfaces.com/the-multi-select-solution">http://designingwebinterfaces.com/the-multi-select-solution</a> </li> <li> <a href="http://loopj.com/jquery-tokeninput/">http://loopj.com/jquery-tokeninput/</a> </li> </ul><p>sie haben die tokenisierte mehrfacheingabemethode bereits in ihren e-mail-clients gesehen. <img src="https://i.stack.imgur.com/h1aid.png" alt="multi-select-tokens in email"></p><p>wenn häufig mehrere ausgewählt werden, können sie ein kontrollkästchenmenü <strong> </strong> in betracht ziehen. der unterschied besteht darin, dass das dropdown-menü über alle klicks hinweg dauerhaft bleibt (und die mehrfachauswahl visuell kommuniziert). daher kann der benutzer mit klick-klick-klick schnell mehrere elemente auswählen. für unsere web-app möchten wir dieses design durch hinzufügen der token-funktionalität verbessern.</p><p><img src="https://i.stack.imgur.com/zqizh.png" alt="checkbox menu, via realestate.com.au"></p><ul> <li> <a href="http://www.realestate.com.au/">http://www.realestate.com.au/</a> </li> <li> <a href="http://blogfreakz.com/jquery/jquery-dropdown-check-list/">http://blogfreakz.com/jquery/jquery-dropdown-check-list/</a> </li> </ul> so wie gewünscht, geht das ganz einfach = wenn die seitenummer auf seite 3 beginnen soll, dann so= auf die seite 2 mit dem curser gehn- dann -einfügen-manueller umbruch-seitenumbruch-vorlage - erste seite - seitennummer ändern-1 setzen - bestätigen- fertig, nun kann man deckblatt usw. bearbeiten. so nun ist die seite drei die erste seite= einfügen - fußzeile -standard- ok. einfügen-feldbefehl-seitennummer - ok. fertig. das geht natürlich so auch nach dem selbensystem mit der kopfzeile. mfg.m. das geht sehr gut sogar, infos bei help unter support, da wirst du fündig zu dem thema.

j.s. Hallo,


spontan fallen mir hier zwei Wege ein, die zum Ziel führen:


1. Man könnte das Problem über **Verzeichniseintragsfelder** (TC-Felder) lösen. Ist halt ein bisschen umständlich, diese erst im Nachhinein anzulegen, wenn man schon einige Überschriften bzw. Gliederungspunkte im Dokument hat. Wie man mit Verzeichniseintragsfeldern arbeitet, steht [hier](http://www.borkpc.de/Word/wd_inhver3.html) beschrieben.
2. Eine Alternative wäre, das komplett fertige **Inhaltsverzeichnis** im Nachhinein bzw. vor dem Drucken **in statischen Text** zu **konvertieren** und dann mit Suchen-und-Ersetzen die Nummerierung bzw. die Aufzählungszeichen zu entfernen.


Eine Rückmeldung wäre nett.


Gruß, BerchGerch <p>dies kann eine paginierung sein oder auch nicht, aber hier ist, wie ich paginierung in meiner web-app mache:</p><pre><code>|&lt; first, &lt;&lt; previous, page [5] of 12, next &gt;&gt;, last &gt;| </code></pre><p>die äußeren vier optionen sind links, während die <code>page [5] of 12</code> ist ein formular mit dem [5] als eingabefeld. für benutzer mit aktiviertem javascript verstecke ich die schaltfläche "senden" und sende das formular beim ereignis "unfokus" oder drücke den tastendruck. der benutzer hat die option, wie viele zeilen er anzeigen möchte, die er aus einem dropdown-menü auswählen kann: 10, 20, 50, 100, alle. zusätzlich zur paginierung biete ich auch das sortieren und filtern der ergebnisse an, obwohl dies möglicherweise nicht in jeder situation sinnvoll ist.</p><p><strong>bearbeiten</strong>:</p><p>hier ist ein ausschnitt aus einem modell unserer web-app, um ihnen eine bessere vorstellung zu geben. in dieser version wurden die wörter in den schaltflächen weggelassen, werden jedoch nach einer leichten verzögerung als tooltip beim hover angezeigt. möglicherweise stellen sie jedoch fest, dass das beibehalten der wörter zu einer höheren benutzerfreundlichkeit führt.</p><p><img src="https://i.stack.imgur.com/vzbu0.png" alt="virtuosi media&#39;s pagination example"></p><p>ein paar andere dinge, auf die sie hinweisen sollten:</p><ul> <li>die schaltflächen "erste" und "vorherige" wurden deaktiviert, da es sich um die erste seite handelt.</li> <li>das blau zeigt aktive schaltflächen an (ich muss dieses spezielle thema durch eine farbprüfung ausführen, um sicherzustellen, dass farbenblinde benutzer einen unterschied feststellen können).</li> <li>die tasten bleiben immer erhalten, auch wenn sie deaktiviert sind. dies gibt der schnittstelle konsistenz.</li> <li>aufgrund der skalierung habe ich ein eingabefeld anstelle eines dropdown-auswahlfelds ausgewählt. wenn sie 3000 seiten haben, möchten sie nicht nach unten scrollen, um eine seite zu finden</li> <li>die paginierung ist in einer singulären visuellen komponente gruppiert, um ähnlichkeit im zweck anzuzeigen.</li> </ul> ich arbeite gerne mit firefox, weil ich firefox auf meinem bedarf einrichten kann.


da ich ein **bestimmter ordner für die downloads** festgelegt habe, reicht es mir, wenn ich da reinschaue.


entweder ist die dateiteil (als*.*.part) da oder ist es nicht. 


solltest du zu firefox auch ein downloadmanager haben wollen, dann rate ich dir zu **down them all**.


wenn du über dem den download anschmeisst, dann kannst du das abgebrochenen herunterladen jederzeit wiederaufnehmen. <p>wenn dies meine entwurfsentscheidung wäre, würde ich wahrscheinlich eher eine option c (modifizierte option a) wählen.</p><h3>erstens, warum nicht 'option b':</h3><p>zum einen gefällt mir die klarheit, dass jedes produkt seinen eigenen tisch hat. wenn es sich nur um eine große tabelle mit einem feld zur bestimmung des typs handelt, ist die beziehung nicht so klar.</p><p>zum anderen würde die indizierungsstrategie immer erfordern, dass dieses typfeld aufgelistet wird. da es sich nur um 4 typen handelt, ist die indexkardinalität extrem niedrig (<code>select * from product\_table where type='x'</code> führt im grunde sowieso einen vollständigen tabellenscan durch)</p><h3>option c.</h3><ul> <li>erstellen sie eine übergeordnete tabelle, die nur die spalten enthält, die alle typen gemeinsam nutzen</li> <li>erstellen sie jeden produkttyp als eigene tabelle mit ihren einzelnen spalten, mit einem zusätzlichen: ein link zur übergeordneten tabelle</li> <li>erstellen sie jede 'link'-tabelle: product\_option, model\_option usw. mit links zu den jeweiligen schlüsseln.</li> <li>für diejenigen mit wechselseitigen links (model\_option, option\_model) erstellen sie auch diese tabellen. dies erhöht die klarheit ihrer joins für alle, die sich das ansehen.</li> </ul><p>der nachteil ist die komplexität, sicherzustellen, dass waisen vermieden werden, wenn dinge aktualisiert/gelöscht werden, und zunächst die abfragen zu entwerfen, die diese tabellen verwenden.</p> Hallo Pasta! 
  
Geteiltes Leid ist ein halbes Leid...[Real Player](https://de.ccm.net/download/downloaden-119-realtimes-player) funktioniert bei mir auch nicht mehr. Doch gibt es andere Software und zusätzliche Addo-Ons , welche den Dowload von Videos ermöglichen. Zum Beispiel : Internet download Manager, KeepVid ... 
  
Persönlich habe ich viele probiert, aber die beste Software, die ich je fand ist: Streaming Video Recorder hier.