yexuejc/solo-skins
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

https://github.com/b3log/solo/issues/12737 article

Browse Source
This commit is contained in:
Van 2019-03-28 12:14:02 +08:00
parent e3d7be6f23
commit 59450e3218
No known key found for this signature in database
GPG Key ID: 7059B8783A78F16C
9 changed files with 524 additions and 292 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

221
Casper/article.ftl
View File

@ -26,29 +26,39 @@
<@head title="${article.articleTitle} - ${blogTitle}" description="${article.articleAbstract?html}"> <@head title="${article.articleTitle} - ${blogTitle}" description="${article.articleAbstract?html}">
<link rel="stylesheet" <link rel="stylesheet"
href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/> href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
<#if previousArticlePermalink??> <#if previousArticlePermalink??>
<link rel="prev" title="${previousArticleTitle}" href="${servePath}${previousArticlePermalink}"> <link rel="prev" title="${previousArticleTitle}" href="${servePath}${previousArticlePermalink}">
</#if> </#if>
<#if nextArticlePermalink??> <#if nextArticlePermalink??>
<link rel="next" title="${nextArticleTitle}" href="${servePath}${nextArticlePermalink}"> <link rel="next" title="${nextArticleTitle}" href="${servePath}${nextArticlePermalink}">
</#if> </#if>
</@head> </@head>
</head> </head>
<body> <body>
<#include "header.ftl"> <div class="pjax">
<div id="pjax">
<#if pjax><!---- pjax {#pjax} start ----></#if> <#if pjax><!---- pjax {#pjax} start ----></#if>
<div class="main post__main"> <#include "marcr-header.ftl">
<#if noticeBoard??> <@header type="article"></@header>
<div class="board"> <div class="article__top">
${noticeBoard} <div class="fn__clear">
<div class="title">${article.articleTitle}</div>
<#include "../../common-template/share.ftl">
</div> </div>
</#if> <progress class="article__progress"></progress>
<div class="wrapper content"> </div>
<article class="post"> <div class="article">
<header> <div class="ft__center">
<h1 class="post__title"> <div class="item__meta">
${article.articleTitle} <time>
${article.articleCreateDate?string("yyyy-MM-dd")}
</time>
/
<#list article.articleTags?split(",") as articleTag>
<a class="tag" rel="tag" href="${servePath}/tags/${articleTag?url('UTF-8')}">${articleTag}</a> &nbsp;
</#list>
</div>
<h2 class="item__title">
${article.articleTitle}
<#if article.articlePutTop> <#if article.articlePutTop>
<sup> <sup>
${topArticleLabel} ${topArticleLabel}
@ -59,177 +69,52 @@
${updatedLabel} ${updatedLabel}
</sup> </sup>
</#if> </#if>
</h1> </h2>
</header> </div>
<section class="vditor-reset"> <div class="item__cover" style="background-image: url(${article.articleImg1URL})"></div>
${article.articleContent} <section class="vditor-reset item__content wrapper">
${article.articleContent}
<#if "" != article.articleSign.signHTML?trim> <#if "" != article.articleSign.signHTML?trim>
<div> <div>
${article.articleSign.signHTML} ${article.articleSign.signHTML}
</div> </div>
</#if> </#if>
</section> </section>
<footer data-oid="${article.oId}" </div>
class="post__tags" <#if article?? && article.articleToC?? && article.articleToC?size &gt; 0>
data-tag="<#list article.articleTags?split(",") as articleTag>${articleTag}<#if articleTag_has_next>,</#if></#list>"> <div class="post__toc">
<#list article.articleTags?split(",") as articleTag> <#include "../../common-template/toc.ftl"/>
<a class="tag" rel="tag" href="${servePath}/tags/${articleTag?url('UTF-8')}"> </div>
${articleTag}</a> </#if>
</#list> <@comments commentList=articleComments article=article></@comments>
</footer> <div class="article__bottom">
<div class="post__share fn-clear"> <div class="wrapper">
<time class="ft-gray"> <div class="fn__flex">
${article.articleCreateDate?string("yyyy-MM-dd")} • <div class="item" id="externalRelevantArticles"></div>
</time> <div class="item" id="randomArticles"></div>
<a class="post__view" href="${servePath}${article.articlePermalink}"> <div class="item" id="relevantArticles"></div>
${article.articleViewCount} ${viewLabel}</a>
<div class="fn-right">
<span class="vditor-tooltipped vditor-tooltipped__n post__share-icon ft-green"
onclick="$('#comment').focus()"
aria-label="${commentLabel}">
<svg>
<use xlink:href="#icon-comment"></use>
</svg>
${article.articleCommentCount} &nbsp; &nbsp;
</span>
<span id="articleShare">
<span class="post__share-icon" data-type="wechat">
<svg><use xlink:href="#icon-wechat"></use></svg>
</span> &nbsp; &nbsp;
<span class="post__share-icon" data-type="weibo">
<svg><use xlink:href="#icon-weibo"></use></svg>
</span> &nbsp; &nbsp;
<span class="post__share-icon" data-type="twitter">
<svg><use xlink:href="#icon-twitter"></use></svg>
</span> &nbsp; &nbsp;
<span class="post__share-icon" data-type="qqz">
<svg><use xlink:href="#icon-qqz"></use></svg>
</span>
<span class="article__code"
data-title="${article.articleTitle}"
data-blogtitle="${blogTitle}"
data-url="${servePath}${article.articlePermalink}"
data-avatar="${article.authorThumbnailURL}"></span>
</span>
</div>
</div>
</article>
</div>
<div class="article__bottom">
<div class="wrapper">
<div class="fn-flex footer__tag">
<div class="fn-flex-1" id="externalRelevantArticles"></div>
<div class="fn-flex-1" id="relevantArticles"></div>
<div class="fn-flex-1" id="randomArticles"></div>
</div>
<@comments commentList=articleComments article=article></@comments>
</div> </div>
</div> </div>
<div class="article__toolbar">
<div class="wrapper">
<a class="post__view" href="${servePath}${article.articlePermalink}">
${article.articleViewCount} ${viewLabel}
</a>
<div class="fn-right">
<span class="vditor-tooltipped vditor-tooltipped__n post__share-icon ft-green"
onclick="$('#comment').focus()"
aria-label="${commentLabel}">
<svg>
<use xlink:href="#icon-comment"></use>
</svg>
${article.articleCommentCount} &nbsp; &nbsp;
</span>
<span id="articleBottomShare">
<span class="post__share-icon" data-type="wechat">
<svg><use xlink:href="#icon-wechat"></use></svg>
</span> &nbsp; &nbsp;
<span class="post__share-icon" data-type="weibo">
<svg><use xlink:href="#icon-weibo"></use></svg>
</span> &nbsp; &nbsp;
<span class="post__share-icon" data-type="twitter">
<svg><use xlink:href="#icon-twitter"></use></svg>
</span> &nbsp; &nbsp;
<span class="post__share-icon" data-type="qqz">
<svg><use xlink:href="#icon-qqz"></use></svg>
</span>
<span class="article__code"
data-title="${article.articleTitle}"
data-blogtitle="${blogTitle}"
data-url="${servePath}${article.articlePermalink}"
data-avatar="${article.authorThumbnailURL}"></span>
</span>
<#if nextArticlePermalink??>
<a href="${servePath}${nextArticlePermalink}" rel="next" class="article__next">
<span class="ft-12 ft-gray">${nextArticleLabel}</span> <br>
${nextArticleTitle}
</a>
</#if>
</div>
</div>
</div>
<div class="post__side">
<span class="vditor-tooltipped vditor-tooltipped__e post__share-icon ft-green"
onclick="$('#comment').focus()"
aria-label="${commentLabel}">
<span class="ft-gray">${article.articleCommentCount}</span>
<svg>
<use xlink:href="#icon-comment"></use>
</svg>
</span>
<div id="articleSideShare">
<span class="post__share-icon" data-type="wechat">
<svg><use xlink:href="#icon-wechat"></use></svg>
</span> &nbsp; &nbsp;
<span class="post__share-icon" data-type="weibo">
<svg><use xlink:href="#icon-weibo"></use></svg>
</span> &nbsp; &nbsp;
<span class="post__share-icon" data-type="twitter">
<svg><use xlink:href="#icon-twitter"></use></svg>
</span> &nbsp; &nbsp;
<span class="post__share-icon" data-type="qqz">
<svg><use xlink:href="#icon-qqz"></use></svg>
</span>
<span class="article__code"
data-title="${article.articleTitle}"
data-blogtitle="${blogTitle}"
data-url="${servePath}${article.articlePermalink}"
data-avatar="${article.authorThumbnailURL}"></span>
</div>
</div>
<div class="main">
<#include "bottom.ftl">
</div>
<#if article?? && article.articleToC?? && article.articleToC?size &gt; 0>
<#include "../../common-template/toc.ftl"/>
</#if>
</div> </div>
<#if pjax><!---- pjax {#pjax} end ----></#if> <#if pjax><!---- pjax {#pjax} end ----></#if>
</div> </div>
<#include "footer.ftl"> <#include "footer.ftl">
<script type="text/javascript" <script type="text/javascript" src="${staticServePath}/js/lib/jquery.qrcode.min.js"></script>
src="${staticServePath}/skins/${skinDirName}/js/jquery.qrcode${miniPostfix}.js"></script>
<#if pjax><!---- pjax {#pjax} start ----></#if> <#if pjax><!---- pjax {#pjax} start ----></#if>
<@comment_script oId=article.oId commentable=article.commentable> <@comment_script oId=article.oId commentable=article.commentable>
Skin.initArticle() Skin.initArticle()
Skin.initComment = function (articleOId, articleTags) { page.tips.externalRelevantArticlesDisplayCount = "${externalRelevantArticlesDisplayCount}";
page.tips.externalRelevantArticlesDisplayCount = "${externalRelevantArticlesDisplayCount}";
<#if 0 != randomArticlesDisplayCount> <#if 0 != randomArticlesDisplayCount>
page.loadRandomArticles("<div class='module__title'><span>${randomArticlesLabel}</span></div>"); page.loadRandomArticles('<h3>${randomArticlesLabel}</h3>');
</#if> </#if>
<#if 0 != externalRelevantArticlesDisplayCount> <#if 0 != externalRelevantArticlesDisplayCount>
page.loadExternalRelevantArticles(articleTags, "<div class='module__title'><span>${externalRelevantArticlesLabel}</span></div>"); page.loadExternalRelevantArticles("<#list article.articleTags?split(",") as articleTag>${articleTag}<#if articleTag_has_next>,</#if></#list>",
'<h3>${externalRelevantArticlesLabel}</h3>');
</#if> </#if>
<#if 0 != relevantArticlesDisplayCount> <#if 0 != relevantArticlesDisplayCount>
page.loadRelevantArticles(articleOId, '<div class="module__title"><span>${relevantArticlesLabel}</span></div>'); page.loadRelevantArticles('${article.oId}', '<h3>${relevantArticlesLabel}</h3>');
</#if> </#if>
}
Skin.initComment('${article.oId}', "<#list article.articleTags?split(",") as articleTag>${articleTag}<#if articleTag_has_next>,</#if></#list>")
</@comment_script> </@comment_script>
<#if pjax><!---- pjax {#pjax} end ----></#if> <#if pjax><!---- pjax {#pjax} end ----></#if>
${plugins}
</body> </body>
</html> </html>

