Skip to content

S
solo
Commit dac981e6 authored by Van's avatar Van
Browse files
Options

metro skin

parent cccda10f
Show whitespace changes
Inline Side-by-side
Showing with 586 additions and 265 deletions
war/src/main/webapp/js/common.js
View file @ dac981e6
...@@ -29,17 +29,16 @@ var Util = { ...@@ -29,17 +29,16 @@ var Util = {
/** /**
* @description 检测页面错误 * @description 检测页面错误
*/ */
error: function () { error: function() {
$("#tipMsg").text("Error: " + arguments[0] + $("#tipMsg").text("Error: " + arguments[0] +
" File: " + arguments[1] + "\nLine: " + arguments[2] + " File: " + arguments[1] + "\nLine: " + arguments[2] +
" please report this issue on https://github.com/b3log/b3log-solo/issues/new"); " please report this issue on https://github.com/b3log/b3log-solo/issues/new");
$("#loadMsg").text(""); $("#loadMsg").text("");
}, },
/** /**
* @description 非 IE6/7 的浏览器，跳转到 kill-browser 页面 * @description 非 IE6/7 的浏览器，跳转到 kill-browser 页面
*/ */
killIE: function () { killIE: function() {
if ($.browser.msie) { if ($.browser.msie) {
// kill IE6 and IE7 // kill IE6 and IE7
if ($.browser.version === "6.0" || $.browser.version === "7.0") { if ($.browser.version === "6.0" || $.browser.version === "7.0") {
...@@ -50,7 +49,7 @@ var Util = { ...@@ -50,7 +49,7 @@ var Util = {
// 后台页面 kill 360 // 后台页面 kill 360
if (window.external && window.external.twGetRunPath) { if (window.external && window.external.twGetRunPath) {
var path = external.twGetRunPath(); var path = external.twGetRunPath();
if(path && path.toLowerCase().indexOf("360se") > -1 && if (path && path.toLowerCase().indexOf("360se") > -1 &&
window.location.href.indexOf("admin-index") > -1) { window.location.href.indexOf("admin-index") > -1) {
window.location = latkeConfig.servePath + "/kill-browser.html"; window.location = latkeConfig.servePath + "/kill-browser.html";
return; return;
...@@ -58,13 +57,12 @@ var Util = { ...@@ -58,13 +57,12 @@ var Util = {
} }
} }
}, },
/** /**
* @description 替换[emXX] 为图片 * @description 替换[emXX] 为图片
* @param {String} str 替换字符串 * @param {String} str 替换字符串
* @returns {String} 替换后的字符 * @returns {String} 替换后的字符
*/ */
replaceEmString: function (str) { replaceEmString: function(str) {
var commentSplited = str.split("[em"); var commentSplited = str.split("[em");
if (commentSplited.length === 1) { if (commentSplited.length === 1) {
return str; return str;
...@@ -80,54 +78,50 @@ var Util = { ...@@ -80,54 +78,50 @@ var Util = {
} }
return str; return str;
}, },
/** /**
* @description URL 没有协议头，则自动加上 http:// * @description URL 没有协议头，则自动加上 http://
* @param {String} url URL 地址 * @param {String} url URL 地址
* @returns {String} 添加后的URL * @returns {String} 添加后的URL
*/ */
proessURL: function (url) { proessURL: function(url) {
if (!/^\w+:\/\//.test(url)) { if (!/^\w+:\/\//.test(url)) {
url = "http://" + url; url = "http://" + url;
} }
return url; return url;
}, },
/** /**
* @description 切换到手机版 * @description 切换到手机版
* @param {String} skin 切换前的皮肤名称 * @param {String} skin 切换前的皮肤名称
*/ */
switchMobile: function (skin) { switchMobile: function(skin) {
Cookie.createCookie("btouch_switch_toggle", skin, 365); Cookie.createCookie("btouch_switch_toggle", skin, 365);
setTimeout(function () { setTimeout(function() {
location.reload(); location.reload();
}, 1250); }, 1250);
}, },
/** /**
* @description topbar 相关事件 * @description topbar 相关事件
*/ */
setTopBar: function () { setTopBar: function() {
var $top = $("#top"); var $top = $("#top");
if ($top.length === 1) { if ($top.length === 1) {
var $showTop = $("#showTop"); var $showTop = $("#showTop");
$showTop.click(function () { $showTop.click(function() {
$top.slideDown(); $top.slideDown();
$showTop.hide(); $showTop.hide();
}); });
$("#hideTop").click(function () { $("#hideTop").click(function() {
$top.slideUp(); $top.slideUp();
$showTop.show(); $showTop.show();
}); });
} }
}, },
/** /**
* @description 回到顶部 * @description 回到顶部
*/ */
goTop: function () { goTop: function() {
var acceleration = acceleration || 0.1; var acceleration = acceleration || 0.1;
var y = $(window).scrollTop(); var y = $(window).scrollTop();
...@@ -139,30 +133,27 @@ var Util = { ...@@ -139,30 +133,27 @@ var Util = {
window.setTimeout(invokeFunction, 16); window.setTimeout(invokeFunction, 16);
} }
}, },
/** /**
* @description 回到底部 * @description 回到底部
*/ */
goBottom: function (bottom) { goBottom: function(bottom) {
if (!bottom) { if (!bottom) {
bottom = 0; bottom = 0;
} }
window.scrollTo(0, $("body").height() - $(window).height() - bottom); window.scrollTo(0, $("body").height() - $(window).height() - bottom);
}, },
/** /**
* @description 页面初始化执行的函数 * @description 页面初始化执行的函数
*/ */
init: function () { init: function() {
//window.onerror = Util.error; //window.onerror = Util.error;
Util.killIE(); Util.killIE();
Util.setTopBar(); Util.setTopBar();
}, },
/** /**
* @description topbar 清除缓存按钮事件 * @description topbar 清除缓存按钮事件
*/ */
clearCache: function (all) { clearCache: function(all) {
var data = ''; var data = '';
if (all === "all") { if (all === "all") {
data = '{"all": "all", "URI": ""}'; data = '{"all": "all", "URI": ""}';
...@@ -176,28 +167,26 @@ var Util = { ...@@ -176,28 +167,26 @@ var Util = {
cache: false, cache: false,
contentType: "application/json", contentType: "application/json",
data: data, data: data,
success: function(result){ success: function(result) {
window.location.reload(); window.location.reload();
} }
}); });
}, },
/** /**
* @description 替换侧边栏表情为图片 * @description 替换侧边栏表情为图片
* @param {Dom} comments 评论内容元素 * @param {Dom} comments 评论内容元素
*/ */
replaceSideEm: function (comments) { replaceSideEm: function(comments) {
for (var i = 0; i < comments.length; i++) { for (var i = 0; i < comments.length; i++) {
var $comment = $(comments[i]); var $comment = $(comments[i]);
$comment.html(Util.replaceEmString($comment.html())); $comment.html(Util.replaceEmString($comment.html()));
} }
}, },
/** /**
* @description 根据 tags，穿件云效果 * @description 根据 tags，穿件云效果
* @param {String} [id] tags 根元素 id，默认为 tags * @param {String} [id] tags 根元素 id，默认为 tags
*/ */
buildTags: function (id) { buildTags: function(id) {
id = id || "tags"; id = id || "tags";
// 根据引用次数添加样式，产生云效果 // 根据引用次数添加样式，产生云效果
...@@ -225,35 +214,47 @@ var Util = { ...@@ -225,35 +214,47 @@ var Util = {
return valA.localeCompare(valB); return valA.localeCompare(valB);
})); }));
}, },
/** /**
* @description 时间戳转化为时间格式 * @description 时间戳转化为时间格式
* @param {String} time 时间 * @param {String} time 时间
* @param {String} format 格式化后日期格式 * @param {String} format 格式化后日期格式
* @returns {String} 格式化后的时间 * @returns {String} 格式化后的时间
*/ */
toDate: function (time, format) { toDate: function(time, format) {
var dateTime = new Date(time); var dateTime = new Date(time);
var o = { var o = {
"M+" : dateTime.getMonth()+1, //month "M+": dateTime.getMonth() + 1, //month
"d+" : dateTime.getDate(), //day "d+": dateTime.getDate(), //day
"H+" : dateTime.getHours(), //hour "H+": dateTime.getHours(), //hour
"m+" : dateTime.getMinutes(), //minute "m+": dateTime.getMinutes(), //minute
"s+" : dateTime.getSeconds(), //second "s+": dateTime.getSeconds(), //second
"q+" : Math.floor((dateTime.getMonth()+3)/3), //quarter "q+": Math.floor((dateTime.getMonth() + 3) / 3), //quarter
"S" : dateTime.getMilliseconds() //millisecond "S": dateTime.getMilliseconds() //millisecond
} }
if(/(y+)/.test(format)) { if (/(y+)/.test(format)) {
format = format.replace(RegExp.$1, (dateTime.getFullYear()+"").substr(4 - RegExp.$1.length)); format = format.replace(RegExp.$1, (dateTime.getFullYear() + "").substr(4 - RegExp.$1.length));
} }
for(var k in o) { for (var k in o) {
if(new RegExp("("+ k +")").test(format)) { if (new RegExp("(" + k + ")").test(format)) {
format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length)); format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
} }
} }
return format; return format;
},
/**
* @description 获取窗口高度
* @returns {Inter} 窗口高度
*/
getWinHeight: function() {
if (window.innerHeight) {
return window.innerHeight;
}
if (document.compatMode === "CSS1Compat") {
return window.document.documentElement.clientHeight;
}
return window.document.body.clientHeight;
} }
}; };
...@@ -268,39 +269,39 @@ if (!Cookie) { ...@@ -268,39 +269,39 @@ if (!Cookie) {
* @param {String} name cookie key * @param {String} name cookie key
* @returns {String} 对应 key 的值，如 key 不存在则返回 "" * @returns {String} 对应 key 的值，如 key 不存在则返回 ""
*/ */
readCookie: function (name) { readCookie: function(name) {
var nameEQ = name + "="; var nameEQ = name + "=";
var ca = document.cookie.split(';'); var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) { for (var i = 0; i < ca.length; i++) {
var c = ca[i]; var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length); while (c.charAt(0) == ' ')
if (c.indexOf(nameEQ) == 0) return decodeURIComponent(c.substring(nameEQ.length,c.length)); c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0)
return decodeURIComponent(c.substring(nameEQ.length, c.length));
} }
return ""; return "";
}, },
/** /**
* @description 清除 Cookie * @description 清除 Cookie
* @param {String} name 清除 key 为 name 的该条 Cookie * @param {String} name 清除 key 为 name 的该条 Cookie
*/ */
eraseCookie: function (name) { eraseCookie: function(name) {
this.createCookie(name,"",-1); this.createCookie(name, "", -1);
}, },
/** /**
* @description 创建 Cookie * @description 创建 Cookie
* @param {String} name 每条 Cookie 唯一的 key * @param {String} name 每条 Cookie 唯一的 key
* @param {String} value 每条 Cookie 对应的值，将被 UTF-8 编码 * @param {String} value 每条 Cookie 对应的值，将被 UTF-8 编码
* @param {Int} days Cookie 保存时间 * @param {Int} days Cookie 保存时间
*/ */
createCookie: function (name, value, days) { createCookie: function(name, value, days) {
var expires = ""; var expires = "";
if (days) { if (days) {
var date = new Date(); var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000)); date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires="+date.toGMTString(); expires = "; expires=" + date.toGMTString();
} }
document.cookie = name+"="+encodeURIComponent(value)+expires+"; path=/"; document.cookie = name + "=" + encodeURIComponent(value) + expires + "; path=/";
} }
}; };
} }
\ No newline at end of file
war/src/main/webapp/skins/metro-hot/archive-articles.ftl
View file @ dac981e6
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
<body> <body>
${topBarReplacement} ${topBarReplacement}
<div class="wrapper"> <div class="wrapper">
<div id="header">
<#include "header.ftl" /> <#include "header.ftl" />
<div class="sub-nav fn-clear"> <div class="sub-nav fn-clear">
<h2> <h2>
...@@ -21,6 +22,25 @@ ...@@ -21,6 +22,25 @@
${archiveDate.archiveDateYear} ${yearLabel} ${archiveDate.archiveDateMonth} ${monthLabel} (${archiveDate.archiveDatePublishedArticleCount}) ${archiveDate.archiveDateYear} ${yearLabel} ${archiveDate.archiveDateMonth} ${monthLabel} (${archiveDate.archiveDatePublishedArticleCount})
</#if> </#if>
</h2> </h2>
<#if 0 != paginationPageCount>
<div class="pagination">
<#if 1 != paginationPageNums?first>
<a id="previousPage" href="${servePath}${path}/${paginationPreviousPageNum}"
title="${previousPageLabel}"><</a>
</#if>
<#list paginationPageNums as paginationPageNum>
<#if paginationPageNum == paginationCurrentPageNum>
<span>${paginationPageNum}</span>
<#else>
<a href="${servePath}${path}/${paginationPageNum}">${paginationPageNum}</a>
</#if>
</#list>
<#if paginationPageNums?last != paginationPageCount>
<a id="nextPage" href="${servePath}${path}/${paginationNextPageNum}" title="${nextPagePabel}">></a>
</#if>
</div>
</#if>
</div>
</div> </div>
<div class="fn-clear"> <div class="fn-clear">
<div class="main"> <div class="main">
......
war/src/main/webapp/skins/metro-hot/archives.ftl
View file @ dac981e6
...@@ -11,10 +11,12 @@ ...@@ -11,10 +11,12 @@
<body> <body>
${topBarReplacement} ${topBarReplacement}
<div class="wrapper"> <div class="wrapper">
<div id="header">
<#include "header.ftl" /> <#include "header.ftl" />
<div class="sub-nav fn-clear"> <div class="sub-nav fn-clear">
<h2>${dateArticlesLabel}</h2> <h2>${dateArticlesLabel}</h2>
</div> </div>
</div>
<div class="fn-clear"> <div class="fn-clear">
<div class="main"> <div class="main">
<#if 0 != archiveDates?size> <#if 0 != archiveDates?size>
......
war/src/main/webapp/skins/metro-hot/article.ftl
View file @ dac981e6
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
<body> <body>
${topBarReplacement} ${topBarReplacement}
<div class="wrapper"> <div class="wrapper">
<div id="header">
<#include "header.ftl"> <#include "header.ftl">
<div class="article-header"> <div class="article-header">
<span class="article-date" data-ico="&#xe200;"> <span class="article-date" data-ico="&#xe200;">
...@@ -52,6 +53,7 @@ ...@@ -52,6 +53,7 @@
</a> </a>
</div> </div>
</div> </div>
</div>
<div class="fn-clear"> <div class="fn-clear">
<div class="main"> <div class="main">
<div class="article-body"> <div class="article-body">
......
war/src/main/webapp/skins/metro-hot/author-articles.ftl
View file @ dac981e6
...@@ -11,10 +11,12 @@ ...@@ -11,10 +11,12 @@
<body> <body>
${topBarReplacement} ${topBarReplacement}
<div class="wrapper"> <div class="wrapper">
<div id="header">
<#include "header.ftl" /> <#include "header.ftl" />
<div class="sub-nav fn-clear"> <div class="sub-nav fn-clear">
<h2>${author1Label}${authorName} </h2> <h2>${author1Label}${authorName} </h2>
</div> </div>
</div>
<div class="fn-clear"> <div class="fn-clear">
<div class="main"> <div class="main">
<#include "article-list.ftl"/> <#include "article-list.ftl"/>
......
war/src/main/webapp/skins/metro-hot/css/metro-hot.css
View file @ dac981e6
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
* skin metro-hot style * skin metro-hot style
* *
* @author <a href="mailto:LLY219@gmail.com">Liyuan Li</a> * @author <a href="mailto:LLY219@gmail.com">Liyuan Li</a>
* @version 1.0.0.7, Jul 11, 2013 * @version 1.0.0.9, Jul 24, 2013
*/ */
/* start base */ /* start base */
html { html {
...@@ -237,7 +237,7 @@ textarea { ...@@ -237,7 +237,7 @@ textarea {
/* start frame */ /* start frame */
.wrapper { .wrapper {
height: auto; height: auto;
margin: 35px auto 10px; margin: 30px auto 10px;
width: 1190px; width: 1190px;
} }
...@@ -458,14 +458,13 @@ textarea { ...@@ -458,14 +458,13 @@ textarea {
transition: all 0.8s; transition: all 0.8s;
} }
.article-abstract .fn-right > a:hover, .article-abstract .fn-right > a:hover {
.article-info > a:hover {
background-color: #FFF; background-color: #FFF;
color: #E61E1E; color: #E61E1E;
} }
.article-info > a:hover { .article-info > a:hover {
background-color: #E61E1E; background-color: #EA4040;
color: #FFF; color: #FFF;
} }
...@@ -525,7 +524,8 @@ textarea { ...@@ -525,7 +524,8 @@ textarea {
.side form input:focus, .side form input:focus,
.form input:focus, .form input:focus,
.form textarea:focus, .form textarea:focus,
.form button:hover { .form button:hover,
#dynamic .footer:hover {
outline: 3px solid #BABABA; outline: 3px solid #BABABA;
} }
...@@ -536,6 +536,10 @@ textarea { ...@@ -536,6 +536,10 @@ textarea {
width: 60px;; width: 60px;;
} }
.side-tile > .title {
line-height: 17px;
}
.side-tile > .text { .side-tile > .text {
font-size: 15px; font-size: 15px;
font-weight: bold; font-weight: bold;
...@@ -679,7 +683,7 @@ textarea { ...@@ -679,7 +683,7 @@ textarea {
.archives { .archives {
background-color: #323232; background-color: #323232;
padding: 10px; padding: 10px;
margin-bottom: 30px; margin: 5px 10px 30px 0;
} }
.archives li { .archives li {
...@@ -739,6 +743,7 @@ textarea { ...@@ -739,6 +743,7 @@ textarea {
.main > .article-body { .main > .article-body {
margin-right: 10px; margin-right: 10px;
margin-top: 20px;
} }
/* end article */ /* end article */
...@@ -826,3 +831,120 @@ textarea { ...@@ -826,3 +831,120 @@ textarea {
color: #CA1B1E; color: #CA1B1E;
} }
/* end comment */ /* end comment */
/* start dynamic */
#dynamic #comments {
background-color: #EA4040;
margin-top: 5px;
padding: 25px 15px 15px 25px;
}
#dynamic #comments .article-body {
width: 770px;
}
#dynamic .article-relative .text {
left: 110px;
}
#dynamic .footer {
margin: 20px 0 0;
float: left;
transition: all 0.3s ease-out 0s;
}
.most-comment,
.most-view {
height: 170px;
width: 535px;
margin: 100px 0;
}
.most-comment .text,
.most-view .text {
left: 115px;
line-height: 24px;
}
.most-comment .text a:hover,
.most-view .text a:hover {
text-decoration: underline;
}
.most-comment > span,
.most-view > span {
margin-top: 30px;
}
.most-comment .text span,
.most-view .text span {
color: #D1D2D1;
font-size: 13px;
font-weight: normal;
margin-left: 20px;
}
.most-view {
margin-left: 20px;
background-color: #2E8BCC;
}
.archives-tile,
.links-tile,
.tags-tile {
margin-left: 0;
width: 333px;
background-color: #008641;
margin-bottom: 20px;
position: static;
}
.tags-tile {
margin-left: 20px;
background-color: #339933;
}
.links-tile {
margin-left: 20px;
background-color: #7B4F9D;
}
.tags-tile span,
.links-tile span,
.archives-tile span {
display: block;
font-size: 60px;
text-align: center;
width: 60px;
}
.tags-tile .text,
.links-tile .text,
.archives-tile .text {
position: static;
width: 253px;
}
.tags-tile a,
.links-tile a,
.archives-tile a {
background-color: #EA4040;
color: #D1D2D1;
float: left;
font-size: 12px;
line-height: 20px;
margin: 6px 10px;
padding: 5px 10px;
transition: all 0.8s ease 0s;
white-space: nowrap;
}
.tags-tile a:hover,
.links-tile a:hover,
.archives-tile a:hover {
background-color: #FFF;
color: #EA4040;
}
/* end dynamic */
\ No newline at end of file
war/src/main/webapp/skins/metro-hot/dynamic.ftl
View file @ dac981e6
...@@ -9,100 +9,215 @@ ...@@ -9,100 +9,215 @@
</head> </head>
<body> <body>
${topBarReplacement} ${topBarReplacement}
<#include "header.ftl"> <div class="wrapper">
<div id="header">
<#include "header.ftl" />
<div class="article-header">
<h2>${blogSubtitle}</h2>
</div>
</div>
<div class="fn-clear" id="dynamic">
<div class="main"> <div class="main">
<div class="wrapper dynamic">
<div class="other-main">
<#if 0 != recentComments?size> <#if 0 != recentComments?size>
<div class="module side-comments"> <div id="comments">
<h3 class="ft-gray">${recentCommentsLabel}</h3>
<ul>
<#list recentComments as comment> <#list recentComments as comment>
<li> <#if comment_index < 6>
<img class='comment-header' <div id="${comment.oId}" class="fn-clear">
alt='${comment.commentName}' <img title="${comment.commentName}"
src='${comment.commentThumbnailURL}'/> alt="${comment.commentName}" src="${comment.commentThumbnailURL}"/>
<div class='comment-panel'> <div class="comment-main">
<span class="left"> <div class="fn-clear">
<#if "http://" == comment.commentURL> <#if "http://" == comment.commentURL>
${comment.commentName} <span>${comment.commentName}</span>
<#else> <#else>
<a target="_blank" href="${comment.commentURL}">${comment.commentName}</a> <a href="${comment.commentURL}" target="_blank">${comment.commentName}</a>
</#if> </#if>
</span> <div class="fn-right" data-ico="&#xe200;">
<div class="right ft-gray"> ${comment.commentDate?string("yy-MM-dd HH:mm")}
${comment.commentDate?string("yyyy-MM-dd HH:mm:ss")}
<a rel="nofollow" href="${servePath}${comment.commentSharpURL}">${viewLabel}</a>
</div> </div>
<span class="clear"></span>
<div class="article-body">
${comment.commentContent}
</div> </div>
<div class="article-body">${comment.commentContent}</div>
</div> </div>
<div class='clear'></div>
</li>
</#list>
</ul>
</div> </div>
</#if> </#if>
<#if 0 != mostUsedTags?size>
<div class="module side-tags">
<h3 class="ft-gray">${popTagsLabel}</h3>
<ul>
<#list mostUsedTags as tag>
<li>
<a rel="tag" href="${servePath}/tags/${tag.tagTitle?url('UTF-8')}"
title="${tag.tagTitle}(${tag.tagPublishedRefCount})">
<span>${tag.tagTitle}</span>
</a>
</li>
</#list> </#list>
</ul>
<div class="clear"></div>
</div> </div>
</#if> </#if>
<div class="clear"></div> </div>
<div class="side">
<form target="_blank" method="get" action="http://www.google.com/search">
<input placeholder="Search" id="search" type="text" name="q" /><span data-ico="&#x0067;"></span>
<input type="submit" name="btnG" value="" class="fn-none" />
<input type="hidden" name="oe" value="UTF-8" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="hidden" name="newwindow" value="0" />
<input type="hidden" name="sitesearch" value="${blogHost}" />
</form>
<#if "" != noticeBoard>
<div class="notice-board side-tile">
<span data-ico="&#xe1e9;"></span>
<div class="title">
${noticeBoard}
</div>
<div class="text">
${noticeBoardLabel}
</div>
</div>
</#if>
<a rel="alternate" href="${servePath}/blog-articles-feed.do" class="user side-tile">
<span data-ico="&#xe135;"></span>
<div class="text">
${atomLabel}
</div>
</a>
<div class="online-count side-tile">
<span data-ico="&#xe037;"></span>
<div class="text">
${viewCount1Label}
${statistic.statisticBlogViewCount}<br/>
${articleCount1Label}
${statistic.statisticPublishedBlogArticleCount}<br/>
${commentCount1Label}
${statistic.statisticPublishedBlogCommentCount}<br/>
</div>
</div>
<#include "copyright.ftl">
</div>
</div>
<div class="fn-clear">
<#if 0 != mostCommentArticles?size> <#if 0 != mostCommentArticles?size>
<div class="module side-most-comment"> <div class="side-tile most-comment">
<h3 class="ft-gray">${mostCommentArticlesLabel}</h3> <span data-ico="&#xe14e;"></span>
<div class="title">
${mostCommentArticlesLabel}
</div>
<div class="text">
<ul> <ul>
<#list mostCommentArticles as article> <#list mostCommentArticles as article>
<li> <li>
<a rel="nofollow" class="left" title="${article.articleTitle}" <a href="${servePath}${article.articlePermalink}" title="${article.articleTitle}" rel="nofollow">
href="${servePath}${article.articlePermalink}">
${article.articleTitle} ${article.articleTitle}
</a> </a>
<a rel="nofollow" class="ft-gray right" href="${servePath}${article.articlePermalink}#comments"> <span data-ico="&#xe14e;">
${article.articleCommentCount}&nbsp;&nbsp;${commentLabel} ${article.articleCommentCount}
</a> </span>
<span class="clear"></span>
</li> </li>
</#list> </#list>
</ul> </ul>
</div> </div>
</div>
</#if> </#if>
<#if 0 != mostViewCountArticles?size> <#if 0 != mostViewCountArticles?size>
<div class="module side-most-view"> <div class="side-tile most-view">
<h3 class="ft-gray">${mostViewCountArticlesLabel}</h3> <span data-ico="&#xe185;"></span>
<div class="title">
${mostViewCountArticlesLabel}
</div>
<div class="text">
<ul> <ul>
<#list mostViewCountArticles as article> <#list mostViewCountArticles as article>
<li> <li>
<a rel="nofollow" class="left" title="${article.articleTitle}" href="${servePath}${article.articlePermalink}"> <a href="${servePath}${article.articlePermalink}" title="${article.articleTitle}" rel="nofollow">
${article.articleTitle} ${article.articleTitle}
</a> </a>
<a rel="nofollow" class="ft-gray right" href="${servePath}${article.articlePermalink}"> <span data-ico="&#xe185;">
${article.articleViewCount}&nbsp;&nbsp;${viewLabel} ${article.articleViewCount}
</a> </span>
<span class="clear"></span>
</li> </li>
</#list> </#list>
</ul> </ul>
</div> </div>
</div>
</#if>
</div>
<div class="fn-clear">
<#if 0 != archiveDates?size>
<div class="side-tile archives-tile fn-clear">
<div class="fn-left">
<span data-ico="&#xe110;"></span>
<div class="title">
${dateArticlesLabel}
</div>
</div>
<div class="text fn-right">
<#list archiveDates as archiveDate>
<#if "en" == localeString?substring(0, 2)>
<a href="${servePath}/archives/${archiveDate.archiveDateYear}/${archiveDate.archiveDateMonth}"
title="${archiveDate.monthName} ${archiveDate.archiveDateYear}(${archiveDate.archiveDatePublishedArticleCount})">
${archiveDate.monthName} ${archiveDate.archiveDateYear}(${archiveDate.archiveDatePublishedArticleCount})</a>
<#else>
<a href="${servePath}/archives/${archiveDate.archiveDateYear}/${archiveDate.archiveDateMonth}"
title="${archiveDate.archiveDateYear} ${yearLabel} ${archiveDate.archiveDateMonth} ${monthLabel}(${archiveDate.archiveDatePublishedArticleCount})">
${archiveDate.archiveDateYear} ${yearLabel} ${archiveDate.archiveDateMonth} ${monthLabel}(${archiveDate.archiveDatePublishedArticleCount})</a>
</#if>
</#list>
</div>
</div>
</#if> </#if>
<div class="clear"></div>
<#if 0 != links?size>
<div class="side-tile links-tile fn-clear">
<div class="fn-left">
<span data-ico="&#xe14a;"></span>
<div class="title">
${linkLabel}
</div> </div>
</div> </div>
<div class="text fn-right">
<#list links as link>
<a rel="friend" href="${link.linkAddress}" title="${link.linkDescription}" target="_blank">
<img src="http://www.google.com/s2/u/0/favicons?domain=<#list link.linkAddress?split('/') as x><#if x_index=2>${x}<#break></#if></#list>" />
${link.linkTitle}
</a>
</#list>
</div>
</div>
</#if>
<#if 0 != mostUsedTags?size>
<div class="side-tile tags-tile fn-clear">
<div class="fn-left">
<span data-ico="&#x003b;"></span>
<div class="title">
${popTagsLabel}
</div>
</div>
<div class="text fn-right">
<#list mostUsedTags as tag>
<a rel="tag" href="${servePath}/tags/${tag.tagTitle?url('UTF-8')}"
title="${tag.tagTitle}(${tag.tagPublishedRefCount})">
${tag.tagTitle}
</a>
</#list>
</div>
</div>
</#if>
</div>
</div> </div>
<#include "footer.ftl"> <span id="goTop" onclick="Util.goTop()" data-ico="&#xe042;" class="side-tile"></span>
<#include "footer.ftl"/>
<script>
$("#comments .article-body").each(function() {
this.innerHTML = Util.replaceEmString($(this).html());
});
if ($(".side").height() < $(".main").height()) {
$(".main").height($(".side").height() - 5).css({
"overflow": "auto",
"margin-top": "5px"
});
$("#comments").css("margin-top", "0");
}
</script>
</body> </body>
</html> </html>
war/src/main/webapp/skins/metro-hot/index.ftl
View file @ dac981e6
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
<body> <body>
${topBarReplacement} ${topBarReplacement}
<div class="wrapper"> <div class="wrapper">
<div id="header">
<#include "header.ftl" /> <#include "header.ftl" />
<div class="sub-nav fn-clear"> <div class="sub-nav fn-clear">
<h2>${blogSubtitle}</h2> <h2>${blogSubtitle}</h2>
...@@ -34,6 +35,7 @@ ...@@ -34,6 +35,7 @@
</div> </div>
</#if> </#if>
</div> </div>
</div>
<div class="fn-clear"> <div class="fn-clear">
<div class="main"> <div class="main">
<#include "article-list.ftl"/> <#include "article-list.ftl"/>
......
war/src/main/webapp/skins/metro-hot/js/metro-hot.js
View file @ dac981e6
...@@ -18,30 +18,16 @@ ...@@ -18,30 +18,16 @@
* @fileoverview metro-hot js. * @fileoverview metro-hot js.
* *
* @author <a href="mailto:LLY219@gmail.com">Liyuan Li</a> * @author <a href="mailto:LLY219@gmail.com">Liyuan Li</a>
* @version 1.0.0.6, Jul 10, 2013 * @version 1.0.0.8, Jul 24, 2013
*/ */
var MetroHot = { var MetroHot = {
headerH: 240, headerH: $("#header").height() + 30 + ($("#header > div").get(1) ? 30 : 0),
responsiveType: "large", responsiveType: "large",
goTranslate: function() { goTranslate: function() {
window.open("http://translate.google.com/translate?sl=auto&tl=auto&u=" + location.href); window.open("http://translate.google.com/translate?sl=auto&tl=auto&u=" + location.href);
}, },
init: function() { init: function() {
// 登录与否的显示设置
var isLogin = $("#admin").data("login");
if (isLogin) {
$(".user .text").html($("#admin > span").text());
$(".login, .register, #login, #register, .logout, .settings").hide();
} else {
$(".login, .register, .user, .clear, .logout, .settings, #logout, #settings").hide();
}
// 侧边栏点击事件
$("#login, .login").attr("href", $("#admin > a").first().attr("href"));
// 当先用户在线数目
var onlineVisitorCnt = $("#top > span").first().text();
$(".online-count .text").append(onlineVisitorCnt.substr(1, onlineVisitorCnt.length));
// logout // logout
var logoutHref = ""; var logoutHref = "";
$("#admin a").each(function() { $("#admin a").each(function() {
...@@ -58,6 +44,42 @@ var MetroHot = { ...@@ -58,6 +44,42 @@ var MetroHot = {
window.location.href = latkeConfig.servePath; window.location.href = latkeConfig.servePath;
}); });
// 当先用户在线数目
var onlineVisitorCnt = $("#top > span").first().text();
$(".online-count .text").append(onlineVisitorCnt.substr(1, onlineVisitorCnt.length));
// 登录与否的显示设置
var isLogin = $("#admin").data("login");
if (isLogin) {
$(".user .text").html($("#admin > span").text());
$(".login, .register, #login, #register, .logout, .settings").hide();
} else {
$(".login, .register, .user, .clear, .logout, .settings, #logout, #settings").hide();
}
if ($("#dynamic").length === 1) {
// 滚动处理
$(window).scroll(function() {
var y = $(window).scrollTop();
if (y > MetroHot.headerH) {
$("#goTop").fadeIn("slow");
} else {
$("#goTop").hide();
}
}).click(function(event) {
if (event.target.className === "title" || event.target.parentElement.className === "title") {
return;
}
$(".navigation").slideUp();
});
$("body").css("min-height", "inherit");
return;
}
// 侧边栏点击事件
$("#login, .login").attr("href", $("#admin > a").first().attr("href"));
// 滚动处理 // 滚动处理
$(window).scroll(function() { $(window).scroll(function() {
var y = $(window).scrollTop(); var y = $(window).scrollTop();
...@@ -92,7 +114,7 @@ var MetroHot = { ...@@ -92,7 +114,7 @@ var MetroHot = {
$(".side > div").css("position", "static"); $(".side > div").css("position", "static");
} }
} else { } else {
if (y + window.innerHeight > $(".side > div").height() + MetroHot.headerH) { if (y + Util.getWinHeight() > $(".side > div").height() + MetroHot.headerH) {
$(".side > div").css({ $(".side > div").css({
"position": "fixed", "position": "fixed",
"top": "auto", "top": "auto",
......
war/src/main/webapp/skins/metro-hot/links.ftl
View file @ dac981e6
...@@ -11,10 +11,12 @@ ...@@ -11,10 +11,12 @@
<body> <body>
${topBarReplacement} ${topBarReplacement}
<div class="wrapper"> <div class="wrapper">
<div id="header">
<#include "header.ftl" /> <#include "header.ftl" />
<div class="sub-nav fn-clear"> <div class="sub-nav fn-clear">
<h2>${linkLabel}</h2> <h2>${linkLabel}</h2>
</div> </div>
</div>
<div class="fn-clear"> <div class="fn-clear">
<div class="main"> <div class="main">
<#if 0 != links?size> <#if 0 != links?size>
......
war/src/main/webapp/skins/metro-hot/macro-side.ftl
View file @ dac981e6
...@@ -150,11 +150,8 @@ ...@@ -150,11 +150,8 @@
<div class="user side-tile"> <div class="user side-tile">
<span> <span>
<img src="${gravatar}"/> <img src="<#if gravatar??>${gravatar}</#if>"/>
</span> </span>
<div class="fn-clear title">
${commentNameLabel}
</div>
<div class="text"></div> <div class="text"></div>
</div> </div>
......
war/src/main/webapp/skins/metro-hot/page.ftl
View file @ dac981e6
...@@ -12,7 +12,19 @@ ...@@ -12,7 +12,19 @@
<body> <body>
${topBarReplacement} ${topBarReplacement}
<div class="wrapper"> <div class="wrapper">
<div id="header">
<#include "header.ftl"> <#include "header.ftl">
<div class="article-header">
<h2>${blogSubtitle}</h2>
<div class="article-info">
<a rel="nofollow" data-ico="&#xe14e;" href="${servePath}${page.pagePermalink}#comments">
${page.pageCommentCount}
</a>
</div>
</div>
</div>
<div class="fn-clear"> <div class="fn-clear">
<div class="main"> <div class="main">
<div class="article-body"> <div class="article-body">
......
war/src/main/webapp/skins/metro-hot/tag-articles.ftl
View file @ dac981e6
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
<body> <body>
${topBarReplacement} ${topBarReplacement}
<div class="wrapper"> <div class="wrapper">
<div id="header">
<#include "header.ftl" /> <#include "header.ftl" />
<div class="sub-nav fn-clear"> <div class="sub-nav fn-clear">
<h2> <h2>
...@@ -20,6 +21,25 @@ ...@@ -20,6 +21,25 @@
(${tag.tagPublishedRefCount}) (${tag.tagPublishedRefCount})
</a> </a>
</h2> </h2>
<#if 0 != paginationPageCount>
<div class="pagination">
<#if 1 != paginationPageNums?first>
<a id="previousPage" href="${servePath}${path}/${paginationPreviousPageNum}"
title="${previousPageLabel}"><</a>
</#if>
<#list paginationPageNums as paginationPageNum>
<#if paginationPageNum == paginationCurrentPageNum>
<span>${paginationPageNum}</span>
<#else>
<a href="${servePath}${path}/${paginationPageNum}">${paginationPageNum}</a>
</#if>
</#list>
<#if paginationPageNums?last != paginationPageCount>
<a id="nextPage" href="${servePath}${path}/${paginationNextPageNum}" title="${nextPagePabel}">></a>
</#if>
</div>
</#if>
</div>
</div> </div>
<div class="fn-clear"> <div class="fn-clear">
<div class="main"> <div class="main">
......
war/src/main/webapp/skins/metro-hot/tags.ftl
View file @ dac981e6
...@@ -11,10 +11,12 @@ ...@@ -11,10 +11,12 @@
<body> <body>
${topBarReplacement} ${topBarReplacement}
<div class="wrapper"> <div class="wrapper">
<div id="header">
<#include "header.ftl" /> <#include "header.ftl" />
<div class="sub-nav fn-clear"> <div class="sub-nav fn-clear">
<h2>${allTagsLabel}</h2> <h2>${allTagsLabel}</h2>
</div> </div>
</div>
<div class="fn-clear"> <div class="fn-clear">
<div class="main"> <div class="main">
<ul id="tags" class="archives fn-clear"> <ul id="tags" class="archives fn-clear">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment