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

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

微脉网络2020-01-08已有15人围观

简介上一讲教给大家如果替换菜品展示内容页caipin.html框架的标签及公共模板的替换,这一讲教给大家如何替换菜品展示内容页caipin.html的内容标签的替换。01. 首先用Dreamweaver中···

上一讲教给大家如果替换菜品展示内容页caipin.html框架的标签及公共模板的替换,这一讲教给大家如何替换菜品展示内容页caipin.html的内容标签的替换。

01. 首先用Dreamweaver中打开我们已经创建的caipin.html文件

179.jpg

02. 首先我们先更改面包屑导航的标签内容,这个和单页及列表的方式一样。

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

修改为

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

180.jpg

03. 菜品展示内容页的图片调用使用的是图组调用的方式,我们先看一下PbootCMS的图组调用代码

{pboot:pics num=3 id={content:id}}
    [pics:i]
    [pics:src]
{/pboot:pics}
[pics:n] 序号,从0开始
[pics:i] 序号,从1开始
[pics:src] 图片地址
num:为最大读取张数,可省略
id:为内容编号,在内容页也可使用{content:id}自适应当前内容

下面我们先将要显示图组的地方添加开始标签 {pboot:pics num=3 id={content:id}} 及结束标签 {/pboot:pics}  注意,这里的num=3是可以去掉的,不用约束调用图片的数量

{pboot:pics num=3 id={content:id}}
    <div> <img src="/Files/Image/images-pc/images/images/show-pcs-10.jpg?2019090416101557" alt="新鲜大虾" /> </div>
{/pboot:pics}

181.jpg

然后使用 [pics:src] 替换图片地址,并使用这个内容页的产品标题标签 {content:title} 来替换图片的名称

{pboot:pics id={content:id}}
    <div> <img src="[pics:src]" alt=" {content:title}" /> </div>
{/pboot:pics}

182.jpg

将下面原网站源码中多余的图组代码删除掉

183.jpg

04. 调用产品的名称及简介描述,这里需要使用到标题标签{content:title}及描述标签{content:description}

<div>
    <h1>新鲜大虾</h1>
    <div>是全球最大的中文搜索引擎,2000年1月由李彦宏、徐勇创立于北京中关村插件描述:jQuery scrollappear是一个强大的和敏捷的内容出现在滚动(或其他事件触发)jQuery插件。 PREVIOUS: NEXT: jQuery弹出层(浮动面板)插件jspanel 阴影插件shin33</div>
</div>

修改为

<div>
    <h1>{content:title}</h1>
    <div>{content:description}</div>
</div>

184.jpg

05. 使用内容标签 {content:content} 替换原网站的内容位置

<div>
    <div>产品详情内容产品详情内容产品详情内容产品详情内容</div>
</div>

修改为

<div>
    <div>{content:content}</div>
</div>

185.jpg

06. 我们返回网站的上部分代码,看一下,这里也有一个网页加载的代码,这里和菜品展示列表页caipinlist.html一样,将

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

改为

<div>
  <div> <img src="/imgages/loadingBall.gif" alt="加载图片" /> </div>
</div>

即可。

这样,我们的整个caipin.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="/imgages/loadingBall.gif" alt="加载图片" /> </div>
</div>
<div id="big-box">
  <div> {include file=head.html}
    <!-- 图片详情页 -->
    <div>
      <div>
        <div><span>您的位置:</span> {pboot:position separator=>> indextext=首页}</div>
      </div>
      <div>
        <div>
          <div>
            <div class="swiper-container pic-details-swiper">
              <div> {pboot:pics id={content:id}}
                <div> <img src="[pics:src]" alt=" {content:title}" /> </div>
                {/pboot:pics} </div>
              <!-- Add Arrows -->
              <div>></div>
              <div><</div>
            </div>
          </div>
          <div>
            <h1>{content:title}</h1>
            <div>{content:description}</div>
          </div>
        </div>
        <div>
          <div>
            <!-- Add Pagination -->
            <div class="swiper-pagination details-custom"> <span class="swiper-pagination-bullet swiper-pagination-bullet-active">产品详细</span> </div>
            <div>
              <div>
                <div>{content:content}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 图片详情页 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>

很赞哦! (6)



网站推荐 TOP 01

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

站点信息

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