您现在的位置是:网址首页 > PbootCMS学习 > 建站教程建站教程

【图文】002号模板|第17讲|PbootCMS仿美食招商加盟响应式网站仿站教程|制作菜品展示列表页caipinlist.html(下)

微脉网络2020-01-04已有29人围观

简介调用PbootCMS标签很简单,我们根据PbootCMS的标签替换相应的代码就好了。01. 首先我们先将代码中的面包屑导航进行替换,替换的方式和关于我们页面guanyu.html一样,将<spa···

调用PbootCMS标签很简单,我们根据PbootCMS的标签替换相应的代码就好了。

01. 首先我们先将代码中的面包屑导航进行替换,替换的方式和关于我们页面guanyu.html一样,将

<span>您的位置:</span> <a href="/">首页</a> <i>></i> <span><a href="/Product/default.html">菜品展示</a></span>

修改为

<span>您的位置:</span> {pboot:position separator=>> indextext=首页}</span>

即可

159.jpg

02. 然后我们在产品列表的循环那里添加列表开始标签 {pboot:list num=10 order=date} 和列表结束标签 {/pboot:list}

160.jpg

03. 然后我们替换下循环list列表中的相应的标签,并将多余的原网站的产品循环代码删掉

162.jpg

这里需要改动一下,因为我们列表页是3个一排的,所以我们每一页的调用数量是3的倍数,如3、6、9、12等等,这里为了现实好看,我们调用9个,所以列表循环的开始标签中的num=10应该改成num=9

{pboot:list num=9 order=date}

04. 下面我们制作分页,这个推荐大家直接使用下面的代码,首先在列表页通用的CSS样式文件中添加下面的CSS样式(可以在index.css或者product.css样式文件中添加)

/* 分页样式 */
.frontier-paging { margin-top: 32px; }
.frontier-paging ul { display: inline-block; vertical-align: bottom; }
.frontier-paging ul span,
.frontier-paging ul a { display: block; float: left; margin: auto 2px; padding: 4px 12px; background: #FFF; box-shadow: 0 0 8px rgba(0,0,0,0.07); border-radius: 2px; font-size: 14px; color: #999; }
.frontier-paging ul a.page-num-current,
.frontier-paging ul a:hover { background: #775BFF; color: #FFF; }

163.jpg

然后在我们调用分页的位置添加下面的代码

{pboot:if('{page:count}' > 0)}
<div class="uk-text-center frontier-paging">
  <ul>
    <a href="{page:index}">首页</a> 
    <a class="uk-visible@s prev" href="{page:pre}">上一页</a> 
    {page:numbar}
    <a class="uk-visible@s next" href="{page:next}">下一页</a>
    <a href="{page:last}">尾页</a>
  </ul>
</div>
{/pboot:if}

164.jpg

05. 然后我们看一下源码的上面部分,有一个

<div>
  <div> <img src="/Theme/v014/static/img/loadingBall.gif" alt="" /> </div>
</div>

这里的意思是打开这个页面的时候在加载的过程中显示一个加载的图片,目的当然是为了客户的浏览体验,这个我们可以删掉,当然也可以把这个图片下载到我们网站根目录的images文件下面,并将代码改成

<div>
  <div> <img src="/images/loadingBall.gif" alt="" /> </div>
</div>

即可

165.jpg

166.jpg

这下我们菜品的列表页就做完了,caipinlist.html完整的页面代码是

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="author" content="SZJ " />
<title>{pboot:pagetitle}</title>
<meta name="Keywords" content="{pboot:pagekeywords}" />
<meta name="Description" content="{pboot:pagedescription}" />
<link rel="stylesheet" href="/css/reset.css" />
<link rel="stylesheet" href="/css/swiper.min.css" />
<link rel="stylesheet" href="/css/index.css" />
<link rel="stylesheet" href="/css/product.css" />
<script src="/js/jquery.js"></script>
</head>
<body>
<div>
  <div> <img src="/images/loadingBall.gif" alt="加载动态图" /> </div>
</div>
<div id="big-box">
  <div> {include file=head.html}
    <!-- product -->
    <div>
      <div>
        <div> <span>您的位置:</span> {pboot:position separator=>> indextext=首页}</span> </div>
      </div>
      <div>
        <ul>
          {pboot:list num=9 order=date}
          <li> <a href="[list:link]"> <img src="[list:ico]" alt="[list:title]" /> </a>
            <h1><a href="[list:link]">[list:title]</a></h1>
          </li>
          {/pboot:list}
        </ul>
      </div>
      <div> {pboot:if('{page:count}' > 0)}
        <div class="uk-text-center frontier-paging">
          <ul>
            <a href="{page:index}">首页</a> <a class="uk-visible@s prev" href="{page:pre}">上一页</a> {page:numbar} <a class="uk-visible@s next" href="{page:next}">下一页</a> <a href="{page:last}">尾页</a>
          </ul>
        </div>
        {/pboot:if} </div>
    </div>
    <!-- product END-->
    {include file=foot.html} </div>
</div>
<!-- 监听屏幕宽度 给html赋值font-size -->
<script src="/js/respons.js"></script>
<script type="text/javascript" src="/js/swiper.min.js"></script>
<script src="/js/product.js"></script>
</body>
</html>

很赞哦! (9)



网站推荐 TOP 01

    【No:001】蓝色产品展示型网站模板带手机端模板

站点信息

  • 建站时间:2020年01月01日
  • 网站程序:PBOOTCMS
  • 标签管理标签云
  • 网站地图XML网站地图
  • 微信公众号:扫描二维码,关注我们
  • 公众号