黑糖主题V1.52来一场DIY风暴 – 爱CSS - 每多学一点知识就少写一行代码

关闭边栏(ESC)打开边栏(ESC)

顶部LOGO切换动画DIY：

一、先制作好LOGO,要求存在二个LOGO，用于切换，本站的是：160*84
二、在main.js中找到滚动条控制代码：$(window).scroll(function(event) { ，在里面添加

if (scrollTop>70) {
            $('#header').addClass('head-jq');
            $('.logo').addClass('logo-top');                  
        } else {
            $('#header').removeClass('head-jq');
            $('.logo').removeClass('logo-top');
        }

//在main.js最后 }); 前添加：
//LOGO操作：这里其实可以直接到主题中修改header.php中的logo的div,设置背景,那么下面这个代码就可以不用了
    var logo_src=$(".logo img").attr("src");
    $('.logo img').remove();
   $('.logo').css({background:'url('+logo_src+') no-repeat'});

if (scrollTop>70) {

$('#header').addClass('head-jq');

$('.logo').addClass('logo-top');

} else {

$('#header').removeClass('head-jq');

$('.logo').removeClass('logo-top');

}

//在main.js最后 }); 前添加：

//LOGO操作：这里其实可以直接到主题中修改header.php中的logo的div,设置背景,那么下面这个代码就可以不用了

var logo_src=$(".logo img").attr("src");

$('.logo img').remove();

$('.logo').css({background:'url('+logo_src+') no-repeat'});

三、自定义样式中粘贴如下代码：如果想这个横条的颜色随主题色，就参考下面“网站色彩跟随主题色的DIY”

/*顶部样式*/
#header{border-top:3px solid red;}
.head-jq{border-top:1px solid red!important;opacity:.85}
/*logo切换相关样式*/
#header .logo img {display:none}
#header nav .logo {width:160px;transition:all .5s}
.logo-top {background-position:0 -42px!important;width:42px!important;}

/*顶部样式*/

#header{border-top:3px solid red;}

.head-jq{border-top:1px solid red!important;opacity:.85}

/*logo切换相关样式*/

#header .logo img {display:none}

#header nav .logo {width:160px;transition:all .5s}

.logo-top {background-position:0 -42px!important;width:42px!important;}

文章页DIY：就像本站显示的文章页一样，特色图跟标题信息放在了顶部，

一、控制文章页的文件：single.php，此文件在主题根目录下，替换为以下文件就行：

<?php get_header(); ?>
<div class="container-fluid">
<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', '评论已关闭'); ?>
<i class="fa fa-book"></i>
<?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-8-5 sm-8">
		<div class="row" id="main">
			<?php if (have_posts()) :
				the_post(); update_post_caches($posts); ?>
					<article style="padding: 10px;" 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">
                                <script>
                                    <?php echo cs_get_option('i_advertisement_article_tail'); ?>
                                </script>
                            </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; ?>
					</article>
					<?php setPostViews(get_the_ID());?>
			<?php endif; ?>
			<section id="post-link">
				<div class="md-6 post-link-previous">
					<?php echo (get_previous_post() ? previous_post_link('上一篇: %link') : "已经是最旧一篇" ); ?>
				</div>
				<div class="md-6 post-link-next">
					<?php echo (get_next_post() ? next_post_link('下一篇: %link') : "已经是最后一篇"); ?>
				</div>
			</section>
			<?php
				if(comments_open()){
					comments_template();
				}else{
					echo "<h5>评论已经关闭</h5>";
				}
			?>
		</div>
	</div>
	<div class="md-3-5 sm-4">
		<div class="row" style="padding-left: 10px;padding: 16px;">
			<?php get_sidebar(); ?>
		</div>
	</div>
	</div>
</main>
<?php get_footer(); ?>

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

<?php get_header(); ?>

<?php the_post_thumbnail(); ?>

<?php the_title(); ?>

</a>

</div>

<?php echo ''.timeago( get_gmt_from_date(get_the_time('Y-m-d G:i:s')) ); ?>

</span>

<?php the_category(' '); ?>

<?php comments_popup_link('0', '1 ', '% ', 'article-meta-comment', '评论已关闭'); ?>

<?php the_tags(' ', ' '); ?>

<?php if (is_user_logged_in()): ?>

<?php edit_post_link(); ?>

<?php endif; ?>

<?php if (cs_get_option('i_push_baidu_switcher')): ?>

<?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; ?>

</span>

<?php endif; ?>

</div>

<?php if (have_posts()) :

the_post(); update_post_caches($posts); ?>

<?php the_content(); ?>

</div>

<?php if (cs_get_option('i_advertisement_switcher')): ?>

<?php echo cs_get_option('i_advertisement_article_tail'); ?>

</script>

</div>

<?php endif; ?>

<?php if (cs_get_option('i_article_copyright_switcher')): ?>

转载原创文章请注明，转载自:

<?php echo bloginfo('name'); ?>

</a> -

<?php the_title(); ?>

</a>

(<?php the_permalink(); ?>)

</p>

<?php endif; ?>

<?php if (cs_get_option("i_article_support_switcher")): ?>

<?php echo cs_get_option('i_article_support_description'); ?>

</div>

支付宝支付

</div>

微信支付

</div>

</div>

<?php endif; ?>

<?php if (cs_get_option('i_article_like_switcher')): ?>

<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])): ?>

