Skip to content

S
solo-1
Commit 3bc0569a authored by Vanessa's avatar Vanessa
Browse files
Options

💄 #12389 article list

parent ae8b462a
Hide whitespace changes
Inline Side-by-side
Showing with 337 additions and 170 deletions
src/main/webapp/skins/Medium/article-list.ftl
View file @ 3bc0569a
<div>
<#list articles as article>
<article class="post">
<header>
<h1>
<a rel="bookmark" href="${servePath}${article.articlePermalink}">
<div class="fn-clear article__wrap">
<#list articles as article>
<article class="article__item
<#if article_index == 0 || article_index == 10>article__item--big
<#elseif article_index &gt; 0 && article_index &lt; 5>article__item--small
<#elseif article_index &gt; 4 && article_index &lt; 8>article__item--big
<#elseif article_index == 8 || article_index == 9>article__item--mid
<#elseif article_index &gt; 10 && article_index &lt; 15>article__item--small
<#elseif article_index &gt; 14 && article_index &lt; 18>article__item--big
<#elseif article_index &gt; 17 && article_index &lt; 20>article__item--mid
<#else>article__item--big
</#if>">
<header class="article__panel">
<div class="article__main">
<h2 class="article__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>
</h1>
</a>
<#if article.articlePutTop>
<sup>
${topArticleLabel}
</sup>
</#if>
<#if article.hasUpdated>
<sup>
${updatedLabel}
</sup>
</#if>
</h2>
<div class="content-reset article__content">
${article.articleAbstract}
</div>
</div>
<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 class="article__meta ft-gray fn-flex">
<time>
${article.articleCreateDate?string("yyyy-MM-dd")}
</time> &nbsp;•&nbsp;
<a href="${servePath}${article.articlePermalink}#comments" class="ft-gray">
${article.articleCommentCount} ${commentLabel}
</a> &nbsp;•&nbsp;
<a href="${servePath}${article.articlePermalink}" class="ft-gray">
${article.articleViewCount} ${viewLabel}
</a>
</div>
</header>
<div class="content-reset">
${article.articleAbstract}
</div>
<footer class="fn-clear tags">
<#list article.articleTags?split(",") as articleTag>
<a class="tag" rel="tag" href="${servePath}/tags/${articleTag?url('UTF-8')}">
${articleTag}</a>
</#list>
<a href="${servePath}${article.articlePermalink}#more" rel="contents" class="fn-right">
${readLabel} &raquo;
</a>
</footer>
</article>
</#list>
</#list>
</div>
<#if 0 != paginationPageCount>
<div class="fn-clear">
<nav class="pagination fn-right">
<#if 1 != paginationPageNums?first>
<a href="${servePath}${path}/${paginationPreviousPageNum}" class="page-number">&laquo;</a>
<a class="page-number" href="${servePath}${path}/1">1</a> <span class="page-number">...</span>
</#if>
<#list paginationPageNums as paginationPageNum>
<#if paginationPageNum == paginationCurrentPageNum>
<span class="page-number current">${paginationPageNum}</span>
<#else>
<a class="page-number" href="${servePath}${path}/${paginationPageNum}">${paginationPageNum}</a>
</#if>
</#list>
<#if paginationPageNums?last != paginationPageCount> <span class="page-number">...</span>
<a href="${servePath}${path}/${paginationPageCount}" class="page-number">${paginationPageCount}</a>
<a href="${servePath}${path}/${paginationNextPageNum}" class="page-number">&raquo;</a>
</#if>
</nav>
</div>
<#if 0 != paginationPageCount>
<nav class="pagination">
<#if 1 != paginationPageNums?first>
<a href="${servePath}${path}/${paginationPreviousPageNum}" class="pagination__item">&laquo;</a>
<a class="pagination__item" href="${servePath}${path}/1">1</a>
<span class="pagination__item pagination__omit">...</span>
</#if>
<#list paginationPageNums as paginationPageNum>
<#if paginationPageNum == paginationCurrentPageNum>
<span class="pagination__item pagination__item--active">${paginationPageNum}</span>
<#else>
<a class="pagination__item" href="${servePath}${path}/${paginationPageNum}">${paginationPageNum}</a>
</#if>
</#list>
<#if paginationPageNums?last != paginationPageCount>
<span class="pagination__item pagination__omit">...</span>
<a href="${servePath}${path}/${paginationPageCount}" class="pagination__item">${paginationPageCount}</a>
<a href="${servePath}${path}/${paginationNextPageNum}" class="pagination__item">&raquo;</a>
</#if>
</div>
\ No newline at end of file
</nav>
</#if>
\ No newline at end of file
src/main/webapp/skins/Medium/bottom.ftl
View file @ 3bc0569a
<div class="footer__tag wrapper">
<div class="footer__tag wrapper fn-flex">
<#if 0 != mostUsedCategories?size>
<#list mostUsedCategories as category>
<a class="tag pipe-tooltipped pipe-tooltipped--n"
aria-label="${category.categoryTagCnt} ${cntLabel}${tagsLabel}"
href="${servePath}/tags/${category.categoryURI}">${category.categoryTitle}</a>
</#list>
<div class="fn-flex-1">
<div class="module__title">
<span>${categoryLabel}</span>
</div>
<div>
<#list mostUsedCategories as category>
<a class="tag pipe-tooltipped pipe-tooltipped--n"
aria-label="${category.categoryTagCnt} ${cntLabel}${tagsLabel}"
href="${servePath}/tags/${category.categoryURI}">${category.categoryTitle}</a>
</#list>
</div>
</div>
</#if>
<#if 0 != mostUsedTags?size>
<#list mostUsedTags as tag>
<a rel="tag"
class="tag pipe-tooltipped pipe-tooltipped--n"
aria-label="${tag.tagPublishedRefCount} ${countLabel}${articleLabel}"
href="${servePath}/tags/${tag.tagTitle?url('UTF-8')}">${tag.tagTitle}</a>
</#list>
<div class="fn-flex-1">
<div class="module__title">
<span>${tagsLabel}</span>
</div>
<div>
<#list mostUsedTags as tag>
<a rel="tag"
class="tag pipe-tooltipped pipe-tooltipped--n"
aria-label="${tag.tagPublishedRefCount} ${countLabel}${articleLabel}"
href="${servePath}/tags/${tag.tagTitle?url('UTF-8')}">${tag.tagTitle}</a>
</#list>
</div>
</div>
</#if>
</div>
\ No newline at end of file
</div>
src/main/webapp/skins/Medium/bottom2.ftl 0 → 100644
View file @ 3bc0569a
<div class="footer__tag wrapper">
<#if 0 != mostUsedCategories?size>
<#list mostUsedCategories as category>
<a class="tag pipe-tooltipped pipe-tooltipped--n"
aria-label="${category.categoryTagCnt} ${cntLabel}${tagsLabel}"
href="${servePath}/tags/${category.categoryURI}">${category.categoryTitle}</a>
</#list>
</#if>
<#if 0 != mostUsedTags?size>
<#list mostUsedTags as tag>
<a rel="tag"
class="tag pipe-tooltipped pipe-tooltipped--n"
aria-label="${tag.tagPublishedRefCount} ${countLabel}${articleLabel}"
href="${servePath}/tags/${tag.tagTitle?url('UTF-8')}">${tag.tagTitle}</a>
</#list>
</#if>
</div>
\ No newline at end of file
src/main/webapp/skins/Medium/css/base.css
View file @ 3bc0569a
......@@ -292,6 +292,14 @@ blockquote {
border-radius: 3px;
box-shadow: inset 0 -1px 0 #bbb
}
.fn-flex {
display: flex
}
.fn-flex-1 {
flex: 1;
min-width: 1px
}
.fn-clear:before,.fn-clear:after {
display: table;
......@@ -310,6 +318,10 @@ blockquote {
float: right
}
.ft-gray {
color: rgba(0,0,0,0.54);
}
.ft-green {
color: #03a87c !important;
transition: all 0.1s
......@@ -665,29 +677,6 @@ blockquote {
box-shadow: 0 2px 2px -2px rgba(0,0,0,0.15)
}
.header__nav--fixed a.header__nav-btn {
display: block
}
.header__nav .header__nav-btn {
background: #03a87c;
border-color: #03a87c;
height: 32px;
line-height: 30px;
padding: 0 14px;
border-radius: 4px;
font-size: 15px;
color: #fff;
float: right;
margin-top: 9px;
display: none
}
.header__nav .header__nav-btn:hover {
background: #029e74;
border-color: #029e74
}
.footer {
margin-top: 50px;
padding: 10px 20px 25px;
......@@ -723,4 +712,220 @@ blockquote {
.board {
padding: 12px 0;
text-align: center
}
/* star article */
.article__wrap {
margin-right: -20px
}
.article__item {
border: 1px solid rgba(0,0,0,0.1);
border-radius: 2px;
margin-bottom: 20px;
float: left
}
.article__item--big {
width: 318px;
margin-right: 20px
}
.article__item--big .article__main {
height: 275px;
overflow: hidden;
margin-bottom: 10px
}
.article__item--small {
width: 318px;
margin-right: 20px
}
.article__item--small .article__main {
height: 94px;
overflow: hidden;
margin-bottom: 10px
}
.article__item--mid {
width: 488px;
margin-right: 20px
}
.article__item--mid .article__main {
height: 195px;
overflow: hidden;
margin-bottom: 10px
}
.article__panel {
padding: 16px
}
.article__title {
overflow: hidden;
line-height: 24px;
font-size: 21px;
font-weight: 600;
word-break: break-all
}
.article__title a {
color: rgba(0,0,0,0.84)
}
.article__title a:hover {
text-decoration: none
}
.article__title sup {
top: -6px;
font-size: 12px;
color: #03a87c;
}
.article__content {
margin-top: 4px;
font-size: 16px;
color: rgba(0,0,0,0.54);
overflow: hidden;
line-height: 23px;
word-break: break-all;
}
.article__meta {
font-size: 15px;
line-height: 23px;
}
/* end article list */
.article__next {
border-left: 1px solid rgba(0,0,0,0.38);
line-height: 14px;
margin-top: 7px;
color: rgba(0,0,0,0.84);
font-size: 18px;
display: inline-block;
padding-left: 20px;
margin-left: 20px;
float: right
}
.article__next:hover {
text-decoration: none
}
.article__bottom {
background-color: #fafafa;
padding: 40px 20px
}
.article__bottom .article__item {
box-shadow: 0 1px 7px rgba(0,0,0,0.05);
border: 0;
background-color: #fff;
border-radius: 4px
}
.article__bottom .article__main--user {
height: 45px;
margin-bottom: 15px
}
.article__comment {
width: 640px;
margin: 45px auto 0
}
.article__comment .comment__title {
font-size: 16px;
margin-bottom: 15px;
color: rgba(0,0,0,0.68)
}
.article__toolbar {
box-shadow: 0 0 1px rgba(0,0,0,0.54);
position: fixed;
bottom: -44px;
width: 100%;
background-color: #fff;
height: 44px;
font-size: 16px;
line-height: 44px;
transition: all 0.1s
}
.article__toolbar .wrapper {
max-width: 740px
}
.article__toolbar svg {
height: 20px;
width: 20px;
vertical-align: middle
}
.article__toolbar .fn-right {
position: absolute;
top: 0;
right: 20px
}
.article__toolbar .article__code {
position: absolute;
height: 130px;
width: 130px;
left: 50px;
bottom: 30px
}
.pagination {
margin-top: 30px;
font-size: 16px;
border-top: 1px solid rgba(0,0,0,0.15)
}
.pagination__item {
text-align: center;
border-top: 1px solid transparent;
transition: all 0.1s;
display: inline-block;
position: relative;
top: -1px;
margin: 0 10px;
padding: 0 10px;
line-height: 30px;
color: rgba(0,0,0,0.54)
}
.pagination__item:hover {
border-top-color: rgba(0,0,0,0.54);
color: rgba(0,0,0,0.84);
text-decoration: none
}
.pagination__item--active {
background: rgba(0,0,0,0.05);
border-top-color: rgba(0,0,0,0.54)
}
.pagination__item--active:hover {
color: rgba(0,0,0,0.54);
border-top-color: rgba(0,0,0,0.54)
}
.pagination__item:first-child {
margin-left: 0
}
.pagination__item:last-child {
margin-right: 0
}
.pagination__omit {
top: -5px;
margin: 0;
border: 0;
padding: 0;
color: #ccc
}
\ No newline at end of file
src/main/webapp/skins/Medium/index.ftl
View file @ 3bc0569a
......@@ -23,7 +23,7 @@
<div class="wrapper content">
<#include "article-list.ftl">
</div>
<#include "bottom.ftl">
<#include "bottom2.ftl">
</div>
<#include "footer.ftl">
</body>
......
src/main/webapp/skins/Medium/js/common.js
View file @ 3bc0569a
......@@ -43,68 +43,6 @@ var Skin = {
}
});
$(window).scroll();
},
_initArticleCommon: function (tocLabel, siteViewLabel) {
// TOC
if ($('.b3-solo-list li').length > 0 && $(window).width() > 1000) {
// add color to sidebar menu
$('aside').addClass('has-toc');
// append toc to sidebar menu
var articleTocHTML = '<ul class="fn-clear"><li class="current" data-tab="toc">' + tocLabel
+ '</li><li data-tab="site">' + siteViewLabel + '</li></ul><section></section>';
$('aside').prepend(articleTocHTML);
var $sectionF = $('aside section:first').html($('.b3-solo-list')),
$sectionL = $('aside section:last');
$sectionF.height($(window).height() - 154).css({ 'overflow': 'auto', 'width': $('aside').width() + 'px'});
$sectionL.hide();
// 切换 tab
$('aside > ul > li').click(function () {
if ($(this).data('tab') === 'toc') {
$sectionL.animate({
"opacity": '0',
"top": '-50px'
}, 300, function () {
$sectionF.show().css('top', '-50px');
$sectionF.animate({
"opacity": '1',
"top": '0'
}, 300).show();
});
} else {
$sectionF.animate({
"opacity": '0',
"top": '-50px'
}, 300, function () {
$sectionF.hide().css('top', '-50px');
$sectionL.animate({
"opacity": '1',
"top": '0'
}, 300).show();
}).hide();
}
$('aside > ul > li').removeClass('current');
$(this).addClass('current');
});
$(window).scroll(function () {
if ($(window).scrollTop() > 125) {
$('aside section:eq(0)').css({
position: "fixed",
top: "51px",
backgroundColor: "#fff"
})
} else {
$('aside section:eq(0)').css({
position: "inherit",
borderLeft: 0
})
}
});
}
},
initArticle: function (tocLabel, siteViewLabel) {
this._initArticleCommon(tocLabel, siteViewLabel);
}
};
Skin.init();
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment