“博客迷”（BlogMi）源码阅读[3]
正文输出文件index.php源码如下:
这个文件是网页输出模板.通过定义DIV然后用CSS样式表文件对内容进行输出.
1 <?php if (!isset($mc_config)) exit; ?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 6 <title><?php if (mc_is_post() || mc_is_page()) { mc_the_title(); ?> | <?php mc_site_name(); } else { mc_site_name(); ?> | <?php mc_site_desc(); }?></title>//输出博客标题 7 <link href="<?php mc_theme_url('style.css'); ?>" type="text/css" rel="stylesheet"/> 8 </head> 9 <body> 10 <div id="main"> 11 <div id="header"> 12 <div id="sitename"><a href="<?php mc_site_link(); ?>" title="<?php mc_site_desc(); ?>"><?php mc_site_name(); ?></a></div>//输出站点名称(带链接地址) 13 </div> 14 <div class="clear"></div> 15 <div id="side">//边栏 16 <div class="photo"><img src="<?php mc_theme_url('photo.jpg'); ?>"></div>//显示一个图片 17 <div class="about">好好学习,天天向上</div>//自定义的一些东西. 18 <div id="navbar"><a href="<?php mc_site_link(); ?>/" class="home" title="首页">首页</a><a href="<?php mc_site_link(); ?>/?archive/" class="archive" title="文章存档">文章存档</a><a href="<?php mc_site_link(); ?>/?contact/" class="contact" title="联系方式">联系方式</a><a href="<?php mc_site_link(); ?>/?rss/" class="rss" title="RSS订阅" target="_blank">RSS订阅</a></div> 19 <div class="clear"></div> 20 <div id="footer">Powered by <a href="http://haow.in/blogmi/" target="_blank">BlogMi</a></div>//边栏的脚部 21 </div> 22 <div id="content">//正文标记 23 <div id="content_box"> 24 <?php if (mc_is_post()) { ?> 25 <div class="post"> 26 <h1 class="title"><?php mc_the_link(); ?></h1>//输出文章标题 27 <div class="content"> 28 <?php mc_the_content(); ?>//输出文章正文 29 </div> 30 <div class="post_meta"> 31 <div class="post_date"><?php mc_the_date(); ?></div>//输出日期链接 32 <div class="post_tag"><?php mc_the_tags('','',''); ?></div>//输出标签链接 33 <div class="post_comm"><a href="<?php mc_post_link(); ?>#comm">评论</a></div>//输出评论链接 34 </div> 35 </div> 36 <?php if (mc_can_comment()) { ?> 37 <div id="comm"><?php mc_comment_code(); ?></div> 38 <?php } ?> 39 <?php } else if (mc_is_page()) { ?> 40 <div class="post"> 41 <h1 class="title"><?php mc_page_title(); ?></h1> 42 <div class="content"> 43 <?php mc_the_content(); ?> 44 </div> 45 </div> 46 <?php if (mc_can_comment()) { ?> 47 <div id="comm"><?php mc_comment_code(); ?></div> 48 <?php } ?> 49 <?php } else if (mc_is_archive()) { ?> 50 <div class="post"> 51 <h1 class="title">文章存档</h1> 52 <div class="content"> 53 <table width="280" border="0" align="center" cellpadding="0" cellspacing="0" style="margin:30px auto;"><tbody><tr><td width="140" style="vertical-align:top;"><h1 class="date_list">月份</h1><ul id="list"><?php mc_date_list(); ?></ul></td><td width="140" style="vertical-align:top;"><h1 class="tag_list">标签</h1><ul id="list"><?php mc_tag_list(); ?></ul></td></tr></tbody></table> 54 </div> 55 </div> 56 <?php } else { ?> 57 <?php if (mc_is_tag()) { ?> 58 <div id="page_info"><span><?php mc_tag_name(); ?></span></div> 59 <?php } else if (mc_is_date()) { ?> 60 <div id="page_info"><span><?php mc_date_name(); ?></span></div> 61 <?php } ?> 62 <?php while (mc_next_post()) { ?> 63 <div class="post"> 64 <h1 class="title"><?php mc_the_link(); ?></h1> 65 <div class="content"> 66 <?php mc_the_content(); ?> 67 </div> 68 <div class="post_meta"> 69 <div class="post_date"><?php mc_the_date(); ?></div> 70 <div class="post_tag"><?php mc_the_tags('','',''); ?></div> 71 <div class="post_comm"><a href="<?php mc_post_link(); ?>#comm">评论</a></div> 72 </div> 73 </div> 74 <?php } ?> 75 </div> 76 <div class="clear"></div> 77 <div id="page_bar"> 78 <?php if (mc_has_new()) { ?><?php mc_goto_new('«'); ?><?php } ?>//下一页 79 <?php if (mc_has_old()) { ?><?php mc_goto_old('»'); ?><?php } ?>//上一页 80 </div> 81 <?php } ?> 82 </div> 83 </div> 84 </body> 85 </html>
下面是CSS样式文件.源码如下:
1 * { 2 margin: 0; 3 padding: 0; 4 } 5 body { 6 font-family:"Microsoft YaHei", Arial; 7 font-size:16px; 8 background:#EAEAEC; 9 color:#333; 10 } 11 a { 12 color:#444; 13 text-decoration:none; 14 outline:none; 15 blr:expression(this.onFocus=this.blur()); 16 } 17 a:hover { 18 color:#111; 19 text-decoration:none; 20 } 21 p { 22 text-indent:2em; 23 line-height:34px; 24 padding:3px 0; 25 } 26 .clear { 27 clear:both; 28 } 29 img { 30 border:0; 31 } 32 h1 { 33 font-weight:normal; 34 font-size:22px; 35 color:#333; 36 } 37 ul, li { 38 list-style: none; 39 } 40 #main { 41 width:1446px; 42 margin:0 auto; 43 padding:24px 0; 44 } 45 #header { 46 margin: 0 0 30px 0; 47 } 48 #sitename { 49 font-size: 45px; 50 } 51 #side { 52 float: left; 53 width: 220px; 54 } 55 .photo { 56 background: #F6F6F6; 57 padding:20px; 58 border:1px solid #CCC; 59 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); 60 -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); 61 -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); 62 } 63 .photo img { 64 width: 180px; 65 height: 180px; 66 } 67 .about { 68 margin-top: 10px; 69 line-height:1.8; 70 overflow: hidden; 71 word-wrap: break-word; 72 } 73 #navbar { 74 width:175px; 75 margin:30px auto 0 auto; 76 } 77 #navbar a { 78 text-indent:-100em; 79 } 80 a.home { 81 width:49px; 82 height: 33px; 83 float: left; 84 background: url("nav_bg.gif") 0 0 no-repeat; 85 } 86 a.home:hover { 87 background-position:0 -52px; 88 } 89 a.archive { 90 width:42px; 91 height: 33px; 92 float: left; 93 background: url("nav_bg.gif") -92px 0px no-repeat; 94 } 95 a.archive:hover { 96 background-position:-92px -52px; 97 } 98 a.contact { 99 width:41px; 100 height: 33px; 101 float: left; 102 background: url("nav_bg.gif") -50px 0px no-repeat; 103 } 104 a.contact:hover { 105 background-position:-50px -52px; 106 } 107 a.rss { 108 width:43px; 109 height: 33px; 110 float: left; 111 background: url("nav_bg.gif") -134px 0px no-repeat; 112 } 113 a.rss:hover { 114 background-position:-134px -52px; 115 } 116 #page_info { 117 padding-top:10px; 118 margin:0 0 30px 0; 119 } 120 #page_info span { 121 font-size:16px; 122 line-height:24px; 123 color:#fff; 124 background:#333; 125 padding:4px 8px; 126 border-radius:8px; 127 } 128 #content { 129 float: left; 130 width: 860px; 131 padding:0 0 20px 0; 132 } 133 #content_box { 134 } 135 #content .post .title { 136 line-height:22px; 137 margin:0 -30px; 138 padding: 20px; 139 background: #E5E5E4; 140 } 141 .post_meta { 142 margin:0 -30px; 143 padding:10px 16px 10px 20px; 144 font-size:12px; 145 height:26px; 146 background: #E5E5E4; 147 color: #777; 148 line-height: 20px; 149 } 150 .post_meta a { 151 margin:2px 4px; 152 color: #777; 153 } 154 .post_meta a:hover { 155 margin:2px 4px; 156 color: #444; 157 } 158 .post_date { 159 float:left; 160 background: url(date.gif) no-repeat left; 161 padding: 1px 0 2px 22px; 162 font-family:Georgia, "Times New Roman", Times, serif; 163 font-size:14px; 164 margin-right: 30px; 165 } 166 .post_tag { 167 float:left; 168 background: url(tag.gif) no-repeat left; 169 padding: 4px 0 2px 19px; 170 } 171 .post_comm { 172 float:right; 173 background: url(comm.gif) no-repeat left; 174 padding: 4px 0 2px 18px; 175 } 176 #content .post .content { 177 padding:15px 0; 178 } 179 #content .post img { 180 max-width:498px; 181 width:expression(this.width > 498 ? "498px" : this.width); 182 overflow:hidden; 183 margin:0 0 5px -2em; 184 } 185 #content .post { 186 padding: 0px 30px 0px 30px; 187 margin: 0 0 40px 0; 188 background: #0000FF; 189 border:1px solid #CCC; 190 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); 191 -moz-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); 192 -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); 193 } 194 #content .tags { 195 padding-bottom:0; 196 } 197 .date_list { 198 float:left; 199 width:150px; 200 } 201 .tag_list { 202 float:left; 203 width:150px; 204 } 205 #list li, .date_list, .tag_list { 206 margin-bottom:8px; 207 } 208 #page_bar { 209 font-size: 40px; 210 text-align: center; 211 font-family: Georgia, serif; 212 font-style: italic; 213 } 214 #page_bar a { 215 padding:0 8px; 216 color:#FF0000; 217 } 218 #page_bar a:hover { 219 color:#00FF00; 220 } 221 #footer { 222 text-align:center; 223 margin:60px auto; 224 font-size:13px; 225 font-family:Georgia, "Times New Roman", Times, serif; 226 color:#CCC; 227 } 228 #footer a { 229 color:#BBB; 230 } 231 #footer a:hover { 232 color: #999; 233 }
至此一个网站的基本浏览功能完成.剩下的是后台管理部分.
用到的东西是:HTML,CSS,PHP.
