超给力的博客园皮肤 Awescnb 来袭 !附更换皮肤步骤

超给力的博客园皮肤 Awescnb 来袭 !附更换皮肤步骤Awescnb博客园皮肤Awescnb是一款基于vite和webpack5,构建、安装、切换的博客园皮肤。界面简单干净,集成到Cnblog步骤也十分简便,只需要几步就能在你的博客园快

大家好,又见面了,我是你们的朋友全栈君。

Awescnb 博客园皮肤

Awescnb 是一款基于 vite 和 webpack5 ,构建、安装、切换的博客园皮肤。界面简单干净,集成到 Cnblog 步骤也十分简便,只需要几步就能在你的博客园快速安装皮肤。

一、安装步骤

1. 点击博客园首页的设置按钮进入设置页面

2. 设置博客默认皮肤为 “ Custom ”

<span role="heading" aria-level="2">超给力的博客园皮肤 Awescnb 来袭 !附更换皮肤步骤

3. 展开页首 HTML 代码,将如列代码复制到文本框中

<div id="loading"><div class="loader-inner"></div></div>

4. 展开页面定制 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;}}

5. 在展开后的页面定制 CSS 代码中,选中禁用模板默认 CSS

<span role="heading" aria-level="2">超给力的博客园皮肤 Awescnb 来袭 !附更换皮肤步骤

6. 申请开通 JS 权限,理由填 “ 美化博客 ”

7. 展开页脚 HTML 代码,将如下代码复制到文本框中

<script src="https://guangzan.gitee.io/awescnb/index.js"></script>
<script>
  const opts = {
    // 默认启用皮肤 'reacg'
    // 在这里添加自定义配置
    // 当前为全部使用默认配置
  }
  $.awesCnb(opts)
</script>

8. 点击保存按钮,进入博客就能看到 Awescnb 皮肤效果啦 !

二、扩展 Awescnb 功能

喜欢 Awescnb 皮肤的小伙伴们可以进入 Awescnb 官网,点击快捷入口下面的配置选项按钮,按照上面的提示可以配置自己喜欢的样式风格哦 !

Awescnb 官网地址为 :https://www.yuque.com/awescnb

<span role="heading" aria-level="2">超给力的博客园皮肤 Awescnb 来袭 !附更换皮肤步骤

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/155252.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • vmware系统安装教程_vmware安装虚拟机

    vmware系统安装教程_vmware安装虚拟机一、VMware安装所安装的版本为VMware15链接:https://pan.baidu.com/s/1vzaS4PL2e0XNis-P-M-o4A&shfl=sharepset提取码:7r3d新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客:全新的界面设计,将会带来全新的写…

  • DSP开发,使用CCS软件建立工程以及烧录

    DSP开发,使用CCS软件建立工程1概述1.1资源概述2工程建立步骤1概述实验的代码已经上传。1.1资源概述开发板:普中DSP开发板CCS版本:6.1.3主控芯片型号:TMS320F283352工程建立步骤1,在需要建立的工程的文件夹内新建一个工程文件夹。2,打开CCS软件,在弹出的Workspace内指向刚才建立的文件夹。3,建立新工程4,填入工程的相关信息5,新建后的工程,只包含两个文件以及一个文件夹,系统必须的头文件,RAM连接的配置文件6,在工程文件

  • ROC曲线理解

    ROC曲线理解ROC(receiveroperatorcharacteristiccurve,ROC)曲线:即受试者工作特征曲线,是反映敏感度和特异度连续变量的综合指标,用作图法展示两度之间的关系。作图方法:在相关临床研究报告中,若有一个ROC曲线图,将会给人深刻印象,具体做法是:实验结果为计量资料即连续变量,至少计算5个临界点的指标,以敏感度(真阳性率)为Y轴,1-特异度(假阳性率)为X轴,将各点连成…

  • pycharm2021.11.3激活码永久_最新在线免费激活

    (pycharm2021.11.3激活码永久)好多小伙伴总是说激活码老是失效,太麻烦,关注/收藏全栈君太难教程,2021永久激活的方法等着你。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html23LNPMIJZT-eyJsaWNlbnNlSWQi…

  • 灰度共生矩阵的实现条件_灰度共生矩阵14个特征

    灰度共生矩阵的实现条件_灰度共生矩阵14个特征由于纹理是由灰度分布在空间位置上反复出现而形成的,因而在图像空间中相隔某距离的两象素之间会存在一定的灰度关系,即图像中灰度的空间相关特性。灰度共生矩阵就是一种通过研究灰度的空间相关特性来描述纹理的常用方法。

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号