|
|
@@ -17,7 +17,8 @@
|
|
|
style="--bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E");"
|
|
|
aria-label="breadcrumb">
|
|
|
<ol class="breadcrumb">
|
|
|
- <li class="breadcrumb-item"><a href="#"><img src="/img/bt_footer_index@2x.png" width="30px" alt="" style="margin-bottom: 5px;"></a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#"><img src="/img/bt_footer_index@2x.png" width="30px" alt=""
|
|
|
+ style="margin-bottom: 5px;"></a></li>
|
|
|
<li class="breadcrumb-item"><a href="#">成家知識專欄</a></li>
|
|
|
<li class="breadcrumb-item active" aria-current="page">預售屋客變</li>
|
|
|
</ol>
|
|
|
@@ -37,8 +38,7 @@
|
|
|
<div class="bhouseweb_search_img" style="margin-right: 1vw;">
|
|
|
<img src="/img/icon_search@2x.png" alt="">
|
|
|
</div>
|
|
|
- <input id="bhouseweb_search" class="me-md-2" type="search" placeholder="搜尋「客變」「工業風」「三代同堂」"
|
|
|
- aria-label="Search">
|
|
|
+ <input id="blog_search" class="me-md-2" type="search" placeholder="搜尋「客變」「工業風」「三代同堂」" aria-label="Search">
|
|
|
</form>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -46,7 +46,7 @@
|
|
|
|
|
|
<div style="border-top: 1px solid #969696;"></div>
|
|
|
|
|
|
- <div class="article">
|
|
|
+ <div class="article" id="articleList">
|
|
|
|
|
|
{{ $paginator := .Paginate .Data.Pages }}
|
|
|
{{ range $paginator.Pages }}
|
|
|
@@ -65,51 +65,93 @@
|
|
|
<!-- <p style="color:#4D4D4D;">{{ .Summary }}</p> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
{{ end }}
|
|
|
- <!-- <div class="article-item">
|
|
|
- <a href="">
|
|
|
- <img src="/img//collection/boutique_hotel_slightly_drunk_chill_house_2.webp" alt="">
|
|
|
- </a>
|
|
|
- <div class="d-flex flex-column">
|
|
|
- <a href="">
|
|
|
- <h4>【客變】 預售屋客變懶人包：客變什麼？這樣做好不好？</h4>
|
|
|
- </a>
|
|
|
- <p class="mt-auto mb-0">2021-11-23</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="article-item">
|
|
|
- <a href="">
|
|
|
- <img src="/img//collection/boutique_hotel_slightly_drunk_chill_house_2.webp" alt="">
|
|
|
- </a>
|
|
|
- <div class="d-flex flex-column">
|
|
|
- <a href="">
|
|
|
- <h4>【文章類別】 標題NotoJPBold22級字行距32pt置左</h4>
|
|
|
- </a>
|
|
|
- <p class="mt-auto mb-0">2021-11-23</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="article-item">
|
|
|
- <a href="">
|
|
|
- <img src="/img//collection/boutique_hotel_slightly_drunk_chill_house_2.webp" alt="">
|
|
|
- </a>
|
|
|
- <div class="d-flex flex-column">
|
|
|
- <a href="">
|
|
|
- <h4>【文章類別】 標題NotoJPBold22級字行距
|
|
|
- 32pt置左</h4>
|
|
|
- </a>
|
|
|
- <p class="mt-auto mb-0">2021-11-23</p>
|
|
|
- </div>
|
|
|
- </div> -->
|
|
|
-
|
|
|
- <a class="nav-link article_readMore" href="#">＜ 回到成家知識庫</a>
|
|
|
</div>
|
|
|
+ <a class="nav-link article_readMore" href="/blog_main/">＜ 回到成家知識庫</a>
|
|
|
</div>
|
|
|
|
|
|
{{ partial "footer.html" . }}
|
|
|
{{ partial "scripts.html" . }}
|
|
|
+
|
|
|
+ <script>
|
|
|
+ window.onload = function () {
|
|
|
+ // 取得 apiData
|
|
|
+ let contentsData = [];
|
|
|
+ let category = localStorage.getItem('category');
|
|
|
+
|
|
|
+ (function getContentsData() {
|
|
|
+ // 線上版網址 http://192.53.174.202:9001/api/
|
|
|
+ // 本地端網址 http://localhost:9001/api/
|
|
|
+ fetch('http://localhost:9001/api/contents?url=/blog').then(res => res.json()).then(list => {
|
|
|
+ contentsData = list;
|
|
|
+ console.log('contentsData', contentsData);
|
|
|
+ filterCategory();
|
|
|
+ })
|
|
|
+ })();
|
|
|
+
|
|
|
+ let matchContent = "";
|
|
|
+
|
|
|
+ // 分類篩選
|
|
|
+ function filterCategory() {
|
|
|
+ contentsData.map(item => {
|
|
|
+ if (item.categories) {
|
|
|
+ if (item.categories.includes(category)) {
|
|
|
+ matchContent += `
|
|
|
+ <div class="article-item">
|
|
|
+ <a href="${item.url}">
|
|
|
+ <img src="${item.image}" alt="">
|
|
|
+ </a>
|
|
|
+ <div class="d-flex flex-column">
|
|
|
+ <a href="${item.url}">
|
|
|
+ <h4>${item.title}</h4>
|
|
|
+ </a>
|
|
|
+ <p class="mt-auto my-2 fw-bold">${item.date.substr(0, 10)}</p>
|
|
|
+ <a href="${item.url}" class="description">
|
|
|
+ <p style="letter-spacing: 1px;">${item.description}</p>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>`
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ document.getElementById("articleList").innerHTML = matchContent;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 搜尋
|
|
|
+ document.getElementById('blog_search').addEventListener("keyup", event => {
|
|
|
+ // 取得輸入框的值
|
|
|
+ let inputVal = $('#blog_search').val();
|
|
|
+ matchContent = "";
|
|
|
+ contentsData.map(item => {
|
|
|
+ // 搜尋特定分類的文章
|
|
|
+ if (item.categories) {
|
|
|
+ if (item.categories.includes(category)) {
|
|
|
+ if (item.title.includes(inputVal) || item.description.includes(inputVal) || item.content.includes(inputVal)) {
|
|
|
+ matchContent += `
|
|
|
+ <div class="article-item">
|
|
|
+ <a href="${item.url}">
|
|
|
+ <img src="${item.image}" alt="">
|
|
|
+ </a>
|
|
|
+ <div class="d-flex flex-column">
|
|
|
+ <a href="${item.url}">
|
|
|
+ <h4>${item.title}</h4>
|
|
|
+ </a>
|
|
|
+ <p class="mt-auto my-2 fw-bold">${item.date.substr(0, 10)}</p>
|
|
|
+ <a href="${item.url}" class="description">
|
|
|
+ <p style="letter-spacing: 1px;">${item.description}</p>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>`
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ document.getElementById("articleList").innerHTML = matchContent;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+
|
|
|
</body>
|
|
|
|
|
|
</html>
|
SyuanYu