index.html template

<title><?=datam[1]?> | 中央社 CNA NEWS</title>
...
<meta property="og:image" content="http://www.cna.com.tw/project/cards/<?=datam[0]?><?=datam[3]?>" />
<meta property="og:title" content="<?=datam[1]?> | 中央社" />
<meta property="og:url" content="http://www.cna.com.tw/project/cards/<?=datam[0]?>/index.html"/>
...
<div class="row headerRow" style="background-color:<?=datac[0]?>; color:<?=datac[2]?>;">
...
<h1 style="color:<?=datac[1]?>"><?=datam[1]?></h1>
<p><?datam[2]?></p>
...

//因為卡片區塊都是一樣的，所以開始依數量跑迴圈
<? for (var i = 0; i < datap; i++) { ?>
  <div class="itembox">
  <div class="mediaWrap">
    
  //雖然卡片區格式一樣，但是左欄因為放影片、內嵌fb、一般照片，需要讀入不同的html，所以寫判斷：
  <? if (data[6*i+1]!=""){ ?>  //如果一組內容的第二格不是空白的話，代表有影片，要出video tag
    <video class="video-js vjs-default-skin" controls="" preload="none" poster="<?=data[6*i]?>">
      <source src="<?=data[6*i+1]?>" type="video/mp4" />
      <source src="<?=data[6*i+2]?>" type="video/ogg" />
      <p>您的瀏覽器不支援播放此影片，請試試影片下載<a href="<?=data[6*i+1]?>">下載點</a></p>
    </video>
    </div>
  <? } else if (data[6*i].indexOf("iframe") < 0)  { ?>  //如果一組內容的第一格中沒有iframe的話，要出img tag
    <div><img src="<?=data[6*i]?>"></div>
    </div>
  <? } else {?>
    <div><?=data[6*i]?></div>
  <? } ?>
  
  //右欄文字說明
  <div class="textWrap">
  <h2 class="clamp-Title"><?=data[6*i+3]?></h2>
  <p class="clamp-Txt"><?=data[6*i+4]?></p>
  </div>
  
  //判斷有沒有延伸閱讀連結：
  <? if (data[6*i+5]!=""){ ?>
    <a class="more" href="<?=data[6*i+5]?>" target="_blank">延伸閱讀<i class="mdi mdi-open-in-new"></i></a>
  <? } else  { ?>
  <? } ?>
  </div>
<? } ?>