Одиночный дизайн страницы - загрузка нового контента по ссылке нажмите - PullRequest
Новая
       44

Одиночный дизайн страницы - загрузка нового контента по ссылке нажмите

0 голосов
/ 31 декабря 2018

Я работаю над веб-страницей 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 %}

Надеюсь, я четко объяснил, чего я пытаюсь достичь.Не могли бы вы указать мне правильное направление?

1 Ответ

0 голосов
/ 31 декабря 2018

Запросы и изменения страниц на одностраничных сайтах работают совершенно иначе, чем для обычных веб-страниц.Одностраничные сайты используют 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>

И обратные вызовы событий щелчка могут запрашивать контент с вашего сервера вместо того, чтобы жестко кодировать контент, как в этом примере.Обратите внимание, что тогда сервер должен отвечать только фрагментом HTML, а не всей новой страницей.

Например, вы можете использовать следующую функцию для получения содержимого для элемента div.content: 

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

Если вы новичок в работе с одностраничными сайтами, вы можете воспользоваться такой структурой, как React , Vue или Angular , чтобы начать и получитьлучшее понимание или даже использование для этого проекта.

...