This commit is contained in:
Van
parent
ccb20d81c5
commit
a6be574a8a
@ -34,13 +34,25 @@
|
||||
</sup>
|
||||
</#if>
|
||||
</h2>
|
||||
<time class="ft__gray">
|
||||
${article.articleCreateDate?string("yyyy-MM-dd")}${monthLabel}
|
||||
</time>
|
||||
<div class="ft__gray fn__clear">
|
||||
<time>
|
||||
${article.articleCreateDate?string("yyyy-MM-dd")}
|
||||
</time>
|
||||
|
||||
<#list article.articleTags?split(",") as articleTag>
|
||||
<a rel="tag" href="${servePath}/tags/${articleTag?url('UTF-8')}" class="ft__red">
|
||||
${articleTag}</a><#if articleTag_has_next>,</#if>
|
||||
</#list>
|
||||
<div class="fn__right">
|
||||
<a class="ft__red" href="${servePath}${article.articlePermalink}#comments"><#if article.articleCommentCount gt 0>${article.articleCommentCount} </#if>${commentLabel}</a>
|
||||
•
|
||||
<a class="ft__red" href="${servePath}${article.articlePermalink}">${article.articleViewCount} ${viewLabel}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-reset article__content">
|
||||
${article.articleAbstract}
|
||||
</div>
|
||||
<a class="article__more" href="">More...</a>
|
||||
<a class="article__more" href="${servePath}${article.articlePermalink}">More...</a>
|
||||
</article>
|
||||
</#list>
|
||||
|
||||
|
||||
134
Jane/article.ftl
134
Jane/article.ftl
@ -51,21 +51,13 @@
|
||||
</head>
|
||||
<body>
|
||||
<#include "header.ftl">
|
||||
<div class="main">
|
||||
<div id="pjax" class="content">
|
||||
<div id="pjax" class="wrapper">
|
||||
<#if pjax><!---- pjax {#pjax} start ----></#if>
|
||||
<main class="article-list" id="articlePage">
|
||||
<div class="item item--active">
|
||||
<time class="tooltipped tooltipped__n item__date"
|
||||
aria-label="${article.articleCreateDate?string("yyyy")}${yearLabel}">
|
||||
${article.articleCreateDate?string("MM")}${monthLabel}
|
||||
<span class="item__day">${article.articleCreateDate?string("dd")}</span>
|
||||
</time>
|
||||
|
||||
<h2 class="item__title">
|
||||
<a rel="bookmark" href="${servePath}${article.articlePermalink}">
|
||||
${article.articleTitle}
|
||||
</a>
|
||||
<div class="article__item">
|
||||
<h2 class="article__title">
|
||||
<a rel="bookmark" href="${servePath}${article.articlePermalink}">
|
||||
${article.articleTitle}
|
||||
</a>
|
||||
<#if article.articlePutTop>
|
||||
<sup>
|
||||
${topArticleLabel}
|
||||
@ -76,98 +68,62 @@
|
||||
${updatedLabel}
|
||||
</sup>
|
||||
</#if>
|
||||
</h2>
|
||||
</h2>
|
||||
|
||||
<div class="item__date--m fn__none">
|
||||
<i class="icon__date"></i>
|
||||
<div class="ft__gray fn__clear">
|
||||
<time>
|
||||
${article.articleCreateDate?string("yyyy-MM-dd")}
|
||||
</div>
|
||||
|
||||
<div class="ft__center">
|
||||
<span class="tag">
|
||||
<i class="icon__tags"></i>
|
||||
<#list article.articleTags?split(",") as articleTag>
|
||||
<a rel="tag" href="${servePath}/tags/${articleTag?url('UTF-8')}">
|
||||
${articleTag}</a><#if articleTag_has_next>,</#if>
|
||||
</#list>
|
||||
</span>
|
||||
<a class="tag" href="${servePath}${article.articlePermalink}#comments">
|
||||
<i class="icon__comments"></i> ${article.articleCommentCount} ${commentLabel}
|
||||
</a>
|
||||
<span class="tag">
|
||||
<i class="icon__views"></i>
|
||||
</time>
|
||||
|
||||
<#list article.articleTags?split(",") as articleTag>
|
||||
<a rel="tag" href="${servePath}/tags/${articleTag?url('UTF-8')}" class="ft__red">
|
||||
${articleTag}</a><#if articleTag_has_next>,</#if>
|
||||
</#list>
|
||||
<div class="fn__right">
|
||||
<a class="ft__red" href="${servePath}${article.articlePermalink}#comments"><#if article.articleCommentCount gt 0>${article.articleCommentCount} </#if>${commentLabel}</a>
|
||||
•
|
||||
${article.articleViewCount} ${viewLabel}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-reset">
|
||||
<div class="content-reset article__content">
|
||||
${article.articleContent}
|
||||
<#if "" != article.articleSign.signHTML?trim>
|
||||
<div>
|
||||
${article.articleSign.signHTML}
|
||||
</div>
|
||||
</#if>
|
||||
<#if "" != article.articleSign.signHTML?trim>
|
||||
<div>
|
||||
${article.articleSign.signHTML}
|
||||
</div>
|
||||
</#if>
|
||||
</div>
|
||||
|
||||
<#if previousArticlePermalink?? || nextArticlePermalink??>
|
||||
<div class="module">
|
||||
<div class="module__content fn__clear">
|
||||
<#if previousArticlePermalink??>
|
||||
<a href="${servePath}${previousArticlePermalink}" rel="prev" class="fn__left breadcrumb">
|
||||
${previousArticleLabel}: ${previousArticleTitle}
|
||||
</a>
|
||||
</#if>
|
||||
<#if nextArticlePermalink??>
|
||||
<a href="${servePath}${nextArticlePermalink}" rel="next"
|
||||
class="fn__right breadcrumb">
|
||||
${nextArticleTitle}: ${nextArticleLabel}
|
||||
</a>
|
||||
</#if>
|
||||
</div>
|
||||
<div class="article__near fn__flex">
|
||||
<#if nextArticlePermalink??>
|
||||
<a href="${servePath}${nextArticlePermalink}" rel="next"
|
||||
class="fn__flex-1 first">
|
||||
<strong>NEWER</strong>
|
||||
${nextArticleLabel}
|
||||
</a>
|
||||
<#else>
|
||||
<a class="fn__flex-1 first"> </a>
|
||||
</#if>
|
||||
<#if previousArticlePermalink??>
|
||||
<a href="${servePath}${previousArticlePermalink}" rel="prev" class="fn__flex-1">
|
||||
<strong>OLDER</strong>
|
||||
${previousArticleTitle}
|
||||
</a>
|
||||
<#else>
|
||||
<a class="fn__flex-1"> </a>
|
||||
</#if>
|
||||
</div>
|
||||
</#if>
|
||||
|
||||
<@comments commentList=articleComments article=article></@comments>
|
||||
|
||||
<div class="fn__flex">
|
||||
<div class="fn__flex-1" id="externalRelevantArticlesWrap">
|
||||
<div class="module">
|
||||
<div id="externalRelevantArticles" class="module__list"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div> </div>
|
||||
<div class="fn__flex-1" id="randomArticlesWrap">
|
||||
<div class="module">
|
||||
<div id="randomArticles" class="module__list"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div> </div>
|
||||
<div class="fn__flex-1" id="relevantArticlesWrap">
|
||||
<div class="module">
|
||||
<div id="relevantArticles" class="module__list"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<#if pjax><!---- pjax {#pjax} end ----></#if>
|
||||
</div>
|
||||
|
||||
<@comments commentList=articleComments article=article></@comments>
|
||||
<#if pjax><!---- pjax {#pjax} end ----></#if>
|
||||
</div>
|
||||
<#include "footer.ftl">
|
||||
<#if pjax><!---- pjax {#pjax} start ----></#if>
|
||||
<@comment_script oId=article.oId>
|
||||
page.tips.externalRelevantArticlesDisplayCount = "${externalRelevantArticlesDisplayCount}";
|
||||
<#if 0 != randomArticlesDisplayCount>
|
||||
page.loadRandomArticles('<header class="module__header">${randomArticles1Label}</header>');
|
||||
</#if>
|
||||
<#if 0 != externalRelevantArticlesDisplayCount>
|
||||
page.loadExternalRelevantArticles("<#list article.articleTags?split(",") as articleTag>${articleTag}<#if articleTag_has_next>,</#if></#list>"
|
||||
, "<header class='module__header'>${externalRelevantArticlesLabel}</header>");
|
||||
</#if>
|
||||
<#if 0 != relevantArticlesDisplayCount>
|
||||
page.loadRelevantArticles('${article.oId}',
|
||||
'<header class="module__header">${relevantArticlesLabel}</header>');
|
||||
</#if>
|
||||
</@comment_script>
|
||||
<#if pjax><!---- pjax {#pjax} end ----></#if>
|
||||
</body>
|
||||
|
||||
@ -17,32 +17,38 @@
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
-->
|
||||
<li id="${comment.oId}" class="comments__item">
|
||||
<div class="comments__meta fn__flex">
|
||||
<div class="fn__flex-1">
|
||||
<li id="${comment.oId}" class="comment__item">
|
||||
<div class="fn__flex">
|
||||
|
||||
|
||||
<div class="comment__avatar" style="background-image: url(${comment.commentThumbnailURL})"></div>
|
||||
<main class="comment__main fn__flex-1">
|
||||
<div class="fn__clear ft__gray">
|
||||
<#if "http://" == comment.commentURL>
|
||||
${comment.commentName}
|
||||
<#else>
|
||||
<a href="${comment.commentURL}" target="_blank">${comment.commentName}</a>
|
||||
<a href="${comment.commentURL}" target="_blank" class="ft__red">${comment.commentName}</a>
|
||||
</#if>
|
||||
<#if comment.isReply>
|
||||
@<a href="${servePath}${article.permalink}#${comment.commentOriginalCommentId}"
|
||||
onmouseover="page.showComment(this, '${comment.commentOriginalCommentId}', 28);"
|
||||
onmouseout="page.hideComment('${comment.commentOriginalCommentId}')"
|
||||
class="ft__red"
|
||||
>${comment.commentOriginalCommentName}</a>
|
||||
</#if>
|
||||
</div>
|
||||
<time>${comment.commentDate2?string("yyyy-MM-dd HH:mm")}</time>
|
||||
•
|
||||
<time>${comment.commentDate2?string("yyyy-MM-dd HH:mm")}</time>
|
||||
|
||||
<#if article.commentable>
|
||||
<span class="fn__right comment__btn" onclick="replyTo('${comment.oId}')">
|
||||
<i class="icon__comments"></i>
|
||||
</span>
|
||||
</#if>
|
||||
</div>
|
||||
|
||||
<div class="content-reset comment__content">
|
||||
${comment.commentContent}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<main class="comments__content fn__clear">
|
||||
<div class="comments__avatar" style="background-image: url(${comment.commentThumbnailURL})"></div>
|
||||
<div class="content-reset">
|
||||
${comment.commentContent}
|
||||
</div>
|
||||
<#if article?? && article.commentable>
|
||||
<a class="fn__right breadcrumb" href="javascript:replyTo('${comment.oId}')">${replyLabel}</a>
|
||||
<#else>
|
||||
<a class="fn__right breadcrumb" href="${servePath}${comment.commentSharpURL}">${viewLabel}»</a>
|
||||
</#if>
|
||||
</main>
|
||||
</li>
|
||||
@ -744,12 +744,28 @@ a {
|
||||
color: #999; }
|
||||
|
||||
.content-reset {
|
||||
overflow: hidden;
|
||||
color: #555;
|
||||
font-size: 14px; }
|
||||
.content-reset a {
|
||||
color: #991a1a; }
|
||||
.content-reset blockquote {
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
background: #f7f7f7;
|
||||
margin: 20px 0;
|
||||
padding: 10px 20px;
|
||||
border-left: 4px solid #991a1a; }
|
||||
.content-reset pre > code {
|
||||
color: #555;
|
||||
background-color: #f7f7f7;
|
||||
padding: 10px; }
|
||||
|
||||
.b3-solo-list {
|
||||
display: none; }
|
||||
|
||||
.header {
|
||||
padding: 10px 0;
|
||||
box-sizing: border-box;
|
||||
top: 0;
|
||||
background-color: #2a2a2a;
|
||||
color: #fff;
|
||||
@ -774,9 +790,9 @@ a {
|
||||
color: #999; }
|
||||
|
||||
.wrapper {
|
||||
max-width: 920px;
|
||||
max-width: 768px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px; }
|
||||
padding: 0 70px 0 20px; }
|
||||
|
||||
.footer {
|
||||
color: #999;
|
||||
@ -801,6 +817,11 @@ a {
|
||||
transition: color 0.2s; }
|
||||
.article__title a:hover {
|
||||
color: #991a1a; }
|
||||
.article__title sup {
|
||||
font-weight: normal;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
top: -10px; }
|
||||
|
||||
.article__content {
|
||||
margin: 20px 0; }
|
||||
@ -813,6 +834,39 @@ a {
|
||||
color: #991a1a;
|
||||
display: block; }
|
||||
|
||||
.article__near {
|
||||
margin: 50px 0 70px;
|
||||
position: relative; }
|
||||
.article__near:before {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -4px;
|
||||
margin-left: -4px;
|
||||
content: "";
|
||||
border-radius: 50%;
|
||||
background: #ddd;
|
||||
box-shadow: 0 1px 2px #fff; }
|
||||
.article__near a {
|
||||
font-size: 12px;
|
||||
line-height: 1.6em;
|
||||
color: #999;
|
||||
padding: 0 20px; }
|
||||
.article__near a:hover {
|
||||
text-decoration: none;
|
||||
color: #555; }
|
||||
.article__near a.first {
|
||||
text-align: right; }
|
||||
.article__near strong {
|
||||
margin-bottom: 6px;
|
||||
font-size: 14px;
|
||||
letter-spacing: 2px;
|
||||
color: #ddd;
|
||||
font-weight: bold;
|
||||
display: block; }
|
||||
|
||||
.pagination {
|
||||
margin: 20px 0 40px; }
|
||||
.pagination__item {
|
||||
@ -836,3 +890,90 @@ a {
|
||||
.tags a {
|
||||
margin-right: 20px;
|
||||
float: left; }
|
||||
|
||||
.comments__title {
|
||||
padding-top: 20px; }
|
||||
|
||||
.comment__item {
|
||||
list-style: none;
|
||||
margin: 20px 0; }
|
||||
|
||||
.comment__avatar {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 3px;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50%;
|
||||
margin-right: 20px; }
|
||||
|
||||
.comment__main {
|
||||
position: relative;
|
||||
border: 1px solid #CFD8DC;
|
||||
border-radius: 0;
|
||||
padding: 20px; }
|
||||
.comment__main:before, .comment__main:after {
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
left: -16px;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
border-color: transparent;
|
||||
border-style: solid solid outset;
|
||||
border-width: 8px;
|
||||
border-right-color: #CFD8DC; }
|
||||
.comment__main:after {
|
||||
margin-top: 1px;
|
||||
margin-left: 2px;
|
||||
border-width: 7px;
|
||||
border-right-color: #fff; }
|
||||
|
||||
.comment__btn {
|
||||
cursor: pointer;
|
||||
color: #666; }
|
||||
.comment__btn:hover {
|
||||
color: #333; }
|
||||
|
||||
.comment__content {
|
||||
margin-top: 20px; }
|
||||
.comment__content > p:last-child {
|
||||
margin-bottom: 0; }
|
||||
|
||||
.form {
|
||||
width: 100%;
|
||||
padding: 0 0 0 64px; }
|
||||
.form #commentErrorTip,
|
||||
.form #commentErrorTipReply {
|
||||
line-height: 37px; }
|
||||
.form #captcha,
|
||||
.form #captchaReply {
|
||||
height: 32px;
|
||||
display: inline-block;
|
||||
vertical-align: inherit; }
|
||||
.form input,
|
||||
.form textarea,
|
||||
.form button {
|
||||
background-color: #fff;
|
||||
padding: 7px 8px;
|
||||
border: 1px solid #CFD8DC;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
font-family: "Helvetica Neue","Luxi Sans","DejaVu Sans",Tahoma,"Hiragino Sans GB","Microsoft Yahei",sans-serif; }
|
||||
.form button {
|
||||
width: auto;
|
||||
vertical-align: bottom;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
margin-top: 20px; }
|
||||
.form button:hover {
|
||||
background-color: #2a2a2a;
|
||||
color: #FFF;
|
||||
border-color: #2a2a2a; }
|
||||
.form input:focus,
|
||||
.form textarea:focus {
|
||||
border-color: #2a2a2a; }
|
||||
|
||||
2
Jane/css/base.min.css
vendored
2
Jane/css/base.min.css
vendored
File diff suppressed because one or more lines are too long
@ -52,16 +52,37 @@ a {
|
||||
}
|
||||
|
||||
.content-reset {
|
||||
overflow: hidden;
|
||||
color: #555;
|
||||
font-size: 14px;
|
||||
|
||||
a {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-family: Georgia, "Times New Roman", serif;
|
||||
background: #f7f7f7;
|
||||
margin: 20px 0;
|
||||
padding: 10px 20px;
|
||||
border-left: 4px solid $red;
|
||||
}
|
||||
|
||||
pre > code {
|
||||
color: #555;
|
||||
background-color: #f7f7f7;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.b3-solo-list {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// header
|
||||
.header {
|
||||
padding: 10px 0;
|
||||
box-sizing: border-box;
|
||||
top: 0;
|
||||
background-color: #2a2a2a;
|
||||
color: #fff;
|
||||
@ -95,9 +116,9 @@ a {
|
||||
|
||||
// framework
|
||||
.wrapper {
|
||||
max-width: 920px;
|
||||
max-width: 768px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
padding: 0 70px 0 20px;
|
||||
}
|
||||
|
||||
// footer
|
||||
@ -131,6 +152,13 @@ a {
|
||||
color: $red;
|
||||
}
|
||||
}
|
||||
|
||||
sup {
|
||||
font-weight: normal;
|
||||
color: $gray;
|
||||
font-size: 12px;
|
||||
top: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
@ -146,8 +174,47 @@ a {
|
||||
color: $red;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&__near {
|
||||
margin: 50px 0 70px;
|
||||
position: relative;
|
||||
&:before {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -4px;
|
||||
margin-left: -4px;
|
||||
content: "";
|
||||
border-radius: 50%;
|
||||
background: #ddd;
|
||||
box-shadow: 0 1px 2px #fff;
|
||||
}
|
||||
a {
|
||||
font-size: 12px;
|
||||
line-height: 1.6em;
|
||||
color: $gray;
|
||||
padding: 0 20px;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
&.first {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
strong {
|
||||
margin-bottom: 6px;
|
||||
font-size: 14px;
|
||||
letter-spacing: 2px;
|
||||
color: #ddd;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin: 20px 0 40px;
|
||||
@ -169,7 +236,6 @@ a {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// other page
|
||||
.tags {
|
||||
line-height: 32px;
|
||||
@ -184,4 +250,119 @@ a {
|
||||
margin-right: 20px;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.comments {
|
||||
&__title {
|
||||
padding-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.comment {
|
||||
&__item {
|
||||
list-style: none;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 3px;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50%;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
&__main {
|
||||
position: relative;
|
||||
border: 1px solid #CFD8DC;
|
||||
border-radius: 0;
|
||||
padding: 20px;
|
||||
&:before,
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
left: -16px;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
border-color: transparent;
|
||||
border-style: solid solid outset;
|
||||
border-width: 8px;
|
||||
border-right-color: #CFD8DC;
|
||||
}
|
||||
&:after {
|
||||
margin-top: 1px;
|
||||
margin-left: 2px;
|
||||
border-width: 7px;
|
||||
border-right-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&__btn {
|
||||
cursor: pointer;
|
||||
color: #666;
|
||||
&:hover {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
margin-top: 20px;
|
||||
& > p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form {
|
||||
width: 100%;
|
||||
padding: 0 0 0 64px;
|
||||
|
||||
#commentErrorTip,
|
||||
#commentErrorTipReply {
|
||||
line-height: 37px;
|
||||
}
|
||||
|
||||
#captcha,
|
||||
#captchaReply {
|
||||
height: 32px;
|
||||
display: inline-block;
|
||||
vertical-align: inherit;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
button {
|
||||
background-color: #fff;
|
||||
padding: 7px 8px;
|
||||
border: 1px solid #CFD8DC;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
font-family: "Helvetica Neue","Luxi Sans","DejaVu Sans",Tahoma,"Hiragino Sans GB","Microsoft Yahei",sans-serif;
|
||||
}
|
||||
|
||||
button {
|
||||
width: auto;
|
||||
vertical-align: bottom;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #2a2a2a;
|
||||
color: #FFF;
|
||||
border-color: #2a2a2a;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
textarea:focus {
|
||||
border-color: #2a2a2a;
|
||||
}
|
||||
}
|
||||
|
||||
@ -28,10 +28,14 @@
|
||||
*/
|
||||
var Skin = {
|
||||
init: function () {
|
||||
Util.initPjax()
|
||||
|
||||
$('body').on('click', '.content-reset img', function () {
|
||||
window.open(this.src)
|
||||
Util.initPjax(function () {
|
||||
$('.header a').each(function () {
|
||||
if (this.href === location.href) {
|
||||
this.className = 'current tooltipped tooltipped__w'
|
||||
} else {
|
||||
this.className = 'tooltipped tooltipped__w'
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
$('.header a').each(function () {
|
||||
@ -42,33 +46,10 @@ var Skin = {
|
||||
$('.header a').removeClass('current')
|
||||
this.className = 'current tooltipped tooltipped__w'
|
||||
})
|
||||
},
|
||||
_initArticleCommon: function () {
|
||||
if ($('.b3-solo-list li').length > 0 && $(window).width() > 1000) {
|
||||
$('.side').
|
||||
prepend('<div class="module"><div class="module__list"></div></div>')
|
||||
$('.side .module:eq(0) .module__list').html($('.b3-solo-list'))
|
||||
}
|
||||
},
|
||||
initArticle: function () {
|
||||
this._initArticleCommon()
|
||||
|
||||
setTimeout(function () {
|
||||
if ($('#externalRelevantArticlesWrap li').length === 0) {
|
||||
$('#externalRelevantArticlesWrap').next().remove()
|
||||
$('#externalRelevantArticlesWrap').remove()
|
||||
}
|
||||
|
||||
if ($('#relevantArticlesWrap li').length === 0) {
|
||||
$('#relevantArticlesWrap').prev().remove()
|
||||
$('#relevantArticlesWrap').remove()
|
||||
}
|
||||
|
||||
if ($('#randomArticlesWrap li').length === 0) {
|
||||
$('#randomArticlesWrap').prev().remove()
|
||||
$('#randomArticlesWrap').remove()
|
||||
}
|
||||
}, 1000)
|
||||
$('body').on('click', '.content-reset img', function () {
|
||||
window.open(this.src)
|
||||
})
|
||||
},
|
||||
}
|
||||
Skin.init()
|
||||
2
Jane/js/common.min.js
vendored
2
Jane/js/common.min.js
vendored
@ -15,4 +15,4 @@
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
var Skin={_initCommon:function(e){$(window).scroll(function(){125<$(window).scrollTop()?e.show():e.hide()})},_initAnimation:function(){if(!("IntersectionObserver"in window))return $(".item").addClass("item--active"),!1;window.imageIntersectionObserver?window.imageIntersectionObserver.disconnect():window.imageIntersectionObserver=new IntersectionObserver(function(e){e.forEach(function(e){if(void 0===e.isIntersecting?0!==e.intersectionRatio:e.isIntersecting)$(e.target).addClass("item--active");else{if(1===$(e.target).closest(".side").length||$(e.target).closest(".article-list").hasClass("content")||768<$(e.target).outerHeight())return;$(e.target).removeClass("item--active")}})}),$(".item").each(function(){window.imageIntersectionObserver.observe(this)})},init:function(){Util.initPjax(function(){Skin._initAnimation(),0===$("#articlePage").length&&$(".b3-solo-list").closest(".module").remove()}),Skin._initAnimation(),$("body").on("click",".content-reset img",function(){window.open(this.src)}),this._initCommon($(".icon__up")),$(".header__nav a, .header__m a").each(function(){this.href===location.href&&(this.className="current")}).click(function(){$(".header__nav a, .header__m a").removeClass("current"),this.className="current",$(".header__m .module__list").hide()}),$(".header__logo").click(function(){$(".header__nav a, .header__m a").removeClass("current")})},_initArticleCommon:function(){0<$(".b3-solo-list li").length&&1e3<$(window).width()&&($(".side").prepend('<div class="module"><div class="module__list"></div></div>'),$(".side .module:eq(0) .module__list").html($(".b3-solo-list")))},initArticle:function(){this._initArticleCommon(),setTimeout(function(){0===$("#externalRelevantArticlesWrap li").length&&($("#externalRelevantArticlesWrap").next().remove(),$("#externalRelevantArticlesWrap").remove()),0===$("#relevantArticlesWrap li").length&&($("#relevantArticlesWrap").prev().remove(),$("#relevantArticlesWrap").remove()),0===$("#randomArticlesWrap li").length&&($("#randomArticlesWrap").prev().remove(),$("#randomArticlesWrap").remove())},1e3)}};Skin.init();
|
||||
var Skin={init:function(){Util.initPjax(function(){$(".header a").each(function(){this.href===location.href?this.className="current tooltipped tooltipped__w":this.className="tooltipped tooltipped__w"})}),$(".header a").each(function(){this.href===location.href&&(this.className="current tooltipped tooltipped__w")}).click(function(){$(".header a").removeClass("current"),this.className="current tooltipped tooltipped__w"}),$("body").on("click",".content-reset img",function(){window.open(this.src)})}};Skin.init();
|
||||
@ -28,38 +28,26 @@
|
||||
</head>
|
||||
<body>
|
||||
<#include "header.ftl">
|
||||
<div class="main">
|
||||
<div id="pjax" class="content">
|
||||
<div id="pjax" class="wrapper">
|
||||
<#if pjax><!---- pjax {#pjax} start ----></#if>
|
||||
<main>
|
||||
<div class="module">
|
||||
<div class="module__content ft__center">
|
||||
<i class="icon__home"></i>
|
||||
<a href="${servePath}" class="breadcrumb">${blogTitle}</a>
|
||||
>
|
||||
<i class="icon__link"></i>
|
||||
${linkLabel}
|
||||
</div>
|
||||
<div class="article__item">
|
||||
<h2 class="article__title">
|
||||
<i class="icon__link"></i> ${linkLabel}
|
||||
</h2>
|
||||
<div class="ft__gray">
|
||||
${links?size} ${cntLabel}${linkLabel}
|
||||
</div>
|
||||
<div class="module">
|
||||
<div class="module__list">
|
||||
<#if 0 != links?size>
|
||||
<ul class="list">
|
||||
<#list links as link>
|
||||
<li>
|
||||
<a rel="friend" href="${link.linkAddress}" title="${link.linkDescription}"
|
||||
target="_blank">
|
||||
${link.linkTitle}
|
||||
</a>
|
||||
</li>
|
||||
</#list>
|
||||
</ul>
|
||||
</#if>
|
||||
</div>
|
||||
<div class="tags fn__clear">
|
||||
<#list links as link>
|
||||
<a rel="friend" class="ft__red" href="${link.linkAddress}"
|
||||
target="_blank">
|
||||
${link.linkTitle}
|
||||
<span class="ft__gray">(${link.linkDescription})</span>
|
||||
</a>
|
||||
</#list>
|
||||
</div>
|
||||
</main>
|
||||
<#if pjax><!---- pjax {#pjax} end ----></#if>
|
||||
</div>
|
||||
<#if pjax><!---- pjax {#pjax} end ----></#if>
|
||||
</div>
|
||||
<#include "footer.ftl">
|
||||
</body>
|
||||
|
||||
@ -18,85 +18,78 @@
|
||||
|
||||
-->
|
||||
<#macro comments commentList article>
|
||||
<div class="comments__item">
|
||||
<div class="comments__meta comments__meta--only">${commentLabel}</div>
|
||||
<div class="comments__title">
|
||||
${commentLabel}
|
||||
</div>
|
||||
|
||||
<ul class="comments" id="comments">
|
||||
<ul id="comments">
|
||||
<#list commentList as comment>
|
||||
<#include 'common-comment.ftl'/>
|
||||
</#list>
|
||||
</ul>
|
||||
|
||||
<#if article.commentable>
|
||||
<div class="comments__item">
|
||||
<div class="comments__meta">
|
||||
${postCommentsLabel}
|
||||
</div>
|
||||
<div class="comments__content">
|
||||
<table id="commentForm" class="form">
|
||||
<tbody>
|
||||
<#if !isLoggedIn>
|
||||
<tr>
|
||||
<td>
|
||||
<input placeholder="${commentNameLabel}" type="text" id="commentName"/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input placeholder="${commentEmailLabel}" type="email" id="commentEmail"/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input placeholder="${commentURLLabel}" type="url" id="commentURL"/>
|
||||
</td>
|
||||
</tr>
|
||||
</#if>
|
||||
<tr>
|
||||
<td id="emotions" class="emotions">
|
||||
<span class="em00" title="${em00Label}"></span>
|
||||
<span class="em01" title="${em01Label}"></span>
|
||||
<span class="em02" title="${em02Label}"></span>
|
||||
<span class="em03" title="${em03Label}"></span>
|
||||
<span class="em04" title="${em04Label}"></span>
|
||||
<span class="em05" title="${em05Label}"></span>
|
||||
<span class="em06" title="${em06Label}"></span>
|
||||
<span class="em07" title="${em07Label}"></span>
|
||||
<span class="em08" title="${em08Label}"></span>
|
||||
<span class="em09" title="${em09Label}"></span>
|
||||
<span class="em10" title="${em10Label}"></span>
|
||||
<span class="em11" title="${em11Label}"></span>
|
||||
<span class="em12" title="${em12Label}"></span>
|
||||
<span class="em13" title="${em13Label}"></span>
|
||||
<span class="em14" title="${em14Label}"></span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<textarea rows="5" cols="96" id="comment"></textarea>
|
||||
</td>
|
||||
</tr>
|
||||
<#if !isLoggedIn>
|
||||
<tr>
|
||||
<td>
|
||||
<input style="width:50%" placeholder="${captchaLabel}" type="text"
|
||||
id="commentValidate"/>
|
||||
<img class="comments__captcha" id="captcha" alt="validate" src="${servePath}/captcha"/>
|
||||
</td>
|
||||
</tr>
|
||||
</#if>
|
||||
<tr>
|
||||
<td colspan="2" align="right">
|
||||
<span class="ft__red" id="commentErrorTip"></span>
|
||||
<span class="breadcrumb fn__pointer fn__none" id="cancelCommentButton" onclick="$('#replyForm').remove();page.currentCommentId = ''">${cancelLabel}</span>
|
||||
<button class="btn tag" id="submitCommentButton" onclick="page.submitComment();">${submmitCommentLabel}</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<table id="commentForm" class="form">
|
||||
<tbody>
|
||||
<#if !isLoggedIn>
|
||||
<tr>
|
||||
<td>
|
||||
<input placeholder="${commentNameLabel}" type="text" id="commentName"/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input placeholder="${commentEmailLabel}" type="email" id="commentEmail"/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input placeholder="${commentURLLabel}" type="url" id="commentURL"/>
|
||||
</td>
|
||||
</tr>
|
||||
</#if>
|
||||
<tr>
|
||||
<td id="emotions" class="emotions">
|
||||
<span class="em00" title="${em00Label}"></span>
|
||||
<span class="em01" title="${em01Label}"></span>
|
||||
<span class="em02" title="${em02Label}"></span>
|
||||
<span class="em03" title="${em03Label}"></span>
|
||||
<span class="em04" title="${em04Label}"></span>
|
||||
<span class="em05" title="${em05Label}"></span>
|
||||
<span class="em06" title="${em06Label}"></span>
|
||||
<span class="em07" title="${em07Label}"></span>
|
||||
<span class="em08" title="${em08Label}"></span>
|
||||
<span class="em09" title="${em09Label}"></span>
|
||||
<span class="em10" title="${em10Label}"></span>
|
||||
<span class="em11" title="${em11Label}"></span>
|
||||
<span class="em12" title="${em12Label}"></span>
|
||||
<span class="em13" title="${em13Label}"></span>
|
||||
<span class="em14" title="${em14Label}"></span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<textarea rows="5" cols="96" id="comment"></textarea>
|
||||
</td>
|
||||
</tr>
|
||||
<#if !isLoggedIn>
|
||||
<tr>
|
||||
<td>
|
||||
<input style="width:50%" placeholder="${captchaLabel}" type="text"
|
||||
id="commentValidate"/>
|
||||
<img class="comments__captcha" id="captcha" alt="validate" src="${servePath}/captcha"/>
|
||||
</td>
|
||||
</tr>
|
||||
</#if>
|
||||
<tr>
|
||||
<td colspan="2" align="right">
|
||||
<span class="ft__red" id="commentErrorTip"></span>
|
||||
<button class="fn__none" id="cancelCommentButton" onclick="$('#replyForm').remove();page.currentCommentId = ''">${cancelLabel}</button>
|
||||
<button id="submitCommentButton" onclick="page.submitComment();">${submmitCommentLabel}</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</#if>
|
||||
</#macro>
|
||||
|
||||
@ -122,8 +115,11 @@
|
||||
page.addReplyForm(id, commentFormHTML)
|
||||
};
|
||||
(function () {
|
||||
page.load()
|
||||
Skin.initArticle()
|
||||
page.load({
|
||||
language: {
|
||||
theme: 'tomorrow-night-eighties'
|
||||
}
|
||||
})
|
||||
// emotions
|
||||
page.replaceCommentsEm('#comments .content-reset')
|
||||
<#nested>
|
||||
|
||||
@ -29,21 +29,19 @@
|
||||
</head>
|
||||
<body>
|
||||
<#include "header.ftl">
|
||||
<div class="main">
|
||||
<div id="pjax" class="content">
|
||||
<div id="pjax" class="wrapper">
|
||||
<#if pjax><!---- pjax {#pjax} start ----></#if>
|
||||
<main>
|
||||
<article class="module">
|
||||
<div class="module__content">
|
||||
<div class="content-reset">
|
||||
${page.pageContent}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<@comments commentList=pageComments article=page></@comments>
|
||||
</main>
|
||||
<article class="article__item">
|
||||
<h2 class="article__title">
|
||||
<a href="${servePath}${page.pagePermalink}">${page.pageTitle}</a>
|
||||
</h2>
|
||||
<a class="ft__red" href="#comments"><#if page.pageCommentCount gt 0>${page.pageCommentCount} </#if>${commentLabel}</a>
|
||||
<div class="content-reset article__content">
|
||||
${page.pageContent}
|
||||
</div>
|
||||
</article>
|
||||
<@comments commentList=pageComments article=page></@comments>
|
||||
<#if pjax><!---- pjax {#pjax} end ----></#if>
|
||||
</div>
|
||||
</div>
|
||||
<#include "footer.ftl">
|
||||
<#if pjax><!---- pjax {#pjax} start ----></#if>
|
||||
|
||||
@ -29,25 +29,21 @@
|
||||
</head>
|
||||
<body>
|
||||
<#include "header.ftl">
|
||||
<div class="main">
|
||||
<div id="pjax" class="content">
|
||||
<div id="pjax" class="wrapper">
|
||||
<#if pjax><!---- pjax {#pjax} start ----></#if>
|
||||
<main>
|
||||
<div class="module">
|
||||
<div class="module__content ft__center">
|
||||
<i class="icon__home"></i>
|
||||
<a href="${servePath}" class="breadcrumb">${blogTitle}</a>
|
||||
>
|
||||
<div class="article__item">
|
||||
<h2 class="article__title">
|
||||
<a href="${servePath}/tags.html">
|
||||
<i class="icon__tags"></i>
|
||||
<a href="${servePath}/tags.html" class="breadcrumb">${allTagsLabel}</a>
|
||||
>
|
||||
${tag.tagTitle} ${tagLabel}
|
||||
</div>
|
||||
${allTagsLabel}
|
||||
</a>
|
||||
</h2>
|
||||
<div class="article__more">
|
||||
${tag.tagTitle}
|
||||
</div>
|
||||
<#include "article-list.ftl">
|
||||
</main>
|
||||
<#if pjax><!---- pjax {#pjax} end ----></#if>
|
||||
</div>
|
||||
<#include "article-list.ftl">
|
||||
<#if pjax><!---- pjax {#pjax} end ----></#if>
|
||||
</div>
|
||||
<#include "footer.ftl">
|
||||
</body>
|
||||
|
||||
@ -28,31 +28,25 @@
|
||||
</head>
|
||||
<body>
|
||||
<#include "header.ftl">
|
||||
<div class="main">
|
||||
<div id="pjax" class="content">
|
||||
<div id="pjax" class="wrapper">
|
||||
<#if pjax><!---- pjax {#pjax} start ----></#if>
|
||||
<main>
|
||||
<div class="module">
|
||||
<div class="module__content ft__center">
|
||||
<i class="icon__home"></i>
|
||||
<a href="${servePath}" class="breadcrumb">${blogTitle}</a>
|
||||
>
|
||||
<i class="icon__tags"></i> ${sumLabel} ${tags?size} ${tagLabel}
|
||||
</div>
|
||||
<div class="article__item">
|
||||
<h2 class="article__title">
|
||||
<i class="icon__tags"></i> ${allTagsLabel}
|
||||
</h2>
|
||||
<div class="ft__gray">
|
||||
${sumLabel} ${tags?size} ${tagLabel}
|
||||
</div>
|
||||
|
||||
<div class="module">
|
||||
<div class="module__content fn__clear tags">
|
||||
<#list tags as tag>
|
||||
<a rel="tag" data-count="${tag.tagPublishedRefCount}" class="tag"
|
||||
href="${servePath}/tags/${tag.tagTitle?url('UTF-8')}">
|
||||
<span class="name">${tag.tagTitle}</span>
|
||||
(<b>${tag.tagPublishedRefCount}</b>)
|
||||
</a>
|
||||
</#list>
|
||||
</div>
|
||||
<div class="tags fn__clear">
|
||||
<#list tags as tag>
|
||||
<a rel="tag" data-count="${tag.tagPublishedRefCount}" class="ft__red"
|
||||
href="${servePath}/tags/${tag.tagTitle?url('UTF-8')}">
|
||||
<span class="name">${tag.tagTitle}</span>
|
||||
<span class="ft__gray">(${tag.tagPublishedRefCount})</span>
|
||||
</a>
|
||||
</#list>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<#if pjax><!---- pjax {#pjax} end ----></#if>
|
||||
</div>
|
||||
</div>
|
||||
@ -63,7 +57,7 @@
|
||||
<script>
|
||||
$('.tags').isotope({
|
||||
transitionDuration: '1.5s',
|
||||
itemSelector: '.tag',
|
||||
itemSelector: '.ft__red',
|
||||
layoutMode: 'fitRows',
|
||||
getSortData: {
|
||||
name: '.name'
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user