gpt4 book ai didi

python - 实现导航栏时,如何在 url 中没有很长的 html 列表?

转载 作者:行者123 更新时间:2023-11-28 16:17:59 24 4
gpt4 key购买 nike

我使用 base.html、styles.css 和 main.js 设计了一个导航栏。

我在里面使用了about.html和contact.html通过

{%block content%}
...
{%endblock%}

但是,例如,当我单击将我链接到“关于”的导航栏时,它将转到我所在的任何页面(例如联系页面,即 http://127.0.0.1:8000/contact/ ),然后添加 html ( http://127.0.0.1:8000/contact/about.html )

这导致我必须将很多 url 添加到 urls.py(例如 contact/about.html 和 about/about.html 只是为了进入关于页面)

有什么办法可以简化这个吗?

这是我的 urls.py:

from django.contrib import admin
from django.urls import path
from home.views import about, contact

urlpatterns = [
path('admin/', admin.site.urls),
path('about/', about),
path('contact/',contact),
]

这是我的 base.html:

<!DOCTYPE html>
<html lang="en">
<head>
{% load static %}
<link rel="stylesheet" href="{% static 'home/styles.css' %}">
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<title>{%block name%}{% endblock %}</title>
</head>

<body>
<header>
<nav>
<div class="logo">
<h4>Jinyang Zhang</h4>
</div>
<ul class="nav-links">
<li><a href="about.html">About</a></li>
<li><a href="#">My Work</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>

<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
{%block content%}
{%endblock%}
</header>
<script src="{% static 'home/main.js' %}"></script>
</body>
</html>

我希望它是,例如,当我从“联系”页面点击导航“关于”时,它会把我带到http://127.0.0.1:8000/about/。而不是 http://127.0.0.1:8000/contact/about.html

最佳答案

这是因为您在列表项中硬编码了您的网址。相反,使用 django 模板系统来解决您的问题并使您的代码整体更易于维护:

代替: <li><a href="about.html">About</a></li>

将其更改为: <li><a href="{% url 'about' %}">About</a></li>

然后在你的 urls.py 中命名你的 url:


urlpatterns = [
path('about/', about, name="about"),
]

已编辑:不要将 .html 扩展名放在“{% url %} 标记中。

随着元素的增长,您可以将 app_name 添加到 urls.py 文件中,并在 django 模板中以这种方式访问​​ url。

app_name = "appName"
urlpatterns = [
path('about/', about, name="about"),
]

然后在您的 html 中:

<li><a href="{% url 'appName:about' %}>About</a></li>
'''




关于python - 实现导航栏时,如何在 url 中没有很长的 html 列表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56470549/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com