i try to make article page using theme mainroad.
i customize the index.html layouts and call partial called hero.html
code hero.html :
<div class="flex flex-col w-screen h-screen items-start justify-start gap-22 overflow-x-hidden pt-[8%] pb-[3%] px-60">
{{ $currentLang := .Language.Lang }}
{{ $posts := where (where .Site.RegularPages "Section" "posts") "Language.Lang" $currentLang }}
{{ if or (not $posts) (eq (len $posts) 0) (eq .Paginator.PageNumber 0) }}
<div class="w-full h-full flex items-center justify-center">
<p class="text-2xl">{{ i18n "no_posts" }}...</p>
</div>
{{ else }}
{{ range first 1 (sort $posts "Date" "desc") }}
<div class="flex gap-10 w-full h-4/7 overflow-hidden">
<picture class="flex w-1/3">
{{ if .Params.thumbnailPaths }}
<img src="{{ index .Params.thumbnailPaths 0 | absURL | safeURL }}" alt="Thumbnail for {{ .Title }}"
fill="cover" width="100%" height="100%" class="object-cover flex-1" />
{{ else }}
<img src="{{ .Site.Params.default_thumbnail }}?width=100"
sizes="(max-width: 768px) 100vw, (max-width: 1024px) 25vw, 50px"
alt="Default thumbnail for {{ .Title }}"
class="w-full h-full object-cover md:aspect-video aspect-square opacity-50 transition-transform duration-200 ease-in-out hover:scale-105" />
{{ end }}
</picture>
<div class="flex flex-col flex-1 gap-4 justify-between">
<div class="flex flex-col gap-4 mt-4">
<span class="text-xl font-bold text-red-400">{{ index .Params.categories 0 }}</span>
<h1 class="text-6xl font-bold line-clamp-1 pb-2.5">{{ .Title }}</h1>
<span id="content-view" class="text-justify">{{ .Content | plainify | truncate 600 }}</span>
</div>
<div class="flex items-center gap-4 mb-4">
<a href="{{ .Permalink | safeURL }}">
<button
class="bg-red-500 text-white text-xl px-4 py-2 rounded hover:bg-red-600 transition-colors duration-300">
Read More
</button>
</a>
<button
class="bg-yellow-400 text-black text-xl px-4 py-2 rounded hover:bg-yellow-500 transition-colors duration-300"
id="bookmark-btn-{{ .File.UniqueID }}"
onclick="toggleBookmark('{{ .Permalink | safeJS }}', '{{ .Title | safeJS }}', '{{ .File.UniqueID }}')">
<span id="bookmark-icon-{{ .File.UniqueID }}">🔖</span> Bookmark
</button>
</div>
</div>
<script>
function toggleBookmark(url, title, id) {
let bookmarks = JSON.parse(localStorage.getItem('bookmarks') || '[]');
const index = bookmarks.findIndex(b => b.id === id);
const icon = document.getElementById('bookmark-icon-' + id);
if (index === -1) {
bookmarks.push({ id, url, title });
icon.textContent = '✅';
} else {
bookmarks.splice(index, 1);
icon.textContent = '🔖';
}
localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
}
// Set icon state on load
document.addEventListener('DOMContentLoaded', function () {
const id = '{{ .File.UniqueID }}';
let bookmarks = JSON.parse(localStorage.getItem('bookmarks') || '[]');
const icon = document.getElementById('bookmark-icon-' + id);
if (icon && bookmarks.find(b => b.id === id)) {
icon.textContent = '✅';
}
});
</script>
</div>
<div class="grid grid-cols-3 gap-4 h-1/6 w-full">
{{ $cat := index .Params.categories 0 }}
{{ $pages := where .Site.RegularPages "Params.categories" "intersect" (slice $cat) }}
{{ if eq (len $pages) 1 }}
<div class="col-span-3 flex items-center justify-center">
<p class="text-2xl"><span class="text-red-500 font-bold">X</span> {{ i18n "related_articles" }}...</p>
</div>
{{ else }}
{{ range first 3 (after 1 (sort $pages "Date" "desc")) }}
<a href="{{ .Permalink | safeURL }}" class="flex row-span-1">
<picture class="flex-none w-1/3">
{{ if .Params.thumbnailPaths }}
<img src="{{ index .Params.thumbnailPaths 0 | absURL | safeURL }}" alt="Thumbnail for {{ .Title }}"
class="object-cover" />
{{ else }}
<img src="{{ .Site.Params.default_thumbnail }}?width=100"
sizes="(max-width: 768px) 100vw, (max-width: 1024px) 25vw, 50px"
alt="Default thumbnail for {{ .Title }}" class="object-cover" />
{{ end }}
</picture>
<span class="flex flex-1 flex-col justify-between p-4">
<h1 class="text-xl font-semibold">{{ .Title }}</h1>
<p class="text-gray-700 line-clamp-2">{{ .Content | plainify | truncate 100 }}</p>
<span class="text-sm text-gray-500">
{{ with .Params.publishedAt }}{{ time . | time.Format "2 January 2006" }}{{ else }}{{ .Date.Format
"2 January 2006" }}{{ end }}
</span>
</span>
</a>
{{ end }}
{{ end }}
</div>
{{ end }}
{{ end }}
</div>
i call at index.html like this :
{{ define "main" }}
<main class="main w-full flex flex-col gap-4" role="main">
{{ partial "hero.html" . }}
<div class="flex items-center justify-center mb-8">
<hr class="flex-1 border-t border-gray-200" />
<span class="w-fit mx-4 text-gray-500 text-2xl">{{ i18n "latest_articles_description" }}</span>
<hr class="flex-1 border-t border-gray-200" />
</div>
<div class="flex flex-1 justify-center gap-4">
{{ $currentLang := .Language.Lang }}
{{ $pages := where (where (where .Site.RegularPages "Section" "posts") "Language.Lang" $currentLang) "Layout" "not in" (slice "legal" "authors") }}
{{ $paginator := .Paginate $pages 5 }}
<div class="flex flex-none w-5xl flex-col justify-start items-start">
{{- range $paginator.Pages }}
{{- .Render "summary" }}
{{- end }}
</div>
</div>
{{ partial "pagination.html" . }}
</main>
{{ end }}
but its broke the pagination, i try to determine the page section, only regular page in posts section will render to the pagination. But because i add {{ partial "hero.html" . }}, the paginator reading all the page, authors page in pages section rendered too
how to solve this?