秋思工作室

　　尽管秋思工作室的主题基本定型了，但一些细节地方，还有改进的空间。特别是页面顶部比较空荡、比较单调，总感觉缺少了点什么。无意中发现有些独立博客在顶部加了个实时时间显示，也尝试了一番，终于给秋思工作室也添加了时间代码。

　　开始的时候直接从网上搜索时间代码，贴到顶部模板，但是显示效果很差：时间字体与顶部导航字体不一致，排列方式不是现在大家看到的左右分别对齐排列。而且模板里代码一大堆，看着也很恶心。决定放弃这种不好的方式，直接调用js代码来显示实时时间。好吧，新一轮折腾正式开始。

　　首先制作js文件。代码如下，直接复制并制作js文件，文件名称可以是date，也是任意，再文件传到网站。我是放在主题文件中的STYLE文件夹的js文件夹中，这样以后网站迁移的时候就不用再折腾这个了。如果需要显示其它的文字效果，请修改代码红色部分的内容，年、月、日和星期的位置可以调整，注意引号不要丢掉了。说明：红色部分代码都换行了，因为文章页面无法一行正常显示，所以使用时注意取消换行。

var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new Array
("星期日","星期一","星期二","星期三","星期四","星期五","星期六")
var montharray=new Array
("01","02","03","04","05","06","07","08","09","10","11","12")
document.write("<li>欢迎光临秋思工作室！今天是"+year+"年"+montharray[month]+"月"+daym+"日 "+dayarray[day]+"</li>")

　　然后是修改主题中相关页面的模板。在模板文件中相应的位置添加显示时间的html代码，秋思工作室用的是Z-Blog，大家可参考。

<div id="divShowtime">
<h3>Showtime</h3>
<ul>
<script type="text/javascript" src="<#ZC_BLOG_HOST#>themes/Yahei/STYLE/js/date.js"></script>
</ul>
</div>

　　最后是修改主题中的CSS文件，添加相应的CSS属性来控制时间代码显示的效果。这个不好用语言描述，直接上代码供大家参考吧。建议修改CSS代码时使用IE11中的开发人员工具，这样可以一边修改一边预览，确认无误后，再修改主题文件中的CSS代码。别的不多说了，还是直接贴上代码供大家参考。

#divShowtime {
background:none repeat scroll 0 0 #F9F9F9;
float:left;
height:24px;
margin:0;
padding:0;
width:457px;
}

#divShowtime ul {
background:#F9F9F9;
width:457px;
margin:4px 0;
padding:0;
}

#divShowtime li {
float:left;
font-size:12px;
margin:0;
padding:0 6px;
color:#000FFF;
width:445px;
}

#divShowtime h3 {
display:none;
}