update js

backstage/static/js/yo.js

@@ -111,7 +111,7 @@ function toggleDisplay(obj, url) {
     const content = _.get(data, "0.content", "");
     blocks = parseMd(aa);
     editTarget = url;
-    
+
     $("#cdisplay").removeAttr("checked");
     $("#cdisplay").prop("checked", obj.checked);
     updateHeader();
@@ -260,7 +260,7 @@ function writeMd() {
 
             axios
               .post(contentApiUrl + editTarget, (json = postData))
-              .then(({ data }) => {});
+              .then(({ data }) => { });
           })
           .finally(() => {
             alert("資料已更新"); // test
@@ -279,7 +279,7 @@ function writeMd() {
               mdContent = mdContent.replace(
                 $("#cfile").val(),
                 "/img/title/" +
-                  data.file.url.substring(data.file.url.lastIndexOf("/") + 1)
+                data.file.url.substring(data.file.url.lastIndexOf("/") + 1)
               );
             }
 
@@ -290,7 +290,7 @@ function writeMd() {
 
             axios
               .post(contentApiUrl + editTarget, (json = postData))
-              .then(({ data }) => {});
+              .then(({ data }) => { });
           })
           .finally(() => {
             alert("資料已更新"); // test
@@ -434,18 +434,15 @@ function parseMd(content) {
 
       if (line.includes("readmore_ttl: ")) {
         var titles = line.replace("readmore_ttl: ", "").replaceAll('[', "").replaceAll(']', "").replaceAll('"', "").split(",");
-
-        try
-        {
+        try {
           var inserted = 0;
-          $("#data00").val(titles[0]); inserted = 1; 
+          $("#data00").val(titles[0]); inserted = 1;
           $("#data10").val(titles[1]); inserted = 2;
           $("#data20").val(titles[2]); inserted = 3;
           $("#data30").val(titles[3]); inserted = 4;
           $("#data40").val(titles[4]); inserted = 5;
         }
-        catch(err)
-        {
+        catch (err) {
           console.log("Less than 5 articles");
         }
         console.log("Total articles inserted: " + inserted);
@@ -454,17 +451,15 @@ function parseMd(content) {
       if (line.includes("readmore_lnk: ")) {
         var links = line.replace("readmore_lnk: ", "").replaceAll('[', "").replaceAll(']', "").replaceAll('"', "").split(",");
 
-        try
-        {
+        try {
           var inserted = 0;
-          $("#data01").val(links[0]); inserted = 1; 
+          $("#data01").val(links[0]); inserted = 1;
           $("#data11").val(links[1]); inserted = 2;
           $("#data21").val(links[2]); inserted = 3;
           $("#data31").val(links[3]); inserted = 4;
           $("#data41").val(links[4]); inserted = 5;
         }
-        catch(err)
-        {
+        catch (err) {
           console.log("Less than 5 links");
         }
         console.log("Total links inserted: " + inserted);
@@ -620,14 +615,14 @@ function parseMd(content) {
       line = line.replaceAll("#", "");
       rblocks.push({ type: "header1", text: line });
       continue;
-    } 
+    }
 
     if ((line.match(/#/g) || []).length === 2) {
       line = line.replaceAll("##", "");
       rblocks.push({ type: "title", text: line });
       continue;
-    } 
-    
+    }
+
     if ((line.match(/#/g) || []).length === 3) {
       line = line.replaceAll("###", "");
       rblocks.push({ type: "header3", text: line });
@@ -851,34 +846,60 @@ function GetMdHeader(result = []) {
       'introduction: "' +
       $("#cintroduction").val().replace(/\r?\n/g, "<br>") +
       '"\n';
-      rContent += 'question_box_intro: "' + $("#cquestionboxintro").val() + '"\n';
-      // rContent += 'blog_tag: [' + $("#cblogtags").val() + ']\n';
-      if ($("#cblogtags").val()) {
-        let tagVal= $("#cblogtags").val();
-        rContent += 'blog_tag: [' + tagVal.replaceAll("，", ",") + ']\n';
-      }
-    axios.get('/backstage/edit_blog_editfurther?data01=' + $('#data01').val() + '&data11=' + $('#data11').val() + '&data21=' + $('#data21').val() + '&data31=' + $('#data31').val() + '&data41=' + $('#data41').val()).then(({data}) => {
-      console.log(data);
-      $('#data00').val(data.data[0][0]);
-      $('#data10').val(data.data[1][0]);
-      $('#data20').val(data.data[2][0]);
-      $('#data30').val(data.data[3][0]);
-      $('#data40').val(data.data[4][0]);
-      $('#data01').val(data.data[0][1]);
-      $('#data11').val(data.data[1][1]);
-      $('#data21').val(data.data[2][1]);
-      $('#data31').val(data.data[3][1]);
-      $('#data41').val(data.data[4][1]);
-    });
-    console.log($('#data00').val());
+    rContent += 'question_box_intro: "' + $("#cquestionboxintro").val() + '"\n';
+    // rContent += 'blog_tag: [' + $("#cblogtags").val() + ']\n';
+    if ($("#cblogtags").val()) {
+      let tagVal = $("#cblogtags").val();
+      rContent += 'blog_tag: [' + tagVal.replaceAll("，", ",") + ']\n';
+    }
+
     rContent += 'readmore_ttl: ["' + $('#data00').val() + '","' + $('#data10').val() + '","' + $('#data20').val() + '","' + $('#data30').val() + '","' + $('#data40').val() + '"]\n';
     rContent += 'readmore_lnk: ["' + $('#data01').val() + '","' + $('#data11').val() + '","' + $('#data21').val() + '","' + $('#data31').val() + '","' + $('#data41').val() + '"]\n';
-   }
+
+    // axios.get('/backstage/edit_blog_editfurther?data01=' + $('#data01').val() + '&data11=' + $('#data11').val() + '&data21=' + $('#data21').val() + '&data31=' + $('#data31').val() + '&data41=' + $('#data41').val()).then(({ data }) => {
+    //   console.log(data);
+    //   $('#data00').val(data.data[0][0]);
+    //   $('#data10').val(data.data[1][0]);
+    //   $('#data20').val(data.data[2][0]);
+    //   $('#data30').val(data.data[3][0]);
+    //   $('#data40').val(data.data[4][0]);
+    //   $('#data01').val(data.data[0][1]);
+    //   $('#data11').val(data.data[1][1]);
+    //   $('#data21').val(data.data[2][1]);
+    //   $('#data31').val(data.data[3][1]);
+    //   $('#data41').val(data.data[4][1]);
+
+    //   console.log($('#data00').val());
+    //   rContent += 'readmore_ttl: ["' + $('#data00').val() + '","' + $('#data10').val() + '","' + $('#data20').val() + '","' + $('#data30').val() + '","' + $('#data40').val() + '"]\n';
+    //   rContent += 'readmore_lnk: ["' + $('#data01').val() + '","' + $('#data11').val() + '","' + $('#data21').val() + '","' + $('#data31').val() + '","' + $('#data41').val() + '"]\n';
+    //   console.log("rContent", rContent);
+    // });
+  }
   rContent += "---\n";
   console.log("rContent", rContent);
   return rContent;
 }
 
+function loadArticleName() {
+  $("#load-btn").text("載入中請稍後…");
+
+  axios.get('/backstage/edit_blog_editfurther?data01=' + $('#data01').val() + '&data11=' + $('#data11').val() + '&data21=' + $('#data21').val() + '&data31=' + $('#data31').val() + '&data41=' + $('#data41').val()).then(({ data }) => {
+    console.log(data);
+    $('#data00').val(data.data[0][0]);
+    $('#data10').val(data.data[1][0]);
+    $('#data20').val(data.data[2][0]);
+    $('#data30').val(data.data[3][0]);
+    $('#data40').val(data.data[4][0]);
+    $('#data01').val(data.data[0][1]);
+    $('#data11').val(data.data[1][1]);
+    $('#data21').val(data.data[2][1]);
+    $('#data31').val(data.data[3][1]);
+    $('#data41').val(data.data[4][1]);
+  }).finally(() => {
+    $("#load-btn").text("更新清單");
+  });
+}
+
 const parseTitle = (line) => {
   var title = "";
   title = line.replace("### **", "");
@@ -979,20 +1000,20 @@ function ParseProductSection(inContent) {
         tmpsrc = ampimg.substr(
           ampimg.indexOf('src="') + 5,
           ampimg.indexOf('"', ampimg.indexOf('src="') + 5) -
-            ampimg.indexOf('src="') -
-            5
+          ampimg.indexOf('src="') -
+          5
         );
         tmpw = ampimg.substr(
           ampimg.indexOf('width="') + 7,
           ampimg.indexOf('"', ampimg.indexOf('width="') + 7) -
-            ampimg.indexOf('width="') -
-            7
+          ampimg.indexOf('width="') -
+          7
         );
         tmph = ampimg.substr(
           ampimg.indexOf('height="') + 8,
           ampimg.indexOf('"', ampimg.indexOf('height="') + 8) -
-            ampimg.indexOf('height="') -
-            8
+          ampimg.indexOf('height="') -
+          8
         );
         //tmph = ampimg.substr(ampimg.indexOf("width=\"") + 7, ampimg.indexOf("\"", ampimg.indexOf("width=\"") + 7) - ampimg.indexOf("width=\"") - 7);
         editorBlocks.push({
@@ -1164,20 +1185,20 @@ function ParseProductSection(inContent) {
         tmpsrc = ampimg.substr(
           ampimg.indexOf('src="') + 5,
           ampimg.indexOf('"', ampimg.indexOf('src="') + 5) -
-            ampimg.indexOf('src="') -
-            5
+          ampimg.indexOf('src="') -
+          5
         );
         tmpw = ampimg.substr(
           ampimg.indexOf('width="') + 7,
           ampimg.indexOf('"', ampimg.indexOf('width="') + 7) -
-            ampimg.indexOf('width="') -
-            7
+          ampimg.indexOf('width="') -
+          7
         );
         tmph = ampimg.substr(
           ampimg.indexOf('height="') + 8,
           ampimg.indexOf('"', ampimg.indexOf('height="') + 8) -
-            ampimg.indexOf('height="') -
-            8
+          ampimg.indexOf('height="') -
+          8
         );
         //tmph = ampimg.substr(ampimg.indexOf("width=\"") + 7, ampimg.indexOf("\"", ampimg.indexOf("width=\"") + 7) - ampimg.indexOf("width=\"") - 7);
         editorBlocks1.push({
@@ -1295,45 +1316,45 @@ function GenProductSection(mimg, specimg) {
     tmpstr = tmpstr.replaceAll(
       "##swfPrice##",
       "<div class='me-3 my-2 d-flex'><div class='tw-15 fw-bold'>定價</div>" +
-        "<div class='pdprice tw-85'>" +
-        $("#swfPrice").val() +
-        "</div></div>"
+      "<div class='pdprice tw-85'>" +
+      $("#swfPrice").val() +
+      "</div></div>"
     );
   else tmpstr = tmpstr.replaceAll("##swfPrice##", "<span></span>");
   if ($("#swfColor").val() != "")
     tmpstr = tmpstr.replaceAll(
       "##swfColor##",
       "<div class='my-2 d-flex'><div class='tw-15 fw-bold'>顏色</div>" +
-        "<div class='pdcolor tw-85'>" +
-        $("#swfColor").val() +
-        "</div></div>"
+      "<div class='pdcolor tw-85'>" +
+      $("#swfColor").val() +
+      "</div></div>"
     );
   else tmpstr = tmpstr.replaceAll("##swfColor##", "<span></span>");
   if ($("#swfSize").val() != "")
     tmpstr = tmpstr.replaceAll(
       "##swfSize##",
       "<div class='my-2 d-flex'><div class='tw-15 fw-bold'>尺寸</div>" +
-        "<div class='pdsize tw-85'>" +
-        $("#swfSize").val() +
-        "</div></div>"
+      "<div class='pdsize tw-85'>" +
+      $("#swfSize").val() +
+      "</div></div>"
     );
   else tmpstr = tmpstr.replaceAll("##swfSize##", "<span></span>");
   if ($("#swfMat").val() != "")
     tmpstr = tmpstr.replaceAll(
       "##swfMat##",
       "<div class='my-2 d-flex'><div class='tw-15 fw-bold'>材質</div>" +
-        "<div class='pmat tw-85'>" +
-        $("#swfMat").val() +
-        "</div></div>"
+      "<div class='pmat tw-85'>" +
+      $("#swfMat").val() +
+      "</div></div>"
     );
   else tmpstr = tmpstr.replaceAll("##swfMat##", "<span></span>");
   if ($("#swfMemo").val() != "")
     tmpstr = tmpstr.replaceAll(
       "##swfMemo##",
       "<div class='my-2 d-flex'><div class='tw-15 fw-bold'>備註</div> " +
-        "<div class='pdmark tw-85'>" +
-        $("#swfMemo").val() +
-        "</div></div>"
+      "<div class='pdmark tw-85'>" +
+      $("#swfMemo").val() +
+      "</div></div>"
     );
   else tmpstr = tmpstr.replaceAll("##swfMemo##", "<span></span>");
 

backstage/templates/editor.html

@@ -4,7 +4,7 @@
   <div class="ui two column very relaxed grid">
     <!-- <div class="column column__edit"> -->
     <div class="container col-sm-12 col-md-8">
-      <button id='submit_button' class="btn__submit mb-3" onclick="editorSave()"><b>編輯完成</b></button>
+      <button id='submit_button' class="btn btn__submit mb-3" onclick="editorSave()"><b>編輯完成</b></button>
       <h3 style='display: none;' class="h3 column__h3"><i class="fas fa-user-edit mr-1 mb-2"></i> 作品編輯</h3>
       <table class="table table-bordered">
         <tbody>
@@ -101,7 +101,7 @@
       <br />
       {% block extratwo %}{% endblock %}
       <div>
-        <button id='submit_button' class="btn__submit mb-3" onclick="editorSave()"><b>編輯完成</b></button>
+        <button id='submit_button' class="btn btn__submit mb-3" onclick="editorSave()"><b>編輯完成</b></button>
       </div>
     </div>
     <!-- <div class="column column__preview">

backstage/templates/editorblog.html

@@ -19,42 +19,47 @@
   <tbody id='contactData'>
     <p class="mt-3">延伸閱讀清單</p>
     <tr>
-      <td class="pb-2">文章名稱 <span class="text-danger">（點擊編輯完成將自動帶入文章名稱）</span></td>
-      <td class="pb-2">文章連結 <span class="text-danger">（請務必填寫文章連結，否則此項文章不予載入）</span></td>
+      <td class="pb-2">文章連結</td>
+      <td class="pb-2">文章名稱</td>
     </tr>
     <tr>
+      <td class="table__data"><input class="form-control" id="data01" type="text" style="width: 420px;"
+        placeholder="文章連結" /></td>
       <td class="table__data"><input class="form-control" id="data00" type="text" style="width: 420px;"
           placeholder="文章名稱" disabled /></td>
-      <td class="table__data"><input class="form-control" id="data01" type="text" style="width: 420px;"
-          placeholder="文章連結" /></td>
     </tr>
     <tr>
+      <td class="table__data"><input class="form-control" id="data11" type="text" style="width: 420px;"
+        placeholder="文章連結" /></td>
       <td class="table__data"><input class="form-control" id="data10" type="text" style="width: 420px;"
           placeholder="文章名稱" disabled /></td>
-      <td class="table__data"><input class="form-control" id="data11" type="text" style="width: 420px;"
-          placeholder="文章連結" /></td>
     </tr>
     <tr>
+      <td class="table__data"><input class="form-control" id="data21" type="text" style="width: 420px;"
+        placeholder="文章連結" /></td>
       <td class="table__data"><input class="form-control" id="data20" type="text" style="width: 420px;"
           placeholder="文章名稱" disabled /></td>
-      <td class="table__data"><input class="form-control" id="data21" type="text" style="width: 420px;"
-          placeholder="文章連結" /></td>
     </tr>
     <tr>
+      <td class="table__data"><input class="form-control" id="data31" type="text" style="width: 420px;"
+        placeholder="文章連結" /></td>
       <td class="table__data"><input class="form-control" id="data30" type="text" style="width: 420px;"
           placeholder="文章名稱" disabled /></td>
-      <td class="table__data"><input class="form-control" id="data31" type="text" style="width: 420px;"
-          placeholder="文章連結" /></td>
     </tr>
     <tr>
+      <td class="table__data"><input class="form-control" id="data41" type="text" style="width: 420px;"
+        placeholder="文章連結" /></td>
       <td class="table__data"><input class="form-control" id="data40" type="text" style="width: 420px;"
           placeholder="文章名稱" disabled /></td>
-      <td class="table__data"><input class="form-control" id="data41" type="text" style="width: 420px;"
-          placeholder="文章連結" /></td>
     </tr>
-
   </tbody>
 </table>
+<ul class="mt-3 p-0" style="list-style: none;">
+  <li>注意事項：</li>
+  <li>1. 編輯完成後請點擊更新清單，右側欄位將自動載入文章名稱。</li>
+  <li>2. 點擊更新清單後，若文章連結欄位為空白則移除此連結。</li>
+</ul>
+<button class="btn btn-primary ml-1 mt-2 mb-5" onclick="loadArticleName()" id="load-btn">更新清單</button>
 </p>
 <!--<script>
   $(function () {