From d9b45a5c3832a8e5d82e2c2bebed31ce151127e0 Mon Sep 17 00:00:00 2001
From: bigfa <jigoulee@gmail.com>
Date: Tue, 7 Jan 2025 21:45:15 +0800
Subject: [PATCH] feat:add search/card/paginator

---
 README.md                      |  6 +++
 README_CN.md                   |  6 +++
 assets/scss/base/_layout.scss  |  2 +
 layouts/_default/baseof.html   | 14 +++++++
 layouts/_default/taxonomy.html |  5 ++-
 layouts/category/term.html     |  8 +++-
 layouts/category/travel.html   | 54 ++++++++++++++++++++++++
 layouts/page/search.html       | 76 ++++++++++++++++++++++++++++++++++
 layouts/partials/footer.html   |  2 +-
 layouts/partials/math.html     |  0
 layouts/partials/profile.html  |  0
 11 files changed, 169 insertions(+), 4 deletions(-)
 create mode 100644 layouts/category/travel.html
 create mode 100644 layouts/page/search.html
 delete mode 100644 layouts/partials/math.html
 delete mode 100644 layouts/partials/profile.html

diff --git a/README.md b/README.md
index 8da6f6c..6414d7f 100644
--- a/README.md
+++ b/README.md
@@ -12,6 +12,12 @@ echo "theme = 'hera'" >> config.toml
 
 ## Release Note
 
+### 0.0.8
+
+-   add search
+-   add paginator
+-   add card category
+
 ### 0.0.7
 
 -   fixed comment submit error
diff --git a/README_CN.md b/README_CN.md
index 4b0ab00..2746176 100644
--- a/README_CN.md
+++ b/README_CN.md
@@ -14,6 +14,12 @@ echo "theme = 'hera'" >> hugo.toml
 
 ## 更新日志
 
+### 0.0.8
+
+-   增加搜索
+-   增加分页链接
+-   增加卡片分类
+
 ### 0.0.7
 
 -   修复评论提交错误
diff --git a/assets/scss/base/_layout.scss b/assets/scss/base/_layout.scss
index 2683888..c3c8b44 100644
--- a/assets/scss/base/_layout.scss
+++ b/assets/scss/base/_layout.scss
@@ -47,6 +47,8 @@
     margin: 0 auto;
     width: 92%;
     padding-top: 15px;
+    min-height: calc(100vh - 50px);
+    box-sizing: border-box;
 }
 
 @media (max-width: 1280px) {
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 728d35a..74b3175 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -53,6 +53,20 @@ <h1 class="site--title">{{ $.Site.Title }}</h1>
             </div>
         </div>
         <div class="content">
+            <div class="search--area">
+                <form role="search" method="get" class="search-form" action="/search">
+                    <label class="search-label">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+                            <path fill="currentColor" fill-rule="evenodd"
+                                d="M4.092 11.06a6.95 6.95 0 1 1 13.9 0 6.95 6.95 0 0 1-13.9 0m6.95-8.05a8.05 8.05 0 1 0 5.13 14.26l3.75 3.75a.56.56 0 1 0 .79-.79l-3.73-3.73A8.05 8.05 0 0 0 11.042 3z"
+                                clip-rule="evenodd"></path>
+                        </svg>
+                        <input type="search" class="search-field" placeholder="Search …" value="" name="s"
+                            id="searchbox" autocomplete="off">
+                    </label>
+                    <input type="submit" class="search-submit" value="Search">
+                </form>
+            </div>
             {{ block "main" . }}{{ end }}
             {{ partial "footer.html" . }}
         </div>
diff --git a/layouts/_default/taxonomy.html b/layouts/_default/taxonomy.html
index 58b3fc1..577642e 100644
--- a/layouts/_default/taxonomy.html
+++ b/layouts/_default/taxonomy.html
@@ -9,12 +9,13 @@ <h1 class="post-title">{{.Title}}</h1>
             {{ end }}
         </div>
     </header>
+    {{- $pages := union .RegularPages .Sections }}
+    {{- $paginator := .Paginate $pages }}
     <div class="block--list">
-        {{ range .Data.Pages }}
+        {{- range $index, $page := $paginator.Pages }}
         {{ partial "post.html" . }}
         {{ end }}
     </div>
-    {{ $paginator := .Paginate (where .Pages "Type" "post") }}
     <nav class="navigation ">
         <div class="nav-links">
             {{ range $paginator.Pagers }}
diff --git a/layouts/category/term.html b/layouts/category/term.html
index 307a3a2..e2ff21a 100644
--- a/layouts/category/term.html
+++ b/layouts/category/term.html
@@ -8,10 +8,16 @@ <h1 class="term--title">{{.Title}}</h1>
             {{ end }}
         </dic>
     </header>
+    {{- $pages := union .RegularPages .Sections }}
+    {{- $paginator := .Paginate $pages }}
     <div class="block--list">
-        {{ range .Data.Pages }}
+        {{- range $index, $page := $paginator.Pages }}
+        {{ if eq .Type "memo" }}
+        {{ partial "memo.html" . }}
+        {{ else }}
         {{ partial "post.html" . }}
         {{ end }}
+        {{ end }}
     </div>
     {{ $paginator := .Paginate (where .Pages "Type" "post") }}
     <nav class="navigation ">
diff --git a/layouts/category/travel.html b/layouts/category/travel.html
new file mode 100644
index 0000000..c08e93d
--- /dev/null
+++ b/layouts/category/travel.html
@@ -0,0 +1,54 @@
+{{ define "main" }}
+<div class="articleContainer">
+    <header class="term--header">
+        <h1 class="term--title">{{.Title}}</h1>
+        {{ if .Params.description }}
+        <div class="term--description">{{ .Params.description }}</div>
+        {{ end }}
+    </header>
+    {{- $pages := union .RegularPages .Sections }}
+    {{- $paginator := .Paginate $pages }}
+    <div class="post--cards">
+        {{- range $index, $page := $paginator.Pages }}
+        <article class="post--card">
+            {{ if .Content }}
+            {{ $urls := findRE "<img src=\"[^\"|\\\"]*\"" .Content }} {{ if $urls }} {{ $url :=index ($urls) 0 }} {{
+                $url :=(strings.TrimPrefix "<img src=\"" $url) }}
+  {{ $url := strings.TrimRight " \"" $url }} <a href="{{ .Permalink }}" class="cover--link"><img src="{{ $url }}"
+                class="cover" /></a>
+            {{ else }}
+            <a href="{{ .Permalink }}" class="cover--link"><img src="{{ .Site.Params.defaultCover }}"
+                    class="cover" /></a>
+            {{ end }}
+            {{ end }}
+            <div class="card--content">
+                <h2 class="post--title">
+                    <a href="{{ .Permalink }}">
+                        {{ .Title }}
+                    </a>
+                </h2>
+                <div class="description">{{ .Summary | plainify | truncate 60 }}</div>
+                <div class="meta">
+                    <svg class="icon" viewBox="0 0 1024 1024" width="16" height="16">
+                        <path
+                            d="M512 97.52381c228.912762 0 414.47619 185.563429 414.47619 414.47619s-185.563429 414.47619-414.47619 414.47619S97.52381 740.912762 97.52381 512 283.087238 97.52381 512 97.52381z m0 73.142857C323.486476 170.666667 170.666667 323.486476 170.666667 512s152.81981 341.333333 341.333333 341.333333 341.333333-152.81981 341.333333-341.333333S700.513524 170.666667 512 170.666667z m36.571429 89.697523v229.86362h160.865523v73.142857H512a36.571429 36.571429 0 0 1-36.571429-36.571429V260.388571h73.142858z">
+                        </path>
+                    </svg>
+                    <time datetime='{{.Date.Format "2006-01-02 15:04:01" }}' class="humane--time">{{ .Date | time.Format
+                        ":date_long"
+                        }}</time>
+                </div>
+            </div>
+        </article>
+        {{ end }}
+    </div>
+    {{ $paginator := .Paginate (where .Pages "Type" "post") }}
+    <nav class="navigation ">
+        <div class="nav-links">
+            {{ range $paginator.Pagers }}
+            <a class="page-numbers{{ if eq . $paginator }} current{{ end }}" href="{{ .URL }}">{{ .PageNumber }}</a>
+            {{ end }}
+        </div>
+    </nav>
+</div>
+{{ end }}
\ No newline at end of file
diff --git a/layouts/page/search.html b/layouts/page/search.html
new file mode 100644
index 0000000..56fb2a4
--- /dev/null
+++ b/layouts/page/search.html
@@ -0,0 +1,76 @@
+{{ define "main" }}
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@8.1.0/themes/reset-min.css"
+    integrity="sha256-2AeJLzExpZvqLUxMfcs+4DWcMwNfpnjUeAAvEtPr0wU=" crossorigin="anonymous">
+<div class="articleContainer">
+    <div class="site--main">
+        <div id="hits" class="block--list"></div>
+        <div id="pagination"></div>
+    </div>
+</div>
+<script src="https://cdn.jsdelivr.net/npm/algoliasearch@4.20.0/dist/algoliasearch-lite.umd.js"
+    integrity="sha256-DABVk+hYj0mdUzo+7ViJC6cwLahQIejFvC+my2M/wfM=" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4.60.0/dist/instantsearch.production.min.js"
+    integrity="sha256-9242vN47QUX50UG5Gf5XDO1YREWCEJRyXHofh5fsl24=" crossorigin="anonymous"></script>
+<script>
+    const searchClient = algoliasearch('{{ .Site.Params.searchAPPID }}', '{{ .Site.Params.searchKey }}');
+
+    const search = instantsearch({
+        indexName: '{{ .Site.Params.indexName }}',
+        searchClient,
+        insights: false
+    });
+
+    search.addWidgets([
+        instantsearch.widgets.searchBox({
+            container: '#searchbox',
+            showReset: false,
+            placeholder: 'Search for stories',
+            cssClasses: {
+                form: ['search-form'],
+                input: ['search-field']
+            },
+            templates: {
+                submit: `<input type="submit" class="search-submit" value="Search">`
+            }
+        }),
+
+        instantsearch.widgets.hits({
+            container: '#hits',
+            templates: {
+                item(hit, { html, components, sendEvent }) {
+                    const time = new Date(hit.date);
+                    const date = time.toLocaleDateString('en-US', {
+                        year: 'numeric',
+                        month: 'long',
+                        day: 'numeric',
+                    });
+                    const lngString = '{{ .Site.Language }}';
+                    const uri = hit.uri.replace("/" + lngString + "/", "/");
+                    const cover = hit.cover ? html`<img src="${hit.cover}" class="cover" itemprop="image" />` : '';
+                    return html`<article class="block--item" itemtype="http://schema.org/Article" itemscope="itemscope">
+                <h2 class="block--title">
+                    <a href="${uri}">${components.Highlight({ attribute: 'title', hit })}</a>
+                </h2>
+          <div class="block--addon">
+            <div class="meta">
+                <div class="block--snippet">
+          <div class="summary">${hit.description}</div>
+          <div class="block--meta">
+                    ${date}
+                    </div>
+                    </div>
+                    </div></div>
+                    <a href="${uri}" class="block--cover"> ${cover}</a>
+                    </article>
+      `;
+                },
+            },
+        })
+    ]);
+
+    search.start();
+    const queryString = window.location.search;
+    const params = new URLSearchParams(queryString);
+    search.helper.setQuery(params.get("s")).search();
+</script>
+{{ end }}
\ No newline at end of file
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 1f43264..19815b6 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,5 +1,5 @@
 <footer class="site--footer u-textAligncenter">
-    <div class="copyright">
+    <div>
         Theme by <a href="https://fatesinger.com/74850 " target="_blank">bigfa</a>
         {{ with .Site.Params.copyright }}
         {{ . | markdownify }}
diff --git a/layouts/partials/math.html b/layouts/partials/math.html
deleted file mode 100644
index e69de29..0000000
diff --git a/layouts/partials/profile.html b/layouts/partials/profile.html
deleted file mode 100644
index e69de29..0000000