以前一直装一个lxblog5.1.5,以后终究是要用5.3,终究是需要增加一些模板风格 b~{nv7"
由于一直看不到lxblog的模板分析档案,以后不管是自己还是别人,改动模板总是很麻烦 u$W
(m*
于是今天下载了lxblog5.3,研究一下它的模板,写一个记录,以后备用 (:Hn;pCGW
(以后将逐渐更新) ymN@uO-5
以下仅分析用户blog的模板,blog系统的模板暂不考虑 1 @*V7F&z.
1、目录 hxuAh3u0
5.3的模板目录相对5.1.5,有了很大改进,用户blog的模板全部放到了theme文件夹下面 y{u;_-ua3
同时以模板名称命名目录,目录下面包含images(放置图片)、template(放置htm模板以及style.css样式表)以及该模板的预览图片demo.png和该模板的信息文件info.txt JIei(s1
2、info.txt文件 W!Qo5M?
该文件格式很简单,如下 Q.JXkXdJ
name:模板名称 _~cN%bSysL
author:作者 ;H/Ih0]D
date:制作时间 $jn/72/}-
仅仅三行而已 [RXmeRv
3、demo.png CijWBFq
模板的缩略图,用来方便用户选择模板的时候,可以一眼看个大概 A)4L{gR
4、images目录 -yR8tD@i
放置该风格的所有图片 %CE{ 5:{H
5、template目录 FjgwRuGU6,
该风格模板的所有htm文件,以及style.css样式表 )OFPCt^oF
一个最完整的风格应该包含的文件如下 Z
}*If
blog.htm //各篇日志的模板页面 ^(R$t2VT
comment.htm //ajax无刷新评论模板(每个日志下面的评论,如果有评论,就是用这个模板) Y">yp#RbK
file.htm //文件的详细页面 (pK
(ttl
footer.htm //模板底部 Y09[Qh3O
goods.htm //商品的详细页面 hSJY"LA
header.htm//模板头部 /k'X|W+l
list_blog.htm //日志列表页面 q#kz_\
list_bookmark.htm //书签列表页面 2=\DmJJ0@=
list_file.htm //文件列表页面 /0h*tM|F
list_gbook.htm //游客留言列表页面 Pm[jVwr
list_goods.htm //商品列表页面 *MdXH
list_music.htm //音乐列表页面 Jsx=c G5
list_photo.htm //相册列表页面 `ZV*cE
list_team.htm //朋友圈列表页面 !Hq+%63i
main.htm //各个日志、相册、商品、音乐、文件的最外框架页面(只含最外层一个div标签) Ey*eTfP(
music.htm //音乐的详细页面 kpbt*W
%
photo.htm //相册的详细页面 D:7VQUE
side.htm //左侧竖栏的最外框架模板(一个div以及一个JavaScript) Nq 7LPS. h
side_archive.htm // 左侧竖栏存档列表模板文件 7{_iTBO~D
side_calendar.htm // 左侧竖栏日历模板文件 4?wU*b0!
side_comment.htm // 左侧竖栏评论模板文件 $YM`K
side_custom.htm // uss%$
`2
side_icon.htm // 左侧竖栏博主资料模板文件 ?.0=+
side_info.htm // 左侧竖栏个人统计模板文件 $>3#?7
side_lastvisit.htm // 左侧竖栏最近访问来客模板文件 P/P\}_
side_link.htm // 左侧竖栏友情链接模板文件 PGQ%Q#
side_notice.htm // 左侧竖栏博客公告模板文件 j/7.WSkj
side_player.htm // 左侧竖栏播放器模板文件 $92jS\S^H
side_search.htm // 左侧竖栏搜索框模板文件 %zpKIu
side_userclass.htm // -Y
A;M *
style.css //样式表文件 R1
^
若你使用的风格,缺少某个文件,系统将自动去theme\default\template里面读取(这就是为何要保证系统默认风格的完整性) IgyV 9w3
5、style.css文件分析 AP17zFc=91
先来一些css的基础知识,如果你做风格,这些是一定要知道的,如果再不懂,你就只能先去恶补一下了 a~h}iDwSf
选择符 ;/Ea2z$6m\
任何HTML元素都可以是一个CSS1的选择符。选择符仅仅是指向特别样式的元素。例如, _U%qFV9
[pre]P { text-indent: 3em }[/pre]当中的选择符是P。 +xS{Y!
类选择符 E\0G [
单一个选择符能有不同的CLASS(类),因而允许同一元素有不同样式。例如,一个网页制作者也许希望视其语言而定,用不同的颜色显示代码 : *i"8w7z*
code.html { color: #191970 } X$e7&L[c
code.css { color: #4b0082 } p3\0bP Fk
以上的例子建立了两个类,css和html,供HTML的CODE元素使用。CLASS属性是用于在HTML中以指明元素的类,例如, 5aAp
B"@
<P CLASS=warning>每个选择符只允许有一个类。例如,code.html.proprietary是无效的。</p>类的声明也可以无须相关的元素: +b[+_1
.note { font-size: small }在这个例子,名为note的类可以被用于任何元素。 Lw<e[I
一个良好的习惯是在命名类的时候,根据它们的功能而不是根据它们的外观。上述例子中的note类也可以命名为small,但如果网页制作者决定改变这个类的样式,使得它不再是小字体的话,那么这个名字就变得毫无意义了。 K|GoFF< |