Discuz!论坛系统DIY模块模板使用教程

Discuz!论坛系统DIY模块模板使用教程今天为大家讲解一下在使用DIY过程中的一些技巧与方法仔细阅读，受益匪浅一、如何在模块中增加“标题”及“更多”的链接如下图样式方法：通过框架或模块都可以实现上述样式，我们以框架为例，我们在DIY的时候选中要编辑的框架点击编辑如下图所示之后点击标题在弹出的层中可以添加标题及链接,位置选择居左如下图所示同时可以设置标题的颜色及大小接下来增加“更多”的链接点击弹出层的添加新标题按扭如下图所示，会“复制”出一份新的标题你只需修改就可以了把其中的“精彩教程”改成“更多”，链接以及字体、颜色都进行修改就可以了，这里的位置一定要选择“居右”完成，这样框架就有了标题及更多，模块的方法同上二、DIY的模块中如何调整链接的颜色如下图样式方法：选中要修改的模块，点击编辑，选择数据如下图所示在弹出层中选择编辑如下图所示在弹出的层中可以对标题进行加粗、斜体、加下划线、修改颜色等操作完成三、如何在现有的模块中添加新的数据选中要添加数据的模块点击编辑--数据如下图所示在弹出的层中选择任意一条数据点击编辑如下图所示点击编辑后在弹出的层中选择从数据源获取此处可以添写帖子ID、文章ID、日志ID、图片ID来获取数据如下图所示点击获取会填充模块内相应的数据字段（此处的数据字段会根据模块样式的不同有所变化，请注意）完成四、DIY时如何调用外部程序的数据当我们与第三方程序整合后如何在门户、频道、论坛、或可以DIY的区域调用这些第三方程序的数据首先我们可以在需要调用的地方拖一个展示类中的静态模块如下图所示如上图所示选择数据来源为“自定义HTML”一般第三方系统的数据调用都会有输出JS格式的我们把第三方程序提供的JS代码粘贴进HTML代码框就可以了如下图所示完成五、首页多格或首页四格如何DIY出来我们以论坛首页为例（在任何页面都可以）来制作一个首页四格首先在论坛首页拖一个1:1的框架如下图所示接下来向已拖好的1-1框架的框架里左侧的1里面拖入一个1:1的框架如下图所示接下来向右侧的1里面也拖入一个1:1的框架如下图所示接下来我们就可以通过拖拽模块到框架中去了此时我们可以去掉框架的标题，同时为每一个模块增加一个标题如下图所示你可以通过不同的模块样式或者CSS来美化这里完成六、如何修改整个模块的链接样式比如下图方法：选中要编辑的模块，点击编辑--样式进行修改如下图所示以上修改针对整个模块完成七、如何修改两个模块或两个框架之间的距离如下图样式选择要编辑的框架或者模块，点击编辑--样式选择外边距，勾选分别设置，在右边距中写入合适的数字就可以了例如10如下图所示完成后的效果如下图样式全方位立体式讲解DIY技巧集锦第二弹一、DIY中TAB框架如果切换点击方式（鼠标点击与鼠标滑过）如下图中的效果如何实现实现方法：拖一个TAB框架到页面中，点编辑，选择标题如下图所示在弹出的窗口中选择切换类型如下图所示。你可以根据你的需要选择是点击还是滑过完成二、在DIY模块中的模块数据中固定是什么意思，如下图解答：当勾选固定后此条数据将不会随着模块属性当中的条件进行更新，也就是说，此条数据将永久不变，除非把勾选去掉三、如何实现两个模块中间一条竖线的效果，如下图效果实现方法选中要操作的DIY模块选择样式如下图所示在弹出的层中，选择边框的分别设置，在边框的“左”大小设置为1px，“样式”选择实线，“颜色”选择灰色，如下图所示这样设置后我们就能看到一个边线了这时你会看到内容与边线挤在了一起如下图所示接下来我们进行调整内边距改变上图中的样式同理，打开样式编辑层选择“内边距”点分别设置在“左”中添加10px调整后如下图所示大家可以根据实际情况调整内、外边距的大小与边框的设置，灵活使用四、如何将一个文章模块转换为一个帖子模块比如官方提供的门户及频道都是文章类模块，我们如何转换为帖子类编辑模块的属性把其中的模块分类进行切换如下图所示选择帖子模块就可以变换这里要注意切换之后，原来的模块样式将变成私有的（自定义样式）修改显示样式只能通过模块模板进行修改五、如何在模板（官方发布的频道及门户）里面插入DIY区域，如下图所示首先打开模板文件例如亲子模板，打开template\default\portal\list_baby.htm文件找到这两段代码的之间插入一行代码1.!--[diy=guanggao]--divid=guanggaoclass=area/div!--[/diy]--复制代码其中“guanggao”可以任意取名，注意不可与本模板中其它重名，必须保证唯一性如下图所示2010-10-1117:53上传下载附件(7.55KB)[功能介绍]教你如何把切割好的html页面转换成可供DIY的页面（高级教程）今天给大家讲讲如何把已经切割好的html页面或者模仿的页面转换成可供DIY的页面请跟随教程一步一步操作如有疑问请提出以下以家居频道为例为大家讲解我们常见的切割好的html页面包含这么几个元素如下图图片文件夹、CSS文件夹、其它文件或图片文件夹、一个html页面大家看下页面效果接下来，我们就把这个页面转换成DIY页面首页我们用编辑工具打开index.html页面我们为了能够使用统一的头部样式，这里面我们引入系统内置的头部文件（header）把页面中的关于头部的信息删除如下图所示把系统头部（header）引入进来引用代码1.!--{subtemplatecommon/header}--复制代码如下图所示给新的模板起个名字如下代码1.!--[name]家居频道模板[/name]--复制代码如下图所示接下来增加可供DIY的CSS样式表如下代码1.styleid=diy_styletype=text/css/style复制代码如下图所示头部接下来更换底部代码找到底部代码删除掉换成系统内置的通用底部代码如下图所示增加如下代码1.!--{subtemplatecommon/footer}--复制代码如下图所示到此基本改造完成接下来我们把改造好的文件放在系统目录中去首先我们把index.html文件改名把index.html改成list_home.htm此处一定要注意频道模板必须以list_开头，后缀名为.htm把改好名的list_home.htm文件拷贝到template\default\portal目录下同时在template\default\portal目录新建一个home文件夹用来放家居频道的图片及样式表此时复制原来的文件夹到template\default\portal目录的home文件夹如下图所示接下来用编辑器打开list_home.htm文件引入样式表文件代码如下1.linkhref=$_G['setting']['csspath']template/default/portal/home/style/style.cssrel=stylesheettype=text/css/复制代码如下图所示同进查找imgsrc=images/替换成imgsrc=template/default/portal/home/images/把其它用到的图片标签全替换成template/default/portal/home/这个目录下就可以了接下来我们进入后台创建一个频道模板名选择“家居频道模板”如下图创建完成后，点击查看就能看到已与系统完全整合的模板了接下来我们把模板中的占位用的假数据换成DIY区域用编辑器打开list_home.htm文件大家会看到有类似的如下代码1.divclass=list2.ul3.liahref=#class=gray[装修资讯]/aahref=#七步改造计为夏日客厅换新颜/a/li4.liahref=#class=gray[行业资讯]/aahref=#拆改承重墙如同醉驾需缴费/a/li5.liahref=#class=gray[装修资讯]/aahref=#玩转极简主义构造冷色系居室空间/a/li6.liahref=#class=gray[家居风水]/aahref=#周星驰于文凤分手防小三家居风水/a/li7.liahref=#class=gray[装修资讯]/aahref=#小身材大味道边角料再利用/a/li8.liahref=#class=gray[装修资讯]/aahref=#茶几布局随性设计耐保养/a/li9./ul10./div复制代码把其中的1.ul2.liahref=#class=gray[装修资讯]/aahref=#七步改造计为夏日客厅换新颜/a/li3.liahref=#class=gray[行业资讯]/aahref=#拆改承重墙如同醉驾需缴费/a/li4.liahref=#class=gray[装修资讯]/aahref=#玩转极简主义构造冷色系居室空间/a/li5.liahref=#class=gray[家居风水]/aahref=#周星驰于文凤分手防小三家居风水/a/li6.liahref=#class=gray[装修资讯]/aahref=#小身材大味道边角料再利用/a/li7.liahref=#class=gray[装修资讯]/aahref=#茶几布局随性设计耐保养/a/li8./ul复制代码换成1.!--[diy=diy1]--divid=diy1class=area/div!--[/diy]--复制代码完成后是这个样子1.divclass=list2.!--[diy=diy1]--divid=diy1class=area/div!--[/diy]--3./div复制代码其中的[diy=diy1]和divid=diy1要匹配且在一个页面中不能重复如果要在第二个区域里面使用的话就应该是[diy=diy2]和divid=diy2或者[diy=home]和divid=home或者[diy=discuz]和divid=discuz只要在一个页面内不重复随你怎么写都可以如下图所示此时就完成了占位数据转换成DIY区域的过程在上面的过程中这样的替换并不是最优化的，我们接下来进行改进，让DIY更加灵活此处的结构是这样子的如下图实现它的代码是这样子的1.divclass=focus_divfocustoday2.h2ahref=#玩转极简主义构造冷色系居室空间/a/h23.p今夏最流行的设计当属极简主义，色彩也从华丽深沉转变为了优雅素净。玻璃、金属、木质等较能体现简单特性的材质..ahref=#[详细]/a/p4.divclass=list5.ul6.liahref=#class=gray[装修资讯]/aahref=#七步改造计为夏日客厅换新颜/a/li7.liahref=#class=gray[行业资讯]/aahref=#拆改承重墙如同醉驾需缴费/a/li8.liahref=#class=gray[装修资讯]/aahref=#玩转极简主义构造冷色系居室空间/a/li9.liahref=#class=gray[家居风水]/aahref=#周星驰于文凤分手防小三家居风水/a/li10.liahref=#class=gray[装修资讯]/aahref=#小身材大味道边角料再利用/a/li11.liahref=#class=gray[装修资讯]/aahref=#茶几布局随性设计耐保养/a/li12./ul13./div14./div复制代码我们可以把整个区域做为一个DIY区域