PbootCMS最全使用方法

基本思路，先在本地制作好，再放到线上。

所以先来看本地的制作方法。

安装本地环境（xampp）

到电脑腾讯管家直接搜索xampp点击下载即可，下一步安装成功之后如图所示：

2.打开xampp

    点击如图所示的两个按钮，意思是启动本地服务和mysql数据库，启动这两个东西之后，本地环境就ok了。

测试下本地环境是否成功：

点击下图所示的按钮，出现如图所示的页面即可证明本地环境成功。

3.下载PbootCMS

进入官网点击这里即可下载：

然后克隆到本地就可以了：

得到这样一个压缩文件，解压之后是这样的：

4.运行安装pbootCMS

C:\xampp\htdocs 找到这个路径，删除所有的东西，然后把pbootCMS文件夹复制到此处，如图所示：

然后，再次点击这里:

就会看到pbootCMS的安装界面，按要求填写信息，安装好即可。

5. 运行程序，查看网站的前台和后台

前台地址：http://localhost/PbootCMS-3.X/

后台地址：http://localhost/PbootCMS-3.X/admin.php

系统后台默认访问路径：http://域名/admin.php   账号：admin   密码：123456

看到如上图所示，说明程序已安装成功。

到此，我们只是把官方的demo成功运行起来了，我们需要的是把自己的静态网站和pbootCMS后台联系起来，让后台能够动态修改静态页的数据。

简而言之，使用CMS的目的就是给静态页面配一个后台，让数据动态化。

接下来开始给自己的静态网页配pbootcms的后台。

6. 静态网站放入cms系统

需要准备好静态网站

然后，把静态网站的文件按照pbootcms的规则复制到C:\xampp\htdocs\PbootCMS-Site3\template\default目录下

然后，还需要一点改动，就是要把所有的.html文件放在一个名为html的文件夹下，而其他的css，js，img等文件都不用管，如图所示：

7. 运行自己的网站

此时再刷新http://localhost/PbootCMS-Site3/页面，会发现只有一些文字，网站的样式和图片都没了，这是因为我们把文件改动了，路径变了，自然就找不到样式图片等等东西了。

下面需要修改路径，主要修改css，js和其他依赖文件的路径，至于图片先不修改。

在所有的路径只需要在前面加上{pboot:sitetplpath}/即可，因为这个意思就是网站根路径，如图所示：

做完这一步，你就可以看到刚替换的网站页面已经正常显示了。

8. 抽离头和尾

在上一步的时候，你会发现所有的页面都有相同的文件引入，则需要挨个去修改路径，非常麻烦，那么此时就可以把这些相同的公共的部分抽离出来，放在单独的文件里，哪里用到在哪里引用即可。

常规的大部分网站页都是头部和尾部基本都是相同的，那么我们就把头和尾分别放在两个单独的文件里。

在html文件夹下新建comm文件夹，在comm文件夹下新建head.html和foot.html

然后看下网站的静态代码（打开index.html），把头部代码剪切到head.html里，尾部代码剪切到foot.html里。

如尾部代码文件：

此时，首页就缺少了头和尾，下面就把抽离出去的再引进来：

index.html的头部空闲位置使用{include file=comm/head.html}代替引入：

尾部同理 {include file=comm/foot.html}：

现在再刷新下http://localhost/PbootCMS-Site3/之后，一页已正常。

此时头尾已经是公共的了，其他所有用到头尾的页面，全部使用如上方式替换掉原本的头和尾。

9. 设置后台栏目

现在我们需要把静态页面的数据换成后台可控制的数据，先从栏目设置开始，因为栏目就是导航栏，有多少导航栏就有多少页面，而页面和导航栏就是在后台相关联的。

进入后台，先把原有的栏目全部删除，按照静态页面的导航栏的顺序依次新建栏目，如果有二级导航，那就添加二级栏目。

在添加栏目的时候，需要添加每个栏目对应的页面html名称。即页面模板。这个东西一般就按照静态页面的名字填选就好了。为啥是选填，因为这里会自动获取到你所有的html页面名称，你只需选就可以了。

像新闻和产品这样的列表到详情的页，需要选择列表页模板和详情页模板，两个模板都要填，像关于我们和联系我们这样的单页面，只需要填个详情页模板就可，详情页模板就是各自的html名字。

10. 换栏目数据

后台创建好栏目之后，就可以在静态页面上替换了。

导航栏代码替换（含二级导航）：

<ul id="" class="menu"><li class="menu-item hover"><a href="{pboot:sitepath}/">首页<span>HOME</span></a> {pboot:nav}<li class="menu-item"><a href="[nav:link]">[nav:name]<span>[nav:subname]</span></a><ul class="sub-menu"> {pboot:2nav parent=[nav:scode]}<li class="menu-item"><a href="[2nav:link]">[2nav:name]</a></li> {/pboot:2nav}</ul></li> {/pboot:nav}</ul>

