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

👄 list

Browse Source
This commit is contained in:
Van 2018-09-01 23:51:36 +08:00
parent 8865ba8c87
commit 8cc787a718
No known key found for this signature in database
GPG Key ID: 7059B8783A78F16C
12 changed files with 523 additions and 402 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
nijigen/archive-articles.ftl
View File

@ -20,34 +20,38 @@
<#include "macro-head.ftl"> <#include "macro-head.ftl">
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<@head title="${archiveDate.archiveDateMonth} ${archiveDate.archiveDateYear} (${archiveDate.archiveDatePublishedArticleCount}) - ${blogTitle}"> <@head title="${archiveDate.archiveDateMonth} ${archiveDate.archiveDateYear} (${archiveDate.archiveDatePublishedArticleCount}) - ${blogTitle}">
<meta name="keywords" content="${metaKeywords},${archiveDate.archiveDateYear}${archiveDate.archiveDateMonth}"/> <meta name="keywords"
<meta name="description" content="<#list articles as article>${article.articleTitle}<#if article_has_next>,</#if></#list>"/> content="${metaKeywords},${archiveDate.archiveDateYear}${archiveDate.archiveDateMonth}"/>
</@head> <meta name="description"
</head> content="<#list articles as article>${article.articleTitle}<#if article_has_next>,</#if></#list>"/>
<body> </@head>
<#include "header.ftl"> </head>
<div class="wrapper"> <body>
<div class="main-wrap"> <#include "header.ftl">
<main> <div class="main">
<div class="title"> <main class="content">
<h2 class="tip"> <div class="module">
<i class="icon-inbox"></i> <div class="module__content ft__center">
&nbsp; <i class="icon__home"></i>
<#if "en" == localeString?substring(0, 2)> <a href="${servePath}" class="breadcrumb">${blogTitle}</a>
${archiveDate.archiveDateMonth} ${archiveDate.archiveDateYear} &nbsp; > &nbsp;
<#else> <i class="icon__inbox"></i>
${archiveDate.archiveDateYear} ${yearLabel} ${archiveDate.archiveDateMonth} ${monthLabel} <a href="${servePath}/archives.html" class="breadcrumb">${archiveLabel}</a>
</#if> &nbsp; > &nbsp;
- ${archiveDate.archiveDatePublishedArticleCount} ${articleLabel} <#if "en" == localeString?substring(0, 2)>
</h2> ${archiveDate.archiveDateMonth} ${archiveDate.archiveDateYear}
</div> <#else>
<#include "article-list.ftl"> ${archiveDate.archiveDateYear} ${yearLabel} ${archiveDate.archiveDateMonth} ${monthLabel}
</main> </#if>
<#include "side.ftl"> - ${archiveDate.archiveDatePublishedArticleCount} ${articleLabel}
</div> </div>
</div> </div>
<#include "footer.ftl"> <#include "article-list.ftl">
</body> </main>
<#include "side.ftl">
</div>
<#include "footer.ftl">
</body>
</html> </html>

81
nijigen/archives.ftl
View File

@ -20,42 +20,51 @@
<#include "macro-head.ftl"> <#include "macro-head.ftl">
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<@head title="${blogTitle}"> <@head title="${blogTitle}">
<meta name="keywords" content="${metaKeywords},${archiveLabel}"/> <meta name="keywords" content="${metaKeywords},${archiveLabel}"/>
<meta name="description" content="${metaDescription},${archiveLabel}"/> <meta name="description" content="${metaDescription},${archiveLabel}"/>
</@head> </@head>
</head> </head>
<body> <body>
<#include "header.ftl"> <#include "header.ftl">
<div class="wrapper"> <div class="main">
<div class="main-wrap"> <main class="content">
<main class="other"> <div class="module">
<span class="title"> <div class="module__content ft__center">
<h2><i class="icon-inbox"></i> <i class="icon__home"></i>
&nbsp;${statistic.statisticPublishedBlogArticleCount} ${articleLabel}</h2> <a href="${servePath}" class="breadcrumb">${blogTitle}</a>
</span> &nbsp; > &nbsp;
<#if 0 != archiveDates?size> <i class="icon__inbox"></i>
<ul class="list"> ${statistic.statisticPublishedBlogArticleCount} ${archiveLabel}${articleLabel}
<#list archiveDates as archiveDate>
<li>
<#if "en" == localeString?substring(0, 2)>
<a class="post-title" href="${servePath}/archives/${archiveDate.archiveDateYear}/${archiveDate.archiveDateMonth}">
${archiveDate.monthName} ${archiveDate.archiveDateYear}(${archiveDate.archiveDatePublishedArticleCount})
</a>
<#else>
<a class="post-title" href="${servePath}/archives/${archiveDate.archiveDateYear}/${archiveDate.archiveDateMonth}">
${archiveDate.archiveDateYear} ${yearLabel} ${archiveDate.archiveDateMonth} ${monthLabel}(${archiveDate.archiveDatePublishedArticleCount})
</a>
</#if>
</li>
</#list>
</ul>
</#if>
</main>
<#include "side.ftl">
</div> </div>
</div> </div>
<#include "footer.ftl"> <div class="module">
</body> <div class="module__list">
<#if 0 != archiveDates?size>
<ul>
<#list archiveDates as archiveDate>
<li>
<#if "en" == localeString?substring(0, 2)>
<a href="${servePath}/archives/${archiveDate.archiveDateYear}/${archiveDate.archiveDateMonth}">
${archiveDate.monthName} ${archiveDate.archiveDateYear}
(${archiveDate.archiveDatePublishedArticleCount})
</a>
<#else>
<a href="${servePath}/archives/${archiveDate.archiveDateYear}/${archiveDate.archiveDateMonth}">
${archiveDate.archiveDateYear} ${yearLabel} ${archiveDate.archiveDateMonth} ${monthLabel}
(${archiveDate.archiveDatePublishedArticleCount})
</a>
</#if>
</li>
</#list>
</ul>
</#if>
</div>
</div>
</main>
<#include "side.ftl">
</div>
<#include "footer.ftl">
</body>
</html> </html>

