使用awescnb自定义博客园皮肤

简述

偶然在博客园闲逛的时候发现了一个看着很顺眼的博客皮肤,本着求索的精神想学习一下,结果在源码中发现了大神实现的awescnb博客园皮肤自定义功能,通过简单配置就可以切换成大神设计的皮肤,效果也非常哇塞,这里把设置过程简单记录一下。

  1. 打开博客园设置
    使用awescnb自定义博客园皮肤插图

  2. 设置默认官方皮肤为Custom,禁用官方皮肤的默认的CSS,在页面定时CSS代码中加入如下代码

#loading{bottom:0;left:0;position:fixed;right:0;top:0;z-index:9999;background-color:#f4f5f5;pointer-events:none;}.loader-inner{will-change:transform;width:40px;height:40px;position:absolute;top:50%;left:50%;margin:-20px 0 0 -20px;background-color:#3742fa;border-radius:50%;animation:scaleout 0.6s infinite ease-in-out forwards;text-indent:-99999px;z-index:999991;}@keyframes scaleout{0%{transform:scale(0);opacity:0;}40%{opacity:1;}100%{transform:scale(1);opacity:0;}}

使用awescnb自定义博客园皮肤插图1

  1. 代码高亮支持深色和浅色模式,可以根据需要自行切换,但是效果只能在使用markdown编辑器时发布博文才会生效
    使用awescnb自定义博客园皮肤插图2
    使用awescnb自定义博客园皮肤插图3

  2. 页首 HTML代码中加入以下代码

  1. 页脚 HTML 代码中加入以下代码,配置部分可以参照文档自行修改(需要先邮件官方申请开通JS权限)


  1. 使用geek皮肤会出现首页博文块被撑开的情况,可以在选项中勾选首页仅列出标题与摘要解决
    使用awescnb自定义博客园皮肤插图4

  2. 保存就可以欣赏效果了
    使用awescnb自定义博客园皮肤插图5

  3. 配置相关文档和项目地址
    文档地址
    大神博客
    项目地址

文章来源于互联网:使用awescnb自定义博客园皮肤

THE END
分享
二维码