60
Casper/common-comment.ftl
View File

@ -17,38 +17,34 @@
along with this program. If not, see <https://www.gnu.org/licenses/>. along with this program. If not, see <https://www.gnu.org/licenses/>.
--> -->
<div id="${comment.oId}" class="comment__item"> <li id="${comment.oId}" class="item">
<img class="comment__avatar" src="${comment.commentThumbnailURL}"/> <div class="fn__clear">
<main class="comment__body"> <div class="item__avatar" style="background-image: url(${comment.commentThumbnailURL})"></div>
<div class="fn-clear"> <div class="item__name">
<span class="comment__user"> <#if "http://" == comment.commentURL>
<#if "http://" == comment.commentURL> <span class="ft__fade">${comment.commentName}</span>
${comment.commentName} <#else>
<#else> <a class="ft__link" href="${comment.commentURL}" target="_blank">${comment.commentName}</a>
<a href="${comment.commentURL}" target="_blank">${comment.commentName}</a> </#if>
</#if>
</span>
<span class="ft-12">
<#if comment.isReply>
<a class="ft-gray" href="${servePath}${article.permalink}#${comment.commentOriginalCommentId}"
onmouseover="page.showComment(this, '${comment.commentOriginalCommentId}', 23);"
onmouseout="page.hideComment('${comment.commentOriginalCommentId}')">
<svg class="ft-gray"><use xlink:href="#icon-reply"></use></svg>
${reply1Label} ${comment.commentOriginalCommentName}
</a>
</#if>
<time class="ft-fade"> • ${comment.commentDate2?string("yyyy-MM-dd")}</time>
</span>
<#if comment.isReply>
<#if article.commentable> @ <a href="${servePath}${article.permalink}#${comment.commentOriginalCommentId}"
<a class="fn-right ft-green" href="javascript:page.toggleEditor('${comment.oId}', '${comment.commentName}')"> onmouseover="page.showComment(this, '${comment.commentOriginalCommentId}', 20);"
<svg><use xlink:href="#icon-reply"></use></svg> ${reply1Label} onmouseout="page.hideComment('${comment.commentOriginalCommentId}')"
</a> >${comment.commentOriginalCommentName}</a>
</#if> </#if>
</div> </div>
<div class="vditor-reset"> </div>
${comment.commentContent} <div class="vditor-reset">
</div> ${comment.commentContent}
</main> </div>
</div> <div class="item__meta fn__clear">
<time>
${comment.commentDate2?string["MMM d, yyyy"]}
</time>
<#if article?? && article.commentable>
<a class="fn__right fn__none item__reply"
href="javascript:page.toggleEditor('${comment.oId}', '${comment.commentName}')">Reply</a>
</#if>
</div>
</li>