13
nijigen/article-list.ftl
View File

@ -19,7 +19,7 @@
--> -->
<div class="article-list"> <div class="article-list">
<#list articles as article> <#list articles as article>
<article class="item"> <article class="item <#if article_index &lt; 3>item--active</#if>">
<time class="tooltipped tooltipped__n item__date" <time class="tooltipped tooltipped__n item__date"
aria-label="${article.articleCreateDate?string("yyyy")}年"> aria-label="${article.articleCreateDate?string("yyyy")}年">
${article.articleCreateDate?string("m")}月 ${article.articleCreateDate?string("m")}月
@ -41,17 +41,18 @@
</sup> </sup>
</#if> </#if>
</h2> </h2>
<div class="item__date--m">
<div class="item__date--m fn__none">
<i class="icon__date"></i> <i class="icon__date"></i>
${article.articleCreateDate?string("yyy-MM-DD")} ${article.articleCreateDate?string("yyy-MM-DD")}
</div> </div>
<div class="ft__center"> <div class="ft__center">
<#list article.articleTags?split(",") as articleTag> <span class="tag">
<a rel="tag" class="tag" href="${servePath}/tags/${articleTag?url('UTF-8')}"> <i class="icon__tags"></i>
#${articleTag}</a> ${article.articleTags}
</#list> </span>
<a class="tag" href="${servePath}${article.articlePermalink}#comments"> <a class="tag" href="${servePath}${article.articlePermalink}#comments">
<i class="icon__comments"></i> ${article.articleCommentCount} ${commentLabel} <i class="icon__comments"></i> ${article.articleCommentCount} ${commentLabel}
</a> </a>

265
nijigen/article.ftl
View File

