4

使用awescnb自定义博客园皮肤 - 铁皮鸭子

 2 years ago
source link: https://www.cnblogs.com/barros/p/16588091.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

使用awescnb自定义博客园皮肤

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

  1. 打开博客园设置
    image

  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;}}
image

  1. 代码高亮支持深色和浅色模式，可以根据需要自行切换，但是效果只能在使用markdown编辑器时发布博文才会生效

    image
    image

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

<div id="loading"><div class="loader-inner"></div></div>
  1. 在页脚 HTML 代码中加入以下代码，配置部分可以参照文档自行修改(需要先邮件官方申请开通JS权限)
<script src="https://guangzan.gitee.io/awescnb/index.js"></script><script> const config = { // 默认启用皮肤 'reacg' // 在这里添加自定义配置 theme: { //修改默认皮肤 name: 'geek', avatar: 'https://pic.cnblogs.com/avatar/478790/20140604205738.png', headerBackground: 'https://img2022.cnblogs.com/blog/478790/202208/478790-20220814231902278-1445739173.jpg' }, } $.awesCnb(config)</script>

  1. 使用geek皮肤会出现首页博文块被撑开的情况，可以在选项中勾选首页仅列出标题与摘要解决

    image

  2. 保存就可以欣赏效果了

    image

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK