以前一直装一个lxblog5.1.5,以后终究是要用5.3,终究是需要增加一些模板风格 $~Y4ho);(
由于一直看不到lxblog的模板分析档案,以后不管是自己还是别人,改动模板总是很麻烦 q}3izVk
于是今天下载了lxblog5.3,研究一下它的模板,写一个记录,以后备用 t3xq)
av<.
(以后将逐渐更新) q,RY"h9Ww5
以下仅分析用户blog的模板,blog系统的模板暂不考虑 2~G|!!
1、目录 j:
Q5"nP
5.3的模板目录相对5.1.5,有了很大改进,用户blog的模板全部放到了theme文件夹下面 qejEa2^
同时以模板名称命名目录,目录下面包含images(放置图片)、template(放置htm模板以及style.css样式表)以及该模板的预览图片demo.png和该模板的信息文件info.txt o$v-
{
2、info.txt文件 ESUH^{),W[
该文件格式很简单,如下 2BtO(XW
name:模板名称 cF\y`F'oT
author:作者 7I}:8&^:
date:制作时间 5![iKM<
仅仅三行而已 Fk|z46 OV
3、demo.png sf9|=.e!2
模板的缩略图,用来方便用户选择模板的时候,可以一眼看个大概 {c$)d$P^n,
4、images目录 Lng\"Lf
放置该风格的所有图片 ED};SUV
5、template目录 mi&kpI>
该风格模板的所有htm文件,以及style.css样式表 f[p!a
一个最完整的风格应该包含的文件如下 [&kTZk\
blog.htm //各篇日志的模板页面 !*#@Kjw >
comment.htm //ajax无刷新评论模板(每个日志下面的评论,如果有评论,就是用这个模板) PIeKJ{y
file.htm //文件的详细页面 sCvZKLU
footer.htm //模板底部 Cx?-q.`TPX
goods.htm //商品的详细页面 !
ei[cnl
header.htm//模板头部 DX%;t~$c
list_blog.htm //日志列表页面 ?Q%OPpO
list_bookmark.htm //书签列表页面 51LeDtth
list_file.htm //文件列表页面 [v-W{#}7""
list_gbook.htm //游客留言列表页面 x+6*r^
J
list_goods.htm //商品列表页面 <;=o}&T
list_music.htm //音乐列表页面 ATD?:Qs
list_photo.htm //相册列表页面 Ru.dpnZc
list_team.htm //朋友圈列表页面 4E1u!2
main.htm //各个日志、相册、商品、音乐、文件的最外框架页面(只含最外层一个div标签)
n_!T;2
music.htm //音乐的详细页面 &7iH/'z
photo.htm //相册的详细页面 P2reiSiF
side.htm //左侧竖栏的最外框架模板(一个div以及一个JavaScript) ]Y'vI<&
side_archive.htm // 左侧竖栏存档列表模板文件 .TY
side_calendar.htm // 左侧竖栏日历模板文件 G&G.`EIt
side_comment.htm // 左侧竖栏评论模板文件 qr\1dc(
side_custom.htm //
Zl24O
side_icon.htm // 左侧竖栏博主资料模板文件 pz'R43[
side_info.htm // 左侧竖栏个人统计模板文件 ,?tq[Mz
side_lastvisit.htm // 左侧竖栏最近访问来客模板文件 $TDD{pFn
side_link.htm // 左侧竖栏友情链接模板文件 \06dN
side_notice.htm // 左侧竖栏博客公告模板文件 mY}h>/O}
side_player.htm // 左侧竖栏播放器模板文件 le5Bg>L
side_search.htm // 左侧竖栏搜索框模板文件 5 >4iU[|D
side_userclass.htm // VQ*(U!+
style.css //样式表文件 T$%VCp~R
若你使用的风格,缺少某个文件,系统将自动去theme\default\template里面读取(这就是为何要保证系统默认风格的完整性) 0_Gj_2'
5、style.css文件分析 p @HR;ow
先来一些css的基础知识,如果你做风格,这些是一定要知道的,如果再不懂,你就只能先去恶补一下了 *>Cx&=VHz
选择符 d>8(s\,lh
任何HTML元素都可以是一个CSS1的选择符。选择符仅仅是指向特别样式的元素。例如, ]z`i2xCM~
[pre]P { text-indent: 3em }[/pre]当中的选择符是P。 d)I4wH~<K
类选择符 ,HRsnh)q}
单一个选择符能有不同的CLASS(类),因而允许同一元素有不同样式。例如,一个网页制作者也许希望视其语言而定,用不同的颜色显示代码 : I]2EhEl
code.html { color: #191970 } JO)@:Z
code.css { color: #4b0082 } `k< |