feat:add search/card/paginator

bigfa · Jan 7, 2025 · d9b45a5 · d9b45a5
1 parent 22cc944
commit d9b45a5
Show file tree

Hide file tree

Showing 11 changed files with 169 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 }}
diff --git a/layouts/page/search.html b/layouts/page/search.html
@@ -0,0 +1,76 @@
+{{ define "main" }}
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/algoliasearch-lite.umd.js"
+    integrity="sha256-DABVk+hYj0mdUzo+7ViJC6cwLahQIejFvC+my2M/wfM=" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/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 }}
diff --git 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
diff --git a/layouts/partials/profile.html b/layouts/partials/profile.html