範本風格創建

pole1010

範本風格創建

範本套系與風格區別

• 範本套系：統一的一類範本，集中放置並打包的系列。
  
• 風格：應用某個範本套系，並改變其中變數設置的一個方案。
  

擴展範本創建

創建範本套系

• 首先進入後臺 - 介面 - 範本管理，擴展製作範本時需要創建一個專屬套系用來後期修改
  
  
    
  • 基於“範本套系”可以擴展針對 ./template/default/ 目錄中對的範本檔
      
  • 創建套系的原則是不破壞原有範本基礎上進行全新的擴展範本設計
    

實例

• 在站點根目錄 ./template/中創建新的目錄如" ./template/mytest"
  
• 在 mytest 目錄中創建必要子目錄與檔如：
  

./template/mytest/common/

./template/mytext/common/extend_common.css

./template/mytext/common/extend_module.css

• 其中common目錄為公共範本目錄，其內部新建的extend_common.css、extend_module.css為擴展型CSS檔，它們可以在./template/default/common/common.css的和module.css的基礎上進行CSS代碼的覆蓋性擴展
  
• 如果需要替換論壇首頁範本，可以新建 ./template/mytext/common/forum/discuz.htm，或複製./template/default中的對應檔放在 mytext 對應目錄，以在緩存生成時覆蓋原有範本緩存，達到修改範本而不破壞原生範本的目的
  

後臺風格管理

• 進入後臺 - 介面 - 風格管理
  
  
    
  • “風格管理”可以對已有風格進行風格變數的編輯，也可以基於前面創建的“範本套系”來全新開闢新的風格
    

新建風格

• 後臺風格管理中，可以通過新增和複製原有風格進行新建風格的操作
  
• 新建風格之後，需要編輯它，調整裏面的“匹配範本”為上面創建的新套系即可
  

風格管理編輯頁面中重點風格常量介紹

• 匹配範本：對應的範本套系
  
• 擴展配色：此風格基礎上可用於用戶切換配色方案的擴展，它對應 ./template/mytest/style/ 目錄中的樣式檔。全新創建時應在./template/mytest/style/目錄中建立如t1/style.css之後方能生效
  
• 默認配色：指定站點訪問時，用戶首先看到的配色方案
  
• 默認表情分類：對應後臺 - 介面 - 表情管理中所啟用的表情
  
• 介面基礎圖片目錄：可用於更改範本圖片目錄，在CSS檔中使用{IMGDIR}的常量進行輸出，在Discuz! X2版本之後的範本中需要使用$_G['style']['imgdir']
  
• 擴展圖片目錄：用來更改擴展圖片目錄，在CSS檔中使用{STYLEIMGDIR}的常量進行輸出，在Discuz! X2版本之後的範本中需要使用$_G['style']['styleimgdir']
  
• 其他風格常量：以上沒有提到風格常量，均可以在後臺取得以花括弧框選的常量用以在CSS檔中使用（X2以後的範本中均需要$_G['style']中對應的陣列鍵值），涉及到CSS樣式的動態變更，可以在修改對應設置如：正常字體大小 {FONTSIZE}:12px/1.5，則直接修改程式運行中CSS緩存中的值
  
• 自定義範本變數 - 新增：可以根據擴展需求，針對個性化的CSS進行全局的定義
  

*******************************************************************************

模板擴展範本創建

一、創建範本套系

1、首先進入後臺 - 介面 - 範本管理，擴展製作範本時需要創建一個專屬套系用來後期修改

2、基於“範本套系”可以擴展針對 ./template/default/ 目錄中對的範本檔

3、創建套系的原則是不破壞原有範本基礎上進行全新的擴展範本設計

實例

1.在站點根目錄 ./template/中創建新的目錄如" ./template/mytest"

2.在 mytest 目錄中創建必要子目錄與檔如：

./template/mytest/common/

./template/mytext/common/extend_common.css

./template/mytext/common/extend_module.css

其中common目錄為公共範本目錄，其內部新建的extend_common.css、extend_module.css為擴展型CSS檔，它們可以在./template/default/common/common.css的和module.css的基礎上進行CSS代碼的覆蓋性擴展

如果需要替換論壇首頁範本，可以新建 ./template/mytext/common/forum/discuz.htm，或複製./template/default中的對應檔放在 mytext 對應目錄，以在緩存生成時覆蓋原有範本緩存，達到修改範本而不破壞原生範本的目的

