Front Page - Paginate - show FULL posts

[synj00]

**** EDIT **** Yeah as soon as I posted this I realized "post" - changed frontmatter to tags: post and it output at leas one post.
Still going to leave this here for other folks to profit off my mistake / oversight

Being that this seems to be simple, I'm still having trouble making it work.

I have hundreds of very short posts in my blog. My ideal setup would be to have a single home / about / contact page with the home page having pagination 10 and display the title & date and the FULL content of the post. I have not come across a single example that I can work into something usable.

So much effort goes into creating post slugs and different layouts for categories in every template that I have tried that I'm going back to basics and will write my own. Off to a rough start even though I've been toying with 11ty for months with templates and learning lots of things advanced users are doing. I know html and can do simple css fine. I dont want to go back to wordpress, 11ty is interesting, I'm just making it harder than it needs to be maybe?

created base directory
npm init -y
npm install @11ty/eleventy --save-dev
created posts directory and created some md files

/
/index.html
/_includes = nothing here yet, no layouts
/posts/post1.md, post2.md, post3.md, etc

npx @11ty/eleventy --serve
[11ty] Problem writing Eleventy templates: (more in DEBUG output)
[11ty] ./index.html contains a circular reference (using collections) to its own templateContent. (via UsingCircularTemplateContentReferenceError)

Any help would be appreciated

Contents of index.html

``

<title>My Blog</title>

My Blog

• Home
• About
• Contact

{% for post in collections.all | reverse | slice(0, 10) %}

{{ post.data.title }}

{{ post.templateContent }}

{% endfor %} © 2023 My Blog ``

[darthmall]

index.html is included in collections.all. So when you try to iterate over that collection and put its contents in the page, you create an infinite loop.

You have two choices:

1. Add eleventyExcludeFromCollections: true to the frontmatter of index.html
2. Create a custom collection for your posts and iterate over that instead of collections.all

I favor the second option, personally. You could either add a post tag (or something) to all of the pages in your posts/ directory using a directory data file like this:

posts/posts.11tydata.json

{
  "tags": ["post"]
}

Or you can use the collections API in your eleventy config to create the custom collection.

[synj00]

Awesome! I've got this rocking! But now I have a second question - Since I'm using the global collection to display the full page post on the main page it seems like pagination is not working for me.

I changed index.html to index.fluid and added the paginate frontmatter

---
pagination:  
  data: collections.post  
  size: 1  
  reverse: false  
  alias: posts  
---

I show all content from the post (slugify does not seem to honor formatting from my playing around with it)

 {% assign sortedPosts = collections.posts | reverse %}
      {% for post in sortedPosts %}
        <article>
          <h2>{{ post.data.title }}</h2>
          <p>{{ post.templateContent }}</p>
        </article>
        <p>{{ post.data.date }}</p>
      {% endfor %}

It does build folders based on the paginate number which is really confusing. That means it should work, I understand how it is going through the array... unless I am missing something fundamental. AH it occurs to me that paginate is built to display a certain number of LINKS directly to a page, and not restrict the return on the content of the page. Is there a way to do what I'm trying to do (limit the full content of posts to 5 for example (instead of 800)) if that is the case?