今日目標: 打造鐵人賽挑戰徽章產生器

鐵人賽寫了14天，習慣每次寫完後，得到當天的挑戰徽章，就分享到FB。可是不知道是不是我的Chrome相容性不好，好幾次鐵人賽分享徽章都顯示不出來，怒!

雖然可以從FB找到ithome放徽章圖片的url，就可以拿到之前的圖片。但是還要一個個序號找自己的圖片，真是!@#%，所以怒寫這篇用Polymer打造挑戰徽章產生器

第99天挑戰達成

自定HTML標籤 <itironman-card>

name: 挑戰者id

day: 挑戰天數

h1: 參賽的主題

img: 挑戰者的圖片

圖片最好是拿ithome上面avatar的圖片，會比較一致。

如下圖，連結在 [這裏]

說好的產生器呢?

連結如下，請修改成自己要的資料

http://itironman.github.io/day14/gen.html#Marty#99#你不能不知道的Polymer開發實戰#http://ithelp.ithome.com.tw/avatars/20084199.jpg

例如: 柯P後援會

<itironman-card> 元件程式碼

由於需要用到疊套圖片，所以另外引入此元件的CSS檔案，而第12行的<content></ocntent> 標籤是polymer提供用來放外部使用 <itironman-card>時的HTML資料，如圖下所述

在程式部分，userImage、descript 資料來自于外部提供，所以使用polymer提供的callback方法 created ，此方法會在polymer完成節點插入建置完成後呼叫，我們就可以透過 this 取得外部寫的HTML標籤 (h1、img)

polymer會在整個元件完成並放到dom裡面後呼叫，在這裡我們設定外部提供的鐵人照片，並將整個content內文移除 (在這個例子我們只是拿來利用取得一些資訊)

參考資料

Polymer content 用法與觀念

Polymer post-card 範例