二、後臺風格管理

進入後臺 - 介面 - 風格管理

“風格管理”可以對已有風格進行風格變數的編輯，也可以基於前面創建的“範本套系”來全新開闢新的風格

三、新建風格

後臺風格管理中，可以通過新增和複製原有風格進行新建風格的操作

新建風格之後，需要編輯它，調整裏面的“匹配範本”為上面創建的新套系即可

四、風格管理編輯頁面中重點風格常量介紹

匹配範本：對應的範本套系

擴展配色：此風格基礎上可用於用戶切換配色方案的擴展，它對應 ./template/mytest/style/ 目錄中的樣式檔。全新創建時應在./template/mytest/style/目錄中建立如t1/style.css之後方能生效

默認配色：指定站點訪問時，用戶首先看到的配色方案

默認表情分類：對應後臺 - 介面 - 表情管理中所啟用的表情

介面基礎圖片目錄：可用於更改範本圖片目錄，在CSS檔中使用{IMGDIR}的常量進行輸出，在Discuz! X2版本之後的範本中需要使用$_G['style']['imgdir']

擴展圖片目錄：用來更改擴展圖片目錄，在CSS檔中使用{STYLEIMGDIR}的常量進行輸出，在Discuz! X2版本之後的範本中需要使用$_G['style']['styleimgdir']

其他風格常量：以上沒有提到風格常量，均可以在後臺取得以花括弧框選的常量用以在CSS檔中使用（X2以後的範本中均需要$_G['style']中對應的陣列鍵值），涉及到CSS樣式的動態變更，可以在修改對應設置如：正常字體大小{FONTSIZE}:12px/1.5，則直接修改程式運行中CSS緩存中的值

自定義範本變數 - 新增：可以根據擴展需求，針對個性化的CSS進行全局的定義

五、CSS部分

CSS緩存存放：./data/cache/目錄中，以 “style_風格自增編號_應用入口關鍵字_所在頁面的mod值.css”形式保存

自建新套系範本檔可以通過創建./template/mytest/common/extend_common.css 或 extend_module.css 進行CSS擴展

/** forum::index,forum::forumdisplay **/

   .mycss {font: {FONTSIZE} {FONT};}

/** end **/

1.上面的寫法含義是：針對 forum 的 index 和 forumdisplay 追加一個自定義的CSS樣式"mycss" ，Discuz! 範本解析將會根據 forum::index 的關鍵字將 mycss 分別追加在“./data/cache/style_2_forum_index.css”和“./data/cache/style_2_forum_forumdisplay.css”中(裏面的數位2，根據新增的風格編號而定)

2.這樣的寫法好處就是，不變更默認範本的情況下有效的擴展CSS，並可以很好的進行多站點移植

Discuz! X系列產品中 CSS 檔會在緩存時按照以下順序進行合併：

1.template/default/*.css 文件

2.當默認模版是非默認模版時，template/模版目錄/extend_*.css 檔 或 template/模版目錄/*.css

3.當某插件啟用時，source/plugin/插件目錄/template/extend_*.css 文件

因此非默認模版目錄中的CSS 屬性將繼承默認模版中的CSS 屬性，插件目錄中的 CSS 檔將繼承前二者的 CSS 屬性

CSS 自身的集成順序為：當 CSS 屬性名稱相同是，CSS 檔中，寫在後面的替換前面的代碼

CSS書寫規範

1.屬性寫在一行內，屬性之間、屬性名和值之間以及屬性與“{}”之間須有空格，例如：.class{ width: 400px; height: 300px; }

2.屬性的書寫順序：

1.針對特殊流覽器的屬性，應寫在標準屬性之前，例如：-webkit-box-shadow:; -moz-box-shadow:; box-shaow:;

2.按照元素模型由外及內，由整體到細節書寫，大致分為五組：

1.位置：position,left,right,float

2.盒模型屬性：display,margin,padding,width,height

3.邊框與背景：border,background

4.段落與文本：line-height,text-indent,font,color,text-decoration,...

5.其他屬性：overflow,cursor,visibility,...

3.謹慎添加新的選擇符規則，尤其不可濫用 id，盡可能繼承和複用已有樣式

4.選擇符、屬性、值均用小寫（格式的顏色值除外），縮寫的選擇符名稱須說明縮寫前的全稱，例如 .cl -> Clearfix

5.勿使用冗餘低效的 CSS 寫法，例如：ul li a span { ... }

6.慎用 !important

7.建議使用在 class/id 名稱中的詞語

1.表示狀態：a->active

2.表示結構：h->header,c->content,f->footer

3.表示區域：mn->main,sd->side,nv-navigation,mu->menu

4.表示樣式：l-list,tab,p_pop

常用CSS

左浮動、右浮動

.z { float: left; }

.y { float: right; }

因為左右浮動造成的父級浮動溢出，及使用方法

.cl:after { content: ".";display: block; height: 0; clear: both; visibility: hidden; } .cl { zoom: 1; }

<div class="cl">

   <div class="z"></div>

</div>

大標題字體

.wx, .ph { font-family: "MicrosoftYaHei", "Hiragino Sans GB", STHeiti, Tahoma, SimHei, sans-serif;font-weight: 100; }

行內分割豎線

.pipe { margin: 0 5px; color: #CCC; }

文字字體大小

.xs0 { font-family: {SMFONT}; font-size:{SMFONTSIZE}; -webkit-text-size-adjust: none; }

.xs1 { font-size: 12px !important; }

.xs2 { font-size: 14px !important; }

.xs3 { font-size: 16px !important; }

灰色文字

.xg1, .xg1 a { color: {LIGHTTEXT} !important; }

.xg1 .xi2 { color: {HIGHLIGHTLINK}!important; }

.xg2 { color: {MIDTEXT}; }

高亮文字，1為橙色，2為藍色

.xi1, .onerror { color: {NOTICETEXT}; }

.xi2, .xi2 a, .xi3 a { color: {HIGHLIGHTLINK} ; }

文字粗體

.xw0 { font-weight: 400; }

.xw1 { font-weight: 700; }

層下邊線

.bbda { border-bottom: 1px dashed{COMMONBORDER}; }

.bbs { border-bottom: 1px solid{COMMONBORDER} !important; }

去除邊框

.bw0 { border: none !important; }

.bw0_all, .bw0_all th, .bw0_all td {border: none !important; }

去除背景

.bg0_c { background-color: transparent!important; }

.bg0_i { background-image: none !important;}

.bg0_all { background: none !important; }

外邊距樣式

.mtn { margin-top: 5px !important; }

.mbn { margin-bottom: 5px !important; }

.mtm { margin-top: 10px !important; }

.mbm { margin-bottom: 10px !important; }

.mtw { margin-top: 20px !important; }

.mbw { margin-bottom: 20px !important; }

內邊距樣式

.ptn { padding-top: 5px !important; }

.pbn { padding-bottom: 5px !important; }

.ptm { padding-top: 10px !important; }

.pbm { padding-bottom: 10px !important; }

.ptw { padding-top: 20px !important; }

.pbw { padding-bottom: 20px !important; }

DIY模組範本語法詳解

基本語句

[loop]...[/loop]標籤來迴圈顯示模組中的資料；如果要在範本中多處迴圈可以使用[loop1]...[/loop1]的方式擴展（只能擴展1-9個）

[order=N]...[/order]標籤來替代默認loop中的第N個位置資料的展示，你可以使用[order1=N]...[/order1]的方式來擴展（對應[loop1]，只能擴展1-9個）

其中：[order=odd]為奇數行，[order=even]為偶數行

[index=N]...[/index]的方式來指定第N條資料的展示方式，由該語法指定的資料不再在loop迴圈中出現，可以通過[index1]...[/index1]的方式來擴展（只能擴展1-9個）以實現同一條資料多處展示

通用變數

當前資料的鏈結位址：{url}

當前資料的標題：{title}

當前資料的圖片位址：{pic}

當前資料的簡介：{summary}

當前資料順序：{currentorder}

當前資料是否在奇數行：{parity}，奇數行為1，偶數行為0

可設置打開方式的鏈結：<ahref="{url}"{target}>{title}</a>

可設置縮略圖大小的圖片：<imgsrc="{pic}" width="{picwidth}"height="{picheight}" />

特殊欄位變數

在PHP数据类的fields方法中定义的变量都可以使用，如帖子类有{author}，{authorid}，{forumname}，{dateline}等等

变量只在[loop]、[order]、[index]标签内生效