總感覺這件事情做的晚了哈哈。

以前寫博客總是一個人默默地寫，現在竟然出現了兩個吐槽我挖坑不填的哈哈。（非常感謝~）

大概是終於有個人能夠督促自己學習了，你們怎麽不早點來？！！！

廢話不多說，怎麽定義博客園的代碼呢。

• 步驟一，屏蔽掉博客園的皮膚樣式 => 百度一下，你就知道 => 其實就是編輯裏面 打個勾？

• 步驟二，如果你要修改JS => 在編輯的地方申請一下 => 一般都會馬上批準的。

• 步驟三， 開工了。

當前要改進的還有很多，比如我覺得 編輯這東西就該放在右上角。

• 1.編輯欄要放右上角

  要拉到最下面才能編輯簡直反人類。

• 2.內容顏色要漸變。

• 3.要加個內容跳轉，有些人是為了解決問題的，時間緊迫。

這裏先放個我現在博客園的樣式地址(說實話，現在還挺爛的，不過我覺得下面的JS效果還行):
博客園CSS地址 - 可直接復制粘貼用 - 不完全覆蓋、有樣式bug

這裏是我現在博客園的JS特效，IE9以上用(用上requestAnimationFrame，好處是切換到其他頁面的時候不運行，節省資源，不像setInterval.)
PS：對於IE9以下有setTimeout => 但是沒有 clearTimeout
博客園JS地址 - 可直接復制粘貼用

CSS