然后就可以看到页面上的导航栏已经显示出来了。

11. 换轮播图数据

后台：

前端：

找到轮播列表

<ul> {pboot:slide gid=1 num=3}<li><img src="[slide:src]"></li> {/pboot:slide}</ul>

12. 换网站基本信息

基本信息就是，底部信息，网站名称等

后台：

前端：

找到对应的地方替换即可，替换的标签网址：

https://www.pbootcms.com/docs/217.html

13. 列表数据：

例如新闻页news.ht就是列表到详情的数据形式。

后台：

前端：

使用当前栏目列表标签：https://www.pbootcms.com/docs/221.html

列表分页：直接使用cms自带的分页即可

https://www.pbootcms.com/docs/222.html

此时列表已经显示，下面来到新闻详情页：

找到详情页的页面，使用内容详情页标签替换数据：

https://www.pbootcms.com/docs/223.html

详情页的上一篇下一篇使用如下标签替换（这里不需要跳转链接）：

上一篇:{content:precontent}

下一篇:{content:nextcontent}

到此新闻页的数据就替换完了。同理，所有的列表到详情都是相同的做法

14. 单页数据替换

单页数据替换指的是例如，关于我们，联系我们等页面。

以联系我们页面为例：

后台：

前端：

使用指定内容获取，所有的无列表的页面（专题）都用这个获取，注意这个需要填写专题的id，上图中有 联系我们=48

https://www.pbootcms.com/docs/224.html

还有就是例如要在首页获取某个图片，某段文字，都可使用指定内容获取，只需要写上对应的id皆可拿到

15. 留言提交表单功能

这个可以直接使用cms提供的完整代码cv：

<form action="{pboot:msgaction}" method="post"> 联系人：<input type="text" name="contacts" > 手机：<input type="text" name="mobile" > 内容：<input type="text" name="content" > 验证码：<input type="text" name="checkcode" ><img title="点击刷新" src="{pboot:checkcode}" onclick="this.src={pboot:checkcode}?+Math.round(Math.random()*10);" /><button type="submit">提交</button></form>

如果有自己的表单样式，那么按照以上的代码，把静态页面的表单的name字段替换一下即可，别忘了一定要加上验证码：

然后留言就可以了，提交成功之后就可以在后台看见。

16. 搜索功能

首先，有一个搜索框，其次有一个搜索列表页，且名称必须是search.html，并且要在html文件夹内

然后，使用以下标签替换搜索框的字段即可

<form action="{pboot:scaction}"  method="get">

    关键字：<input type="text" name="keyword" >

    <button type="submit">搜索</button>

</form>

点击搜索即可跳转search.html显示出搜索的列表

搜索结果列表

{pboot:search}

    <a href="[search:link]">[search:title]</a>

{/pboot:search}

17. 注册功能

有一个注册页面，复制如下代码：

