An open API service indexing awesome lists of open source software.

https://github.com/siteserver/template-batraz

Batraz响应式模板
https://github.com/siteserver/template-batraz

Last synced: 15 days ago
JSON representation

Batraz响应式模板

Awesome Lists containing this project

README

          

**模版演示地址:** http://theme.demo.siteserver.cn/batraz/index.html

如果还未安装产品的特提供相应链接:

**产品下载:** http://cms.siteserver.cn

**产品安装:** http://docs.siteserver.cn/getting-started/index.html

**模版下载:** http://templates.siteserver.cn/t-batraz/index.html

**新建站点:** http://docs.siteserver.cn/getting-started/create.html

这是一套响应式网站模版,适应于互联网、企业、媒体、产品型公司以及各种企业集团网站模板所有图片在手机端都进行过处理,而响应式网站不同设备内容源码是一样的。因此,你不得不担心响应式网站在移动端的速度以及流量消耗,我们采用图片处理技术后,在手机上会只加载尺寸更小的图片。
**一、首页(栏目页)**
**二、公司简介**
**三、资质荣誉**
**四、新闻列表页**
**五、客户案例**

**一、 首页(栏目页)**

**1.1首页头部+Banner**

![](/assets/image001.png)

从上到下的常规流程来说,首先导航这块,具体调取方式除了普通的栏目列表Channels之外,我们一般是调用某一个栏目组里栏目。我们进入到信息管理—栏目管理

![](/assets/image002.png)

可以看到,前台导航栏里所有的栏目都在nav这个栏目组里,我也可以进入到代码里进一步的验证,显示管理—模板管理—首页模板—包含文件(header)

![](/assets/image003.png)

果然是.. 果然是.. 它就是..
Banner图,我们一进后台,首先观察他的栏目结构,我们肯定第一时间会发现banner栏目,我们只需要在这个栏目里进行banner图的维护了。

![](/assets/image004.png)

**1.2企业资讯**

![](/assets/image005.png)

这里调取了四条信息的图片、标题、简介

![](/assets/image006.png)

从首页模板的代码里,我们会验证,它们是四篇来自于企业资讯栏目下最新的四篇。

**1.3关于我们+客户案例**

![](/assets/image007.png)

我们可以发现,网站后台的栏目结构还是是非常简单清晰的,首页布局基本跟也是导航是相对应的。

![](/assets/image008.png)

点击查看更多,会进入到关于我们的详情页
客户案例,我们可以看到,它是分了四种客户类型。

![](/assets/image009.png)

从代码里我们会看到,从每个类型里我们调取了九张图片(totalNum="9"),所以我们为了首页的切换效果,每个类型下最少得加上九张图。原图大小320*200,最少得292*182,因为我们后面的客户案例栏目页上会用到。

**1.4首页底部**

![](/assets/image010.png)

底部我们划分为两个区域,分别在两个包含文件里(innews和footer)
上方左边的通知公告我们设有专门的通知公告栏目,右侧的联系我们,直接可以在包含文件显示管理—包含文件innerwsli里管理
下方的,左侧调取的为nav栏目组里的栏目,跟到导航栏是一样的,友情链接也是有专门的栏目,最右侧微信,我们到设置管理—站点属性设置—二维码里进行管理

![](/assets/image011.png)

**二、公司简介**

![](/assets/image012.png)

我们可以看到,关于我们这个栏目页的内容,其实就是公司简介这个子栏目的内容。这块设置是在栏目管理——关于我们——高级设置,把链接设置为第一个子栏目。
信息管理——内容管理——关于我们——公司简介

![](/assets/image013.png)

常规的信息调取,标题、图片、内容。

**三、 资质荣誉**

![](/assets/image014.png)

我们会发现,资质荣誉都是图片展示,我们称这样的页面为图片列表页。

![](/assets/image015.png)

与一般的新闻栏目列表不同的是,我们调取的是图片而已。

**四、新闻列表**

![](/assets/image016.png)

我们在前台点击通知公告、企业资讯、新闻中心、招聘信息,会发现它们都可能用的是同一套模板

![](/assets/image017.png)

进入后台——显示管理——匹配模板,可以看到都是用的系统栏目模板。

![](/assets/image018.png)

图片、标题、简介、时间。这里图片的大小也是320*200

**五、客户案例**

![](/assets/image019.png)

我们可以看到,客户案例跟资质荣誉同样的用图片列表的展现形式表现的,唯一的区别在于,客户案例有多一层分类。

![](/assets/image020.png)

如果不需要下级分类,只需要把后台四个分类下面的子栏目增加删除即