как преобразовать логотип Navbar(логотип, View('Home', ... из модуля Flask-Nav в интерактивную ссылку

Question

как преобразовать логотип Navbar(логотип, View('Home', ... из модуля Flask-Nav в интерактивную ссылку

в части кода Python (как app.py) в части строки меню мы можем определить нашу панель навигации как:

      #      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'),
                                   ))

часть кода html в моем шаблоне:

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

логотип img не является интерактивным, как я могу сделать это изображение интерактивным для любой ссылки

0

javascript html clickable flask-bootstrap flask-nav

Источник

user14486150 07 ноя '21 в 02:00

1 ответ

Решение

Другие вопросы по тегам javascript html clickable flask-bootstrap flask-nav

user14486150 07 ноя '21 в 02:00 2021-11-07 02:00 · Accepted Answer · 2021-11-07 02:00

это возможно, если мы добавим скрипты в мой файл шаблона

после добавления атрибута id в <img:

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

и может изменить тег <img на <тег с js-скриптами как:

      </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 %}