超给力的博客园皮肤 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)
blank

相关推荐

  • HTTP请求中的form data和request payload的区别

    HTTP请求中的form data和request payload的区别

  • iis的安装及web服务器配置_药物配置流程

    iis的安装及web服务器配置_药物配置流程 今天在学习ASP.NET网站部署、打包与安装时,先按书上的流程安装了IIS,打开IIS才发现,里面没有ASP.NET,所以为IIS配置ASP,NET又搞了好一阵。没办法,小编是一只没经验的菜鸟,没大佬们那种手速。好啦,现在来分享一下,希望对遇到同样问题的博友有帮助。   (一)IIS的安装过程: (1)在开始栏输入控制面板,打开“控制面板”,点击”程序和功能“ (…

  • 5种方式实现 Java 单例模式

    5种方式实现 Java 单例模式单例模式(SingletonPattern)是Java中最简单的设计模式之一。这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式。这种模式涉及到一个单一的类,该类负责创建自己的对象,同时确保只有单个对象被创建。这个类提供了一种访问其唯一的对象的方式,可以直接访问,不需要实例化该类的对象。是否多线程安全:是是否懒加载:否正如名字含义,饿汉需要直接创建实例。缺点:类加载就初始化,浪费内存优点:没有加锁,执行效率高。还是线程安全的实例。懒汉单例,在类初始化不会创建实例,只有被调用时

  • makefile菜鸟入门「建议收藏」

    makefile菜鸟入门「建议收藏」转自:http://my.oschina.net/u/1413984/blog/199029 Makefile有三个非常有用的变量。分别是$@,$^,$发表于2年前(2014-02-1215:43)  阅读(9199) | 评论(0)2人收藏此文章,我要收藏赞0

  • 记录虚拟机桥接模式不能上网问题的解决方法「建议收藏」

    记录虚拟机桥接模式不能上网问题的解决方法「建议收藏」问题一:一直连接不上网络,右上角的网络模式显示连接不到sudovi/etc/network/interfaces初始情况下,只有以下两行autoloifaceloinetloopback在桥接模式下,需要添加以太网卡的启动,在下面添加两行autoens33ifaceens33inetdhcp看网卡的不同,填不同的,例如eth0,通过ifconfig查看本机网卡问题二:右上角显示连接上了,但是不能ping通外网开启主机的VMwareDHCP.

  • P2P技术应用

    P2P技术应用P2P技术应用P2P,即对等连接(peertopeer)是指两个主机在通信时并不区分哪一个是服务请求放还是服务提供方。两个主机都运行了对等连接软件(P2P软件,例如我们平时用的百度云盘、微博网盘、还有死去的360网盘),它们就可以进行平等的、对等的连接通信。这是双方都可以对等的下载对方已经存储在硬盘上中的共享文档。因此这种工作方式也成为P2P文件共享。一、P2P的工作方式概述

发表回复

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

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