填充内容不带角的模板

Question

我有一个功能齐全的HTML5新闻卡原型，我需要填充大约50张具有独特内容的卡片。我正在寻求一种更有效的方法来向每一张卡片添加内容，而不是从Excel电子表格中复制、切割和粘贴内容。电子表格的列包含每个卡片的新闻类别、日期、标题和外部URL。我也刚刚被要求包括的图片，从新闻文章，卡链接-我无法想象，如何可以自动。此项目使用引导带样式，数据类别属性在每个卡上的标签，是一个Laravel网站；它不包括角，胡子，把手，或模板模式。我是否可以为这些新闻卡创建一个自定义模板，而不需要安装框架或模板引擎？我可以使用数据属性吗？

下面是一张卡的HTML：

<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

所以这可能不是最好的答案，但这是我的两分钱。

1. 首先必须将Excel转换为csv，然后将其转换为json对象。我认为这样的在线转换器很容易实现：http://www.convertcsv.com/csv-to-json.htm (我自己还没试过，只是粘贴了第一个谷歌结果)。您的json对象将看起来像var foo = [{...},{...},...] (参见代码片段)。
2. 使用像card_title card_img这样的虚拟占位符创建“卡片模板”。藏起来。
3. 在js文件中，遍历json对象中的所有元素，并使用刚刚创建的模板替换所有占位符。(var newItem = myTemplate.replace('blog_title',val.blog_title)...)
4. 将得到的html片段附加到卡片容器中。

​

$(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>

​

你也可以尝试使用香草js，但这取决于你。

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>

​