Style topics similarly to tags

web/themes/custom/agarica/patternlibrary/agaric/templates/field/field--field-topics.html.twig

@@ -0,0 +1,31 @@
+{#
+/**
+ * @file
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - label_hidden: Whether to show the field label or not.
+ * - title_attributes: HTML attributes for the title.
+ * - label: The label for the field.
+ * - multiple: TRUE if a field can contain multiple items.
+ * - items: List of all the field items. Each item contains:
+ *   - attributes: List of HTML attributes for each item.
+ *   - content: The field item's content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display settings for the label.
+ *
+ * @see template_preprocess_field()
+ */
+#}
+
+<div class="flow_middle">
+  <h3 class="more-about-label subtitle is-mono is-5">Topic{% if items|length > 1 %}s{% endif %}</h3>
+  <p class="more-about-tags">
+  {% for item in items %}
+    {% if loop.length > 1 and loop.index == loop.length %}and {% endif %}
+    {{ item.content }}{% if loop.length > 2 and not loop.last %}, {% endif %}
+  {% endfor %}
+  </p>
+</div>

web/themes/custom/agarica/patternlibrary/agaric/templates/layout/node--full.html.twig

@@ -166,6 +166,10 @@
       {% if content.field_tags is not empty %}
         {{ content.field_tags }}
       {% endif %}
+
+      {% if content.field_topics is not empty %}
+        {{ content.field_topics }}
+      {% endif %}
     </div>
     {{content.indieweb_syndication}}
   </div>
@@ -174,7 +178,7 @@
 </article>{# end h-entry article #}
 
 <!-- Unexpected extra content -->
-{{ content|without('field_body_paragraph', 'field_authors', 'field_tags', 'uid', 'created', 'comment', 'indieweb_syndication') }}
+{{ content|without('field_body_paragraph', 'field_authors', 'field_tags', 'field_topics', 'uid', 'created', 'comment', 'indieweb_syndication') }}
 
 {% if content.comment %}
   {{ content.comment }}