Skip to content

S
solo
Commit a5960584 authored by Van's avatar Van
Browse files
Options

✨ article list #12180

parent bee52d30
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1059 additions and 685 deletions
src/main/webapp/skins/9IPHP/article-list.ftl
View file @ a5960584
<section class="posts-expand">
<div>
<#list articles as article>
<article class="post-item">
<article class="post">
<header>
<h1>
<a class="post-title-link" rel="bookmark" href="${servePath}${article.articlePermalink}">
<a rel="bookmark" href="${servePath}${article.articlePermalink}">
${article.articleTitle}
</a>
<#if article.articlePutTop>
......@@ -18,35 +18,44 @@
</#if>
</h1>
<div class="post-meta">
<span>
${postTimeLabel}
<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>
&nbsp; | &nbsp;
<span class="tooltipped tooltipped-n" aria-label="${commentCountLabel}">
<i class="icon-comments"></i>
<a href="${servePath}${article.articlePermalink}#comments">
${article.articleCommentCount} ${cmtLabel}</a>
${article.articleCommentCount} ${commentLabel}</a>
</span>
&nbsp; | &nbsp;
<span class="tooltipped tooltipped-n" aria-label="${viewCountLabel}">
<i class="icon-views"></i>
${article.articleViewCount} ${viewLabel}
</span>
&nbsp; | &nbsp;${viewsLabel} ${article.articleViewCount}°C
</div>
</header>
<div class="article-body">
<div class="content-reset">
${article.articleAbstract}
</div>
<div class="post-more-link">
<a href="${servePath}${article.articlePermalink}#more" rel="contents">
<footer class="fn-clear">
<#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>
</div>
</footer>
</article>
</#list>
</section>
<#if 0 != paginationPageCount>
<nav class="pagination">
<#if 0 != paginationPageCount>
<nav class="pagination">
<#if 1 != paginationPageNums?first>
<a href="${servePath}${path}/${paginationPreviousPageNum}" class="extend next"><<</a>
<a class="page-number" href="${servePath}${path}/1">1</a> ...
......@@ -62,5 +71,6 @@
<a href="${servePath}${path}/${paginationPageCount}" class="page-number">${paginationPageCount}</a>
<a href="${servePath}${path}/${paginationNextPageNum}" class="extend next">>></a>
</#if>
</nav>
</#if>
\ No newline at end of file
</nav>
</#if>
</div>
\ No newline at end of file
src/main/webapp/skins/9IPHP/article.ftl
View file @ a5960584
......@@ -53,12 +53,10 @@
</#if>
</div>
<footer>
<div class="post-tags">
<#list article.articleTags?split(",") as articleTag>
<a rel="tag" href="${servePath}/tags/${articleTag?url('UTF-8')}">
${articleTag}</a>
</#list>
</div>
<div class="post-nav fn-clear">
<#if previousArticlePermalink??>
<div class="post-nav-prev post-nav-item fn-right">
......
src/main/webapp/skins/9IPHP/css/base.css
View file @ a5960584
......@@ -78,10 +78,11 @@ audio:not([controls]) {
a {
outline: 0;
text-decoration: none;
color: #4285f4
color: #383838;
}
a:hover {
text-decoration: underline
color: #ff4d3a;
text-decoration: underline;
}
sub,
sup {
......@@ -158,6 +159,9 @@ blockquote {
font-size: 16px;
word-break: break-all
}
.content-reset a {
color: #ff4d3a;
}
.content-reset ul,
.content-reset ol {
padding-left: 2em;
......@@ -284,6 +288,9 @@ blockquote {
.fn-pointer {
cursor: pointer
}
.fn-inline {
display: inline;
}
.fn-clear:before,
.fn-clear:after {
display: table;
......@@ -312,8 +319,9 @@ blockquote {
}
.tooltipped {
position: relative;
cursor: pointer
cursor: pointer;
}
.tooltipped::after {
position: absolute;
z-index: 1000000;
......@@ -332,23 +340,45 @@ blockquote {
white-space: pre;
pointer-events: none;
content: attr(aria-label);
background: rgba(0, 0, 0, 0.8);
background: rgba(0,0,0,0.8);
border-radius: 3px;
line-height: 16px;
opacity: 0
}
.tooltipped::before {
position: absolute;
z-index: 1000001;
display: none;
width: 0;
height: 0;
color: rgba(0, 0, 0, 0.8);
color: rgba(0,0,0,0.8);
pointer-events: none;
content: "";
border: 5px solid transparent;
opacity: 0
}
@-webkit-keyframes tooltip-appear {
from {
opacity: 0
}
to {
opacity: 1
}
}
@keyframes tooltip-appear {
from {
opacity: 0
}
to {
opacity: 1
}
}
.tooltipped-hover::before,
.tooltipped-hover::after,
.tooltipped:hover::before,
......@@ -370,73 +400,76 @@ blockquote {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s
}
.tooltipped-s::after,
.tooltipped-se::after,
.tooltipped-sw::after {
.tooltipped-s::after,.tooltipped-se::after,.tooltipped-sw::after {
top: 100%;
right: 50%;
margin-top: 5px
}
.tooltipped-s::before,
.tooltipped-se::before,
.tooltipped-sw::before {
.tooltipped-s::before,.tooltipped-se::before,.tooltipped-sw::before {
top: auto;
right: 50%;
bottom: -5px;
margin-right: -5px;
border-bottom-color: rgba(0, 0, 0, 0.8)
border-bottom-color: rgba(0,0,0,0.8)
}
.tooltipped-se::after {
right: auto;
left: 50%;
margin-left: -15px
}
.tooltipped-sw::after {
margin-right: -15px
}
.tooltipped-n::after,
.tooltipped-ne::after,
.tooltipped-nw::after {
.tooltipped-n::after,.tooltipped-ne::after,.tooltipped-nw::after {
right: 50%;
bottom: 100%;
margin-bottom: 5px
}
.tooltipped-n::before,
.tooltipped-ne::before,
.tooltipped-nw::before {
.tooltipped-n::before,.tooltipped-ne::before,.tooltipped-nw::before {
top: -5px;
right: 50%;
bottom: auto;
margin-right: -5px;
border-top-color: rgba(0, 0, 0, 0.8)
border-top-color: rgba(0,0,0,0.8)
}
.tooltipped-ne::after {
right: auto;
left: 50%;
margin-left: -15px
}
.tooltipped-nw::after {
margin-right: -15px
}
.tooltipped-s::after,
.tooltipped-n::after {
.tooltipped-s::after,.tooltipped-n::after {
-webkit-transform: translateX(50%);
transform: translateX(50%)
}
.tooltipped-w::after {
right: 100%;
bottom: 50%;
margin-right: 5px;
-webkit-transform: translateY(50%);
transform: translateY(50%)
transform: translateY(50%);
}
.tooltipped-w::before {
top: 50%;
bottom: 50%;
left: -5px;
margin-top: -5px;
border-left-color: rgba(0, 0, 0, 0.8)
border-left-color: rgba(0,0,0,0.8);
}
.tooltipped-e::after {
bottom: 50%;
left: 100%;
......@@ -444,13 +477,15 @@ blockquote {
-webkit-transform: translateY(50%);
transform: translateY(50%)
}
.tooltipped-e::before {
top: 50%;
right: -5px;
bottom: 50%;
margin-top: -5px;
border-right-color: rgba(0, 0, 0, 0.8)
border-right-color: rgba(0,0,0,0.8)
}
a[class^="icon-"],
a[class*=" icon-"] {
color: #333
......@@ -479,21 +514,6 @@ a[class*=" icon-"]:hover {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.icon-register:before {
content: "\e973";
}
.icon-setting:before {
content: "\e994";
}
.icon-login:before {
content: "\ea13";
}
.icon-logout:before {
content: "\ea14";
}
.icon-rss:before {
content: "\e901";
}
.em00, .em01, .em02, .em03, .em04, .em05, .em06, .em07, .em08, .em09,
.em10, .em11, .em12, .em13, .em14 {
cursor: pointer;
......@@ -555,6 +575,58 @@ a[class*=" icon-"]:hover {
}
/* end common */
/* start reset common */
.icon-views:before {
content: "\e900";
}
.icon-comments:before {
content: "\f0e6";
}
.icon-date:before {
content: "\f073";
}
.icon-search:before {
content: "\f002";
}
.icon-up:before {
content: "\f077";
}
.icon-inbox:before {
content: "\f01c";
}
.icon-tags:before {
content: "\f02c";
}
.icon-link:before {
content: "\f0c1";
}
.icon-refresh:before {
content: "\f021";
}
.icon-register:before {
content: "\e973";
}
.icon-setting:before {
content: "\e994";
}
.icon-login:before {
content: "\ea13";
}
.icon-rss:before {
content: "\e901";
}
*::selection {
background: none repeat scroll 0% 0% #3D4450;
color: #FFF;
outline: none;
}
a {
transition: all .3s;
outline: none;
}
/* end reset common */
/* start framework */
.wrapper {
width: 90%;
......@@ -562,4 +634,160 @@ a[class*=" icon-"]:hover {
min-width: 720px;
max-width: 1300px;
}
aside {
width: 28%;
min-width: 236px;
}
.main-wrap {
display: flex;
}
main {
margin-right: 30px;
flex: 1;
min-width: 1px;
}
/* end framework */
/* start header */
.banner {
background-color: #393939;
height: 75px;
}
.banner h1 a {
color: #fff;
line-height: 75px;
}
.banner small {
color: #DFDFDF;
font-size: 15px;
}
.banner .fn-right a {
line-height: 75px;
color: #DFDFDF;
text-decoration: none;
margin-left: 10px;
opacity: 0.6;
}
.banner .fn-right a:hover {
opacity: 1;
}
.navbar {
border-bottom: 1px solid #eee;
height: 50px;
margin-bottom: 30px;
}
.navbar nav a {
color: #555;
text-decoration: none;
line-height: 50px;
margin-right: 20px;
}
.navbar nav a:hover {
color: #333;
}
.navbar form {
position: relative;
margin-top: 8px;
}
.navbar input {
border: 1px solid #ccc;
background-color: #FAFAFA;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075) inset;
padding: 0 40px 0 10px;
width: 100%;
line-height: 28px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box
}
.navbar input:focus {
background-color: #FFF;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075) inset, 0 0 5px rgba(81, 167, 232, 0.5);
border: 1px solid #51A7E8
}
.navbar button {
background-color: #EB5750;
border: 0;
color: #fff;
position: absolute;
top: 0;
right: 0;
height: 30px;
width: 30px;
}
.navbar button:hover {
background-color: #e42f19;
}
/* end header */
/* start article list */
.post {
border: 1px solid #ededed;
margin-bottom: 20px;
padding: 20px;
}
.post h1 {
margin-bottom: 10px;
}
.post h1 a {
font-size: 30px;
font-weight: 500;
text-decoration: none;
}
.post sup {
color: #aaa;
font-weight: 300;
}
.post .meta {
color: #aaa;
margin-bottom: 10px;
}
.post .meta a {
color: #aaa;
text-decoration: none;
}
.post .meta a:hover {
color: #ff4d3a;
}
.post footer {
margin-top: 10px;
}
.post footer > a.tag {
color: #fff;
font-size: 12px;
display: block;
float: left;
background: #bbb;
margin-right: 10px;
padding: 0 5px;
margin-top: 2px;
line-height: 22px;
}
.post footer > a.tag:before {
content: "#";
}
.post footer > a.tag:hover {
background: #999;
}
/* end article list */
src/main/webapp/skins/9IPHP/footer.ftl
View file @ a5960584
......@@ -39,9 +39,7 @@
"em11Label": "${em11Label}",
"em12Label": "${em12Label}",
"em13Label": "${em13Label}",
"em14Label": "${em14Label}",
"tocLabel": "${tocLabel}",
"siteViewLabel": "${siteViewLabel}"
"em14Label": "${em14Label}"
};
</script>
${plugins}
src/main/webapp/skins/9IPHP/header.ftl
View file @ a5960584
<header class="header">
<header>
<div class="banner">
<div class="fn-clear wrapper">
<div class="fn-left">
<h1 class="fn-inline">
<a href="${servePath}" rel="start">
${blogTitle}
</a>
${blogSubtitle}
</div>
</h1>
<small> &nbsp; ${blogSubtitle}</small>
<div class="fn-right">
<#if isLoggedIn>
<span class="links-of-author-item">
<a href="${servePath}/admin-index.do#main" title="${adminLabel}">
<i class="icon-setting"></i> ${adminLabel}
</a>
</span>
<span class="links-of-author-item">
<a href="${logoutURL}">
<i class="icon-logout"></i> ${logoutLabel}
</a>
</span>
<#else>
<span class="links-of-author-item">
<a href="${loginURL}">
<i class="fa fa-github"></i> ${loginLabel}
</a>
</span>
<span class="links-of-author-item">
<a href="${servePath}/register">
<i class="icon-register"></i> ${registerLabel}
</a>
</span>
</#if>
</div>
</div>
</div>
<nav>
<ul class="menu">
<div class="navbar">
<div class="fn-clear wrapper">
<nav class="fn-left">
<#list pageNavigations as page>
<li class="menu-item">
<a href="${page.pagePermalink}" target="${page.pageOpenTarget}" rel="section">
${page.pageTitle}
</a>
</li>
</#list>
<li class="menu-item">
<a href="${servePath}/dynamic.html" rel="section">
${dynamicLabel}
<i class="icon-refresh"></i> ${dynamicLabel}
</a>
</li>
<li class="menu-item">
<a href="${servePath}/tags.html" rel="section">
${allTagsLabel}
<i class="icon-tags"></i> ${allTagsLabel}
</a>
</li>
<li class="menu-item">
<a href="${servePath}/archives.html">
${archiveLabel}
<i class="icon-inbox"></i> ${archiveLabel}
</a>
<a rel="archive" href="${servePath}/links.html">
<i class="icon-link"></i> ${linkLabel}
</a>
</li>
<li class="menu-item">
<a rel="alternate" href="${servePath}/blog-articles-rss.do" rel="section">
RSS
<i class="icon-rss"></i> RSS
</a>
</li>
</ul>
<div class="site-search">
</nav>
<div class="fn-right">
<form target="_blank" action="http://zhannei.baidu.com/cse/site">
<input placeholder="${searchLabel}" id="search" type="text" name="q"/>
<input type="submit" value="" class="fn-none" />
<button type="submit"><i class="icon-search"></i></button>
<input type="hidden" name="cc" value="${serverHost}">
</form>
</div>
</nav>
</div>
</div>
</header>
\ No newline at end of file
src/main/webapp/skins/9IPHP/index.ftl
View file @ a5960584
......@@ -13,12 +13,14 @@
</head>
<body>
<#include "header.ftl">
<main class="main wrapper">
<div class="content">
<div class="wrapper">
<div class="main-wrap">
<main>
<#include "article-list.ftl">
</div>
<#include "side.ftl">
</main>
<#include "side.ftl">
</div>
</div>
<#include "footer.ftl">
</body>
</html>
\ No newline at end of file
src/main/webapp/skins/9IPHP/js/common.js
View file @ a5960584
......@@ -17,83 +17,24 @@
* @fileoverview util and every page should be used.
*
* @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
* @version 0.2.1.0, Sep 6, 2016
* @version 0.1.0.0, Feb 17, 2017
*/
/**
* @description next 皮肤脚本
* @description 皮肤脚本
* @static
*/
var NexT = {
init: function () {
$('.sidebar-toggle').click(function () {
var $sidebar = $('.sidebar');
if ($(this).hasClass('sidebar-active')) {
$(this).removeClass('sidebar-active');
$('body').animate({
'padding-right': 0
});
$sidebar.animate({
right: -320
});
$sidebar.find('section').css('opacity', 0);
} else {
$(this).addClass('sidebar-active');
$('body').animate({
'padding-right': 320
});
$sidebar.animate({
right: 0
}, function () {
$sidebar.find('section:first').animate({
'opacity': 1
});
});
}
});
$('.site-nav-toggle').click(function () {
$('.site-nav').slideToggle();
});
$(document).ready(function () {
setTimeout(function () {
// logo animate
$('.logo-wrap').css('opacity', 1);
$('.logo-line-before i').animate({
'left': '0'
}, function () {
$('.site-title').css('opacity', 1).animate({
'top': 0
}, function () {
$('.menu').css('opacity', 1).animate({
'margin-top': '15px'
});
$('.main').css('opacity', 1).animate({
'top': '0'
}, function () {
// 当有文章页面有目录时，回调不放这里，侧边栏就会一片空白
if ($('.b3-solo-list li').length > 0 && $(window).width() > 1000) {
$('.sidebar-toggle').click();
}
});
});
});
$('.logo-line-after i').animate({
'right': '0'
});
}, 500);
$('body').on('click', '.article-body img', function () {
var Skin = {
_initCommon: function () {
$('body').on('click', '.content-reset img', function () {
window.open(this.src);
});
});
},
initArticle: function () {
init: function () {
this._initCommon();
},
_initArticleCommon: function () {
// TOC
if ($('.b3-solo-list li').length > 0 && $(window).width() > 1000) {
// add color to sidebar menu
$('.sidebar-toggle').addClass('has-toc');
......@@ -133,6 +74,9 @@ var NexT = {
$(this).addClass('current');
});
}
},
initArticle: function () {
this._initArticleCommon();
}
};
NexT.init();
\ No newline at end of file
Skin.init();
\ No newline at end of file
src/main/webapp/skins/9IPHP/lang/lang_en_US.properties
View file @ a5960584
......@@ -22,13 +22,7 @@
#
tocLabel=Article ToC
siteViewLabel=Site
viewsLabel=Heat
cmtLabel=Comments
postTimeLabel=Post At
readLabel=Read More
fightLabel=articles, fighting!
ohLabel=Oh
searchLabel=Search
subscribeLabel=Subscribe
dynamicLabel=Dynamic
......@@ -128,6 +122,7 @@ signIsNullLabel=This Sign is Null
statisticLabel=Blog Statistic
viewLabel=View
countLabel=Posts
viewCountLabel=View Count
viewCount1Label=View Count:
articleCount1Label=Article Count:
commentCountLabel=Comment Count
......@@ -208,9 +203,9 @@ permalink1Label=Permalink:
permalinkLabel=Permalink
b3logLabel=<span style="color: orange;">B</span><span style="color: blue;"><sup>3</sup></span><span style="color: green;">L</span><span style="color: red;">O</span><span style="color: blue;">G</span>
killBrowserLabel=<h2>Let's kill outdated and insecure browser!</h2><p>Let's kill outdated and insecure browser for browser evolution, human progress and better experience.</p><p>You can download</p><ul><li><a href="http://www.mozilla.com/" target="_blank">Firefox</a></li><li><a href="http://www.google.com/chrome" target="_blank">Chrome</a></li><li><a href="http://windows.microsoft.com/en-US/internet-explorer/downloads/ie" target="_blank">IE8 / IE9</a></li><li><a href="http://www.maxthon.com/" target="_blank">Maxthon</a> and <a href="http://www.google.com" target="_blank">so on</a>.</li></ul>
readmoreLabel=Read more\u00bb
readmoreLabel=Read more\u00BB
readmore2Label=Read more
replyLabel=Reply\u00bb
replyLabel=Reply\u00BB
homeLabel=Home
enableArticleUpdateHint1Label=Enable Article Update Hint:
allowVisitDraftViaPermalink1Label=Allow Visit Draft Via Link:
......@@ -277,8 +272,8 @@ duplicatedPermalinkLabel=Duplicated permalink!
invalidPermalinkFormatLabel=Invalid permalink format!
duplicatedEmailLabel=Duplicated email!
refreshAndRetryLabel=Please refresh and try again!
editorLeaveLabel=Content is not null, Do you leave\uff1f
editorPostLabel=Content is not null, Do you clear\uff1f
editorLeaveLabel=Content is not null, Do you leave\uFF1F
editorPostLabel=Content is not null, Do you clear\uFF1F
####
confirmRemoveLabel=Are You Sure?
confirmInitLabel=Are You Sure?
src/main/webapp/skins/9IPHP/side.ftl
View file @ a5960584
<div class="sidebar-toggle">
<span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
<span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
<span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
</div>
<aside class="sidebar">
<aside>
<section>
<img class="site-author-image" src="${adminUser.userAvatar}" title="${userName}"/>
<p class="site-author-name">${userName}</p>
......
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