标签：
myblog的建立参照：
http://blog.csdn.net/qq20004604/article/details/52019904
本来打算今天写的轮播图，不过突然看到localStorage，一时兴起先搞这个了。下次再写轮播图吧
我将样式表分割为全局表和独立表；
l 在全局的样式里，是一些通用的样式，他们的特点是复用率高，例如设置隐藏效果的.displayNONE，他只有一条属性那就是display:none;加载全局样式时，样式表在head部分。
l 在独立的样式里，是一些当前页面专有的样式，其加载链接时放在jade的对应的模块里面进行加载。为了防止污染，将当前jade里的dom结点其尽量在同一个div下面，这个div主要用于使用后代样式选择器识别。
index.jade
extends layout
block content
link(rel='stylesheet', href='./stylesheets/index.css')
div.Blog-index
div.hero-unit
h1 #{index.title}
p #{index.description}
br
br
//修改以下部分
if(!user())
br
br
a.btn.btn-primary.btn-large(href="/login") #{index.login}
a.btn.btn-large(href="/reg") #{index.regNow}
else
textarea#textarea.uneditable-input
button#postBlog.btn.btn-large #{index.submit}
button#clearBlog.btn.btn-large #{index.emptyInput}
div#submitError.alert.alert-error.displayNONE.myalert
div#submitSuccess.alert.alert-success.displayNONE
div.row.content#content
div.span4
h2 烟雨江南说
p 当欲望没有了枷锁，就没有了向前的路
p 只有转左，或者向右
p 左边是地狱，右边也是地狱
div.span4
h2 烟雨江南说
p 那些都是极好极好的
p 可是我偏偏不喜欢
div.span4
h2 烟雨江南说
p 我不怕傻
p 只怕
p 遇不到
p 可以让我变傻的人
div.span4
h2 烟雨江南说
p 人在年轻的时候总会有些莫名的坚持，
p 并且以此感动着自己，
p 却时常会在不经意间让真正重要的东西从指间流走。
div.span4
h2 烟雨江南说
p 记忆真是一种奇怪的东西，
p 有时候会涤荡所有的苦难，只留下温情，
p 有时候却磨灭掉曾有的欢乐，唯剩下苍白和丑陋。
div.span4
h2 烟雨江南说
p 那存在的，都是幻影。
p 那永恒的，终将毁灭。
p 世界万物，缤纷色彩，都是被蒙蔽的人心罢了。
div.span4
h2 烟雨江南说
p 诸神以真相示人，而世人却视而不见
div.span4
h2 烟雨江南说
p 只有绵羊会向狮子要求平等，
p 而狮子们从来不会这样想。
div.span4
h2 烟雨江南说
p 愿迷途的旅人，从此得享安息。
p 因理想而不朽，因归返而救赎。
div#scrollToFoot 滚动到底部然后加载内容
layout.jade
doctype html
html
head
title #{layout.title}
link(rel='stylesheet', href='./stylesheets/bootstrap.min.css')
link(rel='stylesheet', href='./stylesheets/bootstrap-responsive.min.css')
link(rel='stylesheet', href='./stylesheets/global.css')
script(type="text/javascript",src='javascripts/jq.js')
script(type="text/javascript",src='javascripts/bootstrap.min.js')
script(type="text/javascript",src='javascripts/blog.js')
body
div.navbar.navbar-fixed-top
div.navbar-inner
div.container
a.btn.btn-navbar(data-toggle="collapse",data-target=".nav-collapse")
span.icon-bar
span.icon-bar
span.icon-bar
a.brand(href="/") #{layout.topTitle}
div.nav-collapse
ul.nav
li
a(href="/") #{layout.indexButton}
//以下是修改后的部分
if(user())
li
a(href="/logout") #{layout.logout}
else
li
a(href="/login") #{layout.login}
li
a(href="/reg") #{layout.reg}
li
a(href="/language") #{layout.language}
span.brand(style='float:right') #{layout.foot}
div#contrainer.container
- var ErrorAlert = err()
if(ErrorAlert)
div.alert.alert-error #{ErrorAlert}
block content
hr
fotter
p #{layout.foot}global.css
body {
padding-top: 60px;
padding-botom: 40px;
}
.displayNONE {
display: none;
}
fotter p {
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid #aaa;
font-size: 18px;
text-align: center;
}index.css
.Blog-index #textarea {
resize: none;
width: 300px;
height: 100px;
cursor: text;
}
.Blog-index #postBlog {
position: relative;
left: 20px;
vertical-align: top;
}
.Blog-index #clearBlog {
position: relative;
left: -90px;
top: 27px;
width: 110px;
height: 44px;
}
.Blog-index .myalert {
position: absolute;
}
.Blog-index #scrollToFoot {
border: 1px solid #ccc;
text-align: center;
font-size: 18px;
padding: 20px 0;
}
.Blog-index .row {
color: #555;
}
样式目前依然和之前保持一致
简单介绍localStorage：他类似cookie，用于存储数据。他的特点是：
①存储于本地，不发送到服务器；
②使用简单，localStorage.变量名 即可
③清除历史记录后被清空；
④浏览器关闭后依然存在。
⑤HTML5新增
因此，只需要更改前端代码即可。
修改blog.js
$(document).ready(function () {
//根据url，设置高亮
if (window.location.pathname === '/') {
$(".nav-collapse .nav li:first-child").addClass("active");
}
else if (window.location.pathname === '/login') {
$(".nav-collapse .nav li:nth-child(2)").addClass("active");
}
else if (window.location.pathname === '/reg') {
$(".nav-collapse .nav li:nth-child(3)").addClass("active");
}
//给原生的Date添加一个方法，传递的参数是格式
Date.prototype.Format = function (fmt) { //author: meizz
var obj = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"H+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt))
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var key in obj)
if (new RegExp("(" + key + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (obj[key]) : (("00" + obj[key]).substr(("" + obj[key]).length)));
return fmt; //返回值是格式化好之后的时间
}
var testLocalStorage = function () { //鉴别浏览器是否支持localStorage，如果支持则返回true
try {
return 'localStorage' in window && window['localStorage'] !== null;
} catch (e) {
return false;
}
}
if (testLocalStorage()) {
if (!localStorage.visits) {
localStorage.visits = 1;
} else {
localStorage.visits++;
}
$("fotter p")[0].innerHTML += "<br>在上次清除历史记录后，localStorage技术告诉我，你是第" + localStorage.visits + "次打开本页面。" + (localStorage.lastVisitTime ? ("你上次访问时间是：" +
localStorage.lastVisitTime) : (""));
localStorage.lastVisitTime = new Date().Format("yyyy-MM-dd HH:mm:ss");
}
})从零开始学_JavaScript_系列（27）——myblog的优化【1】样式表分离、localStorage
标签：
原文地址：http://blog.csdn.net/qq20004604/article/details/52167293