@ -21,141 +21,144 @@
<#include "macro-comments.ftl"> <#include "macro-comments.ftl">
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<@head title="${article.articleTitle} - ${blogTitle}"> <@head title="${article.articleTitle} - ${blogTitle}">
<meta name="keywords" content="${article.articleTags}" /> <meta name="keywords" content="${article.articleTags}"/>
<meta name="description" content="${article.articleAbstract?html}" /> <meta name="description" content="${article.articleAbstract?html}"/>
</@head> </@head>
<#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>
<!-- Open Graph --> <!-- Open Graph -->
<meta property="og:locale" content="zh_CN"/> <meta property="og:locale" content="zh_CN"/>
<meta property="og:type" content="article"/> <meta property="og:type" content="article"/>
<meta property="og:title" content="${article.articleTitle}"/> <meta property="og:title" content="${article.articleTitle}"/>
<meta property="og:description" content="${article.articleAbstract?html}"/> <meta property="og:description" content="${article.articleAbstract?html}"/>
<meta property="og:image" content="${article.authorThumbnailURL}"/> <meta property="og:image" content="${article.authorThumbnailURL}"/>
<meta property="og:url" content="${servePath}${article.articlePermalink}"/> <meta property="og:url" content="${servePath}${article.articlePermalink}"/>
<meta property="og:site_name" content="Solo"/> <meta property="og:site_name" content="Solo"/>
<!-- Twitter Card --> <!-- Twitter Card -->
<meta name="twitter:card" content="summary"/> <meta name="twitter:card" content="summary"/>
<meta name="twitter:description" content="${article.articleAbstract?html}"/> <meta name="twitter:description" content="${article.articleAbstract?html}"/>
<meta name="twitter:title" content="${article.articleTitle}"/> <meta name="twitter:title" content="${article.articleTitle}"/>
<meta name="twitter:image" content="${article.authorThumbnailURL}"/> <meta name="twitter:image" content="${article.authorThumbnailURL}"/>
<meta name="twitter:url" content="${servePath}${article.articlePermalink}"/> <meta name="twitter:url" content="${servePath}${article.articlePermalink}"/>
<meta name="twitter:site" content="@DL88250"/> <meta name="twitter:site" content="@DL88250"/>
<meta name="twitter:creator" content="@DL88250"/> <meta name="twitter:creator" content="@DL88250"/>
</head> </head>
<body> <body>
<#include "header.ftl"> <#include "header.ftl">
<div class="wrapper"> <div class="main">
<div class="main-wrap"> <main class="content article-list">
<main> <div class="item item--active">
<article class="post"> <time class="tooltipped tooltipped__n item__date"
<header> aria-label="${article.articleCreateDate?string("yyyy")}年">
<h1> ${article.articleCreateDate?string("m")}月
<a rel="bookmark" href="${servePath}${article.articlePermalink}"> <span class="item__day">${article.articleCreateDate?string("dd")}</span>
${article.articleTitle} </time>
</a>
<#if article.articlePutTop>
<sup>
${topArticleLabel}
</sup>
</#if>
<#if article.hasUpdated>
<sup>
${updatedLabel}
</sup>
</#if>
</h1>
<div class="meta">
<span class="tooltipped tooltipped-n" aria-label="${createDateLabel}">
<i class="icon-date"></i>
<time>
${article.articleCreateDate?string("yyyy-MM-dd")}
</time>
</span>
&nbsp; | &nbsp;
<span class="tooltipped tooltipped-n" aria-label="${commentCountLabel}">
<i class="icon-comments"></i>
<a href="${servePath}${article.articlePermalink}#comments">
${article.articleCommentCount} ${commentLabel}</a>
</span>
&nbsp; | &nbsp;
<span class="tooltipped tooltipped-n" aria-label="${viewCountLabel}">
<i class="icon-views"></i>
${article.articleViewCount} ${viewLabel}
</span>
</div>
</header>
<div class="content-reset"> <h2 class="item__title">
${article.articleContent} <a rel="bookmark" href="${servePath}${article.articlePermalink}">
<#if "" != article.articleSign.signHTML?trim> ${article.articleTitle}
<div> </a>
${article.articleSign.signHTML} <#if article.articlePutTop>
</div> <sup>
</#if> ${topArticleLabel}
</div> </sup>
</#if>
<#if article.hasUpdated>
<sup>
${updatedLabel}
</sup>
</#if>
</h2>
<footer class="tags"> <div class="item__date--m fn__none">
<#list article.articleTags?split(",") as articleTag> <i class="icon__date"></i>
<a class="tag" rel="tag" href="${servePath}/tags/${articleTag?url('UTF-8')}"> ${article.articleCreateDate?string("yyy-MM-DD")}
${articleTag}</a> </div>
</#list>
<#-- div class="copyright"> <div class="ft__center">
${articleCP1Label} <span class="tag">
<a rel="bookmark" href="${servePath}${article.articlePermalink}"> <i class="icon__tags"></i>
${article.articleTitle} ${article.articleTags}
</a> - </span>
<a href="${servePath}"> <a class="tag" href="${servePath}${article.articlePermalink}#comments">
${blogTitle} <i class="icon__comments"></i> ${article.articleCommentCount} ${commentLabel}
</a> </a>
</div --> <span class="tag">
<i class="icon__views"></i>
${article.articleViewCount} ${viewLabel}
</span>
</div>
<div class="rel fn-clear"> <div class="content-reset">
<#if previousArticlePermalink??> ${article.articleAbstract}
<a href="${servePath}${previousArticlePermalink}" rel="prev" <#if "" != article.articleSign.signHTML?trim>
class="fn-left tooltipped tooltipped-n" <div>
aria-label="${previousArticleTitle}"> ${article.articleSign.signHTML}
${previousArticleLabel} </div>
</a> </#if>
</#if>
<#if nextArticlePermalink??>
<a href="${servePath}${nextArticlePermalink}" rel="next"
class="fn-right tooltipped tooltipped-n"
aria-label="${nextArticleTitle}">
${nextArticleLabel}
</a>
</#if>
</div>
</footer>
<@comments commentList=articleComments article=article></@comments>
<div id="externalRelevantArticles" class="list"></div>
<div id="relevantArticles" class="list"></div>
<div id="randomArticles" class="list"></div>
</article>
</main>
<#include "side.ftl">
</div> </div>
</div> </div>
<#include "footer.ftl">
<@comment_script oId=article.oId> <div class="module">
page.tips.externalRelevantArticlesDisplayCount = "${externalRelevantArticlesDisplayCount}"; <div class="module__content fn__clear">
<#if 0 != randomArticlesDisplayCount> <#if previousArticlePermalink??>
page.loadRandomArticles(); <a href="${servePath}${previousArticlePermalink}" rel="prev" class="fn__left breadcrumb">
</#if> ${previousArticleLabel}: ${previousArticleTitle}
<#if 0 != externalRelevantArticlesDisplayCount> </a>
page.loadExternalRelevantArticles("<#list article.articleTags?split(",") as articleTag>${articleTag}<#if articleTag_has_next>,</#if></#list>" </#if>
, "<header class='title'><h2>${externalRelevantArticlesLabel}</h2></header>"); <#if nextArticlePermalink??>
</#if> <a href="${servePath}${nextArticlePermalink}" rel="next"
<#if 0 != relevantArticlesDisplayCount> class="fn__right breadcrumb">
page.loadRelevantArticles('${article.oId}', '<h4>${relevantArticlesLabel}</h4>'); ${nextArticleTitle}: ${nextArticleLabel}
</#if> </a>
</@comment_script> </#if>
</body> </div>
</div>
<@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>&nbsp; &nbsp; &nbsp; &nbsp; </div>
<div class="fn__flex-1" id="randomArticlesWrap">
<div class="module">
<div id="randomArticles" class="module__list"></div>
</div>
</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; </div>
<div class="fn__flex-1" id="relevantArticlesWrap">
<div class="module">
<div id="relevantArticles" class="module__list"></div>
</div>
</div>
</div>
</main>
<#include "side.ftl">
</div>
<#include "footer.ftl">
<@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>
</body>
</html> </html>

