https://github.com/b3log/solo/issues/12737 pc

2019-03-28 18:10:40 +08:00 · 2019-03-28 18:10:40 +08:00 · acb13c5f18
parent 59450e3218
commit acb13c5f18
13 changed files with 230 additions and 331 deletions
--- a/Casper/archive-articles.ftl
+++ b/Casper/archive-articles.ftl
@ -26,34 +26,24 @@
 </@head>
 </head>
 <body>
-<#include "header.ftl">
 <div id="pjax">
    <#if pjax><!---- pjax {#pjax} start ----></#if>
-<#include "nav.ftl">
-<div class="main">
-<#if noticeBoard??>
-    <div class="board">
-    ${noticeBoard}
-    </div>
-</#if>
-    <div class="wrapper content">
-        <div class="module__title">
-            <span>
-                <#if "en" == localeString?substring(0, 2)>
-                    ${archiveDate.archiveDateMonth} ${archiveDate.archiveDateYear}
-                <#else>
-                    ${archiveDate.archiveDateYear} ${yearLabel} ${archiveDate.archiveDateMonth} ${monthLabel}
-                </#if>
-                <span class="ft-green">
-                    ${archiveDate.archiveDatePublishedArticleCount}
-                    <span class="ft-12">${cntArticleLabel}</span>
-                </span>
-            </span>
+    <#include "marcr-header.ftl">
+    <@header type='other'></@header>
+    <div class="wrapper other">
+        <h2 class="other__title">
+            <a href="${servePath}/archives.html" class="ft__a">${archiveLabel}</a> -
+             <#if "en" == localeString?substring(0, 2)>
+                 ${archiveDate.archiveDateMonth} ${archiveDate.archiveDateYear}
+             <#else>
+                 ${archiveDate.archiveDateYear} ${yearLabel} ${archiveDate.archiveDateMonth} ${monthLabel}
+             </#if>
+        </h2>
+        <div class="other__meta other__meta--list">
+            ${archiveDate.archiveDatePublishedArticleCount} ${cntArticleLabel}
        </div>
        <#include "article-list.ftl">
    </div>
-<#include "bottom2.ftl">
-</div>
 <#if pjax><!---- pjax {#pjax} end ----></#if>
 </div>
 <#include "footer.ftl">
--- a/Casper/archives.ftl
+++ b/Casper/archives.ftl
@ -26,48 +26,36 @@
 </@head>
 </head>
 <body>
-<#include "header.ftl">
 <div id="pjax">
    <#if pjax><!---- pjax {#pjax} start ----></#if>
-<#include "nav.ftl">
-<div class="main">
-<#if noticeBoard??>
-    <div class="board">
-    ${noticeBoard}
-    </div>
-</#if>
-    <div class="wrapper content">
-        <div class="module__title">
-            <span>
-                ${archiveDates?size}
-                <span class="ft-green ft-12">${cntMonthLabel}</span>
-                ${statistic.statisticPublishedBlogArticleCount}
-                <span class="ft-green ft-12">${cntArticleLabel}</span>
-            </span>
+<#include "marcr-header.ftl">
+    <@header type='other'></@header>
+    <div class="wrapper other">
+        <h2 class="other__title"><a href="${servePath}" class="ft__a">${blogTitle}</a> - ${archiveLabel}</h2>
+        <div class="other__meta">
+        ${archiveDates?size} ${cntMonthLabel}
+        ${statistic.statisticPublishedBlogArticleCount} ${cntArticleLabel}
        </div>
-    <#if 0 != archiveDates?size>
-        <#list archiveDates as archiveDate>
-            <div class="page__item">
-                <h3>
-                    <a class="ft-gray"
-                       href="${servePath}/archives/${archiveDate.archiveDateYear}/${archiveDate.archiveDateMonth}">
-                        <#if "en" == localeString?substring(0, 2)>
+        <div class="other__content">
+            <#if 0 != archiveDates?size>
+            <#list archiveDates as archiveDate>
+                <div class="other__item other__item--archive">
+                    <a href="${servePath}/archives/${archiveDate.archiveDateYear}/${archiveDate.archiveDateMonth}">
+                    <#if "en" == localeString?substring(0, 2)>
                        ${archiveDate.monthName} ${archiveDate.archiveDateYear}
