# 123: Создание архива видео, часть 2 (Навигация) - CSS-хитрости

Anonim

Мы только что закончили захватывающую часть этого редизайна, когда нам нужно было выбросить кучу грубой разметки на странице видеоархивов и заменить ее новой, умной, чистой, автоматически созданной разметкой. Но над этими страницами архивов нам предстоит еще поработать. Поскольку архивы будут автоматически сгенерированы в группы, нам нужна навигация (на самом деле разбивка на страницы), чтобы перейти к более старым группам скринкастов.

В прошлом, поскольку мы вручную писали всю разметку, мы могли сделать эту разбивку на страницы статической частью страницы. Я не возражаю против этого, но сейчас это просто невозможно. Когда мы сейчас публикуем новый скринкаст, он переносит один скринкаст с конца первой страницы на вторую. Таким образом, высказывание чего-то вроде «# 115 - # 95» в статическом коде будет точным только в течение очень короткого промежутка времени.

Сначала мы получаем правильный стиль, используя некоторые классы навигации с черной полосой, которые мы использовали в других местах (например, на отдельных страницах фрагментов).

Затем мы приступаем к тому, чтобы нумерация страниц действительно работала. В WordPress вы можете добавить к URL-адресу что-то вроде «/ page / 2», и он по-прежнему будет отображать ту же страницу, что и раньше, только он предоставит вам доступ к глобальной переменной с именем $ paged, для которой будет установлено значение «2». ». Мы могли бы использовать это число в нашем запросе, чтобы настроить, какие видео мы показываем. Но вместо того, чтобы делать это таким образом, WordPress предлагает еще более умный способ справиться с этим, и это добавление 'paged' => $pagedк запросу. Это объясняет некоторую забавную математику, которая происходит, когда мы пытаемся справиться с компенсацией самостоятельно.

Мы корректируем URL-адреса в нашей статической навигации, чтобы отразить эти новые ссылки в стиле пагинации. Проблема в том, что числа в ссылках больше не точны. Сначала мы пробуем что-нибудь простое, например «5, 4, 3, 2, 1». Но это кажется немного неуместным и скучным, а также просто сбивает с толку, поскольку эти числа не будут соответствовать фактическим номерам нумерации страниц.

Мы обнаруживаем странный порядок видео, который немного беспокоит. Мы корректируем запрос в том, как он их упорядочивает, но все же есть некоторые проблемы. В конечном итоге мы решили, что нам нужно будет отсортировать их по дате, и некоторые корректировки дат публикации скринкастов необходимо будет внести после того, как сайт будет запущен. Ворчун, но хорош на долгий срок.

В конечном итоге (я считаю, вне видео) мы в конечном итоге используем пагинацию в греческом стиле (Alpha, Beta, Gamma), которая работает по своему произволу (вроде как наши произвольные имена трех медведей для медиа запросов). Например, «Зета» звучит позже и имеет более темно-серый цвет, так что метафора «старше» завершена.