👄 list
This commit is contained in:
Van
parent
8865ba8c87
commit
8cc787a718
@ -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>
|
||||
|
||||
<#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>
|
||||
>
|
||||
<i class="icon__inbox"></i>
|
||||
<a href="${servePath}/archives.html" class="breadcrumb">${archiveLabel}</a>
|
||||
>
|
||||
<#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>
|
||||
|
||||
@ -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>
|
||||
${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>
|
||||
>
|
||||
<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>
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
-->
|
||||
<div class="article-list">
|
||||
<#list articles as article>
|
||||
<article class="item">
|
||||
<article class="item <#if article_index < 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>
|
||||
|
||||
@ -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>
|
||||
|
|
||||
<span class="tooltipped tooltipped-n" aria-label="${commentCountLabel}">
|
||||
<i class="icon-comments"></i>
|
||||
<a href="${servePath}${article.articlePermalink}#comments">
|
||||
${article.articleCommentCount} ${commentLabel}</a>
|
||||
</span>
|
||||
|
|
||||
<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> </div>
|
||||
<div class="fn__flex-1" id="randomArticlesWrap">
|
||||
<div class="module">
|
||||
<div id="randomArticles" class="module__list"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div> </div>
|
||||
<div class="fn__flex-1" id="relevantArticlesWrap">
|
||||
<div class="module">
|
||||
<div id="relevantArticles" class="module__list"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<#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>
|
||||
|
||||
@ -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>
|
||||
${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>
|
||||
>
|
||||
<i class="icon__category"></i>
|
||||
${categoryLabel}
|
||||
>
|
||||
<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>
|
||||
|
||||
@ -28,15 +28,17 @@
|
||||
<#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>
|
||||
<time class="ft-gray">${comment.commentDate?string("yyyy-MM-dd HH:mm")}</time>
|
||||
|
||||
<#if article?? && article.commentable>
|
||||
<a class="reply-btn" href="javascript:replyTo('${comment.oId}')">${replyLabel}</a>
|
||||
</#if>
|
||||
</div>
|
||||
|
||||
@ -604,6 +604,11 @@ a {
|
||||
margin-bottom: 30px;
|
||||
box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.2);
|
||||
transition: all .3s; }
|
||||
.module.item {
|
||||
transform: translateY(30px);
|
||||
transition: transform 2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
|
||||
.module.item--active {
|
||||
transform: translate(0); }
|
||||
.module:hover {
|
||||
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.8); }
|
||||
.module__content {
|
||||
@ -723,6 +728,10 @@ a {
|
||||
margin: auto;
|
||||
display: flex; }
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
min-width: 1px; }
|
||||
|
||||
.side {
|
||||
width: 280px;
|
||||
min-width: 280px;
|
||||
@ -766,13 +775,18 @@ a {
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
|
||||
text-decoration: none; }
|
||||
|
||||
.breadcrumb {
|
||||
color: #7266BA !important; }
|
||||
.breadcrumb:hover {
|
||||
color: #3d4450 !important; }
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
padding: 15px;
|
||||
margin-bottom: 30px; }
|
||||
.footer a {
|
||||
color: #3d4450; }
|
||||
color: #7266BA; }
|
||||
|
||||
.article-list .item {
|
||||
border-radius: 5px;
|
||||
@ -781,7 +795,10 @@ a {
|
||||
padding: 15px;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
position: relative;
|
||||
transition: all .3s; }
|
||||
transition: all 0.3s, transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
transform: perspective(2500px) rotateX(-100deg); }
|
||||
.article-list .item--active {
|
||||
transform: perspective(2500px) rotateX(0); }
|
||||
.article-list .item:hover {
|
||||
background-color: #fff;
|
||||
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.8); }
|
||||
@ -828,7 +845,7 @@ a {
|
||||
padding: 0 10px;
|
||||
line-height: 24px;
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
margin: 0 0 10px 10px;
|
||||
background-color: rgba(114, 102, 186, 0.58); }
|
||||
.pagination__item--text {
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
@ -870,7 +887,8 @@ a {
|
||||
.article-list .item__date--m {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
color: #3d4450; }
|
||||
color: #3d4450;
|
||||
display: block; }
|
||||
.tag {
|
||||
margin: 0 5px 10px 0;
|
||||
font-size: 12px; }
|
||||
@ -892,4 +910,6 @@ a {
|
||||
.header__m .module__list {
|
||||
display: none; }
|
||||
.header__m .module__list li {
|
||||
background-color: #fff; } }
|
||||
background-color: #fff; }
|
||||
.module__content.ft__center {
|
||||
text-align: left; } }
|
||||
|
||||
@ -50,8 +50,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 {
|
||||
@ -225,6 +233,11 @@ a {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
min-width: 1px;
|
||||
}
|
||||
|
||||
// side
|
||||
.side {
|
||||
width: 280px;
|
||||
@ -282,6 +295,13 @@ a {
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
color: $purple !important;
|
||||
&:hover {
|
||||
color: $black !important;
|
||||
}
|
||||
}
|
||||
|
||||
// footer
|
||||
.footer {
|
||||
text-align: center;
|
||||
@ -289,7 +309,7 @@ a {
|
||||
padding: 15px;
|
||||
margin-bottom: 30px;
|
||||
a {
|
||||
color: $black;
|
||||
color: $purple;
|
||||
}
|
||||
}
|
||||
|
||||
@ -302,11 +322,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 +393,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 {
|
||||
@ -436,6 +461,7 @@ a {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
color: $black;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tag {
|
||||
@ -473,4 +499,8 @@ a {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.module__content.ft__center {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
@ -20,55 +20,55 @@
|
||||
<#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">
|
||||
</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>
|
||||
<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">
|
||||
<#if 0 != recentComments?size>
|
||||
<ul class="comments" id="comments">
|
||||
<#list recentComments as comment>
|
||||
<#include "common-comment.ftl"/>
|
||||
<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">
|
||||
</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>
|
||||
|
||||
@ -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()
|
||||
@ -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">
|
||||
|
||||
@ -18,9 +18,8 @@
|
||||
|
||||
#
|
||||
# Description: Spaces skin.
|
||||
# Version: 1.0.0.0, Feb 17, 2017
|
||||
# Version: 1.0.0.0, Sep 1, 2018
|
||||
# Author: Liyuan Li
|
||||
#
|
||||
|
||||
name=9IPHP
|
||||
memo=https://github.com/9IPHP
|
||||
name=nijigen
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user