Question

我正在使用单页设计方法来开发django网页。通常，我要实现的目标是单击某些链接后将一些新内容（图片库）加载到我的主网页上。

我已经实现的是，新内容正在通过链接单击加载，但是不幸的是，好像整个页面都在重新加载并且呈现不正确。我当前的实现基于拥有index.html关系的主{% block content %}模板和扩展模板。

views.py

def index(request):
    categories = Category.objects.all().order_by('name')
    return render(request, 'index.html', {'categories': categories})

def gallery(request, id):
   category = Category.objects.get(id=id)
   return render(request, 'gallery.html', {'category': category})

urls.py

urlpatterns = [
    path('', views.index, name='index'),
    path('view_gallery/<int:id>/', views.gallery, name='view_gallery')
]

index.html

<div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
        {% for category in categories%}
        <li class="nav-item">
            <a class="nav-link" href="{% url 'view_gallery' category.id %}">{{ category.name }}</a>
        </li>
        {% endfor %}  
    </ul>
</div> 
<div>
    {% block content %}
    {% endblock %}
</div>

gallery.html

{% extends 'index.html' %}

{% block content %}
    <p>{{ category.name }}</p>
{% endblock %}

我希望我已经清楚地解释了我要实现的目标。你能指出我正确的方向吗？

Answer 1

单个页面站点中的请求和页面更改的工作方式与普通网页完全不同。单页站点使用JavaScript更改页面内容，而不是从服务器请求新页面。单页站点可以从服务器请求内容，但是通常，内容只是数据，而页面的结构（HTML）由客户端使用JavaScript决定。服务器发送完整HTML页面的唯一时间是在初始请求上，应使用index.html进行响应。

在您的示例中，您可以通过添加脚本来完成这项工作，该脚本从服务器请求内容，并在单击链接时修改DOM。

例如：

const a1 = document.querySelector("a.link1");
const a2 = document.querySelector("a.link2");

a1.addEventListener("click", () => {
  setContent("<p>Content from link 1</p>")
});

a2.addEventListener("click", () => {
  setContent("<p>Content from link 2</p>")
});


function setContent(content) {
   const contentDiv = document.querySelector("div.content");
   contentDiv.innerHTML = content;
}

a {
  text-decoration: underline;
  color: blue;
}

a:hover {
  cursor: pointer;
}

<h1>My Page</h1>

<a class="link1">link 1</a>
<a class="link2">link 2</a>

<div class="content">
</div>

并且click事件回调可以从您的服务器请求内容，而不是像本示例中那样对内容进行硬编码。请注意，然后服务器应仅以HTML片段而不是整个新页面作为响应。

例如，您可以使用以下函数来获取div.content元素的内容：

function fetchData() {
    const response = fetch("/gallery");
    return response;
}

如果您不熟悉单页网站，则可以签出React，Vue或Angular之类的框架，以开始使用并获得更好的了解，甚至为此使用项目。

单页设计-单击链接加载新内容

1 个答案: