可愛的博客園樣式美化、自定義博客園主題樣式

時間 2020-05-30

標籤可愛博客樣式美化自定義園主简体版

原文原文鏈接

<div align="center">css

<h3> cute-cnblogs <h3>html

</div>react

說明 「我常常有那種感受，若是這個事情來了，你卻沒有勇敢地去解決掉，它必定會再來。生活真是這樣，它會一次次地讓你去作這個功課直到你學會爲止。」 —— 《像我這樣笨拙地生活》 博客園樣式一直是我想改的，以前使用過別人寫好的樣式模版，加了不少東西，惋惜有一天全丟失了，博客園幫忙找回來了一部分，可是不全面，基本至關於廢了，因而決定重頭再來，本身寫一套樣式。麋鹿魯喲的博客園 須要文件的能夠來 github ，喜歡我寫的樣式能夠幫我點個 star 喔 ღゝ◡╹)ノ♡ 好了，廢話很少說，開始~ jquery

博客示例

ღゝ◡╹)ノ♡ 麋鹿魯喲的博客園git

介紹

可愛的博客園樣式美化、自定義博客園樣式 ღゝ◡╹)ノ♡github

:book: 本樣式以簡約可愛爲核心，美化博客園的顯示效果，增長自定義導航；
:shaved_ice: 基於博客園主題「SimpleMemory」進行的樣式修改；
:strawberry: 支持響應式；

功能