-                        <#else>
+                    <#else>
                        ${archiveDate.archiveDateYear} ${yearLabel} ${archiveDate.archiveDateMonth} ${monthLabel}
-                        </#if>
-                        <span class="ft-green">
-                            ${archiveDate.archiveDatePublishedArticleCount}
-                            <span class="ft-12">${cntArticleLabel}</span>
-                        </span>
+                    </#if>
                    </a>
-                </h3>
-            </div>
-        </#list>
-    </#if>
+                    <span>
+                        ${archiveDate.archiveDatePublishedArticleCount}
+                        ${cntArticleLabel}
+                    </span>
+                </div>
+            </#list>
+            </#if>
+        </div>
    </div>
-<#include "bottom.ftl">
-</div>
    <#if pjax><!---- pjax {#pjax} end ----></#if>
 </div>
 <#include "footer.ftl">
--- a/Casper/article.ftl
+++ b/Casper/article.ftl
@ -72,7 +72,7 @@
            </h2>
        </div>
        <div class="item__cover" style="background-image: url(${article.articleImg1URL})"></div>
-        <section class="vditor-reset item__content wrapper">
+        <section class="vditor-reset item__content item__content--article wrapper">
        ${article.articleContent}
            <#if "" != article.articleSign.signHTML?trim>
                <div>
@ -99,10 +99,8 @@
    <#if pjax><!---- pjax {#pjax} end ----></#if>
 </div>
 <#include "footer.ftl">
-<script type="text/javascript" src="${staticServePath}/js/lib/jquery.qrcode.min.js"></script>
 <#if pjax><!---- pjax {#pjax} start ----></#if>
 <@comment_script oId=article.oId commentable=article.commentable>
-    Skin.initArticle()
    page.tips.externalRelevantArticlesDisplayCount = "${externalRelevantArticlesDisplayCount}";
    <#if 0 != randomArticlesDisplayCount>
    page.loadRandomArticles('<h3>${randomArticlesLabel}</h3>');
@ -114,6 +112,7 @@
    <#if 0 != relevantArticlesDisplayCount>
    page.loadRelevantArticles('${article.oId}', '<h3>${relevantArticlesLabel}</h3>');
    </#if>
+    Skin.initArticle()
 </@comment_script>
 <#if pjax><!---- pjax {#pjax} end ----></#if>
 </body>
--- a/Casper/author-articles.ftl
+++ b/Casper/author-articles.ftl
@ -0,0 +1,45 @@
+<#--
+
+    Solo - A small and beautiful blogging system written in Java.
+    Copyright (c) 2010-2019, b3log.org & hacpai.com
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+-->
+<#include "../../common-template/macro-common_head.ftl">
+<!DOCTYPE html>
+<html>
+<head>
+    <@head title="${authorName} - ${blogTitle}">
+        <link rel="stylesheet"
+              href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
+    </@head>
+</head>
+<body>
+<div id="pjax">
+    <#if pjax><!---- pjax {#pjax} start ----></#if>
+    <#include "marcr-header.ftl">
+    <@header type='other'></@header>
+    <div class="wrapper other">
+        <h2 class="other__title">
+            <a href="${servePath}" class="ft__a">${blogTitle}</a> - ${authorName}
+        </h2>
+        <div class="other__meta other__meta--list">&nbsp;</div>
+        <#include "article-list.ftl">
+    </div>
+<#if pjax><!---- pjax {#pjax} end ----></#if>
+</div>
+<#include "footer.ftl">
+</body>
+</html>
--- a/Casper/category-articles.ftl
+++ b/Casper/category-articles.ftl
@ -26,30 +26,18 @@
 </@head>
 </head>
 <body>
-<#include "header.ftl">
 <div id="pjax">
    <#if pjax><!---- pjax {#pjax} start ----></#if>
-<#include "nav.ftl">
-<div class="main">
-<#if noticeBoard??>
-    <div class="board">
-    ${noticeBoard}
-    </div>
-</#if>
-    <div class="wrapper content">
-        <div class="module__title">
-            <span>
-                ${category.categoryTitle}
-                <span class="ft-green ft-12">
-                    ${category.categoryDescription}
-                </span>
-            </span>
+<#include "marcr-header.ftl">
+    <@header type='other'></@header>
+    <div class="wrapper other">
+        <h2 class="other__title"><a href="${servePath}" class="ft__a">${blogTitle}</a> - ${category.categoryTitle}</h2>
+        <div class="other__meta other__meta--list">
+            ${category.categoryDescription} &nbsp;
        </div>
-    <#include "article-list.ftl">
+        <#include "article-list.ftl">
    </div>
-<#include "bottom2.ftl">
-</div>
-    <#if pjax><!---- pjax {#pjax} end ----></#if>
+<#if pjax><!---- pjax {#pjax} end ----></#if>
 </div>
 <#include "footer.ftl">
 </body>
--- a/Casper/css/base.css
+++ b/Casper/css/base.css
--- a/Casper/css/base.scss
+++ b/Casper/css/base.scss
@ -47,6 +47,13 @@ a {
  color: $link;
 }

+.ft__a {
+  color: $gray;
+  &:hover {
+    color: rgba($gray, .8);
+  }
+}
+
 .wrapper {
  max-width: 1040px;
  margin: 0 auto;
@ -79,6 +86,26 @@ a {
      line-height: 64px;
    }
  }
+  &--other {
+    height: 407px;
+    .header__title {
+      display: none;
+    }
+    &:before {
+      content: "";
+      height: 100%;
+      position: absolute;
+      background: url("../images/header-bg.jpg") no-repeat center center;
+      width: 100%;
+      top: 0;
+      background-size: cover;
+      filter: brightness(38%);
+    }
+    .header__nav a {
+      margin-bottom: 0;
+      line-height: 64px;
+    }
+  }
  &__title {
    position: relative;
    text-align: center;
@ -343,7 +370,7 @@ a {
  &__top {
    position: fixed;
    width: 100%;
-    top: -60px;
+    top: -61px;
    background-color: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba($gray, 0.1);
    height: 60px;
@ -445,8 +472,10 @@ a {
    &__content {
      padding: 70px 100px 0;
      box-sizing: border-box;
-      margin-top: -164px;
      background-color: #fff;
+      &--article {
+        margin-top: -164px;
+      }
    }
    &__tip {
      margin-bottom: 40px;
@ -469,7 +498,7 @@ a {
 .post__toc {
  display: none;
  position: fixed;
-  top: 64px;
+  top: 84px;
  bottom: 80px;
  overflow: auto;
  padding-left: 3px;
@ -593,4 +622,44 @@ a {
    width: 100%;
    box-sizing: border-box;
  }
+}
+
+.other {
+  position: relative;
+  &__title {
+    margin: -220px 0 5px;
+    color: #fff;
+    font-size: 28px;
+    text-align: center;
+    font-weight: 400;
+  }
+  &__meta {
+    color: #fff;
+    font-size: 14px;
+    text-align: center;
+    &--list {
+      margin-bottom: 154px;
+    }
+  }
+  &__content {
+    background-color: #fff;
+    padding: 70px 100px;
+    margin: 77px auto 40px;
+    box-shadow: 8px 14px 38px rgba(39, 44, 49, 0.06), 1px 3px 8px rgba(39, 44, 49, 0.03);
+    border-radius: 5px;
+  }
+  &__item {
+    line-height: 20px;
+    margin: 10px;
+    white-space: nowrap;
+    display: block;
+    &--archive {
+      width: 187px;
+      display: inline-block;
+    }
+    span, div {
+      color: $gray;
+      font-size: 12px;
+    }
+  }
 }
--- a/Casper/js/common.js
+++ b/Casper/js/common.js
@ -19,7 +19,7 @@
 * @fileoverview util and every page should be used.
 *
 * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
- * @version 0.1.0.1, Mar 22, 2019
+ * @version 0.1.0.1, Mar 28, 2019
 */

 /**
@ -28,151 +28,11 @@
 */
 var Skin = {
  init: function () {
-    var $article__toc = $('.article__toc')
-    $(window).scroll(function () {
-      if ($article__toc.length === 1) {
-        if ($('.article__bottom').offset().top < $(window).scrollTop()) {
-          $article__toc.hide()
-        } else {
-          $article__toc.show()
-        }
-      }
-
-      if ($('#headerNav').length === 0) {
-        return
-      }
-      if ($(window).scrollTop() > 64) {
-        $('#headerNav').addClass('header__nav--fixed')
-        $('.main').css('margin-top', '100px')
-      } else {
-        $('#headerNav').removeClass('header__nav--fixed')
-        $('.main').css('margin-top', '50px')
-      }
-    })
-    $(window).scroll()
-
-    Util.initPjax(function () {
-      Util.parseMarkdown()
-      if (Util.isArticlePage(location.href)) {
-        if (!$('#articleSideShare .article__code').qrcode) {
-          $.ajax({
-            method: 'GET',
-            url: Label.staticServePath + '/js/lib/jquery.qrcode.min.js',
-            dataType: 'script',
-            cache: true,
-          })
-        }
-      }
-      Skin.initToc()
-    })
-    Skin.initToc()
-  },
-  initTags: function () {
-    var $tags = $('#tags')
-    var tagsArray = $tags.find('.tag')
-    // 根据引用次数添加样式，产生云效果
-    var max = parseInt(tagsArray.first().data('count'))
-    var distance = Math.ceil(max / 5)
-    for (var i = 0; i < tagsArray.length; i++) {
-      var count = parseInt($(tagsArray[i]).data('count'))
-      // 算出当前 tag 数目所在的区间，加上 class
-      for (var j = 0; j < 5; j++) {
-        if (count > j * distance && count <= (j + 1) * distance) {
-          tagsArray[i].className = 'tag tag__level' + j
-          break
-        }
-      }
-    }
-
-    // 按字母或者中文拼音进行排序
-    $tags.html(tagsArray.get().sort(function (a, b) {
-      var valA = $(a).text().toLowerCase()
-      var valB = $(b).text().toLowerCase()
-      // 对中英文排序的处理
-      return valA.localeCompare(valB)
-    }))
-  },
-  initArticle1111: function () {
-    if ($('#articleShare').length === 0) {
-      return
-    }
-
-    var $postSide = $('.post__side')
-    if ($(window).height() >= $('.post').height()) {
-      $postSide.css('opacity', 1)
-    }
-    $postSide.css('left', (($('.post').offset().left - 20) / 2 - 27) + 'px')
-
-    var sideAbsoluteTop = ($(window).height() - 249) / 2 + 125
-    var beforScrollTop = $(window).scrollTop()
-    $(window).scroll(function () {
-      if ($('#articleShare').length === 0) {
-        return
-      }
-      var scrollTop = $(window).scrollTop()
-      var bottomTop = $('.article__bottom').offset().top
-      if (scrollTop > 65) {
-        $postSide.css('opacity', 1)
-
-        if (beforScrollTop - scrollTop > 0) {
-          // up
-          $('.header').addClass('header--fixed').css({'top': '0'})
-          $('.main').css('padding-top', '64px')
-          if ($(window).height() <= $('.post').height() && scrollTop <
-            bottomTop - $(window).height()) {
-            $('.article__toolbar').css({
-              'bottom': 0,
-              'opacity': 1,
-            })
-          }
-        } else if (beforScrollTop - scrollTop < 0) {
-          // down
-          $('.header').css({'top': '-64px'}).removeClass('header--fixed')
-          $('.main').css('padding-top', '0')
-          $('.article__toolbar').css({
-            'bottom': '-44px',
-            'opacity': 0,
-          })
-        }
-
-      } else {
-        if ($(window).height() <= $('.post').height()) {
-          $postSide.css('opacity', 0)
-        }
-
-        $('.header').removeClass('header--fixed').css('top', '-64px')
-        $('.main').css('padding-top', '0')
-      }
-
-      if (scrollTop > bottomTop - $(window).height()) {
-        if (bottomTop < $(window).height()) {
-          $postSide.css({
-            'position': 'absolute',
-            'top': (bottomTop - 125) + 'px',
-          })
-        } else {
-          $postSide.css({
-            'position': 'absolute',
-            'top': (bottomTop - sideAbsoluteTop) + 'px',
-          })
-        }
-      } else {
-        $postSide.css({
-          'position': 'fixed',
-          'top': '50%',
-        })
-      }
-
-      beforScrollTop = scrollTop
-    })
-
-    $(window).scroll()
+    Util.initPjax()
  },
  initArticle: function () {
-    this._initPage()
    page.share()
-  },
-  _initPage: function () {
+
    var $articleTocs = $('.vditor-reset [id^=b3_solo_h]')
    var $articleToc = $('.article__toc')
    var $articleProgress = $('.article__progress')
@ -182,6 +42,7 @@ var Skin = {
        css('left', $('.article .item__content').offset().left +
          $('.article .item__content').outerWidth() - 80)
    }
+
    $(window).unbind('scroll').scroll(function (event) {
      if ($articleProgress.length === 0) {
        return false
@ -194,14 +55,14 @@ var Skin = {
      if ($(window).scrollTop() > 236) {
        $('.article__top').css('top', 0)
      } else {
-        $('.article__top').css('top', -60)
+        $('.article__top').css('top', -61)
      }

      if ($('.article__toc li').length === 0) {
        return false
      }

-      if ($(window).scrollTop() > 990 && $(window).scrollTop() <
+      if ($(window).scrollTop() > 975 && $(window).scrollTop() <
        $('.article').outerHeight() + 100) {
        $('.post__toc').show()
      } else {
@ -239,4 +100,4 @@ var Skin = {
    $(window).scroll()
  },
 }
-// Skin.init();
+Skin.init();
--- a/Casper/links.ftl
+++ b/Casper/links.ftl
@ -26,41 +26,29 @@
 </@head>
 </head>
 <body>
-<#include "header.ftl">
 <div id="pjax">
    <#if pjax><!---- pjax {#pjax} start ----></#if>
-<#include "nav.ftl">
-<div class="main">
-<#if noticeBoard??>
-    <div class="board">
-        ${noticeBoard}
-    </div>
-</#if>
-    <div class="wrapper content">
-        <div class="module__title">
-            <span>
-                ${links?size}
-                    <span class="ft-green ft-12">${linkLabel}</span>
-            </span>
+<#include "marcr-header.ftl">
+    <@header type='other'></@header>
+    <div class="wrapper other">
+        <h2 class="other__title"><a href="${servePath}" class="ft__a">${blogTitle}</a> - ${linkLabel}</h2>
+        <div class="other__meta">
+        ${links?size} ${linkLabel}
        </div>
-    <#if 0 != links?size>
-        <#list links as link>
-            <div class="page__item">
-                <h3>
-                    <a rel="friend" class="ft-gray" href="${link.linkAddress}" target="_blank">
+        <div class="other__content">
+        <#if 0 != links?size>
+            <#list links as link>
+                <div class="other__item">
+                    <a rel="friend" href="${link.linkAddress}" target="_blank">
                        ${link.linkTitle}
-                        <span class="ft-12 ft-green">${link.linkDescription}</span>
                    </a>
-                </h3>
-
-            </div>
-        </#list>
-    </#if>
+                    <div class="ft-12 ft-green">${link.linkDescription}</div>
+                </div>
+            </#list>
+        </#if>
+        </div>
    </div>
-<#include "bottom.ftl">
-</div>
    <#if pjax><!---- pjax {#pjax} end ----></#if>
-</div>
 <#include "footer.ftl">
 </body>
 </html>
--- a/Casper/marcr-header.ftl
+++ b/Casper/marcr-header.ftl
@ -47,7 +47,7 @@

        <div class="fn__right">
            <#include "../../common-template/macro-user_site.ftl">
-            <@userSite dir="n"></@userSite>
+            <@userSite dir=""></@userSite>
            <a rel="alternate" href="${servePath}/rss.xml">
                RSS
            </a>
--- a/Casper/page.ftl
+++ b/Casper/page.ftl
@ -28,35 +28,22 @@
 </@head>
 </head>
 <body>
-<#include "header.ftl">
-<div id="pjax">
+<div id="pjax"></div>
    <#if pjax><!---- pjax {#pjax} start ----></#if>
-<#include "nav.ftl">
-<div class="main">
-<#if noticeBoard??>
-    <div class="board">
-    ${noticeBoard}
-    </div>
-</#if>
-    <div class="wrapper content">
-        <article class="post">
-            <section class="vditor-reset">
-            ${page.pageContent}
-            </section>
-        </article>
-    </div>
-</div>
-<div class="article__bottom">
-<@comments commentList=pageComments article=page></@comments>
-</div>
-    <div style="margin-left: 20px;margin-right: 20px">
-    <#include "bottom.ftl">
+    <#include "marcr-header.ftl">
+    <@header type='article'></@header>
+    <div class="article">
+        <section class="vditor-reset item__content wrapper">
+        ${page.pageContent}
+        </section>
    </div>
+
+    <@comments commentList=pageComments article=page></@comments>
    <#if pjax><!---- pjax {#pjax} end ----></#if>
 </div>
 <#include "footer.ftl">
 <#if pjax><!---- pjax {#pjax} start ----></#if>
 <@comment_script oId=page.oId commentable=page.commentable></@comment_script>
- <#if pjax><!---- pjax {#pjax} end ----></#if>
+<#if pjax><!---- pjax {#pjax} end ----></#if>
 </body>
 </html>
--- a/Casper/tag-articles.ftl
+++ b/Casper/tag-articles.ftl
@ -26,31 +26,18 @@
 </@head>
 </head>
 <body>
-<#include "header.ftl">
 <div id="pjax">
    <#if pjax><!---- pjax {#pjax} start ----></#if>
-<#include "nav.ftl">
-<div class="main">
-<#if noticeBoard??>
-    <div class="board">
-    ${noticeBoard}
-    </div>
-</#if>
-    <div class="wrapper content">
-        <div class="module__title">
-            <span>
-                ${tag.tagTitle}
-                    <span class="ft-green">
-                        ${tag.tagPublishedRefCount}
-                        <span class="ft-12">${tagLabel}</span>
-                </span>
-            </span>
+<#include "marcr-header.ftl">
+    <@header type='other'></@header>
+    <div class="wrapper other">
+        <h2 class="other__title"><a href="${servePath}/tags.html" class="ft__a">${allTagsLabel}</a> - ${tag.tagTitle}</h2>
+        <div class="other__meta--list other__meta">
+        ${tag.tagPublishedRefCount} ${tagLabel}
        </div>
-    <#include "article-list.ftl">
+        <#include "article-list.ftl">
    </div>
-<#include "bottom2.ftl">
-</div>
-    <#if pjax><!---- pjax {#pjax} end ----></#if>
+<#if pjax><!---- pjax {#pjax} end ----></#if>
 </div>
 <#include "footer.ftl">
 </body>
--- a/Casper/tags.ftl
+++ b/Casper/tags.ftl
@ -26,42 +26,39 @@
 </@head>
 </head>
 <body>
-<#include "header.ftl">
 <div id="pjax">
    <#if pjax><!---- pjax {#pjax} start ----></#if>
-<#include "nav.ftl">
-<div class="main">
-<#if noticeBoard??>
-    <div class="board">
-    ${noticeBoard}
-    </div>
-</#if>
-    <div class="wrapper content">
-        <div class="module__title">
-            <span>
-                ${tags?size}
-                    <span class="ft-green ft-12">${tagLabel}</span>
-            </span>
+<#include "marcr-header.ftl">
+    <@header type='other'></@header>
+    <div class="wrapper other">
+        <h2 class="other__title"><a href="${servePath}" class="ft__a">${blogTitle}</a> - ${allTagsLabel}</h2>
+        <div class="other__meta">
+        ${tags?size} ${tagLabel}
        </div>
-        <div id="tags">
+        <div class="other__content">
+         <#list mostUsedCategories as category>
+             <span class="other__item--archive other__item">
+                 <a href="${servePath}/category/${category.categoryURI}">
+                     ${category.categoryTitle}
+                 </a>
+                 <span>${category.categoryTagCnt} ${tagLabel}</span>
+             </span>
+         </#list>
+        </div>
+        <div class="other__content">
        <#list tags as tag>
-            <a rel="tag" data-count="${tag.tagPublishedRefCount}" class="tag"
-               href="${servePath}/tags/${tag.tagTitle?url('UTF-8')}">
-            ${tag.tagTitle}
-                <span class="ft-green ft-12">${tag.tagPublishedRefCount} ${countLabel}</span>
-            </a>
+            <span class="other__item other__item--archive">
+                 <a rel="tag" data-count="${tag.tagPublishedRefCount}" class="tag"
+                    href="${servePath}/tags/${tag.tagTitle?url('UTF-8')}">
+                     ${tag.tagTitle}
+                 </a>
+                <span>${tag.tagPublishedRefCount} ${countLabel}</span>
+            </span>
        </#list>
        </div>
    </div>
-<#include "bottom.ftl">
-</div>
    <#if pjax><!---- pjax {#pjax} end ----></#if>
 </div>
 <#include "footer.ftl">
- <#if pjax><!---- pjax {#pjax} start ----></#if>
-<script>
-    Skin.initTags()
-</script>
-    <#if pjax><!---- pjax {#pjax} end ----></#if>
 </body>
 </html>