有一个朋友,之前一直是做三七(一周中药材)生意,现在想要制作一个产品展示网站,希望通过竞价或者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.产品详情页模板制作

根据列表模板制作过程即可完成产品详情页模板制作,在此不做过多赘述。
至此,我们网站中最主要的三个页面已经完成,及网站首页网站列表页网站详情页。但是里面仍有许多细节需要我们去调整,比如:

  • [ ] 详情页面细节调整,获取微信弹出,分享按钮实现
  • [ ] 列表页面侧边栏链接替换,侧边栏公共模板提取
  • [ ] 首页营销术语整理完善
  • [ ] 整站公共变量设置
  • [ ] ……

6.自定义页面设置

使用wordpress从0-1搭建企业网站

WordPress是一个以PHP和MySQL为平台的自由开源的博客软件和内容管理系统,全球又43%的网站都在使用Wordpress进行网站制作。即使你是小白,也可以通过我的教程,从0-1制作属于自己的独立网站。

chenglulu

欢迎订阅

订阅我们的免费时事通讯

Leave A Comment