如何在page--blog--archive.html.twig模板中遍历Blog archive视图行并添加自定义样式类

Got it, let's break this down into actionable steps to get your custom blog archive layout working. There are two solid approaches here—one that follows Drupal's template best practices (highly recommended) and another if you need to handle everything directly in your page template.

Method 1: Use a Custom View Template (Recommended) #

Drupal's template system is built to handle view-specific customizations cleanly with view templates, which is way easier to maintain long-term. Here's how to do it:

1. Create the right view template file
   Your view is named "Blog archive"—let's assume its machine name is blog_archive (confirm this in the Views UI under "Advanced" > "Machine name"). For a page display, create a template file named views-view-unformatted--blog-archive--page.html.twig (adjust the last part if your view display has a different machine name).

2. Add your custom layout code to the view template
   Replace the default content of this template with your customized row rendering code. We'll access the node entity directly to pull in fields, which is more reliable than relying on view field aliases:

   {% for row in rows %}
     {% set node = row.content['#row'].entity %}
     <div class="grid-4 omega ft-text">
       {# Render the image field (adjust machine name if yours differs) #}
       {% if node.field_image is not empty %}
         {% set image = node.field_image.entity %}
         <img src="{{ image.url }}" alt="{{ image.alt }}" class="blog-featured-image" />
       {% endif %}
   
       <h3 class="blog-title">
         <a href="{{ node.url }}">{{ node.title.value }}</a>
       </h3>
   
       <br/>
       <span style="font-family: sans-serif; font-size: 10pt;">
         <p>{{ node.field_blurb_new.value }}</p>
       </span>
   
       <h4>
         <a href="{{ node.field_blog_readmore_link.uri }}">
           {{ node.field_blog_readmore_link.title }}
         </a>
       </h4>
     </div>
   {% endfor %}
   

3. Simplify your page template
   Now your page template (page--blog--archive.html.twig) can go back to a simple output, since the view's rendering is handled by its custom template:

   {% if page.content %}
     {{ page.content }}
   {% endif %}
   

Method 2: Directly Customize in the Page Template #

If you need to handle everything directly in the page template (not ideal, but doable), follow these steps:

1. Identify the view's key in page.content
   First, enable Twig Debug (add $config['system.performance']['twig_debug'] = TRUE; to your settings.php file). This will show you the exact key for your view in the page.content array (it'll look something like views_page__blog_archive__page_1).

2. Update the page template code
   Replace your existing page.content output with code that loops through the view's rows and renders your custom layout:

   {% set blog_view = page.content['views_page__blog_archive__page_1'] %}
   {% if blog_view %}
     {% for row in blog_view['#view'].result %}
       {% set node = row._entity %}
       <div class="grid-4 omega ft-text">
         {# Render image field #}
         {% if node.field_image is not empty %}
           {% set image = node.field_image.entity %}
           <img src="{{ image.url }}" alt="{{ image.alt }}" />
         {% endif %}
   
         <h3 class="blog-title">
           <a href="{{ node.url }}">{{ node.title.value }}</a>
         </h3>
   
         <br/>
         <span style="font-family: sans-serif; font-size: 10pt;">
           <p>{{ node.field_blurb_new.value }}</p>
         </span>
   
         <h4>
           <a href="{{ node.field_blog_readmore_link.uri }}">
             {{ node.field_blog_readmore_link.title }}
           </a>
         </h4>
       </div>
     {% endfor %}
   {% endif %}
   

Quick Notes to Avoid Headaches #

• Double-check field machine names: Make sure field_image, field_blurb_new, and field_blog_readmore_link match the actual machine names of your fields (confirm these in the Content Type field settings).
• Handle empty fields: The {% if ... is not empty %} checks ensure you don't render broken HTML if a field has no content.
• Clear cache: After adding new templates or modifying code, always clear Drupal's cache so the system picks up your changes.

内容的提问来源于stack exchange，提问作者Rick