2016-07-04 5 views
1

Ich versuche, die Suche für meine jekyll-basierte Website zu implementieren, und ich folgte this Implementierung. Alles funktioniert wie es soll, aber wenn ich die Suchergebnisse zurückgebe, möchte ich die Vorlage, die ich für Post-Vorschau habe, auf meiner Startseite verwenden, die im _includes/-Ordner meines jekyll-Setups gespeichert ist. In Flüssigkeit wäre es so etwas wieVerwenden Sie flüssige "Include" -Tag von Javascript

{% for post in search_results %} 
{% include post-preview.html %} 
{% endfor %} 

jedoch die Suchergebnisse HTML-String ist so aufgebaut, in Javascript gehen, wo ich sammeln Sie keine flüssigen Tags verwenden. Gibt es einen leichten Weg dahin?

+1

Javascript ist Client-Seite und ausgeführt nach der Seite rendert. Liquid ist Code, der beim Erstellen der Seite, also vor dem Rendern, ausgeführt wird. Ich denke, dass Sie diesen wichtigen Teil/Einblick vermissen ... – JoostS

+1

Als Ergebnis der oben genannten Flüssigkeit kann nie wissen, was die search_results sind. Ich würde dir raten, dem Tutorial genauer zu folgen. – JoostS

Antwort

0

Ich habe einen etwas hackischen Weg gefunden, es zu tun, seit ich die Frage gestellt habe, also werde ich es hier aufstellen, falls jemand es braucht.

also die Template-Datei zu laden, habe ich Ajax:

var xhReq = new XMLHttpRequest(); 
    xhReq.open("GET", 'post-preview.html', false); 
    xhReq.send(null); 
    var template = xhReq.responseText; 

Jetzt, nachdem diese die variable Vorlage hält den Inhalt der Textdatei nach preview.html, die etwa wie folgt aussieht:

<div class="post-preview"> 
 
    <div class="post-title"> 
 
    <div class="post-name"> 
 
     <a href="{{ post.url }}">{{ post.title }}</a> 
 
    </div> 
 
    <div class="post-date"> 
 
     {% include time.html %} 
 
    </div> 
 
    </div> 
 

 
    <div class="post-snippet"> 
 
    {% if post.content contains ' 
 
    <!--break-->' %} {{ post.content | split:' 
 
    <!--break-->' | first }} 
 
    <div class="post-readmore"> 
 
     <a href="{{ post.url }}">read more-></a> 
 
    </div> 
 
    {% endif %} 
 
    </div> 
 
    {% include post-meta.html %} 
 
</div>

nun unsere Aufgabe ist es, die Flüssigkeit Anrufe, um Dinge wie post.url mit Javascript zu ersetzen. Das ist einfach für post.url und post.title, die wir mit der .replace-Methode für Strings in Javascript behandeln können. Es ist jedoch komplizierter für Code wie den, der den Post-Inhalt aufteilt, so dass nur ein Ausschnitt in der Vorschau gezeigt werden kann.

Also, für mich zumindest, scheint es, dass wir Javascript-Code schreiben müssen, der das gleiche tut. Da der ganze Zweck dieser Übung nicht darin bestand, den gleichen HTML-Code an zwei Stellen zu halten (die post-preview.html-Datei und die search.js-Datei), scheint es, dass wir einen automatischen Weg brauchen, um den flüssigen Code zu entfernen spritze Javascript ein. Ich habe eine Frage an (einige von) diesem Effekt here gestellt.

Verwandte Themen