有一个朋友,之前一直是做三七(一周中药材)生意,现在想要制作一个产品展示网站,希望通过竞价或者SEO获取一些客户,因此想让我协助制作一个展品展示网站。由于自己也在摸索中,因此便有了本文,记录一个网站从0-1的制作过程。
一.环境搭建
服务器:腾讯云服务器
域名:xiaochensanqi.com
服务器环境:宝塔免费版7.9.7,安装LNMP环境
如何购买腾讯云服务器,可以查看本篇文章:blog.zmrw.net
如何安装宝塔环境,可以查看本篇文章:blog.zmrw.net
如何通过宝塔部署帝国cms环境,可以查看本篇文章:blog.zmrw.net
二.初始网站模板制作
在制作官网时,首先需要由前端工程师开发一套前端模板,由于没有这方面人员配置,因此决定在 https://themeforest.net/
查找是否有合适的HTML进行购买。最终选择了此模板作为网站初始样式模板。
1.1 模板整理
虽然我们有了最初的前端样式,但是外国人的习惯跟我们国人还是有一些差异的,因此还需要根据我们网站的结构,制作出对应的html页面,方便我们后续操作。
由于我们是产品展示网站,一般包含这几个页面:
- 网站首页:index.html
- 关于我们:about.html
- 联系我们:contact.html
- 产品分类页:product-category.html
- 产品详情页:product-detail.html
- 知识专栏:knowledge.html
- 知识详情:knowledge-detail.html
- 售后服务:service.html
- 公司新闻页:news-list.html
- 新闻详情页:news-detail.html
将如上页面制作完毕,即可开启下一步操作。
三.帝国后台操作
我们在制作首页,详情页,列表页时需要调取我们产品,因此我们可以先将产品上传至帝国CMS,方便我们后续一个操作。
1.产品数据库设计
我们的产品主要有标题,图片,产品简介,产品详情,产品价格这几个参数。我们发现原有的商城系统数据表基本可以满足我们的需求,因此只需在该数据表下增加三七产品系统模型。具体操作如下:
1.1 管理商城系统数据表
中管理系统模型
1.2 选择增加系统模型
1.3 根据产品需求选择合适字段
点击最下面提交,即可生成对应系统模型,后续制作产品分类是需要选择该系统模型。
至此产品系统模型设置完毕,制作目录是选择产品系统模型,添加对应产品时,就会出现相应填写信息,如果网站有其它的数据库需要设置,也是用这个方法进行操作,比如:FAQ模型,轮播图模型,解决方案模型等等。
2.设置产品列表模板
一般网站产品列表都是一个固定的样式,我们在这里先设计一个产品列表模板,用来循环展示我们的产品
2.1增加列表模板
2.2编写列表信息,选择系统模型
可以先不要纠结网站模板内容,我们后期还会修改,我们之所以先做这一步,方便后期设置产品目录时调用
至此,列表模板制作完毕,如果想要使不同的列表展示不同的样式,按照此方法新建新的列表模板,目录调用即可
2.3增加产品详情内容模板
2.4编写产品详情内容模板
先设计出来,以后在优化,方便我们设置目录是调用
3.产品目录设置
根据我们之前设置的目录结构,对产品目录进行设计
3.1增加栏目
3.2编写栏目信息,并选择系统模型
只有终级栏目下才能增加信息,我们产品中心仅仅是用来调用目录,因此没有将其设置为终极目录,
模板选择产品列表模板
按照此方法添加其它目录,切记只有终级栏目下才能增加信息,比如我需要新建三七粉一个二级目录,它可以新增产品,因此我将其设计成终极栏目,这里需要选择内容模板,选择我们要展示的内容模板你即可。
3.3网站产品目录结构如下
4.增加产品信息
制作网站之前,最后先添加测试数据,方便我们制作模板时调用,但是我一般喜欢先上传自己产品,之后在慢慢优化
4.1增加产品信息
4.2 填写产品信息
至此,前期准备工作完毕,下面将进行网站制作
四.帝国网站制作
1.静态文件上传
上传网站静态文件到服务器/home/wwwroot/xiaochensanqi.com/skin/static
- 进入到网站skin目录:
cd /home/wwwroot/xiaochensanqi.com/
- 创建static目录:
mkdir static
- 将静态文件上传至static目录
2.添加网站首页方案
2.1更改静态文件路径
替换原有链接到帝国链接,及在所有的静态路径前面添加[!--news.url--]skin/static/
可以使用批量替换方式进行替换
2.2 增加首页方案
登录帝国cms后台,增加首页方案
2.3 将修改好的首页内容复制进来保存
2.4 点击浏览,查看页面是否展示完整
至此,帝国模板制作的流程已经制作完毕,之后就是重复性工作,不断优化页面内容以及动态调取产品。为了方便之后代码编写,我们需要定义一些常量,比如电话,邮箱,地址,方便后期我们修改,还需要提取出来一些公共部分,如我们的头部,尾部,css,js的调用,都可以抽离出来,方便网站模板制作。
3.网站公共部分抽离
3.1网站头部公共部分提取
选择模板->公共模板变量->管理模板变量->增加模板变量
将首页header部分放在变量值中
将模板变量名替换首页模板header内容
至此 网站头部公共部分提取完成
3.2网站其它公共部分提取
同上面操作,分别提取出网站尾部,网站head公共css代码模板,网站尾部js代码
将替换后的内容重新发布的首页管理方案,重新打开首页,如果页面样式没有变化,则说明公共部分抽离成功。
4.产品列表页模板制作
4.1提取列表模板公共部分
将制作好的列表模板整理出来,首先参考上节内容提取公共部分
4.2 列表模板固定参数设置
- 列表标题:
[!--pagetitle--]
- 首页链接:/
4.3产品列表内容提取
列表内容模板(list.var) (*):[!--empirenews.listtemp--]<!--list.var1-->[!--empirenews.listtemp--]
列表内容模板(list.var):
产品参数由[!--产品--]
调用,及 [!–字段名–]:数据表字段内容调用
保存完毕后更新所有产品栏目页,如果产品成功调取,即说明产品列表模板制作完成
5.产品详情页模板制作
根据列表模板制作过程即可完成产品详情页模板制作,在此不做过多赘述。
至此,我们网站中最主要的三个页面已经完成,及网站首页,网站列表页,网站详情页。但是里面仍有许多细节需要我们去调整,比如:
- [ ] 详情页面细节调整,获取微信弹出,分享按钮实现
- [ ] 列表页面侧边栏链接替换,侧边栏公共模板提取
- [ ] 首页营销术语整理完善
- [ ] 整站公共变量设置
- [ ] ……