加载中…
个人资料
微博
  • 博客等级：
  • 博客积分：
  • 博客访问：
  • 关注人气：
  • 获赠金笔：0支
  • 赠出金笔：0支
  • 荣誉徽章：
正文 字体大小：大 中 小

新浪模板终极DIY（基础篇）

(2006-11-22 09:28:14)
要想做到模板的终极DIY就必须破解新浪的CSS文件，这个我已经在新浪的热身篇作了一个简单的描述。今天冰河就简单得介绍一下如何取得新浪的CSS文件。
首先需要查看一下博客的源文件。如何查看参考相关文章：如何查看别人博客源代码  博客技术——运用软件偷代码 
 
就拿我的实验博客为例，看看博客首页的源文件我们可以获取什么样的信息。
截取部分有用的源代码如下：
<link rel="Stylesheet" type="text/css" media="all" href="http://image2.sina.com.cn/blog/tmpl/v3/theme/css/ubb.css"><link rel="Stylesheet" type="text/css" media="all" href="http://image2.sina.com.cn/blog/tmpl/v3/theme/css/5.css"><link rel="Stylesheet" type="text/css" media="all" href="http://image2.sina.com.cn/blog/tmpl/v3/theme/5/css/feeds.css"> script language="javascript" type="text/javascript">var sModule = {};
       var sDiy = "calendar:1,photo:1,bannar:1,menu:1,box_1:1,box_2:1,bg:1,music:1".split(',');
       for(key in sDiy){
        aK = sDiy[key].split(':');
        sModule[aK[0]] = aK[1];
       }
       var sPhoto = sModule['photo'];
       var sBanner = sModule['bannar'];
       var sMenu = sModule['menu'];
       var sBox_1 = sModule['box_1'];
       var sBox_2 = sModule['box_2'];
       var sMusic = sModule['music']?sModule['music']:1;
       var sBg = sModule['bg'];
       var sCalendar = iCalendarMax == 0 ? sCalendar : iCalendar==0?THEME+"/"+sModule['calendar']:sModule['calendar'];
       sPhoto = iCalendarMax == 0 ? sModule['calendar'] : sPhoto ;
       var sRanCss1 = '<link rel="Stylesheet" type="text/css" href="http://image2.sina.com.cn/blog/tmpl/v3/cache/css/'+THEME+'_1/'+sPhoto+'/'+sBanner+'_'+sMenu+'.css" media="all">';
                            var sRanCss2 = '<link rel="Stylesheet" type="text/css" href="http://image2.sina.com.cn/blog/tmpl/v3/cache/css/'+THEME+'_2/'+sBox_1+'/'+sBox_2+'_'+sBg+'.css" media="all">';
       document.write(sRanCss1 + sRanCss2);</script>

具体代码说明：1.

http://image2.sina.com.cn/blog/tmpl/v3/theme/css/ubb.css （这是ubb的css文件大家可以不用管它）

http://image2.sina.com.cn/blog/tmpl/v3/theme/css/5.css（这是我们模板的公用部分，很多的文件属性就在这里面）

2.

http://image2.sina.com.cn/blog/tmpl/v3/cache/css/'+THEME+'_1/'+sPhoto+'/'+sBanner+'_'+sMenu+'.css

http://image2.sina.com.cn/blog/tmpl/v3/cache/css/'+THEME+'_2/'+sBox_1+'/'+sBox_2+'_'+sBg+'.css

其中对css文件中代码赋值如下：
var THEME = '2';
calendar:1,photo:1,bannar:1,menu:1,box_1:1,box_2:1,bg:1,music:1（模板不同赋值也不一样） 赋值都可以在源代码中找到，相应的替换即可.

这是我的实验模板css文件（模板不同，但属性都是一样的）

博客首页css文件：
http://image2.sina.com.cn/blog/tmpl/v3/theme/css/ubb.css
http://image2.sina.com.cn/blog/tmpl/v3/theme/css/5.css
http://image2.sina.com.cn/blog/tmpl/v3/theme/5/css/feeds.css
发表评论CSS文件：
http://image2.sina.com.cn/blog/tmpl/v3/theme/5/css/article.css
http://image2.sina.com.cn/blog/tmpl/v3/theme/5/css/comment.css
给我留言CSS文件：
http://image2.sina.com.cn/blog/tmpl/v3/theme/5/css/gbook.css
我的相册CSS文件：
http://image2.sina.com.cn/blog/tmpl/v3/theme/album/css/5.css

 

 

 

 

喜欢

0

阅读┊ 收藏 ┊ 喜欢▼ ┊打印┊举报/Report
  

新浪BLOG意见反馈留言板　欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

Copyright © 1996 - 2022 SINA Corporation, All Rights Reserved

新浪公司 版权所有