Display recent blogs in home page. However, unable to access posts in content.html.

[anp-scp]

Hi,

I am new here. I want to add the most recent blog posts at the end of the home page. For this, I overridden the partials/content.html and added the following snippet:

{% if page.title == "Home" %}
<p>point a</p>
  {% for post in posts %}
      <p>point b</p>
  {% endfor %}
{% endif %}

However, point a is displayed but point b is not. Can we access posts in content.html?

[kamilkrzyskow]

Hello @anp-scp,
the posts are defined in the context for the blog views. Views include the Blog Home Page, Category pages, Archive pages, a new context should be created between pages, so it's not available in other pages by default.

mkdocs-material/src/plugins/blog/plugin.py

Lines 352 to 354 in 0fc36a1

	# Assign posts and pagination to context
	context["posts"] = posts
	context["pagination"] = pager if pagination else None

From your code I guess that your home page is separate from the blog home page, right? Then I recommend using a template: home.html instead of checking for page.title. Instead of overriding the content.html, after extending main.html you can override the container/content block:

• https://squidfunk.github.io/mkdocs-material/reference/#setting-the-page-template
• https://squidfunk.github.io/mkdocs-material/customization/#overriding-blocks

To get access to the pages you'd have to use some sort of hook:

• https://www.mkdocs.org/user-guide/configuration/#hooks

Rendering the Excerpts as in the Blog views would be tricky unless I'm missing something 🤔
But you should be able to access the Blog plugin instance and then access the blog_plugin.blog view reference together with the blog_plugin.blog.pages reference and extract the titles / links.

All in a on_page_context event to pass the posts to the context:

• https://www.mkdocs.org/dev-guide/plugins/#on_page_context
  Guarded by if page.meta.get("template") != "home.html": return

[anp-scp]

Hello, @kamilkrzyskow !!!

Thanks for the help. It worked.
However, I only needed to access the post title, URL, and creation data. So I didn't have to work with rendering the Excerpts.

Thanks again !!!

[kamilkrzyskow]

That's great to hear! Consider sharing your solution for other to see and make use of ✌️
You can also then mark it as the true answer, as I just gave pointers 😃

[anp-scp]

Here's the solution I reached following the pointers suggested by @kamilkrzyskow ✌️ :

1. Create a hook to access the blog posts by creating a Python file (say recent_post_hook.py) with the following method:

def on_page_context(context, page, config, nav):
    if page.meta.get("template") != "home.html": return

    context["posts"] = config["plugins"]["material/blog"].blog.posts
    return context

2. Add it to mkdocs.yml:

hooks:
  - recent_post_hook.py

3. Access blog posts in a template. In my case, I needed to display the 5 recent blog posts (the blog posts seemed to be already in descending order of the creation date) at the end of the home page. I followed https://github.com/squidfunk/mkdocs-material/blob/master/src/templates/blog.html and modified accordingly to create a template: home.html:

{% extends "main.html" %}

<!-- Page content -->
{% block container %}
  <div class="md-content" data-md-component="content">
    <div class="md-content__inner">

      <!-- Header -->
      <header class="md-typeset">
        {{ page.content }}

        <!-- 5 recent posts -->
        <br>
        <h1>Posts</h1>
        <div class="custom_table">
          <table>
            <tbody>
              {% for post in posts[:5] %}
                <tr>  
                  <td>
                    <time datetime="{{ post.config.date.created }}">
                    {{- post.config.date.created | date -}}
                    </time>
                  </td>
                  <td><a href="{{ post.url }}">{{ post.title }}</a></td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
        <a class="pub_button pub_button_clickable" href="blog">All posts</a>
      </header>  
    </div>
  </div>
{% endblock %}

NOTE: CSS classes custom_table, pub_button and pub_button_clickable are part of custom stylesheets.

[kamilkrzyskow]

Good work 👍
You can have multiple instances of the blog plugin in your config or none at all. Each next instance would get a number like #2 added to the name.

So for anyone requiring this kind of case handling, you can use a guard condition to make sure it won't crash in the absence of the blog plugin and you can add a for loop together with another condition to choose another instance of the blog.

I wrote : return in one line for brevity in the list, but typically as per PEP 8 it should be on a new line with 4 spaces indent. ✌️