博客园美化

• 前言
• 1.前期准备
  • 示例博客
    • geek主题
    • Cnblogs-Theme-SimpleMemory-BNDong
    • cute-cnblogs 主题
• 2.以上教程步骤总结
• 3.实操配置主题
  • 3.1 geek 主题
  • 3.2 Cnblogs-Theme-SimpleMemory-BNDong 主题

前言

一直很羡慕别人酷炫，有特色的博客主页，很想自己动手设置但未实施。今天趁着苏拉台风在家，学习一下。最主要的是想要有一个好的导航栏，这样写博客能更加简洁明朗，逻辑清晰。

1.前期准备

1.查找博客园美化教程

以下教程基本都是基于项目awescnb写的相关博文,最方便全面可看语雀文档
项目作者博客：

Github：AWESCNB
Gitee：AWESCNB
语雀： https://www.yuque.com/awescnb

示例博客

geek主题

教程一：

Cnblogs-Theme-SimpleMemory-BNDong

教程二
教程四
教程五

cute-cnblogs 主题

教程三

2.以上教程步骤总结

进入博客配置界面：https://i.cnblogs.com/settings

• 第一步 js申请权限:管理>设置>勾选JS权限，等待审核通过
• 第二步 下载需要资源包,或者copy博文配置
• 第三步 css代码
• 第四步 页脚代码 js代码 /侧边栏公告
• 第五步 页首代码

3.实操配置主题

3.1 geek 主题

博客皮肤：CUSTOM

• 3.1.1 页面定制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;
    }
}

  

• 3.1.2 页脚HTML代码(第四步)

  
<script src="https://guangzan.gitee.io/awescnb/index.js"></script>
<script>
    const opts = {
    theme: {
    name: 'geek',
    url: "https://acnblogs.gitee.io/acnb-theme-geek/index.iife.js",
    log: true,
    avatar: "https://pic.cnblogs.com/avatar/622515/20140410221346.png", //头像
    headerBackground:
    "https://images.cnblogs.com/cnblogs_com/guangzan/1894231/o_201205070714banner1.jpg", //背景
},
    highLight: {
    enable: true,
},
    lineNumbers: {
    enable: true,
},
    click: {
    enable: true,
},

    darkMode: {
    enable: false,
    autoDark: true,
    autoLight: false,
},
    signature: {
    enable: true,
    contents: [

    "<b>

标签：1.5,rotate,博客园,transform,translate,px,美化,deg	

From： https://www.cnblogs.com/Spring-Rain/p/17678436.html