March 09
首页单独增加说说无标题样式
创建一个新分类名称为“说说”,然后把文章添加到该分类中即可,模板会自动识别赋予类似微博的样式
index.php
<div class="article-list">
<?php
$LastIsShuoshuo=false;
while($this->next()):
global $isShuoshuo;
$isShuoshuo=false;
array_map(function($v){global $isShuoshuo;if($v['name']=="说说"){$isShuoshuo=true;};},$this->categories);
if($isShuoshuo===true){
$LastIsShuoshuo=true;
?>
<div class="shuoshuo">
<div class="shuoshuo-meta shuoshuo-meta-<?php echo $this->cid ?>">
<style>
.shuoshuo-meta-<?php echo $this->cid ?>:before {
content: '<?php $this->date('F jS , Y'); ?>';
}
</style>
</div>
<div class="shuoshuo-container">
<div class="author-info">
<?php $this->author->gravatar(50); ?>
</div>
<div class="content-container">
<div class="content">
<a pjax href="<?php $this->author->permalink(); ?>">@<?php $this->author(); ?></a>:<?php echo $this->excerpt; ?>
</div>
<div class="comments"></div>
</div>
</div>
</div>
css
.article-list .shuoshuo .content p{
display: inline;
}
.article-list .shuoshuo .author-info img{
box-shadow: 0 0 5px rgba(0,0,0,0.2);
border-radius:50%;
}
.article-list .shuoshuo .shuoshuo-meta{
border-top:1px solid #eaeaea;
text-align:center;
}
.article-list .shuoshuo .shuoshuo-meta:before {
position: absolute;
margin: -13px -73px;
transition:color 0.5s;
color: #a2a2a2;
background-color: white;
padding: 0 10px;
}
.article-list .shuoshuo .shuoshuo-meta:hover::before {
color:black;
}
.article-list .shuoshuo-container{
padding:20px 10px 15px;
display:flex;
}
.article-list .shuoshuo .content-container{
margin-left:15px;
}
.article-list .shuoshuo a{
color: #8a2be2;
}
js
function checkElementFade(){
var articleElements=document.querySelectorAll('.article,.page-navigator,.footer,.shuoshuo');
[].forEach.call(articleElements, function(e){
if(e.getBoundingClientRect().top < window.innerHeight){
e.style.opacity="1";
e.classList.add("animated");
e.classList.add("fadeInUp");
};
});
}
[post cid="2451" cover="https:\/\/true-me.com\/usr\/uploads\/2018\/01\/1280396067.png"/]
作者:https://qwq.moe/
:D 少女祈祷中...