update faq

backstage/static/js/editor.js

@@ -1,7 +1,9 @@
-const contentDiv = document.getElementById('editor_block');
-const titleButton = document.getElementById('title_button');
-const submitButton = document.getElementById('submit_button');
-contentApiUrl = `${PORTAL_SERVER}contents?url=${(JSON.parse(document.getElementById('url').textContent)).url}`
+const contentDiv = document.getElementById("editor_block");
+const titleButton = document.getElementById("title_button");
+const submitButton = document.getElementById("submit_button");
+contentApiUrl = `${PORTAL_SERVER}contents?url=${
+  JSON.parse(document.getElementById("url").textContent).url
+}`;
 
 aa = "";
 frontMatters = [];
@@ -9,12 +11,12 @@ contentMatters = [];
 editorBlocks = [];
 var editor;
 axios.get(contentApiUrl).then(({ data }) => {
-  const content = data[0]['content'];
-  var blockArray = [{ title: '', data: [] }];
+  const content = data[0]["content"];
+  var blockArray = [{ title: "", data: [] }];
   var blockCount = 0;
   blocks = parseMd(content);
   aa = new MDParser(content);
-  editor_block = document.getElementById('editor_block');
+  editor_block = document.getElementById("editor_block");
   //alert(blocks[0]['text']);
 
   //ul = document.createElement('ul');
@@ -23,76 +25,128 @@ axios.get(contentApiUrl).then(({ data }) => {
     //li = document.createElement('li');
     //odiv = document.createElement('div');
     //odiv.style.border = 'inset 1px gray';
-    if (blocks[i]['type'] == "para") {
-      editorBlocks.push({ type: "paragraph", data: { text: blocks[i]['text'] } });
+    if (blocks[i]["type"] == "para") {
+      editorBlocks.push({
+        type: "paragraph",
+        data: { text: blocks[i]["text"] },
+      });
       //tmp = document.createElement('textarea');
       //tmp.style.border = 'outset 5px pink';
       //tmp.style.width = '100%';
       //tmp.value = blocks[i]['text'];
       //odiv.appendChild(tmp);
-    }
-    else if (blocks[i]['type'] == "br") {
+    } else if (blocks[i]["type"] == "br") {
       editorBlocks.push({ type: "paragraph", data: { text: "" } });
       //tmp = document.createElement('br');
       //odiv.appendChild(tmp);
-    }
-    else if (blocks[i]['type'] == "img") {
-      ampimg = blocks[i]['text'];
+    } else if (blocks[i]["type"] == "img") {
+      ampimg = blocks[i]["text"];
       //alert(ampimg.indexOf("width=\"",84));
       //alert(ampimg.substr(ampimg.indexOf("alt=\"") + 5, ampimg.indexOf("\"", ampimg.indexOf("alt=\"") + 5) - ampimg.indexOf("alt=\"") - 5));
-      tmpsrc = BHOUSE_SERVER + JSON.parse(document.getElementById('url').textContent).url + '/' + ampimg.substr(ampimg.indexOf("src=\"") + 5, ampimg.indexOf("\"", ampimg.indexOf("src=\"") + 5) - ampimg.indexOf("src=\"") - 5);
+      tmpsrc =
+        BHOUSE_SERVER +
+        JSON.parse(document.getElementById("url").textContent).url +
+        "/" +
+        ampimg.substr(
+          ampimg.indexOf('src="') + 5,
+          ampimg.indexOf('"', ampimg.indexOf('src="') + 5) -
+            ampimg.indexOf('src="') -
+            5
+        );
       //tmpsrc = BHOUSE_SERVER + JSON.parse(document.getElementById('url').textContent).url + '/' + ampimg.substr(ampimg.indexOf("src=\"") + 5, ampimg.lastIndexOf(".") - ampimg.indexOf("src=\"") -1);
       //tmpsrc = ampimg.substr(ampimg.indexOf("src=\"") + 5, ampimg.indexOf(".webp") - ampimg.indexOf("src=\""));
       editorBlocks.push({
-        type: "image", data: {
+        type: "image",
+        data: {
           file: {
             url: tmpsrc,
-            width: parseInt(ampimg.substr(ampimg.indexOf("width=\"") + 7, ampimg.indexOf("\"", ampimg.indexOf("width=\"") + 7) - ampimg.indexOf("width=\"") - 7)),
-            height: parseInt(ampimg.substr(ampimg.indexOf("height=\"") + 8, ampimg.indexOf("\"", ampimg.indexOf("height=\"") + 8) - ampimg.indexOf("height=\"") - 8)),
+            width: parseInt(
+              ampimg.substr(
+                ampimg.indexOf('width="') + 7,
+                ampimg.indexOf('"', ampimg.indexOf('width="') + 7) -
+                  ampimg.indexOf('width="') -
+                  7
+              )
+            ),
+            height: parseInt(
+              ampimg.substr(
+                ampimg.indexOf('height="') + 8,
+                ampimg.indexOf('"', ampimg.indexOf('height="') + 8) -
+                  ampimg.indexOf('height="') -
+                  8
+              )
+            ),
           },
-          caption: ampimg.substr(ampimg.indexOf("alt=\"") + 5, ampimg.indexOf("\"", ampimg.indexOf("alt=\"") + 5) - ampimg.indexOf("alt=\"") - 5).toString(),
+          caption: ampimg
+            .substr(
+              ampimg.indexOf('alt="') + 5,
+              ampimg.indexOf('"', ampimg.indexOf('alt="') + 5) -
+                ampimg.indexOf('alt="') -
+                5
+            )
+            .toString(),
           stretched: false,
           withBorder: true,
           withBackground: false,
-        }
+        },
       });
       //alert(ampimg.substr(ampimg.indexOf("height=\"") + 8, ampimg.indexOf("\"", ampimg.indexOf("height=\"") + 8) - ampimg.indexOf("height=\"") - 8));
       //img = document.createElement('img');
       //img.style.width = '100%';
       //img.src = tmpsrc;
       //odiv.appendChild(img);
-    }
-    else if (blocks[i]['type'] == "youtube") {
-      ampimg = blocks[i]['text'];
-      vid = ampimg.substr(ampimg.indexOf("data-videoid=\"") + 14, ampimg.indexOf("\"", ampimg.indexOf("data-videoid=\"") + 14) - ampimg.indexOf("data-videoid=\"") - 14)
+    } else if (blocks[i]["type"] == "youtube") {
+      ampimg = blocks[i]["text"];
+      vid = ampimg.substr(
+        ampimg.indexOf('data-videoid="') + 14,
+        ampimg.indexOf('"', ampimg.indexOf('data-videoid="') + 14) -
+          ampimg.indexOf('data-videoid="') -
+          14
+      );
       editorBlocks.push({
-        type: "embed", data: {
-          service: 'youtube',
-          source: 'https://www.youtube.com/watch?' + vid,
-          embed: 'https://www.youtube.com/embed/' + vid,
-          width: parseInt(ampimg.substr(ampimg.indexOf("width=\"") + 7, ampimg.indexOf("\"", ampimg.indexOf("width=\"") + 7) - ampimg.indexOf("width=\"") - 7)),
-          height: parseInt(ampimg.substr(ampimg.indexOf("height=\"") + 8, ampimg.indexOf("\"", ampimg.indexOf("height=\"") + 8) - ampimg.indexOf("height=\"") - 8)),
-        }
+        type: "embed",
+        data: {
+          service: "youtube",
+          source: "https://www.youtube.com/watch?" + vid,
+          embed: "https://www.youtube.com/embed/" + vid,
+          width: parseInt(
+            ampimg.substr(
+              ampimg.indexOf('width="') + 7,
+              ampimg.indexOf('"', ampimg.indexOf('width="') + 7) -
+                ampimg.indexOf('width="') -
+                7
+            )
+          ),
+          height: parseInt(
+            ampimg.substr(
+              ampimg.indexOf('height="') + 8,
+              ampimg.indexOf('"', ampimg.indexOf('height="') + 8) -
+                ampimg.indexOf('height="') -
+                8
+            )
+          ),
+        },
       });
-    }
-    else if (blocks[i]['type'] == "title") {
-      blocks[i]['text'] = blocks[i]['text'].replace("### **", "").replace("**", "")
-      editorBlocks.push({ type: "header", data: { text: blocks[i]['text'] } });
+    } else if (blocks[i]["type"] == "title") {
+      blocks[i]["text"] = blocks[i]["text"]
+        .replace("### **", "")
+        .replace("**", "");
+      editorBlocks.push({ type: "header", data: { text: blocks[i]["text"] } });
       //tmp = document.createElement('h3');
       //tmp.innerHTML = blocks[i]['text'];
       //odiv.appendChild(tmp);
-    }
-    else if (blocks[i]['type'] == "hr") {
+    } else if (blocks[i]["type"] == "hr") {
       //alert('yo');
       editorBlocks.push({ type: "paragraph", data: { text: "---" } });
-    }
-    else if (blocks[i]['type'] == "mt5") {
+    } else if (blocks[i]["type"] == "mt5") {
       //alert('yo');
       editorBlocks.push({ type: "delimiter", data: {} });
-    }
-    else if (blocks[i]['type'] == "table") {
+    } else if (blocks[i]["type"] == "table") {
       //alert('yo');
-      editorBlocks.push({ type: "table", data: { content: tableTextToArray(blocks[i]['text']) } });
+      editorBlocks.push({
+        type: "table",
+        data: { content: tableTextToArray(blocks[i]["text"]) },
+      });
     }
     //li.appendChild(odiv);
     //ul.appendChild(li);
@@ -100,36 +154,39 @@ axios.get(contentApiUrl).then(({ data }) => {
   //editor_block.appendChild(ul);
   //$("#sortable").sortable();
   //$("#sortable").disableSelection();
-  $("#editor_block").css({ "display": "none" });
+  $("#editor_block").css({ display: "none" });
   //alert(JSON.parse(document.getElementById('url').textContent).url);
-  $('#editorjs')[0].innerHTML = "";
+  $("#editorjs")[0].innerHTML = "";
   //alert(JSON.stringify(editorBlocks));
   editor = new EditorJS({
     readOnly: false,
-    holder: 'editorjs',
+    holder: "editorjs",
 
     tools: {
       header: {
         class: Header,
         config: {
-          placeholder: 'Header'
-        }
+          placeholder: "Header",
+        },
       },
 
       image: {
         class: ImageTool,
         config: {
           endpoints: {
-            byFile: '/backstage/upload' + JSON.parse(document.getElementById('url').textContent).url, // Your backend file uploader endpoint
-            byUrl: '/backstage/getimage' + JSON.parse(document.getElementById('url').textContent).url, // Your endpoint that provides uploading by Url
+            byFile:
+              "/backstage/upload" +
+              JSON.parse(document.getElementById("url").textContent).url, // Your backend file uploader endpoint
+            byUrl:
+              "/backstage/getimage" +
+              JSON.parse(document.getElementById("url").textContent).url, // Your endpoint that provides uploading by Url
             /* byFile: '/backstage/upload' + JSON.parse(document.getElementById('url').textContent).url.substring(JSON.parse(document.getElementById('url').textContent).url.lastIndexOf('/')), // Your backend file uploader endpoint
             byUrl: '/backstage/getimage' + JSON.parse(document.getElementById('url').textContent).url.substring(JSON.parse(document.getElementById('url').textContent).url.lastIndexOf('/')), // Your endpoint that provides uploading by Url */
             /* byFile: '/backstage/upload/' + $('#ctitle').val(), // Your backend file uploader endpoint
             byUrl: '/backstage/getimage/' + $('#ctitle').val(), // Your endpoint that provides uploading by Url */
-          }
-        }
-      }
-      ,
+          },
+        },
+      },
       // warning: {
       //   class: Warning,
       //   inlineToolbar: true,
@@ -141,16 +198,14 @@ axios.get(contentApiUrl).then(({ data }) => {
       table: Table,
       delimiter: Delimiter,
       embed: Embed,
-    }
-    ,
-    data: { blocks: editorBlocks }
-    ,
+    },
+    data: { blocks: editorBlocks },
     onReady: function () {
       //saveButton.click();
     },
     onChange: function (api, block) {
       //console.log('something changed', block);
-    }
+    },
   });
 
   /*   for (var blockData of preBlockArray) {
@@ -162,15 +217,17 @@ axios.get(contentApiUrl).then(({ data }) => {
 });
 
 function editorSave() {
-  editor.save().then((outputData) => {
-    //console.log('Article data: ', outputData);
-    //var mdContent = GetMdHeader();
-    //var mdContent = frontMatters.join('\n');
-    //console.log(mdContent);
-    //console.log(frontMatters.join('\n'));
-    //mdContent = mdContent.replace('draft: ' + (!$('#cdraft').is(':checked')), 'draft: ' + $('#cdraft').val())
-    //alert(mdContent);
-    /*
+  editor
+    .save()
+    .then((outputData) => {
+      //console.log('Article data: ', outputData);
+      //var mdContent = GetMdHeader();
+      //var mdContent = frontMatters.join('\n');
+      //console.log(mdContent);
+      //console.log(frontMatters.join('\n'));
+      //mdContent = mdContent.replace('draft: ' + (!$('#cdraft').is(':checked')), 'draft: ' + $('#cdraft').val())
+      //alert(mdContent);
+      /*
     for (var frontMatter of frontMatters) {
       mdContent += frontMatter + '\n';
     }
@@ -189,70 +246,77 @@ function editorSave() {
     mdContent += '---\n\n';
     */
 
-    //var articleinfo = frontMatters.join('\n');
-    var articleinfo = GetMdHeader();
-    var mdContent = '<div class="container-fluid blog_article p-0">\n\n';
-    //var headings = new Array();
+      //var articleinfo = frontMatters.join('\n');
+      var articleinfo = GetMdHeader();
+      var mdContent = '<div class="container-fluid blog_article p-0">\n\n';
+      //var headings = new Array();
 
-    for (i = 0; i < outputData.blocks.length; i++) {
-      var paragraphdata = ""
+      for (i = 0; i < outputData.blocks.length; i++) {
+        var paragraphdata = "";
 
-      //alert(block.type);
-      block = outputData.blocks[i];
-      if (block.type == "header") {
-        mdContent += '## ' + block.data.text + '\n';
-      }
-      else if (block.type == "paragraph") {
-        paragraphdata += block.data.text;
-        
-        if (paragraphdata != "") //make sure it's not empty
-        {
-          mdContent += paragraphdata + '\n\n';
-        }
-      }
-      else if (block.type == "hr") {
-        //alert('hr');
-        mdContent += '\n---\n';
-      }
-      else if (block.type == "image") {
-        //console.log(block.data.file.url);
-        //console.log(JSON.parse(document.getElementById('url').textContent).url);
-        iurl = block.data.file.url.split('/');
-        mdContent += '<img class="img-fluid" alt="' + block.data.caption
-        + '"\n  src="' + iurl[iurl.length - 2] + '/' + iurl[iurl.length - 1]
-        + '"\n  layout="responsive"></img>';
-        if (block.data.caption != "")
-        {
-          mdContent += '<div class="img-text">' + block.data.caption + '</div>';
+        //alert(block.type);
+        block = outputData.blocks[i];
+        if (block.type == "header") {
+          mdContent += "## " + block.data.text + "\n";
+        } else if (block.type == "paragraph") {
+          paragraphdata += block.data.text;
+
+          if (paragraphdata != "") {
+            //make sure it's not empty
+            mdContent += paragraphdata + "\n\n";
+          }
+        } else if (block.type == "hr") {
+          //alert('hr');
+          mdContent += "\n---\n";
+        } else if (block.type == "image") {
+          //console.log(block.data.file.url);
+          //console.log(JSON.parse(document.getElementById('url').textContent).url);
+          iurl = block.data.file.url.split("/");
+          mdContent +=
+            '<img class="img-fluid" alt="' +
+            block.data.caption +
+            '"\n  src="' +
+            iurl[iurl.length - 2] +
+            "/" +
+            iurl[iurl.length - 1] +
+            '"\n  layout="responsive"></img>';
+          if (block.data.caption != "") {
+            mdContent +=
+              '<div class="img-text">' + block.data.caption + "</div>";
+          }
+          mdContent += "\n\n";
+        } else if (block.type == "delimiter") {
+          mdContent += "\n---\n";
+        } else if (block.type == "embed") {
+          mdContent +=
+            "\n<iframe src=" +
+            block.data.embed.replace("https://www.youtube.com/embed/", "") +
+            'layout="responsive" width="' +
+            block.data.width +
+            '" height="' +
+            block.data.height +
+            '"></iframe>\n\n';
+        } else if (block.type == "table") {
+          //alert(tableArrayToHtml(block.data).length);
+          mdContent += "\n" + tableArrayToHtml(block.data.content) + "\n\n";
+          //console.log(tableArrayToHtml(block.data.content));
         }
-        mdContent += '\n\n';
-      }
-      else if (block.type == "delimiter") {
-        mdContent += '\n---\n';
-      }
-      else if (block.type == "embed") {
-        mdContent += '\n<iframe src=' + block.data.embed.replace('https://www.youtube.com/embed/', '') + 'layout="responsive" width="' + block.data.width + '" height="' + block.data.height + '"></iframe>\n\n';
-      }
-      else if (block.type == "table") {
-        //alert(tableArrayToHtml(block.data).length);
-        mdContent += '\n' + tableArrayToHtml(block.data.content) + '\n\n'
-        //console.log(tableArrayToHtml(block.data.content));
       }
-    }
-    //alert(mdContent);
+      //alert(mdContent);
 
-    var mdData = articleinfo + '\n\n' + mdContent;
+      var mdData = articleinfo + "\n\n" + mdContent;
 
-    postData = {
-      content: mdData,
-      url: (JSON.parse(document.getElementById('url').textContent)).url
-    };
-    axios.post(contentApiUrl, json = postData).then(({ data }) => {
-      alert('作品資料已儲存');
+      postData = {
+        content: mdData,
+        url: JSON.parse(document.getElementById("url").textContent).url,
+      };
+      axios.post(contentApiUrl, (json = postData)).then(({ data }) => {
+        alert("作品資料已儲存");
+      });
+    })
+    .catch((error) => {
+      console.log("Saving failed: ", error);
     });
-  }).catch((error) => {
-    console.log('Saving failed: ', error)
-  });
 
   /*   var mdContent = '';
     for (var frontMatter of frontMatters) {
@@ -299,6 +363,5 @@ for (var idx = 0; idx < blockArray.length; idx++) {
   }; */
 
   //axios.post(contentApiUrl, json = postData);
-
 }
-submitButton.onclick = editorSave
+submitButton.onclick = editorSave;

backstage/templates/frequently_asked_questions.html

@@ -9,288 +9,281 @@
 <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
 
 <div class="faq-content">
-    <div class="row px-0 mx-0">
-
-        <div class="col-lg-6">
-            <h1 class="h3"><i class="fas fa-pen mr-3 mb-3"></i>{{ title }}</h1>
-
-            <input id="curl" type="text" style="display: none;" />
-            <div>
-                <div>
-                    <ul id='qaData1'></ul>
-                </div>
-                <div class="text-center">
-
-                    <button style="border: none; background: none; outline: none;" onclick="addQa();"><i
-                            class="addfaq fas fa-plus-circle"></i></button>
-                </div>
+  <div class="row px-0 mx-0">
+    <div class="col-lg-6">
+      <h1 class="h3"><i class="fas fa-pen mr-3 mb-3"></i>{{ title }}</h1>
+
+      <input id="curl" type="text" style="display: none;" />
+      <div>
+        <div>
+          <ul id='qaData1'></ul>
+        </div>
+        <div class="text-center">
 
-            </div>
+          <button style="border: none; background: none; outline: none;" onclick="addQa();"><i
+              class="addfaq fas fa-plus-circle"></i></button>
         </div>
-        <div class="col-lg-6">
-
-            <div class="card faq-editor p-3">
-                <div class="text-right mb-3">
-                    <i class="close_edit_faq fas fa-times"></i>
-                </div>
-                <input type="text" class="form-control mb-3 w-100" id="input_q"
-                    placeholder="EX:小寶優居的規劃師服務和一般的室內設計有什麼不同嗎？" />
-                <div><textarea id='input_a'></textarea></div>
-                <div class="mt-4 d-flex justify-content-end">
-                    <div>
-                        <!-- <button class="btn faq-btn" onclick="addQa();">新增</button> -->
-                        <!-- <button class="btn faq-btn" onclick="saveQa();">修改項目</button> -->
-                        <button class="btn faq-btn" onclick="removeQa();">移除項目</button>
-                        <button class="btn faq-btn" onclick="writeAllQa();">完成儲存</button>
-                    </div>
-                </div>
-            </div>
+      </div>
+    </div>
+    <div class="col-lg-6">
+      <div class="card faq-editor p-3">
+        <div class="text-right mb-3">
+          <i class="close_edit_faq fas fa-times"></i>
         </div>
+        <input type="text" class="form-control mb-3 w-100" id="input_q" placeholder="EX:小寶優居的規劃師服務和一般的室內設計有什麼不同嗎？" />
+        <div><textarea id='input_a'></textarea></div>
+        <div class="mt-4 d-flex justify-content-end">
+          <div>
+            <!-- <button class="btn faq-btn" onclick="addQa();">新增</button> -->
+            <!-- <button class="btn faq-btn" onclick="saveQa();">修改項目</button> -->
+            <button class="btn faq-btn" onclick="removeQa();">移除項目</button>
+            <button class="btn faq-btn" onclick="writeAllQa();">完成儲存</button>
+          </div>
+        </div>
+      </div>
     </div>
+  </div>
 </div>
 
 
 <style>
-    .addfaq {
-        color: #ADB5BD;
-        font-size: 32px;
-        cursor: pointer;
-        transition: all 0.3s;
-
-    }
-
-    .addfaq:hover {
-        color: grey;
-
-    }
-
-    .close_edit_faq {
-        font-size: 24px;
-        cursor: pointer;
-    }
-
-    .faq-editor {
-        position: sticky !important;
-        top: 21px;
-    }
-
-    #qaData1 li {
-        vertical-align: center;
-        list-style-type: none;
-    }
-
-    ul {
-        padding-inline-start: 0px !important;
-    }
-
-    #qaData1 tr {
-        border: inset 2px
-    }
-
-    #qaData1 td {
-        vertical-align: top;
-        padding: 0.475rem 0.475rem;
-        border: 1px solid #ced4da;
-        border-radius: 0.25rem;
-        font-size: 1rem;
-        /* border-collapse: unset; */
-        cursor: pointer;
-    }
-
-    table {
-        border-collapse: unset;
-        width: 100%;
-    }
-
-    .faq-btn {
-        background-color: rgb(179, 179, 179);
-        color: white;
-        transition: all 0.3s;
-        margin-right: 5px;
-    }
-
-    .faq-btn:hover {
-        background-color: grey;
-    }
+  .addfaq {
+    color: #ADB5BD;
+    font-size: 32px;
+    cursor: pointer;
+    transition: all 0.3s;
+
+  }
+
+  .addfaq:hover {
+    color: grey;
+
+  }
+
+  .close_edit_faq {
+    font-size: 24px;
+    cursor: pointer;
+  }
+
+  .faq-editor {
+    position: sticky !important;
+    top: 21px;
+  }
+
+  #qaData1 li {
+    vertical-align: center;
+    list-style-type: none;
+  }
+
+  ul {
+    padding-inline-start: 0px !important;
+  }
+
+  #qaData1 tr {
+    border: inset 2px
+  }
+
+  #qaData1 td {
+    vertical-align: top;
+    padding: 0.475rem 0.475rem;
+    border: 1px solid #ced4da;
+    border-radius: 0.25rem;
+    font-size: 1rem;
+    /* border-collapse: unset; */
+    cursor: pointer;
+  }
+
+  table {
+    border-collapse: unset;
+    width: 100%;
+  }
+
+  .faq-btn {
+    background-color: rgb(179, 179, 179);
+    color: white;
+    transition: all 0.3s;
+    margin-right: 5px;
+  }
+
+  .faq-btn:hover {
+    background-color: grey;
+  }
 </style>
 <script>
 
