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

• 2019 年 10 月 15 日
• 筆記

說明

「我經常有那種感覺，如果這個事情來了，你卻沒有勇敢地去解決掉，它一定會再來。生活真是這樣，它會一次次地讓你去做這個功課直到你學會為止。」 —— 《像我這樣笨拙地生活》

博客園樣式一直是我想改的，之前使用過別人寫好的樣式模版，加了很多東西，可惜有一天全丟失了，博客園幫忙找回來了一部分，但是不全面，基本相當於廢了，於是決定重頭再來，自己寫一套樣式。麋鹿魯喲的博客園

需要文件的可以來 github ，喜歡我寫的樣式可以幫我點個 star 喔 ღゝ◡╹)ノ♡

好了，廢話不多說，開始~

博客示例

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

介紹

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

• ? 本樣式以簡約可愛為核心，美化博客園的顯示效果，增加自定義導航；
• ? 基於博客園主題「SimpleMemor」進行的樣式修改；
• ? 支持響應式；

功能

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

## 使用方法

• 首先記得申請JS權限
• 其次博客皮膚選擇 SimpleMemor
• 勾選禁用模板默認CSS
• 創建一個新隨筆（這裡使用選項中的TinyMCE(推薦)來編寫的） —— 「友鏈」；
• 點擊 「編輯 HTML 源代碼」 插入以下代碼，點擊更新；
• 只勾選 高級選項中的 「發佈」、「允許評論」;

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

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

頁面定製CSS代碼

  #home{display:none}    .showpage {position: fixed;width: 100%;height: 100%;text-align: center;left: 0;top: 0;}    .showpage img{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}

頁首Html代碼

  <div class="showpage" id="showpage"> <img src="https://images.cnblogs.com/cnblogs_com/elkyo/1566714/o_showpage .gif"> <div>    <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"        }],      /*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>

## 參數說明

若字符串為空則不顯示友鏈