请求编写原生函数：头部展示3个不同尺寸最新文章缩略图，从第4篇开始循环

Alright, let's tackle this with pure native code—no widgets, just straight-up HTML/CSS/JS (or PHP if you're working with a CMS like WordPress). Here's a step-by-step implementation that fits exactly what you need:

First, we'll define the containers for your header thumbnails and the post list below. This maps directly to the grey blocks you already have on your page:

<!-- Header thumbnail section (3 different sizes) -->
<section class="header-thumbnails">
  <div class="thumbnail-item thumbnail-large"></div>
  <div class="thumbnail-item thumbnail-medium"></div>
  <div class="thumbnail-item thumbnail-small"></div>
</section>

<!-- Post list section (starts from 4th latest post, 2 thumbnail sizes) -->
<section class="post-feed">
  <div class="post-grid"></div>
</section>

Since you already know how to define thumbnail sizes, here's a minimal layout to get the structure working—feel free to tweak dimensions to match your design:

.header-thumbnails {
  display: flex;
  gap: 1.2rem;
  margin-bottom: 2.5rem;
}

/* Match your grey block sizes here */
.thumbnail-large { width: 42%; height: 320px; }
.thumbnail-medium { width: 29%; height: 320px; }
.thumbnail-small { width: 29%; height: 320px; }

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.8rem;
}

/* Alternating post sizes */
.post-item.large-thumb { grid-column: span 2; }
.post-item.small-thumb { grid-column: span 1; }

/* Common thumbnail styles */
.thumbnail-item, .post-thumb {
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  transition: transform 0.2s ease;
}

.thumbnail-item:hover, .post-thumb:hover {
  transform: scale(1.02);
}

/* Optional overlay for titles */
.thumb-overlay {
  background: rgba(0,0,0,0.5);
  color: white;
  padding: 1rem;
  height: 100%;
  display: flex;
  align-items: flex-end;
}

If you're fetching posts from an API or using client-side data, this script will populate the sections correctly. I'll use mock data here—replace the mock array with a fetch() call to your actual post endpoint:

// Mock post data (replace with your real API response)
const posts = [
  { id: 1, title: "Latest Post #1", thumbUrl: "path/to/your/thumb1.jpg", date: "May 20, 2024" },
  { id: 2, title: "Latest Post #2", thumbUrl: "path/to/your/thumb2.jpg", date: "May 19, 2024" },
  { id: 3, title: "Latest Post #3", thumbUrl: "path/to/your/thumb3.jpg", date: "May 18, 2024" },
  { id: 4, title: "Post #4 (First in Feed)", thumbUrl: "path/to/your/thumb4.jpg", date: "May 17, 2024" },
  { id: 5, title: "Post #5", thumbUrl: "path/to/your/thumb5.jpg", date: "May 16, 2024" },
  { id: 6, title: "Post #6", thumbUrl: "path/to/your/thumb6.jpg", date: "May 15, 2024" },
  // Add more posts as needed
];

// Populate the 3 header thumbnails (top 3 latest posts)
function loadHeaderThumbs() {
  const top3Posts = posts.slice(0, 3);
  const thumbContainers = document.querySelectorAll('.header-thumbnails .thumbnail-item');

  top3Posts.forEach((post, index) => {
    const container = thumbContainers[index];
    container.style.backgroundImage = `url(${post.thumbUrl})`;
    // Add title overlay (optional)
    container.innerHTML = `<div class="thumb-overlay"><h3>${post.title}</h3></div>`;
  });
}

// Populate the post feed starting from the 4th post
function loadPostFeed() {
  const feedPosts = posts.slice(3); // Skip first 3 posts
  const grid = document.querySelector('.post-grid');

  feedPosts.forEach((post, index) => {
    const postElement = document.createElement('div');
    // Alternate large/small thumbnails (adjust logic if you want a different pattern)
    postElement.className = index % 2 === 0 ? 'post-item large-thumb' : 'post-item small-thumb';

    postElement.innerHTML = `
      <div class="post-thumb" style="background-image: url(${post.thumbUrl})"></div>
      <h4>${post.title}</h4>
      <p class="post-date">${post.date}</p>
    `;

    grid.appendChild(postElement);
  });
}