50
nijigen/category-articles.ftl
View File

@ -20,29 +20,33 @@
<#include "macro-head.ftl"> <#include "macro-head.ftl">
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<@head title="${category.categoryTitle} - ${blogTitle}"> <@head title="${category.categoryTitle} - ${blogTitle}">
<meta name="keywords" content="${metaKeywords},${category.categoryTitle}"/> <meta name="keywords" content="${metaKeywords},${category.categoryTitle}"/>
<meta name="description" content="<#list articles as article>${article.articleTitle}<#if article_has_next>,</#if></#list>"/> <meta name="description"
</@head> content="<#list articles as article>${article.articleTitle}<#if article_has_next>,</#if></#list>"/>
</head> </@head>
<body> </head>
<#include "header.ftl"> <body>
<div class="wrapper"> <#include "header.ftl">
<div class="main-wrap"> <div class="main">
<main> <main class="content">
<div class="title"> <div class="module">
<h2 class="tip"><i class="icon-category"></i> <div class="module__content ft__center">
&nbsp;${category.categoryTitle} <i class="icon__home"></i>
<small>${category.categoryDescription}</small> <a href="${servePath}" class="breadcrumb">${blogTitle}</a>
</h2> &nbsp; > &nbsp;
<i class="icon__category"></i>
</div> ${categoryLabel}
<#include "article-list.ftl"> &nbsp; > &nbsp;
</main> <span class="tooltipped tooltipped__w"
<#include "side.ftl"> aria-label="${category.categoryDescription}">${category.categoryTitle}</span>
</div> </div>
</div> </div>
<#include "footer.ftl"> <#include "article-list.ftl">
</body> </main>
<#include "side.ftl">
</div>
<#include "footer.ftl">
</body>
</html> </html>

6
nijigen/common-comment.ftl
View File

