Announcement about the homepage

[W1ndys]

I noticed that in the official website document of material, there is no announcement on the homepage, but there is on other pages. How is this achieved?

I've looked at docs/index.md and src/overrides/home.html but I don't find any information

[W1ndys]

I seem to have discovered the key point, is it here?
https://github.com/squidfunk/mkdocs-material/blob/fdeafbb875fe7cf340da429c90e8eaa965e9663e/src/overrides/home.html#L32C1-L59C6

[kamilkrzyskow]

The front page (https://squidfunk.github.io/mkdocs-material/) source code is only visible on the Insiders branch, limited to sponsors.
https://github.com/squidfunk/mkdocs-material-insiders/tree/master/src/overrides
The code you found is the community version of the page which is visible when you mkdocs serve the files yourself.

[W1ndys]

I seem to have found some settings
https://squidfunk.github.io/mkdocs-material/setup/setting-up-a-blog/?h=template#overriding-templates
https://squidfunk.github.io/mkdocs-material/reference/#setting-the-page-template

Ahahaha, I thought this was a sponsored feature at first

[kamilkrzyskow]

The template: custom.html is a feature of MkDocs itself and not related to the theme. As for the blog template, there are further iterations of it in Insiders: https://squidfunk.github.io/mkdocs-material/insiders/#goals but the basic version is available in the community version, since a while now.

[W1ndys]

But I read the document for a long time and didn't learn how to replace index.html. I just did the following, but the homepage still had no effect.

this is a test html

And this index.md

But nothing changes on my homepage

[W1ndys]

Oh oh oh oh oh oh, I have implemented the replacement of HTML, but I still haven’t learned how to replace this template based on the variables of material. In other words, I don’t know how to replace the homepage to a state that is fully integrated with material. , I would just replace a complete HTML hardcoded file
If you have time, thank you very much for providing me with some information

[kamilkrzyskow]

Like I explained in:

• How to configure custom analytics - 51la #6888 (reply in thread)

the Jinja template is divided into "blocks" which are predefined in the base.html file, and main.html (the entry point) extends the base.html allowing to override and replace the blocks.

When you set template: home.html you should extend main.html to have access to your default overrides of base.html and then override them again for the announce block: {% block announce %}{% endblock %}. Just leave it empty to "remove it" on the home page.

[W1ndys]

@kamilkrzyskow
Thank you for your reply. I have read all your replies. Another question is that if I not only want to close the announcement on the homepage, I also want to set the homepage as a custom page, just like the start page of material. Is this a sponsored exclusive feature? If not, what should I do?

[kamilkrzyskow]

Another question is that if I not only want to close the announcement on the homepage, I also want to set the homepage as a custom page, just like the start page of material.

I don't understand. You can set the template: home.html in any .md file, index.md or special-page.md, and it will be rendered according to the template you provided. So the template without the announce block can be used on the homepage and custom page.

Recently in #6853 a user provided his docs and they also use a custom home.html, maybe it will be sufficient as reference:

• https://github.com/mer0x/merox.cloud/blob/master/assets/home.html

If not provide more details about your use case. How is the homepage different from the custom page?

[W1ndys]

Thank you, this is very helpful to me.

[condor-the-bird]

I still don't see an easy way to configure a landing. Really. I managed everything: snippets, sorting tables, tabs, but this escapes me. I don't get it, sorry. Doesn't work.

[condor-the-bird]

Ps: it would be cool to have a generic example, let it be a blank page with placeholders for the top menu.

[A3Bagged]

A home.html pretty much is a blank page. Anything inside {% block tabs %} can be used as homepage, you can see it as a second content container. Pretty much like:

{#-
  This file was automatically generated - do not edit
-#}
{% extends "main.html" %}
{% block styles %}
  {{ super() }}
  <link rel="stylesheet" href="{{ 'assets/stylesheets/home.css' | url }}">
  <!-- load here any .css files you want to use for the homepage, these only get loaded on this page -->
{% endblock %}
{% block tabs %}
  {{ super() }}
  <!-- Put here your new homepage -->
{% endblock %}

Where it says <!-- Put here your new homepage --> you can pretty much start off with a new container, that's what i did.

{% block tabs %}
  {{ super() }}
  <style>.md-header{position:initial}.md-main__inner{margin:0}.md-content{display:none}@media screen and (min-width:60em){.md-sidebar--secondary{display:none}}@media screen and (min-width:76.25em){.md-sidebar--primary{display:none}}</style>
  <section class="lp-container">
      {% include "partials/hero.html" %}
      {% include "partials/features.html" %}
      {% include "partials/components.html" %}
      {% include "partials/faq.html" %}
      {% include "partials/calltoaction.html" %}
  </section>
{% endblock %}

To split up things in multiple html files so you don't have one long code, you can include them using {% include "filename.html" %} i think these are part of Django template language. This is not necessary but it will help if you ever have to look through your code to split it up in sections, plus you can enable/disable parts of your homepage by just commenting out one section.

[squidfunk]

@condor-the-bird Please understand that we're currently focusing on foundational work. This also includes making customization of the landing page easier, and in general, to provide better templates that can be configured/customized in minutes.

We understand that the situation is currently not ideal and requires too much web dev knowledge, and we're working on it.