body, p, ul, li, div {
    margin: 0;
    padding: 0;
  }

  ul, li {
    list-style: none;
  }

  a {
    text-decoration: none;
  }

  /*
    移動端樣式
  */

  /*
    覆蓋掉原來的樣式
  */
  @media only screen and (max-width: 767px) {
    #blogTitle h1 {
        padding-top: 25px !important;
    }
    #blogTitle h2 {
      margin: 0 .5rem;
    }
    #navigator {
      position: absolute !important;
      top: 0 !important;  
      left: 0 !important;
      width: 100% !important;
    }

    #main {
      padding: 0 1rem;
    }

    #navigator ul {
      width: 100% !important;
      display: flex;
    }
    
    #navigator ul li:nth-child(3),
    #navigator ul li:nth-child(5) {
      display: none !important;
    }
    

    #navigator ul li {
      box-shadow: 0 0 10px;
    }
    #navigator ul li a {
      color: #936d29 !important;
      background-color: #191912 !important;
    }

    #mainContent .forFlow {
      width: -webkit-fill-available !important;
    }

    .day .postDesc {
      display: none;
    }

    #sidebar_search #sidebar_search_box {
      display: none;
    }
  }

  /*
    PC端樣式
  */

  /* Header => 標題欄、導航欄 */
  #header {
    position: relative;
  }

  /* 標題欄 */
  #blogTitle {
    width: 100%;
    min-height: 13rem;
    text-align: center;
    background-color: #191912;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }

  #blogTitle h1 {
    margin-top: 0;
  }

  #Header1_HeaderTitle {
    text-decoration: none;
    color: #000;
    text-shadow: 0 0 10px #ffb66f;
    font-size: 1.5rem;
  }

  #blogTitle h2 {
    margin-bottom: 2rem;
    display: inline-block;
    width: 60%;
    padding: 1rem;
    font-size: 1rem;
    text-align: left;
    text-indent: 2rem;
    color: #fff;
    font-weight: 100;
    text-shadow: 0 0 32px #ffc730;
    box-shadow: 0 0 10px #ffd26a;
  }

  /* 導航欄 */
  #navigator {
    position: fixed;
    top: 2rem;
    right: 0;
    width: 6rem;
  }

  .blogStats {
    display: none;
  }

  #navList li {
    padding-left: 1rem;
    margin-top: .3rem;
    display: inline-block;
    width: 5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    transition: all .5s ease;
  }
  
  #navList li:hover {
    width: 6rem;
    padding-left: 0;
  }
  #navList li:hover a {
    background: #089e8a;
    color: #fff;
  }

  #navList li a {
    display: inline-block;
    width: 100%;
    border-radius: 1rem 0 0 1rem;
    color: #e4d3c8;
    background: #121919;
  }

  /* 主要內容 */
  #main {
  }

  #mainContent {  
    text-align: center;
  }

  #mainContent .forFlow {
    display: inline-block;
    padding-top: 1rem;
    width: 80%;
    text-align: left;
  }

  #main .dayTitle {
    display: none;
  }

  #main .postCon {
    position: relative;
    margin-bottom: .8rem;
  }

  #main .forFlow .postCon .c_b_p_desc {
    width: 100%;
    height: 1.5rem;
    line-height: 1.5rem;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  #main .forFlow .postCon .c_b_p_desc a {
    display: none;
    /* position: absolute;
    width: 10%;
    top: 0;
    right: 0;; */
  }

  /* #main .forFlow .day .clear {
    margin-bottom: 2rem;
  } */

  #main .forFlow .postTitle {
    position: relative;
    margin-bottom: .5rem;
    padding-left: 1rem;
  }

  #main .forFlow .postTitle a {
    display: inline-block;
    width: 100%;
    background: #b4b19b;
    border-radius: 3px;
    text-indent: 2rem;
  }

  #main .forFlow .postTitle::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background: #089e8a;
    width: 5px;
    height: 100%;
  }

  #main .forFlow .postTitle a {
    height: 2rem;
    line-height: 2rem;
    font-size: 1rem;
    color: #191919;
  }

  #main .forFlow .postDesc {
    margin-bottom: 2rem;
    float: right;
    font-size: .9rem;
  }

  #main .forFlow .postDesc a {
    position: relative;
    display: inline-block;
    width: 50px;
    text-align: center;
    border-radius: 3px;
    color: #fff;
    background: #089e8a;
  }

  #main .forFlow .postDesc a:hover {
    background: #0066cc;
    color: #eee;
    box-shadow: 0 0 10px #000;
  }

  /*評論欄目*/
  #comment_form_container {
      margin-top: 2rem;
      background: #1c7096;
      text-align: center;
      border-radius: .5rem;
  }

  #commentform_title {
    background-image: none;
    width: 200px;
    font-size: 2rem;
    text-indent: 2rem;
    color: #fff;
    text-align: left;
  }

  .commentbox_title_left {
    display: none;
  }

  #tbCommentBody {
    width: 88%;
    border-radius: 6px;
    background: #619dd9;
    border: none;
    resize: none;
    text-indent: 2em;
    color: #452216;
    font-size: 1.4rem;
    text-shadow: 0 0 10px #2e6ab1;
  }

  #tbCommentBody:focus,
  #tbCommentBody:hover {
    background-color: #fff8cd;
  }

  /*JS canvas 動畫*/
  #bubbleCanvas {
    position: fixed;
    left: 10%;
    width: 80%;
  }


  /*搜索欄*/


  #sideBar .newsItem {
    display: none;
  }

  #sideBar #blog-calendar {
    display: none !important;
  }

  #sidebar_search .catListTitle {
    display: none;
  }

  #sidebar_search #sidebar_search_box {
    position: absolute;
    top: 0;
    right: 1rem;
  }

  #sidebar_search #sidebar_search_box #q {
    border: none;
    background: #3e3e4a;
    color: #fff;
    transition: all .5s ease;
  }

  #sidebar_search #sidebar_search_box input#q:focus,
  #sidebar_search #sidebar_search_box input#q:hover {
    background-color: #089e8a;
  }

  #sidebar_search #sidebar_search_box input#q:hover {
    width: 15rem;
    text-indent: 2rem;
    height: 3rem;
  }

  #sidebar_search #sidebar_search_box #btnZzk {
    border: none;
    border-radius: 3px;
    background: #2196F3;
    vertical-align: top;
  }

  #sidebar_search #sidebar_search_box #btnZzk:hover {
    background: #089e8a;
    color: #fff;
    cursor: pointer;
  }
 

