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

💄 #12494

Browse Source
This commit is contained in:
Liang Ding 2018-09-02 17:07:52 +08:00
commit a3a62871fb
No known key found for this signature in database
GPG Key ID: 136F30F901A2231D
20 changed files with 2091 additions and 629 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
README.md
View File

@ -1,17 +1,88 @@
# Solo 官方皮肤 # Solo 官方皮肤
1. [开发步骤](https://hacpai.com/article/1493814851007) 🎸 A small and beautiful blogging system written in Java. 一款小而美的 Java 博客系统。 https://solo.b3log.org
2. [模板变量](https://hacpai.com/article/1493814851007#toc_h2_4)
3. [皮肤定制](https://github.com/b3log/solo/wiki/skins_custom)
4. [版本更新](https://github.com/b3log/solo/wiki/Skins_change_log)
---- ## 简介
皮肤按照名称命名后存放于 skins 文件夹中。 [Solo](https://github.com/b3log/solo) 是**一个命令**就能搭建好的 Java 开源博客系统，并内置了 18+ 套精心制作的皮肤。除此之外，Solo 还有着非常活跃的[社区](https://hacpai.com)，文章分享到社区后可以让很多人看到，产生丰富的交流互动。
其中 skin-preview 存放皮肤的预览图片，toolers 存放更新版本和压缩 js、css 的 NodeJS 脚本，部署时请**注意不要拷贝这两个目录**。 **如果你不想自己维护服务器，可以购买我们运维的 Solo 直接使用，细节请联系 QQ845765。**
## 文档
* [用户指南](https://hacpai.com/article/1492881378588)
* [开发指南](https://hacpai.com/article/1493822943172)
* [皮肤开发](https://hacpai.com/article/1493814851007)
* [插件开发](https://docs.google.com/document/pub?id=15H7Q3EBo-44v61Xp_epiYY7vK_gPJLkQaT7T1gkE64w&pli=1)
## 社区 ## 社区
* [讨论区](https://hacpai.com/tag/solo) * [讨论区](https://hacpai.com/tag/solo)
* [报告问题](https://github.com/b3log/solo/issues/new/choose)
## 皮肤
* [Medium](https://github.com/b3log/solo-skins/tree/master/Medium)
![Medium](https://solo.b3log.org/images/themes/medium.png)
* [9IPHP](https://github.com/b3log/solo-skins/tree/master/9IPHP)
![9IPHP](https://solo.b3log.org/images/themes/9IPHP.jpg)
* [next](https://github.com/b3log/solo-skins/tree/master/next)
![next](https://solo.b3log.org/images/themes/next.jpg)
* [yilia](https://github.com/b3log/solo-skins/tree/master/yilia)
![yilia](https://solo.b3log.org/images/themes/yilia.jpg)
* [Finding](https://github.com/b3log/solo-skins/tree/master/Finding)
![Finding](https://solo.b3log.org/images/themes/finding.jpg)
* [metro-hot](https://github.com/b3log/solo-skins/tree/master/metro-hot)
![metro-hot](https://solo.b3log.org/images/themes/metro-hot.jpg)
* [timeline](https://github.com/b3log/solo-skins/tree/master/timeline)
![timeline](https://solo.b3log.org/images/themes/timeline.jpg)
* [ease](https://github.com/b3log/solo-skins/tree/master/ease)
![ease](https://solo.b3log.org/images/themes/ease.jpg)
* [mobile](https://github.com/b3log/solo-skins/tree/master/mobile) <br>
![mobile](https://solo.b3log.org/images/themes/mobile.jpg)
* [Andrea](https://github.com/b3log/solo-skins/tree/master/Andrea)
![Andrea](https://solo.b3log.org/images/themes/andrea.jpg)
* [classic](https://github.com/b3log/solo-skins/tree/master/classic)
![classic](https://solo.b3log.org/images/themes/classic.jpg)
* [Community](https://github.com/b3log/solo-skins/tree/master/Community)
![Community](https://solo.b3log.org/images/themes/community.jpg)
* [favourite](https://github.com/b3log/solo-skins/tree/master/favourite)
![favourite](https://solo.b3log.org/images/themes/favourite.jpg)
* [tree-house](https://github.com/b3log/solo-skins/tree/master/tree-house)
![tree-house](https://solo.b3log.org/images/themes/tree-house.jpg)
* [i-nove](https://github.com/b3log/solo-skins/tree/master/i-nove)
![i-nove](https://solo.b3log.org/images/themes/i-nove.jpg)
* [NeoEase](https://github.com/b3log/solo-skins/tree/master/NeoEase)
![NeoEase](https://solo.b3log.org/images/themes/neoease.jpg)
* [owmx-3.0](https://github.com/b3log/solo-skins/tree/master/owmx-3.0)
![owmx-3.0](https://solo.b3log.org/images/themes/owmx-3.0.jpg)
* [bruce](https://github.com/b3log/solo-skins/tree/master/bruce)
![bruce](https://solo.b3log.org/images/themes/bruce.jpg)
----
<p align = "center">
<strong>小而美博客系统</strong>
<br><br>
<img src="https://cloud.githubusercontent.com/assets/873584/26024667/c031e40a-3808-11e7-9176-f2c9af01bd64.png">
</p>

26
nijigen/archive-articles.ftl
View File

@ -22,32 +22,36 @@
<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}"/>
<meta name="description"
content="<#list articles as article>${article.articleTitle}<#if article_has_next>,</#if></#list>"/>
</@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> <div class="module">
<div class="title"> <div class="module__content ft__center">
<h2 class="tip"> <i class="icon__home"></i>
<i class="icon-inbox"></i> <a href="${servePath}" class="breadcrumb">${blogTitle}</a>
&nbsp; &nbsp; > &nbsp;
<i class="icon__inbox"></i>
<a href="${servePath}/archives.html" class="breadcrumb">${archiveLabel}</a>
&nbsp; > &nbsp;
<#if "en" == localeString?substring(0, 2)> <#if "en" == localeString?substring(0, 2)>
${archiveDate.archiveDateMonth} ${archiveDate.archiveDateYear} ${archiveDate.archiveDateMonth} ${archiveDate.archiveDateYear}
<#else> <#else>
${archiveDate.archiveDateYear} ${yearLabel} ${archiveDate.archiveDateMonth} ${monthLabel} ${archiveDate.archiveDateYear} ${yearLabel} ${archiveDate.archiveDateMonth} ${monthLabel}
</#if> </#if>
- ${archiveDate.archiveDatePublishedArticleCount} ${articleLabel} - ${archiveDate.archiveDatePublishedArticleCount} ${articleLabel}
</h2> </div>
</div> </div>
<#include "article-list.ftl"> <#include "article-list.ftl">
</main> </main>
<#include "side.ftl"> <#include "side.ftl">
</div> </div>
</div>
<#include "footer.ftl"> <#include "footer.ftl">
</body> </body>
</html> </html>

35
nijigen/archives.ftl
View File

@ -28,34 +28,43 @@
</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;
<i class="icon__inbox"></i>
${statistic.statisticPublishedBlogArticleCount} ${archiveLabel}${articleLabel}
</div>
</div>
<div class="module">
<div class="module__list">
<#if 0 != archiveDates?size> <#if 0 != archiveDates?size>
<ul class="list"> <ul>
<#list archiveDates as archiveDate> <#list archiveDates as archiveDate>
<li> <li>
<#if "en" == localeString?substring(0, 2)> <#if "en" == localeString?substring(0, 2)>
<a class="post-title" href="${servePath}/archives/${archiveDate.archiveDateYear}/${archiveDate.archiveDateMonth}"> <a href="${servePath}/archives/${archiveDate.archiveDateYear}/${archiveDate.archiveDateMonth}">
${archiveDate.monthName} ${archiveDate.archiveDateYear}(${archiveDate.archiveDatePublishedArticleCount}) ${archiveDate.monthName} ${archiveDate.archiveDateYear}
(${archiveDate.archiveDatePublishedArticleCount})
</a> </a>
<#else> <#else>
<a class="post-title" href="${servePath}/archives/${archiveDate.archiveDateYear}/${archiveDate.archiveDateMonth}"> <a href="${servePath}/archives/${archiveDate.archiveDateYear}/${archiveDate.archiveDateMonth}">
${archiveDate.archiveDateYear} ${yearLabel} ${archiveDate.archiveDateMonth} ${monthLabel}(${archiveDate.archiveDatePublishedArticleCount}) ${archiveDate.archiveDateYear} ${yearLabel} ${archiveDate.archiveDateMonth} ${monthLabel}
(${archiveDate.archiveDatePublishedArticleCount})
</a> </a>
</#if> </#if>
</li> </li>
</#list> </#list>
</ul> </ul>
</#if> </#if>
</div>
</div>
</main> </main>
<#include "side.ftl"> <#include "side.ftl">
</div> </div>
</div>
<#include "footer.ftl"> <#include "footer.ftl">
</body> </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>

117
nijigen/article.ftl
View File

@ -51,12 +51,16 @@
</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")}月
<span class="item__day">${article.articleCreateDate?string("dd")}</span>
</time>
<h2 class="item__title">
<a rel="bookmark" href="${servePath}${article.articlePermalink}"> <a rel="bookmark" href="${servePath}${article.articlePermalink}">
${article.articleTitle} ${article.articleTitle}
</a> </a>
@ -70,91 +74,90 @@
${updatedLabel} ${updatedLabel}
</sup> </sup>
</#if> </#if>
</h1> </h2>
<div class="meta">
<span class="tooltipped tooltipped-n" aria-label="${createDateLabel}"> <div class="item__date--m fn__none">
<i class="icon-date"></i> <i class="icon__date"></i>
<time> ${article.articleCreateDate?string("yyy-MM-DD")}
${article.articleCreateDate?string("yyyy-MM-dd")} </div>
</time>
<div class="ft__center">
<span class="tag">
<i class="icon__tags"></i>
${article.articleTags}
</span> </span>
&nbsp; | &nbsp; <a class="tag" href="${servePath}${article.articlePermalink}#comments">
<span class="tooltipped tooltipped-n" aria-label="${commentCountLabel}"> <i class="icon__comments"></i> ${article.articleCommentCount} ${commentLabel}
<i class="icon-comments"></i> </a>
<a href="${servePath}${article.articlePermalink}#comments"> <span class="tag">
${article.articleCommentCount} ${commentLabel}</a> <i class="icon__views"></i>
</span>
&nbsp; | &nbsp;
<span class="tooltipped tooltipped-n" aria-label="${viewCountLabel}">
<i class="icon-views"></i>
${article.articleViewCount} ${viewLabel} ${article.articleViewCount} ${viewLabel}
</span> </span>
</div> </div>
</header>
<div class="content-reset"> <div class="content-reset">
${article.articleContent} ${article.articleAbstract}
<#if "" != article.articleSign.signHTML?trim> <#if "" != article.articleSign.signHTML?trim>
<div> <div>
${article.articleSign.signHTML} ${article.articleSign.signHTML}
</div> </div>
</#if> </#if>
</div> </div>
</div>
<footer class="tags"> <div class="module">
<#list article.articleTags?split(",") as articleTag> <div class="module__content fn__clear">
<a class="tag" rel="tag" href="${servePath}/tags/${articleTag?url('UTF-8')}">
${articleTag}</a>
</#list>
<#-- div class="copyright">
${articleCP1Label}
<a rel="bookmark" href="${servePath}${article.articlePermalink}">
${article.articleTitle}
</a> -
<a href="${servePath}">
${blogTitle}
</a>
</div -->
<div class="rel fn-clear">
<#if previousArticlePermalink??> <#if previousArticlePermalink??>
<a href="${servePath}${previousArticlePermalink}" rel="prev" <a href="${servePath}${previousArticlePermalink}" rel="prev" class="fn__left breadcrumb">
class="fn-left tooltipped tooltipped-n" ${previousArticleLabel}: ${previousArticleTitle}
aria-label="${previousArticleTitle}">
${previousArticleLabel}
</a> </a>
</#if> </#if>
<#if nextArticlePermalink??> <#if nextArticlePermalink??>
<a href="${servePath}${nextArticlePermalink}" rel="next" <a href="${servePath}${nextArticlePermalink}" rel="next"
class="fn-right tooltipped tooltipped-n" class="fn__right breadcrumb">
aria-label="${nextArticleTitle}"> ${nextArticleTitle}: ${nextArticleLabel}
${nextArticleLabel}
</a> </a>
</#if> </#if>
</div> </div>
</footer> </div>
<@comments commentList=articleComments article=article></@comments> <@comments commentList=articleComments article=article></@comments>
<div id="externalRelevantArticles" class="list"></div>
<div id="relevantArticles" class="list"></div> <div class="fn__flex">
<div id="randomArticles" class="list"></div> <div class="fn__flex-1" id="externalRelevantArticlesWrap">
</article> <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> </main>
<#include "side.ftl"> <#include "side.ftl">
</div> </div>
</div>
<#include "footer.ftl"> <#include "footer.ftl">
<@comment_script oId=article.oId> <@comment_script oId=article.oId>
page.tips.externalRelevantArticlesDisplayCount = "${externalRelevantArticlesDisplayCount}"; page.tips.externalRelevantArticlesDisplayCount = "${externalRelevantArticlesDisplayCount}";
<#if 0 != randomArticlesDisplayCount> <#if 0 != randomArticlesDisplayCount>
page.loadRandomArticles(); page.loadRandomArticles('<header class="module__header">${randomArticles1Label}</header>');
</#if> </#if>
<#if 0 != externalRelevantArticlesDisplayCount> <#if 0 != externalRelevantArticlesDisplayCount>
page.loadExternalRelevantArticles("<#list article.articleTags?split(",") as articleTag>${articleTag}<#if articleTag_has_next>,</#if></#list>" page.loadExternalRelevantArticles("<#list article.articleTags?split(",") as articleTag>${articleTag}<#if articleTag_has_next>,</#if></#list>"
, "<header class='title'><h2>${externalRelevantArticlesLabel}</h2></header>"); , "<header class='module__header'>${externalRelevantArticlesLabel}</header>");
</#if> </#if>
<#if 0 != relevantArticlesDisplayCount> <#if 0 != relevantArticlesDisplayCount>
page.loadRelevantArticles('${article.oId}', '<h4>${relevantArticlesLabel}</h4>'); page.loadRelevantArticles('${article.oId}',
'<header class="module__header">${relevantArticlesLabel}</header>');
</#if> </#if>
</@comment_script> </@comment_script>
</body> </body>

26
nijigen/category-articles.ftl
View File

@ -23,26 +23,30 @@
<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"
content="<#list articles as article>${article.articleTitle}<#if article_has_next>,</#if></#list>"/>
</@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> <div class="module">
<div class="title"> <div class="module__content ft__center">
<h2 class="tip"><i class="icon-category"></i> <i class="icon__home"></i>
&nbsp;${category.categoryTitle} <a href="${servePath}" class="breadcrumb">${blogTitle}</a>
<small>${category.categoryDescription}</small> &nbsp; > &nbsp;
</h2> <i class="icon__category"></i>
${categoryLabel}
&nbsp; > &nbsp;
<span class="tooltipped tooltipped__w"
aria-label="${category.categoryDescription}">${category.categoryTitle}</span>
</div>
</div> </div>
<#include "article-list.ftl"> <#include "article-list.ftl">
</main> </main>
<#include "side.ftl"> <#include "side.ftl">
</div> </div>
</div>
<#include "footer.ftl"> <#include "footer.ftl">
</body> </body>
</html> </html>

30
nijigen/common-comment.ftl
View File

@ -17,32 +17,32 @@
along with this program. If not, see <https://www.gnu.org/licenses/>. along with this program. If not, see <https://www.gnu.org/licenses/>.
--> -->
<li id="${comment.oId}"> <li id="${comment.oId}" class="comments__item">
<div> <div class="comments__avatar" style="background-image: url(${comment.commentThumbnailURL})"></div>
<div class="avatar tooltipped tooltipped-n" aria-label="${comment.commentName}" <div class="comments__meta fn__flex">
style="background-image: url(${comment.commentThumbnailURL})"></div> <div class="fn__flex-1">
<main>
<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 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 href="${servePath}${article.permalink}#${comment.commentOriginalCommentId}"
onmouseover="page.showComment(this, '${comment.commentOriginalCommentId}', 23);" onmouseover="page.showComment(this, '${comment.commentOriginalCommentId}', 28);"
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>
<a class="reply-btn" href="javascript:replyTo('${comment.oId}')">${replyLabel}</a>
</#if>
</div> </div>
<time>${comment.commentDate?string("yyyy-MM-dd HH:mm")}</time>
</div>
<main class="comments__content fn__clear">
<div class="content-reset"> <div class="content-reset">
${comment.commentContent} ${comment.commentContent}
</div> </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> </main>
</div>
</li> </li>

1084
nijigen/css/base.css
View File

File diff suppressed because one or more lines are too long

18
nijigen/css/base.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

172
nijigen/css/base.scss
View File

@ -25,6 +25,7 @@
@import "../../../scss/reset-content"; @import "../../../scss/reset-content";
@import "../../../scss/function"; @import "../../../scss/function";
@import "../../../scss/tooltipped"; @import "../../../scss/tooltipped";
@import "../../../scss/comment";
@import "icon"; @import "icon";
$purple: #7266BA !default; $purple: #7266BA !default;
@ -42,6 +43,14 @@ a {
cursor: url(../images/pointer.cur), url(../images/pointer.cur), auto cursor: url(../images/pointer.cur), url(../images/pointer.cur), auto
} }
.content-reset img {
vertical-align: sub;
}
.ft__red {
color: $red;
}
// module // module
.module { .module {
border-radius: 5px; border-radius: 5px;
@ -50,6 +59,14 @@ 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);
} }
@ -208,6 +225,13 @@ a {
&__nav { &__nav {
text-align: center; text-align: center;
img {
float: left;
height: 20px;
width: 20px;
margin: 15px 5px 0 0;
}
} }
&__login { &__login {
@ -225,6 +249,11 @@ a {
display: flex; display: flex;
} }
.content {
flex: 1;
min-width: 1px;
}
// side // side
.side { .side {
width: 280px; width: 280px;
@ -282,6 +311,13 @@ a {
} }
} }
.breadcrumb {
color: $purple !important;
&:hover {
color: $black !important;
}
}
// footer // footer
.footer { .footer {
text-align: center; text-align: center;
@ -289,7 +325,7 @@ a {
padding: 15px; padding: 15px;
margin-bottom: 30px; margin-bottom: 30px;
a { a {
color: $black; color: $purple;
} }
} }
@ -302,7 +338,12 @@ 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;
@ -368,7 +409,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 {
@ -387,6 +428,126 @@ a {
} }
} }
// comment
.comments {
position: relative;
&__item {
border-radius: 5px;
list-style: none;
margin-bottom: 30px;
box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.2);
transition: all .3s;
position: relative;
&:hover {
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.8);
.comments__avatar {
transform: rotate(720deg);
border-radius: 0;
}
.comments__content {
background-color: #fff;
}
.comments__meta {
background-color: rgba(217, 237, 247, 1);
}
}
}
&__meta {
border-radius: 5px 5px 0 0;
min-height: 37px;
line-height: 37px;
padding-left: 45px;
background: rgba(217, 237, 247, 0.6);
color: $black;
padding-right: 15px;
a {
font-weight: 700;
color: $black;
&:hover {
color: $red;
}
}
&--only {
border-radius: 5px;
}
}
&__content {
border-radius: 0 0 5px 5px;
background-color: rgba(255, 255, 255, 0.8);
padding: 15px 15px 15px 45px;
}
&__avatar {
position: absolute;
height: 54px;
width: 54px;
background-position: center center;
background-size: cover;
border: 2px solid #fff;
border-radius: 35px;
left: -29px;
top: 15px;
transition: all .8s ease;
}
&__captcha {
height: 30px;
}
&__reply {
border-radius: 5px;
margin: 15px auto 0
}
}
.comment-body-ref {
right: 0;
position: absolute;
left: 64px;
.breadcrumb {
display: none;
}
}
.form {
input,
textarea {
border: 1px solid #d1d5da;
background-color: #fafafa;
border-radius: 3px;
box-shadow: inset 0 1px 2px rgba(27, 31, 35, .075);
padding: 7px 8px;
width: 100%;
line-height: 17px;
box-sizing: border-box;
&:focus {
background-color: #fff;
box-shadow: inset 0 1px 2px rgba(27, 31, 35, .075), 0 0 0 0.2em #dbedff;
border: 1px solid #4285f4;
}
}
.ft__red {
line-height: 34px;
}
.btn {
float: right;
height: 34px;
margin: 0 0 0 10px;
padding: 0 15px;
}
}
@media (max-width: 768px) { @media (max-width: 768px) {
.header__nav { .header__nav {
display: none; display: none;
@ -436,6 +597,7 @@ a {
text-align: center; text-align: center;
margin-bottom: 10px; margin-bottom: 10px;
color: $black; color: $black;
display: block;
} }
.tag { .tag {
@ -473,4 +635,8 @@ a {
} }
} }
} }
.module__content.ft__center {
text-align: left;
}
} }

44
nijigen/dynamic.ftl
View File

@ -28,46 +28,32 @@
</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"> <div class="module">
<div class="module__content ft__center">
<i class="icon__home"></i>
<a href="${servePath}" class="breadcrumb">${blogTitle}</a>
&nbsp; > &nbsp;
<i class="icon__refresh"></i> ${dynamicLabel}
</div>
</div>
<#if 0 != recentComments?size> <#if 0 != recentComments?size>
<ul class="comments" id="comments"> <ul class="comments">
<#list recentComments as comment> <#list recentComments as comment>
<li id="${comment.oId}"> <#include "common-comment.ftl"/>
<div>
<div class="avatar tooltipped tooltipped-n" aria-label="${comment.commentName}"
style="background-image: url(${comment.commentThumbnailURL})"></div>
<main>
<div class="fn-clear">
<#if "http://" == comment.commentURL>
${comment.commentName}
<#else>
<a class="user-name" href="${comment.commentURL}" target="_blank">${comment.commentName}</a>
</#if>
<time class="ft-gray">${comment.commentDate?string("yyyy-MM-dd HH:mm")}</time>
<a class="reply-btn" href="${servePath}${comment.commentSharpURL}">${viewLabel}»</a>
</div>
<div class="content-reset">
${comment.commentContent}
</div>
</main>
</div>
</li>
</#list> </#list>
</ul> </ul>
</#if> </#if>
</main> </main>
<#include "side.ftl"> <#include "side.ftl">
</div> </div>
</div>
<#include "footer.ftl"> <#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>

145
nijigen/js/common.js
View File

@ -29,112 +29,161 @@
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')
return false
}
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 () { $('.navbar nav a').each(function () {
if (this.href === location.href) { if (this.href === location.href) {
this.className = 'current' this.className = 'current'
} }
}); })
$('.responsive .list a').each(function () { $('.responsive .list a').each(function () {
if (this.href === location.href) { if (this.href === location.href) {
$(this).parent().addClass('current'); $(this).parent().addClass('current')
} }
}); })
$('.responsive .icon-list').click(function () { $('.responsive .icon-list').click(function () {
$('.responsive .list').slideToggle(); $('.responsive .list').slideToggle()
}); })
}, },
_initArticleCommon: function (tocLabel, siteViewLabel) { _initArticleCommon: function (tocLabel, siteViewLabel) {
// TOC // TOC
if ($('.b3-solo-list li').length > 0 && $(window).width() > 1000) { if ($('.b3-solo-list li').length > 0 && $(window).width() > 1000) {
// add color to sidebar menu // add color to sidebar menu
$('aside').addClass('has-toc'); $('aside').addClass('has-toc')
// append toc to sidebar menu // append toc to sidebar menu
var articleTocHTML = '<ul class="fn-clear"><li class="current" data-tab="toc">' + tocLabel var articleTocHTML = '<ul class="fn-clear"><li class="current" data-tab="toc">' +
+ '</li><li data-tab="site">' + siteViewLabel + '</li></ul><section></section>'; tocLabel
$('aside').prepend(articleTocHTML); + '</li><li data-tab="site">' + siteViewLabel +
'</li></ul><section></section>'
$('aside').prepend(articleTocHTML)
var $sectionF = $('aside section:first').html($('.b3-solo-list')), var $sectionF = $('aside section:first').html($('.b3-solo-list')),
$sectionL = $('aside section:last'); $sectionL = $('aside section:last')
$sectionF.height($(window).height() - 154).css({ 'overflow': 'auto', 'width': $('aside').width() + 'px'}); $sectionF.height($(window).height() - 154).
$sectionL.hide(); css({'overflow': 'auto', 'width': $('aside').width() + 'px'})
$sectionL.hide()
// 切换 tab // 切换 tab
$('aside > ul > li').click(function () { $('aside > ul > li').click(function () {
if ($(this).data('tab') === 'toc') { if ($(this).data('tab') === 'toc') {
$sectionL.animate({ $sectionL.animate({
"opacity": '0', 'opacity': '0',
"top": '-50px' 'top': '-50px',
}, 300, function () { }, 300, function () {
$sectionF.show().css('top', '-50px'); $sectionF.show().css('top', '-50px')
$sectionF.animate({ $sectionF.animate({
"opacity": '1', 'opacity': '1',
"top": '0' 'top': '0',
}, 300).show(); }, 300).show()
}); })
} else { } else {
$sectionF.animate({ $sectionF.animate({
"opacity": '0', 'opacity': '0',
"top": '-50px' 'top': '-50px',
}, 300, function () { }, 300, function () {
$sectionF.hide().css('top', '-50px'); $sectionF.hide().css('top', '-50px')
$sectionL.animate({ $sectionL.animate({
"opacity": '1', 'opacity': '1',
"top": '0' 'top': '0',
}, 300).show(); }, 300).show()
}).hide(); }).hide()
} }
$('aside > ul > li').removeClass('current'); $('aside > ul > li').removeClass('current')
$(this).addClass('current'); $(this).addClass('current')
}); })
$(window).scroll(function () { $(window).scroll(function () {
if ($(window).scrollTop() > 125) { if ($(window).scrollTop() > 125) {
$('aside section:eq(0)').css({ $('aside section:eq(0)').css({
position: "fixed", position: 'fixed',
top: "51px", top: '51px',
backgroundColor: "#fff" backgroundColor: '#fff',
}) })
} else { } else {
$('aside section:eq(0)').css({ $('aside section:eq(0)').css({
position: "inherit", position: 'inherit',
borderLeft: 0 borderLeft: 0,
}) })
} }
}); })
} }
}, },
initArticle: function (tocLabel, siteViewLabel) { initArticle: function (tocLabel, siteViewLabel) {
this._initArticleCommon(tocLabel, siteViewLabel); this._initArticleCommon(tocLabel, siteViewLabel)
setTimeout(function () {
if ($('#externalRelevantArticlesWrap li').length === 0) {
$('#externalRelevantArticlesWrap').next().remove()
$('#externalRelevantArticlesWrap').remove()
} }
};
Skin.init(); if ($('#relevantArticlesWrap li').length === 0) {
$('#relevantArticlesWrap').prev().remove()
$('#relevantArticlesWrap').remove()
}
if ($('#randomArticlesWrap li').length === 0) {
$('#randomArticlesWrap').prev().remove()
$('#randomArticlesWrap').remove()
}
}, 1000)
},
}
Skin.init()

19
nijigen/js/isotope.pkgd.js Normal file
View File

File diff suppressed because one or more lines are too long

19
nijigen/js/isotope.pkgd.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

24
nijigen/links.ftl
View File

@ -28,28 +28,36 @@
</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">
<div class="title"> <div class="module__content ft__center">
<h2><i class="icon-link"></i> <i class="icon__home"></i>
&nbsp;${linkLabel}</h2> <a href="${servePath}" class="breadcrumb">${blogTitle}</a>
&nbsp; > &nbsp;
<i class="icon__link"></i>
${linkLabel}
</div> </div>
</div>
<div class="module">
<div class="module__list">
<#if 0 != links?size> <#if 0 != links?size>
<ul class="list"> <ul class="list">
<#list links as link> <#list links as link>
<li> <li>
<a rel="friend" href="${link.linkAddress}" title="${link.linkDescription}" target="_blank"> <a rel="friend" href="${link.linkAddress}" title="${link.linkDescription}"
target="_blank">
${link.linkTitle} ${link.linkTitle}
</a> </a>
</li> </li>
</#list> </#list>
</ul> </ul>
</#if> </#if>
</div>
</div>
</main> </main>
<#include "side.ftl"> <#include "side.ftl">
</div> </div>
</div>
<#include "footer.ftl"> <#include "footer.ftl">
</body> </body>
</html> </html>

66
nijigen/macro-comments.ftl
View File

@ -18,25 +18,33 @@
--> -->
<#macro comments commentList article> <#macro comments commentList article>
<header class='title'><h2>${commentLabel}</h2></header> <div class="comments__item">
<div class="comments__meta comments__meta--only">${commentLabel}</div>
</div>
<ul class="comments" id="comments"> <ul class="comments" id="comments">
<#list commentList as comment> <#list commentList as comment>
<#include 'common-comment.ftl'/> <#include 'common-comment.ftl'/>
</#list> </#list>
</ul> </ul>
<#if article.commentable> <#if article.commentable>
<header class='title'><h2>${postCommentsLabel}</h2></header> <div class="comments__item">
<div class="comments__meta">
${postCommentsLabel}
</div>
<div class="comments__content">
<table id="commentForm" class="form"> <table id="commentForm" class="form">
<tbody> <tbody>
<#if !isLoggedIn> <#if !isLoggedIn>
<tr> <tr>
<td> <td>
<input placeholder="${commentNameLabel}" type="text" class="normalInput" id="commentName"/> <input placeholder="${commentNameLabel}" type="text" id="commentName"/>
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
<input placeholder="${commentEmailLabel}" type="email" class="normalInput" id="commentEmail"/> <input placeholder="${commentEmailLabel}" type="email" id="commentEmail"/>
</td> </td>
</tr> </tr>
<tr> <tr>
@ -72,48 +80,52 @@
<#if !isLoggedIn> <#if !isLoggedIn>
<tr> <tr>
<td> <td>
<input style="width:50%" placeholder="${captchaLabel}" type="text" class="normalInput" id="commentValidate"/> <input style="width:50%" placeholder="${captchaLabel}" type="text"
<img class="captcha" id="captcha" alt="validate" src="${servePath}/captcha.do" /> id="commentValidate"/>
<img class="comments__captcha" id="captcha" alt="validate" src="${servePath}/captcha.do"/>
</td> </td>
</tr> </tr>
</#if> </#if>
<tr> <tr>
<td colspan="2" align="right"> <td colspan="2" align="right">
<span class="error-msg" id="commentErrorTip"></span> <span class="ft__red" id="commentErrorTip"></span>
<button id="submitCommentButton" onclick="page.submitComment();">${submmitCommentLabel}</button> <button class="btn tag" id="submitCommentButton" onclick="page.submitComment();">${submmitCommentLabel}</button>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
</div>
</#if> </#if>
</#macro> </#macro>
<#macro comment_script oId> <#macro comment_script oId>
<script type="text/javascript" src="${staticServePath}/js/page${miniPostfix}.js?${staticResourceVersion}" charset="utf-8"></script> <script type="text/javascript" src="${staticServePath}/js/page${miniPostfix}.js?${staticResourceVersion}"
charset="utf-8"></script>
<script type="text/javascript"> <script type="text/javascript">
var page = new Page({ var page = new Page({
"nameTooLongLabel": "${nameTooLongLabel}", 'nameTooLongLabel': "${nameTooLongLabel}",
"mailCannotEmptyLabel": "${mailCannotEmptyLabel}", 'mailCannotEmptyLabel': "${mailCannotEmptyLabel}",
"mailInvalidLabel": "${mailInvalidLabel}", 'mailInvalidLabel': "${mailInvalidLabel}",
"commentContentCannotEmptyLabel": "${commentContentCannotEmptyLabel}", 'commentContentCannotEmptyLabel': "${commentContentCannotEmptyLabel}",
"captchaCannotEmptyLabel": "${captchaCannotEmptyLabel}", 'captchaCannotEmptyLabel': "${captchaCannotEmptyLabel}",
"loadingLabel": "${loadingLabel}", 'loadingLabel': "${loadingLabel}",
"oId": "${oId}", 'oId': "${oId}",
"skinDirName": "${skinDirName}", 'skinDirName': "${skinDirName}",
"blogHost": "${blogHost}", 'blogHost': "${blogHost}",
"randomArticles1Label": "${randomArticles1Label}", 'randomArticles1Label': "${randomArticles1Label}",
"externalRelevantArticles1Label": "${externalRelevantArticles1Label}" 'externalRelevantArticles1Label': "${externalRelevantArticles1Label}",
}); })
var replyTo = function (id) { var replyTo = function (id) {
var commentFormHTML = "<table class='form comment-reply' id='replyForm'>"; var commentFormHTML = '<table class=\'form comments__reply comments__content\' id=\'replyForm\'>'
page.addReplyForm(id, commentFormHTML); page.addReplyForm(id, commentFormHTML)
}; };
(function () { (function () {
page.load(); page.load()
Skin.initArticle("${tocLabel}", "${siteViewLabel}"); Skin.initArticle("${tocLabel}", "${siteViewLabel}")
// emotions // emotions
page.replaceCommentsEm("#comments .content-reset"); page.replaceCommentsEm('#comments .content-reset')
<#nested> <#nested>
})(); })()
</script> </script>
</#macro> </#macro>

12
nijigen/page.ftl
View File

@ -29,19 +29,19 @@
</head> </head>
<body> <body>
<#include "header.ftl"> <#include "header.ftl">
<div class="wrapper"> <div class="main">
<div class="main-wrap"> <main class="content">
<main> <article class="module">
<article class="post"> <div class="module__content">
<div class="content-reset"> <div class="content-reset">
${page.pageContent} ${page.pageContent}
</div> </div>
<@comments commentList=pageComments article=page></@comments> </div>
</article> </article>
<@comments commentList=pageComments article=page></@comments>
</main> </main>
<#include "side.ftl"> <#include "side.ftl">
</div> </div>
</div>
<#include "footer.ftl"> <#include "footer.ftl">
<@comment_script oId=page.oId></@comment_script> <@comment_script oId=page.oId></@comment_script>
</body> </body>

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">

23
nijigen/tag-articles.ftl
View File

@ -23,24 +23,29 @@
<head> <head>
<@head title="${tag.tagTitle} - ${blogTitle}"> <@head title="${tag.tagTitle} - ${blogTitle}">
<meta name="keywords" content="${metaKeywords},${tag.tagTitle}"/> <meta name="keywords" content="${metaKeywords},${tag.tagTitle}"/>
<meta name="description" content="<#list articles as article>${article.articleTitle}<#if article_has_next>,</#if></#list>"/> <meta name="description"
content="<#list articles as article>${article.articleTitle}<#if article_has_next>,</#if></#list>"/>
</@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> <div class="module">
<div class="title"> <div class="module__content ft__center">
<h2 class="tip"><i class="icon-tags"></i> <i class="icon__home"></i>
&nbsp;${tag.tagTitle} <a href="${servePath}" class="breadcrumb">${blogTitle}</a>
<small>${tagLabel}</small> &nbsp; > &nbsp;
<i class="icon__tags"></i>
<a href="${servePath}/tags.html" class="breadcrumb">${allTagsLabel}</a>
&nbsp; > &nbsp;
${tag.tagTitle} ${tagLabel}
</div>
</div> </div>
<#include "article-list.ftl"> <#include "article-list.ftl">
</main> </main>
<#include "side.ftl"> <#include "side.ftl">
</div> </div>
</div>
<#include "footer.ftl"> <#include "footer.ftl">
</body> </body>
</html> </html>

32
nijigen/tags.ftl
View File

@ -28,14 +28,19 @@
</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">
<div class="title"> <div class="module__content ft__center">
<h2><i class="icon-tags"></i> <i class="icon__home"></i>
&nbsp; ${sumLabel} ${tags?size} ${tagLabel} <a href="${servePath}" class="breadcrumb">${blogTitle}</a>
&nbsp; > &nbsp;
<i class="icon__tags"></i> ${sumLabel} ${tags?size} ${tagLabel}
</div> </div>
<div class="tags"> </div>
<div class="module">
<div class="module__content fn__clear tags">
<#list tags as tag> <#list tags as tag>
<a rel="tag" data-count="${tag.tagPublishedRefCount}" class="tag" <a rel="tag" data-count="${tag.tagPublishedRefCount}" class="tag"
href="${servePath}/tags/${tag.tagTitle?url('UTF-8')}"> href="${servePath}/tags/${tag.tagTitle?url('UTF-8')}">
@ -44,21 +49,22 @@
</a> </a>
</#list> </#list>
</div> </div>
</div>
</main> </main>
<#include "side.ftl"> <#include "side.ftl">
</div> </div>
</div>
<#include "footer.ftl"> <#include "footer.ftl">
<script type="text/javascript" src="${staticServePath}/skins/${skinDirName}/js/isotope.pkgd.min.js" charset="utf-8"></script> <script type="text/javascript" src="${staticServePath}/skins/${skinDirName}/js/isotope.pkgd.min.js"
charset="utf-8"></script>
<script> <script>
$('.tags').isotope({ $('.tags').isotope({
transitionDuration: '1.5s', transitionDuration: '1.5s',
filter: 'a', filter: 'a',
layoutMode: 'fitRows' layoutMode: 'fitRows',
}); })
$('.tags').isotope({ $('.tags').isotope({
sortBy: 'random' sortBy: 'random',
}); })
</script> </script>
</body> </body>
</html> </html>