使用awescnb自定义博客园皮肤(博客园怎么自定义皮肤)

科技资讯 投稿 19100 0 评论

使用awescnb自定义博客园皮肤(博客园怎么自定义皮肤)

  1. 打开博客园设置

#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;}}
  1. 页首 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. 使用皮肤会出现首页博文块被撑开的情况,可以在选项中勾选首页仅列出标题与摘要解决

编程笔记 » 使用awescnb自定义博客园皮肤(博客园怎么自定义皮肤)

赞同 (26) or 分享 (0)
游客 发表我的评论   换个身份
取消评论

表情
(0)个小伙伴在吐槽