Display Posts/Content in Latest Posts

[bloodyeyesblackblood]

I created a Design and now recreating it in 11ty~

Im struggling so much, since this is really new to me.. so I did.. post.data.description but it just displays the current Description and not the post itself, what should I use for this? and also how can I limit it to 20 words?

Currently it looks like this...

Edit: didnt found a similiar post, if there is one, link it please.

[pdehaan]

@bloodyeyesblackblood Do you have a public repo or something?
Not sure how much I can help w/ just screenshots.

If you're using liquidjs, there is a truncatewords filter which will truncate by words instead of just character limits.

[pdehaan]

I don't think there is a "better". Each engine has pros and cons. By default .md templates will also process liquid tags (which can be useful), but indenting and formatting can make .md files a bit tricky sometimes.
I generally prefer using (in no order): LiquidJS, Nunjucks, or JavaScript/Eleventy templating.

As for getting the template content, I believe you can use {{ page.templateContent }}. Per https://www.11ty.dev/docs/collections/#collection-item-data-structure

templateContent: the rendered content of this template. This does not include layout wrappers.

If you're trying to pull excerpts, note that the docs actually have a section on that very thing: https://www.11ty.dev/docs/data-frontmatter-customize/.

[bloodyeyesblackblood]

I don't think there is a "better". Each engine has pros and cons. By default .md templates will also process liquid tags (which can be useful), but indenting and formatting can make .md files a bit tricky sometimes. I generally prefer using (in no order): LiquidJS, Nunjucks, or JavaScript/Eleventy templating.

As for getting the template content, I believe you can use {{ page.templateContent }}. Per https://www.11ty.dev/docs/collections/#collection-item-data-structure

templateContent: the rendered content of this template. This does not include layout wrappers.

If you're trying to pull excerpts, note that the docs actually have a section on that very thing: https://www.11ty.dev/docs/data-frontmatter-customize/.

thanks after your comment i began to look trough some posts with template content {{ post.templateContent | safe }} did help indeed, now I need to find how to limit the text to like 20-40 words.

since excerpt didnt work that well or im really way to dumb to use it

(I created a whole new project, because the base template was to big and messy for me, so all from scratch to learn it kinda myself, might upload it in the next hours)

[pdehaan]

Since you're using liquidjs, I'd probably use a combination of strip_html and truncatewords filters. Possibly something like this

{{ page.templateContent | strip_html | truncatewords: 20 }}

Warning: Be careful about using page as a local/loop variable name, since Eleventy already supplies a page variable, see https://www.11ty.dev/docs/data-eleventy-supplied/#page-variable.

I find excerpts pretty hard to do, since if the beginning of your templateContent has <h1> tags or something, it might not always be great excerpts. But that all depends on the input/layout. But sometimes better than the alternative of manually setting an excerpt for each page (depending on how big your site is).

[bloodyeyesblackblood]

nope im still using njk
https://github.com/bloodyeyesblackblood/bloodyeyes

since i cant push it at the time, cause idk how git works (console says current one is way top behind), here a new branch: https://github.com/bloodyeyesblackblood/bloodyeyes/tree/bloodyeyes

[pdehaan]

Ah, should be doable w/ Nunjucks, although you would probably need use striptags (Nunjucks' version of strip_html filter) and do a rough truncatewords implementation yourself.

  eleventyConfig.addFilter("truncatewords", function (str = "", limit = 30) {
    return str.toString()
      .trim()
      .split(/\s+/g, limit)
      .join(" ") + "…";
  });

USAGE

---
title: Homepage
layout: layouts/base.njk
---
<h1>w</h1>
<ul>
{% for post in collections.posts %}
	<li>
		<a href="{{post.url}}">{{ post.data.title }}</a>
		<p>{{ post.templateContent | striptags(true) | truncatewords(15) | safe }}</p>
	</li>
{% endfor %}
</ul>