pbootcms使用笔记

1、存在子栏目时，导航栏判断Active的方式

<li class="nav-option" id="{pboot:if(0=='{sort:scode}')}nav-act{/pboot:if}"><a href="/">网站首页</a></li>
{pboot:nav}
<li class="nav-option" id="{pboot:if('[nav:scode]'=='{sort:scode}' || '[nav:scode]'=='{sort:tcode}')}nav-act{/pboot:if}"><a href="[nav:link]">[nav:name]</a></li>
{/pboot:nav}

2、基础的搜索form

 <form class="nav-search-container" action="{pboot:scaction}" method="get">
     <div>
         <input type="text" name="keyword" placeholder="输入产品关键词">
         <input type="hidden" name="scode" value="2" >
         <button type="submit">搜索</button>
     </div>
</form>

3、使用顶级栏目的大图设置对banner进行调活

{pboot:nav}
{pboot:if('[nav:scode]'=='{sort:tcode}')}
<section class="banner-section mt132 wow fadeInDown" data-wow-duration="800ms">
    <div class="banner-container w1460">
        <img src="[nav:pic]" alt="">
    </div>
</section>
{/pboot:if}
{/pboot:nav}

4、存在三级栏目时，对栏目进行遍历以及设置当前状态的方式（遍历特定顶级栏目下的子栏目）

{pboot:nav parent=2}
<li class="product-lf-option">
    <div
        id="{pboot:if('[nav:scode]'=='{sort:scode}' || '[nav:scode]'=='{sort:pcode}')}product-lf-option-act{/pboot:if}">
        <div>
            <img src="[nav:ico]" alt="">
            <img src="[nav:pic]" alt="">
        </div>
        <p>[nav:name]</p>
    </div>
    {pboot:if('[nav:soncount]'!='0')}
    <ul class="product-lf-submenu">
        {pboot:2nav parent=[nav:scode]}
        <li id="{pboot:2if('[2nav:scode]'=='{sort:scode}')}product-lf-option-submenu-act{/pboot:2if}"><a
                href="[2nav:link]">[2nav:name]</a></li>
        {/pboot:2nav}
    </ul>
    {/pboot:if}
</li>
{/pboot:nav}

5、将内容列表依据后台排序编号升序排列以及依据日期降序排列

{pboot:list num=15 order='sorting,date desc'}
<li class="product-rg-list-item">
    <div style="background-image: url('{pboot:sitelogo}');">
        <img src="[list:ico]" alt="">
    </div>
    <p>[list:title]</p>
    <a href="[list:link]"></a>
</li>
{/pboot:list}

6、仅有上下页切换按钮以及页数图标的Page组件（内容列表要设置num）

<!-- html -->
{pboot:if({page:rows}>0)}
<div class="page_tab">
    <div class="h_product_prev" onclick="window.location.href='{page:pre}'"></div>
    {page:numbar}
    <div class="h_product_next" onclick="window.location.href='{page:next}'"></div>
</div>
{else}
<div class="text-center my-5 text-secondary">未查询到任何数据！</div>
{/pboot:if}

/* page css */
.page_tab{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
}
.page_tab>a {
	padding: 10px 14px;
    background-color: #f4f2f2;
    border-radius: 7px;
    opacity: 1;
    box-shadow: 0px 4px 8px 1px rgba(85, 86, 86, 0.35);
    font-size: 16px;
	line-height: 1;
    text-align: center;
    color: #878787;
    margin-right: 20px;
}

.page_tab>a:last-of-type {
    margin-right: 0;
}

.page_tab>.page-num-current {
    background-color: #fc5503;
    color: #fff;
}
.page_tab>.h_product_prev,
.page_tab>.h_product_next{
    width: 12px;
	height: 12px;
	border-right: 2px solid #878787;
	border-bottom: 2px solid #878787;
}
.page_tab>.h_product_prev{
	transform: rotate(135deg);
	margin-right: 20px;
}
.page_tab>.h_product_next{
	transform: rotate(-45deg);
	margin-left: 20px;
}

@media (max-width:1600px){
	.page_tab>a,
        .page_tab>.h_product_prev{
		margin-right: 15px;
	}
	.page_tab>.h_product_next{
		margin-left: 15px;
	}
}
@media (max-width:1200px){
        .page_tab>a{
		font-size: 14px;
		padding: 9px 13px;
	}
}
@media (max-width:600px){
        .page_tab{
		margin-top: 16px;
	}
	.page_tab>a,
        .page_tab>.h_product_prev{
		margin-right: 10px;
	}
	.page_tab>.h_product_next{
		margin-left: 10px;
	}
}

7、html组件的引用

{include file=comm/header.html}

8、静态文件的引用

<img src="{pboot:sitetplpath}/images/product-banner.png" alt="">

9、遍历出指定顶级栏目下的二级栏目中的内容（多见于首页展示产品栏目下各二级栏目的内容）

{pboot:nav parent=2}
<div class="swiper-container" id="index-product-swiper[nav:i]">
    <div class="swiper-wrapper">
        {pboot:list scode=[nav:scode] num=12 order='sorting,date desc'}
        <div class="swiper-slide" data-url="[list:link]" data-info="[list:ext_product_type]">
            <div style="background-image: url('{pboot:sitelogo}');">
                <img src="[list:ico]" alt="">
            </div>
            <p>[list:title]</p>
        </div>
        {/pboot:list}
    </div>
    <div class="swiper-pagination"></div>
</div>
{/pboot:nav}

10、在线留言form设置

<form action="{pboot:msgaction}"  method="post">
    <input type="text" placeholder="电话/HATSAPP:" name="mobile">
    <input type="text" placeholder="*电子邮件:" name="email">
    <input type="text" placeholder="地址:" name="address">
    <input type="text" placeholder="公司名称:" name="company">
    <textarea name="content" id="" cols="30" rows="10" placeholder="*消息"></textarea>
    <button type="submit">提交</button>
</form>

11、腾讯地图的使用

<!-- key获取：https://lbs.qq.com/dev/console/application/mine -->

<div id="map"></div>

<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=输入官网设置的key"></script>
<script type="text/javascript">
    function init() {
        var center = new TMap.LatLng(31.979545, 119.712714);
        var map = new TMap.Map("map", {
            center: center,
            zoom: 17,
        });

        var infoWindow = new TMap.InfoWindow({
            map: map,
            position: center,
            content: '{pboot:companyname}<br/>地址：{pboot:companyaddress}'
        });

    }
    init();
</script>