Hi folks! After a day of getting 11ty up and running (spouse did the heavy lifting) we used @fLaMEd 's 11ty tutorial to start a website w/ a blog, and the code is still essentially what was in that tutorial.
I have tried a bunch of ways to get the full text of my most recent post to show on the home page as well as the title/link showing up on the “blog” page but no dice. Are there any resources for this? I know it has to be out there but I’m coming up empty!
Took a peak at your site. I think it’s showing up. You may need to hit shift+f5 after making changes to your site to make those changes show up on your end! Your browser will cache the webpages of sites you’ve recently visited, and when you revisit them will show what it has in it’s cache. Hitting shift + F5 in most modern browsers will reload the website and tell your browser to ignore what it has in it’s cache.
I’m assuming you’re following this tutorial
Quick screenshot of what I see on my end:
If it isn’t what I mentioned above, can you please share your 11ty config along with the post that isn’t showing up please and thank ya.
EDIT: I can’t read, apologies :)
Leilukin is bang on though
Thank you! Yeah it definitely shows up when I go into blog and click on it, but I am trying to find a way to embed the full most recent post on the home page when you first go to my site as well as in my blog page. I don’t see a config file in this site made from the tutorial I linked, and I’m not sure how to add one. Is there another way to show what the config looks like? Sorry I’m new at allllll of this. Thanks for responding!
The key is understanding and making good use of Eleventy collections and filters.
Assuming you were referring to this Eleventy tutorial by Flamed (since you actually linked to Flamed’s website home page and not any particular post), take note that in the tutorial, blog posts are put in a blog collection. The tutorial teaches displaying a list of posts from latest to oldest by using a for loop and the reverse filter, which is built in to Nunjucks, the templating language the tutorial uses. Specifically, the {% for post in collections.blog | reverse %} line. For loop is how you display items from a colelction.
You can add your own custom filter to your Eleventy configuration file, like .eleventy.js as instructed in the tutorial, so the first thing you need to do is to add this block of code to your eleventy.js file, under the eleventyConfig.addPassthroughCopy("./src/css") line:
eleventyConfig.addFilter("itemLimit", function(array, maximum) {
return array.slice(0, maximum);
});
You can give an Eleventy filter whatever name you want. In this example, I named the filter itemLimit.
Eleventy is written in JavaScript, so you can create custom filters by writing JavaScript functions. In this filter that limit the number of collection items to display, you can use JavaScript’s slice() method.
Now that you have set up a filter to limit the number of collection items to display, add a for loop to your home page for your blog collection and add the itemLimit filter after the reverse filter, and then add a content data variable to display pors content, so your final code to display your latest blog post should be like this:
{% for post in collections.blog | reverse | itemLimit(1) %}
<h1>{{ post.data.title }}</h1>
{{ post.content | safe }}
{% endfor %}
The (1) is necessary to tell the itemLimit fliter how many items you want to display, and since you just want to show the latest blog post, you just need to set it as 1.
ty so much! will report back!
Ok! Thanks so much. You’re right, I posted the wrong link and you read my brain. I haven’t gotten it to work quite yet but it’s given me a lot to work on/with. I’m starting pretty far behind, so this was great for me to learn how to even find .eleventy.js which was hidden on my iOs. Your explanation helps me understand the mechanics enough to have patience with the process and I really, really appreciate it.