首页 > 编程 > Discuz

教你如何把切割好的html页面转换成可供DIY的页面

admin Discuz 2019-01-15 18:19:40 0 0
天给大家讲讲 如何把已经切割好的html页面或者模仿的页面转换成可供DIY的页面

请跟随教程一步一步操作  如有疑问请提出


以下以家居频道为例为大家讲解

我们常见的切割好的html页面包含这么几个元素

如下图  图片文件夹、CSS文件夹、其它文件或图片文件夹、一个html页面  




大家看下页面效果



接下来，我们就把这个页面转换成DIY页面  

首页我们用编辑工具打开 index.html页面

我们为了能够使用统一的头部样式，这里面我们引入系统内置的头部文件（header）把页面中的关于头部的信息删除

如下图所示





把系统头部（header）引入进来

引用代码
  1. <!--{subtemplate common/header}-->

如下图所示




给新的雷竞技官网dota起个名字

  1. <!--[name]家居频道雷竞技官网dota[/name]-->

如下图所示




接下来增加可供DIY的CSS样式表
  1. <style id="diy_style" type="text/css"></style>

如下图所示




头部

接下来更换底部代码  

找到底部代码删除掉 换成系统内置的通用底部代码   

如下图所示





增加如下代码
  1. <!--{subtemplate common/footer}-->

如下图所示



到此基本改造完成 接下来我们把改造好的文件放在系统目录中去

首先我们把index.html文件改名

把index.html改成list_home.htm   此处一定要注意  频道雷竞技官网dota必须以list_开头，后缀名为.htm  

把改好名的list_home.htm文件拷贝到 template\default\portal 目录下  

同时在template\default\portal 目录新建一个home文件夹 用来放家居频道的图片及样式表



此时复制 原来的文件夹 到template\default\portal 目录的home文件夹 如下图所示



接下来 用编辑器打开list_home.htm文件引入样式表文件


  1. <link href="&rvpu;$_H["'setting']['csspath']template/default/portal/home/style/style.css" rel="stylesheet" type="text/css" />


如下图所示



同进查找<img src="images/   替换成 <img src="template/default/portal/home/images/

把其它用到的图片雷竞技官方app下载安卓版全替换成 template/default/portal/home/ 这个目录下就可以了

接下来 我们进入后台创建一个频道  雷竞技官网dota名选择 “家居频道雷竞技官网dota” 如下图




创建完成后，点击查看 就能看到已与系统完全整合的雷竞技官网dota了 接下来我们把雷竞技官网dota中的占位用的假数据换成DIY区域

用编辑器打开list_home.htm文件  大家会看到有类似的如下代码
  1. <div class="list">
  2.                     <ul>
  3.                         <li><a href="&rvpu;#&rvpu;" class="gray">[装修资讯]</a> <a href="&rvpu;#&rvpu;">七步改造计 为夏日客厅换新颜</a></li>
  4.                         <li><a href="&rvpu;#&rvpu;" class="gray">[行业资讯]</a> <a href="&rvpu;#&rvpu;">拆改承重墙如同醉驾需缴费</a></li>
  5.                         <li><a href="&rvpu;#&rvpu;" class="gray">[装修资讯]</a> <a href="&rvpu;#&rvpu;">玩转极简主义 构造冷色系居室空间</a></li>
  6.                         <li><a href="&rvpu;#&rvpu;" class="gray">[家居风水]</a> <a href="&rvpu;#&rvpu;">周星驰于文凤分手 防小三家居风水</a></li>
  7.                         <li><a href="&rvpu;#&rvpu;" class="gray">[装修资讯]</a> <a href="&rvpu;#&rvpu;">小身材大味道 边角料再利用</a></li>
  8.                         <li><a href="&rvpu;#&rvpu;" class="gray">[装修资讯]</a> <a href="&rvpu;#&rvpu;">茶几布局 随性设计耐保养</a></li>
  9.                     </ul>
  10.               </div>

把其中的
  1. <ul>
  2. <li><a href="&rvpu;#&rvpu;" class="gray">[装修资讯]</a> <a href="&rvpu;#&rvpu;">七步改造计 为夏日客厅换新颜</a></li>
  3. <li><a href="&rvpu;#&rvpu;" class="gray">[行业资讯]</a> <a href="&rvpu;#&rvpu;">拆改承重墙如同醉驾需缴费</a></li>
  4. <li><a href="&rvpu;#&rvpu;" class="gray">[装修资讯]</a> <a href="&rvpu;#&rvpu;">玩转极简主义 构造冷色系居室空间</a></li>
  5. <li><a href="&rvpu;#&rvpu;" class="gray">[家居风水]</a> <a href="&rvpu;#&rvpu;">周星驰于文凤分手 防小三家居风水</a></li>
  6. <li><a href="&rvpu;#&rvpu;" class="gray">[装修资讯]</a> <a href="&rvpu;#&rvpu;">小身材大味道 边角料再利用</a></li>
  7. <li><a href="&rvpu;#&rvpu;" class="gray">[装修资讯]</a> <a href="&rvpu;#&rvpu;">茶几布局 随性设计耐保养</a></li>
  8. </ul>