:apple: 導航點點動效隨鼠標而動
:tangerine: 導航欄自定義
:cherries: 頁面詩意詩句模塊
:banana: 看板娘-貓(ฅ´ω`ฅ)
:peach: 音樂-網易雲
:pineapple: 上吊的貓（PS：回到頂部）
:watermelon: 底部跳動的魚<・)))><<
:grapes: 點擊頁面跳動的小豆子及可愛的文字
:lemon: 評論增長OωO聊天表情
:tomato: 頁面不一樣的導航背景及人物背景
:pear: github跳轉小三角

使用方法json

首先記得申請JS權限
其次博客皮膚選擇 SimpleMemor
勾選禁用模板默認CSS

canvas

建立一個新隨筆（這裏使用選項中的TinyMCE(推薦)來編寫的） —— 「友鏈」；
點擊「編輯 HTML 源代碼」插入如下代碼，點擊更新；
只勾選高級選項中的「發佈」、「容許評論」;

<p style="text-align: center;">歡迎來到個人友鏈小屋</p>
<div class="friendsbox">&nbsp;</div>

數組

最後分別複製如下區域代碼，並根據參數更改數據（PS：路徑可進行更改也可不更改，自行down文件上傳到博客園文件中，並更改引入路徑）

（PS：建議將https://blog-static.cnblogs.com/files/elkyo/cute-cnblogs.css引入內的內容放到頁面定製CSS代碼區域）微信

頁首Html代碼

<link rel='stylesheet' href='https://blog-static.cnblogs.com/files/elkyo/cute-cnblogs.css'>
  <link rel='stylesheet' href='https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css'>
  <link rel="stylesheet" href="https://blog-static.cnblogs.com/files/elkyo/siyuan.css" />
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://blog-static.cnblogs.com/files/elkyo/monitoring.js"></script>
  <link rel="stylesheet" href="https://blog-static.cnblogs.com/files/elkyo/OwO.min.css" />
  <script src="https://blog-static.cnblogs.com/files/elkyo/OwO.min.js"></script>
  <script src="https://blog-static.cnblogs.com/files/elkyo/cute-cnblogs.js"></script>
  <script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
  <script src="https://blog-static.cnblogs.com/files/elkyo/three.min.js"></script>
  <script src='https://blog-static.cnblogs.com/files/elkyo/star.js'></script>
  <script>
  miluframe({
      /*我的連接地址*/
    Youself:'https://www.cnblogs.com/miluluyo/',
    /*導航欄信息*/
    custom:[{
      name:'留言板',
      link:'https://www.cnblogs.com/miluluyo/p/11578505.html',
      istarget:false
    },{
      name:'技能樹',
      link:'https://miluluyo.github.io/',
      istarget:true
    }],
    /*本身的友鏈頁面後綴*/
    Friends_of_the:'p/11633791.html',
    /*本身的友鏈信息*/
    resume:{
        "name":"麋鹿魯喲",
        "link":"https://www.cnblogs.com/miluluyo",
        "headurl":"https://images.cnblogs.com/cnblogs_com/elkyo/1558759/o_o_my.jpg",
        "introduction":"大道至簡，知易行難。"
    },
    /*友鏈信息*/
    unionbox:[{
        "name":"麋鹿魯喲",
        "introduction":"生活是沒有標準答案的。",
        "url":"https://www.cnblogs.com/miluluyo",
        "headurl":"https://images.cnblogs.com/cnblogs_com/elkyo/1558759/o_o_my.jpg"
      },{
        "name":"麋鹿魯喲的技能樹",
        "introduction":"大道至簡，知易行難。",
        "url":"https://miluluyo.github.io/",
        "headurl":"https://images.cnblogs.com/cnblogs_com/elkyo/1558759/o_o_my.jpg"
      }],
    /*點擊頁面時候的彈出文本顯示*/
    clicktext:new Array("ヾ(◍°∇°◍)ﾉﾞ加油喲~ ——麋鹿魯喲","生活是沒有標準答案的。  ——麋鹿魯喲"),
    /*github連接*/
    githuburl:'https://github.com/miluluyo'
  })
  </script>

頁腳Html代碼

<!-- 底部加了小魚<・)))><<~ -->
  <div id="jsi-flying-fish-container" class="container"></div>
  <script src='https://blog-static.cnblogs.com/files/elkyo/fish.js'></script>
  <style>
  @media only screen and (max-width: 767px){
  #sidebar_search_box input[type=text]{width:calc(100% - 24px)}
  }
  </style>

  <!--音樂-->
  <link rel="stylesheet" href="https://blog-static.cnblogs.com/files/elkyo/APlayer.min.css">
  <div id="player" class="aplayer aplayer-withlist aplayer-fixed" data-id="3025663508" data-server="netease" data-type="playlist" data-order="random" data-fixed="true" data-listfolded="true" data-theme="#2D8CF0"></div>
  <script src="https://blog-static.cnblogs.com/files/elkyo/APlayer.min.js"></script>
  <script src="https://blog-static.cnblogs.com/files/elkyo/Meting.min.js"></script>

  <!--看板娘 - 貓-->
  <script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
  <script>
      L2Dwidget.init({
          "model": {
              jsonPath: "https://unpkg.com/live2d-widget-model-hijiki/assets/hijiki.model.json",<!--這裏改模型，前面後面都要改-->
              "scale": 1
          },
          "display": {
              "position": "left",<!--設置看板孃的上下左右位置-->
              "width": 100,
              "height": 200,
              "hOffset": 70,
              "vOffset": 0
          },
          "mobile": {
              "show": true,
              "scale": 0.5
          },
          "react": {
              "opacityDefault": 0.7,<!--設置透明度-->
              "opacityOnHover": 0.2
          }
      });
  window.onload = function(){
       $("#live2dcanvas").attr("style","position: fixed; opacity: 0.7; left: 70px; bottom: 0px; z-index: 1; pointer-events: none;")
  }
  </script>
  <!--點擊冒點-->
  <canvas width="1777" height="841" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas><script src="https://blog-static.cnblogs.com/files/elkyo/mouse-click.js"></script>

參數說明

<table style="text-align: center;"> <thead> <tr> <th>名稱</th> <th>類型</th> <th>默認值/實例</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>Youself</td> <td>字符串</td> <td>https://www.cnblogs.com/miluluyo/</td> <td>我的博客園首連接</td> </tr> <tr> <td>custom</td> <td>數組</td> <td>[{ name:'相冊', link:'https://www.cnblogs.com/elkyo/gallery.html', istarget:false },{ name:'技能樹', link:'https://miluluyo.github.io/', istarget:true },{ name:'留言板', link:'https://miluluyo.github.io/p/11578505.html', istarget:false }]</td> <td>導航信息 name 導航名 link 導航連接 istarget true跳轉到新頁面上，false當前頁面打開</td> </tr> <tr> <td>Friends_of_the</td> <td>字符串</td> <td>11633791</td> <td>友鏈文章的後綴名，</td>若字符串爲空則不顯示友鏈</td> </tr> <tr> <td>resume</td> <td>對象</td> <td>{ "name":"麋鹿魯喲", "link":"https://www.cnblogs.com/miluluyo/", "headurl":"https://images.cnblogs.com/cnblogs_com/ elkyo/1558759/o_o_my.jpg", "introduction":"大道至簡，知易行難。" }</td> <td>本身的友鏈信息 name 導航名 link 導航連接 headurl 頭像 introduction 語錄</td> </tr> <tr> <td>unionbox</td> <td>數組</td> <td>[{ "name":"麋鹿魯喲", "introduction":"生活是沒有標準答案的。", "url":"https://www.cnblogs.com/miluluyo", "headurl":"https://images.cnblogs.com/cnblogs_com/ elkyo/1558759/o_o_my.jpg" },{ "name":"麋鹿魯喲的技能樹", "introduction":"大道至簡，知易行難。", "url":"https://miluluyo.github.io/", "headurl":"https://images.cnblogs.com/cnblogs_com/ elkyo/1558759/o_o_my.jpg" }]</td> <td>友鏈數組 name 暱稱 introduction 標語 url 連接地址 headurl 頭像地址</td> </tr> <tr> <td>clicktext</td> <td>新數組</td> <td>new Array("ヾ(◍°∇°◍)ﾉﾞ加油喲~ ——麋鹿魯喲", "生活是沒有標準答案的。 ——麋鹿魯喲"),</td> <td>點擊頁面時候的彈出顯示</td> </tr> <tr> <td>githuburl</td> <td>字符串</td> <td>https://github.com/miluluyo</td> <td>github連接</td> </tr> </tbody> </table>

最後