pagination does not use the correct html template

[XiminLin]

After bash bundle exec jekyll serve, upon inspecting the project page, the project page can display _projects correctly (the front matters are used correctly), but the html code is totally from index.html.

This is my directory strcture:

├── _projects
│   ├── 1970-01-01-project0.md
...
├── _posts
│   ├── 1970-01-01-blog0.md
...
├── _config.yml
├── include
│   ├── footer.html
│   ├── header.html
├── layout
│   ├── default.html
├── index.html
├── projects.html

index.html is the main page showing all my posts. projects.html should show all my projects. Both use default.html as layout. Both use pagination: index.html displays _posts; projecs.html displays _projects.

This is my index.html

---
layout: default
title: Home
type: Home
pagination:
  enabled: true
  collection: 'posts'
pagination_path: '/page:num/'
base_path: '/'
---
<div id="main">

	<!-- Featured Post -->
	<!-- <article class="post featured">
		<header class="major">
			<span class="date">April 25, 2017</span>
			<h2><a href="#">And this is a<br />
			massive headline</a></h2>
			<p>Aenean ornare velit lacus varius enim ullamcorper proin aliquam<br />
			facilisis ante sed etiam magna interdum congue. Lorem ipsum dolor<br />
			amet nullam sed etiam veroeros.</p>
		</header>
		<a href="#" class="image main"><img src="images/pic01.jpg" alt="" /></a>
		<ul class="actions special">
			<li><a href="#" class="button large">Full Story</a></li>
		</ul>
	</article> -->

	<!-- Posts -->
	<section class="posts">
		{% for post in paginator.posts %}
		<article>
	        <header>
		        <span class="date">{{ post.date | date_to_string }}</span>
		        <h2><a href="{{ post.url }}">{{ post.title }}</h2>
	        </header>
	        <a href="#" onclick="return false;" class="image fit"><img src="{{ post.intro_image }}" alt="" /></a>
	        <p>{{ post.excerpt }}
	        </p>
	        <ul class="actions special">
		        <li><a href="{{ post.url }}" class="button">Full Story</a></li>
	        </ul>
		</article>
		{% endfor %}
	</section>
	
	<!-- Footer -->
	{% include paginate_footer.html %}

</div>

This is my project.html

---
layout: default
title: Projects
type: Projects
permalink: projects
pagination:
  enabled: true
  collection: 'projects'
  per_page: 6
pagination_path: '/projects/page:num/'
base_path: '/projects'
---
<div id="main">
	
	<!-- Posts -->
	<section class="posts">
		{% for post in paginator.posts %}
		<article>
			<header>
				<span class="date">{{ post.date | date_to_string }}</span>
				<h2><a href="{{ post.url }}">{{ post.title }}</h2>
			</header>
			<a href="#" onclick="return false;" class="image fit"><img src="{{ post.intro_image }}" alt="" /></a>
			<p>{{ post.excerpt }}
			</p>
			<ul class="actions special">
				<li><a href="{{ post.url }}" class="button">Full Story</a></li>
			</ul>
		</article>
		{% endfor %}
	</section>

</div>

After bash bundle exec jekyll serve, Under the _site folder:

├── index.html
├── projects
│   ├── index.html

I suppose projects/index.html should come from my /projects.html, This is the code generated in projects/index.html:

		<!-- Main -->
		<div id="main">

	<!-- Featured Post -->
	<!-- <article class="post featured">
						<header class="major">
							<span class="date">April 25, 2017</span>
							<h2><a href="#">And this is a<br />
							massive headline</a></h2>
							<p>Aenean ornare velit lacus varius enim ullamcorper proin aliquam<br />
							facilisis ante sed etiam magna interdum congue. Lorem ipsum dolor<br />
							amet nullam sed etiam veroeros.</p>
						</header>
						<a href="#" class="image main"><img src="images/pic01.jpg" alt="" /></a>
						<ul class="actions special">
							<li><a href="#" class="button large">Full Story</a></li>
						</ul>
					</article> -->

	<!-- Posts -->
	<section class="posts">
		
		<article>
			<header>
				<span class="date">01 Jan 1970</span>
				<h2><a href="/projects/1970-01-01-project0/">project0</h2>
			</header>
			<a href="#" onclick="return false;" class="image fit"><img src="/images/blog_imgs/aron-yigin-7U6KI6leN1w-unsplash.jpg" alt="" /></a>
			<p><p>nothing important, first blog, just for fun</p>

			</p>
			<ul class="actions special">
				<li><a href="/projects/1970-01-01-project0/" class="button">Full Story</a></li>
			</ul>
		</article>

...

<!-- Footer -->
	<footer>
    <div class="pagination">        
        <span class="previous">Prev</span>            
            <a href="/projects"  class="page active" >1</a>            
            <a href="/projects/page2/",  class = "page" >2</a>            
            <a href="/projects/page3/",  class = "page" >3</a>
            <a href="/projects/page4/",  class = "page" >4</a>
        <a href="/projects/page2/" class="next">Next</a>        
    </div>
</footer>

You can see that projects/index.html is using index.html's code and projects.html's front matter.

Why is this the case and how should I change this so that I can use projects.html's code?

Thank you

[zkwentz]

I had this same problem, I found this helpful paragraph that looks to be from an old version of the README.md, quoting below:

---

My pagination pages are overwriting each others pages

If you specify multiple pages that paginate in the site root then you must give them unique and separate pagination permalink. This link is set in the pagination page front-matter like so

pagination:
  enabled: true
  permalink: '/cars/:num/'

Make absolutely sure that your pagination permalink paths do not clash with any other paths in your final site. For simplicity it is recommended that you keep all custom pagination (non root index.html) in a single or multiple separate sub folders under your site root.

[zkwentz]

Following up, this was not the fix.

[yuhan16]

I had the same issue when paginating multiple categories according to different templates. I found a trick that may bypass this issue. After some trial and error, I found the paginator works normally when using the templates in _layout directory. So if we put everything in the _layout and create an empty file only with front matter, things might work.

Take the 02-category for example. The category directory has four files, and these four files should generate 4 pagination pages. I found that if I write something in each file, for example, name test {{paginator.total_pages}} in byname.md and porsche test {{paginator.total_posts}} in porsche.md. The output pagination pages should be different, but one will overwrite the other as shown below.

What I did is that I created another layout home_porsche.html for porsche.md only, change layout: home_porsche in porsche.md, and leave the rest blank. In this way, the overwrite disappers. The paragraph in porsche.html is written in the layout HTML file.

I use the same method on my own project. It works. Hope it can help.

[perryflynn]

@yuhan16 Thanks. That was the workaround for me.

[mkasberg]

I ran into this issue today. After some testing, I believe this is resolved by #210. So, you can fix it by referring to the most recent commit (or just the main branch) in your Gemfile:

gem "jekyll-paginate-v2", git: "https://github.com/sverrirs/jekyll-paginate-v2", ref: "7bc2634c04c49120b674cc3506275f85c4389f5c"

Would love to see a new version released that includes this fix!

[stbuehler]

I don't think #210 is the full fix; liquid rendering uses caching based on document.path. (Have fun tracking that sh.. through the jekyll codebase.) You always need to set a proper path, for each (paginaged) page. That Jekyll::Page has a @path with the absolute path, but only returns a magical relative path in .path.. well. Sucks.