简体   繁体   中英

how to convert a logo of Navbar(logo, View('Home', ... from Flask-Nav module to a clickable link

in python code part (as app.py) in the part of menubar we can define our navebar as :

#      Define navbar with logo                        #
#######################################################
logo = img(src='/static/img/logo192.png', height="55",
           width="70", style="margin-top:-15px",
           )

# here we define our menu items
nav = Nav()

# registers the "top" menubar
nav.register_element('top', Navbar(logo,
                                   View('Home', 'index'),
                                   View('LogIn', 'login'),
                                   View('SignUp', 'signup'),
                                   ))

code part html in my template:

<body>
    <div class="navbar navbar-fixed-top">
        {% block navbar %}                
                {{nav.top.render()}}
        {% endblock %}
    </div>

a logo img is not clickable how can i make to render this image clickable to any link

it possible if we add a scripts to my template file

after adding a id attribute to <img :

#      Define navbar with logo                        #
#######################################################
logo = img(id='logo', src='/static/img/logo192.png', height="55",
           width="70", style="margin-top:-15px",
           )

and can change a <img tag to <a tag with js scripts as :

</body>

{% block scripts %}
  {{super()}}
<script>
 var initi = document.getElementById('logo').outerHTML;
 console.log(initi);
 var code =
    '<a id = "alogo" href="">' +
    initi +
    '</a>';
console.log(initi);
window.addEventListener('load', function(event) {
    document.getElementById('logo').outerHTML = code;
    document.getElementById('alogo').href ="{{ url_for('image_map') }}"
  });

</script>
{% endblock %}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM