Skip to content

Commit

Permalink
feature: refine and add page-archive
Browse files Browse the repository at this point in the history
  • Loading branch information
spiritree committed Sep 30, 2017
1 parent 0caba36 commit 88f5fee
Show file tree
Hide file tree
Showing 4 changed files with 294 additions and 84 deletions.
271 changes: 253 additions & 18 deletions css/customui.css
Original file line number Diff line number Diff line change
Expand Up @@ -2832,34 +2832,269 @@ code {
color: #fff !important;
}

/* 归档页样式 */
.arc-t {
width:33.3%;
float:left;
position:relative;
min-height:1px;
padding-right:5px;
padding-left:5px;
/* Archives */
.archive-page {
padding: 20px 80px 0;
}

.arc-tile {
line-height: 20px;
.archive-page .categorys-title {
font-size: 16px;
position: relative;
margin: 10px auto;
padding: 0 30px;
color: #46466E
}

.archive-page .categorys-title a {
color: #46466E
}

.archive-page .categorys-title::before {
position: absolute;
font-weight: 600;
top: 0;
left: -15px;
padding: 0 30px;
content: '#';
color: #337ab7;
}

.archive-page .post-list-item-container {
border: 1px solid rgba(184,197,214,.2);
border-radius: 3px;
background: #fff;
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,.04);
box-shadow: 0 1px 4px rgba(0,0,0,.04)
}

.archive-page .post-list-item-container .item-label {
height: 95px;
background: #fff
}

.archive-page .post-list-item-container .item-label .item-title a {
font-size: 14px;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #404040;
}

.archive-page .post-list-item-container .item-label .item-meta .item-meta-date {
padding-bottom: 5px;
padding-left: 5px;
color: #46466E
}

.clearfix:after,.clearfix:before {
display: table;
content: ''
}

.clearfix:after {
clear: both
}

.clearfix {
zoom:1
}

.post-lists {
position: relative;
padding: 14px;
margin-bottom: 20px;
border: 1px solid rgba(184,197,214,.2);
border-radius: 6px;
background: #fff;
display: block;
overflow: hidden
}

.post-lists-body {
display: block
}

.post-list-item {
float: left;
width: 33.3333%;
height: auto;
padding: 15px;
align-items: center
}

.post-list-item-container {
position: relative;
overflow: hidden;
width: 100%;
padding: 0;
border-radius: 3px;
background-color: #fff;
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,.04);
box-shadow: 0 1px 4px rgba(0,0,0,.04);
box-shadow: 0 1px 4px rgba(0,0,0,.04)
}

.post-list-item-container:hover {
-webkit-box-shadow: 2px 2px 4px rgba(0,0,0,.1);
box-shadow: 2px 2px 4px rgba(0,0,0,.1)
}

.post-list-item-container .item-thumb {
position: relative;
display: inherit;
min-height: 250px;
-webkit-transition: -webkit-transform .5s ease,filter .5s ease;
-moz-transition: -moz-transform .5s ease,filter .5s ease;
transition: transform .5s ease,filter .5s ease;
background-position: 50% 50%;
background-size: cover
}

.post-list-item-container .item-desc {
position: absolute;
top: 0;
overflow: hidden;
width: 100%;
height: 100%;
padding: 40px 28px
}

.post-list-item-container .item-desc p {
font-size: 14px;
margin: 0;
padding: 0;
word-break: break-all;
opacity: 0;
color: #fff
}

.post-list-item-container:hover .item-thumb {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
transform: scale(1.1);
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
filter: blur(3px)
}

.post-list-item-container:hover .item-desc {
background-color: rgba(0,0,0,.5)
}

.post-list-item-container:hover .item-desc p {
-webkit-animation: fade-in .5s;
animation: fade-in;
animation-duration: .5s;
opacity: 1
}

.post-list-item-container .item-slant {
position: absolute;
z-index: 0;
right: 0;
bottom: 50px;
left: 0;
width: 110%;
min-height: 100px;
-webkit-transform: rotate(7deg) translate(-10px,0);
-ms-transform: rotate(7deg) translate(-10px,0);
transform: rotate(7deg) translate(-10px,0);
background-color: #fff
}

.post-list-item-container .item-slant.reverse-slant {
-webkit-transform: rotate(-10deg) translate(10px,-10px);
-ms-transform: rotate(-10deg) translate(10px,-10px);
transform: rotate(-10deg) translate(10px,-10px);
opacity: .7;
background-color: #f68e5f;
-webkit-box-shadow: none;
box-shadow: none
}

.post-list-item-container .item-label {
position: relative;
height: 130px;
padding: 25px 20px 40px;
background-color: #fff
}

.post-list-item-container .item-label .item-title a {
font-size: 17px;
line-height: 17px;
word-break: break-all;
color: #404040;
}

.post-list-item-container .item-label .item-meta {
position: absolute;
right: 0;
bottom: 0;
width: 100%;
padding: 0 15px 15px;
text-align: right
}

.post-list-item-container .item-label .item-meta .item-meta-cat a {
font-size: 13px;
position: relative;
float: right;
margin-right: 10px;
padding: 10px 0;
text-align: right;
text-transform: none;
color: #46466E
}

