頻道是將門户信息分類展示的形式,一個社區除了門户、廣場、羣組、家園與應用等核心功能外,還可以根據運營需要開設婚嫁、房產、汽車等頻道。專題是服務於集中報道和深度報道的一種展現形式,集中體現某項熱點事件。論壇中創建頻道、專題的位置, 分別如圖所示:
頻道創建:

專題創建:

按照後台的提示添加頻道和專題模塊!創建後的頻道和專題是沒有很強的展示效果的或者只能按照給定的方式進行展示。如果想對這兩個模塊進行個性化豐富製作就需要通過前端靜態頁面結合論壇 DIY 功能進行製作。
DIY 專題, 頻道的製作開發
以下以家居頻道為例把製作好的頁面轉換成頻道頁面
- 如下圖:圖片文件夾、 CSS 文件夾、其它文件或圖片文件夾、一個 HTML 頁面.

- 下頁是製作好的效果圖:

- 接下來, 我們就把這個頁面轉換成 DIY 頁面
首頁我們用編輯工具打開 index.html 頁面
我們為了能夠使用統一的頭部樣式, 這裏面我們引入系統內置的頭部文件 (header) 把頁面中的關於頭部的信息刪除
如下圖所示:

- 把系統頭部 (header) 引入進來
- <!--{subtemplate common/header}-->
如下圖所示:

- 給新的模板起個名字, 如下代碼:
- <!--[name] 家居頻道模板 [/name]-->
如下圖所示:

- 接下來增加可供 DIY 的 CSS 樣式表
如下代碼- <style id="diy_style" type="text/css"></style>
如下圖所示:

- 接下來更換底部代碼, 找到底部代碼刪除掉換成系統內置的通用底部代碼, 如下圖所示:
增加如下代碼
- <!--{subtemplate common/footer}-->
如下圖所示:

- 到此基本改造完成 接下來我們把改造好的文件放在系統目錄中去
首先我們把 index.html 文件改名
把 index.html 改成 list_home.htm 此處一定要注意 頻道模板必須以 list_ 開頭, 後綴名為 .htm
把改好名的 list_home.htm 文件拷貝到 template/default/portal 目錄下
同時在 template/default/portal 目錄新建一個 home 文件夾 用來放家居頻道的圖片及樣式表此時複製 原來的文件夾
到 templatedefaultportal 目錄的 home 文件夾 如下圖所示:

- 接下來 用編輯器打開 list_home.htm 文件引入樣式表文件
代碼如下- <link href="$_G['setting']['csspath']template/default/portal/home/style/style.css" rel="stylesheet" type="text/css" />
如下圖所示:

