博客园美化 | part08-历史主题

⚠️ 注: 此主题是博客园默认皮肤custom下改进的

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




#catalog ul {
    background-color: #ccc6f9;
    max-height: 550px;
    padding: 10.098px 14.418px;
    overflow-y: scroll；;
    overflow-x: hidden;
    margin: 0px -13px 0px -65px;
}

/*  --------------自定义样式----------------- */

/*  code fence style       */
#cnblogs_post_body .hljs-ln {
   display: block !important;
    color: #fbfbfb !important;
    background: #000000 !important;
    border: none !important;
    padding: 10px 10px 0 !important;
    font-weight: normal;
    border-radius: 11px;
}
/*  图片样式    */
#cnblogs_post_body  img{
    border-radius: 29px !important;
    box-shadow: 1px 11px 16px #4c4c4c85;
    width: 70%;
    height: auto;

}

/*  水平分页线样式 */
.blogpost-body  hr {
   border-top: 3px dashed #bb39f1 !important;
}

博客侧边栏公告

<script src="https://guangzan.gitee.io/awescnb/index.js"></script>
 
 
<script>
$.awesCnb({
// 基本配置，在线切换主题
theme: {
//name: 'view', // 极客风格主题
//name: 'view', //宽阔视野主题
//name: 'simple', //  简约风格主题
name: 'reacg', //二次元风格
 //name: 'bilibili',
 //name: 'geek',
 //name: 'element',
        color: '#FFB3CC',
        title: '',
        contentSize: 'mid',
        //背景图片地址
        headerBackground: 'https://img2020.cnblogs.com/blog/2129350/202009/2129350-20200901200713499-999477266.jpg',
        //头像图片地址
        avatar: 'https://pic.cnblogs.com/avatar/1890468/20191205150715.png',
        favicon: '',
    },
links: [
 {
        name: '收藏夹',
        link: 'https://wz.cnblogs.com/',
    }
    //,
    //{
    //    name: '自定义菜单名',
    //    link: '跳转链接',
    //}
],
notice:{
    enable: true
},
signature: {
    enable: false, //是否开启个性签名
    contents: [
    "个性签名、<b style='color:#ff6b81'>颜色，加粗的</b>"
    ],
},
darkMode: {
    enable: true    
},
postTopimage: {
    enable: false,
    imgs: [],
    position: 'top',
},
highLight: {
    dark: 'atomOneDark',
 //dark:'panda'
   // light: 'atomOneLight',
},
lineNumbers: {
    enable: true
},
catalog: {
    enable: true,
    position: 'left',
},
back2top: {
    enable: true,
    type: 'simple',
},
tools: {
    enable: true,
    initialOpen: false,
    draggable: true,
},
topProgress: {
    enable: true,
    page: 'all',
    agent: 'pc',
    background: '#FFB3CC',
    height: '5px',
},
 notice:{
    enable:true,
    text:['👏欢迎来到我的博客❗'],
},
lock: {
    enable: true,
    background: 'https://i.lolim.moe/2021/01/112d94fd27f435_1_post.jpg',
    strings: [
        '<i>Powered by</i> webpack.',
        '&amp; Theme in awescnb',
        '快去自定义您的个性签名吧~',
    ],
},
click: {
    enable: true,
    auto: false,
    colors: ['#FF1461', '#18FF92', '#5A87FF', '#FBF38C'],
    size: 30,
    maxCount: 50,
},
})
</script>
 <script type="text/javascript">
  /* 鼠标特效，我觉得太花哨了就注释了，喜欢的自己打开注释就可以 */
  var a_idx = 0;
  jQuery(document).ready(function($) {
      $("body").click(function(e) {
          var a = new Array("❤去活出你自己。❤","❤今天的好计划胜过明天的完美计划。❤","❤不要轻言放弃，否则对不起自己。❤","❤紧要关头不放弃，绝望就会变成希望。❤","❤如果不能改变结果，那就完善过程。❤","❤好好活就是干有意义的事，有意义的事就是好好活！❤","❤你真正是谁并不重要，重要的是你的所做所为。❤","❤你不想为你的信仰冒一下险吗?难道想等你老了，再后悔莫及吗?❤","❤有些鸟儿是关不住的，它的每一根羽毛都闪耀着自由的光辉。❤","❤决定我们成为什么样人的，不是我们的能力，而是我们的选择。❤","❤掉在水里你不会淹死，呆在水里你才会淹死，你只有游，不停的往前游。❤","❤有些路，只能一个人走。❤","❤希望你眼眸有星辰，心中有山海。❤","❤从此以梦为马，不负韶华。❤","❤人的成就和差异决定于其业余时间。❤","❤佛不要你皈依，佛要你欢喜。❤","❤ダーリンのこと　大好きだよ❤","❤小猫在午睡时，地球在转。❤","❤我，混世大魔王，申请做你的小熊软糖。❤","❤决定好啦，要暗暗努力。❤","❤呐，做人呢最紧要开心。❤","❤好想邀请你一起去云朵上打呼噜呀。❤","❤永远年轻，永远热泪盈眶。❤","❤我生来平庸，也生来骄傲。❤","❤我走得很慢，但我从不后退。❤","❤人间不正经生活手册。❤","❤我是可爱的小姑娘，你是可爱。❤","❤数学里，有个温柔霸道的词，有且仅有。❤","❤吧唧一口，吃掉难过。❤","❤你头发乱了哦。❤","❤健康可爱，没有眼袋。❤","❤日月星辰之外，你是第四种难得。❤","❤你是否成为了了不起的成年人？❤","❤大家都是第一次做人。❤","❤何事喧哗？！❤","❤人间有味是清欢。❤","❤你笑起来真像好天气。❤","❤风填词半句，雪斟酒一壶。❤","❤除了自渡，他人爱莫能助。❤","❤昨日种种，皆成今我。❤","❤一梦入混沌 明月撞星辰❤","❤保持独立 适当拥有❤","❤谢谢你出现 这一生我很喜欢❤","❤做自己就好了 我会喜欢你的❤","❤太严肃的话，是没办法在人间寻欢作乐的❤","❤愿你余生可随遇而安，步步慢。❤","❤黄瓜在于拍，人生在于嗨❤","❤奇变偶不变，符号看象限。❤","❤从来如此，便对么？❤","❤今天我这儿的太阳，正好适合晒钙 你呢❤","❤未来可期，万事胜意。❤","❤星光不问赶路人 时光不负有心人❤","❤我当然不会试图摘月，我要月亮奔我而来❤","❤女生要修炼成的五样东西： 扬在脸上的自信，长在心底的善良， 融进血里的骨气，刻进命里的坚强，深到骨子里的教养❤","❤燕去燕归，沧海桑田。纵此生不见，平安惟愿❤","❤我想认识你 趁风不注意❤","❤我一直想从你的窗子里看月亮❤","❤长大应该是变温柔，对全世界都温柔。❤","❤别在深夜做任何决定❤","❤山中何事，松花酿酒，春水煎茶。❤","❤桃李春风一杯酒，江湖夜雨十年灯。❤","❤欲买桂花同载酒，终不似，少年游。❤");
          var le = Math.ceil(Math.random()*a.length); 
          var $i = $("<span></span>").text(a[le]);/*a[a_idx]*/
          a_idx = (a_idx + 1) % a.length;
          var x = e.pageX,
          y = e.pageY;
          $i.css({
              "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
              "top": y - 20,
              "left": x,
              "position": "absolute",
              "font-weight": "bold",
              "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
          });
          $("body").append($i);
          $i.animate({
              "top": y - 180,
              "opacity": 0
          },
          2000,
          function() {
              $i.remove();
          });
      });
  });
  </script>

首页HMTL代码

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

页脚HTML代码


<!-- Back to Top-->
<style>
  #back-top {
     position: fixed;
    bottom: 28px;
    right: 54px;
    z-index: 99;

  }
  #back-top span {
    
    width: 100px;
    height: 100px;
    display: block;
    background: url(https://www.cnblogs.com/images/cnblogs_com/guomie/1464522/o_123.png) no-repeat 		center center;
    background-size: contain;
    border-radius: 92px;
  }
  #back-top a{outline:none}
  </style>
<!--   **************************************************************    -->
  <script type="text/javascript">
  $(function() {
      // hide #back-top first
      $("#back-top").hide();
      // fade in #back-top
      $(window).scroll(function() {
          if ($(this).scrollTop() > 500) {
              $('#back-top').fadeIn();
          } else {
              $('#back-top').fadeOut();
          }
      });
      // scroll body to 0px on click
      $('#back-top a').click(function() {
          $('body,html').animate({
              scrollTop: 0
          }, 800);
          return false;
      });
  });
  </script>
  <p id="back-top" style="display:none"><a href="#top"><span></span></a></p>

本主题参考: 🔩 在博客园中安装皮肤

引用样式

.postBody blockquote, .postCon blockquote {
    margin: 0 auto;
    padding: 6px 0 6px 55px;
    color: #272424;
    background: #e0ffe1 url(/images/blockquote.gif) top left no-repeat;
    border-radius: 3px 13px 13px 120px;
}

相关文章

posted @ 2021-06-27 01:44  茶哩哩  阅读(99)  评论(0)  编辑  收藏  举报