<div class="container pages"> <!-- 用户注册 --> <div class="row"> <div class="col-lg-3"></div> <div class="col-12 col-lg-6"> <form class="my-4" onsubmit="return register(this);"> <div class="form-group"> <label for="username">账　号</label> <input type="text" name="username" required id="username" onblur="isRegister()" class="form-control" placeholder="请输入登录账号"> <div id="usernote"></div> </div> <div class="form-group"> <label for="nickname">昵　称</label> <input type="text" name="nickname" required id="nickname" class="form-control" placeholder="请输入账号昵称"> </div> <div class="form-group"> <label for="password">密　码</label> <input type="password" name="password" required id="password" class="form-control" placeholder="请输入登录密码"> </div> <div class="form-group"> <label for="rpassword">确认密码</label> <input type="password" name="rpassword" required id="rpassword" class="form-control" placeholder="请再次输入登录密码"> </div> {pboot:if({pboot:registercodestatus}==1)} <div class="form-group"> <label for="checkcode">验证码</label> <div class="row"> <div class="col-6"> <input type="text" name="checkcode" required id="checkcode" class="form-control" placeholder="请输入验证码"> </div> <div class="col-6"> <img title="点击刷新" style="height:33px;" id="codeimg" src="{pboot:checkcode}" onclick="this.src={pboot:checkcode}?+Math.round(Math.random()*10);" /> </div> </div> </div> {/pboot:if} {pboot:if({pboot:registercodestatus}==2)} <div class="form-group"> <label for="checkcode">邮箱验证码</label> <div class="row"> <div class="col-6"> <input type="text" name="checkcode" required id="checkcode" class="form-control" placeholder="请输入验证码"> </div> <div class="col-6"> <span class="btn btn-info mb-2" onclick="sendEmail();">发送</span> </div> </div> </div> {/pboot:if} <div class="form-group"> <button type="submit" class="btn btn-info mb-2">立即注册</button> <span class="text-secondary ml-3">已有账号？<a href="{pboot:login}">马上登录</a></span> </div> </form> </div> <div class="col-lg-3"></div> </div> </div><script>//ajax注册function register(obj){ var url={pboot:register}; var username=$(obj).find("#username").val(); var nickname=$(obj).find("#nickname").val(); var password=$(obj).find("#password").val(); var rpassword=$(obj).find("#rpassword").val(); var sex=$(:radio[name="sex"]:checked).val(); var checkcode=$(obj).find("#checkcode").val(); $.ajax({ type: POST,url: url,dataType: json,data: {username: username,nickname: nickname,password: password,rpassword: rpassword,sex: sex,checkcode: checkcode },success: function (response, status) {if(response.code){ alert("注册成功！"); location.href= response.tourl; }else{ $(#codeimg).click(); alert(response.data); } }, error:function(xhr,status,error){ alert(返回数据异常！); } }); return false;}//发送邮件验证码function sendEmail(){ var url={pboot:sendemail}; var username=$("#username").val(); if(!username){ $("#username").addClass("is-invalid"); $("#usernote").addClass("invalid-feedback"); $("#username").removeClass("is-valid"); $("#usernote").removeClass("valid-feedback"); $("#usernote").text("请输入需要注册的账号！"); return false; } $.ajax({ type: POST,url: url,dataType: json,data: {to: username },success: function (response, status) {if(response.code){ alert(response.data); }else{ alert(response.data); } }, error:function(xhr,status,error){ alert(返回数据异常！); } }); return false;}//检查注册账号function isRegister(){ var url={pboot:isregister}; var username=$("#username").val(); if(!username){ $("#username").addClass("is-invalid"); $("#usernote").addClass("invalid-feedback"); $("#username").removeClass("is-valid"); $("#usernote").removeClass("valid-feedback"); $("#usernote").text("请输入需要注册的账号！"); return false; } $.ajax({ type: POST,url: url,dataType: json,data: {username: username },success: function (response, status) {if(response.code){//已经被注册 $("#username").addClass("is-invalid"); $("#usernote").addClass("invalid-feedback"); $("#username").removeClass("is-valid"); $("#usernote").removeClass("valid-feedback"); }else{//未被注册 $("#username").addClass("is-valid"); $("#usernote").addClass("valid-feedback"); $("#username").removeClass("is-invalid"); $("#usernote").removeClass("invalid-feedback"); } $("#usernote").text(response.data); }, error:function(xhr,status,error){ alert(返回数据异常！); } }); return false;}</script>

18. 登录

登录页复制如下代码或更换字段：

<div class="container pages"><!-- 用户登录 --><div class="row"><div class="col-lg-3"></div><div class="col-12 col-lg-6"><form class="my-4" onsubmit="return login(this);"><div class="form-group"><label for="username">账　号</label><div><input type="text" name="username" required id="username" class="form-control" placeholder="请输入登录用户名/邮箱/手机号码"></div></div><div class="form-group"><label for="password">密　码</label><div><input type="password" name="password" required id="password" class="form-control" placeholder="请输入登录密码"></div></div> {pboot:if({pboot:logincodestatus})}<div class="form-group"><label for="checkcode">验证码</label><div class="row"><div class="col-6"><input type="text" name="checkcode" required id="checkcode" class="form-control" placeholder="请输入验证码"></div><div class="col-6"><img title="点击刷新" style="height:33px;" id="codeimg" src="{pboot:checkcode}" onclick="this.src={pboot:checkcode}?+Math.round(Math.random()*10);" /></div></div></div> {/pboot:if}<div class="form-group"><button type="submit" class="btn btn-info mb-2">立即登录</button><span class="text-secondary ml-3"><a href="{pboot:register}">注册账号</a></span><span class="text-secondary ml-3"><a href="{pboot:retrieve}">找回密码</a></span></div></form></div><div class="col-lg-3"></div></div></div><script>//ajax登录function login(obj){var url={pboot:login};var username=$(obj).find("#username").val();var password=$(obj).find("#password").val();var checkcode=$(obj).find("#checkcode").val(); $.ajax({type: POST,url: url,dataType: json,data: {username: username,password: password,checkcode: checkcode },success: function (response, status) {if(response.code){ alert("登录成功！"); location.href=response.tourl; }else{ $(#codeimg).click(); alert(response.data); } },error:function(xhr,status,error){ alert(返回数据异常！); } });return false;}</script>

19. 评论功能

创建一个页面 comm---comment.html 复制下面代码

