Improve single display post

layouts/_default/list.html

@@ -1,21 +1,80 @@
 {{ define "main" }}
-<div class="posts-list">
+{{ $defaultCategory := "General" }}
-  <h1>{{ .Title }}</h1>
+{{ if .Site.Params.defaultCategory }}{{ $defaultCategory = .Site.Params.defaultCategory }}{{ end }}
 
-  {{ range .Pages }}
+<div class="section-sm bg-gray-lighter">
-  <article class="post-preview">
+  <div class="container text-center">
-    <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
+    <h3 class="font-family-playfair">{{ .Title }}</h3>
-    <div class="post-meta">
+  </div><!-- end container -->
-      <time>{{ .Date.Format "Jan 2, 2006" }}</time>
-      {{ if .Params.author }}
-        <span>{{ .Params.author }}</span>
-      {{ end }}
-    </div>
-    {{ if .Params.excerpt }}
-      <p class="post-excerpt">{{ .Params.excerpt }}</p>
-    {{ end }}
-    <a href="{{ .RelPermalink }}" class="read-more">Read more →</a>
-  </article>
-  {{ end }}
 </div>
+
+<!-- Blog section  -->
+<div class="section">
+  <div class="container">
+    <div class="row g-4">
+      <div class="col-12 col-sm-10 offset-sm-1 col-md-8 offset-md-2">
+        {{ $paginationLimit := 10 }}
+        {{ if .Site.Params.paginationLimit }}{{ $paginationLimit = .Site.Params.paginationLimit }}{{ end }}
+        {{ $paginator := .Paginator $paginationLimit }}
+        {{ range $paginator.Pages }}
+        <!-- Blog Post box -->
+        <div class="mb-5">
+          <div class="img-link-box">
+            <a href="{{ .RelPermalink }}">
+              {{ if .Params.featured_image }}
+                <img src="{{ .Params.featured_image }}" alt="{{ .Title }}">
+              {{ else }}
+                <img src="/assets/images/col-1.jpg" alt="{{ .Title }}">
+              {{ end }}
+            </a>
+          </div>
+          <div class="mt-4">
+            <div class="d-flex justify-content-between mb-2">
+              <div class="d-inline-flex">
+                {{ if .Params.categories }}
+                  {{ range $index, $category := .Params.categories }}
+                    {{ if $index }}, {{ end }}
+                    {{ if and (eq (printf "%T" $category) "string") }}
+                      <a class="font-family-poppins font-small fw-medium uppercase" href="/categories/{{ $category | urlize }}">{{ $category }}</a>
+                    {{ else if and (eq (printf "%T" $category) "map") }}
+                      {{ if $category.name }}
+                        <a class="font-family-poppins font-small fw-medium uppercase" href="/categories/{{ $category.name | urlize }}">{{ $category.name }}</a>
+                      {{ else }}
+                        <a class="font-family-poppins font-small fw-medium uppercase" href="#">{{ $defaultCategory }}</a>
+                      {{ end }}
+                    {{ else }}
+                      <a class="font-family-poppins font-small fw-medium uppercase" href="#">{{ $defaultCategory }}</a>
+                    {{ end }}
+                  {{ end }}
+                {{ else }}
+                  <a class="font-family-poppins font-small fw-medium uppercase" href="#">{{ $defaultCategory }}</a>
+                {{ end }}
+              </div>
+              <div class="d-inline-flex">
+                <span class="font-small">{{ .Date.Format "02/07/2006" }}</span>
+              </div>
+            </div>
+            <h4><a class="text-link-1" href="{{ .RelPermalink }}">{{ .Title }}</a></h4>
+            {{ if .Params.excerpt }}
+              <p>{{ .Params.excerpt }}</p>
+            {{ else if .Summary }}
+              <p>{{ .Summary }}</p>
+            {{ else }}
+              <p>{{ truncate 200 .Content }}</p>
+            {{ end }}
+            <div class="mt-3">
+              <a class="button-text-1" href="{{ .RelPermalink }}">Lire la suite</a>
+            </div>
+          </div>
+        </div>
+        <!-- End Blog Post box -->
+        {{ end }}
+
+        <!-- Pagination -->
+        {{ partial "pagination.html" (dict "Paginator" .Paginator "Page" .) }}
+      </div>
+    </div><!-- end row -->
+  </div><!-- end container -->
+</div>
+<!-- end Blog section -->
 {{ end }}

layouts/_default/single.html

@@ -1,38 +1,131 @@
 {{ define "main" }}