JS

<script>
(function () {
  const $ = (id) => typeof id === "string" ? document.getElementById(id) : null;

  const Box = function () {};
  const Particle = function () {};

  Box.prototype = {
    pool: [],
    ctx: null,
    width: 300,
    height: 150,
    timer: 0,
    init: function (canvasId, wrapId) {
      this.wrapId = wrapId;
      let canvas = $(canvasId);
      const wrap = $(wrapId);
      if (!wrapId) {
        return;
      }

      if (!canvas) {
        const o = document.createElement("canvas");
        o.setAttribute("id", "bubbleCanvas");
        o.style="width: 100%;height:100%;position: absolute;top: 0;left: 0;";
        o.innerHTML = "您的瀏覽器不支持 Canvas 動畫.";
        wrap.appendChild(o);
        canvas = o;
      }

      this.ctx = canvas.getContext('2d');
      this.width = wrap.offsetWidth > 300 ? wrap.offsetWidth : 300;
      this.height = wrap.offsetHeight > 150 ? wrap.offsetHeight : 150;
      canvas.width = this.width;
      canvas.height = this.height;
      
      for (let x = 0; x < this.width * 0.1; x++) {
        var c = new Particle();
        this.pool.push(c);
      }

      this.animate();
    },
    animate: function () {
      this.ctx.clearRect(0, 0, this.width, this.height);
      for (let i = 0; i < this.pool.length; i++) {
        this.pool[i].init(this.ctx, this.width, this.height);
      }
      /**
       *  使用 requestAnimationFrame的好處，一旦頁面不處於瀏覽器的當前標簽，就會自動停止刷新。這就節省了CPU、GPU和電力。
       *  下面的其實是該功能的一個 polyfill.
      **/
      window.requestAFrame = (function () {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame 
          || window.mozRequestAnimationFrame || window.oRequestAnimationFrame
          || window.msRequestAnimationFrame || function (callback) {
            return window.setTimeout(callback, 1000 / 60);
          };
      })();
      this.timer = window.requestAFrame(this.animate.bind(this));
    },
    resize: function (id) {
      if (this.timer) {
        window.cancelAnimationFrame(this.timer);
      }
    }
  };

  Particle.prototype = {
    haveInit: false,
    ctx: null,
    width: 300,
    height: 150,
    positionX: 0,
    positionY: 0,
    alpha: 0,
    scale: 0,
    velocity: 0,
    init: function (ctx, width, height) {
      // 初始效果
      if (!this.haveInit) {
        this.haveInit = true;
        this.ctx = ctx;
        this.width = width;
        this.height = height;
        this.positionX = Math.random() * this.width;
        this.positionY = this.height + Math.random() * 100;
        this.alpha = 0.1 + Math.random() * 0.3;
        this.scale = 0.1 + Math.random() * 0.3;
        this.velocity = Math.random();
        return;
      }

      // 變化 => 重置
      if(this.alpha <= 0) {
        this.haveInit = false;
        this.init(ctx, width, height);
      }
      
      // 變化效果
      this.positionY -= this.velocity;
      this.alpha -= 0.0005;
      ctx.beginPath();
      ctx.arc(this.positionX, this.positionY, this.scale * 10, 0, 2 * Math.PI, false);
      ctx.fillStyle = 'rgba(255,255,255,' + this.alpha + ')';
      ctx.fill();
    }
  }

  let box = new Box();
  box.init("bubbleCanvas", "blogTitle");

  // 銷毀重建 => 光銷毀 box 是不行的，還要銷毀粒子效果的 粒子們。
  window.onresize = function () {
    box.resize();
    box.pool = [];
    box.init("bubbleCanvas", "blogTitle");
  }

}());
</script>
 

博客園樣式自定義（待更新）