Füllen Sie Vorlagen mit Inhalt ohne Winkel

Question

Ich habe einen voll funktionsfähigen Prototyp einer HTML5-Nachrichtenkarte, und ich muss 50 oder so Karten mit eindeutigen Inhalten bevölkern. Ich frage nach Vorschlägen für eine effizientere Möglichkeit, jeder Karte Inhalt hinzuzufügen, außer Kopieren, Ausschneiden und Einfügen aus der Excel-Tabelle. Die Spalten der Tabelle enthalten die Nachrichtenkategorie, das Datum, den Titel und die externe URL jeder Karte. Ich wurde auch gebeten, das Bild aus dem Nachrichtenartikel, auf den die Karte verweist, einzufügen - ich kann mir nicht vorstellen, wie das automatisiert werden könnte. Dieses Projekt verwendet den Bootstrap-Stil, ein Datenkategorieattribut für ein Tag auf jeder Karte und ist eine Laravel-Website. Es enthält nicht Eckig, Schnurrbart, Lenker oder ein Vorlagenmuster. Gibt es eine Möglichkeit, eine benutzerdefinierte Vorlage für diese Nachrichtenkarten zu erstellen, ohne ein Framework oder eine Vorlagen-Engine installieren zu müssen? Könnte ich Datenattribute verwenden? Hier

ist der HTML-Code für eine Karte:

<div class="col-lg-4 col-md-6"> 
    <section class="news-box" data-category="blog">    
    <figure> 
     <img src="/material-icons/ic_recent_actors_black_24dp/web/ic_recent_actors_black_24dp_2x.png" class="img-responsive opacity-3"> 
     <figcaption>Blog</figcaption> 
    </figure> 
    <h3 class="h6">Title of Blog Post</h3> 
    <figure> 
     <img src="images/news/pic2.jpg" class="img-responsive"> 
    </figure> 
    <p>luctus et ultrices posuere cubilia Curae; quam erat volutpat. Phasellus dignissim euismod luctus.In leo mauris, blandit quismalesuada lobortis, fringilla a ipsum.</p> 
    </section> 
</div> 

Answer 1

So könnte dies nicht die beste Antwort, aber diese sind meine 2 Cent.

1. Sie zuerst Ihren Excel-Sheet zu csv und dann zu einem json Objekt konvertieren. Ich denke, dass dies mit Online-Konvertern wie diesem einfach erreicht werden kann: http://www.convertcsv.com/csv-to-json.htm (habe das selbst nicht versucht, habe nur das erste Google-Ergebnis eingefügt). Ihr JSON-Objekt wird dann folgendermaßen aussehen var foo = [{...},{...},...] (siehe snipet)

2. Erstellen Sie Ihre „Karte“ mit Dummy-Platzhalter wie card_titlecard_img. Verstecke es.

3. In Ihrer js-Datei durchlaufen Sie alle Elemente in Ihrem json-Objekt und verwenden Sie die soeben erstellte Vorlage, um alle Platzhalter zu ersetzen. (var newItem = myTemplate.replace('blog_title',val.blog_title)...)

4. Hängen Sie das resultierende HTML-Snippet an den Kartencontainer an.

$(document).ready(function(){ 
 
    var template = $(".card-template").html(); //get the card template html 
 
    $.each(foo, function(idx, val){ //iterate over the json object 
 
    var newCard = template.replace('card_title',val.title).replace('card_image',val.img).replace('card_content',val.content); //make a copy of the template and replace the placeholders with the real data 
 
    $(".cards-container").append(newCard); //append the card to the container row 
 
    }); 
 
        
 
    }); 
 

 

 
var foo = [ 
 
    { 
 
    'title':'Gotta catch em all', 
 
    'img':'http://i.imgur.com/tmgWXUP.jpg', 
 
    'content':'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua' 
 
    }, 
 
    { 
 
    'title':'Trumpers trumping Trump', 
 
    'img':'http://i.imgur.com/C7z53mE.gif', 
 
    'content':'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua' 
 
    }, 
 
    { 
 
    'title':'Aint no hacker', 
 
    'img':'http://i.imgur.com/vQGnFD4.jpg', 
 
    'content':'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua' 
 
    } 
 
]

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="row cards-container"> 
 
    <!-- inject cards here --> 
 
</div> 
 

 
<div class="card-template hide"> 
 
    <div class="col-xs-3"> 
 
    <h2>card_title</h2> 
 
    <img src="card_image" class="img-responsive"> 
 
    <p>card_content</p> 
 
    </div> 
 
</div>

Sie könnten auch versuchen, es mit Vanille js zu tun, aber es ist an Ihnen.

Answer 2

$(document).ready(function(){ 
 
    var template = $(".card-template").html(); //get the card template html 
 
    $.each(foo, function(idx, val){ //iterate over the json object 
 
    var newCard = template.replace('card_title',val.title).replace('card_image',val.img).replace('card_content',val.content); //make a copy of the template and replace the placeholders with the real data 
 
    $(".cards-container").append(newCard); //append the card to the container row 
 
    }); 
 
        
 
    }); 
 

 

 
var foo = [ 
 
    { 
 
    'title':'Gotta catch em all', 
 
    'img':'http://i.imgur.com/tmgWXUP.jpg', 
 
    'content':'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua' 
 
    }, 
 
    { 
 
    'title':'Trumpers trumping Trump', 
 
    'img':'http://i.imgur.com/C7z53mE.gif', 
 
    'content':'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua' 
 
    }, 
 
    { 
 
    'title':'Aint no hacker', 
 
    'img':'http://i.imgur.com/vQGnFD4.jpg', 
 
    'content':'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua' 
 
    } 
 
]

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="row cards-container"> 
 
    <!-- inject cards here --> 
 
</div> 
 

 
<div class="card-template hide"> 
 
    <div class="col-xs-3"> 
 
    <h2>card_title</h2> 
 
    <img src="card_image" class="img-responsive"> 
 
    <p>card_content</p> 
 
    </div> 
 
</div>