找回密码
 亲,注册吧

QQ登录

只需一步,快速开始

微信登录

微信扫一扫,快速登录

查看: 3141|回复: 117

二十三、Discuz模板中DIY 使用指导

[复制链接]
发表于 2013-12-20 05:12:17 | 显示全部楼层 |阅读模式
DIY功能是帮助网站管理人员通过前台点击操作,快速调用网站数据的一种便捷功能,能够让网站管理人员在不用自己手动编写代码的情况下快速调用自己网站数据到页面指定位置的功能!下面为大家详细介绍下这个功能如何使用:
  • 管理员登录网站前台后,在头部右上部分会出现如图的进入diy按钮(点击此按钮就可以进入diy模式了):
    21.png
  • 进入diy模式后,页面中的内置拖拽区域(模板标签中已经讲过)将会变成灰色的可拖拽区域。有了此区域,我们便可以在页面的对应位置拖拽我们需要的数据!
    (1)点击 添加框架 先添加框架。
    (2)可拖拽区域中有框架后,然后点击 添加模块
    22.png

    (3)如图所示,根据你需要调用的数据类型添加模块数据即可:
    23.png
  • 如何在模块中增加“标题”及 “更多”的链接 如下图样式
    24.png
    方法:通过框架或模块都可以实现上述样式 ,我们以框架为例,我们在DIY的时候 选中要编辑的框架点击编辑 如下图所示:
    25.png

    之后点击标题
    26.png
    在弹出的层中可以添加标题及链接,位置选择居左 如下图所示,同时可以设置标题的颜色及大小 27.png
    接下来增加“更多”的链接 点击弹出层的添加新标题按扭 如下图所示 ,会“复制”出一份新的标题 你只需修改就可以了把其中的“精彩教程” 改成“更多” ,链接以及字体、颜色都进行修改就可以了,这里的位置一定要选择“居右”
    28.png
    完成,这样框架就有了标题及更多 ,模块的方法同上
  • DIY的模块中如何调整链接的颜色
    如下图样式
    29.png
    方法:选中要修改的模块 , 点击编辑,选择 数据 如下图所示:
    30.png
    在弹出层中选择 编辑 如下图所示:
    31.png

    在弹出的层中 可以对标题进行 加粗、斜体、加下划线、修改颜色 等操作
    32.png
  • 如何在现有的模块中添加新的数据
    选中要添加数据的模块 点击编辑--数据 如下图所示:
    33.png

    在弹出的层中 选择任意一条数据 点击编辑 如下图所示:
    34.png

    点击编辑后 在弹出的层中选择从数据源获取 此处可以添写帖子ID、文章ID、日志ID、图片ID 来获取数据 如下图所示:
    35.png
    点击获取会填充模块内相应的数据字段 (此处的数据字段会根据模块样式的不同有所变化,请注意)完成。
  • DIY时如何调用外部程序的数据,当我们与第三方程序整合后 如何在门户、频道、论坛、或可以DIY的区域调用这些第三方程序的数据,首先我们可以在需要调用的地方拖一个展示类中的静态模块 如下图所示:
    36.jpg
    如上图所示 选择数据来源为“自定义HTML”
    一般第三方系统的数据调用都会有输出JS格式的 我们把第三方程序提供的JS代码粘贴进 HTML代码框就可以了,如下图所示:
    37.png
    完成。
  • 首页多格或首页四格如何DIY出来, 我们以论坛首页为例 (在任何页面都可以) 来制作一个首页四格。
    首先在论坛首页拖一个 1:1的框架 如下图所示:
    38.jpg
    接下来向已拖好的1-1框架的框架里 左侧的1 里面拖入一个1:1的框架 如下图所示:
    39.jpg
    接下来向右侧的1-1里面也拖入一个1:1的框架,如下图所示:
    40.jpg

    接下来我们就可以通过拖拽模块到框架中去了
    41.jpg
    此时我们可以去掉框架的标题 ,同时为每一个模块增加一个标题 如下图所示:
    42.jpg
    你可以通过不同的模块样式或者CSS来美化这里。
  • 如何修改整个模块的链接样式 比如下图
    43.png
    方法:选中要编辑的模块 ,点击编辑--样式 进行修改 如下图所示:
    44.png
    以上修改针对整个模块完成 。
  • 如何修改两个模块或两个框架之间的距离 如下图样式
    45.png
    选择要编辑的框架或者模块 ,点击编辑--样式 选择外边距,勾选分别设置 ,在右边距中写入合适的数字就可以了 例如如下图所示:
    46.png
    完成后的效果 如下图样式
    47.png
    完成。
  • DIY中TAB框架如果切换点击方式(鼠标点击与鼠标滑过)
    48.png
    实现方法:拖一个TAB框架到页面中,点编辑,选择标题 如下图所示:
    49.png
    在弹出的窗口中选择切换类型 如下图所示:
    50.png
    你可以根据你的需要选择是点击还是滑过即可完成。
  • 在DIY模块中的模块数据中固定是什么意思,如下图
    51.png
    解答: 当勾选固定后 此条数据将不会随着模块属性当中的条件进行更新,也就是说,此条数据将永久不变,除非把勾选去掉
  • 如何实现两个模块中间一条竖线的效果,如下图效果
    52.jpg
    实现方法:选中要操作的DIY模块 选择样式 如下图所示:
    53.jpg
    在弹出的层中 ,选择边框的分别设置 ,在边框的“左” 大小 设置为1px,“样式”选择实线,“颜色”选择灰色,如下图所示:
    54.png
    这样设置后 我们就能看到一个边线了 这时你会看到内容与边线挤在了一起 如下图所示:
    55.jpg
    接下来我们进行调整内边距改变上图中的样式 同理,打开样式编辑层 选择“内边距” 点分别设置 在“左”中添加10px
    56.png
    调整后如下图所示:
    57.jpg
    大家可以根据实际情况调整 内、外边距的大小与边框的设置 ,灵活使用
  • 如何将一个文章模块转换为一个帖子模块,比如官方提供的门户及频道都是文章类模块 ,我们如何转换为帖子类,编辑模块的属性 把其中的模块分类进行切换 如下图所示:
    58.png
    选择帖子模块就可以变换 这里要注意 切换之后,原来的模块样式将变成私有的(自定义样式) 修改显示样式只能通过模块模板进行修改
  • 如何在模板(官方发布的频道及门户)里面插入DIY区域 ,如下图所示:
    QQ截图20131220051153.jpg

    首先打开 模板文件 例如亲子模板, 打开template\default\portal\list_baby.htm 文件找到这两段代码的之间插入一行代码
    • <!--[diy=guanggao]--><div id="guanggao" class="area"></div><!--[/diy]-->


    其中 “guanggao” 可以任意取名,注意 不可与本模板中其它重名,必须保证唯一性 如下图所示:
    60.jpg


