New-Bhouse-Web/layouts/blog/single.html

{{ define "main" }}
<div class="container-fluid blog_article p-0">
  <section class="bhouseweb_loc_banner">
    <img src="/img/banner/bn_blog@2x.webp" class="banner-img card-img" alt="...">
  </section>
  <div class="content">

    <h1>{{ .Title }}</h1>
    <div class="d-flex justify-content-between align-items-center">
      <span>{{ .PublishDate.Format "2006-01-02" }}</span>
      <div class="icon-box">
        <!-- 網址動態載入 -->
        <a href="" id="collection_icon_fb" target="_blank"><img src="/img/icon_fb@2x.png" alt=""></a>
        <a href="" id="collection_icon_line" target="_blank"><img src="/img/icon_line@2x.png" alt=""></a>
      </div>
    </div>
    <span class="line"></span>
    <p>{{ .Params.introduction | safeHTML }}</p>
    <br>
    <div class="question-box">
      <div>
        <p>
          本文目錄
          <!-- {{ .Params.question_box_intro }} -->
        </p>
        {{ .TableOfContents }}
      </div>
    </div>

    <div class="blog-content">
      {{ .Content }}
    </div>

    <div class="d-flex justify-content-between link-box">
      <div class="d-flex flex-wrap align-items-center link-list">
        <p class="m-0">相關標籤：</p>
        <span>
          {{ range .Params.blog_tag }}
          <a href="/blog?tags={{ . }}">{{ . }}</a>
        </span>
        {{ end }}
      </div>
      <div class="icon-box">
        <a href="" id="collection_icon_fb" target="_blank"><img src="/img/icon_fb@2x.png" alt=""></a>
        <a href="" id="collection_icon_line" target="_blank"><img src="/img/icon_line@2x.png" alt=""></a>
      </div>
    </div>

    <a class="nav-link" onclick="previousPage()">
      <p class="readMore text-center">
        <span style="font-size: 18px;" class="fw-normal me-2">&lt;</span>回到成家知識庫
      </p>
    </a>

    <ul class="read-more-list"></ul>

    <!-- <ul class="read-more-list">
        <li>你可能會喜歡的，延伸閱讀點擊標題，看更多設計專欄！</li>
        <li><a href="">【居家風格】 60萬以下 ↓ 超有氛圍的成家夢想</a></li>
        <li><a href="">【認識裝潢裝修】 模組系統櫃板材等級挑選5攻略</a></li>
        <li><a href="">【認識裝潢裝修】 11-20坪 小坪數裝潢裝修，規劃師教你小宅打造大空間</a></li>
        <li><a href="">【認識裝潢裝修】 什麼是輕裝修？輕裝修的定義是什麼？輕裝修包含什麼呢？</a></li>
        <li><a href="">【規劃師服務】 什麼是規劃師？連室內設計師都推薦的「規劃師服務」</a></li>
    </ul> -->
  </div>
</div>
</div>

<script>
  function previousPage() {
    history.back();
  }

  (function getContentsData() {
    // 線上版網址 https://bhouse3.ptt.cx:9002/api/
    // 本地端網址 http://localhost:9001/api/
    fetch('http://localhost:9001/api/contents?url=/blog').then(res => res.json()).then(list => {
      let title = document.querySelector('h1').innerHTML;
      let arr = [];

      list.map(e => {
        // 找出符合標題的文章
        if (e.meta_title.includes(title)) {
          let ttlList = JSON.parse(e.readmore_ttl.replace("\/", ""));
          let lnkList = JSON.parse(e.readmore_lnk.replace("\/", ""));
          let content = [
            '<li>你可能會喜歡的，延伸閱讀點擊標題，看更多設計專欄！</li>',
          ];

          for (let i = 0; i < ttlList.length; i++) {
            let obj =
            {
              ttl: ttlList[i],
              lnk: lnkList[i]
            };
            arr.push(obj);
          }

          for (let i = 0; i < arr.length; i++) {
            const item = arr[i];

            if (item.ttl !== "") {
              let dom = `
            <li>
              <a href="${item.lnk}">${item.ttl}</a>
            </li>`;

              content.push(dom);
            }
          }
          document.querySelector('.read-more-list').innerHTML = content.join(" ");

          let moreList = document.querySelector('.read-more-list');
          if (moreList.children.length === 1) {
            moreList.style.display = 'none';
          }
        }
      });

    })
  })();

  let contentList = document.getElementById("TableOfContents").getElementsByTagName("li");
  for (let i = 0; i < contentList.length; i++) {
    const element = contentList[i];
    if (element.childNodes.length == 0) {
      element.style.display = 'none';
    }
  }

  // let moreList = document.querySelector('.read-more-list');
  // if (moreList.children.length === 1) {
  //   moreList.style.display = 'none';
  // }
</script>
{{ end }}