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

專題建立：

按照後臺的提示新增頻道和專題模組！建立後的頻道和專題是沒有很強的展示效果的或者只能按照給定的方式進行展示。如果想對這兩個模組進行個性化豐富製作就需要透過前端靜態頁面結合論壇 DIY 功能進行製作。

DIY 專題, 頻道的製作開發

以下以家居頻道為例把製作好的頁面轉換成頻道頁面

    1. 如下圖：圖片資料夾、 CSS 資料夾、其它檔案或圖片資料夾、一個 HTML 頁面.
    2. 下頁是製作好的效果圖：
    3. 接下來, 我們就把這個頁面轉換成 DIY 頁面
      首頁我們用編輯工具開啟 index.html 頁面
      我們為了能夠使用統一的頭部樣式, 這裡面我們引入系統內建的頭部檔案 （header） 把頁面中的關於頭部的資訊刪除
      如下圖所示：
    4. 把系統頭部 （header） 引入進來
      1. <!--{subtemplate common/header}-->

      如下圖所示：

    5. 給新的模板起個名字, 如下程式碼:
      1. <!--[name] 家居頻道模板 [/name]-->

      如下圖所示：

    6. 接下來增加可供 DIY 的 CSS 樣式表
      如下程式碼

      1. <style id="diy_style" type="text/css"></style>

      如下圖所示：

    7. 接下來更換底部程式碼, 找到底部程式碼刪除掉換成系統內建的通用底部程式碼, 如下圖所示：
      增加如下程式碼

      1. <!--{subtemplate common/footer}-->

      如下圖所示：

    8. 到此基本改造完成 接下來我們把改造好的檔案放在系統目錄中去
      首先我們把 index.html 檔案改名
      把 index.html 改成 list_home.htm 此處一定要注意 頻道模板必須以 list_ 開頭, 字尾名為 .htm
      把改好名的 list_home.htm 檔案複製到 template/default/portal 目錄下
      同時在 template/default/portal 目錄新建一個 home 資料夾 用來放家居頻道的圖片及樣式表此時複製 原來的資料夾

      到 templatedefaultportal 目錄的 home 資料夾 如下圖所示：

    9. 接下來 用編輯器開啟 list_home.htm 檔案引入樣式表檔案
      程式碼如下

      1. <link href="$_G['setting']['csspath']template/default/portal/home/style/style.css" rel="stylesheet" type="text/css" />

      如下圖所示:

    10. 同進查詢<img src="images/ %20 替換成%20<img%20src="template/default/portal/home/images/
      把其它用到的圖片標籤全替換成 template/default/portal/home/ 這個目錄下就可以了
      接下來 我們進入後臺建立一個頻道  模板名選擇 「家居頻道模板」 如下圖
      建立完成後, 點選檢視 就能看到已與系統完全整合的模板了 接下來我們把模板中的佔位用的假資料換成 DIY 區域
      用編輯器開啟 list_home.htm 檔案 大家會看到有類似的如下程式碼

      1. <div >
      2.    <ul>
      3.        <li><a href="#" >[裝修資訊]</a> <a href="#"> 七步改造計 為夏日客廳換新顏</a></li>
      4.        <li><a href="#" >[行業資訊]</a> <a href="#"> 拆改承重牆如同醉駕需繳費</a></li>
      5.        <li><a href="#" >[裝修資訊]</a> <a href="#"> 玩轉極簡主義 構造冷色系居室空間</a></li>
      6.        <li><a href="#" >[家居風水]</a> <a href="#"> 周星馳於文鳳分手 防小三家居風水</a></li>
      7.        <li><a href="#" >[裝修資訊]</a> <a href="#"> 小身材大味道 邊角料再利用</a></li>
      8.        <li><a href="#" >[裝修資訊]</a> <a href="#"> 茶几佈局 隨性設計耐保養</a></li>
      9.    </ul>
      10.  </div>

      把其中的

      1. <ul>
      2. <li><a href="#" >[裝修資訊]</a> <a href="#"> 七步改造計 為夏日客廳換新顏</a></li>
      3. <li><a href="#" >[行業資訊]</a> <a href="#"> 拆改承重牆如同醉駕需繳費</a></li>
      4. <li><a href="#" >[裝修資訊]</a> <a href="#"> 玩轉極簡主義 構造冷色系居室空間</a></li>
      5. <li><a href="#" >[家居風水]</a> <a href="#"> 周星馳於文鳳分手 防小三家居風水</a></li>
      6. <li><a href="#" >[裝修資訊]</a> <a href="#"> 小身材大味道 邊角料再利用</a></li>
      7. <li><a href="#" >[裝修資訊]</a> <a href="#"> 茶几佈局 隨性設計耐保養</a></li>
      8. </ul>

      換成

      1. <!--[diy=diy1]--><div id="diy1" ></div><!--[/diy]-->

      完成後是這個樣子

      1. <div >
      2.     <!--[diy=diy1]--><div id="diy1" ></div><!--[/diy]-->
      3. </div>

      其中的 [diy=diy1] 和 div id="diy1" 要匹配 且 在一個頁面中不能重複 如果要在第二個區域裡面使用的話就應該是
      [diy=diy2] 和 div id="diy2" 或者 [diy=home] 和 div id="home" 或者 [diy=discuz] 和 div id="discuz" 只要在一個頁面內不重複 隨你怎麼寫都可以
      如下圖所示：

  • 此時就完成了佔位資料 轉換成 DIY 區域的過程 在上面的過程中 這樣的替換並不是最最佳化的, 我們接下來進行改進, 讓 DIY 更加靈活
    此處的結構是這樣子的 如下圖
    實現它的程式碼是這樣子的

    1. <div >
    2.      <h2><a href="#"> 玩轉極簡主義 構造冷色系居室空間</a></h2>
    3.      <p> 今夏最流行的設計當屬極簡主義, 色彩也從華麗深沉轉變為了優雅素淨。玻璃、金屬、木質等較能體現簡單特性的材質..<a href="#">[詳細]</a></p>
    4.      <div >
    5.             <ul>
    6.                 <li><a href="#" >[裝修資訊]</a> <a href="#"> 七步改造計 為夏日客廳換新顏</a></li>
    7.                 <li><a href="#" >[行業資訊]</a> <a href="#"> 拆改承重牆如同醉駕需繳費</a></li>
    8.                 <li><a href="#" >[裝修資訊]</a> <a href="#"> 玩轉極簡主義 構造冷色系居室空間</a></li>
    9.                 <li><a href="#" >[家居風水]</a> <a href="#"> 周星馳於文鳳分手 防小三家居風水</a></li>
    10.                 <li><a href="#" >[裝修資訊]</a> <a href="#"> 小身材大味道 邊角料再利用</a></li>
    11.                 <li><a href="#" >[裝修資訊]</a> <a href="#"> 茶几佈局 隨性設計耐保養</a></li>
    12.             </ul>
    13.      </div>
    14. </div>
  • 我們可以把整個區域做為一個 DIY 區域
    接下來 我們進入後臺--》 門戶--》 模組模板--》 點選新增, 這裡我們以文章為例 , 選擇文章類 進行提交
    為模板起個名稱 比如 「首頁中間列表」
    刪除程式碼框裡面的內容 複製上面的程式碼進來, 如下圖所示：
    接下來把程式碼框中的程式碼進行改造, 改造成如下程式碼：

    1. <div >
    2.     [index=1]
    3.          <h2><a href="http://url"{target}>{title}</a></h2>
    4.          <p>{summary}<a href="http://url"{target}>[詳細]</a></p>
    5.     [/index]
    6.     <div >
    7.     <ul>
    8.         [loop]
    9.           <li><a href="http://caturl" {target}  >[{catname}]</a> <a href="http://url"{target}>{title}</a></li>
    10.           [/loop]
    11.     </ul>
    12.     </div>
    13. </div>

    這裡用到了許多 diy 預設規定好的變數, 來代替前臺具體的顯示內容, 每個模組都有自己的定義變數, 在後臺都有詳細解釋, 如下圖：

  • 現在模組模板就製作完成了接下來, 我們在頻道的前臺進行呼叫：在頻道的前臺頁面點 DIY 會看到中間部分沒有內容 會多出一個淺色的條 便是 DIY 區域 如下圖
  • 我們在 DIY 區域裡面拖入一個 100% 的框架, 把標題去掉如下圖
    接下來選擇樣式 把邊框設為 0PX, 外邊距也設為 0PX, 如下圖

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

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

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