2
Casper/css/base.css
View File

File diff suppressed because one or more lines are too long

330
Casper/css/base.scss
View File

@ -31,11 +31,22 @@
$fade-lighter: rgba(255, 255, 255, .8) !default; $fade-lighter: rgba(255, 255, 255, .8) !default;
$gray: #738a94 !default; $gray: #738a94 !default;
$black: #15171a !default; $black: #15171a !default;
$black-bg: #090a0b !default;
$link: #26a8ed !default;
body { body {
background-color: #f4f8fb; background-color: #f4f8fb;
} }
::selection {
text-shadow: none;
background-color: #cbeafb;
}
a {
color: $link;
}
.wrapper { .wrapper {
max-width: 1040px; max-width: 1040px;
margin: 0 auto; margin: 0 auto;
@ -57,6 +68,17 @@ body {
filter: brightness(38%); filter: brightness(38%);
} }
} }
&--article {
background-color: $black-bg;
height: 64px;
.header__title {
display: none;
}
.header__nav a {
margin-bottom: 0;
line-height: 64px;
}
}
&__title { &__title {
position: relative; position: relative;
text-align: center; text-align: center;
@ -113,7 +135,7 @@ body {
.footer { .footer {
font-size: 13px; font-size: 13px;
padding: 20px 0; padding: 20px 0;
background-color: #000; background-color: $black-bg;
color: #fff; color: #fff;
a { a {
color: $fade-lighter; color: $fade-lighter;
@ -141,7 +163,7 @@ body {
min-height: 300px; min-height: 300px;
border-radius: 5px; border-radius: 5px;
box-shadow: 8px 14px 38px rgba(39, 44, 49, .06), 1px 3px 8px rgba(39, 44, 49, .03); box-shadow: 8px 14px 38px rgba(39, 44, 49, .06), 1px 3px 8px rgba(39, 44, 49, .03);
transition: all .5s ease; transition: all .3s ease;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: #fff; background-color: #fff;
@ -259,7 +281,7 @@ body {
text-decoration: none; text-decoration: none;
} }
&--active { &--active {
background: #88acdb; background: $black-bg;
&:hover { &:hover {
opacity: 1; opacity: 1;
} }
@ -270,3 +292,305 @@ body {
} }
} }
} }
.article {
background-color: #fff;
&__bottom {
background-color: #fff;
position: relative;
.fn__flex {
margin: 0 -20px;
}
.item {
position: relative;
flex: 1;
margin: 40px 20px;
box-shadow: 8px 14px 38px rgba(39, 44, 49, .06), 1px 3px 8px rgba(39, 44, 49, .03);
border-radius: 5px;
padding: 40px;
overflow: hidden;
text-align: center;
&:before {
content: "";
position: absolute;
height: 100%;
top: 0;
left: 0;
width: 100%;
background: url(../images/header-bg.jpg) no-repeat center center;
background-size: cover;
filter: brightness(38%);
}
h3 {
color: #fff;
position: relative;
margin-bottom: 20px;
}
ul {
padding-left: 0;
position: relative;
list-style: none;
}
a {
display: block;
border-bottom: 1px solid rgba($gray, .8);
padding: 10px 0;
color: #fff;
margin: 0 20px;
}
}
}
&__top {
position: fixed;
width: 100%;
top: -60px;
background-color: rgba(255, 255, 255, 0.9);
border-bottom: 1px solid rgba($gray, 0.1);
height: 60px;
transition: all .3s ease;
z-index: 1;
.title {
float: left;
margin-left: 20px;
line-height: 60px;
font-size: 22px;
}
}
&__share {
float: right;
position: relative;
.item {
height: 60px;
width: 60px;
float: left;
text-align: center;
padding: 20px 0;
box-sizing: border-box;
color: #fdc200;
cursor: pointer;
transition: all .3s ease;
svg {
height: 20px;
width: 20px;
}
&[data-type="wechat"] {
color: #3caf36;
&:hover {
background-color: #3caf36;
}
}
&[data-type="twitter"] {
color: #18a3fa;
&:hover {
background-color: #18a3fa;
}
}
&[data-type="weibo"] {
color: #f93;
&:hover {
background-color: #f93;
}
}
&:hover {
color: #fff;
background-color: #fdc200;
}
&__qr {
position: absolute;
top: 61px;
left: 60px;
}
}
}
&__progress {
position: absolute;
right: 0;
bottom: -1px;
left: 0;
width: 100%;
height: 2px;
border: none;
background: transparent;
-webkit-appearance: none;
&::-webkit-progress-value {
background-color: $link;
}
&::-webkit-progress-bar {
background-color: transparent;
}
}
.item {
&__meta {
padding-top: 76px;
font-size: 14px;
text-transform: uppercase;
color: rgba($gray, .8);
a {
color: $gray;
}
}
&__title {
font-size: 28px;
margin-bottom: 40px;
sup {
font-size: 14px;
font-weight: normal;
color: rgba($gray, .8);
}
}
&__cover {
height: 800px;
background-size: cover;
}
&__content {
padding: 70px 100px 0;
box-sizing: border-box;
margin-top: -164px;
background-color: #fff;
}
&__tip {
margin-bottom: 40px;
border-radius: 5px;
box-shadow: 8px 14px 38px rgba(39, 44, 49, .06), 1px 3px 8px rgba(39, 44, 49, .03);
transition: all .3s ease;
padding: 20px 0;
text-align: center;
background: #f4f8fb;
cursor: pointer;
font-size: 18px;
&:hover {
box-shadow: 8px 28px 50px rgba(39, 44, 49, .07), 1px 6px 12px rgba(39, 44, 49, .04);
transform: translate3D(0, -1px, 0) scale(1.02);
}
}
}
}
.post__toc {
display: none;
position: fixed;
top: 64px;
bottom: 80px;
overflow: auto;
padding-left: 3px;
&::-webkit-scrollbar {
display: none;
}
.article__toc {
overflow: initial;
border-left: 1px solid rgba($gray, 0.28);
margin: 0;
font-size: 14px;
line-height: 24px;
li.current a,
a:hover {
color: $link;
}
a {
display: block;
margin-top: -24px;
color: $gray;
}
}
li {
&:before {
position: relative;
top: -2px;
left: -4px;
display: inline-block;
width: 7px;
height: 7px;
content: '';
border-radius: 50%;
}
&.current:before {
background-color: $link;
}
}
}
.comment {
background-color: #f4f8fb;
position: relative;
&__wrapper {
margin: 0 auto;
padding: 0 100px 0.1px;
box-sizing: border-box;
}
&-body-ref {
position: absolute;
left: 80px;
width: 76%;
}
&__title {
text-align: center;
padding: 40px 0;
color: $gray;
}
.item {
margin-bottom: 40px;
border: 1px solid $fade-lighter;
border-radius: 5px;
background: #fff;
box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
list-style: none;
padding: 20px;
&__meta {
color: rgba($gray, .8);
font-size: 12px;
}
&__avatar {
float: left;
height: 40px;
width: 40px;
border-radius: 20px;
border: 1px solid rgba(0, 0, 0, .04);
margin: 0 20px 20px 0;
background-size: cover;
background-position: center center;
}
&__name {
color: rgba($gray, .8);
float: left;
line-height: 40px;
a {
color: $gray;
&:hover {
color: rgba($gray, .8);
}
}
}
&:hover {
.item__reply {
display: block;
}
}
}
#comments {
position: relative;
}
#comment {
position: relative;
margin-bottom: 30px;
padding: 20px;
border-radius: 3px;
background: #fff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
border: 0;
resize: none;
cursor: pointer;
width: 100%;
box-sizing: border-box;
}
}

8
Casper/index.ftl
View File

@ -26,11 +26,13 @@
</@head> </@head>
</head> </head>
<body> <body>
<#include "marcr-header.ftl"> <div id="pjax">
<@header type='index'></@header>
<div id="pjax" class="wrapper">
<#if pjax><!---- pjax {#pjax} start ----></#if> <#if pjax><!---- pjax {#pjax} start ----></#if>
<#include "marcr-header.ftl">
<@header type='index'></@header>
<div class="wrapper">
<#include "article-list.ftl"> <#include "article-list.ftl">
</div>
<#if pjax><!---- pjax {#pjax} end ----></#if> <#if pjax><!---- pjax {#pjax} end ----></#if>
</div> </div>
<#include "footer.ftl"> <#include "footer.ftl">

165
Casper/js/common.js
View File

@ -42,25 +42,25 @@ var Skin = {
return return
} }
if ($(window).scrollTop() > 64) { if ($(window).scrollTop() > 64) {
$('#headerNav').addClass('header__nav--fixed'); $('#headerNav').addClass('header__nav--fixed')
$('.main').css('margin-top', '100px'); $('.main').css('margin-top', '100px')
} else { } else {
$('#headerNav').removeClass('header__nav--fixed'); $('#headerNav').removeClass('header__nav--fixed')
$('.main').css('margin-top', '50px'); $('.main').css('margin-top', '50px')
} }
}); })
$(window).scroll(); $(window).scroll()
Util.initPjax(function () { Util.initPjax(function () {
Util.parseMarkdown(); Util.parseMarkdown()
if (Util.isArticlePage(location.href)) { if (Util.isArticlePage(location.href)) {
if (!$('#articleSideShare .article__code').qrcode) { if (!$('#articleSideShare .article__code').qrcode) {
$.ajax({ $.ajax({
method: "GET", method: 'GET',
url: Label.staticServePath + '/js/lib/jquery.qrcode.min.js', url: Label.staticServePath + '/js/lib/jquery.qrcode.min.js',
dataType: "script", dataType: 'script',
cache: true cache: true,
}); })
} }
} }
Skin.initToc() Skin.initToc()
@ -68,37 +68,34 @@ var Skin = {
Skin.initToc() Skin.initToc()
}, },
initTags: function () { initTags: function () {
var $tags = $('#tags'); var $tags = $('#tags')
var tagsArray = $tags.find('.tag') var tagsArray = $tags.find('.tag')
// 根据引用次数添加样式，产生云效果 // 根据引用次数添加样式，产生云效果
var max = parseInt(tagsArray.first().data('count')); var max = parseInt(tagsArray.first().data('count'))
var distance = Math.ceil(max / 5); var distance = Math.ceil(max / 5)
for (var i = 0; i < tagsArray.length; i++) { for (var i = 0; i < tagsArray.length; i++) {
var count = parseInt($(tagsArray[i]).data('count')); var count = parseInt($(tagsArray[i]).data('count'))
// 算出当前 tag 数目所在的区间，加上 class // 算出当前 tag 数目所在的区间，加上 class
for (var j = 0; j < 5; j++) { for (var j = 0; j < 5; j++) {
if (count > j * distance && count <= (j + 1) * distance) { if (count > j * distance && count <= (j + 1) * distance) {
tagsArray[i].className = 'tag tag__level' + j; tagsArray[i].className = 'tag tag__level' + j
break; break
} }
} }
} }
// 按字母或者中文拼音进行排序 // 按字母或者中文拼音进行排序
$tags.html(tagsArray.get().sort(function (a, b) { $tags.html(tagsArray.get().sort(function (a, b) {
var valA = $(a).text().toLowerCase(); var valA = $(a).text().toLowerCase()
var valB = $(b).text().toLowerCase(); var valB = $(b).text().toLowerCase()
// 对中英文排序的处理 // 对中英文排序的处理
return valA.localeCompare(valB); return valA.localeCompare(valB)
})); }))
}, },
initArticle: function () { initArticle1111: function () {
if ($('#articleShare').length === 0) { if ($('#articleShare').length === 0) {
return return
} }
Skin._share('#articleShare')
Skin._share('#articleSideShare')
Skin._share('#articleBottomShare')
var $postSide = $('.post__side') var $postSide = $('.post__side')
if ($(window).height() >= $('.post').height()) { if ($(window).height() >= $('.post').height()) {
@ -121,10 +118,11 @@ var Skin = {
// up // up
$('.header').addClass('header--fixed').css({'top': '0'}) $('.header').addClass('header--fixed').css({'top': '0'})
$('.main').css('padding-top', '64px') $('.main').css('padding-top', '64px')
if ($(window).height() <= $('.post').height() && scrollTop < bottomTop - $(window).height()) { if ($(window).height() <= $('.post').height() && scrollTop <
bottomTop - $(window).height()) {
$('.article__toolbar').css({ $('.article__toolbar').css({
'bottom': 0, 'bottom': 0,
'opacity': 1 'opacity': 1,
}) })
} }
} else if (beforScrollTop - scrollTop < 0) { } else if (beforScrollTop - scrollTop < 0) {
@ -133,7 +131,7 @@ var Skin = {
$('.main').css('padding-top', '0') $('.main').css('padding-top', '0')
$('.article__toolbar').css({ $('.article__toolbar').css({
'bottom': '-44px', 'bottom': '-44px',
'opacity': 0 'opacity': 0,
}) })
} }
@ -150,18 +148,18 @@ var Skin = {
if (bottomTop < $(window).height()) { if (bottomTop < $(window).height()) {
$postSide.css({ $postSide.css({
'position': 'absolute', 'position': 'absolute',
'top': (bottomTop - 125) + 'px' 'top': (bottomTop - 125) + 'px',
}) })
} else { } else {
$postSide.css({ $postSide.css({
'position': 'absolute', 'position': 'absolute',
'top': (bottomTop - sideAbsoluteTop) + 'px' 'top': (bottomTop - sideAbsoluteTop) + 'px',
}) })
} }
} else { } else {
$postSide.css({ $postSide.css({
'position': 'fixed', 'position': 'fixed',
'top': '50%' 'top': '50%',
}) })
} }
@ -170,54 +168,75 @@ var Skin = {
$(window).scroll() $(window).scroll()
}, },
_share: function (id) { initArticle: function () {
var $this = $(id) this._initPage()
var $qrCode = $this.find('.article__code') page.share()
var shareURL = $qrCode.data('url') },
var avatarURL = $qrCode.data('avatar') _initPage: function () {
var title = encodeURIComponent($qrCode.data('title') + ' - ' + $qrCode.data('blogtitle')), var $articleTocs = $('.vditor-reset [id^=b3_solo_h]')
url = encodeURIComponent(shareURL) var $articleToc = $('.article__toc')
var $articleProgress = $('.article__progress')
var urls = {} if ($articleToc.length === 1) {
urls.tencent = 'http://share.v.t.qq.com/index.php?c=share&a=index&title=' + title + $('.post__toc').
'&url=' + url + '&pic=' + avatarURL css('left', $('.article .item__content').offset().left +
urls.weibo = 'http://v.t.sina.com.cn/share/share.php?title=' + $('.article .item__content').outerWidth() - 80)
title + '&url=' + url + '&pic=' + avatarURL }
urls.qqz = 'https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=' $(window).unbind('scroll').scroll(function (event) {
+ url + '&sharesource=qzone&title=' + title + '&pics=' + avatarURL if ($articleProgress.length === 0) {
urls.twitter = 'https://twitter.com/intent/tweet?status=' + title + ' ' + url return false
}
$this.find('span').click(function () { $articleProgress.attr('value', parseInt($(window).scrollTop())).
var key = $(this).data('type') attr('max', parseInt($('body').outerHeight() -
$(window).height()))
if (!key) { if ($(window).scrollTop() > 236) {
$('.article__top').css('top', 0)
} else {
$('.article__top').css('top', -60)
}
if ($('.article__toc li').length === 0) {
return false
}
if ($(window).scrollTop() > 990 && $(window).scrollTop() <
$('.article').outerHeight() + 100) {
$('.post__toc').show()
} else {
$('.post__toc').hide()
return return
} }
if (key === 'wechat') { // 界面各种图片加载会导致帖子目录定位
if ($qrCode.find('canvas').length === 0) { var toc = []
$qrCode.qrcode({ $articleTocs.each(function (i) {
width: 128, toc.push({
height: 128, id: this.id,
text: shareURL offsetTop: this.offsetTop,
}); })
} else { })
$qrCode.slideToggle();
}
return false;
}
window.open(urls[key], '_blank', 'top=100,left=200,width=648,height=618') // 当前目录样式
var scrollTop = $(window).scrollTop()
for (var i = 0, iMax = toc.length; i < iMax; i++) {
if (scrollTop < toc[i].offsetTop) {
$articleToc.find('li').removeClass('current')
var index = i > 0 ? i - 1 : 0
$articleToc.find('a[href="#' + toc[index].id + '"]').
parent().
addClass('current')
break
}
}
if (scrollTop >= toc[toc.length - 1].offsetTop) {
$articleToc.find('li').removeClass('current')
$articleToc.find('li:last').addClass('current')
}
}) })
$(window).scroll()
}, },
initToc: function () { }
if ($('.article__toc').length !== 0 && $(window).width() > 1000) { // Skin.init();
$('.article__toc').animate({
'left': ($('.post').outerWidth() + $('.post').offset().left) + 'px'
}, 600)
} else {
$('.article__toc').hide()
}
}
};
Skin.init();

18
Casper/macro-comments.ftl
View File

@ -18,16 +18,20 @@
--> -->
<#macro comments commentList article> <#macro comments commentList article>
<div class="article__comment"> <div class="comment">
<div class="comment__title">${commentLabel}</div> <div class="comment__wrapper wrapper">
<div id="comments"> <div class="comment__title">
${commentLabel}
</div>
<#if article.commentable>
<textarea rows="3" placeholder="${commentContentCannotEmptyLabel}" id="comment"></textarea>
</#if>
<ul id="comments">
<#list commentList as comment> <#list commentList as comment>
<#include 'common-comment.ftl'/> <#include 'common-comment.ftl'/>
</#list> </#list>
</ul>
</div> </div>
<#if article.commentable>
<textarea rows="3" placeholder="${postCommentsLabel}"
class="comment__textarea" id="comment"></textarea>
</#if>
</div> </div>
</#macro> </#macro>

8
Casper/marcr-header.ftl
View File

@ -27,8 +27,12 @@
<h2 class="header__h2">${blogSubtitle}</h2> <h2 class="header__h2">${blogSubtitle}</h2>
</div> </div>
<nav class="wrapper header__nav fn__clear"> <nav class="wrapper header__nav fn__clear">
<a href="${servePath}"> <a href="${servePath}" rel="start">
${indexLabel} <#if type == 'article'>
${blogTitle}
<#else>
${indexLabel}
</#if>
</a> </a>
<#list pageNavigations as page> <#list pageNavigations as page>

4
Medium/article.ftl
View File

@ -210,8 +210,7 @@
<#if pjax><!---- pjax {#pjax} end ----></#if> <#if pjax><!---- pjax {#pjax} end ----></#if>
</div> </div>
<#include "footer.ftl"> <#include "footer.ftl">
<script type="text/javascript" <script type="text/javascript" src="${staticServePath}/js/lib/jquery.qrcode.min.js"></script>
src="${staticServePath}/skins/${skinDirName}/js/jquery.qrcode${miniPostfix}.js"></script>
<#if pjax><!---- pjax {#pjax} start ----></#if> <#if pjax><!---- pjax {#pjax} start ----></#if>
<@comment_script oId=article.oId commentable=article.commentable> <@comment_script oId=article.oId commentable=article.commentable>
Skin.initArticle() Skin.initArticle()
@ -230,6 +229,5 @@
Skin.initComment('${article.oId}', "<#list article.articleTags?split(",") as articleTag>${articleTag}<#if articleTag_has_next>,</#if></#list>") Skin.initComment('${article.oId}', "<#list article.articleTags?split(",") as articleTag>${articleTag}<#if articleTag_has_next>,</#if></#list>")
</@comment_script> </@comment_script>
<#if pjax><!---- pjax {#pjax} end ----></#if> <#if pjax><!---- pjax {#pjax} end ----></#if>
${plugins}
</body> </body>
</html> </html>