DIY 使用指導(dǎo)
推薦視頻教程----->Discuz插件開發(fā)實(shí)戰(zhàn)視頻 Discuz模板制作視頻教程(實(shí)戰(zhàn)篇)
DIY功能是幫助網(wǎng)站管理人員通過前臺(tái)點(diǎn)擊操作，快速調(diào)用網(wǎng)站數(shù)據(jù)的一種便捷功能，能夠讓網(wǎng)站管理人員在不用自己手動(dòng)編寫代碼的情況下快速調(diào)用自己網(wǎng)站數(shù)據(jù)到頁(yè)面指定位置的功能！下面為大家詳細(xì)介紹下這個(gè)功能如何使用：
- 管理員登錄網(wǎng)站前臺(tái)后，在頭部右上部分會(huì)出現(xiàn)如圖的進(jìn)入diy按鈕（點(diǎn)擊此按鈕就可以進(jìn)入diy模式了）：
- 進(jìn)入diy模式后，頁(yè)面中的內(nèi)置拖拽區(qū)域（模板標(biāo)簽中已經(jīng)講過）將會(huì)變成灰色的可拖拽區(qū)域。有了此區(qū)域，我們便可以在頁(yè)面的對(duì)應(yīng)位置拖拽我們需要的數(shù)據(jù)！
(1)點(diǎn)擊 添加框架 先添加框架。
(2)可拖拽區(qū)域中有框架后，然后點(diǎn)擊 添加模塊
(3)如圖所示,根據(jù)你需要調(diào)用的數(shù)據(jù)類型添加模塊數(shù)據(jù)即可：
- 如何在模塊中增加"標(biāo)題"及 "更多"的鏈接 如下圖樣式
方法：通過框架或模塊都可以實(shí)現(xiàn)上述樣式 ，我們以框架為例，我們?cè)贒IY的時(shí)候 選中要編輯的框架點(diǎn)擊編輯 如下圖所示：
之后點(diǎn)擊標(biāo)題
在彈出的層中可以添加標(biāo)題及鏈接,位置選擇居左 如下圖所示，同時(shí)可以設(shè)置標(biāo)題的顏色及大小
接下來增加"更多"的鏈接 點(diǎn)擊彈出層的添加新標(biāo)題按扭 如下圖所示 ，會(huì)"復(fù)制"出一份新的標(biāo)題 你只需修改就可以了把其中的"精彩教程" 改成"更多" ，鏈接以及字體、顏色都進(jìn)行修改就可以了，這里的位置一定要選擇"居右"
完成，這樣框架就有了標(biāo)題及更多 ，模塊的方法同上 - DIY的模塊中如何調(diào)整鏈接的顏色
如下圖樣式
方法：選中要修改的模塊 ， 點(diǎn)擊編輯，選擇 數(shù)據(jù) 如下圖所示：
在彈出層中選擇 編輯 如下圖所示：
在彈出的層中 可以對(duì)標(biāo)題進(jìn)行 加粗、斜體、加下劃線、修改顏色 等操作
- 如何在現(xiàn)有的模塊中添加新的數(shù)據(jù)
選中要添加數(shù)據(jù)的模塊 點(diǎn)擊編輯--數(shù)據(jù) 如下圖所示：
在彈出的層中 選擇任意一條數(shù)據(jù) 點(diǎn)擊編輯 如下圖所示：
點(diǎn)擊編輯后 在彈出的層中選擇從數(shù)據(jù)源獲取 此處可以添寫帖子ID、文章ID、日志ID、圖片ID 來獲取數(shù)據(jù) 如下圖所示：
點(diǎn)擊獲取會(huì)填充模塊內(nèi)相應(yīng)的數(shù)據(jù)字段 （此處的數(shù)據(jù)字段會(huì)根據(jù)模塊樣式的不同有所變化，請(qǐng)注意）完成。 - DIY時(shí)如何調(diào)用外部程序的數(shù)據(jù),當(dāng)我們與第三方程序整合后 如何在門戶、頻道、論壇、或可以DIY的區(qū)域調(diào)用這些第三方程序的數(shù)據(jù),首先我們可以在需要調(diào)用的地方拖一個(gè)展示類中的靜態(tài)模塊 如下圖所示：
如上圖所示 選擇數(shù)據(jù)來源為"自定義HTML"
一般第三方系統(tǒng)的數(shù)據(jù)調(diào)用都會(huì)有輸出JS格式的 我們把第三方程序提供的JS代碼粘貼進(jìn) HTML代碼框就可以了，如下圖所示：
完成。 - 首頁(yè)多格或首頁(yè)四格如何DIY出來, 我們以論壇首頁(yè)為例 （在任何頁(yè)面都可以） 來制作一個(gè)首頁(yè)四格。
首先在論壇首頁(yè)拖一個(gè) 1:1的框架 如下圖所示：
接下來向已拖好的1-1框架的框架里 左側(cè)的1 里面拖入一個(gè)1:1的框架 如下圖所示：
接下來向右側(cè)的1-1里面也拖入一個(gè)1:1的框架，如下圖所示：
接下來我們就可以通過拖拽模塊到框架中去了
此時(shí)我們可以去掉框架的標(biāo)題 ，同時(shí)為每一個(gè)模塊增加一個(gè)標(biāo)題 如下圖所示：
你可以通過不同的模塊樣式或者CSS來美化這里。 - 如何修改整個(gè)模塊的鏈接樣式 比如下圖
方法：選中要編輯的模塊 ，點(diǎn)擊編輯--樣式 進(jìn)行修改 如下圖所示：
以上修改針對(duì)整個(gè)模塊完成 。 - 如何修改兩個(gè)模塊或兩個(gè)框架之間的距離 如下圖樣式
選擇要編輯的框架或者模塊 ，點(diǎn)擊編輯--樣式 選擇外邊距，勾選分別設(shè)置 ，在右邊距中寫入合適的數(shù)字就可以了 例如如下圖所示：
完成后的效果 如下圖樣式
完成。 - DIY中TAB框架如果切換點(diǎn)擊方式（鼠標(biāo)點(diǎn)擊與鼠標(biāo)滑過）
實(shí)現(xiàn)方法：拖一個(gè)TAB框架到頁(yè)面中，點(diǎn)編輯，選擇標(biāo)題 如下圖所示：
在彈出的窗口中選擇切換類型 如下圖所示：
你可以根據(jù)你的需要選擇是點(diǎn)擊還是滑過即可完成。 - 在DIY模塊中的模塊數(shù)據(jù)中固定是什么意思，如下圖
解答： 當(dāng)勾選固定后 此條數(shù)據(jù)將不會(huì)隨著模塊屬性當(dāng)中的條件進(jìn)行更新，也就是說，此條數(shù)據(jù)將永久不變，除非把勾選去掉 - 如何實(shí)現(xiàn)兩個(gè)模塊中間一條豎線的效果，如下圖效果
實(shí)現(xiàn)方法：選中要操作的DIY模塊 選擇樣式 如下圖所示：
在彈出的層中 ，選擇邊框的分別設(shè)置 ，在邊框的"左" 大小 設(shè)置為1px，"樣式"選擇實(shí)線，"顏色"選擇灰色，如下圖所示：
這樣設(shè)置后 我們就能看到一個(gè)邊線了 這時(shí)你會(huì)看到內(nèi)容與邊線擠在了一起 如下圖所示：
接下來我們進(jìn)行調(diào)整內(nèi)邊距改變上圖中的樣式 同理，打開樣式編輯層 選擇"內(nèi)邊距" 點(diǎn)分別設(shè)置 在"左"中添加10px
調(diào)整后如下圖所示：
大家可以根據(jù)實(shí)際情況調(diào)整 內(nèi)、外邊距的大小與邊框的設(shè)置 ，靈活使用 - 如何將一個(gè)文章模塊轉(zhuǎn)換為一個(gè)帖子模塊,比如官方提供的門戶及頻道都是文章類模塊 ，我們?nèi)绾无D(zhuǎn)換為帖子類,編輯模塊的屬性 把其中的模塊分類進(jìn)行切換 如下圖所示：
選擇帖子模塊就可以變換 這里要注意 切換之后，原來的模塊樣式將變成私有的（自定義樣式） 修改顯示樣式只能通過模塊模板進(jìn)行修改 - 如何在模板（官方發(fā)布的頻道及門戶）里面插入DIY區(qū)域 ，如下圖所示：
首先打開 模板文件 例如親子模板， 打開template\default\portal\list_baby.htm 文件找到這兩段代碼的之間插入一行代碼- <!--[diy=guanggao]--><div id="guanggao" class="area"></div><!--[/diy]-->
其中 "guanggao" 可以任意取名，注意 不可與本模板中其它重名，必須保證唯一性 如下圖所示：