如何在 flask-nav 中用图像替换品牌文本

Question

通过导入 flask-nav 并使用以下命令，我的 flask-bootstrap 应用程序中显示了一个导航栏：

@nav.navigation()
def mynavbar():
    return Navbar(
        'MyCompany',
        View('Main', 'index'),
        View('Config', 'config'),
        View('Help', 'help')
    )

但我一辈子都找不到如何将文本 "MyCompany" 换成图像，例如img/mylogo.png 。谁能告诉我怎么做？

Answer 1

我对此并不完全满意，因为我认为解决方案应该简单得多，但这很有效：

import dominate
from dominate.tags import img

nav = Nav()
branding = img(src='static/img/myimage.png')

@nav.navigation()
def mynavbar():
    return Navbar(
    branding,
    View('Main', 'index'),
    View('Config', 'config'),
    View('Help', 'help')
)


nav.init_app(app)

仅将 html 字符串放入（例如 <img src="myimage.png">）的问题是字符串被打印出来，而不是被解释为应该显示的元素。 dominate 包似乎克服了这个问题。

Answer 2

我的回答不是 100% 完整，但到目前为止我已经完成了。我正在做的是根据网站显示图像

我创建了 nav.py 如下所示

nav = [
    {'name': 'Home', 'url': '/'},
    {'name': 'About', 'url': 'about'},
    # {'name': 'pycURL', 'url': 'pythoncurl'},
    {'name': 'Contact', 'url': 'contact'},
    # {'name': 'cartest', 'url': 'bob'},
    # {'name': 'socialtest', 'url': 'social'},
    {'name': 'Search', 'url': 'search'},
    # {'name': 'Searchtest2', 'url': 'search2'},
    {'name': 'layouttest', 'url': 'layouttest'},
    # {'name': 'Login', 'url': 'userauth'}
]

然后我将 nav 导入 views.py 并添加到每条路线（我还没有测试过没有将 nav 添加到每条路线）

@app.route('/social')
def social():
    """Renders the about page."""
    return render_template(
        'social.html',
        title='socialicons',
        year=datetime.now().year,
        message='test',
        #import nav
        nav=nav
    )

然后在 layout.html 我在 for 循环中调用 nav

    <ul class="nav navbar-nav">
        {% for link in nav %}
            <li><a href="{{ link.url }}" class="btn-large">{{ link.name }}</a></li>
        {% endfor %}
    </ul>

我将 layout.html 扩展到我想要应用布局的所有页面

{% extends 'layout.html' %}

在页面顶部

当我想添加一个新的 link 到导航时，几乎复制并粘贴一个新行并更改内容以匹配新路由，它将应用于每个页面。

为什么我回答这个问题是因为我现在正在做的事情就像你想要的一样，但我想让它在类似的系统中工作。我的目标是根据页面动态地将不同的图像应用到导航栏。

如何在 flask-nav 中用图像替换品牌文本

How to replace brand text with an image in flask-nav

python

flask-bootstrap

flask-nav