-    var editor, targetItem, faqContent;
-    qa = [];
-    $(function () {
-        editor = $("#input_a").richText();
-        axios.get(contentApiUrl + '/frequently_asked_questions').then(({ data }) => {
-            parseMd(data[0]['content']);
-            //alert(contentMatters.join(''));
-            faqContent = $.parseHTML(contentMatters.join(''));
-            //處理圖片
-            if ($("[id='myAccordion']", faqContent).length > 0) {
-                fnodes = $("[id='myAccordion']", faqContent)[0].childNodes;
-                for (i = 0; i < fnodes.length; i++) {
-                    if (fnodes[i].nodeName == "SECTION") {
-                        //qa.push({ q: fnodes[i].childNodes[1].innerText.trim(), a: fnodes[i].childNodes[3].innerHTML.trim() });
-                        k = 0;
-                        for (j = 0; j < fnodes[i].childNodes.length; j++) {
-                            if (fnodes[i].childNodes[j].nodeName == "DIV") {
-                                if (k == 0) {
-                                    qa.push({ q: fnodes[i].childNodes[j].innerText.trim() });
-                                    k++;
-                                }
-                                else {
-                                    qa[qa.length - 1].a = fnodes[i].childNodes[j].innerHTML.trim();
-                                }
-                                /* if (fnodes[i].childNodes[j].className == "question") {
-                                    //alert(fnodes[i].childNodes[j].childNodes[1].nodeValue.trim());
-                                    qa.push({ q: fnodes[i].childNodes[j].childNodes[1].nodeValue.trim() });
-                                } */
-                            }
-                        }
-                    }
+  var editor, targetItem, faqContent;
+  qa = [];
+  $(function () {
+    editor = $("#input_a").richText();
+    axios.get(contentApiUrl + '/frequently_asked_questions').then(({ data }) => {
+      parseMd(data[0]['content']);
+      //alert(contentMatters.join(''));
+      faqContent = $.parseHTML(contentMatters.join(''));
+      //處理圖片
+      if ($("[id='myAccordion']", faqContent).length > 0) {
+        fnodes = $("[id='myAccordion']", faqContent)[0].childNodes;
+        for (i = 0; i < fnodes.length; i++) {
+          if (fnodes[i].nodeName == "SECTION") {
+            //qa.push({ q: fnodes[i].childNodes[1].innerText.trim(), a: fnodes[i].childNodes[3].innerHTML.trim() });
+            k = 0;
+            for (j = 0; j < fnodes[i].childNodes.length; j++) {
+              if (fnodes[i].childNodes[j].nodeName == "DIV") {
+                if (k == 0) {
+                  qa.push({ q: fnodes[i].childNodes[j].innerText.trim() });
+                  k++;
                 }
-                //alert(qa.length);
-                for (i = 0; i < qa.length; i++) {
-                    //$('#qaData').append("<tr><td>" + qa[i].q + "</td><td>" + qa[i].a + "</td></tr>");
-                    $('#qaData1').append("<li class='mb-1' data-si='" + i + "''><table><tr class='qa_q'><td>" + qa[i].q + "</td></tr><tr class='qa_a'><td>" + qa[i].a + "</td></tr></table></li>");
-
+                else {
+                  qa[qa.length - 1].a = fnodes[i].childNodes[j].innerHTML.trim();
                 }
-                $('.qa_a').hide();
-                $('.qa_q').click(setTarget);
-                /* $('.qa_q').dblclick(function () {
-                    //alert($(this).next()[0].childNodes[0].innerHTML);
-                    //$('#editorjs')[0].innerHTML = "";
-                    //$('.qa_a').hide();
-                    //$(this).next().toggle();
-                    $('.qa_q').css("background-color", "white");
-                    $(this).css("background-color", "lightpink");
-                    targetItem = $(this);
-                    $("#input_q").val($(this).children().html());
-                    $("#input_a").val($(this).next().children().html()).trigger('change');
-                    $('html, body').animate({ scrollTop: '0px' }, 300);
-                    //$("#editor")[0].outerHTML = "<textarea id='editor'></textarea>";
-                    //$("#editor").val($(this).next()[0].childNodes[0].innerHTML);
-                    //editor = $("#editor").richText();
-                    //$(this).next().append("<div id='editorjs'></div>");
-                }); */
-
-                //editor = $("textarea").richText();
-                fromIdx = 0;
-                $('#qaData1').sortable(/* {
-                    start: function (event, ui) {
-                        fromIdx = ui.item.index();
-                    },
-                    stop: function (event, ui) {
-                        //toIndex = ui.item.attr("data-si");
-                        var element = qa[fromIdx];
-                        qa.splice(fromIdx, 1);
-                        qa.splice(ui.item.index(), 0, element);
-                        //alert(fromIdx + ',' + ui.item.index());
-                    },
-                } */);
+                /* if (fnodes[i].childNodes[j].className == "question") {
+                    //alert(fnodes[i].childNodes[j].childNodes[1].nodeValue.trim());
+                    qa.push({ q: fnodes[i].childNodes[j].childNodes[1].nodeValue.trim() });
+                } */
+              }
             }
-        });
-
-    });
-    $(".faq-editor").hide();
-
-
-    function setTarget() {
-        $(".faq-editor").fadeIn();
-        $('.qa_q').css("background-color", "white");
-        $(this).css("background-color", "lightpink");
-        targetItem = $(this);
-        $("#input_q").val($(this).children().html());
-        $("#input_a").val($(this).next().children().html()).trigger('change');
-        // $('html, body').animate({ scrollTop: '0px' }, 300);
-    }
+          }
+        }
+        //alert(qa.length);
+        for (i = 0; i < qa.length; i++) {
+          //$('#qaData').append("<tr><td>" + qa[i].q + "</td><td>" + qa[i].a + "</td></tr>");
+          $('#qaData1').append("<li class='mb-1' data-si='" + i + "''><table><tr class='qa_q'><td>" + qa[i].q + "</td></tr><tr class='qa_a'><td>" + qa[i].a + "</td></tr></table></li>");
 
-    $(".close_edit_faq").click(function () {
-        $(".faq-editor").fadeOut();
+        }
+        $('.qa_a').hide();
+        $('.qa_q').click(setTarget);
+        /* $('.qa_q').dblclick(function () {
+            //alert($(this).next()[0].childNodes[0].innerHTML);
+            //$('#editorjs')[0].innerHTML = "";
+            //$('.qa_a').hide();
+            //$(this).next().toggle();
+            $('.qa_q').css("background-color", "white");
+            $(this).css("background-color", "lightpink");
+            targetItem = $(this);
+            $("#input_q").val($(this).children().html());
+            $("#input_a").val($(this).next().children().html()).trigger('change');
+            $('html, body').animate({ scrollTop: '0px' }, 300);
+            //$("#editor")[0].outerHTML = "<textarea id='editor'></textarea>";
+            //$("#editor").val($(this).next()[0].childNodes[0].innerHTML);
+            //editor = $("#editor").richText();
+            //$(this).next().append("<div id='editorjs'></div>");
+        }); */
+
+        //editor = $("textarea").richText();
+        fromIdx = 0;
+        $('#qaData1').sortable(/* {
+          start: function (event, ui) {
+              fromIdx = ui.item.index();
+          },
+          stop: function (event, ui) {
+              //toIndex = ui.item.attr("data-si");
+              var element = qa[fromIdx];
+              qa.splice(fromIdx, 1);
+              qa.splice(ui.item.index(), 0, element);
+              //alert(fromIdx + ',' + ui.item.index());
+          },
+          } */
+        );
+      }
     });
 
+  });
+  $(".faq-editor").hide();
 
+  function setTarget() {
+    $(".faq-editor").fadeIn();
+    $('.qa_q').css("background-color", "white");
+    $(this).css("background-color", "lightpink");
+    targetItem = $(this);
+    $("#input_q").val($(this).children().html());
+    $("#input_a").val($(this).next().children().html()).trigger('change');
+    // $('html, body').animate({ scrollTop: '0px' }, 300);
+  }
 
+  $(".close_edit_faq").click(function () {
+    $(".faq-editor").fadeOut();
+  });
 
+  function addQa() {
+    var a = $("ul li:last-child").find('td').text();
 
+    if (a == "") {
+      // alert('1');
+      alert("請輸入問題");
+      $("#input_q").focus();
 
+      return
+    }
 
+    $('#qaData1').append("<li data-si='" + i + "''><table><tr class='qa_q'><td></td></tr><tr class='qa_a'><td></td></tr></table></li>");
+    $('.qa_a').hide();
+    $('.qa_q').click(setTarget);
+    $(".qa_q").trigger("click");
+    $("#input_q").focus();
 
+    // QaItem.lastChild.innerHTML.triggerHandler('click');
 
+  };
 
+  function saveQa() {
+    targetItem.children().html($("#input_q").val());
+    targetItem.next().children().html($("#input_a").val());
+  };
 
-    // console.log(LastItem.lastChild.innerHTML);
-
-
-    function addQa() {
-        var a = $( "ul li:last-child" ).find('td').text();
-        console.log(a);
-  
-        if( a=="" ){
-            // alert('1');
-            alert("請輸入問題");
-            $("#input_q").focus();
-
-            return
-        }
-
-        $('#qaData1').append("<li data-si='" + i + "''><table><tr class='qa_q'><td></td></tr><tr class='qa_a'><td></td></tr></table></li>");
-        $('.qa_a').hide();
-        $('.qa_q').click(setTarget);
-        $(".qa_q").trigger("click");
-        $("#input_q").focus();
-
-        // QaItem.lastChild.innerHTML.triggerHandler('click');
-
-    };
-
-    function saveQa() {
-        targetItem.children().html($("#input_q").val());
-        targetItem.next().children().html($("#input_a").val());
-    };
-
-    function removeQa() {
-        // targetItem.parent().parent().parent().remove()
-        var r = confirm("確定要刪除此作品?");
-        if (r == true) {
-            targetItem.parent().parent().parent().remove();
-            writeAllQa();
-            $(".faq-editor").fadeOut();
-        }
-    };
+  function removeQa() {
+    // targetItem.parent().parent().parent().remove()
+    var r = confirm("確定要刪除此作品?");
+    if (r == true) {
+      targetItem.parent().parent().parent().remove();
+      writeAllQa();
+      $(".faq-editor").fadeOut();
+    }
+  };
 
 
-    function writeAllQa() {
+  function writeAllQa() {
 
-        targetItem.children().html($("#input_q").val());
-        targetItem.next().children().html($("#input_a").val());
+    targetItem.children().html($("#input_q").val());
+    targetItem.next().children().html($("#input_a").val());
 
-        if ($('#input_q').val() == "") {
-            alert("請輸入問題");
-            $("#input_q").focus();
+    if ($('#input_q').val() == "") {
+      alert("請輸入問題");
+      $("#input_q").focus();
 
-            return
-        }
+      return
+    }
 
-        qa = [];
-        for (i = 0; i < $('#qaData1 .qa_q').length; i++) {
-            qa.push({ q: $('#qaData1 .qa_q')[i].childNodes[0].innerHTML, a: $('#qaData1 .qa_a')[i].childNodes[0].innerHTML });
-        }
-        newFaqItemContent = "";
-        for (i = 0; i < qa.length; i++) {
-            newFaqItemContent += "<section><div class='question'><i class='fa fa-angle-down'></i>" + qa[i].q + "</div><div>" + qa[i].a + "</div></section>";
-        }
-        $("[id='myAccordion']", faqContent).html(newFaqItemContent);
-
-        mdContent = frontMatters.join('\n') + '\n' + faqContent[0].outerHTML
-        //alert(mdContent);
-        postData = {
-            content: mdContent,
-            url: $('#curl').val()
-        };
-        axios.post(contentApiUrl + $('#curl').val(), json = postData).then(({ data }) => {
-            alert('作品資料已儲存');
-        });
-        //alert(faqContent.outerHTML);
+    qa = [];
+    for (i = 0; i < $('#qaData1 .qa_q').length; i++) {
+      qa.push({ q: $('#qaData1 .qa_q')[i].childNodes[0].innerHTML, a: $('#qaData1 .qa_a')[i].childNodes[0].innerHTML });
+    }
+    newFaqItemContent = "";
+    for (i = 0; i < qa.length; i++) {
+      newFaqItemContent += `
+      <section class="accordion-item">
+        <div class="accordion-header" id="panelsStayOpen-${i}">
+          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+            data-bs-target="#question-${i}" aria-expanded="false" aria-controls="question-${i}">
+            <p class="pe-2 title m-0">Q${i + 1}</p> ${qa[i].q}
+          </button>
+        </div>
+        <div id="question-${i}" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-${i}">
+          <div class="accordion-body">
+            ${qa[i].a}
+          </div>
+        </div>
+      </section>`;
     }
+    $("[id='myAccordion']", faqContent).html(newFaqItemContent);
+    let mdContent = frontMatters.join('\n') + '\n' + faqContent[1].outerHTML;
+    postData = {
+      content: mdContent,
+      url: $('#curl').val()
+    };
+    axios.post(contentApiUrl + $('#curl').val(), json = postData).then(({ data }) => {
+      alert('作品資料已儲存');
+    });
+    //alert(faqContent.outerHTML);
+  }
 
 </script>
 {% endblock main %}