Hu go: как добавить класс к последнему посту? - PullRequest
Новая
       76

Hu go: как добавить класс к последнему посту?

0 голосов
/ 08 мая 2020

Я использую этот baseof.html, чтобы добавить класс first-post к тегу body, чтобы я мог использовать Speci c CSS в первом посте серии постов, разбитых на страницы: 

<body class="
{{ with where site.RegularPages "Type" "posts" }}
{{ $first_post = index . 0 }}
{{ if eq $first_post $ }}
first-post
{{ end }}
{{ end }}
">

Но как мне добавить класс для последнего поста? При этом я получаю сообщение об ошибке «Невозможно перебрать * hugolib.pageState»: 

<body class="
{{ with where site.RegularPages "Type" "posts" }}
{{ $last_post := last 1 $ }}
{{ if eq $last_post $ }}
last-post
{{ end }}
{{ end }}
">

Документы для last: https://gohugo.io/functions/last/

1 Ответ

1 голос
/ 09 мая 2020

ЛЭ: Я перечитал ваш вопрос и понял, что изначально неправильно понял вашу цель. Я переделал ответ, надеюсь, на этот раз я понял его правильно.

Для добавления класса CSS к элементу во время их итерации, т.е. отображения нескольких на одной странице, я сохранил старый ответ ниже.

Чтобы добавить класс на собственную страницу элемента, в зависимости от его позиции в глобальном списке, попробуйте следующее.

Список и сортировка

Округлите элементы в $allPosts. По умолчанию я думаю, что они отсортированы по .Date по убыванию, т.е. сначала самые новые. Чтобы задать собственный заказ или критерии, вы можете использовать sort. 

{{ $allPosts := where site.RegularPages "Type" "posts" }}
{{ $allPostsByDate := sort $allPosts ".Date" "asc" }}

Интересующие страницы

Получите какие-либо особенные предметы. Для первого и последнего вы можете использовать соответствующие встроенные функции; оба first и last возвращают массивы с одним элементом (в данном случае страница), поэтому для извлечения одного элемента вы можете использовать index. 

{{ $firstPost := index (first 1 $allPostsByDate) 0 }}
{{ $lastPost := index (last 1 $allPostsByDate) 0 }}

Сравнить с текущей страницей

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

Я не знаю Hu go так хорошо, чтобы сказать, если есть лучший способ сравнить две страницы, но .Permalink s кажутся достаточно хорошими. 

{{ if eq $firstPost.Permalink $.Permalink }} first-post {{ end }}
{{ if eq $lastPost.Permalink $.Permalink }} last-post {{ end }}

Все в целом

Отображение всего списка для визуализации того, что к чему. 

  {{ $allPosts := where site.RegularPages "Type" "posts" }}
  {{ $allPostsByDate := sort $allPosts ".Date" "asc" }}

  {{ $firstPost := index (first 1 $allPostsByDate) 0 }}
  {{ $lastPost := index (last 1 $allPostsByDate) 0 }}

  {{/* on the single page */}}
  {{ .Title }} &mdash;
  {{ if eq $firstPost.Permalink $.Permalink }} first-post {{ end }}
  {{ if eq $lastPost.Permalink $.Permalink }} last-post {{ end }}

  <br><br>

  {{/* on a list */}}
  {{ range $allPostsByDate }}
    <a href="{{ .Permalink }}">{{ .Title }}</a>
    {{ if eq $firstPost.Permalink .Permalink }} first-post {{ end }}
    {{ if eq $lastPost.Permalink .Permalink }} last-post {{ end }}
    <br>
  {{ end }}

Старый ответ

Использование Hu go последний

Думаю, здесь есть опечатка? Я не могу сейчас протестировать, но я бы сказал, что вам нужна точка вместо вопросительного знака. Не знаю, что это за переменная $, если это что-то в Hu go. Фактически, это объяснило бы ошибку. last ожидает, что второй аргумент будет массивом, а вы даете ему PageState. Вероятно, это должно быть примерно так: 

{{ $last_posts := last 1 . }}
{{/* This will give you an array of length 1, over which you then have to iterate. */}}
{{ $last_post := index $last_posts 0 }}
{{/* or */}}
{{ range $last_posts }}
{{/* last post here */}}
{{ . }}
{{ end }}

Использование Hu go len

Следуя тому же шаблону, вы можете получить последний индекс через длину массива. Hu go s len функция 

{{ $last_index := (len .) - 1 }}
{{ last_post := index . $last_index }}

Использование CSS

Вы можете полностью отказаться от индивидуальной обработки первого и последнего постов из шаблоны и используйте псевдоклассы CSS, например

Таким образом, ваша оболочка сообщений может иметь класс .posts CSS, а затем в ваших таблицах стилей вы можете иметь что-то вроде 

.posts:first-child {
  /* first post, make it pop */
  border-top: 1px dashed red;
}

.posts:last-child {
  /* last post, make room */
  border-bottom: 1px dashed black;
}

Однако таким образом вы переносите вычисление на клиент. Я действительно не думаю, что это такие интенсивные вычисления, особенно с только первым / последним, но это то, что нужно учитывать.

...