(教程中使用的工具在附件包)

克隆站点

遇到好看的网站想要仿照怎么办?可以用工具将整站的代码扒下来,但是那是静态的,无法通过后台去推送自己的文章和代码。需要将静态html代码改成可以发布的系统

扒站

找到你要仿的站点,使用小飞兔(www.xftsoft.com)将网站的代码扒下来。注:小飞兔需要安装.NET46
安装过程不赘述
解压小飞兔软件后,打开软件,输入要仿的站点
file
点击开始下载
file
下载后即可将目标整站下载下来。

下图是扒站成功后本地打开的示意:
file

安装pbootcms

安装环境

pbootcms用的是php环境,可用宝塔(bt.cn),也可以用小皮(xp.cn)搭建环境。
这里演示小皮的使用方法
下载小皮后进行安装(安装方法略)
启动WNMP即可(windows nginx mysql php)
file
点击“网站”,默认会有一个名为localhost的站点,你也可以新建一个网站用于测试(域名无所谓,仅修改本地hosts,用于本地测试访问)

打开网站根目录,找到网站所在目录,删除里面默认的文件
file

安装pbootCMS

进入https://www.pbootcms.com/ 下载pbootcms,下载后解压,将根目录的文件全部复制到上面的网站根目录。此时就可以访问本地的站点了
file
但是默认是无法访问的,需要将网站根目录下的config/database.php中的sqlite改为pdo_sqlite
file
这样站点就可以正常访问了
file
pbootcms网站的后台管理页面是:
xxx.com/admin.php
账号密码admin/123456

注:如果用的是localhost的话不用授权码可以直接访问。如果用的是其他域名的话,需要在pbootcms官网进行授权(免费的)
授权地址:https://www.pbootcms.com/freesn/
file
将获取的授权码填入后台的这里即可
file

修改静态文件

新建模板

在网站根目录下的template下创建一个文件夹(比如这里叫myweb)
file
将第一步中扒下来的站点文件全部放到这里myweb/html目录下
file
将扒站下来的static目录改名为skin放到网站根目录下(static这个目录下的都是js,css,img等文件,改名是因为根目录下已经有一个static目录了)
file

在网站后台中将模板改成刚新建的myweb
file
再次访问时,发现可以访问到页面了,但是页面的css js img等信息都访问不了
file

修改模板

修改模板需要用到一个手册pb开发助手高效版
file
里面是标签的用法,方便查询。

修改网页调用资源路径

上面之所以不能显示样式,是因为路径不对
使用sublime Text工具修改模板页面代码,将所有js,css,img都替换成正确的路径
file

截图里的标签{pboot:sitepath}表示站点路径,在上面提到的手册里可以查到

这样,站点的样式就都能展示出来了
file

修改公共展示部分

扒下来的站点的都是静态html页面,每个文件都是独立的,比如菜单页和底部这些部分内容一般都是一致的,但是html的每个页面都会写一遍。后期维护非常难。
我们需要将公共部分单独写一个文件,在其他页面需要的时候,只需要引入公共文件即可。
创建公共文件
在html目录下新建一个comm目录,将在这里面存放公共部分
如:新建head.html文件,将公共的顶部部分写到这个文件里,这样,其他html页面中关于顶部的公共部分代码就可以删掉了,只需要引入公共部分的head.html文件即可。引入文件的标签:

# 引用文件
{include file=comm/head.html}

调用后台配置的值

虽然其他页面可以通过引用标签来达到调用公共部分文件,但是仍不能实现和后台联动。我们需要的通过pbootcms的后台来操作网页的菜单项。

后台添加菜单项

网页的菜单在pbootcms里叫做栏目,在这里,我们可以修改自己网页的菜单。
file

比如我们要做“关于我们”的菜单
file
新增一个关于我们的专题栏目(专题表示仅展示用的单页面)
因为关于我们下有二级菜单,所以在"批量新增"里添加
file
这里为了效果先随便填写,之后可以再做修改
其他菜单的添加这里略过。最终效果如下:
file

此时只要在公共页head.html里将后台的菜单调用过去就可以了

调用后台配置的菜单

在head.html里,遍历后台配置的菜单
file

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。