月度归档： 2024 年 12 月

要自定义分页，首先要使用分页。

根据PbootCMS官方文档，分页标签有两种：

系统内置的完整分页条

{page:bar}

独立的分页元素标签，可自由搭配使用

{page:current}、{page:count}、{page:rows}...等

第一种：系统内置的完整分页条

代码如下：

<div class="paging">{page:bar}</div>

而且，每个元素都已经拥有了自己的样式名称，例如：.page-status、.page-inde…等。

接下来只要写上对应的CSS进行美化就可以了。

例如：

/* 分页样式 */
.paging { margin-top: 32px; font-size: 14px; }
.paging > span { margin: auto 16px; }
.paging .page-numbar { margin: auto 0; }
.paging .page-numbar .page-num,
.paging .page-index,
.paging .page-pre,
.paging .page-next,
.paging .page-last { display: inline-block; margin: auto 4px; padding: 2px 12px; border: 1px solid #EEE; border-radius: 2px; }
.paging .page-numbar .page-num-current,
.paging .page-numbar .page-num:hover { border-color: #8667F7; color: #8667F7; }

处理后效果：

第二种：独立的分页元素标签

如果有需求需要对分页条的内容进行自定义，那么看以本站的分页代码为例：

//通过{page:count}来判断当前列表的分页数量，如果超过1页则显示分页条
{pboot:if('{page:count}' > 0)}

//分页容器
<div class="uk-text-center frontier-paging">
    <ul class="uk-clearfix">
    
        //{page:index}以及{page:pre}指定首页和上一页的链接地址，并且可以在a标签中自由设置首页或者上一页的文字
        <a class="first" href="{page:index}"><i class="fa fa-angle-double-left"></i></a>
        <a class="uk-visible@s prev" href="{page:pre}"><i class="fa fa-angle-left"></i></a>
        
        //分页条
        {page:numbar}
        
        //同首页和上一页，这里是尾页和下一页
        <a class="uk-visible@s next" href="{page:next}"><i class="fa fa-angle-right"></i></a>
        <a class="last" href="{page:last}"><i class="fa fa-angle-double-right"></i></a>
    </ul>
</div>
{/pboot:if}

添加样式美化：

/* 分页样式 */
.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; }

处理后效果：

总结：还是以前所说的，PbootCMS的各种标签已经非常丰富，能不能做出好的东西，就看能不能熟悉标签，自由组合来达成各种需求。

单页简单来说就是一个栏目等于一篇文章，一般用于企业站的公司简介、联系我们等。

要调用单页内容，首先要创建单页。

如果你直接去后台 “文章内容 — 单页内容”这里寻找的话，将会一无所获，因为单页的创建是在栏目管理里面的。

下面是创建单页的步骤：

基础内容 — 内容栏目 — 栏目新增

接下来是创建单页的关键，选择内容模型。第一眼在内容模型里面应该看不到单页两个字，因为它在这里叫专题。

至于为什么叫专题，不用管了，选择就是了。

可以看到，选择内容模型为专题后，列表页模板 — 无，内容页模板 — about.html。

因为之前说过，单页就是一个栏目等于一篇文章，所以并不会有什么内容列表。

至于内容页的模板，可以使用默认的about.html，如果创建的这个单页有独立的样式，那么这里还可以填写其他的模板名称。

例如：新建一个联系我们的单页，内容页模板为contact.html，然后到模板目录，创建html文件，命名为contact.html。那么这个单页栏目的样式就会使用contact.html这个模板页面的样式了。

再回到“文章内容 — 单页内容” 就可以看到刚才建立的单页了。

在添加完单页的内容后，就可以开始写代码调用了。

代码调用部分比较简单，这里就简单写一下，更多的调用参数大家可以参考官方手册。

1、在首页或其他聚合页面调用

方法1：

{pboot:content id=单页的内容ID}
    <a href="[content:link]">[content:title]</a>
{/pboot:content}

非常简单，使用{pboot:content}标签调用就可以。注意：这里的id是内容ID，并不是栏目编码。

方法2：

{pboot:content scode=单页的分类编码}
    <a href="[content:link]">[content:title]</a>
{/pboot:content}

此方法需要较新的版本才支持。这里的scode是单页栏目编码。

2、在单页的自身模板调用

单页自身的模板就是创建单页时填写的模板名称，例如上文提到的about.html或者contact.html。

{content:title}
{content:content}

这个就更简单了，直接在模板页面使用内容详情标签即可。

调用轮播图片是每个企业站常用的，今天我们介绍调用轮播图的标签代码。

这里有两个思路，使用PbootCMS自带的轮播图片模块或者自建一个轮播模型。

1、使用PbootCMS自带的幻灯片模块

{pboot:slide gid=1 num=3}

<div class=”swiper-slide”>

    <a href=”[slide:link]”>

      <img src=”[slide:src]” alt=”[slide:title]”>

    </a>

</div>

{/pboot:slide}

很简单，使用{pboot:slide}标签调用即可，其中gid是分组，num是数量。

自带的轮播扩展内置了10个分组，有标题、副标题和链接地址，一般轮播够用了。

2、自建一个轮播模型

这是本篇教程着重要讲解的部分。

关于模型概念的理解，在使用的时候是非常重要的。

（1）、新建一个轮播模型

输入模型名称，模型类型选择列表，模板留空，提交。轮播模型就建好了，是不是很简单。

（2）、添加模型字段

这里可以自己添加需要在轮播中出现的一些元素，比如覆盖在轮播图片上的文字，点击跳转的链接等等，更高级一些甚至还可以添加一个表示当前轮播图片的动画效果的CSS名称，让不同的轮播图用不同的动画效果出现。（只要开动脑筋，PbootCMS的模型让一切皆有可能）

（3）、添加轮播栏目

添加栏目的理由：

最简单的理由就是添加内容需要选择栏目，不然不能添加。不过，仔细思考一下，一个网站的轮播很有可能不止在首页顶部调用，比如一些侧边栏广告轮播。那么这里的栏目就相当于默认轮播扩展中的分组，不同的是，这里的栏目是可以无限分组的，而且还可以根据栏目名称知道这是显示在哪里的轮播，方便管理。

（4）、接下来就可以添加轮播图了

可以看到，刚才添加的字段“轮播文字”也在这里显示了。

（5）、轮播图调用

关于自建模型中轮播图的调用，参考官网文档：指定列表调用 即可。

{pboot:list scode=*}

<a href= “[list:link]”><img src=“[list:ico]”></a>

{/pboot:list}

总结：轮播图制作的时候主要就是调用思路。使用自带的轮播扩展，可以直接添加调用；使用模型的方式，可以做一些更高级的定义。

从本篇教程开始，将会以网站中常用的一些组件为例，来帮助大家了解和熟悉PbootCMS的标签。

因为习惯从上往下写页面代码，所以就从网页头部的导航菜单开始。

本篇教程所需要掌握的知识点：CSS盒子模型、CSS选择器、浮动、清除浮动、绝对定位、相对定位、CSS3 2D转换、CSS3 过渡、导航菜单列表标签、当前栏目标签、if条件语句、PHP运算符。

每个人都有自己的代码习惯，比如我就喜欢先写HTML（结构），再写模板标签（数据），接着写CSS（样式），最后写JS（交互）。

所以，先开始写导航菜单的HTML部分：

<!-- 演示就只写二级导航，更多级导航大家可以依葫芦画瓢 -->
<nav class="menu">
    <ul>
        <li>
            <a href="#">主栏目</a>
            <ul>
                <li><a href="">子栏目</a></li>
                <li><a href="">子栏目</a></li>
            </ul>
        </li>
    </ul>
</nav>

接下来，使用PbootCMS的模板标签来填充数据：

<nav class="menu">
    <ul>
        {pboot:nav}
        <li>
            <a href="[nav:link]">[nav:name]</a>
            <ul class="sub-menu">
                {pboot:2nav parent=[nav:scode]}
                <li>
                    <a href="[2nav:link]">[2nav:name]</a>
                </li>
                {/pboot:2nav}
            </ul>
        </li>
        {/pboot:nav}
    </ul>
</nav>

看一下前端页面：

可以看到，二级菜单已经调用出来了，接下来处理一下导航高亮。

导航高亮：

原理：判断当前栏目的ID和导航的ID是否一致，如果一致，则添加class，然后CSS中给这个class设置高亮样式。

方案：使用if条件语句结合当前栏目标签以及导航菜单列表标签进行判断。

代码：

<nav class="menu">
    <ul>
        {pboot:nav}
        <li class="{pboot:if('[nav:scode]'=='{sort:tcode}')}active{/pboot:if}">
            <a href="[nav:link]">[nav:name]</a>
            <ul class="sub-menu">
                {pboot:2nav parent=[nav:scode]}
                <li class="{pboot:if('[2nav:scode]'=='{sort:scode}')}active{/pboot:if}">
                    <a href="[2nav:link]">[2nav:name]</a>
                </li>
                {/pboot:2nav}
            </ul>
        </li>
        {/pboot:nav}
    </ul>
</nav>

在正式制作模板之前，还需要了解并灵活熟练地使用模板标签。

一个模板中，除去结构（HTML）、样式（CSS）、交互（JS）后就是内容（数据）了，而数据就是通过模板标签，把你在网站后台提交的内容调用出来，展示在前端模板页面。通过不同的结构、样式、交互和内容的组合，就能制作出不同的模板。

一、阅读官方开发手册

PbootCMS提供了在线官方开发手册（阅读地址），制作模板的时候可以随时参考手册的内容。

二、灵活使用模板标签

开发手册提供的是最基础的模板标签，但是实际制作模板过程中，会遇到一些手册中没有的需求。毕竟，手册不可能把每个需求的代码都直接给你写好，这时候就需要在模板标签的基础上进行灵活运用了。

思路一：

先使用 指定栏目标签 调用指定子栏目标题：

{pboot:sort scode=*}
    <a href="[sort:link]">[sort:name]</a>
{/pboot:sort}

再使用 指定栏目内容列表 的标签来调用子栏目内容：

{pboot:list scode=*}
    <a href="[list:link]">[list:title]</a>
{/pboot:list}

结合使用：

{pboot:sort scode=1,2,3}
    <a href="[sort:link]">[sort:name]</a>
    {pboot:list scode=[sort:scode]}
        <a href="[list:link]">[list:title]</a>
    {/pboot:list}
{/pboot:sort}

我们只需要指定 scode=子栏目的id 即可。有几个子栏目，scode就写几个id。因为标签支持多个栏目，如：1,2,3。

代码实例：

栏目及栏目内容文档调用：

前台效果：

可以看到，子栏目标题和内容列表已经完成了。

不过，这样就需要解决另外一个问题：如果后台新增了子栏目，或者删除了子栏目，怎么办？

当然，你可以到模板文件的 scode 中继续添加新增的id，或者删除id。每次后台新增或者删除子栏目，模板文件就要改一遍。

为了更好解决这个问题，就需要灵活使用模板标签了。

学习程序，一定要多动手，多思考。

由于本系列是模板制作教程，因此不会涉及一些基础的HTML以及CSS这些知识的详解，大家需要自行去了解。

在了解PbootCMS的模型概念和拥有一定的基础知识之后，就可以开始动手制作模板了。

一、创建模板目录

在template目录下，新建模板目录，命名随意。（例如：new）

二、选择模板目录

在PbootCMS后台 — 基础内容 — 站点信息 — 站点模板中选择刚才新建的new。

清理一下缓存，看一下前端。

发现错误提示，模板文件不存在。那是当然的，因为我们只是新建了一个目录而已，里面什么都没有。

三、创建模板文件

接下来要做的就是在模板目录里面创建模板文件了。这里可以写一个页面创建一个模板文件，也可以统筹规划好有哪些页面，然后把用到的模板文件都一起创建了。（前期教程只做演示，因此之创建一个index.html。后期如果有时间，可以一边写模板一边更新教程，做一个实例教程。）

刷新一下前端页面看看。

还是一个错误，仔细看一下，原来的“不存在”变成“读取错误”了，那是因为只是建了个文件，文件里面还是空的，什么都没有。

四、写个Hello world!

刷新页面，看看Hello world！吧。

五、建立资源文件夹

比较简单，在模板目录下分别建立存放css文件的css目录，存放js文件的js目录，存放图片的img目录。

当然，你也可以把这些文件都直接扔在模板目录里面，或者放到其他地方，只要能引用过来就可以。如果你忍受得了，或者喜欢这种混乱的方式的话。

接下来，模板的制作就是 HTML+CSS+JS+PbootCMS标签调用 的事情了。

1、登陆QQ邮箱，找到设置》账户

2、下拉找到SMTP服务设置，我们是发信，所以第一个和第二个都可以，两个都带有SMTP服务，我们选择第一个点击开启

3、安全验证，我们这里选择发送短信，根据页面提示我们用手机发送短信，完成后点击我已发送

4、记住下面的授权码，复制到剪切板，此授权码用于在PB后台填写到邮箱密码处

5、登陆PB的管理后台，找到邮箱配置，参考下图，填写你的邮箱信息，注意服务器和端口保持和下图一样即可，其余的填写自己的邮箱信息

6、到配置参数中开启留言发送到邮箱功能，打开开关并填写接受留言的邮箱

7、发送测试邮件进行测试