很有感觉的PJBlog皮肤『Stop Beating』

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

皮肤名称：Stop Beating

适用版本：PJBlog3_v3.0.6.170（要修改源码），PJBlog2&3

适用模式：全静态，半静态，全动态（完成修改后请 初始化数据）

发布时间：2009-09-16

原皮肤地址：http://www.whenyourheartstopsbeating.com

移植作者：威言威语

截图预览：见下↓

使用说明：1、适应的分辨率：最佳：1024×768

2、适应的浏览器：IE6、IE7、FireFox、Opera、Maxthon、Safari 等

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

这个是界面是我很早之前看到的，从看到他就有一种冲动，想仿到PJBlog上面来。

第一次看到的时候有点没有想明白它是怎么样布局的，因为开始我保存图片的发现背景有2个部分组成，左边的橙色背景和右边的深绿色背景，我就想如何在一个层上面定义2个背景，而且是从中间向两边repeat展开。

然后就一直想PJBlog上面能否定义，Google也没有我想的定义2个背景的，没有研究起来，心里很不舒服。

开始也想过用一个很大的背景来类似的表现，但是现在的分辨率都很大，如果在做个超大的背景的话，加载就会很慢，影响博客的速度。

某一天再次打开http://www.whenyourheartstopsbeating.com，查看源代码，突然发现了什么，原来如此。

一直以来已经习惯了DIV+CSS，而忽略的表格的威力，而恰恰这里他用到了表格，将背景分为3个部分，左中右，然后分别定义。然后开始对PJ动手术了，也将PJ分为3个部分，然后CSS定义，成功了，我很是开心。

接下来就相当的迅捷了，这套皮肤意境还是很不错了，适合一些写心情的博主使用。为了达到高仿的目的，修改的小日历，搜索样式，保持与原来的类似，底部的黑色板块我用来放置了版权信息。

下面讲解使用方法：

第一、修改header.asp和footer.asp。

打开header.asp，找到

<a href="javascript:history.go(-1)" accesskey="z"></a>

在其后面添加

<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td id="weisayleft">&nbsp;</td>
<td id="weisaycenter">

打开footer.asp，找到 在其前面加上

</td>
<td id="weisayright">&nbsp;</td>
</tr>
</table>

如果你用的全静态，下面还需要做一步（全动态和半静态不用做），就是打开Template文件夹下的static.htm。

找到

<a href="javascript:history.go(-1)" accesskey="z"></a>

在其后面添加

<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td id="weisayleft">&nbsp;</td>
<td id="weisaycenter">

找到 在其前面加上

</td>
<td id="weisayright">&nbsp;</td>
</tr>
</table>

第二、搜索框的修改，并将其设置到侧边第一个。

侧栏新建一模块（不要设置模块名称，只填标识），编辑模块插入一下代码

<div id="search">
            <form  id="searchform"  action="search.asp">
                <input type="text" value="威言威语..." name="SearchContent" id="s" onfocus="if(this.value=='威言威语...')this.value=''" onblur="if(this.value=='')this.value='威言威语...'" />
                <input type="submit" id="searchsubmit" value="" />
            </form>
        </div>

第三、目录的设置，由于这套皮肤没有设置顶部导航栏，所以必须将侧边栏的目录导航往上面调整，设置到侧边栏的第二个（如果第一个不修改的话，设置到第一个），并取消首页独享。

第四、小日历的修改，修改好了要重新生成数据库，我的小日历是在v300上修改的，当然了，PJBlog3_v3.0.6.170也是可以修改的。实现了全动态，半静态，全静态。

1、修改common/funciton.asp。找到

    Case "ym"
    DateToStr=Right(Year(DateTime),2)&DateMonth

在下面加上

    Case "m"
    DateToStr=Shortmonth(DateMonth-1)

2、使用全动态模式下，修改class/cls_default.asp和class/cls_article.asp。

在class/cls_default.asp里找到

<div class="ContentLeft"></div>

替换成

<DIV class=indexdata><div class="ContentLeft"><p class="monthB"><%=DateToStr(webLogArr(4,PageCount),"m")%></p><p class="dateA"><%=DateToStr(webLogArr(4,PageCount),"d")%></p>  </div></div>

在class/cls_article.asp里找到

<div class="ContentLeft"></div>

替换成

<DIV class=indexdata><div class="ContentLeft"><p class="monthB"><%=DateToStr(log_ViewArr(9,0),"m")%></p><p class="dateA"><%=DateToStr(log_ViewArr(9,0),"d")%></p> </div></div>

3、使用半静态模式，修改class/cls_logAction.asp、Template/ArticleList.asp和Template/Article.asp。

在class/cls_logAction.asp找到

Temp1 = Replace(Temp1, "<$log_PostTime$>", DateToStr(log_View("log_PostTime"), "Y-m-d"))

注意，有两处，改第一处，在下面加上

    Temp1 = Replace(Temp1, "<$log_PostTime_1$>", DateToStr(log_View("log_PostTime"), "m"))
    Temp1 = Replace(Temp1, "<$log_PostTime_2$>", DateToStr(log_View("log_PostTime"), "d"))

找到

Temp2 = Replace(Temp2, "<$log_PostTime$>", DateToStr(log_View("log_PostTime"), "Y-m-d"))

在下面加上

    Temp2 = Replace(Temp2, "<$log_PostTime_1$>", DateToStr(log_View("log_PostTime"), "m"))
    Temp2 = Replace(Temp2, "<$log_PostTime_2$>", DateToStr(log_View("log_PostTime"), "d"))

在Template/ArticleList.asp找到

<div class="ContentLeft"></div>

注意，有两处，都替换成

<DIV class=indexdata><div class="ContentLeft"><p class="monthB"><$log_PostTime_1$></p><p class="dateA"><$log_PostTime_2$></p> </div></div>

在Template/Article.asp找到

<div class="ContentLeft"></div>

替换成

<DIV class=indexdata><div class="ContentLeft"><p class="monthB"><$log_PostTime_1$></p><p class="dateA"><$log_PostTime_2$></p> </div></div>

4、全静态模式下修改跟半静态模式相似，修改class/cls_logAction.asp、Template/ArticleList.asp和Template/static.htm。

在class/cls_logAction.asp找到

Temp1 = Replace(Temp1, "<$log_PostTime$>", DateToStr(log_View("log_PostTime"), "Y-m-d"))

注意，有两处，改第二处，在下面加上

    Temp1 = Replace(Temp1, "<$log_PostTime_1$>", DateToStr(log_View("log_PostTime"), "m"))
    Temp1 = Replace(Temp1, "<$log_PostTime_2$>", DateToStr(log_View("log_PostTime"), "d"))

找到

    Temp2 = Replace(Temp2, "<$log_PostTime$>", DateToStr(log_View("log_PostTime"), "Y-m-d"))

在下面加上

    Temp2 = Replace(Temp2, "<$log_PostTime_1$>", DateToStr(log_View("log_PostTime"), "m"))
    Temp2 = Replace(Temp2, "<$log_PostTime_2$>", DateToStr(log_View("log_PostTime"), "d"))

分别在Template/ArticleList.asp和Template/static.htm中找到

<div class="ContentLeft"></div>

替换成

<DIV class=indexdata><div class="ContentLeft"><p class="monthB"><$log_PostTime_1$></p><p class="dateA"><$log_PostTime_2$></p> </div></div>

我现在用的v300修改版，半静态。我的小日历也是按照上面修改来了，你可以试试。

当然了，想用这套皮肤话，有些人不希望修改那么多，第一步，第三步必须修改。第二步和第四步可以改可以不改。

下载：