模板工具一键保存的静态模板修改成365建站的模板

上一节教大家怎么制作365模板的的基本设置请查看：https://bbs.365jz.com/thread-59-1-1.html
365建站最基本的模板页面应该包含3个：
index_article.htm --- 网站首页模板
list_article.htm    --- 网站列表页模板
article_article.htm  --- 网站内容页模板
header.htm          --- 头部包含公共模板（可选）
footer.htm          --- 底部包含公共模板（可选）

本节给大家讲解模板工具一键保存的静态模板修改成365建站的模板

1、打开365建站器 - 功能大全 - 模板工具 - 网页制作保存工具

2、打开要仿的网站模板首页网址，列表页网址，内容页网址，分别保存三个页面（index_article.htm、list_article.htm、article_article.htm）
a、输入网站首页网址，选择index_article.htm，然后保存为mymoban1（模板名称可自定义）;
b、输入网站首页网址，选择list_article.htm，然后保存为mymoban1（模板名称可自定义）；
c、输入网站首页网址，选择article_article.htm，然后保存为mymoban1（模板名称可自定义）。

3、参考上一节讲的365模板的的基本设置，将做好的模板上传到模板文件夹下，启用mymoban1模板
4、将测试网站的模板设置成mymoban1模板，此时打开网站可以发现网站样式是乱的，因为网站执行后路径是错的，如下：

QQ截图20220428200857.jpg

我们需要加上以上代码的路径前加上mymoban1模板路径的前辍：{jz:global.config_templets_dir/}/{jz:field.skindir/}，如下：

你把路径修改正确后，你再访问，网站样式风格加载都正常了，路径有没有错误，可以通过google浏览器F12(审查元素)功能查看有没有404的路径,逐步修改正确

5、将mymoban1模板的静态html，修改成可以调用后台内容的动态标签
a、生成动态导航页：找到模板中导航静态html，修改为调用后台导航的动态标签html，（标签如何使用，请参考默认模板）
导航静态html：

<div class="ze71a4navmenu">
<ul class="ze71a4nav">
<li class="ze71a4nav-item"><a href="/">首页</a></li>
<li class="ze71a4nav-item"><a href="/about/">关于我们</li>
<li class="ze71a4nav-item"><a href="/product/">产品中心</a></li>
<li class="ze71a4nav-item"><a href="/news/">新闻中心</a></li>
<li class="ze71a4nav-item"><a href="/lxwm/">联系我们</a></li>
</ul>
</div>

复制代码

修改成调用后台导航的动态标签html

<div class="ze71a4navmenu">
<ul class="ze71a4nav">
<li class="ze71a4nav-item"><a href="/">首页</a></li>
{jz:channel type='top' row='10' }
<li class="css365jz_nav-item"><a href="[field:typeurl/]">[field:typename/]</a></li>
{/jz:channel}
</ul>
</div>

复制代码

说明：
标签jz:channel 是调用后台栏目的标签，type='top' 表示调用顶级栏目， row='10'表示调用后台10个栏目，[field:typename/]表示栏目名称，[field:typeurl/]表示栏目访问路径

其它以此类推，分别用对应的调用标签替换掉静态的html，让其调用后台的内容

6、最后将公共部分的头部和底部的代码分别放在header.htm和footer.htm中，在index_article.htm、list_article.htm、article_article.htm去包含header.htm和footer.htm，这样修改头部和底部一次，3个模板中都会改变，避免多次修改（这一不可选，你不用header.htm和footer.htm也是可以的）

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset={jz:global.config_soft_lang/}" />
<title>{jz:field.seotitle/}</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body>
{jz:include filename="header.htm"/}
<div class="css365jz_container">
内容
</div>
{jz:include filename="footer.htm"/}
</body>
</html>

复制代码

7、完毕！

标签详情及用法请查看365建站器 - 功能大全 - 模板工具 - 模板制作工具：

微信图片_20220428205043.png

模板工具一键保存的静态模板修改成365建站的模板

官方产品与活动

站长交流与讨论区

站长资源区