官溪人太厉害了。

0

主题

363

回帖

364

积分

中学生

Rank: 3Rank: 3

积分
364
发表于 2014-5-22 04:09:06 | 显示全部楼层
好好 学习了 确实不错

0

主题

220

回帖

255

积分

小学生

Rank: 2

积分
255
发表于 2014-5-28 20:06:03 | 显示全部楼层
有道理。。。
0 该用户已被删除
发表于 2014-6-2 17:22:52 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽

63

主题

739

回帖

1165

积分

本科生

Rank: 4

积分
1165
发表于 2014-6-9 06:37:18 | 显示全部楼层
路过,学习下

0

主题

311

回帖

312

积分

中学生

Rank: 3Rank: 3

积分
312
发表于 2014-6-13 19:30:49 | 显示全部楼层
支持一下:lol
0 该用户已被删除
发表于 2014-6-17 04:11:31 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
0 该用户已被删除
发表于 2014-6-21 00:14:29 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
0 该用户已被删除
发表于 2014-6-23 21:57:44 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
0 该用户已被删除
发表于 2014-6-28 09:37:56 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽

1

主题

371

回帖

375

积分

中学生

Rank: 3Rank: 3

积分
375
发表于 2014-7-2 20:23:14 | 显示全部楼层
支持一下:lol

1

主题

1074

回帖

1127

积分

本科生

Rank: 4

积分
1127
发表于 2014-7-7 13:22:29 | 显示全部楼层
帮你顶下哈!!

63

主题

739

回帖

1165

积分

本科生

Rank: 4

积分
1165
发表于 2014-7-9 01:43:47 | 显示全部楼层
不错不错,楼主您辛苦了。。。

0

主题

363

回帖

364

积分

中学生

Rank: 3Rank: 3

积分
364
发表于 2014-7-11 13:56:55 | 显示全部楼层
我抢、我抢、我抢沙发~
0 该用户已被删除
发表于 2014-7-16 03:30:58 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽

0

主题

1108

回帖

1144

积分

本科生

Rank: 4

积分
1144
发表于 2014-7-18 07:01:04 | 显示全部楼层
找到好贴不容易,我顶你了,谢了

0

主题

311

回帖

312

积分

中学生

Rank: 3Rank: 3

积分
312
发表于 2014-7-21 06:37:16 | 显示全部楼层
不知该说些什么。。。。。。就是谢谢
0 该用户已被删除
发表于 2014-7-23 22:00:59 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽

0

主题

1108

回帖

1144

积分

本科生

Rank: 4

积分
1144
发表于 2014-7-26 16:06:30 | 显示全部楼层
好好 学习了 确实不错
0 该用户已被删除
发表于 2014-7-29 17:22:58 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
0 该用户已被删除
发表于 2014-8-3 09:43:45 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽

1

主题

1074

回帖

1127

积分

本科生

Rank: 4

积分
1127
发表于 2014-8-8 09:23:50 | 显示全部楼层
我是来刷分的,嘿嘿
0 该用户已被删除
发表于 2014-8-12 21:54:04 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽

311

主题

722

回帖

2348

积分

官溪_VIP

乐智论坛站长

Rank: 12Rank: 12Rank: 12

积分
2348
发表于 2014-8-17 16:53:37 | 显示全部楼层
过来看看的

1

主题

391

回帖

404

积分

中学生

Rank: 3Rank: 3

积分
404
发表于 2014-8-21 03:07:54 | 显示全部楼层
好好 学习了 确实不错

15

主题

618

回帖

2721

积分

博士生

Rank: 8Rank: 8

积分
2721
发表于 2014-8-25 01:29:18 | 显示全部楼层
帮你顶下哈!!

1

主题

269

回帖

273

积分

小学生

Rank: 2

积分
273
发表于 2014-8-28 14:10:54 | 显示全部楼层
过来看看的
0 该用户已被删除
发表于 2014-9-1 19:11:24 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
0 该用户已被删除
发表于 2014-9-5 00:08:48 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽

5

主题

674

回帖

759

积分

中学生

Rank: 3Rank: 3

积分
759
发表于 2014-9-8 21:22:31 | 显示全部楼层
写的真的很不错
您需要登录后才可以回帖 登录 | 亲,注册吧 微信登录

本版积分规则

快速回复 返回顶部 返回列表