实际项目中不懂的地方（不断更新）

àì夳堔傛蜴生んèń 2022-05-24 08:40 152阅读 0赞

一、yike模板

1.index\_index.html

（1）<extend name="Public:base" />

Public就是base.html所在的文件夹，比如放Frame文件夹里，就应该是<extend name="Frame:base" />

子模板（其实是当前操作的入口模板）中使用继承  
模板继承是3.1.2版本添加的一项更加灵活的模板布局方式，模板继承不同于模板布局，甚至来说，应该在模板布局的上层。模板继承其实并不难理解，就好比类的继承一样，模板也可以定义一个基础模板（或者是布局），并且其中定义相关的区块（block），然后继承（extend）该基础模板的子模板中就可以对基础模板中定义的区块进行重载。

因此，模板继承的优势其实是设计基础模板中的区块（block）和子模板中替换这些区块。

每个区块由<block></block>标签组成，并且不支持block标签的嵌套。

（2）foreach相当于一个循环，name:表示数据源;item:表示循环变量;SlideshowList是个数据，slider相当于当前循环的属性，属性+个.img 那不就是值吗

<?php dump($slider.image);?>  
        <foreach name="SlideshowList" item="slider">  
          <div class="swiper-slide">  
            <div class="banner\_box">  
              <img src="\{$slider.image\}" alt="">  
            </div>  
          </div>  
        </foreach>

（3）通过将<?php dump($xxx.xxx);?>放在对应需要打印的元素前，然后审查对应的位置，可以看到多了一个pre标签，标签内包裹的就是打印出来的信息

（4）适配

@media (max-width: 1600px) and (min-width: 1401px){
    }
    @media (max-width: 1400px) and (min-width: 1201px){
    }
    @media (max-width: 1200px) and (min-width: 1025px){
    }
    @media (max-width: 1024px) and (min-width: 768px){
    }
    @media (max-width: 767px) and (min-width: 320px){
    }

(7)导航栏固定

position:fixed;

(8) 增加BACK TO TOP浮标

首先下载对应的图标

html代码

js代码

（10）如何点击首页的推荐图，定位到产品页产品表格内，相应产品的位置

产品列表图，对产品进行循环，自定义所有产品的id="\{$v.id\}"

<foreach name="vo.productlist" item="v">
                                    <tr class="trbox" id="{$v.id}">
                                        <td style="border-bottom: 1px solid #ddd;" class="tdbox">
                                           <div class="list-img-box">
                                                <img class="img-responsive" src="{$v.product_img.0.image}">
                                                    <div class="red-shade">
                                                        <span class="plus-sign">+</span>
                                                    </div>
                                            </div>
                                            <h6>{$v.product_title}</h6>
                                        </td>
                                        <td style="background: #f9f9f9;border-bottom: 1px solid #ccc;" class="tdbox first">{$v.product_description}</td>
                                        <td style="background: #f1f1f1;border-bottom: 1px solid #aaa;" class="tdbox">{$v.product_chanpin}</td>
                                        <td style="background: #f9f9f9;border-bottom: 1px solid #ccc;" class="tdbox">{$v.product_chanpinss}</td>
                                    </tr>
                                </foreach>

首页关于推荐产品，注意<a href="/product/all/\#相应的id">，这个id需要通过在产品列表图右键审查产品的id.

注意，如果在后台设置了分页，那么a链接就是/product/all/id/20/\#26，只是列举

（12）给电脑端增加语言导航栏，在header文件适当位置下增加如下代码

<nav class="lang ">
                     <a href="" style="width:  auto;height: auto;">{$Content.English}<i class="fa fa-caret-down"></i></a>
                     <div class="lang_box">
                       <a href=" " style="font-size: 16px;">{$Content.English}</ a>
                       <a href="?lang=de">{$Content.German}</a>
                       <a href="?lang=es">{$Content.Spanish}</a>
                       <a href="?lang=pt">{$Content.Portuguese}</a>
                       <a href="?lang=ru">{$Content.Russian}</a>
                       <a href="?lang=ar">{$Content.arabic}</a> 
                       <a href="?lang=cs">{$Content.Czech}</a> 
                     </div>
                   </nav>

（13）video标签。注意，src里面的视频需要能够拖入到浏览器中查看，如果不能，就得到类似“格式工厂”的软件中进行视频转编码，需要将它变成AVCh264 编码格式。

（14）实现点击某一个分类，被选中的分类改变样式

css代码

.listActive a{
            font-weight: bolder!important;
            color: #1da838!important;
            border-bottom: 1px solid #bbb;
        }

js代码

html代码

div class="product-list-box">
        
                    <div class="drop-down">
                        <foreach name="CatalogType" item="rs">
                             <div class="product-row row">
                                <a href="/product/all/id/{$rs.id}" id="{$rs.name}" class="h3h3">{$rs.name}</a>
                            </div>
                        </foreach>
                        <div class="row product-one">

（15）如果页面下方出现可以水平滑动的滚动条，可以增加样式，将滚动条去除

body{
        overflow-x: hidden;
        width: 100%;
    }

（17）返回到上一页

1.通过超链接返回到上一页
    
    <a href="#" onclick="javascript:history.back(-1);">返回到上一页</a>
    
    <a href="#" onClick="javaScript:history.go(-1)">返回上一页</a>
    
    2.用按钮代码
    
    <input type=”button” name=”Submit” onclick=”javascript:history.back(-1);” value=”返回上一页”>
    3 图片代码
    
    <a href=”javascript :;” onClick=”javascript :history.back(-1);”><img src=”图片路径” border=”0″ title=”返回上一页”></a>

(18)实现未固定宽度的div水平垂直居中：为父元素设置text-align:center，然后再设置

.btn-group{
            text-align: center;
        }
        .btn-group .btn{
            float: none;
            display: inline-block;
        }

（19）导航栏

手机导航栏

#min_lang{
    	display: none;
    }
    @media (max-width: 767px){
    	nav.Language{
    		display: none;
    	}
    	#min_lang{
    		padding: 10px 0;
    		display: block;
    	}
    	#min_lang a{
    		color: #000;
    		padding: 0 10px;
    
    	}
    }

接在原先导航栏ul结束后

<div id="min_lang">
                      <a  href="?lang=es">{$Content.English}</a>
                      <a  href="?lang=es">{$Content.Spanish}</a>
                      <a  href="?lang=pt">{$Content.Portuguese}</a>
                    </div>

电脑导航栏

<nav class="Language">
          <a  href="?lang=en">{$Content.English}</a>
          <div class="Language_box">
            <a  href="?lang=en">{$Content.English}</a>
            <a  href="?lang=es">{$Content.Spanish}</a>
            <a  href="?lang=pt">{$Content.Portuguese}</a>
          </div>
        </nav>

（21）页面高度不够，如何使最下方的空白去掉

![70][]

给黑色底部添加样式

.footer{position: fixed;
    	bottom: 0px;width: 100%;}

![70 1][]

一段简单的js实现奇行和偶行的背景色不同，odd和even

(22)给网页添加ico图标

[70]: /images/20220524/1b2ad4f67ee84e7780895401dfe5ccbd.png
[70 1]: /images/20220524/f60e12e838964cea955c575725dfdc7b.png