Message.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" href="">

  <title>FCF</title>

  <!-- Bootstrap core CSS -->
  <link href="dist/css/bootstrap.min.css" rel="stylesheet">

  <!-- Custom styles for this template -->
  <link href="offcanvas.css" rel="stylesheet">
</head>

<body>

  <nav class="navbar navbar-expand-md fixed-top navbar-inverse bg-inverse">
    <a class="navbar-brand" href="index.html">FCF (Flow-based Chatbot Framework)</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault"
      aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
        </li>
      </ul>
    </div>
  </nav>

  <div class="container">

    <div class="row row-offcanvas row-offcanvas-right">

      <div class="col-12 col-md-9">
        <p class="float-right d-md-none">
          <button type="button" class="btn btn-primary btn-sm" data-toggle="offcanvas">Toggle nav</button>
        </p>
        <div class="jumbotron">
          <h1>Message</h1>
          <p>用來傳送訊息至通訊平台，目前包含二種 Node：Message、Button</p>
        </div>
        <div class="row">
          <div>
            <h2>Message</h2>
            <p>用來傳送純文字訊息</p>
            <h2>Button</h2>
            <p>用來傳送可點選的按鈕形式訊息</p><hr>
            <h2>使用範例</h2>
            <img src="img/01.png" />
            <p>Message Node 內部可以設定傳送的訊息，再藉由 Facebook Out Node 送出至 Facebook 通訊平台</p>
            <img src="img/02.png" />
            <p>Message Node 可將上一個 Node 傳來的 payload 資料藉由 Message Node 轉成文字訊息。如上圖所示，Push Service Node 回傳的資料會存入 payload 裡，Message Node 不需再做任何設定，即可將 Push Service Node 回傳的資料藉由 Facebook Notification Node 送出至 Facebook 通訊平台</p>
            <img src="img/03.png" />
            <p>Button Node 跟 Message Node 類似，在內部設定多組選項，再藉由 Facebook Out Node 送出至 Facebook 通訊平台供使用者點選回覆</p>
          </div>
        </div>
        <!--/row-->
      </div>
      <!--/span-->

      <div class="col-6 col-md-3 sidebar-offcanvas" id="sidebar">
        <div class="list-group">
          <a href="index.html" class="list-group-item">IM Bridge</a>
          <a href="Message.html" class="list-group-item active">Message</a>
          <a href="Dispatcher.html" class="list-group-item">Dispatcher</a>
          <a href="Keyword_Extraction.html" class="list-group-item">Keyword Extraction</a>
          <a href="Data_Collection.html" class="list-group-item">Data Collection</a>
          <a href="Frame.html" class="list-group-item">Frame</a>
          <a href="Service_Bridge.html" class="list-group-item">Service Bridge</a>
        </div>
      </div>
      <!--/span-->
    </div>
    <!--/row-->

    <hr>

    <footer>
      <p>&copy; 2017</p>
    </footer>

  </div>
  <!--/.container-->


  <!-- Bootstrap core JavaScript
    ================================================== -->
  <!-- Placed at the end of the document so the pages load faster -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    crossorigin="anonymous"></script>
  <script>
    window.jQuery || document.write('<script src="assets/js/vendor/jquery.min.js"><\/script>')
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.9.4/umd/popper.min.js" integrity="sha256-KTKnuJPRS70XKLm+ka+irprJFaz/MLZQKHIID7ECCmw="
    crossorigin="anonymous"></script>
  <script src="dist/js/bootstrap.min.js"></script>
  <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
  <script src="assets/js/ie10-viewport-bug-workaround.js"></script>
  <script src="offcanvas.js"></script>
</body>

</html>