iT邦幫忙

2021 iThome 鐵人賽

DAY 13
0
自我挑戰組

Line Bot 以python及Django建構系列 第 13

DAY13 樣板完成_程式碼

  • 分享至 

  • xImage
  •  
from linebot.models.responses import Content
import requests
from abc import ABC, abstractmethod
from linebot.models import TemplateSendMessage, ButtonsTemplate, PostbackAction, MessageAction, URIAction, CarouselColumn, CarouselTemplate, PostbackTemplateAction, FlexSendMessage
from bs4 import BeautifulSoup

class Message(ABC):
    def __init__(self):
        pass

    @abstractmethod
    def content(self):
        pass

# 「功能列表」按鈕樣板訊息
class Featuresmodel():
    def content(self):
        flex_message = FlexSendMessage(
            alt_text='hello',
            contents={
                "type": "bubble",
                "header": {
                    "type": "box",
                    "layout": "vertical",
                    "contents": [
                        {
                            "type": "text",
                            "text": "功能列表",
                            "size": "lg",
                            "color": "#ffffff"
                        }
                    ],
                    "backgroundColor": "#0066ff"
                },
                "body": {
                    "type": "box",
                    "layout": "vertical",
                    "contents": [
                        {
                            "type": "button",
                            "action": {
                                "type": "postback",
                                "label": "註冊",
                                "data": "註冊",
                            },
                            "margin": "sm",
                            "color": "#0066ff",
                            "style": "primary"
                        },
                        {
                            "type": "button",
                            "action": {
                                "type": "postback",
                                "label": "簽到",
                                "data": "簽到",
                            },
                            "color": "#0066ff",
                            "style": "primary",
                            "margin": "sm"
                        },
                        {
                            "type": "button",
                            "action": {
                                "type": "postback",
                                "label": "專案進度",
                                "data": "專案進度",
                            },
                            "color": "#0066ff",
                            "margin": "sm",
                            "style": "primary"
                        },
                        {
                            "type": "button",
                            "action": {
                                "type": "postback",
                                "label": "本日尚未簽到",
                                "data": "本日尚未簽到"
                            },
                            "color": "#0066ff",
                            "style": "primary",
                            "margin": "sm"
                        },
                        {
                            "type": "button",
                            "action": {
                                "type": "postback",
                                "label": "時刻表",
                                "data": "時刻表"
                            },
                            "color": "#0066ff",
                            "style": "primary",
                            "margin": "sm"
                        }
                    ]
                }
            }

        )

        return flex_message

第一個參數"type": "bubble"可以想像成我們在創造一個 FlexMessage 的框架,接下來所有的基本架構都會放在這個框架裡。當然,也不是說這四樣基本架構通通都要放進去。如果你的 FlexMessage 需要一個"header",那就放進去"header"。如果你的 FlexMessage 不需要"footer",那就不用放進去。
  有了這四個基本架構之後,就可以根據你的設計,繼續在"header"、"hero"、"body"、"footer"中放入相對應的元素。這些元素也通通都是由字典物件所組成,常用的如'box'、'image'、'text'、'separator'、'button'等等

Buttons template

  • type: 定義此 message 的屬性
  • altText: 使用者收到通知出現的字樣
  • thumbnailImageUrl: 圖片網址
  • imageAspectRatio: 圖片比例有兩種,預設為 rectangle
    • rectangle: 1.51:1
    • square: 1:1
  • imageSize: 圖片大小有兩種,預設為 cover
    • cover:圖像填充整個圖像區域。
    • contain:整個圖像顯示在圖像區域中。
  • imageBackgroundColor: 圖像的背景顏色配合 imageSize 的 contain
  • title: 標題顯示的文字
  • text: 標題內容的文字
  • defaultAction: 預設功能,簡單來說就是點擊其他不是 button 區域的時候會做什麼
  • actions: 決定下面 button 幾個以及分別的功能

今天的歌曲是 周杰倫-星晴 Starry Mood
https://www.youtube.com/watch?v=sTNJsIcPSvE&list=PLFl6Na2uUoOZBEhBtQ_jeGA4P1V20JvpW&index=12&ab_channel=%E5%91%A8%E6%9D%B0%E5%80%ABJayChou


上一篇
DAY12 如何使用樣板
下一篇
DAY14 呼叫功能列表樣板
系列文
Line Bot 以python及Django建構30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言