<?php else: ?>

<?php endif; ?>

<?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; ?>

<?php if (cs_get_option('i_article_share_switcher')): ?>

分享到：

</span>

</span>

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; ?>

</article>

<?php setPostViews(get_the_ID());?>

<?php endif; ?>

<?php echo (get_previous_post() ? previous_post_link('上一篇: %link') : "已经是最旧一篇" ); ?>

</div>

<?php echo (get_next_post() ? next_post_link('下一篇: %link') : "已经是最后一篇"); ?>

</div>

</section>

<?php

if(comments_open()){

comments_template();

}else{

echo "<h5>评论已经关闭</h5>";

}

</div>

<?php get_sidebar(); ?>

</div>

</main>

<?php get_footer(); ?>

二、特色图作毛玻璃背景图，需要修改：main.js，此文件在assets/js/下。在文件末尾 }); 前，加入以下代码

    var src=$(".article-img img").attr("src");  
    if (src!= undefined ){
    $('#big-baner').append('<img src='+src+'>');
    } else {
//这里有个图片的路径，换成自己的默认图，以防没有特色图的时候设用
    $('#big-baner').append('<img src=http://150105.net/blog/wp-content/uploads/2016/12/title-default.png>');
    $('.article-img').append('<img src=http://150105.net/blog/wp-content/uploads/2016/12/title-default.png>');
    }
    $('.article-img').css('opacity','1');

var src=$(".article-img img").attr("src");

if (src!= undefined ){

$('#big-baner').append('<img src='+src+'>');

} else {

//这里有个图片的路径，换成自己的默认图，以防没有特色图的时候设用

$('#big-baner').append('<img src=http://150105.net/blog/wp-content/uploads/2016/12/title-default.png>');

$('.article-img').append('<img src=http://150105.net/blog/wp-content/uploads/2016/12/title-default.png>');

}

$('.article-img').css('opacity','1');

三、在自定义样式代码里粘上以下样式，这是控制图片样式与效果等，为了好看，可以把body背景设为#FFF：

#big-baner {
	width: 100%;
	height: 480px;
}
/*设置最底层为文章图片,并模糊,取图片的Src在main.js中执行,为使模糊效果好看，left right top边柜向外延升点。*/
#big-baner img:first-child {
	position: absolute;
	left: -5%;
	right: -5%;
	top: -5%;
	z-index: -1;
	margin: 0 auto;
	width: 100%;
	height: 100%;
	background-size: 100% 110%;
        -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 {
    height:381px;
    width:auto;
    max-width: 90vw;
    margin:0 1px 0 0;
    border:1px 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;
}
/*设置标题字大小*/
.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;	
}
/*小于平板的界面下*/
@media screen and (max-width: 767px) {
	#big-baner,
	.article-img,
	.article-img img {
		max-width: 100vw;
		width: 100%;
		height: 150px!important;
		left: 0!important;
		top: 0!important;
		transform: translate(0,0);
	}
       .article-img img {border:10px solid hsla(0,0%,100%,1)}
        #big-baner img{display:none}
	.article-title a{
		font-size: 1em!important;
	}
.post-style-standard .post-img {height:180px}
.title-meta {margin-top:20px;}
}

#big-baner {

width: 100%;

height: 480px;

}

/*设置最底层为文章图片,并模糊,取图片的Src在main.js中执行,为使模糊效果好看，left right top边柜向外延升点。*/

#big-baner img:first-child {

position: absolute;

left: -5%;

right: -5%;

top: -5%;

z-index: -1;

margin: 0 auto;

width: 100%;

height: 100%;

background-size: 100% 110%;

-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 {

height:381px;

width:auto;

max-width: 90vw;

margin:0 1px 0 0;

border:1px 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;

}

/*设置标题字大小*/

.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;

}

/*小于平板的界面下*/

@media screen and (max-width: 767px) {

#big-baner,

.article-img,

.article-img img {

max-width: 100vw;

width: 100%;

height: 150px!important;

left: 0!important;

top: 0!important;

transform: translate(0,0);

}

.article-img img {border:10px solid hsla(0,0%,100%,1)}

#big-baner img{display:none}

.article-title a{

font-size: 1em!important;

}

.post-style-standard .post-img {height:180px}

.title-meta {margin-top:20px;}

}

轮播图DIY：

黑糖自带的轮播图本身是很好看的，很大气，我个人比较喜欢小巧些，所以也来个DIY，但是这个只在PC端效果比较好，在平板或手机上会显示原来的效果。响应式支持还不是很好。这里的DIY好简单，只需要在自定义样式那里粘上以下样式，在main.js里修改一下左右箭头的位置就行。

/*以下为自定义样式*/
#carousel .carousel-info-category{border-radius:2px;opacity:0.65;border-style:double}
#carousel .owl-dots .owl-dot span{width:9px;height:9px;border-radius:50%;margin:0px 8px;}
/*大于1024PX屏上应用新的轮播图*/
@media screen and (min-width: 992px) {
	#carousel {height:313px;}
	.carousel-slide .carousel-item img{border-radius:6px}
	.carousel-slide{padding-top:30px;}
	#carousel .carousel-item img,#carousel .owl-item,#carousel .carousel-item .carousel-info{width:820px!important}
	#carousel .owl-nav .owl-prev {left:13%}
	#carousel .owl-nav .owl-next {right:13.5%}
	#carousel .carousel-item img {min-height:313px;}
	#carousel .owl-nav .owl-prev,#carousel .owl-nav .owl-next {line-height:313px;}
	}

/*以下为main.js需要修改的，找到：$(".owl-next").bind $(".owl-prer").bind，把里面的内容代换成以下的就行，就是调整二个箭头的位置而已*/
$(".owl-next").bind({
 mouseenter: function() {
 $(this).children(".fa").css({
 textShadow: "2px 0 1px #444"
 });
 },
 mouseleave: function () {
 $(this).children(".fa").css({
 textShadow: "0 0 2px #555"
 });
 },
 mousedown: function() {
 $(this).css({right: "13%"});
 },
 mouseup: function () {
 $(this).css({right: "13.5%"});
 }
 });
 $(".owl-prev").bind({
 mouseenter: function() {
 $(this).children(".fa").css({
 textShadow: "-2px 0 1px #444"
 });
 },
 mouseleave: function () {
 $(this).children(".fa").css({
 textShadow: "0 0 2px #555"
 });
 },
 mousedown: function() {
 $(this).css({left: "12.5%"});
 },
 mouseup: function () {
 $(this).css({left: "13%"});
 }
 });

/*以下为自定义样式*/

#carousel .carousel-info-category{border-radius:2px;opacity:0.65;border-style:double}

#carousel .owl-dots .owl-dot span{width:9px;height:9px;border-radius:50%;margin:0px 8px;}

/*大于1024PX屏上应用新的轮播图*/

@media screen and (min-width: 992px) {

#carousel {height:313px;}

.carousel-slide .carousel-item img{border-radius:6px}

.carousel-slide{padding-top:30px;}

#carousel .carousel-item img,#carousel .owl-item,#carousel .carousel-item .carousel-info{width:820px!important}

#carousel .owl-nav .owl-prev {left:13%}

#carousel .owl-nav .owl-next {right:13.5%}

#carousel .carousel-item img {min-height:313px;}

#carousel .owl-nav .owl-prev,#carousel .owl-nav .owl-next {line-height:313px;}

}

/*以下为main.js需要修改的，找到：$(".owl-next").bind $(".owl-prer").bind，把里面的内容代换成以下的就行，就是调整二个箭头的位置而已*/

