daisyui/summary5.html at main · kazumich/daisyui · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
@extends("/_layouts/one-column.html")

@section("topic-path")
@endsection

@section("main")

      <h2 class="text-3xl font-extrabold">Sample Summary5</h2>

      <ul class="menu menu-horizontal pb-5 px-0">
        <li><a href="summary1.html">1</a></li>
        <li><a href="summary2.html">2</a></li>
        <li><a href="summary3.html">3</a></li>
        <li><a href="summary4.html">4</a></li>
        <li><a href="summary5.html">5</a></li>
        <li><a href="summary6.html">6</a></li>
      </ul>


      <section class="max-w-4xl mx-auto overflow-x-auto pr-[10%]">
        <div class="relative" role="region" aria-roledescription="carousel" aria-label="ニュースカルーセル">
          <div class="flex flex-nowrap">
<!-- BEGIN_MODULE Entry_Summary id="summary_index" -->
<!-- BEGIN unit:loop --><!-- BEGIN entry:loop -->
            <article role="group" aria-roledescription="slide" class="flex-none w-[280px] pr-6">
              <a href="#" class="block mb-5 sm:mb-6 focus:outline-none">
                <figure>
                  <div class="w-full overflow-hidden">
                    <!-- BEGIN_IF [{path}/nem] -->
      <img src="%{ROOT_DIR}{path}[resizeImg({x}, {y})]" alt="{alt}" class="aspect-video size-full rounded-image object-cover" width="{x}" height="{y}">
      <!-- ELSE --><!-- BEGIN noimage -->
      <img src="/images/noimage.png" alt="" class="aspect-video size-full rounded-image object-cover" width="{noImgX}" height="{noImgY}"><!-- END noimage -->
      <!-- END_IF -->
                  </div>
                  <figcaption class="py-3">
                    <div class="flex items-center justify-between mb-1">
                      <p class="text-sm">{date#Y}年{date#m}月{date#d}日</p>
                      <!-- BEGIN categoryField --><p class="text-sm font-semibold max-w-[50%] truncate text-right" title="{fieldCategoryName}">
                       {fieldCategoryName}
                      </p><!-- END categoryField -->
                    </div>
                    <h5 class="text-xl font-bold line-clamp-2">
                      {title}
                    </h5>
                    <p class="text-sm pt-2 line-clamp-3">
                      {summary}
                    </p>
                  </figcaption>
                </figure>
              </a>
            </article>
<!-- END entry:loop -->
<!-- END unit:loop -->
<!-- END_MODULE Entry_Summary -->


            <article role="group" aria-roledescription="slide" class="flex-none w-[280px] pr-6">
              <a href="#" class="block mb-5 sm:mb-6 focus:outline-none">
                <figure>
                  <div class="w-full overflow-hidden">
                    <img src="../images/yoko2.jpg"
                         alt="記事のプレビュー画像"
                         class="aspect-video size-full rounded-image object-cover" />
                  </div>
                  <figcaption class="py-3">
                    <div class="flex items-center justify-between mb-1">
                      <p class="text-sm">2025年3月30日</p>
                      <p class="text-sm font-semibold max-w-[50%] truncate text-right" title="とても長いカテゴリー名がここに入る場合でも省略されます">
                        とても長いカテゴリー名がここに入る場合でも省略されます
                      </p>
                    </div>
                    <h5 class="text-xl font-bold line-clamp-2">
                      記事のタイトルが、とても長い時にはどうなる？ ここでは2行まで
                    </h5>
                    <p class="text-sm pt-2 line-clamp-3">
                      概要文は何文字表示されるかのテストです。概要文は何文字表示されるかのテストです。概要文は何文字表示されるかのテストです。
                    </p>
                  </figcaption>
                </figure>
              </a>
            </article>
            <article role="group" aria-roledescription="slide" class="flex-none w-[280px] pr-6">
              <a href="#" class="block mb-5 sm:mb-6 focus:outline-none">
                <figure>
                  <div class="w-full overflow-hidden">
                    <img src="../images/yoko3.jpg"
                         alt="記事のプレビュー画像"
                         class="aspect-video size-full rounded-image object-cover" />
                  </div>
                  <figcaption class="py-3">
                    <div class="flex items-center justify-between mb-1">
                      <p class="text-sm">2025年3月30日</p>
                      <p class="text-sm font-semibold max-w-[50%] truncate text-right" title="とても長いカテゴリー名がここに入る場合でも省略されます">
                        とても長いカテゴリー名がここに入る場合でも省略されます
                      </p>
                    </div>
                    <h5 class="text-xl font-bold line-clamp-2">
                      記事のタイトルが、とても長い時にはどうなる？ ここでは2行まで
                    </h5>
                    <p class="text-sm pt-2 line-clamp-3">
                      概要文は何文字表示されるかのテストです。概要文は何文字表示されるかのテストです。概要文は何文字表示されるかのテストです。
                    </p>
                  </figcaption>
                </figure>
              </a>
            </article>
            <article role="group" aria-roledescription="slide" class="flex-none w-[280px] pr-6">
              <a href="#" class="block mb-5 sm:mb-6 focus:outline-none">
                <figure>
                  <div class="w-full overflow-hidden">
                    <img src="../images/tate1.jpg"
                         alt="記事のプレビュー画像"
                         class="aspect-video size-full rounded-image object-cover" />
                  </div>
                  <figcaption class="py-3">
                    <div class="flex items-center justify-between mb-1">
                      <p class="text-sm">2025年3月30日</p>
                      <p class="text-sm font-semibold max-w-[50%] truncate text-right" title="とても長いカテゴリー名がここに入る場合でも省略されます">
                        とても長いカテゴリー名がここに入る場合でも省略されます
                      </p>
                    </div>
                    <h5 class="text-xl font-bold line-clamp-2">
                      記事のタイトルが、とても長い時にはどうなる？ ここでは2行まで
                    </h5>
                    <p class="text-sm pt-2 line-clamp-3">
                      概要文は何文字表示されるかのテストです。概要文は何文字表示されるかのテストです。概要文は何文字表示されるかのテストです。
                    </p>
                  </figcaption>
                </figure>
              </a>
            </article>
            <article role="group" aria-roledescription="slide" class="flex-none w-[280px] pr-6">
              <a href="#" class="block mb-5 sm:mb-6 focus:outline-none">
                <figure>
                  <div class="w-full overflow-hidden">
                    <img src="../images/yoko4.jpg"
                         alt="記事のプレビュー画像"
                         class="aspect-video size-full rounded-image object-cover" />
                  </div>
                  <figcaption class="py-3">
                    <div class="flex items-center justify-between mb-1">
                      <p class="text-sm">2025年3月30日</p>
                      <p class="text-sm font-semibold max-w-[50%] truncate text-right" title="とても長いカテゴリー名がここに入る場合でも省略されます">
                        とても長いカテゴリー名がここに入る場合でも省略されます
                      </p>
                    </div>
                    <h5 class="text-xl font-bold line-clamp-2">
                      記事のタイトルが、とても長い時にはどうなる？ ここでは2行まで
                    </h5>
                    <p class="text-sm pt-2 line-clamp-3">
                      概要文は何文字表示されるかのテストです。概要文は何文字表示されるかのテストです。概要文は何文字表示されるかのテストです。
                    </p>
                  </figcaption>
                </figure>
              </a>
            </article>
          </div>
        </div>
      </section>
@endsection