换成
  1. <!--[diy=diy1]--><div id="diy1" class="area"></div><!--[/diy]-->

完成后是这个样子

  1. <div class="list">
  2.                      <!--[diy=diy1]--><div id="diy1" class="area"></div><!--[/diy]-->
  3.               </div>

其中的 [diy=diy1] 和 div id="diy1"  要匹配 且 在一个页面中不能重复   如果要在第二个区域里面使用的话就应该是

[diy=diy2] 和 div id="diy2"    或者  [diy=home] 和 div id="home"    或者  [diy=discuz] 和 div id="discuz"   只要在一个页面内不重复 随你怎么写都可以

如下图所示



此时就完成了占位数据 转换成DIY区域的过程  在上面的过程中 这样的替换并不是最优化的，我们接下来进行改进，让DIY更加灵活

此处的结构是这样子的  如下图




实现它的代码是这样子的
  1. <div class="focus_div focustoday">
  2.                 <h2><a href="&rvpu;#&rvpu;">玩转极简主义 构造冷色系居室空间</a></h2>
  3.                 <p>今夏最流行的设计当属极简主义，色彩也从华丽深沉转变为了优雅素净。玻璃、金属、木质等较能体现简单特性的材质..<a href="&rvpu;#&rvpu;">[详细]</a></p>
  4.                 <div class="list">
  5.                     <ul>
  6.                         <li><a href="&rvpu;#&rvpu;" class="gray">[装修资讯]</a> <a href="&rvpu;#&rvpu;">七步改造计 为夏日客厅换新颜</a></li>
  7.                         <li><a href="&rvpu;#&rvpu;" class="gray">[行业资讯]</a> <a href="&rvpu;#&rvpu;">拆改承重墙如同醉驾需缴费</a></li>
  8.                         <li><a href="&rvpu;#&rvpu;" class="gray">[装修资讯]</a> <a href="&rvpu;#&rvpu;">玩转极简主义 构造冷色系居室空间</a></li>
  9.                         <li><a href="&rvpu;#&rvpu;" class="gray">[家居风水]</a> <a href="&rvpu;#&rvpu;">周星驰于文凤分手 防小三家居风水</a></li>
  10.                         <li><a href="&rvpu;#&rvpu;" class="gray">[装修资讯]</a> <a href="&rvpu;#&rvpu;">小身材大味道 边角料再利用</a></li>
  11.                         <li><a href="&rvpu;#&rvpu;" class="gray">[装修资讯]</a> <a href="&rvpu;#&rvpu;">茶几布局 随性设计耐保养</a></li>
  12.                     </ul>
  13.               </div>
  14.             </div>

我们可以把整个区域做为一个DIY区域  

接下来 我们进入后台--》门户--》模块雷竞技官网dota--》  

点击添加，这里我们以文章为例  ，选择文章类 进行提交

为雷竞技官网dota起个名称  比如  “首页中间列表”

删除代码框里面的内容 拷贝上面的代码进来
  1.   <div class="focus_div focustoday">
  2.                 <h2><a href="&rvpu;#&rvpu;">玩转极简主义 构造冷色系居室空间</a></h2>
  3.                 <p>今夏最流行的设计当属极简主义，色彩也从华丽深沉转变为了优雅素净。玻璃、金属、木质等较能体现简单特性的材质..<a href="&rvpu;#&rvpu;">[详细]</a></p>
  4.                 <div class="list">
  5.                     <ul>
  6.                         <li><a href="&rvpu;#&rvpu;" class="gray">[装修资讯]</a> <a href="&rvpu;#&rvpu;">七步改造计 为夏日客厅换新颜</a></li>
  7.                         <li><a href="&rvpu;#&rvpu;" class="gray">[行业资讯]</a> <a href="&rvpu;#&rvpu;">拆改承重墙如同醉驾需缴费</a></li>
  8.                         <li><a href="&rvpu;#&rvpu;" class="gray">[装修资讯]</a> <a href="&rvpu;#&rvpu;">玩转极简主义 构造冷色系居室空间</a></li>
  9.                         <li><a href="&rvpu;#&rvpu;" class="gray">[家居风水]</a> <a href="&rvpu;#&rvpu;">周星驰于文凤分手 防小三家居风水</a></li>
  10.                         <li><a href="&rvpu;#&rvpu;" class="gray">[装修资讯]</a> <a href="&rvpu;#&rvpu;">小身材大味道 边角料再利用</a></li>
  11.                         <li><a href="&rvpu;#&rvpu;" class="gray">[装修资讯]</a> <a href="&rvpu;#&rvpu;">茶几布局 随性设计耐保养</a></li>
  12.                     </ul>
  13.               </div>
  14.             </div>

如下图所示



接下来把代码框中的代码进行转换  

