Добавил черновой вариант пагинации и переделал шаблоны

music_storage/music/views.py

@@ -1,4 +1,5 @@
 from django import views as django_views
+from django.views.generic import ListView
 from django.shortcuts import render
 from django.http.request import HttpRequest
 from django.shortcuts import get_object_or_404
@@ -8,16 +9,27 @@ from music.models import Artist
 from music.models import Album
 
 
-class TrackListView(django_views.View):
+class TrackListView(ListView):
-    def get(self, request: HttpRequest, *args, **kwargs):
+    model = Track
-        tracks = Track.objects.all().select_related("album__artist",).order_by("id")
+    template_name = "music/track_list.html"
-        return render(request, "music/track_list.html", {"tracks": tracks})
+    context_object_name = "tracks"
+    paginate_by = 25
 
+    def get_queryset(self):
+        return (
+            super().get_queryset()
+                .select_related("album", "album__artist")
+                .order_by("id")
+        )
 
-class ArtistListView(django_views.View):
+class ArtistListView(ListView):
-    def get(self, request: HttpRequest, *args, **kwargs):
+    model = Artist
-        artists = Artist.objects.all()
+    template_name = "music/artist_list.html"
-        return render(request, "music/artist_list.html", {"artists": artists})
+    context_object_name = "artists"
+    paginate_by = 25
+
+    def get_queryset(self):
+        return super().get_queryset().order_by("id")
 
 
 class ArtistDetailView(django_views.View):
@@ -26,10 +38,14 @@ class ArtistDetailView(django_views.View):
         return render(request, "music/artist_detail.html", {"artist": artist})
 
 
-class AlbumListView(django_views.View):
+class AlbumListView(ListView):
-    def get(self, request: HttpRequest, *args, **kwargs):
+    model = Album
-        albums = Album.objects.all().order_by("id")
+    template_name = "music/album_list.html"
-        return render(request, "music/album_list.html", {"albums": albums})
+    context_object_name = "albums"
+    paginate_by = 25
+
+    def get_queryset(self):
+        return super().get_queryset().order_by("id")
 
 
 class AlbumDetailView(django_views.View):

music_storage/templates/components/album_list.html

@@ -2,8 +2,7 @@
 
 <link rel="stylesheet" href="{% static 'css/album_list.css' %}">
 
-<div class="container">
+<div class="album-container">
-    <div class="album-container">
     {% for album in albums %}
         <div class="album-card">
             <a href="{% url 'music:album_detail' album.id %}" class="album-link">
@@ -22,5 +21,4 @@
     {% empty %}
         <p>No albums available.</p>
     {% endfor %}
-    </div>
 </div>

music_storage/templates/components/artist_list.html

@@ -2,8 +2,7 @@
 
 <link rel="stylesheet" href="{% static 'css/artist_list.css' %}">
 
-<div class="container">
+<div class="artist-container">
-    <div class="artist-container">
     {% for artist in artists %}
         <div class="artist-card">
             <a href="{% url 'music:artist_detail' artist.id %}" class="artist-link">
@@ -23,5 +22,4 @@
     {% empty %}
         <p>No artists available.</p>
     {% endfor %}
-    </div>
 </div>

music_storage/templates/components/pagination.html

@@ -0,0 +1,11 @@
+{% if page_obj.has_previous %}
+    <a href="?page={{ page_obj.previous_page_number }}">← Назад</a>
+{% endif %}
+
+<span>
+    Страница {{ page_obj.number }} из {{ page_obj.paginator.num_pages }}
+</span>
+
+{% if page_obj.has_next %}
+    <a href="?page={{ page_obj.next_page_number }}">Вперёд →</a>
+{% endif %}

music_storage/templates/components/track_list.html

@@ -1,8 +1,8 @@
 {% load static %}
 
 <link rel="stylesheet" href="{% static 'css/track_list.css' %}">
-<div class="container">
+
-    <ul class="track-list">
+<ul class="track-list">
     {% if tracks %}
         {% for track in tracks %}
         <li class="track-item" data-track-id="{{ track.id }}" data-track-src="{{ track.file.url }}">
@@ -18,6 +18,5 @@
             <p>Нет добавленных треков</p>
         </div>
     {% endif %}
-    </ul>
+</ul>
-</div>
+
-{% include 'components/player.html' %}

music_storage/templates/music/album_list.html

@@ -3,5 +3,8 @@
 
 {% block content %}
 <h1>Album List</h1>
-{% include 'components/album_list.html' with albums=albums %}
+<div class="container">
+    {% include 'components/album_list.html' %}
+    {% include 'components/pagination.html' %}
+</div>
 {% endblock %}

music_storage/templates/music/artist_list.html

@@ -3,5 +3,8 @@
 {% block title %}Artist List{% endblock %}
 {% block content %}
 <h1>Artist List</h1>
-{% include 'components/artist_list.html' with artists=artists %}
+<div class="container">
+    {% include 'components/artist_list.html' with artists=artists %}
+    {% include 'components/pagination.html' with page_obj=page_obj %}
+</div>
 {% endblock %}

music_storage/templates/music/track_list.html

@@ -1,5 +1,9 @@
 {% extends 'base.html' %}
 
 {% block content %}
-{% include 'components/track_list.html' %}
+<div class="container">
+    {% include 'components/track_list.html' %}
+    {% include 'components/pagination.html' %}
+    {% include 'components/player.html' %}
+</div>
 {% endblock %}