如何在django-material布局菜单中集成根目录视图（仿demo.viewflow.io）

AI 小北

2026-5-20

我来帮你搞定这个问题！刚好我对Django+ViewFlow+django-material这套组合的配置比较熟悉，你要实现的效果其实分路由配置和菜单集成两部分，我一步步给你讲，顺便纠正几个容易踩的坑：

1. 把视图/应用挂载到根域名（`http://example.com/`）

Django的路由匹配是从项目根目录的urls.py开始的，要让根路径指向你的"Introduction"视图，分两种情况：

情况1：直接映射单个视图

如果你的Introduction是一个单独的类视图或函数视图，直接在项目根urls.py里加一行：

from django.urls import path
from your_app.views import IntroductionView  # 替换成你实际的视图路径

urlpatterns = [
    path('admin/', admin.site.urls),  # 保留你的admin路由
    # 根路径直接指向目标视图，记得给路由起个名字，后面菜单要用到
    path('', IntroductionView.as_view(), name='introduction'),
    # 其他路由（比如ViewFlow的流程路由）
    path('workflow/', include('viewflow.urls')),
]

情况2：挂载整个App到根路径

如果你的功能是一个完整的App，想把App下的所有路由都挂在/下，就用include：

from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    # 把你的App的urls挂载到根路径
    path('', include('your_app.urls')),
]

然后在你的App的urls.py里定义具体路由：

from django.urls import path
from .views import IntroductionView, OtherView

urlpatterns = [
    path('', IntroductionView.as_view(), name='introduction'),  # 根路径指向Introduction
    path('other-page/', OtherView.as_view(), name='other'),  # 其他子页面
]

踩坑提醒：

别给根路由加多余的斜杠，path('', ...)就已经匹配/了，加'/'反而会出问题
路由的name='introduction'一定要加，后面菜单生成链接全靠它

2. 把入口加到django-material的导航菜单

因为你参考的是ViewFlow的demo，它用的是django-material的模板系统，这里分两种配置方式：

方式1：自定义django-material导航栏（通用方法）

如果你的项目用了django-material的基础模板，可以自己扩展它来加菜单：

新建一个自定义base模板（比如your_app/templates/base.html），继承django-material的base：

{% extends 'material/base.html' %}

{% block navbar %}
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="{% url 'introduction' %}">你的站点名称</a>
            <div class="collapse navbar-collapse">
                <ul class="navbar-nav mr-auto">
                    <!-- 你的Introduction菜单，当前页面会高亮 -->
                    <li class="nav-item {% if request.resolver_match.view_name == 'introduction' %}active{% endif %}">
                        <a class="nav-link" href="{% url 'introduction' %}">Introduction</a>
                    </li>
                    <!-- 其他菜单项，比如ViewFlow的流程、Admin -->
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'viewflow:index' %}">Workflows</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/admin/">Admin</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
{% endblock %}

确保你的视图模板都继承这个自定义base，或者在settings.py的TEMPLATES里把你的模板目录加到DIRS里，让Django能找到它。

方式2：用ViewFlow的菜单API（如果你用了ViewFlow）

ViewFlow已经和django-material集成好了，直接注册菜单项就行，在你的App的views.py或者urls.py里加：

from viewflow.menu import Menu, Item

# 注册Introduction菜单到导航栏
Menu.add_item(
    Item(
        label='Introduction',
        icon='home',  # 可选，用django-material的图标
        viewname='introduction',  # 对应你之前路由的name
        order=0  # 控制菜单顺序，0表示排在最前面
    )
)

这样菜单会自动出现在导航栏里，和demo.viewflow.io的效果完全一致。

踩坑提醒：

一定要保证viewname和路由的name完全一致，大小写都不能错，不然菜单链接会报错
如果用自定义模板，别忘了加高亮判断，这样用户能清楚看到当前所在页面

最后验证一下

启动开发服务器python manage.py runserver，访问http://localhost:8000/：

应该直接看到你的Introduction视图内容
导航栏里的Introduction菜单能正常跳转，当前页面还会高亮

如果还是有问题，先检查路由拼写、模板继承是否正确，静态文件有没有加载（django-material需要CSS/JS，开发环境下要确保DEBUG=True）。

内容的提问来源于stack exchange，提问作者jeki