This commit is contained in:
Van
parent
e3d7be6f23
commit
59450e3218
|
|
@ -26,29 +26,39 @@
|
|||
<@head title="${article.articleTitle} - ${blogTitle}" description="${article.articleAbstract?html}">
|
||||
<link rel="stylesheet"
|
||||
href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
|
||||
<#if previousArticlePermalink??>
|
||||
<link rel="prev" title="${previousArticleTitle}" href="${servePath}${previousArticlePermalink}">
|
||||
</#if>
|
||||
<#if nextArticlePermalink??>
|
||||
<link rel="next" title="${nextArticleTitle}" href="${servePath}${nextArticlePermalink}">
|
||||
</#if>
|
||||
<#if previousArticlePermalink??>
|
||||
<link rel="prev" title="${previousArticleTitle}" href="${servePath}${previousArticlePermalink}">
|
||||
</#if>
|
||||
<#if nextArticlePermalink??>
|
||||
<link rel="next" title="${nextArticleTitle}" href="${servePath}${nextArticlePermalink}">
|
||||
</#if>
|
||||
</@head>
|
||||
</head>
|
||||
<body>
|
||||
<#include "header.ftl">
|
||||
<div id="pjax">
|
||||
<div class="pjax">
|
||||
<#if pjax><!---- pjax {#pjax} start ----></#if>
|
||||
<div class="main post__main">
|
||||
<#if noticeBoard??>
|
||||
<div class="board">
|
||||
${noticeBoard}
|
||||
<#include "marcr-header.ftl">
|
||||
<@header type="article"></@header>
|
||||
<div class="article__top">
|
||||
<div class="fn__clear">
|
||||
<div class="title">${article.articleTitle}</div>
|
||||
<#include "../../common-template/share.ftl">
|
||||
</div>
|
||||
</#if>
|
||||
<div class="wrapper content">
|
||||
<article class="post">
|
||||
<header>
|
||||
<h1 class="post__title">
|
||||
${article.articleTitle}
|
||||
<progress class="article__progress"></progress>
|
||||
</div>
|
||||
<div class="article">
|
||||
<div class="ft__center">
|
||||
<div class="item__meta">
|
||||
<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>
|
||||
</#list>
|
||||
</div>
|
||||
<h2 class="item__title">
|
||||
${article.articleTitle}
|
||||
<#if article.articlePutTop>
|
||||
<sup>
|
||||
${topArticleLabel}
|
||||
|
|
@ -59,177 +69,52 @@
|
|||
${updatedLabel}
|
||||
</sup>
|
||||
</#if>
|
||||
</h1>
|
||||
</header>
|
||||
<section class="vditor-reset">
|
||||
${article.articleContent}
|
||||
</h2>
|
||||
</div>
|
||||
<div class="item__cover" style="background-image: url(${article.articleImg1URL})"></div>
|
||||
<section class="vditor-reset item__content wrapper">
|
||||
${article.articleContent}
|
||||
<#if "" != article.articleSign.signHTML?trim>
|
||||
<div>
|
||||
${article.articleSign.signHTML}
|
||||
</div>
|
||||
</#if>
|
||||
</section>
|
||||
<footer data-oid="${article.oId}"
|
||||
class="post__tags"
|
||||
data-tag="<#list article.articleTags?split(",") as articleTag>${articleTag}<#if articleTag_has_next>,</#if></#list>">
|
||||
<#list article.articleTags?split(",") as articleTag>
|
||||
<a class="tag" rel="tag" href="${servePath}/tags/${articleTag?url('UTF-8')}">
|
||||
${articleTag}</a>
|
||||
</#list>
|
||||
</footer>
|
||||
<div class="post__share fn-clear">
|
||||
<time class="ft-gray">
|
||||
${article.articleCreateDate?string("yyyy-MM-dd")} •
|
||||
</time>
|
||||
<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}
|
||||
</span>
|
||||
|
||||
<span id="articleShare">
|
||||
<span class="post__share-icon" data-type="wechat">
|
||||
<svg><use xlink:href="#icon-wechat"></use></svg>
|
||||
</span>
|
||||
<span class="post__share-icon" data-type="weibo">
|
||||
<svg><use xlink:href="#icon-weibo"></use></svg>
|
||||
</span>
|
||||
<span class="post__share-icon" data-type="twitter">
|
||||
<svg><use xlink:href="#icon-twitter"></use></svg>
|
||||
</span>
|
||||
<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>
|
||||
</section>
|
||||
</div>
|
||||
<#if article?? && article.articleToC?? && article.articleToC?size > 0>
|
||||
<div class="post__toc">
|
||||
<#include "../../common-template/toc.ftl"/>
|
||||
</div>
|
||||
</#if>
|
||||
<@comments commentList=articleComments article=article></@comments>
|
||||
<div class="article__bottom">
|
||||
<div class="wrapper">
|
||||
<div class="fn__flex">
|
||||
<div class="item" id="externalRelevantArticles"></div>
|
||||
<div class="item" id="randomArticles"></div>
|
||||
<div class="item" id="relevantArticles"></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}
|
||||
</span>
|
||||
<span id="articleBottomShare">
|
||||
<span class="post__share-icon" data-type="wechat">
|
||||
<svg><use xlink:href="#icon-wechat"></use></svg>
|
||||
</span>
|
||||
<span class="post__share-icon" data-type="weibo">
|
||||
<svg><use xlink:href="#icon-weibo"></use></svg>
|
||||
</span>
|
||||
<span class="post__share-icon" data-type="twitter">
|
||||
<svg><use xlink:href="#icon-twitter"></use></svg>
|
||||
</span>
|
||||
<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>
|
||||
<span class="post__share-icon" data-type="weibo">
|
||||
<svg><use xlink:href="#icon-weibo"></use></svg>
|
||||
</span>
|
||||
<span class="post__share-icon" data-type="twitter">
|
||||
<svg><use xlink:href="#icon-twitter"></use></svg>
|
||||
</span>
|
||||
<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 > 0>
|
||||
<#include "../../common-template/toc.ftl"/>
|
||||
</#if>
|
||||
</div>
|
||||
<#if pjax><!---- pjax {#pjax} end ----></#if>
|
||||
</div>
|
||||
<#include "footer.ftl">
|
||||
<script type="text/javascript"
|
||||
src="${staticServePath}/skins/${skinDirName}/js/jquery.qrcode${miniPostfix}.js"></script>
|
||||
<script type="text/javascript" src="${staticServePath}/js/lib/jquery.qrcode.min.js"></script>
|
||||
<#if pjax><!---- pjax {#pjax} start ----></#if>
|
||||
<@comment_script oId=article.oId commentable=article.commentable>
|
||||
Skin.initArticle()
|
||||
Skin.initComment = function (articleOId, articleTags) {
|
||||
page.tips.externalRelevantArticlesDisplayCount = "${externalRelevantArticlesDisplayCount}";
|
||||
page.tips.externalRelevantArticlesDisplayCount = "${externalRelevantArticlesDisplayCount}";
|
||||
<#if 0 != randomArticlesDisplayCount>
|
||||
page.loadRandomArticles("<div class='module__title'><span>${randomArticlesLabel}</span></div>");
|
||||
page.loadRandomArticles('<h3>${randomArticlesLabel}</h3>');
|
||||
</#if>
|
||||
<#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 0 != relevantArticlesDisplayCount>
|
||||
page.loadRelevantArticles(articleOId, '<div class="module__title"><span>${relevantArticlesLabel}</span></div>');
|
||||
page.loadRelevantArticles('${article.oId}', '<h3>${relevantArticlesLabel}</h3>');
|
||||
</#if>
|
||||
}
|
||||
Skin.initComment('${article.oId}', "<#list article.articleTags?split(",") as articleTag>${articleTag}<#if articleTag_has_next>,</#if></#list>")
|
||||
</@comment_script>
|
||||
<#if pjax><!---- pjax {#pjax} end ----></#if>
|
||||
${plugins}
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -17,38 +17,34 @@
|
|||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
-->
|
||||
<div id="${comment.oId}" class="comment__item">
|
||||
<img class="comment__avatar" src="${comment.commentThumbnailURL}"/>
|
||||
<main class="comment__body">
|
||||
<div class="fn-clear">
|
||||
<span class="comment__user">
|
||||
<#if "http://" == comment.commentURL>
|
||||
${comment.commentName}
|
||||
<#else>
|
||||
<a href="${comment.commentURL}" target="_blank">${comment.commentName}</a>
|
||||
</#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>
|
||||
<li id="${comment.oId}" class="item">
|
||||
<div class="fn__clear">
|
||||
<div class="item__avatar" style="background-image: url(${comment.commentThumbnailURL})"></div>
|
||||
<div class="item__name">
|
||||
<#if "http://" == comment.commentURL>
|
||||
<span class="ft__fade">${comment.commentName}</span>
|
||||
<#else>
|
||||
<a class="ft__link" href="${comment.commentURL}" target="_blank">${comment.commentName}</a>
|
||||
</#if>
|
||||
|
||||
|
||||
<#if article.commentable>
|
||||
<a class="fn-right ft-green" href="javascript:page.toggleEditor('${comment.oId}', '${comment.commentName}')">
|
||||
<svg><use xlink:href="#icon-reply"></use></svg> ${reply1Label}
|
||||
</a>
|
||||
<#if comment.isReply>
|
||||
@ <a href="${servePath}${article.permalink}#${comment.commentOriginalCommentId}"
|
||||
onmouseover="page.showComment(this, '${comment.commentOriginalCommentId}', 20);"
|
||||
onmouseout="page.hideComment('${comment.commentOriginalCommentId}')"
|
||||
>${comment.commentOriginalCommentName}</a>
|
||||
</#if>
|
||||
</div>
|
||||
<div class="vditor-reset">
|
||||
${comment.commentContent}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vditor-reset">
|
||||
${comment.commentContent}
|
||||
</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>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -31,11 +31,22 @@
|
|||
$fade-lighter: rgba(255, 255, 255, .8) !default;
|
||||
$gray: #738a94 !default;
|
||||
$black: #15171a !default;
|
||||
$black-bg: #090a0b !default;
|
||||
$link: #26a8ed !default;
|
||||
|
||||
body {
|
||||
background-color: #f4f8fb;
|
||||
}
|
||||
|
||||
::selection {
|
||||
text-shadow: none;
|
||||
background-color: #cbeafb;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $link;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
max-width: 1040px;
|
||||
margin: 0 auto;
|
||||
|
|
@ -57,6 +68,17 @@ body {
|
|||
filter: brightness(38%);
|
||||
}
|
||||
}
|
||||
&--article {
|
||||
background-color: $black-bg;
|
||||
height: 64px;
|
||||
.header__title {
|
||||
display: none;
|
||||
}
|
||||
.header__nav a {
|
||||
margin-bottom: 0;
|
||||
line-height: 64px;
|
||||
}
|
||||
}
|
||||
&__title {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
|
@ -113,7 +135,7 @@ body {
|
|||
.footer {
|
||||
font-size: 13px;
|
||||
padding: 20px 0;
|
||||
background-color: #000;
|
||||
background-color: $black-bg;
|
||||
color: #fff;
|
||||
a {
|
||||
color: $fade-lighter;
|
||||
|
|
@ -141,7 +163,7 @@ body {
|
|||
min-height: 300px;
|
||||
border-radius: 5px;
|
||||
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;
|
||||
flex-direction: column;
|
||||
background-color: #fff;
|
||||
|
|
@ -259,7 +281,7 @@ body {
|
|||
text-decoration: none;
|
||||
}
|
||||
&--active {
|
||||
background: #88acdb;
|
||||
background: $black-bg;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -269,4 +291,306 @@ body {
|
|||
color: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
|
@ -26,11 +26,13 @@
|
|||
</@head>
|
||||
</head>
|
||||
<body>
|
||||
<#include "marcr-header.ftl">
|
||||
<@header type='index'></@header>
|
||||
<div id="pjax" class="wrapper">
|
||||
<div id="pjax">
|
||||
<#if pjax><!---- pjax {#pjax} start ----></#if>
|
||||
<#include "marcr-header.ftl">
|
||||
<@header type='index'></@header>
|
||||
<div class="wrapper">
|
||||
<#include "article-list.ftl">
|
||||
</div>
|
||||
<#if pjax><!---- pjax {#pjax} end ----></#if>
|
||||
</div>
|
||||
<#include "footer.ftl">
|
||||
|
|
|
|||
|
|
@ -42,25 +42,25 @@ var Skin = {
|
|||
return
|
||||
}
|
||||
if ($(window).scrollTop() > 64) {
|
||||
$('#headerNav').addClass('header__nav--fixed');
|
||||
$('.main').css('margin-top', '100px');
|
||||
$('#headerNav').addClass('header__nav--fixed')
|
||||
$('.main').css('margin-top', '100px')
|
||||
} else {
|
||||
$('#headerNav').removeClass('header__nav--fixed');
|
||||
$('.main').css('margin-top', '50px');
|
||||
$('#headerNav').removeClass('header__nav--fixed')
|
||||
$('.main').css('margin-top', '50px')
|
||||
}
|
||||
});
|
||||
$(window).scroll();
|
||||
})
|
||||
$(window).scroll()
|
||||
|
||||
Util.initPjax(function () {
|
||||
Util.parseMarkdown();
|
||||
Util.parseMarkdown()
|
||||
if (Util.isArticlePage(location.href)) {
|
||||
if (!$('#articleSideShare .article__code').qrcode) {
|
||||
$.ajax({
|
||||
method: "GET",
|
||||
method: 'GET',
|
||||
url: Label.staticServePath + '/js/lib/jquery.qrcode.min.js',
|
||||
dataType: "script",
|
||||
cache: true
|
||||
});
|
||||
dataType: 'script',
|
||||
cache: true,
|
||||
})
|
||||
}
|
||||
}
|
||||
Skin.initToc()
|
||||
|
|
@ -68,37 +68,34 @@ var Skin = {
|
|||
Skin.initToc()
|
||||
},
|
||||
initTags: function () {
|
||||
var $tags = $('#tags');
|
||||
var $tags = $('#tags')
|
||||
var tagsArray = $tags.find('.tag')
|
||||
// 根据引用次数添加样式，产生云效果
|
||||
var max = parseInt(tagsArray.first().data('count'));
|
||||
var distance = Math.ceil(max / 5);
|
||||
var max = parseInt(tagsArray.first().data('count'))
|
||||
var distance = Math.ceil(max / 5)
|
||||
for (var i = 0; i < tagsArray.length; i++) {
|
||||
var count = parseInt($(tagsArray[i]).data('count'));
|
||||
var count = parseInt($(tagsArray[i]).data('count'))
|
||||
// 算出当前 tag 数目所在的区间，加上 class
|
||||
for (var j = 0; j < 5; j++) {
|
||||
if (count > j * distance && count <= (j + 1) * distance) {
|
||||
tagsArray[i].className = 'tag tag__level' + j;
|
||||
break;
|
||||
tagsArray[i].className = 'tag tag__level' + j
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 按字母或者中文拼音进行排序
|
||||
$tags.html(tagsArray.get().sort(function (a, b) {
|
||||
var valA = $(a).text().toLowerCase();
|
||||
var valB = $(b).text().toLowerCase();
|
||||
var valA = $(a).text().toLowerCase()
|
||||
var valB = $(b).text().toLowerCase()
|
||||
// 对中英文排序的处理
|
||||
return valA.localeCompare(valB);
|
||||
}));
|
||||
return valA.localeCompare(valB)
|
||||
}))
|
||||
},
|
||||
initArticle: function () {
|
||||
initArticle1111: function () {
|
||||
if ($('#articleShare').length === 0) {
|
||||
return
|
||||
}
|
||||
Skin._share('#articleShare')
|
||||
Skin._share('#articleSideShare')
|
||||
Skin._share('#articleBottomShare')
|
||||
|
||||
var $postSide = $('.post__side')
|
||||
if ($(window).height() >= $('.post').height()) {
|
||||
|
|
@ -121,10 +118,11 @@ var Skin = {
|
|||
// up
|
||||
$('.header').addClass('header--fixed').css({'top': '0'})
|
||||
$('.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({
|
||||
'bottom': 0,
|
||||
'opacity': 1
|
||||
'opacity': 1,
|
||||
})
|
||||
}
|
||||
} else if (beforScrollTop - scrollTop < 0) {
|
||||
|
|
@ -133,7 +131,7 @@ var Skin = {
|
|||
$('.main').css('padding-top', '0')
|
||||
$('.article__toolbar').css({
|
||||
'bottom': '-44px',
|
||||
'opacity': 0
|
||||
'opacity': 0,
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -150,18 +148,18 @@ var Skin = {
|
|||
if (bottomTop < $(window).height()) {
|
||||
$postSide.css({
|
||||
'position': 'absolute',
|
||||
'top': (bottomTop - 125) + 'px'
|
||||
'top': (bottomTop - 125) + 'px',
|
||||
})
|
||||
} else {
|
||||
$postSide.css({
|
||||
'position': 'absolute',
|
||||
'top': (bottomTop - sideAbsoluteTop) + 'px'
|
||||
'top': (bottomTop - sideAbsoluteTop) + 'px',
|
||||
})
|
||||
}
|
||||
} else {
|
||||
$postSide.css({
|
||||
'position': 'fixed',
|
||||
'top': '50%'
|
||||
'top': '50%',
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -170,54 +168,75 @@ var Skin = {
|
|||
|
||||
$(window).scroll()
|
||||
},
|
||||
_share: function (id) {
|
||||
var $this = $(id)
|
||||
var $qrCode = $this.find('.article__code')
|
||||
var shareURL = $qrCode.data('url')
|
||||
var avatarURL = $qrCode.data('avatar')
|
||||
var title = encodeURIComponent($qrCode.data('title') + ' - ' + $qrCode.data('blogtitle')),
|
||||
url = encodeURIComponent(shareURL)
|
||||
initArticle: function () {
|
||||
this._initPage()
|
||||
page.share()
|
||||
},
|
||||
_initPage: function () {
|
||||
var $articleTocs = $('.vditor-reset [id^=b3_solo_h]')
|
||||
var $articleToc = $('.article__toc')
|
||||
var $articleProgress = $('.article__progress')
|
||||
|
||||
var urls = {}
|
||||
urls.tencent = 'http://share.v.t.qq.com/index.php?c=share&a=index&title=' + title +
|
||||
'&url=' + url + '&pic=' + avatarURL
|
||||
urls.weibo = 'http://v.t.sina.com.cn/share/share.php?title=' +
|
||||
title + '&url=' + url + '&pic=' + avatarURL
|
||||
urls.qqz = 'https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url='
|
||||
+ url + '&sharesource=qzone&title=' + title + '&pics=' + avatarURL
|
||||
urls.twitter = 'https://twitter.com/intent/tweet?status=' + title + ' ' + url
|
||||
if ($articleToc.length === 1) {
|
||||
$('.post__toc').
|
||||
css('left', $('.article .item__content').offset().left +
|
||||
$('.article .item__content').outerWidth() - 80)
|
||||
}
|
||||
$(window).unbind('scroll').scroll(function (event) {
|
||||
if ($articleProgress.length === 0) {
|
||||
return false
|
||||
}
|
||||
|
||||
$this.find('span').click(function () {
|
||||
var key = $(this).data('type')
|
||||
$articleProgress.attr('value', parseInt($(window).scrollTop())).
|
||||
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
|
||||
}
|
||||
|
||||
if (key === 'wechat') {
|
||||
if ($qrCode.find('canvas').length === 0) {
|
||||
$qrCode.qrcode({
|
||||
width: 128,
|
||||
height: 128,
|
||||
text: shareURL
|
||||
});
|
||||
} else {
|
||||
$qrCode.slideToggle();
|
||||
}
|
||||
return false;
|
||||
}
|
||||
// 界面各种图片加载会导致帖子目录定位
|
||||
var toc = []
|
||||
$articleTocs.each(function (i) {
|
||||
toc.push({
|
||||
id: this.id,
|
||||
offsetTop: this.offsetTop,
|
||||
})
|
||||
})
|
||||
|
||||
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) {
|
||||
$('.article__toc').animate({
|
||||
'left': ($('.post').outerWidth() + $('.post').offset().left) + 'px'
|
||||
}, 600)
|
||||
} else {
|
||||
$('.article__toc').hide()
|
||||
}
|
||||
}
|
||||
};
|
||||
Skin.init();
|
||||
}
|
||||
// Skin.init();
|
||||
|
|
@ -18,16 +18,20 @@
|
|||
|
||||
-->
|
||||
<#macro comments commentList article>
|
||||
<div class="article__comment">
|
||||
<div class="comment__title">${commentLabel}</div>
|
||||
<div id="comments">
|
||||
<div class="comment">
|
||||
<div class="comment__wrapper wrapper">
|
||||
<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>
|
||||
<#include 'common-comment.ftl'/>
|
||||
</#list>
|
||||
</ul>
|
||||
</div>
|
||||
<#if article.commentable>
|
||||
<textarea rows="3" placeholder="${postCommentsLabel}"
|
||||
class="comment__textarea" id="comment"></textarea>
|
||||
</#if>
|
||||
</div>
|
||||
</#macro>
|
||||
|
|
@ -27,8 +27,12 @@
|
|||
<h2 class="header__h2">${blogSubtitle}</h2>
|
||||
</div>
|
||||
<nav class="wrapper header__nav fn__clear">
|
||||
<a href="${servePath}">
|
||||
${indexLabel}
|
||||
<a href="${servePath}" rel="start">
|
||||
<#if type == 'article'>
|
||||
${blogTitle}
|
||||
<#else>
|
||||
${indexLabel}
|
||||
</#if>
|
||||
</a>
|
||||
|
||||
<#list pageNavigations as page>
|
||||
|
|
|
|||
|
|
@ -210,8 +210,7 @@
|
|||
<#if pjax><!---- pjax {#pjax} end ----></#if>
|
||||
</div>
|
||||
<#include "footer.ftl">
|
||||
<script type="text/javascript"
|
||||
src="${staticServePath}/skins/${skinDirName}/js/jquery.qrcode${miniPostfix}.js"></script>
|
||||
<script type="text/javascript" src="${staticServePath}/js/lib/jquery.qrcode.min.js"></script>
|
||||
<#if pjax><!---- pjax {#pjax} start ----></#if>
|
||||
<@comment_script oId=article.oId commentable=article.commentable>
|
||||
Skin.initArticle()
|
||||
|
|
@ -230,6 +229,5 @@
|
|||
Skin.initComment('${article.oId}', "<#list article.articleTags?split(",") as articleTag>${articleTag}<#if articleTag_has_next>,</#if></#list>")
|
||||
</@comment_script>
|
||||
<#if pjax><!---- pjax {#pjax} end ----></#if>
|
||||
${plugins}
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue