Javascript search links and images

kosovafan

Erfahrenes Mitglied
Hallo,

ich benutze für meine Website Hugo was soweit auch vernünftig läuft, mit den Design ist es ein wenig komplizierter.

Jetzt suche ich schon seit Tagen eine Möglichkeit mit Jquery alle Links im Artikel zu extrahieren und in eine Liste im Aside Element zu schreiben, dass gleiche wollte ich gerne auch mit den Bildern machen. Irgendwie werde ich hier nicht fündig.

Habt Ihr eine Idee? Es sollten einfach alle Links im Artikel gefunden werden, diese sollten dann innerhalb des aside Element in eine Liste geschrieben werden und am besten im Artikel deaktiviert werden. Das gleiche mit den Bildern, so dass am Ende im article Element nur der Text steht und aside weiterführende Informationen und eine kleine Galerie beinhalten.

Ich hatte die Idee das mit Hand zu machen, was aber blödsinnig ist, Hugo überschreibt bei Generierung der Website alles. Ich hatte an Gulp gedacht, aber ich glaube da ist dann doch die Grenze von Gulp erreicht.

Jquery wäre in Ordnung, weil es schon genutzt wird und selbst wenn Javascript nicht funktioniert die Seite noch funktioniert. Naja außer die Navigation, oh daran sollte ich noch arbeiten.

Mfg
Silvio
 
Hallo,

ja die Elemente befinden sich jetzt in den <article> Element und sollen praktisch nach <aside> verschoben werden. Die Links haben ein Title den man als Namen in href für <aside> nutzen könnte.

Echt sollte kein Problem sein? hhhh die Gnade wenn man Programmierung versteht. Ich suche und setze mehr zusammen, aber genau für das Thema findet sich irgendwie nichts.

Danke
Silvio
 
Dies sollte es tun:
Code:
    <aside>
        <ul>

        </ul>
    </aside>
    <article class="article-links">
        Der Text zum ersten Link und Bild
        <a href="link1.html">Link 1</a>
        <img src="images/dia0.jpg">
        Der Text zum zweiten Link und Bild
        <a href="link2.html">Link 1</a>
        <img src="images/dia1.jpg">
    </article>
    <script>
        $(".article-links a").each(function (idx, ele) {
            var li = $("<li></li>");
            var im = $(ele).next("img");
            li.append($(ele));
            li.append(im);
            $("aside ul").append(li);
        });
    </script>
Setzt voraus, dass das Bild direkt auf den Link folgt. Ist das nicht der Fall, müsste man es geringfügig anpassen.
 
Hallo,

sieht so einfach aus :) nein die Texte folgen nicht nach den Links. Es sind Blog Posts aus denen die Bilder gezogen werden und eben die Links.

HTML:
<div class="linklist">
<ul>
  <li><a href="link1">Title</a></li>
  <li><a href="link2">Title</a></li>
  usw.
</ul>
</div>

<div class="gallery>
<img src="1" alt="title">
<img src="2" alt="title">
<img src="3" alt="title">
</div>

Die divs sind schon im Template geschrieben, es braucht also nur die linkliste dort geschrieben werden und eben die bilder ins div ohne ul li. Ich hasse diese Kombination sowieso :)

Aber das dafür so wenig Code reicht, tja so schwer ist es anscheinend wirklich nicht.

Danke
Silvio
 
Wenn das HTML so aussieht, kann mein jQuery aber noch nicht funktionieren. Bevor ich es abändere: Ich bin davon ausgegangen, dass es eine 1-zu-1-Zuordnung zwischen Links und Bildern gibt, d. h. zu jedem Link gehört genau ein Bild?
 
Hallo,

nein, ist ein Artikel aus dem die Bilder und Links gezogen und ins Aside Element gepackt werden. Die Links können im Artikel ja aktiv bleiben, nur die images sollte man im <article> tag löschen. So war meine Idee. Umsetzbar keine Ahnung. So das im article praktisch nur der Text steht und im <aside> die weiterführenden Informationen, Bilder, Tags und so weiter.

Markdown ist leider nicht flexibel genug um das über Hugo direkt zu steuern. Zumindest ist mir das nicht bekannt.

Mfg
 
Umsetzbar keine Ahnung.
Mit Sicherheit umsetzbar, aber ich bin mir nicht sicher, ob ich es richtig verstehe: Es ist nicht so, dass zu jedem Link genau ein Bild gehört? Und der Code, den Du in #5 gepostet hast, gibt an, wie es im aside am Schluss aussehen soll? Oder wie es im article am Anfang aussieht?
 
Hallo,

so hier findest du ein gist dort siehst du wie es im Moment ausschaut. Im <article> Element befinden sich die Bilder und Links und die links sollten als Liste nach <aside><div.linklist> gehen, die Bilder aus dem <article> Element löschen und nach <aside><div.gallery> kopieren.

Ja #5 gibt den Aufbau in <aside> wieder.

Mfg
Silvio
 
Sehr gut, jetzt wo ich das vollständige HTML sehe, sollte alles klar sein. Dies sollte es tun:
Code:
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script>
        $("article a").each(function (idx, ele) {
            $("aside div.linklist").append($(ele).clone());
        });
        $("article img").each(function (idx, ele) {
            $("aside div.gallery").append($(ele));
        });
    </script>
 
Zurück