博客园美化

之前做了一部分博客园美化，仿bilibili·秋头图banner效果，代码来自于Steven。后来换到现在用的主题了。备份一下。

博客皮肤：

SimpleMemory

页面定制 CSS 代码：

body{
    cursor: url(https://files.cnblogs.com/files/bernanke/rainbow_normal.ico),auto;
    background-image: url("https://images.cnblogs.com/cnblogs_com/bernanke/1890753/o_201129130450Yugi_Amane_bkg.jpg");
    background-size: cover;
    background-attachment: fixed;
    background-repeat: repeat-y;
    font-family: Helvetica, Consolas;
}

/*header*/
header {
    height: 160px;
    position: relative;
    overflow: hidden;
}

header > div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

header > div > img {
    display: block;
    width: 110%;
    height: 100%;
    object-fit: cover;
}

header .blog_title {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    padding-left: 50px;
    padding-bottom: 20px;
    box-sizing: border-box;
    color: #fff;
    font-size: 3rem;
    font-weight: bold;
    z-index: 1;
}

header .blog_title .blog_title_text {
    margin-left: 20px;
}

header > div .img_avatar{
    display: flex;
    align-items: flex-end;
    height: unset;
    width: 100px;
    object-fit: scale-down;
}

header > div > a{
    color: unset;
}

header > div > a:visited{
    color: #fff;
}

header > div > a:hover{
    color: #fff;
    cursor: pointer;
}

header > div > a:active{
    color: #fff;
}

/*页面部分*/
.has-navbar .navbar{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
}

.navbar-branding{
    display: none;
}

div#page_begin_html{
    margin-top: 0;
}

div#navigator{
    border: none;
    margin-top: 0;
}

a#blog_nav_admin.menu{
    padding-top: 0;
}

div#home{
    width: 100%;
    height: calc(100vh-160px);
    margin-top: 0;
    padding: 10px 30px;
    box-sizing: border-box;
    opacity: 0.9;
}

div#blogTitle{
    display: none;
}

.forFlow .day .postTitle{
    border-left: none;
}

.forFlow .day .postDesc{
    display: none;
}

.forFlow .day .postTitle a{
    padding-left: 0;
}

.forFlow .day .postTitle a:link, .forFlow .day .postTitle a:visited, .forFlow .day .postTitle a:active, .forFlow .day .postTitle a:hover{
    margin-left: 0;
    color: #2591ff;
    font-size: 1.5rem;
    font-weight: bold;
    transition: none;
}

div#topics .postTitle {
    padding-left: 0;
}

.forFlow .post .postTitle a:link, .forFlow .post .postTitle a:visited, .forFlow .post .postTitle a:active, .forFlow .post .postTitle a:hover{
    margin-left: 0;
    color: #2591ff;
    font-size: 1.5rem;
    font-weight: bold;
    transition: none;
}

div#mainContent{
    width: unset;
}

div#sideBar{
    display: none;
}

div#green_channel{
    display: none;
}

div#commentform_title a{
    display: none;
}

div#ad_t2{
    display: none;
}

div#cnblogs_c1{
    display: none;
}

div#under_post_news{
    display: none;
}

div#cnblogs_c2{
    display: none;
}

div#under_post_kb{
    display: none;
}

div#cnblogs_post_body > pre > code {
    font-family: Consolas !important;
    font-size: 15px !important;
}

div#footer{
    display: none;
}

博客侧边栏公告：

<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script src="https://files.cnblogs.com/files/bernanke/mouse-click.js"></script>
<canvas width="1777" height="841" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>
<script type="text/javascript">
//banner
const images = document.querySelectorAll('header > div > img')
var enterPoint = 0;
var percentage;
var offset;
var blur;


window.onload = () => {
  init()
}

function init(){
  this.percentage = 0
  this.offset = 0
  this.blur = 6
  for (let [index, image] of images.entries()){
    let blurValue = (Math.pow((index / images.length - percentage), 2) * blur)
    if(index !== 0){
      image.style.setProperty('transform',`translate(${offset}px)`)
      image.style.setProperty('filter',`blur(${blurValue}px)`)
      image.style.setProperty('transition',`all .1s linear 0s`);   
    }
  }
}


document.querySelector('header').addEventListener('mouseenter',(e)=>{
  this.enterPoint = e.clientX;
})

document.querySelector('header').addEventListener('mousemove', (e) => {
  this.percentage = (e.clientX - this.enterPoint) / window.outerWidth
  this.offset = 10 * percentage
  
  for (let [index, image] of images.entries()) {
    this.offset *= 1.3
    
    let blurValue = (Math.pow((index / images.length - percentage), 2) * blur)
    if(index !== 0){
      image.style.setProperty('transform',`translate(${this.offset}px)`)
      image.style.setProperty('filter',`blur(${blurValue}px)`)
    }
  }
})

document.querySelector('header').addEventListener('mouseleave', (e) => {
  this.init()
})

//Live2D
L2Dwidget.init({
        "model": {
            jsonPath: "https://unpkg.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json",
            "scale": 1
        },
        "display": {
            "position": "right",
            "width": 100,
            "height": 100,
            "hOffset": 0,
            "vOffset": -20
        },
        "mobile": {
            "show": true,
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 0.7,
            "opacityOnHover": 0.2
        }
    });
</script>

页首 HTML 代码：

<header>
  <div class="blog_title">
    <a href="https://home.cnblogs.com/u/bernanke">
      <img src="//pic.cnblogs.com/avatar/1524516/20201125183632.png" alt="科科Cole的头像" class="img_avatar">
    </a>
    <a href="https://www.cnblogs.com/bernanke/" class="blog_title_text">科科</a>
  </div>
  <div><img src="https://images.cnblogs.com/cnblogs_com/bernanke/1890007/o_201127174326bilibili-autumn-1.png"></div>
  <div><img src="https://images.cnblogs.com/cnblogs_com/bernanke/1890007/o_201127174338bilibili-autumn-2.png"></div>
  <div><img src="https://images.cnblogs.com/cnblogs_com/bernanke/1890007/o_201127174353bilibili-autumn-3.png"></div>
  <div><img src="https://images.cnblogs.com/cnblogs_com/bernanke/1890007/o_201127174404bilibili-autumn-4.png"></div>
  <div><img src="https://images.cnblogs.com/cnblogs_com/bernanke/1890007/o_201127174415bilibili-autumn-5.png"></div>
  <div><img src="https://images.cnblogs.com/cnblogs_com/bernanke/1890007/o_201127174423bilibili-autumn-6.png"></div>
</header>

页脚 HTML 代码：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>

<meting-js server="netease" id="1455495805" type="song" fixed="true" autoplay="true" volume="1.0">
</meting-js>