Can I import the code I want to import by customizing some HTML

[W1ndys]

For example, I want to add the following code to my Mkdocs site

<style>
     @media (max-width: 768px) {
         #left_layer {
             display: none;
         }
     }

     @media (min-width: 769px) {
         #left_layer {
             position: fixed;
             bottom: 0;
             left: 0;
         }
     }
</style>

<div id="left_layer">
     <div id="sakana-widget"></div>
     <script>
         function initSakanaWidget() {
             new SakanaWidget().mount('#sakana-widget');
         }
     </script>
     <script async onload="initSakanaWidget()"
         src="https://cdn.jsdelivr.net/npm/[email protected]/lib/sakana.min.js"></script>
</div>

Can I set custom.html in overrides, partial, integrations (I don’t know which one to write in these three).

---

Question 2: Is the HTML naming under overrides strictly restricted, or can it be customized?

---

I've read these
#6888 (reply in thread)
#6911
But I still have some doubts. Please forgive my ignorance. I know I seem to have asked this question several times.

[W1ndys]

I seem to have made some new discoveries
I can add it directly to main.html, for example

{% extends "base.html" %}

{% block announce %}
The site is under construction. The site update will be postponed indefinitely until <font color="red">July 15th</font>. If you need to browse, please go to: <a href="https://blog.w1ndys .top/posts/216d9006/"
     target="_blank">https://blog.w1ndys.top/posts/216d9006/</a>
<!-- Add announcement here, including arbitrary HTML -->
{% endblock %}

<style>
     @media (max-width: 768px) {
         #left_layer {
             display: none;
         }
     }

     @media (min-width: 769px) {
         #left_layer {
             position: fixed;
             bottom: 0;
             left: 0;
         }
     }
</style>

<div id="left_layer">
     <div id="sakana-widget"></div>
     <script>
         function initSakanaWidget() {
             new SakanaWidget().mount('#sakana-widget');
         }
     </script>
     <script async onload="initSakanaWidget()"
         src="https://cdn.jsdelivr.net/npm/[email protected]/lib/sakana.min.js"></script>
</div>

is this correct?
It doesn’t seem possible to write it directly like this
I changed it again, as shown in the following code

{% block styles %}
{{ super() }}
<style>
    @media (max-width: 768px) {
        #left_layer {
            display: none;
        }
    }

    @media (min-width: 769px) {
        #left_layer {
            position: fixed;
            bottom: 0;
            left: 0;
        }
    }
</style>
{% endblock %}

{% block content %}
{{ super() }}
<div id="left_layer">
    <div id="sakana-widget"></div>
    <script>
        function initSakanaWidget() {
            new SakanaWidget().mount('#sakana-widget');
        }
    </script>
    <script async onload="initSakanaWidget()"
        src="https://cdn.jsdelivr.net/npm/[email protected]/lib/sakana.min.js"></script>
</div>
{% endblock %}

This seems to have achieved what I want, but I don't know if this modification is appropriate?

[alexvoss]

The reason why you had to put your code into the styles and content blocks is that base.html contains the htmltag, which you want your code to be inside of. If what you have here works then it all seems fine to me.

[W1ndys]

This is great, can I think that when I want to add some custom HTML, I just need to add it in main.html?

In addition, I also want to know whether the naming of the html template under overrides is strictly restricted. Can I just write an arbitrary name and use it?

[alexvoss]

whether the naming of the html template under overrides is strictly restricted

I refer you to the documentation. It does suggest that you can add more files but, of course, these would need to be included from your versions of the templates and partials to have an effect.

Re adding custom HTML, remember that it needs to be inside the html tag, which is in base.html. So, just adding more HTML code to main.html is not going to work unless you are overriding a block. If you want to learn how all of this works, have a look at the Jinja documentation.

[W1ndys]

I have read the contents of these documents, but I still don’t understand it. Can you give me some specific application examples to help me understand better (fixed and customized). I found that custom_dir contains a lot of content, such as js, img, HTML, I couldn't imagine these rich contents. I thought he could only use HTML.
Thank you so much for your reply, any help is greatly appreciated.