网市场模板制作入门

这里，以最简单的流程，来帮你入门网市场云建站系统。仅做学习参考。 **前提：你要先开通一个新网站。** [TOC] ## 1. 相关资料下载 #### 教程中的html原始模板 [点此下载](http://cdn.weiunity.com/site/491/news/file/201805051525528911841013960.zip) 现有html模板共有三个页面：首页、关于我们、新闻列表。这里，来演示将此html模板制作成网市场云建站系统所用模板的步骤要想按照一下步骤学习练习，此附件是必须下载的。 ## 2. 抽取，创建模板变量创建模板变量的目的，如：很多页面中都有头部导航，如果导航中要增加一项，那么有导航的每个页面也要挨个改过来，页面很多，太麻烦。而做成模板变量，可以只需要改动模板变量即可。页面中都是调用模板变量，也就不用再每个页面都去改了。 #### 2.1 查看html模板源代码打开下载的 html模板进行编辑，预览其源代码找到 about.html 、 index.html 、 news.html 三个模板页面中，都共同有的头部、尾部。当然，这里不一定非得头部、尾部，这里只是把相同的地方找出来。如下图所示：

#### 2.2 创建模板变量将上面找到的相同的两处，分别保存成网市场云建站系统的模板变量。登录网站管理后台，如下图：

同时，可以在变量名的后面说明中，已经指出，可以在模板页面中，使用 {include=变量名} 来进行调用，也就是，此名为 nav 的模板变量，可以在模板页面中，使用 {include=nav} 来直接调用。这里，共创建了两个模板变量： nav、footer 注：模板变量名字可以自己随便起名，限英文、数字、_(下划线) #### 2.3 改动模板页面上一步我们创建了两个模板变量nav、footer，接下来，就可以将模板页面中的这两处，改成动态调用模板变量的。如下图所示：

其他两个 about.html、 news.html 也同样如此。视频说明：

## 3. 创建首页 #### 3.1 创建首页的模板页面网市场云建站系统中，新建一个模板页面，然后将 index.html 源代码直接复制到新建立的首页模板页面中，保存即可。

#### 3.2 生成整站，预览成果然后点击生成整站，生成网站静态html页面。如此，便可点击预览网站，进行预览刚做的首页了。步骤如下：

## 4. 创建关于我们页面 #### 4.1 创建关于我们的模板页面关于我们页面，是一个内容展示性页面，向访客展示关于我们的图文内容。因此，在添加模板页面时，选择 **详情页模板** 。关于我们的模板页面，主要是标题、正文的显示。创建一个关于我们模板页面，步骤如下图所示

#### 4.2 创建关于我们栏目创建一个栏目，栏目名为关于我们，并给此栏目选上刚创建的关于我们的模板页面。步骤如下图：

#### 4.3 修改关于我们的内容，预览创建一个栏目类型为独立页面的栏目后，会自动为这个栏目创建一条内容。进入内容管理，选择关于我们栏目，编辑其内容。步骤如下图所示：

注：修改内容并保存后，预览才行。如果不修改内容，预览会报404 ## 5. 创建新闻列表页面 #### 5.1 创建新闻列表的模板页面

#### 5.2 添加新闻资讯栏目

#### 5.3 添加新闻资讯内容，并预览本栏目

## 6. 修改导航栏菜单的链接网址网站建立好后，导航栏需要将网址变为当前网站的。每个栏目的网址，都是栏目代码 + .html 的组合，如，新闻资讯的栏目代码是 news ,则新闻资讯的网址为 news.html 首页则是固定的网址： index.html

## 7. 设置全局变量比如，页面底部的QQ群的群号，如果别人在实际使用这个模板做网站时，想要修改QQ群号，那还要点开模板变量，从html代码中找到QQ群号进行修改。但是如果使用者本身不懂HTML，在修改操作时是非常吃力的，需要一种对于不懂技术的人来说，更友好的修改方式。这里就是演示全局变量的使用。全局变量便是当前网站模板体系中，可以随处调用的变量。可在模版页面、模板变量中，使用 {var.xxx} 将设定好的全局变量的值调出。通过左侧 [模板管理] - [全局变量] ，进行管理。如下图所示

点击添加全局变量按钮，添加一个全局变量，将QQ群编辑的这个加上。如下图所示