把  以下代码
  1.   <div class="focus_div focustoday">
  2.                 <h2><a href="&rvpu;#&rvpu;">玩转极简主义 构造冷色系居室空间</a></h2>
  3.                 <p>今夏最流行的设计当属极简主义，色彩也从华丽深沉转变为了优雅素净。玻璃、金属、木质等较能体现简单特性的材质..<a href="&rvpu;#&rvpu;">[详细]</a></p>
  4.                 <div class="list">
  5.                     <ul>
  6.                         <li><a href="&rvpu;#&rvpu;" class="gray">[装修资讯]</a> <a href="&rvpu;#&rvpu;">七步改造计 为夏日客厅换新颜</a></li>
  7.                         <li><a href="&rvpu;#&rvpu;" class="gray">[行业资讯]</a> <a href="&rvpu;#&rvpu;">拆改承重墙如同醉驾需缴费</a></li>
  8.                         <li><a href="&rvpu;#&rvpu;" class="gray">[装修资讯]</a> <a href="&rvpu;#&rvpu;">玩转极简主义 构造冷色系居室空间</a></li>
  9.                         <li><a href="&rvpu;#&rvpu;" class="gray">[家居风水]</a> <a href="&rvpu;#&rvpu;">周星驰于文凤分手 防小三家居风水</a></li>
  10.                         <li><a href="&rvpu;#&rvpu;" class="gray">[装修资讯]</a> <a href="&rvpu;#&rvpu;">小身材大味道 边角料再利用</a></li>
  11.                         <li><a href="&rvpu;#&rvpu;" class="gray">[装修资讯]</a> <a href="&rvpu;#&rvpu;">茶几布局 随性设计耐保养</a></li>
  12.                     </ul>
  13.               </div>
  14.             </div>

改造成如下代码
  1.   <div class="focus_div focustoday">

  3. [index=1]
  4.                 <h2><a href="&rvpu;|vsm}&rvpu;|ubshfu}&hu;|ujumf}μ/b&hu;μ/i2&hu;
  5.                 <p>{summary}<a href=""{url}"{target}>[详细]</a></p>
  6. [/index]

  8.                 <div class="list">
  9.                     <ul>
  10. [loop]
  11.                         <li><a href="&rvpu;|dbuvsm}&rvpu;" {target}  class="gray">[{catname}]</a> <a href="&rvpu;|vsm}&rvpu;|ubshfu}&hu;|ujumf}μ/b&hu;μ/mj&hu;
  12. [/loop]
  13.                     </ul>
  14.               </div>
  15.             </div>

其中 {title} 表示标题，  {url} 表示 链接，  {target} 表示链接打开的方式，{summary}表示文章的简介。其它内容请参考说明

其中  [index=1]... [/index]表示第一条数据
  1. [index=1]
  2. <h2><a href="&rvpu;|vsm}&rvpu;|ubshfu}&hu;|ujumf}μ/b&hu;μ/i2&hu;
  3. <p>{summary}<a href=""{url}"{target}>[详细]</a></p>
  4. [/index]

其中 [loop]...[/loop]  表示循环
  1. [loop]
  2. <li><a href="&rvpu;|dbuvsm}&rvpu;" {target} class="gray">[{catname}]</a> <a href="&rvpu;|vsm}&rvpu;|ubshfu}&hu;|ujumf}μ/b&hu;μ/mj&hu;
  3. [/loop]

现在模块雷竞技官网dota就制作完成了

接下来 我们在频道的前台进行调用

在频道的前台页面 点DIY  会看到中间部分没有内容 会多出一个浅色的条 便是DIY区域  如下图




我们在DIY区域里面拖入一个100%的框架

把标题去掉如下图




接下来选择样式   把边框设为0PX ，外边距也设为0PX  如下图




完成后 在此框架内拖入一个文章模块 并选择刚才创建的模块样式，如下图




完成后选择样式  把边框、外边距、内边距都设为0PX  如下图




到此雷竞技官网dota的制作就完成了，其它内容可仿造以上设置 进行制作

版权声明

本文仅代表作者观点，不代表本站立场。
本文系作者授权发表，未经许可，不得转载。

相关文章

无相关信息
本文（共有 0 条评论）

评论

    • 热门话题

  • Ubuntu
  • 教程
  • Deepin
  • PHP
  • 软件
  • CentOS
  • Deepin安装教程
  • deepin
  • 黑苹果
  • wine

    • 最近发表

  • discuz论坛获得某一板块精华帖
  • 查询某个帖子的附件信息
  • 所有分区的SQL调用
  • while是循环函数赋值给数组
  • 读取mysql一列所有值，赋值给数组
  • Discuz!X/数据库 DB:: 函数操作方法
  • discuz新手必备雷竞技官方app下载安卓版大全
  • DISCUZ新手雷竞技官网dota仿站步骤
  • 封面调用最新文章
  • eval+loop 调用分区帖子

    • 猜你喜欢

  • discuz 获取所有分区及板块代码
  • discuz_style_default.xml修改
  • 一个还可以参考的DZ首页、内容页布局
  • 知识库系统-设计思路
  • 在dz雷竞技官网dota中直接使用PHP语句
  • GET雷竞技官方app下载安卓版
  • Discuz数据库调用：DZ雷竞技官网dota调用常用代码手册
  • 分享SQL调用第三方数据的心得
  • Discuz中的loop循环法
  • discuz通过{eval }在雷竞技官网dota中运行PHP语句