黑糖主题V1.52来一场DIY风暴

目 录

以下的一些DIY都是基于黑糖主题V1.52进行修改的。在更改前请务必要先备份一下,以备往后恢复回原来的样式。接下来我们折腾一下,这里要修改的文件都是在黑糖主题文件夹(BlackCandy-V1.52)下进行。

顶部LOGO切换动画DIY:

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

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

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

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

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

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

轮播图DIY:

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

博客首页DIY:

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

网站底部DIY:

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

归档DIY

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

手机端DIY

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

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

网站色彩跟随主题色的DIY

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

导航菜单DIY

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

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

其它黑糖主题详细使用教程及常见问题,请浏览大仁博客