💄 #12494

2018-09-02 17:07:52 +08:00 · 2018-09-02 17:07:52 +08:00 · a3a62871fb
commit a3a62871fb
parent 4e60a4ab7d b2fa8216a0
20 changed files with 2091 additions and 629 deletions
--- a/README.md
+++ b/README.md
@ -1,17 +1,88 @@
-# Solo 官方皮肤
-
-1. [开发步骤](https://hacpai.com/article/1493814851007)
-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 文件夹中。
-
-其中 skin-preview 存放皮肤的预览图片，toolers 存放更新版本和压缩 js、css 的 NodeJS 脚本，部署时请**注意不要拷贝这两个目录**。
-
-## 社区
-
-* [讨论区](https://hacpai.com/tag/solo)
-
+# Solo 官方皮肤
+
+🎸 A small and beautiful blogging system written in Java. 一款小而美的 Java 博客系统。 https://solo.b3log.org
+
+## 简介
+
+[Solo](https://github.com/b3log/solo) 是**一个命令**就能搭建好的 Java 开源博客系统，并内置了 18+ 套精心制作的皮肤。除此之外，Solo 还有着非常活跃的[社区](https://hacpai.com)，文章分享到社区后可以让很多人看到，产生丰富的交流互动。
+
+**如果你不想自己维护服务器，可以购买我们运维的 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://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>
+ 
--- a/nijigen/archive-articles.ftl
+++ b/nijigen/archive-articles.ftl
@ -20,34 +20,38 @@
 <#include "macro-head.ftl">
 <!DOCTYPE html>
 <html>
-    <head>
-        <@head title="${archiveDate.archiveDateMonth} ${archiveDate.archiveDateYear} (${archiveDate.archiveDatePublishedArticleCount}) - ${blogTitle}">
-        <meta name="keywords" content="${metaKeywords},${archiveDate.archiveDateYear}${archiveDate.archiveDateMonth}"/>
-        <meta name="description" content="<#list articles as article>${article.articleTitle}<#if article_has_next>,</#if></#list>"/>
-        </@head>
-    </head>
-    <body>
-        <#include "header.ftl">
-        <div class="wrapper">
-            <div class="main-wrap">
-                <main>
-                    <div class="title">
-                        <h2 class="tip">
-                            <i class="icon-inbox"></i>
-                            &nbsp;
-                            <#if "en" == localeString?substring(0, 2)>
-                            ${archiveDate.archiveDateMonth} ${archiveDate.archiveDateYear}
-                            <#else>
-                                ${archiveDate.archiveDateYear} ${yearLabel} ${archiveDate.archiveDateMonth} ${monthLabel}
-                            </#if>
-                            - ${archiveDate.archiveDatePublishedArticleCount} ${articleLabel}
-                        </h2>
-                    </div>
-                    <#include "article-list.ftl">
-                </main>
-                <#include "side.ftl">
+<head>
+<@head title="${archiveDate.archiveDateMonth} ${archiveDate.archiveDateYear} (${archiveDate.archiveDatePublishedArticleCount}) - ${blogTitle}">
+    <meta name="keywords"
+          content="${metaKeywords},${archiveDate.archiveDateYear}${archiveDate.archiveDateMonth}"/>
+    <meta name="description"
+          content="<#list articles as article>${article.articleTitle}<#if article_has_next>,</#if></#list>"/>
+</@head>
+</head>
+<body>
+<#include "header.ftl">
+<div class="main">
+    <main class="content">
+        <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__inbox"></i>
+                <a href="${servePath}/archives.html" class="breadcrumb">${archiveLabel}</a>
+                &nbsp; > &nbsp;
+            <#if "en" == localeString?substring(0, 2)>
+                ${archiveDate.archiveDateMonth} ${archiveDate.archiveDateYear}
+            <#else>
+                ${archiveDate.archiveDateYear} ${yearLabel} ${archiveDate.archiveDateMonth} ${monthLabel}
+            </#if>
+                - ${archiveDate.archiveDatePublishedArticleCount} ${articleLabel}
            </div>
        </div>
-        <#include "footer.ftl">
-    </body>
+        <#include "article-list.ftl">
+    </main>
+    <#include "side.ftl">
+</div>
+<#include "footer.ftl">
+</body>
 </html>
--- a/nijigen/archives.ftl
+++ b/nijigen/archives.ftl
@ -20,42 +20,51 @@
 <#include "macro-head.ftl">
 <!DOCTYPE html>
 <html>
-    <head>
-        <@head title="${blogTitle}">
-        <meta name="keywords" content="${metaKeywords},${archiveLabel}"/>
-        <meta name="description" content="${metaDescription},${archiveLabel}"/>
-        </@head>
-    </head>
-    <body>
-        <#include "header.ftl">
-        <div class="wrapper">
-            <div class="main-wrap">
-                <main class="other">
-                    <span class="title">
-                         <h2><i class="icon-inbox"></i>
-                             &nbsp;${statistic.statisticPublishedBlogArticleCount} ${articleLabel}</h2>
-                    </span>
-                    <#if 0 != archiveDates?size>
-                        <ul class="list">
-                        <#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">
+<head>
+<@head title="${blogTitle}">
+    <meta name="keywords" content="${metaKeywords},${archiveLabel}"/>
+    <meta name="description" content="${metaDescription},${archiveLabel}"/>
+</@head>
+</head>
+<body>
+<#include "header.ftl">
+<div class="main">
+    <main class="content">
+        <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__inbox"></i>
+            ${statistic.statisticPublishedBlogArticleCount} ${archiveLabel}${articleLabel}
            </div>
        </div>
-        <#include "footer.ftl">
-    </body>
+        <div class="module">
+            <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>
--- a/nijigen/article-list.ftl
+++ b/nijigen/article-list.ftl
@ -19,7 +19,7 @@
 -->
 <div class="article-list">
    <#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"
              aria-label="${article.articleCreateDate?string("yyyy")}年">
            ${article.articleCreateDate?string("m")}月
@ -41,17 +41,18 @@
            </sup>
            </#if>
        </h2>
-        <div class="item__date--m">
+
+        <div class="item__date--m fn__none">
            <i class="icon__date"></i>
            ${article.articleCreateDate?string("yyy-MM-DD")}
        </div>


        <div class="ft__center">
-            <#list article.articleTags?split(",") as articleTag>
-            <a rel="tag" class="tag" href="${servePath}/tags/${articleTag?url('UTF-8')}">
-                #${articleTag}</a>
-            </#list>
+            <span class="tag">
+                <i class="icon__tags"></i>
+                ${article.articleTags}
+            </span>
            <a class="tag" href="${servePath}${article.articlePermalink}#comments">
                <i class="icon__comments"></i> ${article.articleCommentCount} ${commentLabel}
            </a>
--- a/nijigen/article.ftl
+++ b/nijigen/article.ftl
@ -21,141 +21,144 @@
 <#include "macro-comments.ftl">
 <!DOCTYPE html>
 <html>
-    <head>
-        <@head title="${article.articleTitle} - ${blogTitle}">
-        <meta name="keywords" content="${article.articleTags}" />
-        <meta name="description" content="${article.articleAbstract?html}" />
-        </@head>
-        <#if previousArticlePermalink??>
-            <link rel="prev" title="${previousArticleTitle}" href="${servePath}${previousArticlePermalink}">
-        </#if>
-        <#if nextArticlePermalink??>
-            <link rel="next" title="${nextArticleTitle}" href="${servePath}${nextArticlePermalink}">
-        </#if>
-            <!-- Open Graph -->
-            <meta property="og:locale" content="zh_CN"/>
-            <meta property="og:type" content="article"/>
-            <meta property="og:title" content="${article.articleTitle}"/>
-            <meta property="og:description" content="${article.articleAbstract?html}"/>
-            <meta property="og:image" content="${article.authorThumbnailURL}"/>
-            <meta property="og:url" content="${servePath}${article.articlePermalink}"/>
-            <meta property="og:site_name" content="Solo"/>
-            <!-- Twitter Card -->
-            <meta name="twitter:card" content="summary"/>
-            <meta name="twitter:description" content="${article.articleAbstract?html}"/>
-            <meta name="twitter:title" content="${article.articleTitle}"/>
-            <meta name="twitter:image" content="${article.authorThumbnailURL}"/>
-            <meta name="twitter:url" content="${servePath}${article.articlePermalink}"/>
-            <meta name="twitter:site" content="@DL88250"/>
-            <meta name="twitter:creator" content="@DL88250"/>
-    </head>
-    <body>
-        <#include "header.ftl">
-        <div class="wrapper">
-            <div class="main-wrap">
-                <main>
-                    <article class="post">
-                        <header>
-                            <h1>
-                                <a rel="bookmark" href="${servePath}${article.articlePermalink}">
-                                    ${article.articleTitle}
-                                </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>
+<head>
+    <@head title="${article.articleTitle} - ${blogTitle}">
+    <meta name="keywords" content="${article.articleTags}"/>
+    <meta name="description" content="${article.articleAbstract?html}"/>
+    </@head>
+    <#if previousArticlePermalink??>
+        <link rel="prev" title="${previousArticleTitle}" href="${servePath}${previousArticlePermalink}">
+    </#if>
+    <#if nextArticlePermalink??>
+        <link rel="next" title="${nextArticleTitle}" href="${servePath}${nextArticlePermalink}">
+    </#if>
+    <!-- Open Graph -->
+    <meta property="og:locale" content="zh_CN"/>
+    <meta property="og:type" content="article"/>
+    <meta property="og:title" content="${article.articleTitle}"/>
+    <meta property="og:description" content="${article.articleAbstract?html}"/>
+    <meta property="og:image" content="${article.authorThumbnailURL}"/>
+    <meta property="og:url" content="${servePath}${article.articlePermalink}"/>
+    <meta property="og:site_name" content="Solo"/>
+    <!-- Twitter Card -->
+    <meta name="twitter:card" content="summary"/>
+    <meta name="twitter:description" content="${article.articleAbstract?html}"/>
+    <meta name="twitter:title" content="${article.articleTitle}"/>
+    <meta name="twitter:image" content="${article.authorThumbnailURL}"/>
+    <meta name="twitter:url" content="${servePath}${article.articlePermalink}"/>
+    <meta name="twitter:site" content="@DL88250"/>
+    <meta name="twitter:creator" content="@DL88250"/>
+</head>
+<body>
+<#include "header.ftl">
+<div class="main">
+    <main class="content article-list">
+        <div class="item item--active">
+            <time class="tooltipped tooltipped__n item__date"
+                  aria-label="${article.articleCreateDate?string("yyyy")}年">
+            ${article.articleCreateDate?string("m")}月
+                <span class="item__day">${article.articleCreateDate?string("dd")}</span>
+            </time>

-                        <div class="content-reset">
-                            ${article.articleContent}
-                            <#if "" != article.articleSign.signHTML?trim>
-                                <div>
-                                    ${article.articleSign.signHTML}
-                                </div>
-                            </#if>
-                        </div>
+            <h2 class="item__title">
+                <a rel="bookmark" href="${servePath}${article.articlePermalink}">
+                ${article.articleTitle}
+                </a>
+            <#if article.articlePutTop>
+            <sup>
+                ${topArticleLabel}
+            </sup>
+            </#if>
+            <#if article.hasUpdated>
+            <sup>
+                ${updatedLabel}
+            </sup>
+            </#if>
+            </h2>

-                        <footer class="tags">
-                            <#list article.articleTags?split(",") as articleTag>
-                                <a class="tag" rel="tag" href="${servePath}/tags/${articleTag?url('UTF-8')}">
-                                    ${articleTag}</a>
-                            </#list>
+            <div class="item__date--m fn__none">
+                <i class="icon__date"></i>
+            ${article.articleCreateDate?string("yyy-MM-DD")}
+            </div>

-                            <#-- div class="copyright">
-                                ${articleCP1Label}
-                                <a rel="bookmark" href="${servePath}${article.articlePermalink}">
-                                    ${article.articleTitle}
-                                </a> -
-                                <a href="${servePath}">
-                                    ${blogTitle}
-                                </a>
-                            </div -->
+            <div class="ft__center">
+                <span class="tag">
+                    <i class="icon__tags"></i>
+                ${article.articleTags}
+                </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>
+                ${article.articleViewCount} ${viewLabel}
+                </span>
+            </div>

-                            <div class="rel fn-clear">
-                                <#if previousArticlePermalink??>
-                                    <a href="${servePath}${previousArticlePermalink}" rel="prev"
-                                       class="fn-left tooltipped tooltipped-n"
-                                       aria-label="${previousArticleTitle}">
-                                        ${previousArticleLabel}
-                                    </a>
-                                </#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 class="content-reset">
+            ${article.articleAbstract}
+                <#if "" != article.articleSign.signHTML?trim>
+                <div>
+                    ${article.articleSign.signHTML}
+                </div>
+                </#if>
            </div>
        </div>
-        <#include "footer.ftl">
-        <@comment_script oId=article.oId>
-        page.tips.externalRelevantArticlesDisplayCount = "${externalRelevantArticlesDisplayCount}";
-        <#if 0 != randomArticlesDisplayCount>
-        page.loadRandomArticles();
-        </#if>
-        <#if 0 != externalRelevantArticlesDisplayCount>
-        page.loadExternalRelevantArticles("<#list article.articleTags?split(",") as articleTag>${articleTag}<#if articleTag_has_next>,</#if></#list>"
-            , "<header class='title'><h2>${externalRelevantArticlesLabel}</h2></header>");
-        </#if>
-        <#if 0 != relevantArticlesDisplayCount>
-        page.loadRelevantArticles('${article.oId}', '<h4>${relevantArticlesLabel}</h4>');
-        </#if>
-        </@comment_script>    
-    </body>
+
+        <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>
+
+        <@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>
--- a/nijigen/category-articles.ftl
+++ b/nijigen/category-articles.ftl
@ -20,29 +20,33 @@
 <#include "macro-head.ftl">
 <!DOCTYPE html>
 <html>
-    <head>
-        <@head title="${category.categoryTitle} - ${blogTitle}">
-        <meta name="keywords" content="${metaKeywords},${category.categoryTitle}"/>
-        <meta name="description" content="<#list articles as article>${article.articleTitle}<#if article_has_next>,</#if></#list>"/>
-        </@head>
-    </head>
-    <body>
-        <#include "header.ftl">
-        <div class="wrapper">
-            <div class="main-wrap">
-                <main>
-                    <div class="title">
-                        <h2 class="tip"><i class="icon-category"></i>
-                            &nbsp;${category.categoryTitle}
-                            <small>${category.categoryDescription}</small>
-                        </h2>
-
-                    </div>
-                    <#include "article-list.ftl">
-                </main>
-                <#include "side.ftl">
+<head>
+<@head title="${category.categoryTitle} - ${blogTitle}">
+    <meta name="keywords" content="${metaKeywords},${category.categoryTitle}"/>
+    <meta name="description"
+          content="<#list articles as article>${article.articleTitle}<#if article_has_next>,</#if></#list>"/>
+</@head>
+</head>
+<body>
+<#include "header.ftl">
+<div class="main">
+    <main class="content">
+        <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__category"></i>
+                ${categoryLabel}
+                &nbsp; > &nbsp;
+                <span class="tooltipped tooltipped__w"
+                      aria-label="${category.categoryDescription}">${category.categoryTitle}</span>
            </div>
        </div>
-        <#include "footer.ftl">
-    </body>
+        <#include "article-list.ftl">
+    </main>
+    <#include "side.ftl">
+</div>
+<#include "footer.ftl">
+</body>
 </html>
--- a/nijigen/common-comment.ftl
+++ b/nijigen/common-comment.ftl
@ -17,32 +17,32 @@
    along with this program.  If not, see <https://www.gnu.org/licenses/>.

 -->
-<li id="${comment.oId}">
-    <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>
+<li id="${comment.oId}" class="comments__item">
+    <div class="comments__avatar" style="background-image: url(${comment.commentThumbnailURL})"></div>
+    <div class="comments__meta fn__flex">
+        <div class="fn__flex-1">
+            <#if "http://" == comment.commentURL>
                ${comment.commentName}
-                <#else>
-                <a class="user-name" href="${comment.commentURL}" target="_blank">${comment.commentName}</a>
-                </#if>
-                <#if comment.isReply>
-                @<a class="user-name" href="${servePath}${article.permalink}#${comment.commentOriginalCommentId}"
-                   onmouseover="page.showComment(this, '${comment.commentOriginalCommentId}', 23);"
-                   onmouseout="page.hideComment('${comment.commentOriginalCommentId}')"
-                >${comment.commentOriginalCommentName}</a>
-                </#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 class="content-reset">
-                ${comment.commentContent}
-            </div>
-        </main>
+            <#else>
+            <a href="${comment.commentURL}" target="_blank">${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}')"
+            >${comment.commentOriginalCommentName}</a>
+            </#if>
+        </div>
+        <time>${comment.commentDate?string("yyyy-MM-dd HH:mm")}</time>
    </div>
+    <main class="comments__content fn__clear">
+        <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>
--- a/nijigen/css/base.css
+++ b/nijigen/css/base.css
--- a/nijigen/css/base.min.css
+++ b/nijigen/css/base.min.css
--- a/nijigen/css/base.scss
+++ b/nijigen/css/base.scss
@ -25,6 +25,7 @@
@import "../../../scss/reset-content";
@import "../../../scss/function";
@import "../../../scss/tooltipped";
+@import "../../../scss/comment";
@import "icon";

 $purple: #7266BA !default;
@ -42,6 +43,14 @@ a {
  cursor: url(../images/pointer.cur), url(../images/pointer.cur), auto
 }

+.content-reset img {
+  vertical-align: sub;
+}
+
+.ft__red {
+  color: $red;
+}
+
 // module
 .module {
  border-radius: 5px;
@ -50,8 +59,16 @@ a {
  box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.2);
  transition: all .3s;

+  &.item {
+    transform: translateY(30px);
+    transition: transform 2s cubic-bezier(.175, .885, .32, 1.275);
+    &--active {
+      transform: translate(0);
+    }
+  }
+
  &: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 {
@ -208,6 +225,13 @@ a {

  &__nav {
    text-align: center;
+
+    img {
+      float: left;
+      height: 20px;
+      width: 20px;
+      margin: 15px 5px 0 0;
+    }
  }

  &__login {
@ -225,6 +249,11 @@ a {
  display: flex;
 }

+.content {
+  flex: 1;
+  min-width: 1px;
+}
+
 // side
 .side {
  width: 280px;
@ -282,6 +311,13 @@ a {
  }
 }

+.breadcrumb {
+  color: $purple !important;
+  &:hover {
+    color: $black !important;
+  }
+}
+
 // footer
 .footer {
  text-align: center;
@ -289,7 +325,7 @@ a {
  padding: 15px;
  margin-bottom: 30px;
  a {
-    color: $black;
+    color: $purple;
  }
 }

@ -302,11 +338,16 @@ a {
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.8);
    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 {
      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 {
@ -368,7 +409,7 @@ a {
    padding: 0 10px;
    line-height: 24px;
    display: inline-block;
-    margin-left: 10px;
+    margin: 0 0 10px 10px;
    background-color: rgba($purple, 0.58);

    &--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) {
  .header__nav {
    display: none;
@ -436,6 +597,7 @@ a {
    text-align: center;
    margin-bottom: 10px;
    color: $black;
+    display: block;
  }

  .tag {
@ -473,4 +635,8 @@ a {
      }
    }
  }
+
+  .module__content.ft__center {
+    text-align: left;
+  }
 }
--- a/nijigen/dynamic.ftl
+++ b/nijigen/dynamic.ftl
@ -20,55 +20,41 @@
 <#include "macro-head.ftl">
 <!DOCTYPE html>
 <html>
-    <head>
-        <@head title="${blogTitle}">
-        <meta name="keywords" content="${metaKeywords},${dynamicLabel}"/>
-        <meta name="description" content="${metaDescription},${dynamicLabel}"/>
-        </@head>
-    </head>
-    <body>
-        <#include "header.ftl">
-        <div class="wrapper">
-            <div class="main-wrap">
-                <main class="post">
-                    <#if 0 != recentComments?size>
-                        <ul class="comments" id="comments">
-                            <#list recentComments as comment>
-                                <li id="${comment.oId}">
-                                    <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>
-                        </ul>
-                    </#if>
-                </main>
-                <#include "side.ftl">
+<head>
+<@head title="${blogTitle}">
+    <meta name="keywords" content="${metaKeywords},${dynamicLabel}"/>
+    <meta name="description" content="${metaDescription},${dynamicLabel}"/>
+</@head>
+</head>
+<body>
+<#include "header.ftl">
+<div class="main">
+    <main class="content">
+        <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>
-        <#include "footer.ftl">
-
-        <script>
-            var $commentContents = $(".comments .content-reset");
-            for (var i = 0; i < $commentContents.length; i++) {
-                var str = $commentContents[i].innerHTML;
-                $commentContents[i].innerHTML = Util.replaceEmString(str);
-            }
-        </script>
-    </body>
+    <#if 0 != recentComments?size>
+        <ul class="comments">
+            <#list recentComments as comment>
+                <#include "common-comment.ftl"/>
+            </#list>
+        </ul>
+    </#if>
+    </main>
+<#include "side.ftl">
+</div>
+<#include "footer.ftl">
+<script>
+    var $commentContents = $('.comments .content-reset')
+    for (var i = 0; i < $commentContents.length; i++) {
+        var str = $commentContents[i].innerHTML
+        $commentContents[i].innerHTML = Util.replaceEmString(str)
+    }
+</script>
+</body>
 </html>
--- a/nijigen/js/common.js
+++ b/nijigen/js/common.js
@ -27,114 +27,163 @@
 * @static
 */
 var Skin = {
-    _initCommon: function ($goTop) {
-        $('body').on('click', '.content-reset img', function () {
-            window.open(this.src);
-        });
+  _initCommon: function ($goTop) {
+    $('body').on('click', '.content-reset img', function () {
+      window.open(this.src)
+    })

-        var $banner = $('header .banner'),
-        $navbar = $('header .navbar');
+    var $banner = $('header .banner'),
+      $navbar = $('header .navbar')

-        $(window).scroll(function () {
-            if ($(window).scrollTop() > 125) {
-                $goTop.show();
-            } else {
-                $goTop.hide();
-            }
+    $(window).scroll(function () {
+      if ($(window).scrollTop() > 125) {
+        $goTop.show()
+      } else {
+        $goTop.hide()
+      }

-            if ($(window).width() < 701) {
-                return false;
-            }
+      if ($(window).width() < 701) {
+        return false
+      }

-            if ($(window).scrollTop() > $banner.height()) {
-                $navbar.addClass('pin');
-                $('.main-wrap').parent().css('margin-top', '86px')
-            } else {
-                $navbar.removeClass('pin');
-                $('.main-wrap').parent().css('margin-top', '0')
-            }
-        });
-    },
-    init: function () {
-        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);
+      if ($(window).scrollTop() > $banner.height()) {
+        $navbar.addClass('pin')
+        $('.main-wrap').parent().css('margin-top', '86px')
+      } else {
+        $navbar.removeClass('pin')
+        $('.main-wrap').parent().css('margin-top', '0')
+      }
+    })
+  },
+  init: function () {
+    if (!('IntersectionObserver' in window)) {
+      $('.item').addClass('item--active')
+      return false
    }
-};
-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()
--- a/nijigen/js/isotope.pkgd.js
+++ b/nijigen/js/isotope.pkgd.js
--- a/nijigen/js/isotope.pkgd.min.js
+++ b/nijigen/js/isotope.pkgd.min.js
--- a/nijigen/links.ftl
+++ b/nijigen/links.ftl
@ -20,36 +20,44 @@
 <#include "macro-head.ftl">
 <!DOCTYPE html>
 <html>
-    <head>
-        <@head title="${blogTitle}">
-        <meta name="keywords" content="${metaKeywords},${archiveLabel}"/>
-        <meta name="description" content="${metaDescription},${archiveLabel}"/>
-        </@head>
-    </head>
-    <body>
-        <#include "header.ftl">
-        <div class="wrapper">
-            <div class="main-wrap">
-                <main class="other">
-                    <div class="title">
-                         <h2><i class="icon-link"></i>
-                             &nbsp;${linkLabel}</h2>
-                    </div>
-                    <#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>
-                </main>
-                <#include "side.ftl">
+<head>
+<@head title="${blogTitle}">
+    <meta name="keywords" content="${metaKeywords},${archiveLabel}"/>
+    <meta name="description" content="${metaDescription},${archiveLabel}"/>
+</@head>
+</head>
+<body>
+<#include "header.ftl">
+<div class="main">
+    <main class="content">
+        <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__link"></i>
+            ${linkLabel}
            </div>
        </div>
-        <#include "footer.ftl">
-    </body>
+        <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>
+    </main>
+    <#include "side.ftl">
+</div>
+<#include "footer.ftl">
+</body>
 </html>
--- a/nijigen/macro-comments.ftl
+++ b/nijigen/macro-comments.ftl
@ -18,102 +18,114 @@

 -->
 <#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">
    <#list commentList as comment>
        <#include 'common-comment.ftl'/>
    </#list>
 </ul>
+
 <#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">
            <tbody>
-                <#if !isLoggedIn>
-                <tr>
-                    <td>
-                        <input placeholder="${commentNameLabel}" type="text" class="normalInput" id="commentName"/>
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <input placeholder="${commentEmailLabel}" type="email" class="normalInput" 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" class="normalInput" id="commentValidate"/>
-                        <img class="captcha" id="captcha" alt="validate" src="${servePath}/captcha.do" />
-                    </td>
-                </tr>
-                </#if>
-                <tr>
-                    <td colspan="2" align="right">
-                        <span class="error-msg" id="commentErrorTip"></span>
-                        <button id="submitCommentButton" onclick="page.submitComment();">${submmitCommentLabel}</button>
-                    </td>
-                </tr>
+            <#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.do"/>
+                </td>
+            </tr>
+            </#if>
+            <tr>
+                <td colspan="2" align="right">
+                    <span class="ft__red" id="commentErrorTip"></span>
+                    <button class="btn tag" id="submitCommentButton" onclick="page.submitComment();">${submmitCommentLabel}</button>
+                </td>
+            </tr>
            </tbody>
        </table>
+    </div>
+</div>
 </#if>
 </#macro>

 <#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">
-                        var page = new Page({
-                            "nameTooLongLabel": "${nameTooLongLabel}",
-                            "mailCannotEmptyLabel": "${mailCannotEmptyLabel}",
-                            "mailInvalidLabel": "${mailInvalidLabel}",
-                            "commentContentCannotEmptyLabel": "${commentContentCannotEmptyLabel}",
-                            "captchaCannotEmptyLabel": "${captchaCannotEmptyLabel}",
-                            "loadingLabel": "${loadingLabel}",
-                            "oId": "${oId}",
-                            "skinDirName": "${skinDirName}",
-                            "blogHost": "${blogHost}",
-                            "randomArticles1Label": "${randomArticles1Label}",
-                            "externalRelevantArticles1Label": "${externalRelevantArticles1Label}"
-                        });
-                        var replyTo = function (id) {
-                            var commentFormHTML = "<table class='form comment-reply' id='replyForm'>";
-                            page.addReplyForm(id, commentFormHTML);
-                        };
-                        (function () {
-                            page.load();
-                            Skin.initArticle("${tocLabel}", "${siteViewLabel}");
-                            // emotions
-                            page.replaceCommentsEm("#comments .content-reset");
-                            <#nested>
-                        })();
+    var page = new Page({
+        'nameTooLongLabel': "${nameTooLongLabel}",
+        'mailCannotEmptyLabel': "${mailCannotEmptyLabel}",
+        'mailInvalidLabel': "${mailInvalidLabel}",
+        'commentContentCannotEmptyLabel': "${commentContentCannotEmptyLabel}",
+        'captchaCannotEmptyLabel': "${captchaCannotEmptyLabel}",
+        'loadingLabel': "${loadingLabel}",
+        'oId': "${oId}",
+        'skinDirName': "${skinDirName}",
+        'blogHost': "${blogHost}",
+        'randomArticles1Label': "${randomArticles1Label}",
+        'externalRelevantArticles1Label': "${externalRelevantArticles1Label}",
+    })
+    var replyTo = function (id) {
+        var commentFormHTML = '<table class=\'form comments__reply comments__content\' id=\'replyForm\'>'
+        page.addReplyForm(id, commentFormHTML)
+    };
+    (function () {
+        page.load()
+        Skin.initArticle("${tocLabel}", "${siteViewLabel}")
+        // emotions
+        page.replaceCommentsEm('#comments .content-reset')
+        <#nested>
+    })()
 </script>
 </#macro>
--- a/nijigen/page.ftl
+++ b/nijigen/page.ftl
@ -21,28 +21,28 @@
 <#include "macro-comments.ftl">
 <!DOCTYPE html>
 <html>
-    <head>
-        <@head title="${page.pageTitle} - ${blogTitle}">
-        <meta name="keywords" content="${metaKeywords},${page.pageTitle}" />
-        <meta name="description" content="${metaDescription}" />
-        </@head>
-    </head>
-    <body>
-        <#include "header.ftl">
-        <div class="wrapper">
-            <div class="main-wrap">
-                <main>
-                    <article class="post">
-                        <div class="content-reset">
-                        ${page.pageContent}
-                        </div>
-                        <@comments commentList=pageComments article=page></@comments>
-                    </article>
-                </main>
-                <#include "side.ftl">
+<head>
+<@head title="${page.pageTitle} - ${blogTitle}">
+    <meta name="keywords" content="${metaKeywords},${page.pageTitle}"/>
+    <meta name="description" content="${metaDescription}"/>
+</@head>
+</head>
+<body>
+<#include "header.ftl">
+<div class="main">
+    <main class="content">
+        <article class="module">
+            <div class="module__content">
+                <div class="content-reset">
+                ${page.pageContent}
+                </div>
            </div>
-        </div>
-        <#include "footer.ftl">
-        <@comment_script oId=page.oId></@comment_script>
-    </body>
+        </article>
+        <@comments commentList=pageComments article=page></@comments>
+    </main>
+    <#include "side.ftl">
+</div>
+<#include "footer.ftl">
+<@comment_script oId=page.oId></@comment_script>
+</body>
 </html>
--- a/nijigen/side.ftl
+++ b/nijigen/side.ftl
@ -35,7 +35,7 @@
        </header>
    </section>

-    <div class="module meta">
+    <div class="module item">
        <header class="module__header ft__center">
        ${adminUser.userName}
        </header>
@ -46,7 +46,7 @@
    </div>

    <#if 0 != mostUsedCategories?size>
-        <div class="module">
+        <div class="module item">
            <header class="module__header">
                ${categoryLabel}
            </header>
@ -62,7 +62,7 @@
    </#if>

    <#if 0 != mostUsedTags?size>
-        <div class="module">
+        <div class="module item">
            <header class="module__header">${tagsLabel}</header>
            <main class="module__content--three module__content fn__clear">
                <#list mostUsedTags as tag>
@ -77,7 +77,7 @@
    </#if>

    <#if 0 != mostCommentArticles?size>
-        <div class="module">
+        <div class="module item">
            <header class="module__header">${mostCommentArticlesLabel}</header>
            <main class="module__list">
                <ul>
@ -95,7 +95,7 @@
    </#if>

    <#if 0 != mostViewCountArticles?size>
-        <div class="module">
+        <div class="module item">
            <header class="module__header">${mostViewCountArticlesLabel}</header>
            <main class="module__list">
                <ul>
@ -112,7 +112,7 @@
        </div>
    </#if>

-    <div class="module">
+    <div class="module item">
        <div class="module__header">
            <div class="fn__flex">
                <a href="${servePath}/archives.html" class="fn__flex-1 ft__center">
--- a/nijigen/tag-articles.ftl
+++ b/nijigen/tag-articles.ftl
@ -20,27 +20,32 @@
 <#include "macro-head.ftl">
 <!DOCTYPE html>
 <html>
-    <head>
-        <@head title="${tag.tagTitle} - ${blogTitle}">
-        <meta name="keywords" content="${metaKeywords},${tag.tagTitle}"/>
-        <meta name="description" content="<#list articles as article>${article.articleTitle}<#if article_has_next>,</#if></#list>"/>
-        </@head>
-    </head>
-    <body>
-        <#include "header.ftl">
-        <div class="wrapper">
-            <div class="main-wrap">
-                <main>
-                    <div class="title">
-                        <h2 class="tip"><i class="icon-tags"></i>
-                            &nbsp;${tag.tagTitle}
-                            <small>${tagLabel}</small>
-                    </div>
-                    <#include "article-list.ftl">
-                </main>
-                <#include "side.ftl">
+<head>
+<@head title="${tag.tagTitle} - ${blogTitle}">
+    <meta name="keywords" content="${metaKeywords},${tag.tagTitle}"/>
+    <meta name="description"
+          content="<#list articles as article>${article.articleTitle}<#if article_has_next>,</#if></#list>"/>
+</@head>
+</head>
+<body>
+<#include "header.ftl">
+<div class="main">
+    <main class="content">
+        <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__tags"></i>
+                <a href="${servePath}/tags.html" class="breadcrumb">${allTagsLabel}</a>
+                &nbsp; > &nbsp;
+                ${tag.tagTitle} ${tagLabel}
            </div>
        </div>
-        <#include "footer.ftl">
-    </body>
+        <#include "article-list.ftl">
+    </main>
+    <#include "side.ftl">
+</div>
+<#include "footer.ftl">
+</body>
 </html>
--- a/nijigen/tags.ftl
+++ b/nijigen/tags.ftl
@ -20,45 +20,51 @@
 <#include "macro-head.ftl">
 <!DOCTYPE html>
 <html>
-    <head>
-        <@head title="${allTagsLabel} - ${blogTitle}">
-        <meta name="keywords" content="${metaKeywords},${allTagsLabel}"/>
-        <meta name="description" content="<#list tags as tag>${tag.tagTitle}<#if tag_has_next>,</#if></#list>"/>
-        </@head>
-    </head>
-    <body>
-        <#include "header.ftl">
-        <div class="wrapper">
-            <div class="main-wrap">
-                <main class="other">
-                    <div class="title">
-                        <h2><i class="icon-tags"></i>
-                            &nbsp; ${sumLabel} ${tags?size} ${tagLabel}
-                    </div>
-                    <div class="tags">
-                        <#list tags as tag>
-                            <a rel="tag" data-count="${tag.tagPublishedRefCount}" class="tag"
-                               href="${servePath}/tags/${tag.tagTitle?url('UTF-8')}">
-                                <span>${tag.tagTitle}</span>
-                                (<b>${tag.tagPublishedRefCount}</b>)
-                            </a>
-                        </#list>
-                    </div>
-                </main>
-                <#include "side.ftl">
+<head>
+<@head title="${allTagsLabel} - ${blogTitle}">
+    <meta name="keywords" content="${metaKeywords},${allTagsLabel}"/>
+    <meta name="description" content="<#list tags as tag>${tag.tagTitle}<#if tag_has_next>,</#if></#list>"/>
+</@head>
+</head>
+<body>
+<#include "header.ftl">
+<div class="main">
+    <main class="content">
+        <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__tags"></i> ${sumLabel} ${tags?size} ${tagLabel}
            </div>
        </div>
-        <#include "footer.ftl">
-            <script type="text/javascript" src="${staticServePath}/skins/${skinDirName}/js/isotope.pkgd.min.js" charset="utf-8"></script>
-            <script>
-            $('.tags').isotope({
-                transitionDuration: '1.5s',
-                filter: 'a',
-                layoutMode: 'fitRows'
-            });
-            $('.tags').isotope({
-                sortBy: 'random'
-            });
-            </script>
-    </body>
+
+        <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>${tag.tagTitle}</span>
+                     (<b>${tag.tagPublishedRefCount}</b>)
+                 </a>
+                 </#list>
+            </div>
+        </div>
+    </main>
+    <#include "side.ftl">
+</div>
+<#include "footer.ftl">
+<script type="text/javascript" src="${staticServePath}/skins/${skinDirName}/js/isotope.pkgd.min.js"
+        charset="utf-8"></script>
+<script>
+    $('.tags').isotope({
+        transitionDuration: '1.5s',
+        filter: 'a',
+        layoutMode: 'fitRows',
+    })
+    $('.tags').isotope({
+        sortBy: 'random',
+    })
+</script>
+</body>
 </html>