+<div class="section">
+    <div class="container">
+        <div class="row g-4">
+            <div class="col-12 col-md-10 offset-md-1">
+                <h1 class="fw-normal">{{ .Title }}</h1>
+                <ul class="list-inline-dash">
+                    {{ if .Params.author }}
+                        <li><a href="#">{{ .Params.author }}</a></li>
+                    {{ else }}
+                        <li><a href="#">by Admin</a></li>
+                    {{ end }}
+                    {{ with .Params.categories }}
+                        {{ range . }}
+                            <li><a href="/categories/{{ . | urlize }}">{{ . }}</a></li>
+                        {{ end }}
+                    {{ else }}
+                        <li><a href="/categories/non-classe">Non classé</a></li>
+                    {{ end }}
+                    <li><a href="#">{{ .Date.Format "Jan 2, 2006" }}</a></li>
+                </ul>
+            </div>
+        </div><!-- end row -->
+    </div><!-- end container -->
+</div>
 
-<article class="post">
+<!-- Featured Image -->
-  <header class="post-header">
+{{ if .Params.featured_image }}
-    <h1 class="post-title">{{ .Title }}</h1>
+<div class="container">
-    <div class="post-meta">
+    <img src="{{ .Params.featured_image }}" alt="{{ .Title }}">
-      <time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "January 2, 2006" }}</time>
+</div><!-- end container -->
-      {{ if .Params.author }}
+{{ end }}
-        <span class="post-author">{{ .Params.author }}</span>
+<!-- end Featured Image -->
-      {{ end }}
-      <div class="post-categories">
-        {{ with .Params.categories }}
-          {{ range . }}
-            <a href="/categories/{{ . | urlize }}" class="category">{{ . }}</a>
-          {{ end }}
-        {{ else }}
-          <a href="/categories/non-classe" class="category">Non classé</a>
-        {{ end }}
-      </div>
-    </div>
-    {{ if .Params.featured_image }}
-      <img src="{{ .Params.featured_image }}" alt="{{ .Title }}" class="featured-image">
-    {{ end }}
-  </header>
 
-  <div class="post-content">
+<!-- Post Content -->
-    {{ .Content }}
+<div class="section">
-  </div>
+    <div class="container">
+        <div class="row g-4">
+            <div class="col-12 col-md-10 offset-md-1">
+                <div class="post-content">
+                    {{ .Content }}
+                </div>
+            </div>
+        </div><!-- end row -->
+    </div><!-- end container -->
+</div>
+<!-- end Post Content -->
 
-  {{ if .Params.tags }}
+<!-- Tags and Share -->
-    <div class="post-tags">
+<div class="section-xs border-top">
-      {{ range .Params.tags }}
+    <div class="container">
-        <a href="/tags/{{ . | urlize }}" class="tag">#{{ . }}</a>
+        <div class="row g-4">
-      {{ end }}
+            {{ if .Params.tags }}
-    </div>
+            <div class="col-6">
-  {{ end }}
+                <h6 class="font-small fw-medium uppercase">Tags</h6>
-</article>
+                <ul class="list-inline-sm">
+                    {{ range .Params.tags }}
+                        <li><a href="/tags/{{ . | urlize }}">{{ . }}</a></li>
+                    {{ end }}
+                </ul>
+            </div>
+            {{ end }}
+            <div class="col-6 text-end">
+                <h6 class="font-small fw-medium uppercase">Share On</h6>
+                <ul class="list-inline">
+                    <li><a href="#"><i class="bi bi-facebook"></i></a></li>
+                    <li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
+                    <li><a href="#"><i class="bi bi-google"></i></a></li>
+                </ul>
+            </div>
+        </div><!-- end row -->
+    </div><!-- end container -->
+</div>
+
+<!-- Comments section -->
+{{ if .Site.Params.comments.enable }}
+<div class="section bg-gray-lighter">
+    <div class="container">
+        <div class="row g-4">
+            <div class="col-12 col-md-10 offset-md-1">
+                <h4 class="fw-normal mb-5">Comments</h4>
+                
+                {{ if .Site.Params.comments.disqus }}
+                    <div id="disqus_thread"></div>
+                    <script>
+                        var disqus_config = function () {
+                            this.page.url = "{{ .Permalink }}";
+                            this.page.identifier = "{{ .RelPermalink }}";
+                        };
+                        (function() {
+                            var d = document, s = d.createElement('script');
+                            s.src = 'https://{{ .Site.Params.comments.disqus }}.disqus.com/embed.js';
+                            s.setAttribute('data-timestamp', +new Date());
+                            (d.head || d.body).appendChild(s);
+                        })();
+                    </script>
+                {{ else }}
+                    <p>Comments are disabled.</p>
+                {{ end }}
+                
+            </div>
+        </div><!-- end row -->
+    </div><!-- end container -->
+</div>
+{{ end }}
+
+<!-- Write Comment section -->
+{{ if .Site.Params.comments.enable }}
+<div class="section">
+    <div class="container">
+        <div class="row g-4">
+            <div class="col-12 col-md-10 offset-md-1">
+                <h4 class="fw-normal mb-5">Write a Comment</h4>
+                <form id="comment-form">
+                    <div class="row g-4">
+                        <div class="col-12 col-sm-6">
+                            <input type="text" name="name" placeholder="Name" required>
+                        </div>
+                        <div class="col-12 col-sm-6">
+                            <input type="email" name="email" placeholder="E-Mail" required>
+                        </div>
+                    </div>
+                    <textarea name="message" placeholder="Message"></textarea>
+                    <button class="button button-lg button-outline-gray" type="submit">Post Comment</button>
+                </form>
+            </div>
+        </div><!-- end row -->
+    </div><!-- end container -->
+</div>
+{{ end }}
 {{ end }}

