HackMD VCard template for liff-businesscard

README.md

HackMD Line BizCard

好讀版看這裡：https://gistlog.co/Yukaii/354d3b5d46794f771689fb03737fd98b

Usage

名片頁

1. 打開均民實作的 LINE 數位名片產生器
2. 樣板填入 https://gistcdn.githack.com/Yukaii/354d3b5d46794f771689fb03737fd98b/raw/be2b14b8ffc04afeeb6a738815145b0873c76c26/hackmd.txt
3. CSV 填入 https://gistcdn.githack.com/Yukaii/354d3b5d46794f771689fb03737fd98b/raw/1cac51dc04f075bca540cedaa3b882736831d094/contacts.csv，這份 CSV 網址需要修改

按產生並複製網址即可

背面

直接在 Line 使用以下網址：

https://liff.line.me/1654437282-8ORYBGgE/?template=aHR0cHM6Ly9naXN0Y2RuLmdpdGhhY2suY29tL1l1a2FpaS8zNTRkM2I1ZDQ2Nzk0Zjc3MTY4OWZiMDM3MzdmZDk4Yi9yYXcvYjZhNzY2MGZiZmIwMjRlNmQwMDFlMDJmMzZhMjFiZTg4MTcwOTU0Ny9oYWNrbWQtYmFjay50eHQ&csv=aHR0cHM6Ly90YWljaHVubWluLmlkdi50dy9saWZmLWJ1c2luZXNzY2FyZC9jc3YvY2hhdGJvdC10dy1jb3NjdXAtMjAyMC5jc3Y&key=aWQ&value=MQ

back.png

contacts.csv

front.png

hackmd-back.txt

{
  "altText": "HackMD - Best way to share knowledge in markdown",
  "type": "flex",
  "contents": {
    "type": "bubble",
    "size": "giga",
    "body": {
      "type": "box",
      "layout": "vertical",
      "contents": [
        {
          "type": "box",
          "layout": "horizontal",
          "contents": [
            {
              "type": "filler"
            },
            {
              "type": "box",
              "layout": "vertical",
              "contents": [
                {
                  "type": "image",
                  "url": "https://rawcdn.githack.com/encharm/Font-Awesome-SVG-PNG/3cfbcdaff9818c3e2c07d755d556fe1f34d7cf0d/white/png/64/file-text.png"
                }
              ],
              "width": "50px",
              "height": "50px"
            },
            {
              "type": "filler"
            }
          ]
        },
        {
          "type": "text",
          "text": "HackMD",
          "size": "xl",
          "align": "center",
          "color": "#FFFFFF",
          "weight": "bold"
        },
        {
          "type": "text",
          "text": "Best way to share knowledge in markdown",
          "color": "#FFFFFF",
          "align": "center"
        },
        {
          "type": "separator",
          "margin": "xxl",
          "color": "#00000000"
        },
        {
          "type": "separator",
          "margin": "xxl",
          "color": "#00000000"
        },
        {
          "type": "text",
          "text": "https://hackmd.io",
          "size": "md",
          "color": "#EFEFEF",
          "align": "center",
          "weight": "bold",
          "action": {
            "type": "uri",
            "label": "HackMD",
            "uri": "https://hackmd.io"
          }
        }
      ],
      "backgroundColor": "#333333"
    }
  }
}

hackmd.txt

<%
function r4 () {
  return _.padStart(_.random(65535).toString(16), 4, '0')
}
function randomUuid () {
  return `${r4()}${r4()}-${r4()}-${r4()}-${r4()}-${r4()}${r4()}${r4()}`
}
function gaScreenView (vcard) {
  return `https://www.google-analytics.com/collect?${Qs.stringify({
    an: 'LINE 數位版名片',
    cd: `HackMD BizCard-${vcard.name}`, // 畫面名稱，在此用來紀錄數位版名片的版本
    cid: randomUuid(), // uuid
    ds: 'app', // 資料來源，填寫為 app
    t: 'screenview',
    tid: 'UA-174157857-1', // GA 追蹤代碼
    ul: 'zh-tw', // locale
    v: 1, // api version
  })}`
}
function escapeStr (str) {
  if (!_.isString(str)) return str
  return JSON.stringify(str).slice(1, -1)
}
%>

{
  "altText": "我是 HackMD 的 ${vcard.title} - ${vcard.name} (${vcard.chineseName})，很高興認識你！",
  "type": "flex",
  "contents": {
    "type": "bubble",
    "size": "giga",
    "body": {
      "layout": "vertical",
      "type": "box",
      "contents": [
        {
          "layout": "horizontal",
          "spacing": "md",
          "type": "box",
          "action": {
            "label": "${vcard.name}",
            "type": "uri",
            "uri": "${vcard.profileLink}?openExternalBrowser=1"
          },
          "contents": [
            {
              "flex": 0,
              "size": "xl",
              "text": "${vcard.name}",
              "type": "text",
              "weight": "bold"
            },
            {
              "color": "#333333",
              "gravity": "bottom",
              "size": "lg",
              "text": "${vcard.chineseName}",
              "type": "text",
              "weight": "bold"
            }
          ]
        },
        {
          "color": "#888888",
          "margin": "none",
          "text": "${vcard.title}",
          "type": "text",
          "weight": "bold",
          "action": {
            "type": "uri",
            "label": "${vcard.name}",
            "uri": "${vcard.profileLink}?openExternalBrowser=1"
          }
        },
        {
          "color": "#333333",
          "margin": "lg",
          "text": "${vcard.email}",
          "type": "text",
          "weight": "bold",
          "action": {
            "label": "email",
            "type": "uri",
            "uri": "mailto:${vcard.email}"
          }
        },
        {
          "layout": "vertical",
          "paddingTop": "80px",
          "spacing": "none",
          "type": "box",
          "action": {
            "label": "action",
            "type": "uri",
            "uri": "https://hackmd.io?openExternalBrowser=1"
          },
          "contents": [
            {
              "layout": "horizontal",
              "spacing": "sm",
              "type": "box",
              "contents": [
                {
                  "flex": 1,
                  "layout": "vertical",
                  "type": "box",
                  "contents": [
                    {
                      "type": "filler"
                    }
                  ]
                },
                {
                  "height": "18px",
                  "layout": "vertical",
                  "type": "box",
                  "width": "18px",
                  "contents": [
                    {
                      "aspectMode": "cover",
                      "type": "image",
                      "url": "https://rawcdn.githack.com/encharm/Font-Awesome-SVG-PNG/3cfbcdaff9818c3e2c07d755d556fe1f34d7cf0d/black/png/64/file-text.png",
                      "size": "xl",
                      "aspectRatio": "1:1"
                    }
                  ]
                },
                {
                  "align": "end",
                  "flex": 0,
                  "gravity": "center",
                  "style": "normal",
                  "text": "HackMD",
                  "type": "text",
                  "weight": "bold"
                }
              ]
            },
            {
              "align": "end",
              "color": "#555555",
              "text": "https://hackmd.io",
              "type": "text",
              "weight": "bold"
            },
            {	
              "height": "1px",	
              "layout": "vertical",	
              "offsetStart": "0px",	
              "offsetTop": "0px",	
              "position": "absolute",	
              "type": "box",	
              "width": "1px",	
              "contents": [	
                {	
                  "align": "center",	
                  "aspectMode": "cover",	
                  "aspectRatio": "1:1",	
                  "gravity": "center",	
                  "size": "full",	
                  "type": "image",	
                  "url": "${gaScreenView(vcard)}"	
                }	
              ]	
            }            
          ]
        }
      ]
    }
  }
}