|
19 | 19 | ) |
20 | 20 | %} |
21 | 21 |
|
22 | | -<div> |
| 22 | +{% if touch('Touch_Keyword') %} |
| 23 | + <h1 class="text-gray-900 text-2xl font-bold mb-8"> |
| 24 | + {{ KEYWORD }} の検索結果： |
| 25 | + |
| 26 | + {{ entrySummary.pagination.total }}件 |
| 27 | + </h1> |
| 28 | +{% endif %} |
| 29 | + |
| 30 | +<section> |
23 | 31 | {{ include('/admin/module/setting.twig', { moduleInfo: entrySummary.moduleInfo }) }} |
24 | 32 |
|
| 33 | + <h2 class="sr-only">記事一覧</h2> |
| 34 | + |
25 | 35 | {% if entrySummary.items is empty %} |
26 | 36 | <p class="text-gray-900 text-lg text-center"> |
27 | 37 | 記事が見つかりませんでした。 |
28 | 38 | </p> |
29 | 39 | {% endif %} |
30 | 40 |
|
31 | | - {% if touch('Touch_Keyword') %} |
32 | | - <p class="text-gray-900 text-2xl font-bold mb-8"> |
33 | | - {{ KEYWORD }} の検索結果： |
34 | | - |
35 | | - {{ entrySummary.pagination.total }}件 |
36 | | - </p> |
37 | | - {% endif %} |
| 41 | + {% if entrySummary.items is not empty %} |
| 42 | + {% if PAGE >= 2 %} |
| 43 | + <p class="sr-only"> |
| 44 | + {{ PAGE }}ページ目 |
| 45 | + </p> |
| 46 | + {% endif %} |
38 | 47 |
|
39 | | - <div class="grid grid-cols-12 pb-10 gap-y-8 gap-x-4 sm:gap-8"> |
40 | | - {% for entry in entrySummary.items %} |
41 | | - <div class="flex flex-col items-start space-y-3 col-span-12 {{ column_class|default('sm:col-span-6') }}"> |
42 | | - <a href="{{ entry.url }}" class="block w-full text-sm hover:opacity-70"> |
43 | | - {% if entry.mainImage.path %} |
44 | | - <img |
45 | | - src="{{ entry.mainImage.path|resizeImg(686, 386) }}" |
46 | | - width="343" |
47 | | - height="193" |
48 | | - alt="{{ entry.mainImage.alt }}" |
49 | | - loading="lazy" |
50 | | - decoding="async" |
51 | | - class="object-cover w-full mb-4 overflow-hidden rounded-md shadow-sm aspect-video" |
52 | | - /> |
53 | | - {% else %} |
54 | | - <img |
55 | | - src="/images/default/noimage.gif" |
56 | | - width="343" |
57 | | - height="193" |
58 | | - alt="画像なし" |
59 | | - loading="lazy" |
60 | | - decoding="async" |
61 | | - class="object-cover w-full mb-4 overflow-hidden rounded-md shadow-sm aspect-video" |
62 | | - /> |
63 | | - {% endif %} |
64 | | - <h2 class="mt-3 text-gray-900 text-lg font-bold line-clamp-2">{{ entry.title }}</h2> |
65 | | - <p class="mt-2 line-clamp-2"> |
66 | | - {{ entry.summary }} |
67 | | - </p> |
68 | | - <div class="flex items-center mt-2"> |
69 | | - <p class="text-gray-500"> |
70 | | - <time datetime="{{ entry.datetime|date('Y-m-d') }}">{{ entry.datetime|date('Y年m月d日') }}</time> |
| 48 | + <div class="grid grid-cols-12 pb-10 gap-y-8 gap-x-4 sm:gap-8"> |
| 49 | + {% for entry in entrySummary.items %} |
| 50 | + <article |
| 51 | + aria-labelledby="card-entry{{ entry.eid }}" |
| 52 | + class="col-span-12 {{ column_class|default('sm:col-span-6') }}" |
| 53 | + > |
| 54 | + <a href="{{ entry.url }}" class="block w-full hover:opacity-70"> |
| 55 | + {% if entry.mainImage and entry.mainImage.path %} |
| 56 | + <img |
| 57 | + src="{{ entry.mainImage.path|resizeImg(700) }}" |
| 58 | + width="700" |
| 59 | + height="{{ entry.mainImage.ratio|getHeightFromRatio(700) }}" |
| 60 | + alt="{{ entry.mainImage.alt }}" |
| 61 | + loading="lazy" |
| 62 | + decoding="async" |
| 63 | + class="object-cover w-full mb-4 overflow-hidden rounded-md shadow-sm aspect-video" |
| 64 | + /> |
| 65 | + {% else %} |
| 66 | + <img |
| 67 | + src="/images/default/noimage.gif" |
| 68 | + width="640" |
| 69 | + height="480" |
| 70 | + alt="" |
| 71 | + loading="lazy" |
| 72 | + decoding="async" |
| 73 | + class="object-cover w-full mb-4 overflow-hidden rounded-md shadow-sm aspect-video" |
| 74 | + /> |
| 75 | + {% endif %} |
| 76 | + <h3 id="card-entry{{ entry.eid }}" class="mt-3 text-gray-900 text-base md:text-lg font-bold line-clamp-2"> |
| 77 | + {{ entry.title }} |
| 78 | + </h3> |
| 79 | + <p class="mt-2 text-sm line-clamp-2"> |
| 80 | + {{ entry.summary }} |
71 | 81 | </p> |
72 | | - {% if entry.isNew %} |
73 | | - <p class="ml-2 px-2 py-1 rounded-full bg-gray-50 text-gray-900 text-xs"> |
74 | | - NEW |
| 82 | + <div class="flex flex-wrap items-center gap-x-2 gap-y-1 mt-2 text-sm"> |
| 83 | + <p class="text-gray-500"> |
| 84 | + <span class="sr-only">公開日</span><time datetime="{{ entry.datetime|date('Y-m-d') }}">{{ |
| 85 | + entry.datetime|date('Y年m月d日') |
| 86 | + }}</time> |
| 87 | + </p> |
| 88 | + {% if entry.isNew %} |
| 89 | + <p class="px-2 py-1 rounded-full bg-gray-50 text-gray-900 text-xs"> |
| 90 | + NEW |
| 91 | + </p> |
| 92 | + {% endif %} |
| 93 | + </div> |
| 94 | + {% if entry.category.items %} |
| 95 | + <p class="mt-2 text-gray-500 font-bold text-sm"> |
| 96 | + <span class="sr-only">カテゴリー</span>{{ entry.category.items[0].name }} |
75 | 97 | </p> |
76 | 98 | {% endif %} |
77 | | - </div> |
78 | | - {% if entry.category.items %} |
79 | | - <p class="mt-2 text-gray-500 font-bold"> |
80 | | - {{ entry.category.items[0].name }} |
81 | | - </p> |
82 | | - {% endif %} |
83 | | - {% if entry.tags %} |
84 | | - <ul class="flex flex-wrap gap-x-3 gap-y-1 mt-2 text-gray-500"> |
85 | | - {% for tag in entry.tags %} |
86 | | - <li>#{{ tag.name }}</li> |
87 | | - {% endfor %} |
88 | | - </ul> |
89 | | - {% endif %} |
90 | | - </a> |
91 | | - </div> |
92 | | - {% endfor %} |
93 | | - </div> |
| 99 | + {% if entry.tags %} |
| 100 | + <ul class="mt-2 flex flex-wrap gap-x-3 gap-y-1"> |
| 101 | + {% for tag in entry.tags %} |
| 102 | + <li class="text-gray-500 text-sm">#{{ tag.name }}</li> |
| 103 | + {% endfor %} |
| 104 | + </ul> |
| 105 | + {% endif %} |
| 106 | + </a> |
| 107 | + </article> |
| 108 | + {% endfor %} |
| 109 | + </div> |
| 110 | + {% endif %} |
| 111 | + |
94 | 112 | {{ include('/include/parts/pagination.twig', { pagination: entrySummary.pagination }) }} |
95 | | -</div> |
| 113 | +</section> |
0 commit comments