Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 使用流程控制替换语法,将演示网站的首页和产品页进行动态替换(1124)
Blogger Information
Blog 20
fans 0
comment 0
visits 8629
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
使用流程控制替换语法,将演示网站的首页和产品页进行动态替换(1124)
A 管志岗-电商策划
Original
450 people have browsed it

使用流程控制替换语法

将演示网站的首页和产品页进行动态替换

  1. 创建一个data文件夹
    文件夹里面创建header.php和items.php
  2. 在对应的相关文件位置进行替换，代码如下：

header.php

  1. <?php
  2. return [
  3.   [
  4.     'id' => 1,
  5.     'url' => 'index.php',
  6.     'title' => '首页',
  7.   ],
  8.   [
  9.     'id' => 2,
  10.     'url' => 'news.php',
  11.     'title' => '新闻',
  12.   ],
  13.   [
  14.     'id' => 3,
  15.     'url' => 'items.php',
  16.     'title' => '产品',
  17.   ],
  18.   [
  19.     'id' => 4,
  20.     'url' => 'contact.php',
  21.     'title' => '联系',
  22.   ],
  23.   [
  24.     'id' => 5,
  25.     'url' => 'login.php',
  26.     'title' => '登陆',
  27.   ]
  28. ]
  29. ?>

items.php

  1. <?php
  2. // 索引数组语义化：关联数组
  3. return [
  4.   [
  5.     'id' => 1,
  6.     'title' => '微信小程序1',
  7.     'img' => 'static/images/item1.jpeg',
  8.   ],
  9.   [
  10.     'id' => 2,
  11.     'title' => '网站设计2',
  12.     'img' => 'static/images/item2.jpeg',
  13.   ],
  14.   [
  15.     'id' => 3,
  16.     'title' => '微信小程序3',
  17.     'img' => 'static/images/item3.jpeg',
  18.   ],
  19.   [
  20.     'id' => 4,
  21.     'title' => '微信小程序4',
  22.     'img' => 'static/images/item4.jpeg',
  23.   ],
  24.   [
  25.     'id' => 5,
  26.     'title' => '微信小程序5',
  27.     'img' => 'static/images/item5.jpeg',
  28.   ],
  29.   [
  30.     'id' => 6,
  31.     'title' => '微信小程序6',
  32.     'img' => 'static/images/item6.jpeg',
  33.   ],
  34.   [
  35.     'id' => 7,
  36.     'title' => '微信小程序7',
  37.     'img' => 'static/images/item7.jpeg',
  38.   ],
  39.   [
  40.     'id' => 8,
  41.     'title' => '微信小程序8',
  42.     'img' => 'static/images/item8.jpeg',
  43.   ],
  45. ];

插入文件相应位置 index.php

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8" />
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.   <title>首页</title>
  9.   <link rel="stylesheet" href="static/css/style.css" />
  10. </head>
  12. <body>
  13.   <header>
  14.     <nav>
  15.       <?php
  16.       $news = include './data/header.php';
  17.       ?>
  18.       <?php foreach ($news as $new) : ?>
  19.         <a href="<?= $new['url'] ?>"><?= $new['title'] ?></a>
  20.       <?php endforeach ?>
  21.     </nav>
  22.   </header>
  23.   <!-- 主体 -->
  24.   <main>
  25.     <!-- 产品列表 -->
  26.     <?php
  27.     $items = include './data/items.php';
  28.     ?>
  29.     <div class="items">
  30.       <h3>产品列表</h3>
  31.       <div class="list">
  32.         <?php foreach ($items as $item) : extract($item) ?>
  33.           <div class="item">
  34.             <img src="<?= $img ?>" alt="" />
  35.             <a href=""><?= $title ?></a>
  36.           </div>
  37.         <?php endforeach ?>
  38.       </div>
  39.     </div>
  40.     <!-- 分页条 -->
  41.     <p class="pagebar">
  42.       <a href="">1</a>
  43.       <a href="">...</a>
  44.       <a href="">6</a>
  45.       <a href="">7</a>
  46.       <a href="" class="active">8</a>
  47.       <a href="">9</a>
  48.       <a href="">10</a>
  49.       <a href="">...</a>
  50.       <a href="">20</a>
  51.     </p>
  52.   </main>
  53.   <?php
  54.   include './data/footer.php'
  55.   ?>
  56. </body>
  58. </html>

效果图：


Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post