- 同進查找<img src="images/ %20 替換成%20<img%20src="template/default/portal/home/images/
把其它用到的圖片標籤全替換成 template/default/portal/home/ 這個目錄下就可以了
接下來 我們進入後台創建一個頻道 模板名選擇 「家居頻道模板」 如下圖
創建完成後, 點擊查看 就能看到已與系統完全整合的模板了 接下來我們把模板中的佔位用的假數據換成 DIY 區域
用編輯器打開 list_home.htm 文件 大家會看到有類似的如下代碼- <div >
- <ul>
- <li><a href="#" >[裝修資訊]</a> <a href="#"> 七步改造計 為夏日客廳換新顏</a></li>
- <li><a href="#" >[行業資訊]</a> <a href="#"> 拆改承重牆如同醉駕需繳費</a></li>
- <li><a href="#" >[裝修資訊]</a> <a href="#"> 玩轉極簡主義 構造冷色系居室空間</a></li>
- <li><a href="#" >[家居風水]</a> <a href="#"> 周星馳於文鳳分手 防小三家居風水</a></li>
- <li><a href="#" >[裝修資訊]</a> <a href="#"> 小身材大味道 邊角料再利用</a></li>
- <li><a href="#" >[裝修資訊]</a> <a href="#"> 茶几佈局 隨性設計耐保養</a></li>
- </ul>
- </div>
把其中的
- <ul>
- <li><a href="#" >[裝修資訊]</a> <a href="#"> 七步改造計 為夏日客廳換新顏</a></li>
- <li><a href="#" >[行業資訊]</a> <a href="#"> 拆改承重牆如同醉駕需繳費</a></li>
- <li><a href="#" >[裝修資訊]</a> <a href="#"> 玩轉極簡主義 構造冷色系居室空間</a></li>
- <li><a href="#" >[家居風水]</a> <a href="#"> 周星馳於文鳳分手 防小三家居風水</a></li>
- <li><a href="#" >[裝修資訊]</a> <a href="#"> 小身材大味道 邊角料再利用</a></li>
- <li><a href="#" >[裝修資訊]</a> <a href="#"> 茶几佈局 隨性設計耐保養</a></li>
- </ul>
換成
- <!--[diy=diy1]--><div id="diy1" ></div><!--[/diy]-->
完成後是這個樣子
- <div >
- <!--[diy=diy1]--><div id="diy1" ></div><!--[/diy]-->
- </div>
其中的 [diy=diy1] 和 div id="diy1" 要匹配 且 在一個頁面中不能重複 如果要在第二個區域裏面使用的話就應該是
[diy=diy2] 和 div id="diy2" 或者 [diy=home] 和 div id="home" 或者 [diy=discuz] 和 div id="discuz" 只要在一個頁面內不重複 隨你怎麼寫都可以
如下圖所示:
- 此時就完成了佔位數據 轉換成 DIY 區域的過程 在上面的過程中 這樣的替換並不是最優化的, 我們接下來進行改進, 讓 DIY 更加靈活
此處的結構是這樣子的 如下圖
實現它的代碼是這樣子的
- <div >
- <h2><a href="#"> 玩轉極簡主義 構造冷色系居室空間</a></h2>
- <p> 今夏最流行的設計當屬極簡主義, 色彩也從華麗深沉轉變為了優雅素淨。玻璃、金屬、木質等較能體現簡單特性的材質..<a href="#">[詳細]</a></p>
- <div >
- <ul>
- <li><a href="#" >[裝修資訊]</a> <a href="#"> 七步改造計 為夏日客廳換新顏</a></li>
- <li><a href="#" >[行業資訊]</a> <a href="#"> 拆改承重牆如同醉駕需繳費</a></li>
- <li><a href="#" >[裝修資訊]</a> <a href="#"> 玩轉極簡主義 構造冷色系居室空間</a></li>
- <li><a href="#" >[家居風水]</a> <a href="#"> 周星馳於文鳳分手 防小三家居風水</a></li>
- <li><a href="#" >[裝修資訊]</a> <a href="#"> 小身材大味道 邊角料再利用</a></li>
- <li><a href="#" >[裝修資訊]</a> <a href="#"> 茶几佈局 隨性設計耐保養</a></li>
- </ul>
- </div>
- </div>
- 我們可以把整個區域做為一個 DIY 區域
接下來 我們進入後台--》 門户--》 模塊模板--》 點擊添加, 這裏我們以文章為例 , 選擇文章類 進行提交
為模板起個名稱 比如 「首頁中間列表」
刪除代碼框裏面的內容 拷貝上面的代碼進來, 如下圖所示:
接下來把代碼框中的代碼進行改造, 改造成如下代碼:
- <div >
- [index=1]
- <h2><a href="http://url"{target}>{title}</a></h2>
- <p>{summary}<a href="http://url"{target}>[詳細]</a></p>
- [/index]
- <div >
- <ul>
- [loop]
- <li><a href="http://caturl" {target} >[{catname}]</a> <a href="http://url"{target}>{title}</a></li>
- [/loop]
- </ul>
- </div>
- </div>
這裏用到了許多 diy 默認規定好的變量, 來代替前台具體的顯示內容, 每個模塊都有自己的定義變量, 在後台都有詳細解釋, 如下圖:

- 現在模塊模板就製作完成了接下來, 我們在頻道的前台進行調用:在頻道的前台頁面點 DIY 會看到中間部分沒有內容 會多出一個淺色的條 便是 DIY 區域 如下圖

- 我們在 DIY 區域裏面拖入一個 100% 的框架, 把標題去掉如下圖
接下來選擇樣式 把邊框設為 0PX, 外邊距也設為 0PX, 如下圖

完成後 在此框架內拖入一個文章模塊 並選擇剛才創建的模塊樣式, 如下圖

完成後選擇樣式 把邊框、外邊距、內邊距都設為 0PX, 如下圖

- 到此模板的製作就完成了, 其它內容可仿造以上設置 進行製作。