kbe/hugo-mistergeek
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Better single post display

Browse Source
This commit is contained in:
kbe
2025-08-20 15:45:42 +02:00
parent 41805da339
commit f926c7fcf6
3 changed files with 317 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
layouts/_default/single.html
View File

@@ -11,20 +11,14 @@
{{ end }}
</div>
<h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">{{ .Title }}</h1>
<p class="text-xl text-gray-700 mb-8">{{ .Summary }}</p>
<div class="flex items-center justify-center space-x-4 text-gray-600">
<div class="flex items-center">
{{ if .Params.author_image }}
<img src="{{ .Params.author_image }}" alt="Author" class="rounded-full mr-2 w-10 h-10">
{{ else }}
<img src="https://i.pravatar.cc/40?img=5" alt="Author" class="rounded-full mr-2 w-10 h-10">
{{ end }}
<span>{{ .Params.author | default "Author Name" }}</span>
<a href="/author/{{ .Params.author | urlize }}" class="text-blue-600 hover:text-blue-800 underline decoration-blue-600 hover:decoration-blue-800 transition-colors">{{ .Params.author | default "Auteur" }}</a>
</div>
<span>•</span>
<span>{{ .Date.Format "October 16, 2024" }}</span>
<span>{{ .Date.Format "2 janvier 2006" }}</span>
<span>•</span>
<span>{{ .ReadingTime }} min read</span>
<span>{{ .ReadingTime }} min de lecture</span>
</div>
</div>
</div>
@@ -32,47 +26,31 @@
<!-- Article Content -->
<article class="py-12 md:py-16">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="max-w-3xl mx-auto prose">
{{ .Content }}
</div>
</div>
</article>
<!-- Tags Section -->
<div class="py-8 border-t border-gray-200">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="max-w-3xl mx-auto">
<h3 class="text-lg font-semibold text-gray-900 mb-4">Topics:</h3>
<div class="flex flex-wrap gap-3">
{{ with .Params.tags }}
{{ range . }}
<a href="#" class="tag bg-blue-100 text-blue-800 hover:bg-blue-200 px-4 py-2 rounded-full font-medium">{{ . }}</a>
{{ end }}
{{ end }}
{{ if .Params.featured_image }}
<img src="{{ .Params.featured_image }}" alt="{{ .Title }}" class="w-full h-auto rounded-lg mb-8">
{{ end }}
<div class="prose">
{{ .Content }}
</div>
</div>
</div>
</div>
</article>
<!-- Author Bio -->
<div class="py-12 bg-gray-50">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="max-w-3xl mx-auto">
<div class="flex items-start space-x-6">
{{ if .Params.author_image }}
<img src="{{ .Params.author_image }}" alt="Author" class="rounded-full w-20 h-20">
{{ else }}
<img src="https://i.pravatar.cc/100?img=5" alt="Author" class="rounded-full w-20 h-20">
{{ end }}
<div>
<h3 class="text-xl font-semibold text-gray-900">{{ .Params.author | default "Author Name" }}</h3>
<p class="text-blue-600 font-medium mb-4">Technology Writer & Future of Work Researcher</p>
<p class="text-gray-700">{{ .Params.author_bio | default "Author bio goes here." }}</p>
<h3 class="text-xl font-semibold text-gray-900">{{ .Params.author | default "Auteur" }}</h3>
<p class="text-blue-600 font-medium mb-4">Rédacteur technologique & chercheur sur le futur du travail</p>
<p class="text-gray-700">{{ .Params.author_bio | default "Biographie de l'auteur ici." }}</p>
<div class="flex space-x-4 mt-4">
<a href="#" class="text-gray-600 hover:text-blue-600"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-gray-600 hover:text-blue-600"><i class="fab fa-linkedin"></i></a>
<a href="#" class="text-gray-600 hover:text-blue-600"><i class="fab fa-medium"></i></a>
<a href="#" class="text-gray-600 hover:text-blue-600 transition-colors"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-gray-600 hover:text-blue-600 transition-colors"><i class="fab fa-linkedin"></i></a>
<a href="#" class="text-gray-600 hover:text-blue-600 transition-colors"><i class="fab fa-medium"></i></a>
</div>
</div>
</div>
@@ -83,7 +61,7 @@
<!-- Related Articles -->
<div class="py-12">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-2xl font-bold text-gray-900 mb-8 text-center">Related Articles</h2>
<h2 class="text-2xl font-bold text-gray-900 mb-8 text-center">Articles connexes</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
{{ range first 3 (where .Site.RegularPages "Type" "post") }}
<div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-shadow">
@@ -101,13 +79,13 @@
{{ end }}
</span>
<h3 class="text-xl font-semibold mt-2 mb-3">
<a href="{{ .Permalink }}">{{ .Title }}</a>
<a href="{{ .Permalink }}" class="text-gray-900 hover:text-blue-600 transition-colors">{{ .Title }}</a>
</h3>
<p class="text-gray-600">{{ .Summary | truncate 100 }}</p>
<div class="flex items-center mt-4 text-sm text-gray-500">
<span>{{ .Date.Format "Jan 2, 2006" }}</span>
<span>{{ .Date.Format "2 janvier 2006" }}</span>
<span class="mx-2">•</span>
<span>{{ .ReadingTime }} min read</span>
<span>{{ .ReadingTime }} min de lecture</span>
</div>
</div>
</div>
@@ -120,11 +98,11 @@
<div class="py-12 bg-blue-50">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="max-w-3xl mx-auto text-center">
<h2 class="text-2xl font-bold text-gray-900 mb-4">Join the Newsletter</h2>
<p class="text-gray-700 mb-6">Stay updated with the latest insights on technology and the future of work.</p>
<h2 class="text-2xl font-bold text-gray-900 mb-4">Rejoignez la newsletter</h2>
<p class="text-gray-700 mb-6">Restez informé des dernières actualités sur la technologie et le futur du travail.</p>
<form class="flex flex-col sm:flex-row gap-4 max-w-xl mx-auto">
<input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
<button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium">Subscribe</button>
<input type="email" placeholder="Votre adresse email" class="flex-grow px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
<button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition-colors">S'abonner</button>
</form>
</div>
</div>