layouts/index.html

@@ -60,7 +60,7 @@
                             <p>{{ truncate 200 .Content }}</p>
                         {{ end }}
                         <div class="mt-3">
-                            <a class="button-text-1" href="{{ .Permalink }}">Read More</a>
+                            <a class="button-text-1" href="{{ .Permalink }}">Lire la suite</a>
                         </div>
                     </div>
                 </div>

layouts/partials/pagination.html

@@ -1,23 +1,25 @@
 <!-- Pagination -->
-{{ if gt (len .Site.RegularPages) 10 }}
+{{ $paginator := .Paginator }}
+{{ $page := .Page }}
+{{ if gt $paginator.TotalPages 1 }}
 <nav>
     <ul class="pagination justify-content-center mt-5">
         <!-- Previous -->
-        <li class="page-item {{ if not .Paginator.HasPrev }}disabled{{ end }}">
+        <li class="page-item {{ if not $paginator.HasPrev }}disabled{{ end }}">
-            {{ if .Paginator.HasPrev }}
+            {{ if $paginator.HasPrev }}
-                <a class="page-link" href="{{ .Paginator.Prev.URL }}">&laquo; Previous</a>
+                <a class="page-link" href="{{ $paginator.Prev.URL }}">&laquo; Précédent</a>
             {{ else }}
-                <a class="page-link" href="#">&laquo; Previous</a>
+                <a class="page-link" href="#">&laquo; Précédent</a>
             {{ end }}
         </li>
 
         <!-- Page numbers -->
-        {{ $currentPage := .Paginator.PageNumber }}
+        {{ $currentPage := $paginator.PageNumber }}
-        {{ $totalPages := .Paginator.TotalPages }}
+        {{ $totalPages := $paginator.TotalPages }}
         
         <!-- Always show first page -->
         <li class="page-item {{ if eq $currentPage 1 }}active{{ end }}">
-            <a class="page-link" href="{{ .Paginator.First.URL }}">1</a>
+            <a class="page-link" href="{{ $paginator.First.URL }}">1</a>
         </li>
 
         <!-- Show ellipsis if current page is > 4 -->
@@ -28,7 +30,7 @@
         {{ end }}
 
         <!-- Show pages around current page -->
-        {{ range .Paginator.Pagers }}
+        {{ range $paginator.Pagers }}
             {{ $pageNumber := .PageNumber }}
             {{ if and (gt $pageNumber 1) (lt $pageNumber $totalPages) (ge $pageNumber (sub $currentPage 1)) (le $pageNumber (add $currentPage 1)) }}
                 {{ if ne $pageNumber 1 }}
@@ -51,16 +53,16 @@
         <!-- Always show last page -->
         {{ if gt $totalPages 1 }}
             <li class="page-item {{ if eq $currentPage $totalPages }}active{{ end }}">
-                <a class="page-link" href="{{ .Paginator.Last.URL }}">{{ $totalPages }}</a>
+                <a class="page-link" href="{{ $paginator.Last.URL }}">{{ $totalPages }}</a>
             </li>
         {{ end }}
 
         <!-- Next -->
-        <li class="page-item {{ if not .Paginator.HasNext }}disabled{{ end }}">
+        <li class="page-item {{ if not $paginator.HasNext }}disabled{{ end }}">
-            {{ if .Paginator.HasNext }}
+            {{ if $paginator.HasNext }}
-                <a class="page-link" href="{{ .Paginator.Next.URL }}">Next &raquo;</a>
+                <a class="page-link" href="{{ $paginator.Next.URL }}">Suivant &raquo;</a>
             {{ else }}
-                <a class="page-link" href="#">Next &raquo;</a>
+                <a class="page-link" href="#">Suivant &raquo;</a>
             {{ end }}
         </li>
     </ul>