$(".owl-next").bind({

mouseenter: function() {

$(this).children(".fa").css({

textShadow: "2px 0 1px #444"

});

mouseleave: function () {

$(this).children(".fa").css({

textShadow: "0 0 2px #555"

});

mousedown: function() {

$(this).css({right: "13%"});

mouseup: function () {

$(this).css({right: "13.5%"});

}

});

$(".owl-prev").bind({

mouseenter: function() {

$(this).children(".fa").css({

textShadow: "-2px 0 1px #444"

});

mouseleave: function () {

$(this).children(".fa").css({

textShadow: "0 0 2px #555"

});

mousedown: function() {

$(this).css({left: "12.5%"});

mouseup: function () {

$(this).css({left: "13%"});

}

});

博客首页DIY：

看了少数派的首页，把卡片式的内容调整了下，图像放在了上面，文字标题什么的放在下面。在黑糖目录下找到template-parts\post\content.php，全部替换为以下内容就行：

<div class="post post-style-standard" id="mydiy" style="background: #FFF;margin:0px 10px;margin-bottom:20px;transition:all .3s">
	<div class="post-top" style="padding:0px;">
		<a class="post-img" href=" <?php echo the_permalink(); ?>">
            <?php get_template_part('template-parts/thumbnail'); ?>
            <div class="post-img-overlay"></div>
		</a>	
		<div class="post-title" style="margin: 15px 20px 10px;font-size: 1.7em;">
			<a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a>
		</div>
		<div class="post-bottom hidden-xs" style="background: #FFF;padding: 0 20px;margin: 0;">
		<div class="post-body" style="padding: 0;margin: 0;">
			<a href="<?php the_permalink(); ?>" style="padding:0px;margin: 0;line-height: 1.6;"><?php echo get_post_excerpt(); ?></a>
		</div>
	</div>
		<ul class="post-meta" style="padding: 10px 20px 25px;border-bottom: 1px solid #EEE;">
			<li class="post-meta-author">
				<a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ) ?>" target="_blank">
					<?php echo get_avatar( get_the_author_meta('email'), '' ); ?>
					<?php echo get_the_author() ?>
				</a>
			</li>
			<li class="post-meta-categories">
				<i class="fa fa-bookmark"></i>
				<?php echo getOneCategory(get_the_category()); ?>
			</li>			
			<li class="post-meta-view">
				<i class="fa fa-eye"></i> <?php echo getPostViews(get_the_ID()); ?>
			</li>
			<li class="post-meta-time"><i class="fa fa-clock-o"></i>
				<?php echo ''.timeago( get_gmt_from_date(get_the_time('Y-m-d G:i:s')) ); ?>
			</li>
			<li class="post-meta-like">
				<i class="fa fa-thumbs-o-up"></i>
				<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>
			</li>
		</ul>
	</div>
</div>

<?php get_template_part('template-parts/thumbnail'); ?>

</a>

</div>

<a href="<?php the_permalink(); ?>" style="padding:0px;margin: 0;line-height: 1.6;"><?php echo get_post_excerpt(); ?></a>

</div>

<a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ) ?>" target="_blank">

<?php echo get_avatar( get_the_author_meta('email'), '' ); ?>

<?php echo get_the_author() ?>

</a>

</li>

<?php echo getOneCategory(get_the_category()); ?>

</li>

</li>

<?php echo ''.timeago( get_gmt_from_date(get_the_time('Y-m-d G:i:s')) ); ?>

</li>

<?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>

</li>

</ul>

</div>

网站底部DIY：

底部其实没改什么，只是把背景色换成了一个渐变的效果

#footer {
	background: linear-gradient(45deg, #141E30 50%, #222 50%) no-repeat;
}

#footer {

background: linear-gradient(45deg, #141E30 50%, #222 50%) no-repeat;

}

归档DIY

官方的归档只有一种布局，就是竖排的，没有瀑布流，以下DIY设置后能跟后台的布局同步。替换以下代码到归档模板：page-list.php

<?php
/**
 * Template Name: 归档
 */
get_header(); ?>

<main class="container">
	<div class="row">
	<section class="archive-header">
		<div class="archive-header-title">
			<?php the_archive_title() ?>
		</div>
		 	<?php the_archive_description() ?>
	</section>
		<?php
			$args = array(
			    'ignore_sticky_posts' => 1, // 不考虑置顶
                'post_type' => 'post',
                'posts_per_page' => -1,
            );
			$archives = new WP_Query($args);
		?>
		<?php if ($archives->have_posts()) : ?>
		<div class="post-wrap">
			<?php while ($archives->have_posts()) : $archives->the_post(); ?>
				<?php if (cs_get_option('i_layout_archive_type') == "column"): ?>
                    <?php get_template_part('template-parts/post/content-aside'); ?>
                <?php else: ?>
                     <div class="md-4">
                        <?php get_template_part('template-parts/post/content-card'); ?>
                     </div>
                <?php endif; ?>
			<?php endwhile;  ?>
		</div>
		<?php endif; wp_reset_postdata(); ?>
	</div>
</main>

<?php get_footer(); ?>

<?php

/**

* Template Name: 归档

get_header(); ?>

<?php the_archive_title() ?>

</div>

<?php the_archive_description() ?>

</section>

<?php

$args = array(

'ignore_sticky_posts' => 1, // 不考虑置顶

'post_type' => 'post',

'posts_per_page' => -1,

);

$archives = new WP_Query($args);

<?php if ($archives->have_posts()) : ?>

<?php while ($archives->have_posts()) : $archives->the_post(); ?>

<?php if (cs_get_option('i_layout_archive_type') == "column"): ?>

<?php get_template_part('template-parts/post/content-aside'); ?>

<?php else: ?>

<?php get_template_part('template-parts/post/content-card'); ?>

</div>

<?php endif; ?>

<?php endwhile; ?>

</div>

<?php endif; wp_reset_postdata(); ?>

</div>

</main>

<?php get_footer(); ?>

手机端DIY

手机站显示标签云的卡片时，左右边距会铺满，不好看，所以修改了一下主题根目录下：archive.php


/*找到：*/
<div class="archive-body">
/*这个DIV,删除这对DIV.接着修改下一行代码加入左右边距设置。
*/
<div class="row" style="margin-left:0;margin-right:0">

/*找到：*/

/*这个DIV,删除这对DIV.接着修改下一行代码加入左右边距设置。

手机端首页、归档、搜索、分类显示为纸状卡片效果，粘贴以下代码到自定义样式代码：

/*以下是响应布局，优化手要端浏览的效果，显示了纸状卡片区*/
@media screen and (max-width: 767px) {
#mydiy .post-meta {padding:4px 0px 25px 5px!important}
.post{box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
}
.post:hover{box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}

/*以下是响应布局，优化手要端浏览的效果，显示了纸状卡片区*/

@media screen and (max-width: 767px) {

#mydiy .post-meta {padding:4px 0px 25px 5px!important}

.post{box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}

}

.post:hover{box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}

网站色彩跟随主题色的DIY

这个只是补充了一下，包括登陆的色、友情链接的色、底部版权区的背景色，这里就不列出代码的，可以在后台-外观-编辑-custom-functions.php，在这个文件最下面有黑糖自定的主题配色，在这里改成自己需要跟随便主题色的就行。

导航菜单DIY

这个效果看起来还行，就是代码感觉还不够简化，暂时还没想到好的方法，对jquery还不熟就是惨，得加快学习它了。
一、自定义样式代码：

/*导航菜单效果*/
.header-menu {margin-top:-3px;}
.header-menu li .child-menu {width:130px}
/*这个设为跟主题色
.header-menu li a:hover{color:red!important}
*/
 /*弹出的子菜单字体色为白色*/
.header-menu li .child-menu a{color:#FFF}
/*主菜单背景、子菜单背景*/
.header-menu a:hover,
.header-menu li .child-menu:hover,
.header-menu li .child-menu{background:#333!important}
/*消除原来的三角形*/
.header-menu li .child-menu:before{background:#333;border:0}
/*添加过渡动画*/
.header-menu a,.header-menu li .child-menu {transition:all .3s}
/*消除子菜单下划线*/
.header-menu li .child-menu li {border-bottom:none}

/*导航菜单效果*/

.header-menu {margin-top:-3px;}

.header-menu li .child-menu {width:130px}

/*这个设为跟主题色

.header-menu li a:hover{color:red!important}

/*弹出的子菜单字体色为白色*/

.header-menu li .child-menu a{color:#FFF}

/*主菜单背景、子菜单背景*/

.header-menu a:hover,

.header-menu li .child-menu:hover,

.header-menu li .child-menu{background:#333!important}

/*消除原来的三角形*/

.header-menu li .child-menu:before{background:#333;border:0}

/*添加过渡动画*/

.header-menu a,.header-menu li .child-menu {transition:all .3s}

/*消除子菜单下划线*/

.header-menu li .child-menu li {border-bottom:none}

二、main.js中添加以下代码：

//菜单效果
$('.header-menu ul').mouseenter(function(){
	$(this).parent('li').children('a').css({background:'#333',color:'#fff'});
})
$('.header-menu ul').mouseleave(function(){
	$(this).parent('li').children('a').css({background:'transparent',color:'#333'});
})

//菜单效果

$('.header-menu ul').mouseenter(function(){