@ -28,15 +28,17 @@
<#else> <#else>
<a class="user-name" href="${comment.commentURL}" target="_blank">${comment.commentName}</a> <a class="user-name" href="${comment.commentURL}" target="_blank">${comment.commentName}</a>
</#if> </#if>
<#if comment.isReply> <#if comment.isReply>
@<a class="user-name" href="${servePath}${article.permalink}#${comment.commentOriginalCommentId}" @<a class="user-name" href="${servePath}${article.permalink}#${comment.commentOriginalCommentId}"
onmouseover="page.showComment(this, '${comment.commentOriginalCommentId}', 23);" onmouseover="page.showComment(this, '${comment.commentOriginalCommentId}', 23);"
onmouseout="page.hideComment('${comment.commentOriginalCommentId}')" onmouseout="page.hideComment('${comment.commentOriginalCommentId}')"
>${comment.commentOriginalCommentName}</a> >${comment.commentOriginalCommentName}</a>
</#if> </#if>
<time class="ft-gray">${comment.commentDate2?string("yyyy-MM-dd HH:mm")}</time>
<#if article.commentable> <time class="ft-gray">${comment.commentDate?string("yyyy-MM-dd HH:mm")}</time>
<#if article?? && article.commentable>
<a class="reply-btn" href="javascript:replyTo('${comment.oId}')">${replyLabel}</a> <a class="reply-btn" href="javascript:replyTo('${comment.oId}')">${replyLabel}</a>
</#if> </#if>
</div> </div>

30
nijigen/css/base.css
View File

@ -604,6 +604,11 @@ a {
margin-bottom: 30px; margin-bottom: 30px;
box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.2); box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.2);
transition: all .3s; } transition: all .3s; }
.module.item {
transform: translateY(30px);
transition: transform 2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.module.item--active {
transform: translate(0); }
.module:hover { .module:hover {
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.8); } box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.8); }
.module__content { .module__content {
@ -723,6 +728,10 @@ a {
margin: auto; margin: auto;
display: flex; } display: flex; }
.content {
flex: 1;
min-width: 1px; }
.side { .side {
width: 280px; width: 280px;
min-width: 280px; min-width: 280px;
@ -766,13 +775,18 @@ a {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
text-decoration: none; } text-decoration: none; }
.breadcrumb {
color: #7266BA !important; }
.breadcrumb:hover {
color: #3d4450 !important; }
.footer { .footer {
text-align: center; text-align: center;
color: #fff; color: #fff;
padding: 15px; padding: 15px;
margin-bottom: 30px; } margin-bottom: 30px; }
.footer a { .footer a {
color: #3d4450; } color: #7266BA; }
.article-list .item { .article-list .item {
border-radius: 5px; border-radius: 5px;
@ -781,7 +795,10 @@ a {
padding: 15px; padding: 15px;
background-color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.8);
position: relative; position: relative;
transition: all .3s; } transition: all 0.3s, transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transform: perspective(2500px) rotateX(-100deg); }
.article-list .item--active {
transform: perspective(2500px) rotateX(0); }
.article-list .item:hover { .article-list .item:hover {
background-color: #fff; background-color: #fff;
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.8); } box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.8); }
@ -828,7 +845,7 @@ a {
padding: 0 10px; padding: 0 10px;
line-height: 24px; line-height: 24px;
display: inline-block; display: inline-block;
margin-left: 10px; margin: 0 0 10px 10px;
background-color: rgba(114, 102, 186, 0.58); } background-color: rgba(114, 102, 186, 0.58); }
.pagination__item--text { .pagination__item--text {
background-color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.8);
@ -870,7 +887,8 @@ a {
.article-list .item__date--m { .article-list .item__date--m {
text-align: center; text-align: center;
margin-bottom: 10px; margin-bottom: 10px;
color: #3d4450; } color: #3d4450;
display: block; }
.tag { .tag {
margin: 0 5px 10px 0; margin: 0 5px 10px 0;
font-size: 12px; } font-size: 12px; }
@ -892,4 +910,6 @@ a {
.header__m .module__list { .header__m .module__list {
display: none; } display: none; }
.header__m .module__list li { .header__m .module__list li {
background-color: #fff; } } background-color: #fff; }
.module__content.ft__center {
text-align: left; } }

40
nijigen/css/base.scss
View File

@ -50,8 +50,16 @@ a {
box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.2); box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.2);
transition: all .3s; transition: all .3s;
&.item {
transform: translateY(30px);
transition: transform 2s cubic-bezier(.175, .885, .32, 1.275);
&--active {
transform: translate(0);
}
}
&:hover { &:hover {
box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.8); box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.8);
} }
&__content { &__content {
@ -225,6 +233,11 @@ a {
display: flex; display: flex;
} }
.content {
flex: 1;
min-width: 1px;
}
// side // side
.side { .side {
width: 280px; width: 280px;
@ -282,6 +295,13 @@ a {
} }
} }
.breadcrumb {
color: $purple !important;
&:hover {
color: $black !important;
}
}
// footer // footer
.footer { .footer {
text-align: center; text-align: center;
@ -289,7 +309,7 @@ a {
padding: 15px; padding: 15px;
margin-bottom: 30px; margin-bottom: 30px;
a { a {
color: $black; color: $purple;
} }
} }
@ -302,11 +322,16 @@ a {
padding: 15px; padding: 15px;
background-color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.8);
position: relative; position: relative;
transition: all .3s; transition: all .3s, transform 1s cubic-bezier(.175, .885, .32, 1.275);
transform: perspective(2500px) rotateX(-100deg);
&--active {
transform: perspective(2500px) rotateX(0);
}
&:hover { &:hover {
background-color: #fff; background-color: #fff;
box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.8); box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.8);
} }
.tag { .tag {
@ -368,7 +393,7 @@ a {
padding: 0 10px; padding: 0 10px;
line-height: 24px; line-height: 24px;
display: inline-block; display: inline-block;
margin-left: 10px; margin: 0 0 10px 10px;
background-color: rgba($purple, 0.58); background-color: rgba($purple, 0.58);
&--text { &--text {
@ -436,6 +461,7 @@ a {
text-align: center; text-align: center;
margin-bottom: 10px; margin-bottom: 10px;
color: $black; color: $black;
display: block;
} }
.tag { .tag {
@ -473,4 +499,8 @@ a {
} }
} }
} }
.module__content.ft__center {
text-align: left;
}
} }

102
nijigen/dynamic.ftl
View File

@ -20,55 +20,55 @@
<#include "macro-head.ftl"> <#include "macro-head.ftl">
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<@head title="${blogTitle}"> <@head title="${blogTitle}">
<meta name="keywords" content="${metaKeywords},${dynamicLabel}"/> <meta name="keywords" content="${metaKeywords},${dynamicLabel}"/>
<meta name="description" content="${metaDescription},${dynamicLabel}"/> <meta name="description" content="${metaDescription},${dynamicLabel}"/>
</@head> </@head>
</head> </head>
<body> <body>
<#include "header.ftl"> <#include "header.ftl">
<div class="wrapper"> <div class="main">
<div class="main-wrap"> <main class="content">
<main class="post"> <#if 0 != recentComments?size>
<#if 0 != recentComments?size> <ul class="comments" id="comments">
<ul class="comments" id="comments"> <#list recentComments as comment>
<#list recentComments as comment> <#include "common-comment.ftl"/>
<li id="${comment.oId}"> <li id="${comment.oId}">
<div> <div>
<div class="avatar tooltipped tooltipped-n" aria-label="${comment.commentName}" <div class="avatar tooltipped tooltipped-n" aria-label="${comment.commentName}"
style="background-image: url(${comment.commentThumbnailURL})"></div> style="background-image: url(${comment.commentThumbnailURL})"></div>
<main> <main>
<div class="fn-clear"> <div class="fn-clear">
<#if "http://" == comment.commentURL> <#if "http://" == comment.commentURL>
${comment.commentName} ${comment.commentName}
<#else> <#else>
<a class="user-name" href="${comment.commentURL}" target="_blank">${comment.commentName}</a> <a class="user-name" href="${comment.commentURL}"
</#if> target="_blank">${comment.commentName}</a>
<time class="ft-gray">${comment.commentDate?string("yyyy-MM-dd HH:mm")}</time> </#if>
<a class="reply-btn" href="${servePath}${comment.commentSharpURL}">${viewLabel}»</a> <time class="ft-gray">${comment.commentDate?string("yyyy-MM-dd HH:mm")}</time>
</div> <a class="reply-btn"
<div class="content-reset"> href="${servePath}${comment.commentSharpURL}">${viewLabel}»</a>
${comment.commentContent} </div>
</div> <div class="content-reset">
</main> ${comment.commentContent}
</div> </div>
</li> </main>
</#list> </div>
</ul> </li>
</#if> </#list>
</main> </ul>
<#include "side.ftl"> </#if>
</div> </main>
</div> <#include "side.ftl">
<#include "footer.ftl"> </div>
<#include "footer.ftl">
<script> <script>
var $commentContents = $(".comments .content-reset"); var $commentContents = $('.comments .content-reset')
for (var i = 0; i < $commentContents.length; i++) { for (var i = 0; i < $commentContents.length; i++) {
var str = $commentContents[i].innerHTML; var str = $commentContents[i].innerHTML
$commentContents[i].innerHTML = Util.replaceEmString(str); $commentContents[i].innerHTML = Util.replaceEmString(str)
} }
</script> </script>
</body> </body>
</html> </html>

261
nijigen/js/common.js
View File

@ -27,114 +27,163 @@
* @static * @static
*/ */
var Skin = { var Skin = {
_initCommon: function ($goTop) { _initCommon: function ($goTop) {
$('body').on('click', '.content-reset img', function () { $('body').on('click', '.content-reset img', function () {
window.open(this.src); window.open(this.src)
}); })
var $banner = $('header .banner'), var $banner = $('header .banner'),
$navbar = $('header .navbar'); $navbar = $('header .navbar')
$(window).scroll(function () { $(window).scroll(function () {
if ($(window).scrollTop() > 125) { if ($(window).scrollTop() > 125) {
$goTop.show(); $goTop.show()
} else { } else {
$goTop.hide(); $goTop.hide()
} }
if ($(window).width() < 701) { if ($(window).width() < 701) {
return false; return false
} }
if ($(window).scrollTop() > $banner.height()) { if ($(window).scrollTop() > $banner.height()) {
$navbar.addClass('pin'); $navbar.addClass('pin')
$('.main-wrap').parent().css('margin-top', '86px') $('.main-wrap').parent().css('margin-top', '86px')
} else { } else {
$navbar.removeClass('pin'); $navbar.removeClass('pin')
$('.main-wrap').parent().css('margin-top', '0') $('.main-wrap').parent().css('margin-top', '0')
} }
}); })
}, },
init: function () { init: function () {
this._initCommon($('.icon-up')); if (!('IntersectionObserver' in window)) {
$('.item').addClass('item--active')
$('.navbar nav a').each(function () { return false
if (this.href === location.href) {
this.className = 'current'
}
});
$('.responsive .list a').each(function () {
if (this.href === location.href) {
$(this).parent().addClass('current');
}
});
$('.responsive .icon-list').click(function () {
$('.responsive .list').slideToggle();
});
},
_initArticleCommon: function (tocLabel, siteViewLabel) {
// TOC
if ($('.b3-solo-list li').length > 0 && $(window).width() > 1000) {
// add color to sidebar menu
$('aside').addClass('has-toc');
// append toc to sidebar menu
var articleTocHTML = '<ul class="fn-clear"><li class="current" data-tab="toc">' + tocLabel
+ '</li><li data-tab="site">' + siteViewLabel + '</li></ul><section></section>';
$('aside').prepend(articleTocHTML);
var $sectionF = $('aside section:first').html($('.b3-solo-list')),
$sectionL = $('aside section:last');
$sectionF.height($(window).height() - 154).css({ 'overflow': 'auto', 'width': $('aside').width() + 'px'});
$sectionL.hide();
// 切换 tab
$('aside > ul > li').click(function () {
if ($(this).data('tab') === 'toc') {
$sectionL.animate({
"opacity": '0',
"top": '-50px'
}, 300, function () {
$sectionF.show().css('top', '-50px');
$sectionF.animate({
"opacity": '1',
"top": '0'
}, 300).show();
});
} else {
$sectionF.animate({
"opacity": '0',
"top": '-50px'
}, 300, function () {
$sectionF.hide().css('top', '-50px');
$sectionL.animate({
"opacity": '1',
"top": '0'
}, 300).show();
}).hide();
}
$('aside > ul > li').removeClass('current');
$(this).addClass('current');
});
$(window).scroll(function () {
if ($(window).scrollTop() > 125) {
$('aside section:eq(0)').css({
position: "fixed",
top: "51px",
backgroundColor: "#fff"
})
} else {
$('aside section:eq(0)').css({
position: "inherit",
borderLeft: 0
})
}
});
}
},
initArticle: function (tocLabel, siteViewLabel) {
this._initArticleCommon(tocLabel, siteViewLabel);
} }
};
Skin.init(); if (window.imageIntersectionObserver) {
window.imageIntersectionObserver.disconnect()
$('.item').each(function () {
window.imageIntersectionObserver.observe(this)
})
} else {
window.imageIntersectionObserver = new IntersectionObserver((entries) => {
entries.forEach((entrie) => {
if (typeof entrie.isIntersecting === 'undefined'
? entrie.intersectionRatio !== 0 : entrie.isIntersecting) {
$(entrie.target).addClass('item--active')
} else {
if ($(entrie.target).closest('.side').length === 1) {
return
}
$(entrie.target).removeClass('item--active')
}
})
})
$('.item').each(function () {
window.imageIntersectionObserver.observe(this)
})
}
this._initCommon($('.icon-up'))
$('.navbar nav a').each(function () {
if (this.href === location.href) {
this.className = 'current'
}
})
$('.responsive .list a').each(function () {
if (this.href === location.href) {
$(this).parent().addClass('current')
}
})
$('.responsive .icon-list').click(function () {
$('.responsive .list').slideToggle()
})
},
_initArticleCommon: function (tocLabel, siteViewLabel) {
// TOC
if ($('.b3-solo-list li').length > 0 && $(window).width() > 1000) {
// add color to sidebar menu
$('aside').addClass('has-toc')
// append toc to sidebar menu
var articleTocHTML = '<ul class="fn-clear"><li class="current" data-tab="toc">' +
tocLabel
+ '</li><li data-tab="site">' + siteViewLabel +
'</li></ul><section></section>'
$('aside').prepend(articleTocHTML)
var $sectionF = $('aside section:first').html($('.b3-solo-list')),
$sectionL = $('aside section:last')
$sectionF.height($(window).height() - 154).
css({'overflow': 'auto', 'width': $('aside').width() + 'px'})
$sectionL.hide()
// 切换 tab
$('aside > ul > li').click(function () {
if ($(this).data('tab') === 'toc') {
$sectionL.animate({
'opacity': '0',
'top': '-50px',
}, 300, function () {
$sectionF.show().css('top', '-50px')
$sectionF.animate({
'opacity': '1',
'top': '0',
}, 300).show()
})
} else {
$sectionF.animate({
'opacity': '0',
'top': '-50px',
}, 300, function () {
$sectionF.hide().css('top', '-50px')
$sectionL.animate({
'opacity': '1',
'top': '0',
}, 300).show()
}).hide()
}
$('aside > ul > li').removeClass('current')
$(this).addClass('current')
})
$(window).scroll(function () {
if ($(window).scrollTop() > 125) {
$('aside section:eq(0)').css({
position: 'fixed',
top: '51px',
backgroundColor: '#fff',
})
} else {
$('aside section:eq(0)').css({
position: 'inherit',
borderLeft: 0,
})
}
})
}
},
initArticle: function (tocLabel, siteViewLabel) {
this._initArticleCommon(tocLabel, siteViewLabel)
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)
},
}
Skin.init()

12
nijigen/side.ftl
View File

@ -35,7 +35,7 @@
</header> </header>
</section> </section>
<div class="module meta"> <div class="module item">
<header class="module__header ft__center"> <header class="module__header ft__center">
${adminUser.userName} ${adminUser.userName}
</header> </header>
@ -46,7 +46,7 @@
</div> </div>
<#if 0 != mostUsedCategories?size> <#if 0 != mostUsedCategories?size>
<div class="module"> <div class="module item">
<header class="module__header"> <header class="module__header">
${categoryLabel} ${categoryLabel}
</header> </header>
@ -62,7 +62,7 @@
</#if> </#if>
<#if 0 != mostUsedTags?size> <#if 0 != mostUsedTags?size>
<div class="module"> <div class="module item">
<header class="module__header">${tagsLabel}</header> <header class="module__header">${tagsLabel}</header>
<main class="module__content--three module__content fn__clear"> <main class="module__content--three module__content fn__clear">
<#list mostUsedTags as tag> <#list mostUsedTags as tag>
@ -77,7 +77,7 @@
</#if> </#if>
<#if 0 != mostCommentArticles?size> <#if 0 != mostCommentArticles?size>
<div class="module"> <div class="module item">
<header class="module__header">${mostCommentArticlesLabel}</header> <header class="module__header">${mostCommentArticlesLabel}</header>
<main class="module__list"> <main class="module__list">
<ul> <ul>
@ -95,7 +95,7 @@
</#if> </#if>
<#if 0 != mostViewCountArticles?size> <#if 0 != mostViewCountArticles?size>
<div class="module"> <div class="module item">
<header class="module__header">${mostViewCountArticlesLabel}</header> <header class="module__header">${mostViewCountArticlesLabel}</header>
<main class="module__list"> <main class="module__list">
<ul> <ul>
@ -112,7 +112,7 @@
</div> </div>
</#if> </#if>
<div class="module"> <div class="module item">
<div class="module__header"> <div class="module__header">
<div class="fn__flex"> <div class="fn__flex">
<a href="${servePath}/archives.html" class="fn__flex-1 ft__center"> <a href="${servePath}/archives.html" class="fn__flex-1 ft__center">

5
nijigen/skin.properties
View File

@ -18,9 +18,8 @@
# #
# Description: Spaces skin. # Description: Spaces skin.
# Version: 1.0.0.0, Feb 17, 2017 # Version: 1.0.0.0, Sep 1, 2018
# Author: Liyuan Li # Author: Liyuan Li
# #
name=9IPHP name=nijigen
memo=https://github.com/9IPHP