365建站器v12隆重发布,全新的界面,全新的体验,全新的功能,您值得佣有! 365建站器v12隆重发布! 立即查看

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

发表在 新手指南/使用教程 2022-4-28 20:47:26 上一主题 下一主题 0 558

上一节教大家怎么制作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(模板名称可自定义)。

111.jpg



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

QQ截图20220428200857.jpg

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

444.jpg

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

55.jpg

5、将mymoban1模板的静态html,修改成可以调用后台内容的动态标签
a、生成动态导航页:找到模板中导航静态html,修改为调用后台导航的动态标签html,(标签如何使用,请参考默认模板)
导航静态html:
  1. <div class="ze71a4navmenu">
  2.             <ul class="ze71a4nav">
  3.                 <li class="ze71a4nav-item"><a href="/">首页</a></li>
  4.                 <li class="ze71a4nav-item"><a href="/about/">关于我们</li>
  5.                 <li class="ze71a4nav-item"><a href="/product/">产品中心</a></li>
  6.                 <li class="ze71a4nav-item"><a href="/news/">新闻中心</a></li>
  7.                 <li class="ze71a4nav-item"><a href="/lxwm/">联系我们</a></li>
  8.              </ul>
  9. </div>
复制代码


修改成调用后台导航的动态标签html
  1. <div class="ze71a4navmenu">
  2.             <ul class="ze71a4nav">
  3.                 <li class="ze71a4nav-item"><a href="/">首页</a></li>
  4.                 {jz:channel type='top' row='10' }
  5.                 <li class="css365jz_nav-item"><a href="[field:typeurl/]">[field:typename/]</a></li>
  6.                 {/jz:channel}

  7.              </ul>
  8. </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也是可以的)
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset={jz:global.config_soft_lang/}" />
  5.     <title>{jz:field.seotitle/}</title>
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  8. </head>
  9. <body>
  10. {jz:include filename="header.htm"/}
  11.   <div class="css365jz_container">
  12.    内容
  13.   </div>
  14.   {jz:include filename="footer.htm"/}
  15. </body>
  16. </html>
复制代码

7、完毕!

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

微信图片_20220428205043.png
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则