关闭边栏(ESC)打开边栏(ESC)
如今这个文章页的效果跟之前的显示差不多，只是作了以下更改了：
- 特色图为固定，文章内容向上移动到一定高度的时候，会把特色图透明化。
- 同时修正了在IE中不显示毛玻璃的BUG。
- 把原来的上下篇操作改成了放在二侧，当鼠标在二侧内时，会出现左、右箭头，鼠标放在箭头上的时候会显示上下篇的标题。
- 美化了一下下随机文章。
以下是修改的步骤（因为这个是在原来的文章页基础上优化的，如果出现问题时可以先参考下原来的效果）覆盖single.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 |
<?php get_header(); ?> <style> .article {box-shadow: none;border-bottom: 1px solid #eee} /* 设置每组评论底距、底线*/ .comments .comments-list .comment {margin-bottom:10px;padding: 0;border-bottom: 1px dotted #ccc} /* 设评论顶部*/ .comments .comments-title{ background:linear-gradient(0deg,#eee 90%,red 0%); padding:10px; border-radius: 5px; } /* 头像*/ .comments .comments-list .comment .comment-avatar,.comments .comments-list .comment .children .comment-avatar,.comments img{width:36px!important;height: 36px!important;left:10px;top:0; border-radius: 50%;transition: all .3s} /* 用户名前的三角*/ .comments .comments-list .comment-user:before{ content: ''; width: 0; height: 0; border: 6px solid transparent; border-left-color: #ccc; position: absolute; left:55px;top:13px; } /* 第一层用户名位置微调*/ .comments .comments-list .comment-user{display: inline-block;padding-top:10px;padding-left: 10px;} /* 回复评论用户名位置微调*/ .comments .comments-list .children .comment-user{display: inline-block;padding-left:22px} /* 评论内容微调*/ .comments .comments-list .comment .comment-body p{margin: 6px 0 0} /* 评论时间微调*/ .comments .comments-list .comment .comment-body .comment-meta .comment-date{ font-size: 12px;margin-bottom: 10px; display: inline-block } /* 回复的评论时间微调*/ .comments .comments-list .comment .children .comment-date{ margin-bottom: 0!important; display: inline-block; } /* 回复的评论块设置*/ .comments .comments-list .comment .children { border: 0; box-shadow: none; padding: 10px 10px 0 0px; margin:0px 15px 10px 40px; color: #fff; background: #E14267; position: relative; transition: all .3s } /* 回复的评论字体色*/ .comments .comments-list .comment .children *{color:#fff!important} /* 只设置第一层回复的底距*/ .comments>.comments-list>.comment>.children{padding-bottom: 4px} /* 鼠标经过回复评论时的样式变化：含背景色、头像转动*/ .comments>.comments-list>.comment>.children:hover {background: #42433A} .comments>.comments-list>.comment>.children:hover:before{border-bottom-color: #42433A} .comments>.comments-list>.comment>.children:hover img{border: 2px solid #fff;animation: tx 2s linear infinite} @keyframes tx{ from {transform: rotate(0deg)} to {transform: rotate(359deg)} } /* 回复块的向上箭头*/ .comments>.comments-list>.comment>.children:before{ content: ''; position: absolute; width: 0; height: 0; border:10px solid transparent; border-bottom-color:#E14267; left:20px; top:-20px; transition: all .3s } /* 取消原来的每个评论下线*/ .comments .comments-list .comment .children li{ border-bottom: 0; } /* 重置回复链接的位置*/ .comments .comments-list .comment .comment-body .comment-meta .comment-action {left:150px} @media (min-width:1024px){ .comments .comments-list{margin:30px 60px 0;} .comments .comments-title {margin: 0 40px} } /* 侧边栏改写*/ .widget-hotpost-image .widget-hotpost-image-item {display: inline-block;width: 24%;} .widget-hotpost-image .widget-hotpost-image-item:last-child {display: none} .widget .widget-title {position:relative;z-index:2;padding:3px 20px;background: #fff;display:inline-block;border-radius: 30px;color: #999;border: 1px solid #ccc;font-weight: normal;} .affix {display: none} .widget:before{content:'';position:absolute;left:50%;transform:translateX(-50%);top:30px;border-top:1px solid #ccc;width:95%;} @media (min-width:768px){#pjax-content{margin-top: 480px}article{padding:0 20px}body{background: #f5f5f5}} @media (max-width:767px){#pjax-content{margin-top: 140px}article{padding:0 10px}} </style> <div class="container-fluid" id="wzy" style="position:fixed;width: 100%;transition: all .3s;"> <div class="row"> <div class="md-12 sm-12"> <div id="big-baner"></div> <div class="article-img mid-center"> <?php the_post_thumbnail(); ?> <div class="title-meta mid-center"> <div class="article-title"> <a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a> </div> <div class="article-meta"> <span class="article-meta-time"> <?php echo ''.timeago( get_gmt_from_date(get_the_time('Y-m-d G:i:s')) ); ?> </span> <i class="fa fa-bookmark"></i> <?php the_category(' '); ?> <i class="fa fa-eye" style="margin-right:10px"> <?php echo getPostViews(get_the_ID()); ?></i> <?php comments_popup_link('0', '1 ', '% ', 'article-meta-comment', '评论已关闭'); ?> <?php the_tags(' ', ' '); ?> <!-- user edit --> <?php if (is_user_logged_in()): ?> <i class="fa fa-edit"></i> <?php edit_post_link(); ?> <?php endif; ?> <!-- baidu push --> <?php if (cs_get_option('i_push_baidu_switcher')): ?> <span class="article-push-baidu"> <?php if (is_user_logged_in()): ?> <?php if(get_post_meta(get_the_ID(),'pushBaidu',true)): ?> <span style="color:#00aa00">已推送到百度</span> <?php else: ?> <span style="color:#ff0000">未推送到百度</span> <?php endif; ?> <?php endif; ?> </span> <?php endif; ?> </div> </div> </div> </div> </div> </div> <main class="container" id="pjax-content"> <div class="row"> <div class="md-12"> <div class="row" id="main"> <?php if (have_posts()) : the_post(); update_post_caches($posts); ?> <article class="article <?php if (cs_get_option('i_article_indent_switcher')){echo "article-indent";}?>" id="post-<?php the_ID(); ?>"> <div class="article-body"> <?php the_content(); ?> </div> <!-- advertisement --> <?php if (cs_get_option('i_advertisement_switcher')): ?> <div class="article-advertisement"> <?php echo cs_get_option('i_advertisement_article_tail'); ?> </div> <?php endif; ?> <!-- copyright --> <?php if (cs_get_option('i_article_copyright_switcher')): ?> <p class="article-copyright"> 转载原创文章请注明，转载自: <a href="<?php echo home_url(); ?>"> <?php echo bloginfo('name'); ?> </a> - <a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a> (<?php the_permalink(); ?>) </p> <?php endif; ?> <?php if (cs_get_option("i_article_support_switcher")): ?> <div class="article-support"> <div class="article-support-title"> <?php echo cs_get_option('i_article_support_description'); ?> </div> <div class="article-support-img"> <div class="article-support-zhifubao"> <img src="<?php echo cs_get_option('i_article_support_zhifubao')?>"> <div class="article-support-img-title"> 支付宝支付 </div> </div> <div class="article-support-wechat"> <img src="<?php echo cs_get_option('i_article_support_wechat')?>"> <div class="article-support-img-title"> 微信支付 </div> </div> </div> <div class="article-support-button"> <a class="btn">赞赏</a> </div> </div> <?php endif; ?> <!-- like --> <?php if (cs_get_option('i_article_like_switcher')): ?> <div class="article-like"> <a href="javascript:;" data-action="ding" data-id="<?php the_ID(); ?>" class="favorite<?php if(isset($_COOKIE['bigfa_ding_'.$post->ID])) echo ' done';?>"> <?php if(isset($_COOKIE['bigfa_ding_'.$post->ID])): ?> <i class="fa fa-thumbs-up"></i> <?php else: ?> <i class="fa fa-thumbs-o-up"></i> <?php endif; ?> <span class="count"> <?php if(get_post_meta($post->ID,'bigfa_ding',true)): ?> <?php echo get_post_meta($post->ID,'bigfa_ding',true); ?> <?php else: ?> <?php echo '0'; ?> <?php endif; ?> </span> </a> </div> <?php endif; ?> <!-- share --> <?php if (cs_get_option('i_article_share_switcher')): ?> <div class="article-share"> <span class="article-share-title"> 分享到： </span> <span class="bdsharebuttonbox"> <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a> <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a> <a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a> <a href="#" class="bds_more" data-cmd="more"></a> </span> <script> window._bd_share_config={ "common":{ "bdSnsKey":{}, "bdText":"", "bdMini":"1", "bdMiniList":false, "bdPic":"", "bdStyle":"2", "bdSize":"24"}, "share":{} }; <?php if (cs_get_option('i_function_https_switcher')): ?> with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)]; <?php else: ?> with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)]; <?php endif; ?> </script> </div> <?php endif; ?> <?php setPostViews(get_the_ID());?> <?php endif; ?> <div style="text-align:center"><?php get_sidebar(); ?></div> <style> #p-lr {display:none} @media(min-width:768px){ #p-lr {display:block} #p-lr i{font-size: 56px;color:#666} .p-l,.p-r{ position: fixed; top:50%; transform: translateY(-50%); z-index: 999; transition:all .3s; cursor: pointer; } .p-l:hover,.p-r:hover{opacity: 1;} .p-l{left: 0px;opacity:0} .p-r{right:0px;opacity:0} .p-l span,.p-r span { color:#fff; display: none; padding:6px 10px; background: rgba(0,0,0,.5); border-radius: 3px; position: absolute; top:50%; transform: translateY(-50%); width: 250px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space:nowrap } .p-l span{left:45px;} .p-r span{right: 45px} .p-l span a,.p-r span a{color: #fff;} } </style> <section id="post-link" style="box-shadow: none"> <div class="md-6" style="display: inline-block;"> <?php echo (get_previous_post() ? previous_post_link('上一篇: %link') : "这是第一篇"); ?> </div> <div class="md-6" style="display: inline-block;text-align: right"> <?php echo (get_next_post() ? next_post_link('下一篇: %link') : "已经是最后一篇"); ?> </div> </section> <section id="p-lr"> <div class="p-l"> <?php previous_post_link( '%link', '<i class="fa fa-chevron-left" style="text-shadow: 0px 0px 2px rgb(85, 85, 85);"></i>' ); ?> <span><?php echo (get_previous_post() ? previous_post_link('上一篇: %link') : "这是第一篇"); ?></span> </div> <div class="p-r"> <span><?php echo (get_next_post() ? next_post_link('下一篇: %link') : "已经是最后一篇"); ?></span> <?php next_post_link( '%link', '<i class="fa fa-chevron-right" style="text-shadow: 0px 0px 2px rgb(85, 85, 85);"></i>' ); ?> </div> </section><br> <?php if(comments_open()){ comments_template(); }else{ echo "<h5>评论已经关闭</h5>"; } ?></article> </div> </div> </div> </main> <?php get_footer(); ?> |
在main.js中添加JS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
var src=$(".article-img img").attr("src"); if (src!= undefined ){ $('#big-baner').append('<img src='+src+'>'); } else { $('#big-baner').append('<img src=https://css.nli.cn/wp-content/uploads/2016/12/title-default.png>'); $('.article-img').append('<img src=https://css.nli.cn/wp-content/uploads/2016/12/title-default.png>'); } //设置图片加载动画; $('.article-img').css('opacity','1'); //获取鼠标坐标函数 $(document).mousemove(function (e) { if (e.pageX<180||e.pageX>$(window).width()-180){ $('.p-l').css({left:'50px',opacity:'.8'}); $('.p-r').css({right:'50px',opacity:'.8'}); }else { $('.p-l').css({left:'0px',opacity:'0'}); $('.p-r').css({right:'0px',opacity:'0'}); } }); |
修改自定义中的CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
/*文章页顶部大图*/ #big-baner { width: 100%; height: 480px; } /*设置最底层为文章图片,并模糊,取图片的Src在main.js中执行,为使模糊效果好看，left right top边柜向外延升点。*/ #big-baner img { margin: 0 -50px; width: 140%; height: 98%; -webkit-filter: blur(10px); } /*文章图所在的父框样式*/ .article-img { position: absolute; opacity: 0; margin: 0; text-align: center; transition: all 2s; } /*设置图片的最大视窗宽度,就是为了防止窗体在拉小的时候,图片跑到左右二边的外边去了,图片响应用有二种，一种是max-width:100%;height:auto，一种是下面这种*/ .article-img img { position: relative; height:380px; width:auto; max-width: 90vw; margin:0 1px 0 0; border:0px solid #fff; outline:1px solid #fff; outline-offset:10px; animation: pv 2s infinite ease; } @keyframes pv{ from{border-color: transparent;outline-color: hsla(0,0%,100%,.1);outline-offset: 0px;} to{border-color: hsla(0,0%,100%,0.5);outline-color: transparent;outline-offset: 50px;outline-width:500px;} } /*垂直居中*/ .mid-center{ left: 50%; top:40%; transform: translate(-50%,-40%); } /*把标题与相关标签信息放在图片居中,为了防止标题过长会跑出图片外面，所以把这个DIV放在article-img 里。*/ .title-meta { position: absolute; width: 100%; padding: 0 20px; z-index: 99; } .article-img:before,.article-img:after{ content: ''; position: absolute; opacity: 0; transition: opacity 1s,transform 1s; animation: bl 2s infinite alternate; z-index: 98; } .article-img:before{ left:-5%; right:-5%; top:0; bottom:0; border-top:1px solid #fff; border-bottom: 1px solid #fff; transform: scale(0,1); transform-origin: 0 0; } .article-img:after{ left:0; right:0; top:-5%; bottom:-5%; border-left: 1px solid #fff; border-right:1px solid #fff; transform: scale(1,0); transform-origin: 0 0; } @keyframes bl { to {opacity: 1;transform: scale(1)} } /*设置标题字大小*/ .title-meta .article-title a{ font-size: 1.5em; color: #FFF; text-shadow: 1px 1px 5px #000; } /*设置标签颜色与距顶*/ .title-meta .article-meta * { margin-top: 10px; color: #DDD; text-shadow: 1px 1px 2px #000; } |
这里用到的一个知识点，获取鼠标的位置：
$(document).mousemove(function (e) {e.pageX}