Update article_list.html

_includes/article_list.html

@@ -1,18 +1,29 @@
-<div class="article-list">
-  {% for article in site.data.articles_data.articles %}
-    <div class="article-item">
-      <!-- 日付を最初に表示 -->
-      <p class="published-date">公開日: {{ article.published }}</p>
-
-      <!-- サムネイル画像を表示 -->
-      <a href="{{ article.url }}" target="_blank" rel="noopener noreferrer">
-        <img src="{{ article.image }}" alt="{{ article.title }}" class="thumbnail">
-      </a>
-
-      <!-- タイトルを表示 -->
-      <a href="{{ article.url }}" target="_blank" rel="noopener noreferrer">
-        <h3>{{ article.title }}</h3>
-      </a>
+<div class="topics-list">
+  {% for topic in site.data.articles_data.topics %}
+    <div class="topic">
+      <!-- お題目を表示 -->
+      <h2>{{ topic.title }}</h2>
     </div>
+
+    <div class="article-list">
+      {% for article in topic.articles %}
+        <div class="article-item">
+          <!-- 日付を最初に表示 -->
+          <p class="published-date">公開日: {{ article.published }}</p>
+
+          <!-- サムネイルとタイトルをリンク付きで表示 -->
+          <a href="{{ article.url }}" target="_blank" rel="noopener noreferrer">
+            <img src="{{ article.image }}" alt="{{ article.title }}" class="thumbnail">
+          </a>
+
+          <a href="{{ article.url }}" target="_blank" rel="noopener noreferrer">
+            <h3>{{ article.title }}</h3>
+          </a>
+        </div>
+      {% endfor %}
+    </div>
+
+    <!-- 各トピックの境界 -->
+    <hr>
   {% endfor %}
 </div>