Blog on root level supported?

[odin568]

Hey,
I use mkdocs material for multiple technical documentations. It rocks!
Now I am thinking to add it also for a regular homepage of our fire department as there is not so much content that it deserves a full blown CMS. Dynamic parts are anyhow integrated as iframe.

So what we mainly have is a list of news, where I would use the blog feature.

Now my question: I can follow the docs and create a blog in the "blog" folder, which is then shown as "Blog" as a section in the top bar.
In the sidebar I then have the blog, archive and categories - all fine, see screenshot:

But I would like to have this on the root page. So I moved everything into the docs folder directly (the index.md, the posts folder and the demo post) and configured it with blog_dir: .

Now I get the blog on the landing page, but I get the archive and categories in the section on top and not in the sidebar:

What am I doing wrong?

[alexvoss]

Hi, the instructions in the blog post announcing the blog plugin give me the arrangement you are looking for. Have a look to see what the differences are in the mkdocs.yml that you are using and the one shown there.

[squidfunk]

Jup, you just need to remove navigation.tabs from theme.features

[odin568]

Ok, got it thanks!

You are right, removing navigation.tabs solved it in a way.

But then I of course don't have tabs anymore. 😄 So there is no possibility to have the blog with "blog sections" on the left bar on the home but for other folders the usual section behavior on tab bar?

[squidfunk]

I don't have the time to test this, but something like the following might work. Keep navigation.tabs move the blog to the root, and then specify navigation something like the following:

plugins:
  - blog:
      blog_dir: .
nav:
  - Blog:
    - index.md
  - Non-Blog-Section:
    - ...
  - ...

The blog plugin should the attach the categories and archive pages to the Blog subsection, and allow you to add additional sections in the navigation tabs. Again, I haven't tested this, but maybe somebody else could try and help.

[alexvoss]

I think I might try and turn that into one of our worked examples today.

[alexvoss]

I created a draft PR for the example at mkdocs-material/examples#14. @odin568, if you have a spare moment, can you have a look and check if this does what you imagined? Just

• clone the examples repository locally,
• change into it and git switch standaloneblog
• change into examples/blog-standalone
• and run mkdocs serve.

The README file is rendered at http://localhost:8000 while the actual example is at http://localhost:8000/demo/.

[odin568]

Yeah, works like a charm!

It's not a downside for me, but I then have to use the nav section in configs to control it. But this is perfectly fine. In tech documentations always avoided it and simply took the folder names.

Great for your awesome support @squidfunk and @alexvoss !!

[odin568]

So far everything works as said, I just found out one glitch, not sure if it can be resolved.
It only happens, when I'm on the mobile phone. When I open the burger menu, I see the blog sections if I open the homepage with the blog on the root:

Ideally, I would see the sections in thise case:

You may have a look also on yourself: https://ffw-baudenbach.de

Is there anything I can do? It might be misleading if opening the homepage from mobile phone that you first need to first click the "back" arrow to see the "regular menu".

[squidfunk]

This is working as intended. The mobile navigation currently works in layers, and when you open it, the active layer is on top, similar to how the active section is expanded on desktop. I'm actually thinking about restructuring the mobile navigation to work more like the desktop one, but we currently have other priorities, so it's a "likely in the future" for now.

[alexvoss]

The answer with Material for MkDocs is rarely that you can't. I don't think what you are looking for can be done with changes to the mkdocs.yml alone. You would need to replace the left-hand side navigation on the homepage with the blog navigation. You can do this by overriding the site_nav block.