{pboot:if({pboot:commentstatus})}<div class="container"><div class="shadow-sm p-3 my-5 bg-white rounded"><h4>发表评论：</h4><form class="my-4" onsubmit="return submitcomment(this);" data-action="{pboot:commentaction}" ><div class="form-group"><textarea name="comment" id="comment" class="form-control" placeholder="请输入评论内容"></textarea></div> {pboot:2if({pboot:commentcodestatus})}<div class="form-group"><div class="row"><div class="col-6 col-md-3"><input type="text" name="checkcode" required id="checkcode" class="form-control" placeholder="请输入验证码"></div><div class="col-6 col-md-3"><img title="点击刷新" class="codeimg" style="height:33px;" src="{pboot:checkcode}" onclick="this.src={pboot:checkcode}?+Math.round(Math.random()*10);" /></div></div></div> {/pboot:2if}<div class="form-group"><button type="submit" class="btn btn-info mb-2">提交评论</button></div></form><h4>评论记录：</h4><a name="comment"></a> {pboot:comment contentid={content:id} num=20}<div class="media border-bottom pb-3 pt-3"><img class="mr-3" src="[comment:headpic]" height="25"><div class="media-body"><h6 class="mt-0"><strong>[comment:nickname]</strong><small style="color:#999">[comment:date]</small></h6><p>[comment:comment] <span class="badge badge-light text-secondary font-weight-normal replybtn" data-action="[comment:replyaction]">回复</span></p> {pboot:commentsub} <!-- 调用子评论 --><div class="media mt-3 border-top-dashed pt-3"><img class="mr-3" src="[commentsub:headpic]" height="25"><div class="media-body"><h6 class="mt-0"><strong>[commentsub:nickname]</strong> <small style="color:#999">[commentsub:date]</small></h6><p> @[commentsub:pnickname] [commentsub:comment] <span class="badge badge-light text-secondary font-weight-normal replybtn" data-action="[commentsub:replyaction]">回复</span></p></div></div> {/pboot:commentsub}</div></div> {/pboot:comment}<!-- 分页 --> {pboot:2if({page:rows}>0)}<nav aria-label="page navigation" class="my-4"><div class="pagination justify-content-center"><a class="page-item page-link" href="{page:index}#comment">首页</a><a class="page-item page-link" href="{page:pre}#comment">上一页</a><a class="page-item page-link" href="{page:next}#comment">下一页</a><a class="page-item page-link" href="{page:last}#comment">尾页</a></div></nav> {2else}<div class="text-center my-5 text-secondary">未查询到任何数据！</div> {/pboot:2if}</div></div><!-- 评论回复弹框 --><div class="modal" tabindex="-1" role="dialog" id="reply"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h5 class="modal-title">回复评论：</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><form onsubmit="return submitcomment(this);" data-action="" id="replyform"><div class="modal-body"><div class="form-group"><textarea name="comment" id="comment" class="form-control" placeholder="请输入评论内容"></textarea></div> {pboot:2if({pboot:commentcodestatus})}<div class="form-group"><div class="row"><div class="col-6"><input type="text" name="checkcode" required id="checkcode" class="form-control" placeholder="请输入验证码"></div><div class="col-6"><img title="点击刷新" class="codeimg" style="height:33px;" src="{pboot:checkcode}" onclick="this.src={pboot:checkcode}?+Math.round(Math.random()*10);" /></div></div></div> {/pboot:2if}</div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button><button type="submit" class="btn btn-info">提交评论</button></div></form></div></div></div><script>//评论回复弹框$(.replybtn).on("click",function(){ var url=$(this).data("action"); $("#reply").modal("show"); $("#replyform").data("action",url);});//提交评论function submitcomment(obj){var url= $(obj).data("action");var comment=$(obj).find("#comment").val();var checkcode=$(obj).find("#checkcode").val(); $.ajax({type: POST,url: url,dataType: json,data: {comment: comment,checkcode: checkcode },success: function (response, status) {if(response.code){ alert(response.data); $(obj)[0].reset(); $(".modal").modal("hide"); window.location.reload() }else{if(response.tourl!=""){if(confirm(response.data+是否立即跳转登录？)){ location.href=response.tourl; } } $(.codeimg).click();//更新验证码 } },error:function(xhr,status,error){ alert(返回数据异常！); } });return false;}</script>{/pboot:if}

在详情页中调用：复制此标签，评论即可出现（这里是吧评论功能抽离出去，然后再引进来了）

{include file=comm/comment.html}

如果需要某个页面的字段过多，后台的字段不够的话，可以在

全局配置 -- 模型字段 -- 扩展字段新增 里面新增字段

前端调用（内容页）：

[content:ext_***]调取扩展字段内容

20. 把整个文件夹上传到服务器

当所有功能都完成之后，就可以上线了

结束。

道友，可以点个赞吗👍🏻