搜索
DIY功能主要是利用页面拖拽技术，在不编写代码的情况下实现快速布局页面、聚合调用站内数据的功能。下面我们来看如何使用DIY功能以及如何美化DIY的数据模块。基本DIY流程1.以管理员身份登录网站前台，点击头部右上方“DIY”按钮，进入DIY模式：2.进入DIY模式后，页面中内置的可DIY区域（模板标签中已经讲过）将会以灰蓝色显示：(1)首先，要选择合适的框架，点击框架来选择合适的框架拖拽到所需位置：(2)然后，点击模块，来选择合适的模块，拖拽到框架中，拖拽进去后，页面便会弹出编辑模块属性窗口，如下图所示：根据所需要调用的数据类型设置各属性即可。修改模块页面显示样式1.如何在模块中增加“标题”及“更多”的链接如下图样式方法：通过框架或模块都可以实现上述样式，我们以框架为例，我们在DIY的时候选中要编辑的框架点击编辑如下图所示：之后点击标题在弹出的层中可以添加标题及链接,位置选择居左如下图所示，同时可以设置标题的颜色及大小接下来增加“更多”的链接点击弹出层的添加新标题按扭如下图所示，会“复制”出一份新的标题你只需修改就可以了把其中的“精彩教程”改成“更多”，链接以及字体、颜色都进行修改就可以了，这里的位置一定要选择“居右”完成，这样框架就有了标题及更多，模块的方法同上2.DIY的模块中如何调整链接的颜色如下图样式方法：选中要修改的模块，点击编辑，选择数据如下图所示：在弹出层中选择编辑如下图所示：在弹出的层中可以对标题进行加粗、斜体、加下划线、修改颜色等操作3.如何在现有的模块中添加新的数据选中要添加数据的模块点击编辑--数据如下图所示：在弹出的层中选择任意一条数据点击编辑如下图所示：点击编辑后在弹出的层中选择从数据源获取此处可以添写帖子ID、文章ID、日志ID、图片ID来获取数据如下图所示：点击获取会填充模块内相应的数据字段（此处的数据字段会根据模块样式的不同有所变化，请注意）完成。4.DIY时如何调用外部程序的数据,当我们与第三方程序整合后如何在门户、频道、论坛、或可以DIY的区域调用这些第三方程序的数据,首先我们可以在需要调用的地方拖一个展示类中的静态模块如下图所示：如上图所示选择数据来源为“自定义HTML”一般第三方系统的数据调用都会有输出JS格式的我们把第三方程序提供的JS代码粘贴进HTML代码框就可以了，如下图所示：完成。5.首页多格或首页四格如何DIY出来,我们以论坛首页为例（在任何页面都可以）来制作一个首页四格。首先在论坛首页拖一个1:1的框架如下图所示：接下来向已拖好的1-1框架的框架里左侧的1里面拖入一个1:1的框架如下图所示：接下来向右侧的1-1里面也拖入一个1:1的框架，如下图所示：接下来我们就可以通过拖拽模块到框架中去了此时我们可以去掉框架的标题，同时为每一个模块增加一个标题如下图所示：你可以通过不同的模块样式或者CSS来美化这里。6.如何修改整个模块的链接样式比如下图方法：选中要编辑的模块，点击编辑--样式进行修改如下图所示：以上修改针对整个模块完成。7.如何修改两个模块或两个框架之间的距离如下图样式选择要编辑的框架或者模块，点击编辑--样式选择外边距，勾选分别设置，在右边距中写入合适的数字就可以了例如如下图所示：完成后的效果如下图样式完成。8.DIY中TAB框架如果切换点击方式（鼠标点击与鼠标滑过）实现方法：拖一个TAB框架到页面中，点编辑，选择标题如下图所示：在弹出的窗口中选择切换类型如下图所示：你可以根据你的需要选择是点击还是滑过即可完成。9.在DIY模块中的模块数据中固定是什么意思，如下图解答：当勾选固定后此条数据将不会随着模块属性当中的条件进行更新，也就是说，此条数据将永久不变，除非把勾选去掉10.如何实现两个模块中间一条竖线的效果，如下图效果实现方法：选中要操作的DIY模块选择样式如下图所示：在弹出的层中，选择边框的分别设置，在边框的“左”大小设置为1px，“样式”选择实线，“颜色”选择灰色，如下图所示：这样设置后我们就能看到一个边线了这时你会看到内容与边线挤在了一起如下图所示：接下来我们进行调整内边距改变上图中的样式同理，打开样式编辑层选择“内边距”点分别设置在“左”中添加10px调整后如下图所示：大家可以根据实际情况调整内、外边距的大小与边框的设置，灵活使用11.如何将一个文章模块转换为一个帖子模块,比如官方提供的门户及频道都是文章类模块，我们如何转换为帖子类,编辑模块的属性把其中的模块分类进行切换如下图所示：选择帖子模块就可以变换这里要注意切换之后，原来的模块样式将变成私有的（自定义样式）修改显示样式只能通过模块模板进行修改12.如何在模板（官方发布的频道及门户）里面插入DIY区域，如下图所示：首先打开模板文件例如亲子模板，打开template\default\portal\list_baby.htm文件找到这两段代码的之间插入一行代码1.!--[diy=guanggao]--divid=guanggaoclass=area/div!--[/diy]--其中“guanggao”可以任意取名，注意不可与本模板中其它重名，必须保证唯一性如下图所示：