|
|
@@ -20,7 +20,7 @@
|
|
|
<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>
|
|
|
+ <li class="breadcrumb-item active" aria-current="page" id="category_name">預售屋客變</li>
|
|
|
</ol>
|
|
|
</nav>
|
|
|
<div class="d-flex flex-column align-items-start">
|
|
|
@@ -46,20 +46,17 @@
|
|
|
|
|
|
<div style="border-top: 1px solid #969696;"></div>
|
|
|
|
|
|
- <!-- <div class="alert d-flex align-items-center" role="alert" style="max-width: 300px;margin: auto;justify-content: center;">
|
|
|
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" style="color: #808e4c;" viewBox="0 0 16 16" role="img" aria-label="Warning:">
|
|
|
- <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
|
|
|
- </svg>
|
|
|
- <div>
|
|
|
- 找不到符合條件的文章
|
|
|
- </div>
|
|
|
- </div> -->
|
|
|
-
|
|
|
<div class="article" id="articleList">
|
|
|
|
|
|
+ <div id="blog-loading" class="d-flex justify-content-center mb-5">
|
|
|
+ <div class="spinner-border text-success" role="status" style="color: rgba(128, 143, 76, 1) !important;">
|
|
|
+ <span class="visually-hidden">Loading...</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
{{ $paginator := .Paginate .Data.Pages }}
|
|
|
{{ range $paginator.Pages }}
|
|
|
- <div class="article-item">
|
|
|
+ <!-- <div class="article-item" id="defaultArticle">
|
|
|
<a href="{{ .RelPermalink }}">
|
|
|
<img src="{{ .Params.Image | relURL }}" alt="">
|
|
|
</a>
|
|
|
@@ -71,9 +68,8 @@
|
|
|
<a href="{{ .RelPermalink }}" class="description">
|
|
|
<p style="letter-spacing: 1px;">{{.Params.description }}</p>
|
|
|
</a>
|
|
|
- <!-- <p style="color:#4D4D4D;">{{ .Summary }}</p> -->
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
{{ end }}
|
|
|
</div>
|
|
|
<a class="nav-link article_readMore" href="/blog_main/">＜ 回到成家知識庫</a>
|
|
|
@@ -89,6 +85,14 @@
|
|
|
// 取得 apiData
|
|
|
let contentsData = [];
|
|
|
let category = localStorage.getItem('category');
|
|
|
+ console.log('category_name', document.getElementById('category_name').textContent);
|
|
|
+
|
|
|
+ if (category !== null) {
|
|
|
+ document.getElementById('category_name').textContent = category;
|
|
|
+
|
|
|
+ } else {
|
|
|
+ document.getElementById('category_name').style.display = 'none';
|
|
|
+ }
|
|
|
|
|
|
(function getContentsData() {
|
|
|
// 線上版網址 http://192.53.174.202:9001/api/
|
|
|
@@ -96,9 +100,10 @@
|
|
|
fetch('http://localhost:9001/api/contents?url=/blog').then(res => res.json()).then(list => {
|
|
|
contentsData = list;
|
|
|
console.log('contentsData', contentsData);
|
|
|
- if (category !== null) {
|
|
|
- filterCategory();
|
|
|
- }
|
|
|
+ filterCategory();
|
|
|
+ // if (category !== null) {
|
|
|
+ // filterCategory();
|
|
|
+ // }
|
|
|
})
|
|
|
})();
|
|
|
|
|
|
@@ -107,9 +112,10 @@
|
|
|
// 分類篩選
|
|
|
function filterCategory() {
|
|
|
contentsData.map(item => {
|
|
|
- if (item.categories) {
|
|
|
- if (item.categories.includes(category)) {
|
|
|
- matchContent += `
|
|
|
+ if (category !== null) {
|
|
|
+ if (item.categories) {
|
|
|
+ if (item.categories.includes(category)) {
|
|
|
+ matchContent += `
|
|
|
<div class="article-item">
|
|
|
<a href="${item.url}">
|
|
|
<img src="${item.image}" alt="">
|
|
|
@@ -124,11 +130,29 @@
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>`
|
|
|
+ }
|
|
|
}
|
|
|
+ } else {
|
|
|
+ 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>`
|
|
|
}
|
|
|
-
|
|
|
})
|
|
|
+ $('#blog-loading').addClass("blog_loading");
|
|
|
document.getElementById("articleList").innerHTML = matchContent;
|
|
|
+
|
|
|
}
|
|
|
|
|
|
// 增加延遲(待輸入完成後再進行搜尋)
|
|
|
@@ -142,6 +166,8 @@
|
|
|
|
|
|
// 搜尋
|
|
|
$('#blog_search').keyup(delay(function (e) {
|
|
|
+ // 搜尋全部文章需移除分類麵包屑
|
|
|
+ document.getElementById('category_name').style.display = 'none';
|
|
|
// 取得輸入框的值
|
|
|
let inputVal = $('#blog_search').val();
|
|
|
matchContent = "";
|
SyuanYu