注意，备注说明强烈建议写的详细点，比如普通文字录入，比如是要录入公司简介，那么备注里要加上建议填写字数，比如建议填写 80~100个字，这样用户就知道写多少了；又比如要上传LOGO图，要备注上需要上传图片的尺寸如 320*240，这样避免用户不知道上传多大的，随便上传一个导致失真，使网站展示美观效果降低。上图中录入方式也是有多种，如最常用的文本录入、图片上传、下拉选择等方式，可以选择一种合适的录入方式。当然这里QQ群号就选择了文本录入的方式。点击保存后，便可看到多了一条

如上图所示，点击编辑按钮，即可进行更改这个QQ群号了。关于这个全局的更多具体使用，您可以新创建一个网站，然后导入模板编号为 lmyglm1 的模板，参考其全局变量的设置。详细参考链接： https://e.gitee.com/leimingyun/doc/share/78815f06cd4554b7/?sub_id=3631337 ## 注意事项注意，模板变量不能嵌套，如模板变量a 里面如果包含另一个模板变量b ，那么模板变量b 是不生效的

这里，以最简单的流程，来帮你入门网市场云建站系统。仅做学习参考。
**前提：你要先开通一个新网站。**

[TOC]

## 1. 相关资料下载
#### 教程中的html原始模板
[点此下载](http://cdn.weiunity.com/site/491/news/file/201805051525528911841013960.zip)
现有html模板共有三个页面：首页、关于我们、新闻列表。
这里，来演示将此html模板制作成网市场云建站系统所用模板的步骤
要想按照一下步骤学习练习，此附件是必须下载的。

## 2. 抽取，创建模板变量
创建模板变量的目的，如：
很多页面中都有头部导航，如果导航中要增加一项，那么有导航的每个页面也要挨个改过来，页面很多，太麻烦。而做成模板变量，可以只需要改动模板变量即可。页面中都是调用模板变量，也就不用再每个页面都去改了。
#### 2.1 查看html模板源代码
打开下载的 html模板 进行编辑，预览其源代码
找到 about.html 、 index.html 、 news.html 三个模板页面中，都共同有的 头部、尾部。
当然，这里不一定非得头部、尾部，这里只是把相同的地方找出来。
如下图所示：

#### 2.2 创建模板变量
将上面找到的相同的两处，分别保存成网市场云建站系统的模板变量。
登录网站管理后台，如下图：

同时，可以在 变量名 的后面说明中，已经指出，可以在模板页面中，使用 {include=变量名} 来进行调用，也就是，此名为 nav 的模板变量，可以在模板页面中，使用 {include=nav} 来直接调用。
这里，共创建了两个模板变量：  nav、footer

注：模板变量名字可以自己随便起名，限英文、数字、_(下划线)

#### 2.3 改动模板页面
上一步我们创建了两个模板变量nav、footer，接下来，就可以将模板页面中的这两处，改成动态调用模板变量的。如下图所示：

其他两个 about.html、 news.html 也同样如此。

视频说明：

<div style="width:100%; text-align:center;">
	<video src="http://down.zvo.cn/video/wangmarket_simple_info_2.3_update_templatePage.mp4" controls="controls" style="width:480px;">
	您的浏览器不支持 video 标签。
	</video>
</div>

## 3. 创建首页
#### 3.1 创建首页的模板页面
网市场云建站系统中，新建一个模板页面，然后将 index.html 源代码直接复制到新建立的首页模板页面中，保存即可。

<div style="width:100%; text-align:center;">
	<video src="http://down.zvo.cn/video/wangmarket_simple_info_3.1_create_index_templatePage.mp4" controls="controls" style="width:480px;">
	您的浏览器不支持 video 标签。
	</video>
</div>

#### 3.2 生成整站，预览成果
然后点击 生成整站，生成网站静态html页面。如此，便可点击预览网站，进行预览刚做的首页了。步骤如下：

<div style="width:100%; text-align:center;">
	<video src="http://down.zvo.cn/video/wangmarket_simple_info_3.2_generateSite.mp4" controls="controls" style="width:480px;">
	您的浏览器不支持 video 标签。
	</video>
</div>

## 4. 创建关于我们页面
#### 4.1 创建关于我们的模板页面
关于我们页面，是一个内容展示性页面，向访客展示关于我们的图文内容。因此，在 添加模板页面时，选择 **详情页模板** 。
关于我们的模板页面，主要是标题、正文的显示。
创建一个 关于我们模板页面 ， 步骤如下图所示

<div style="width:100%; text-align:center;">
	<video src="http://down.zvo.cn/video/wangmarket_simple_info_4.1_create_aboutus_templatePage.mp4" controls="controls" style="width:480px;">
	您的浏览器不支持 video 标签。
	</video>
</div>

#### 4.2 创建 关于我们 栏目
创建一个栏目，栏目名为 关于我们，并给此栏目选上刚创建的关于我们的模板页面。步骤如下图：

<div style="width:100%; text-align:center;">
	<video src="http://down.zvo.cn/video/wangmarket_simple_info_4.2_create_aboutus_column.mp4" controls="controls" style="width:480px;">
	您的浏览器不支持 video 标签。
	</video>
</div>

#### 4.3 修改 关于我们 的内容，预览
创建一个栏目类型为独立页面的栏目后，会自动为这个栏目创建一条内容。
进入内容管理，选择关于我们栏目，编辑其内容。步骤如下图所示：

<div style="width:100%; text-align:center;">
	<video src="http://down.zvo.cn/video/wangmarket_simple_info_4.3_update_aboutus_neirong.mp4" controls="controls" style="width:480px;">
	您的浏览器不支持 video 标签。
	</video>
</div>

注：修改内容并保存后，预览才行。如果不修改内容，预览会报404

## 5. 创建新闻列表页面
#### 5.1 创建 新闻列表 的模板页面

<div style="width:100%; text-align:center;">
	<video src="http://down.zvo.cn/video/wangmarket_simple_info_5.1_create_newsList_templatePage.mp4" controls="controls" style="width:480px;">
	您的浏览器不支持 video 标签。
	</video>
</div>

#### 5.2 添加 新闻资讯 栏目

<div style="width:100%; text-align:center;">
	<video src="http://down.zvo.cn/video/wangmarket_simple_info_5.2_create_xinwen_column.mp4" controls="controls" style="width:480px;">
	您的浏览器不支持 video 标签。
	</video>
</div>

#### 5.3 添加新闻资讯内容，并预览本栏目

<div style="width:100%; text-align:center;">
	<video src="http://down.zvo.cn/video/wangmarket_simple_info_5.3_add_xinwen_neirong.mp4" controls="controls" style="width:480px;">
	您的浏览器不支持 video 标签。
	</video>
</div>

## 6. 修改导航栏菜单的链接网址
网站建立好后，导航栏需要将网址变为当前网站的。
每个栏目的网址，都是栏目代码 + .html 的组合，如，新闻资讯的栏目代码是 news ,则新闻资讯的网址为 news.html 
首页则是固定的网址： index.html

<div style="width:100%; text-align:center;">
	<video src="http://down.zvo.cn/video/wangmarket_simple_info_6_update_nav_href.mp4" controls="controls" style="width:480px;">
	您的浏览器不支持 video 标签。
	</video>
</div>

## 7. 设置全局变量
比如，页面底部的QQ群的群号，如果别人在实际使用这个模板做网站时，想要修改QQ群号，那还要点开模板变量，从html代码中找到QQ群号进行修改。但是如果使用者本身不懂HTML，在修改操作时是非常吃力的，需要一种对于不懂技术的人来说，更友好的修改方式。  
这里就是演示 全局变量 的使用。全局变量便是当前网站模板体系中，可以随处调用的变量。可在模版页面、模板变量中，使用 {var.xxx} 将设定好的全局变量的值调出。  
通过左侧 [模板管理] - [全局变量] ，进行管理。 如下图所示

点击 添加全局变量 按钮，添加一个全局变量，将QQ群编辑的这个加上。 如下图所示

注意，备注说明强烈建议写的详细点，比如普通文字录入，比如是要录入公司简介，那么备注里要加上建议填写字数，比如建议填写 80~100个字，这样用户就知道写多少了；又比如要上传LOGO图，要备注上需要上传图片的尺寸如 320*240，这样避免用户不知道上传多大的，随便上传一个导致失真，使网站展示美观效果降低。 
上图中录入方式也是有多种，如最常用的文本录入、图片上传、下拉选择等方式，可以选择一种合适的录入方式。当然这里QQ群号就选择了文本录入的方式。  
点击保存后，便可看到多了一条

如上图所示，点击编辑按钮，即可进行更改这个QQ群号了。

关于这个全局的更多具体使用，您可以新创建一个网站，然后导入模板编号为 lmyglm1 的模板，参考其全局变量的设置。 详细参考链接： https://e.gitee.com/leimingyun/doc/share/78815f06cd4554b7/?sub_id=3631337

## 注意事项
注意，模板变量不能嵌套，如 模板变量a 里面如果包含另一个 模板变量b ，那么 模板变量b 是不生效的

动态标签

全局变量

模板变量

模板页面

常用JS

其他功能

模板制作教程

扒网站工具

模版计算工具

网市场模板制作入门