专业编程基础技术教程

网站首页 > 基础教程 正文

如何在网格布局中嵌入随机内容

ccvgpt 2024-08-16 14:56:03 基础教程 16 ℃

这是展示广告或为自己的内容添加促销块的完美方式。它还为您的布局提供了一个有趣的视觉突破，从重复的网格中脱颖而出。

为了更好地理解我们将要构建的内容，有一个随附的演示。但是，由于此演示使用一些PHP代码，因此需要服务器才能运行。

如何在网格布局中嵌入随机内容

可以从此 GitHub 存储库下载项目文件(https://github.com/tutsplus/How-to-Embed-Random-Content-Inside-a-Grid-Layout)。

通过服务器运行演示，请注意两件事：

  • 嵌入式横幅
  • 重新加载页面时，横幅图像会发生变化。

了解布局

在前面的教程中，我们使用自己的标记重新创建了一个这样的教程列表。

标记

我们使用简单的HTML来构建结构。自动化并将数据内容存储在 PHP 数组中。在这里，我们将使用 PHP，但无论语言或 CMS/框架如何，逻辑都将保持不变。我们应该遍历源代码并检索帖子。

我们的数据内容格式如下所示：

$articles      = array(
  array(
    'title'      => 'Quick Tip: Create a Very Simple Parallax Effect With CSS & JavaScript',
    'image'      => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/parallax-pre.jpg',
    'link'       => 'https://webdesign.tutsplus.com/tutorials/quick-tip-how-to-build-a-dead-simple-parallax-effect-with-css-javascript--cms-33061',
    'categories' => array(
      'CSS',
      'JavaScript',
    ),
  ),
  array(
    'title'      => 'How to Build a Static Portfolio Page With CSS & JavaScript',
    'image'      => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/chart-pre.png',
    'link'       => 'https://webdesign.tutsplus.com/tutorials/how-to-build-a-portfolio-page-with-css-javascript--cms-32933',
    'categories' => array(
      'CSS',
      'JavaScript',
    ),
  ),
    
  // more articles here 
);

这是我们的循环逻辑：

<?php if ( ! empty( $articles ) ) : ?>
  <div class="container">
    <ol class="posts">
      <?php foreach ( $articles as $key => $article ) : ?>
        <li class="post">
          <article>
            <figure>
              <a href="<?php echo $article['link']; ?>" target="_blank">
                <img width="300" height="208" src="<?php echo $article['image']; ?>" alt="<?php echo $article['title']; ?>">
              </a>
              <figcaption>
                <ol class="post-categories">
                  <?php foreach ( $article['categories'] as $cat ) : ?>
                    <li>
                      <a href="">
                        <?php echo $cat; ?>
                      </a>
                    </li>
                  <?php endforeach; ?>
                </ol>
                <h2 class="post-title">
                  <a href="<?php echo $article['link']; ?>" target="_blank">
                    <?php echo $article['title']; ?>
                  </a>
                </h2>
              </figcaption>
            </figure>
          </article>
        </li>
      <?php endforeach; ?>
    </ol>
  </div>
<?php endif; ?>

如前所述，根据你将要使用的语言或CMS，情况会发生变化。例如，WordPress有一个用于所有主要查询的内置循环。

<!-- Start the Loop. -->
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
 
  <!-- Add post info using WP built-in functions -->
<?php endwhile; else : ?>
  <!-- The very first "if" tested to see if there were any Posts to -->
  <!-- display. This "else" part tells what do if there weren't any. -->
  <p><?php esc_html_e( 'Sorry, no posts matched your criteria.' ); ?></p>
  <!-- REALLY stop The Loop. -->
<?php endif; ?>

风格

除了标记之外，我们还将保留上一教程中的大多数样式。我们只会进行一些更改以使布局响应。

以下是所有样式：

:root {
  --black: #3a3a3a;  --white: #fff;  --green: #49b293;
}
* {
  margin: 0;  padding: 0;
}
img {
  display: block;  max-width: 100%;  height: auto;
}
ol {
  list-style: none;
}
a {
  text-decoration: none;  color: inherit;
}
body {
  margin: 50px 0;  color: var(--black); 
  font: 1rem/1.3 sans-serif;
}
.container {
  max-width: 1200px;  padding: 0 15px; 
  margin: 0 auto;
}
h1 {
  text-align: center;  margin-bottom: 2rem;
}
h1 a {
  text-decoration: underline;
}
.posts {
  display: grid;  grid-gap: 1.5rem;
}
.posts .post {
  width: 300px;  margin: 0 auto;  
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.posts > li {
  background: #fafafa;
}
.posts .post-title {
  font-size: 1.3rem;
}
.posts .post-title:hover {
  text-decoration: underline;
}
.posts figcaption {
  padding: 1rem;
}
.posts .post-categories {
  margin-bottom: 0.75rem;  font-size: 0.75rem;
}
.posts .post-categories * {
  display: inline-block;
}
.posts .post-categories li {
  margin-bottom: 0.2rem;
}
.posts .post-categories a {
  padding: 0.2rem 0.5rem;  border-radius: 1rem; 
  border: 1px solid;  line-height: normal;  transition: all 0.1s;
}
.posts .post-categories a:hover {
  background: var(--green);  color: var(--white);
}
@media (min-width: 500px) {
  .posts {
    grid-template-columns: repeat(2, 1fr);
  }
  .posts .post {
    width: auto;
  }
}
@media (min-width: 600px) {
  .posts {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 900px) {
  .posts {
    grid-template-columns: repeat(4, 1fr);
  }
}

现在让我们假设我们要在网格内放置横幅。在这种情况下，我们只会使用图片横幅，但在您的情况下，您可以插入来自不同来源的广告、轮播、视频或您喜欢的任何其他内容。

我们的横幅必须满足以下要求：

  • 它们应该在每五列之后出现。在我们的例子中，有 12 个帖子，所以我们的网格将包含两个横幅。当然，在您的情况下，您可以拥有更多。
  • 在每个页面加载时，它们应该随机出现，这意味着某些横幅不会有任何固定的位置。
  • 此外，嵌入的横幅应该是唯一的，这意味着单个横幅不会在同一页面中出现两次。

下面是我们想要生成的布局示例：

如前所述，横幅将随机出现，因此在另一个页面加载时，我们可能会看到不同的横幅，如下所示：

为了实现此行为，我们将使用不同的 PHP 数组函数（、array_diff、array_push）。array_keysarray_rand

让我们记下我们将遵循的步骤：

  1. 将所有横幅（来自 Unsplash）存储在数组内，并从该数组中获取密钥。$images
  2. 初始化数组，我们将在其中添加要添加到网格的每个横幅的键。默认情况下，它将为空。$exclude_images_keys
  3. 在循环中，我们将检查当前元素的索引是否不为 0 并且能被 5 整除。
  4. 如果发生这种情况，我们将比较 和 数组。我们将返回它们的唯一值（如果有），并将它们存储在数组中。$images_keys$exclude_images_keys$in_items
  5. 从数组中获取一个随机密钥。$in_items
  6. 将此键添加到数组中，以从将来的选择中排除关联的横幅。$exclude_images_keys
  7. 使用此键选择横幅并将其放置在网格中。

以下是负责此功能的 PHP 代码：

<?php 
// 1 
$images              = array(
  'banner1.jpg',
  'banner2.jpg',
  'banner3.jpg',
  'banner4.jpg',
  'banner5.jpg',
  'banner6.jpg',
);
$images_keys         = array_keys( $images );
$exclude_images_keys = array();
foreach ( $articles as $key => $article ) :
  // 3 
  if ( 0 !== $key && 0 === $key % 5 ) :
    // 4 
    $in_items         = array_diff( $images_keys, $exclude_images_keys );
    // 5 
    $random_image_key = array_rand( $in_items );
    // 6 
    array_push( $exclude_images_keys, $random_image_key );
    // 7 
    $random_image = $images[ $random_image_key ];
    ?>
    <li class="banner">
      <img width="800" height="533" src="img/<?php echo $random_image; ?>" alt="banner">
    </li>
	<?php
  endif;
  ...
 endforeach;

以及我们横幅的附加 CSS：

.posts .banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
  
@media (min-width: 900px) {
  .posts .banner {
    grid-column: span 2;
  }
}

结论

就是这样，伙计们！我希望你和我一样喜欢这个小练习，它给了你一些关于如何在网格布局中嵌入广告项目的想法。此外，通过以我们在此处介绍的方式使用模运算符 （），您可以创建具有动态模式的多列布局。

与往常一样，非常感谢您的阅读！

Tags：

猜你喜欢

最近发表
标签列表