// Run everything when the page loads
document.addEventListener('DOMContentLoaded', () => {
  loadHeaderThumbs();
  loadPostFeed();

  // If using an API, replace the above with:
  // fetch('/your-posts-api-endpoint')
  //   .then(res => res.json())
  //   .then(fetchedPosts => {
  //     posts = fetchedPosts;
  //     loadHeaderThumbs();
  //     loadPostFeed();
  //   });
});

If you're working with WordPress and want to use native WP functions instead of widgets, here's how to query posts directly:

<?php
// Query top 3 latest posts for header
$header_posts = new WP_Query([
  'posts_per_page' => 3,
  'orderby' => 'date',
  'order' => 'DESC',
  'post_type' => 'post' // Adjust if using custom post types
]);
?>

<section class="header-thumbnails">
  <?php if ($header_posts->have_posts()) : $count = 0; ?>
    <?php while ($header_posts->have_posts()) : $header_posts->the_post(); ?>
      <?php
        // Assign size class based on position
        $size_class = match($count) {
          0 => 'thumbnail-large',
          1 => 'thumbnail-medium',
          2 => 'thumbnail-small'
        };
        // Use your custom thumbnail size instead of 'large' if needed
        $thumb_url = get_the_post_thumbnail_url(get_the_ID(), 'large');
      ?>
      <div class="<?php echo esc_attr($size_class); ?>" style="background-image: url(<?php echo esc_url($thumb_url); ?>)">
        <div class="thumb-overlay">
          <h3><?php the_title(); ?></h3>
        </div>
      </div>
      <?php $count++; ?>
    <?php endwhile; ?>
    <?php wp_reset_postdata(); ?> <!-- Reset query to avoid conflicts -->
  <?php endif; ?>
</section>

<?php
// Query posts starting from the 4th one
$feed_posts = new WP_Query([
  'posts_per_page' => -1, // Show all posts, or set a limit like 10
  'offset' => 3, // Skip first 3 posts
  'orderby' => 'date',
  'order' => 'DESC',
  'post_type' => 'post'
]);
?>

<section class="post-feed">
  <div class="post-grid">
    <?php if ($feed_posts->have_posts()) : $feed_count = 0; ?>
      <?php while ($feed_posts->have_posts()) : $feed_posts->the_post(); ?>
        <?php
          // Alternate thumbnail sizes
          $post_class = $feed_count % 2 === 0 ? 'post-item large-thumb' : 'post-item small-thumb';
          // Use custom sizes (e.g., 'full' for large, 'medium' for small)
          $feed_thumb_url = get_the_post_thumbnail_url(get_the_ID(), $feed_count % 2 === 0 ? 'full' : 'medium');
        ?>
        <div class="<?php echo esc_attr($post_class); ?>">
          <div class="post-thumb" style="background-image: url(<?php echo esc_url($feed_thumb_url); ?>)"></div>
          <h4><?php the_title(); ?></h4>
          <p class="post-date"><?php echo get_the_date(); ?></p>
        </div>
        <?php $feed_count++; ?>
      <?php endwhile; ?>
      <?php wp_reset_postdata(); ?>
    <?php endif; ?>
  </div>
</section>

Key Notes #

• Header Thumbnails: We grab the first 3 posts (latest ones) and map each to a different size container.
• Post Feed: We skip the first 3 posts using slice(3) (JS) or offset=3 (PHP), then alternate thumbnail sizes with a simple index check.
• Native Development: No widgets involved—this uses raw DOM manipulation (JS) or core WP queries (PHP) so you can learn the underlying mechanics.

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