以前一直装一个lxblog5.1.5,以后终究是要用5.3,终究是需要增加一些模板风格 F/h|K:
由于一直看不到lxblog的模板分析档案,以后不管是自己还是别人,改动模板总是很麻烦 "N/s)x
?)
于是今天下载了lxblog5.3,研究一下它的模板,写一个记录,以后备用 pMUcW0Ra
(以后将逐渐更新) *|:
'7-
以下仅分析用户blog的模板,blog系统的模板暂不考虑 [@HsqWMC:R
1、目录 CYkD XTF
5.3的模板目录相对5.1.5,有了很大改进,用户blog的模板全部放到了theme文件夹下面 lHt:J_d
同时以模板名称命名目录,目录下面包含images(放置图片)、template(放置htm模板以及style.css样式表)以及该模板的预览图片demo.png和该模板的信息文件info.txt [
bJ;i^}m
2、info.txt文件 0Lqgf]e7/
该文件格式很简单,如下 aUYe<_N
name:模板名称 1Ra(E`u&g
author:作者 wJP4Sy@}
date:制作时间 W#dWXxV
仅仅三行而已
7Ho^y>
3、demo.png TUO +N[agK
模板的缩略图,用来方便用户选择模板的时候,可以一眼看个大概 (&w_"Q=
4、images目录 "fG45|fv[
放置该风格的所有图片 \/M/^zh
5、template目录 R,qaC~i{Nh
该风格模板的所有htm文件,以及style.css样式表 |[)w4`
一个最完整的风格应该包含的文件如下 :IU?s;fYy8
blog.htm //各篇日志的模板页面 eSZuGA
comment.htm //ajax无刷新评论模板(每个日志下面的评论,如果有评论,就是用这个模板) p]HupS <n
file.htm //文件的详细页面 6lHIZ5AtF
footer.htm //模板底部 @^ma?Riez
goods.htm //商品的详细页面 ++FJdrGt_
header.htm//模板头部 G`&YcLXz
list_blog.htm //日志列表页面 _MO,aO.e
list_bookmark.htm //书签列表页面 (xFi\e
list_file.htm //文件列表页面 +&`(jJ%_L
list_gbook.htm //游客留言列表页面 9wfl5eCR
list_goods.htm //商品列表页面 ~ ;;!X^Q
list_music.htm //音乐列表页面 _<$wYexg
list_photo.htm //相册列表页面 zD9Lr)
list_team.htm //朋友圈列表页面 L{hg5%sjE%
main.htm //各个日志、相册、商品、音乐、文件的最外框架页面(只含最外层一个div标签) |v|x{+
music.htm //音乐的详细页面 c2q:&:<J_
photo.htm //相册的详细页面 C]AB&
side.htm //左侧竖栏的最外框架模板(一个div以及一个JavaScript) PnE[?ae-
side_archive.htm // 左侧竖栏存档列表模板文件 D'-~ Z^
side_calendar.htm // 左侧竖栏日历模板文件 j\t`Q[,
side_comment.htm // 左侧竖栏评论模板文件
MG8'r}^
side_custom.htm // rjzTR4(N
side_icon.htm // 左侧竖栏博主资料模板文件 @1MtUsg$|
side_info.htm // 左侧竖栏个人统计模板文件 $xP+`F1BZ
side_lastvisit.htm // 左侧竖栏最近访问来客模板文件 !`93r*GQ
side_link.htm // 左侧竖栏友情链接模板文件 ^:G9D8*
side_notice.htm // 左侧竖栏博客公告模板文件 Pq.cCv^
side_player.htm // 左侧竖栏播放器模板文件 S2km}
side_search.htm // 左侧竖栏搜索框模板文件 EYH\
v6~
side_userclass.htm // G.iU_-#/q}
style.css //样式表文件 %OkeGP
若你使用的风格,缺少某个文件,系统将自动去theme\default\template里面读取(这就是为何要保证系统默认风格的完整性) M(UDc LEuV
5、style.css文件分析 Y#~,aF{
先来一些css的基础知识,如果你做风格,这些是一定要知道的,如果再不懂,你就只能先去恶补一下了 m@d_VrDJ3[
选择符 P=To?}
任何HTML元素都可以是一个CSS1的选择符。选择符仅仅是指向特别样式的元素。例如, -AT:k(E
[pre]P { text-indent: 3em }[/pre]当中的选择符是P。 :D&k |