.arc-date {
color: #5f5f5f;
.post-list-item-container .item-label .item-meta .item-meta-date {
font-size: 12px;
position: relative;
float: left;
padding-top: 9px;
padding-left: 9px;
text-align: right;
text-transform: none;
color: #f1f1f1
}

.post-list-item-container .item-label .item-meta .item-meta-ico {
display: inline-block;
float: right;
width: 42px;
height: 42px;
border: 1px solid #eaeaea;
border-radius: 50%
}

@media(max-width: 580px) {
.post-list-item {
width: 100%;
padding: 10px 20px
}

.post-list-item:first-child {
padding-top: 20px
}

.archive-page .post-list-item:first-child {
padding-top: 0
}

.archive-page .post-list-item:last-child {
padding-bottom: 0
}
}

@media(max-width: 880px) {
.archive-page {
padding: 20px 0 0 0;
}

.post-list-item {
width: 50%;
padding: 0 7.5px 10px 7.5px
}

.post-list-item:nth-child(odd) {
padding-left: 15px
}

.post-list-item:nth-child(even) {
padding-right: 15px
}
}
10 changes: 9 additions & 1 deletion css/customui.min.css

Large diffs are not rendered by default.

3 changes: 0 additions & 3 deletions header.php
Original file line number Diff line number Diff line change
Expand Up @@ -47,9 +47,6 @@
<div id="huxblog_navbar">
<div class="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="<?php $this->options->siteUrl(); ?>"><?php _e('Home'); ?></a>
</li>
<?php $this->widget('Widget_Contents_Page_List')->to($pages); ?>
<?php while($pages->next()): ?>
<li>
Expand Down
94 changes: 32 additions & 62 deletions page-archive.php
Original file line number Diff line number Diff line change
@@ -1,66 +1,36 @@
<?php if (!defined('__TYPECHO_ROOT_DIR__')) {
exit;
}
<?php
/**
* Archives
*
* @package custom
*/
if (!defined('__TYPECHO_ROOT_DIR__')) exit;
$this->need('header.php');
?>
<?php $this->need('header.php');?>
<!-- content start -->
<div class="am-g am-g-fixed blog-fixed blog-content">
<div class="am-u-sm-12">
<article class="am-article blog-article-p">
<div clss="post-archive" itemprop="articleBody">
<?php $this->widget('Widget_Contents_Post_Recent', 'pageSize=10000'
)->to($archives);
$year = 0;
$mon = 0;
$i = 0;
$j = 0;
$i = 0;
$output = '<div id="archives">';
while ($archives->next()):
$year_tmp = date('Y', $archives->created);
$mon_tmp = date('m', $archives->created);
$y = $year;
$m = $mon;
if ($mon != $mon_tmp && $mon > 0) {
$output .= '</ul></li>';
}

if ($year != $year_tmp && $year > 0) {
$output .= '</ul>';
}

if ($year != $year_tmp) {
$output .= '</section>';
}
if ($mon != $mon_tmp) {
$output .= '</section>';
}
if ($year != $year_tmp) {
$year = $year_tmp;
$output .= '<section id="year" style="overflow:hidden;">';
$output .= '<h5>' . $year . '</h5>'; //输出年份
}
if ($mon != $mon_tmp) {
$mon = $mon_tmp;
$output .= '<section id="mon" style="overflow:hidden;">';
$output .= '<span style="text-align:right;"><h6>' . date('F',
$archives->created) . '</h6></span>'; //输出月份
}
$output .= '<div class="arc-t"><div class="arc-tile"><small><a href="'
. $archives->permalink . '">' . $archives->title .
'</a></small> <span class="arc-date">' . date('M j, Y', $archives->created) .
'<span></div></div>'; //输出文章日期和标题
endwhile;
echo $output;
?>
</div>
</article>

<?php $this->need('commends.php');?>

<hr>
</div>
<div class="container-fluid archive-page clearfix">
<?php
$stat = Typecho_Widget::widget('Widget_Stat');
$this->widget('Widget_Contents_Post_Recent', 'pageSize='.$stat->publishedPostsNum)->to($archives);
$year=0; $mon=0; $i=0; $j=0;
$output = '<div class="categorys-item">';
while($archives->next()){
$year_tmp = date('Y',$archives->created);
$mon_tmp = date('m',$archives->created);
$y=$year; $m=$mon;
if ($year > $year_tmp || $mon > $mon_tmp) {
$output .= '</div></div>';
}
if ($year != $year_tmp || $mon != $mon_tmp) {
$year = $year_tmp;
$mon = $mon_tmp;
$output .= '<div class="categorys-title">'.date('M Y',$archives->created).'</div><div class="post-lists"><div class="post-lists-body">';
}
$output .= '<div class="post-list-item"><div class="post-list-item-container"><div class="item-label"><div class="item-title"><a href="'.$archives->permalink .'">'. $archives->title .'</a></div><div class="item-meta clearfix"><div class="item-meta-date"> '.date('M j, Y',$archives->created).' </div></div></div></div></div>';
}
$output .= '</div></div></div>';
echo $output;
?>
</div>
<!-- content end -->

<?php $this->need('footer.php');?>
<?php $this->need('footer.php'); ?>

0 comments on commit 88f5fee

Please sign in to comment.