discuz! X 前端文档（HTML和CSS部分）
# q9 i9 H% t/ }' [4 c. ~" `1 J- X
Discuz!X 前端文档（HTML和css部分）
G6 F, L; y- @+ ]
4 b( O _+ I7 J7 c$ R7 o: R默认模板文件构成... 1
# G1 W0 D, R: s/ h- I6 K
默认模板的图片文件构成... 2
9 t( m J' k Z* u$ y默认模板修改原则... 3
8 I) x* g: B3 @
默认模板中的一些“陷阱”... 3
! |% E$ c; B D需要兼容的浏览器列表... 4
+ P* y2 T# v# x, F* s
HTML 书写规范... 5
/ J( A: Y/ F1 P! v, o8 e
CSS 书写规范... 6
) \3 f4 k" s7 |. b0 b3 B' C+ n& k图片制作规范... 6
! [4 `. X3 ]8 q& {/ Q- t
One More Thing J.. 7
" q- j* c, b$ f/ x& E; ^/ u附言... 7
$ ^; w( S: g8 |3 K. k7 h
$ X$ X; g M3 E- J% G+ i( y/ L0 W* z; Q
+ N+ g6 X% m& h( n. p- h默认模板文件构成
( c! n; N: y: ^% m; r默认模板文件地址在./upload/template/default/由以下一些文件（夹）构成：
( g# } d5 o! s+ @% J6 w. D4 X M, A, A6 W) o
common/
4 ^3 m4 C, U. [7 g
存放CSS 文件及各个公共文件
; F: O+ p Z" \( H4 d2 m
% {6 A/ Q( v e
forum/
# L2 N. n' N- w7 Y
存放论坛相关文件，还有编辑器、导读、淘帖、统计等也在其中
- j5 `, M7 L8 @ {5 Q' a3 n. w! `5 `6 H5 A# f0 {9 M+ q- l' r- Q) E2 X
group/
$ D% O& f. N+ [9 v: b; V+ N# P存放群组相关文件，部分功能依赖于论坛的模板文件，比如群组帖子
( F% s! ? U& X) R
* O' L! |% U& {" K. Whome/
5 c- j( w3 X) K& J
存放广播、记录、日志、相册、道具、勋章、消息、好友、好友搜索、邀请、积分、收藏、动态、家园、个人资料、分享、任务、帖子、交易、悬赏、活动、投票、辩论等各种功能的文件，以space_ 开头的模板主要用来展示，以spacecp_ 开头的更多用在管理操作
! N3 w9 ^1 u8 H$ ?8 \
" h: T9 ^$ o) ]8 g7 ?5 r6 }$ |# N5 |
member/
2 s; H9 z' P$ R, ?
存放登录、注册、找回密码相关文件
& n1 O- f6 j# U- t" a _0 @* ~
/ X- E/ b s M2 dmobile/
$ i: j" N; z# H! H7 l' s) s
存放手机版的相关文件
2 A" \+ A7 M6 ~7 z
$ u+ @. k& _ G8 ]0 Y: F, F
portal/
( b: E9 Z; b! ?/ W4 R8 O$ j6 Z存放门户相关文件，还有门户管理及 DIY 的一些东西
/ s1 X. _+ S# V/ v7 y4 [# R/ z
5 n, A/ W& ?$ ~ranklist/
) {6 R2 Y9 w9 \. l
存放排行榜相关文件，不过排行榜功能已经不再开发了
: {8 a+ `& _! D' i) h1 A
0 E5 y, x# U- T: M; csearch/
: Y5 i0 K1 L; H( m
存放搜索相关的文件，从界面上来说属于一个基本独立的功能
. G1 Q' U3 [+ E" P3 @$ a
, s+ d$ k: i8 T) z! U$ s4 b
style/
4 O1 Y+ x ~, O默认模板的另外五种配色
l' k/ H& L. t
6 i5 V4 {+ }" n1 G' U4 O5 e$ vtag/
% w, f4 t$ P; Z1 G# y9 f# F& f0 v. d存放标签相关文件
, E% `, m1 a- b- t: \: H r
: Z/ z/ W0 V7 D3 Y0 e% Z6 F
userapp/
4 e+ N( K; i, ~9 W) }: G存放漫游应用相关的文件
: d9 e9 n% h5 [# L2 }5 a
3 z; V; T6 S5 ^# @' ^discus_style_default.xml
8 Q2 j) W+ h+ B/ _. |
配色文件，由后台生成，整个基调定下来后，在后台修改完导出后，一般不要再修改，因为如果修改了这个文件，站长在升级时需要重新导入才行
" j1 r! R9 x3 B7 p1 h& }1 j
V& c4 f7 ]5 `% l# q) w* L
preview.jpg
: h# U* \8 W, z# n5 a0 m
用在后台的预览文件
- f+ d$ b l* d, }3 h
+ s }+ U6 Q+ Z; [+ D
preview_large.jpg
" l$ V8 ~6 c- }
用在后台的预览文件大图
) C/ G2 C, e5 u+ w0 Z; R$ k- Z/ n
默认模板的图片文件构成
9 i e& `, O. Z' I) T
默认模板的图片文件地址在./upload/static/image/，其中admincp/存放的是后台的图片及CSS 文件，其余文件夹基本可以通过文件夹名字知道其用途。
! @$ C. j7 {/ K0 g5 t( u/ U V `2 M
./upload/static/其余几个文件夹大致用途如下：
& S/ r6 V1 }+ Z- t" h/ v: D
/ @6 s1 d' Y* V6 R0 vimage_big5/
* @/ [# u8 f1 ~7 a5 I
用于繁体中文 BIG5 码
& f! k4 V, g9 j+ N# Z- P( C: }( |* Z" u9 z$ ~& m7 k2 A+ l
js/
J5 L# |0 O3 u& g* y$ C
整站的Javascript文件都在这里
2 k9 a: Q) S" c ~, P9 O3 l* E
2 _ H0 Z* z: |+ n3 H" a
space/
2 n/ k2 d1 }& x) ?1 j7 G C个人空间的八套风格文件，包括图片、CSS 文件都在这里
8 Y* t* U7 a: n
* e8 Z! ^5 p8 {1 a- E
topic/
( w W1 c4 G/ Q
门户用到的两个默认专题样式
" k) T: R+ K) c% ^: G默认模板修改原则
4 W( U4 B; V- ^" c/ l" {1、 首先应该考虑模块化、扩展性，因为同一个元素可能用在不同的页面的不同地方，如果太过于个性则可能冗余代码太多，另外使用 Discuz! 的站长有可能二次开发，所以在修改模板的时候，要尽可能多的考虑各种使用场景及可能性，这样才能平衡需求及易用性，以一种比较中庸的姿态来适应绝大多数站长的要求
/ Z: e% y0 ^6 {) Y2、 另外绝大多数第三方模板风格都是建立在默认模板的基础之上的，这就要求在修改默认模板的时候，要尽可能的考虑到方便这些风格制作者
* }6 ~) u" M0 l1 a$ G
3、 还有就是 Discuz! 后台有许多开关，而且有些开关是相互关联相互影响的，所以每个页面开启或者关闭某个功能对页面布局的影响应该经常考虑，这要求首先要对后台的功能开关烂熟于心，建议每个功能自己都先开关一下试试
1 H- Q- H* m \8 q$ c4、 Discuz! 的权限设计在模板中也有很多体现，因此在界面中会出现某些元素没有权限者看不到的情况，因此在修改某些地方的界面的时候，权限问题也要考虑进去
: G- F- r5 z9 c& l4 n; C, O
6 w! Q/ V; W, O, K1 t% m默认模板中的一些“陷阱”
+ l/ |& c' ^$ b# T8 Z1 M
1、 论坛的帖子 URL加不加参数&from=portal出来的效果是完全不一样的，不加就是默认的，加的话就会以门户的样式来展现帖子
6 c+ ]# ^0 m$ Q# S
2、 论坛的帖子和群组的帖子模板是公用的
{4 g* V; ^( R3、 论坛的分类信息相关页面，还有商品贴等的交易流程以及个人信用等页面隐藏的比较深，如果对这些不熟悉，建议先完整走一遍流程后再进行修改
; h" f. {! _" a/ Q4、 对于顶部导航部分的修改，要考虑三个地方：搜索、个人空间以及论坛等其他通用页面，因为这三个地方用到了不同的头文件
1 ^1 o' Z" {. d
5、 对于广播、主题、日志、相册、记录、分享、留言板、个人资料等模板文件的修改，一定要注意，这些功能每个模板里都有四种组合情况的逻辑判断：“以SNS模块风格展示/以论坛模块风格展示、个性化DIY风格/论坛样式。”不同情况下展示出来的样式是完全不一样的，所以在制作的时候一定不要遗漏
! v3 Q' k7 N3 ^) X
6、 在第5点提到的那些功能页面，URL 加不加参数&from=space显示的效果是完全不一样的，这个也需要非常小心
: a' x' C- i/ d% v: b( z0 Q7、 对于广播来说，mod=follow和mod=follow&uid=1&do=view显示的效果也是完全不一样的
* h) ^ F& e4 h% R- Q4 D8、 验证码和验证问答，这是非常容易遗漏的一点，也是让人非常头疼的一点，因为许多页面本身很好看，但是为了验证码和验证问答，只能做一些折中的修改
! {, n a( g7 o8 ~
需要兼容的浏览器列表
& Y8 q/ q) Q ?1、 市面上常见的一些浏览器，包括但不限于 IE9、IE8、IE7、IE6、Firefox、Chrome、Safari、Opera、360、Mathon等，一般都要兼容，不过一般情况下不需要做特别处理，因为只要 HTML 和 CSS 组织的比较好，就能比较巧妙的规避各个浏览器的不足之处。
E/ o. A. b" a$ b1 R9 D: }- t3 R2、 IE6/7 的优先级现在可以放在一个比较低的位置，就是说只要保证 IE6/7 下同样的功能不会乱掉就可以，因此在制作功能的时候，可以适当的使用 HTML5 和 CSS3，对于支持的浏览器可以显示出更炫的效果，对于不支持的，就以比较平淡的形式展示
4 ]9 O7 i! ~$ b' r& ~9 LHTML 书写规范1、 首先请遵守XHTML 的一些规范，比如小写、双引号、闭合等
% }2 s0 T1 h/ J: \& t; `+ W5 T
2、 除此之外Discuz! 本身也有一些书写规范，主要集中在表单方面：
7 T. N3 E, e3 n" Y, E4 v
<label><inputtype="radio" name="" id="" class="pr"/>文字</label>
& ~* L2 {% x, m) a+ f8 \% h O' ]
# U9 d7 @6 L% f% O! x<label><inputtype="checkbox" name="" id=""class="pc" />文字</label>
: M3 ], r! Q# U0 {
& D7 f: A$ h% x! }, R
除了属性要遵循type、name、id、class这种顺序外，还要：
( P0 p- |& {6 `+ S) n+ J% B" Z& q
n 每个包含文字的 radio 和 checkbox（以下简称“框”）应用<label>包含起来（不兼容 IE6，但是节省许多代码）
8 l) j1 B: q0 z$ {, u! r+ x: \" |+ T1 un 每个框应写上相应的 class="pr" 或 class="pc"
5 D1 i+ g' G0 z7 k) ]; X
n <input />与文字之间不要空格
, @9 F9 } w) s& r( ]0 S0 `3、 对于链接，要保证href为第一个属性
( A4 T! H# d1 @# Y+ ^4、 对于图片，应该有alt属性，哪怕为空的；对于已知尺寸固定的图片，还应该写上width、height数值，这样可以加快浏览器对整个页面的渲染
$ N# M6 [6 b& \4 U5、 凡是有数字或者英文的地方，应该前后各空一个半角空格
# {5 [' K4 A2 H) t9 R6、 对于类似 <div class=“a<!--{if …}-->…<!--{/if}-->”></div>这样写是不规范的，应该去掉“<!--”和“-->”，改为<div class=“a{if …} …{/if}”></div>
# P5 n( Y5 x; o* m; D( c: v, q7、 相应的 HTML 结构应该按照从属进行缩进，标准是一个或多个 Tab
b6 x) y! o( K) J" H7 {
CSS 书写规范1、 在common.css及module.css文件里有具体的写作规范，请严格按照规范来书写，为了整个产品的规范性，建议先通读一遍
7 j- O( m& J' F! q* Z
2、 需要注意的是，CSS原始文件里有一些形如{HIGHLIGHTLINK}之类的变量，这些就是在后台界面管理里写入了一些提炼出来的通用样式，所以在书写的时候，能用到变量的就不要使用具体的值。比如有个地方需要高亮链接的颜色，那么就要这样写color: {HIGHLIGHTLINK};
( e- S& p# D8 M: n/ L3、 对于CSS 命名规范，要求不能使用大写字母，以言简意赅为主，同时尽量抽象，尽量避免类似 .blue { color: blue; } 之类的命名，而是写成比如.highlight {color: blue; }，尽量考虑到扩展重用
9 c, C5 x0 o: }4 C+ n4、 尽量避免使用 CSS Hack，Discuz! 会自动判断 IE 浏览器版本，自动给<html>添加.ie_all, .ie6, .ie7, .ie8, .ie9等 class，所以需要针对这些浏览器进行 BUG 修正时，可以写成.ie_all .foo { ... } .ie6 .foo { ...}等
" s" y4 g4 q$ V* N5 |图片制作规范1、 为了保证较少的 HTTP 请求数，所以图片导出时要尽量将多张图片（常用于图标）合并为一张图片，也就是常说的 CSS 精灵。但是要把握一个度，比如站长在制作风格时经常会替换掉的图片，就一般不要合并，这个需要具体问题具体分析
7 H$ N$ V6 L: _2、 为了保证耗费较小的流量，图片导出时以 8 位 PNG为主，GIF和 JPG为辅，具体文件格式可以根据图片色彩构成来决定。对于透明图标，则一般要导出为 8 位索引色透明 PNG，以保证 IE6 下不出现灰块
0 r; ] t+ }6 n* c
3、 为了保证占用较小的客户端内存，对于需要repeat 的背景图片，尺寸要控制在一定范围内，不能太小，也不能太大。绝对不要使用 1×1 等这种 repeat-x/y 的背景图片，会非常耗费内存
3 R" I2 F3 |6 g- Y3 e4、 Discuz! 前台图片文件的命名目前没有一个统一的规范，一般都是以图片所处的功能区来命名的，不过希望能在将来能逐渐改变这种命名方式，统一为以其形态来命名。比如背景图片都以 bg_*.png 等形式命名，小图标都以 ico_*.png等形式命名，按钮都以 btn_*.png 等形式命名等（Discuz! 后台的图片文件就是采用采用此种命名方式），这种命名方式常用在游戏开发中，好处就是可以在大量的图片文件中迅速找到要找的图片，而且能知道其大致的用途
( x s# h7 a& U8 c6 d* R/ g
One More Thing J在 Discuz! 这个品牌出现的地方，首字母“D”一定要大写，“iscuz”要小写，还有一点很重要的是不要忘记了最后一个“!”，只有这样才是完整的Discuz!
# _/ a9 [- d+ s: S' y
附言更多详尽的文档请参考 SVNdocuments 目录下的一些文档。
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
