Question

我有一个功能齐全的HTML5新闻卡原型，我需要填充50张左右的独特内容卡片。我要求提供一些建议，以便更有效地向每张卡添加内容，而不是从Excel电子表格复制，剪切和粘贴。电子表格的列包含每张卡片的新闻类别，日期，标题和外部网址。我刚刚被要求包括该卡链接到的新闻文章中的图像 - 我无法想象它是如何自动化的。该项目在每张卡片的标签上使用Bootstrap样式，数据类别属性，是一个Laravel网站;它不包括Angular，Moustache，Handlebars或模板图案。有没有办法为这些新闻卡创建自定义模板而无需安装框架或模板引擎？我可以使用数据属性吗？

以下是一张卡片的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

所以这可能不是最好的答案，但这些是我的2美分。

首先，您必须将Excel工作表转换为csv，然后转换为json对象。我认为这可以通过这样的在线转换器轻松实现：http://www.convertcsv.com/csv-to-json.htm（我自己没试过，只是粘贴了第一个谷歌搜索结果）。然后，您的json对象将显示为var foo = [{...},{...},...]（请参阅snipet）
使用card_title card_img等虚拟占位符创建“卡片模板”。隐藏它。
在js文件中，遍历json对象中的所有元素，并使用刚刚创建的模板替换所有占位符。（var newItem = myTemplate.replace('blog_title',val.blog_title)...）
将生成的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>

您也可以尝试使用vanilla js，但这取决于您。

Answer 2

＆＃13;

$(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'
  }
]

＆＃13;

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

＆＃13;

使用没有Angular的内容填充模板

2 个答案: