cute-cnblogs
cute-cnblogs
說明
“我經常有那種感覺，如果這個事情來了，你卻沒有勇敢地去解決掉，它一定會再來。生活真是這樣，它會一次次地讓你去做這個功課直到你學會為止。” —— 《像我這樣笨拙地生活》
博客園樣式一直是我想改的，之前使用過別人寫好的樣式模版，加了很多東西，可惜有一天全丟失了，博客園幫忙找回來了一部分，但是不全面，基本相當於廢了，於是決定重頭再來，自己寫一套樣式。麋鹿魯喲的博客園
需要文件的可以來 github ，喜歡我寫的樣式可以幫我點個 star 喔 ღゝ◡╹)ノ♡
好了，廢話不多說，開始~
博客示例
ღゝ◡╹)ノ♡ 麋鹿魯喲的博客園
介紹
可愛的博客園樣式美化、自定義博客園樣式 ღゝ◡╹)ノ♡
- 📖 本樣式以簡約可愛為核心，美化博客園的顯示效果，增加自定義導航；
- 🍧 基於博客園主題“SimpleMemory”進行的樣式修改；
- 🍓 支持響應式；
功能
- 🍎 導航點點動效隨鼠標而動
- 🍊 導航欄自定義
- 🍒 頁面詩意詩句模塊
- 🍌 看板娘-貓(ฅ´ω`ฅ)
- 🍑 音樂-網易雲
- 🍍 上吊的貓（PS：回到頂部）
- 🍉 底部跳動的魚<・)))><<
- 🍇 點擊頁面跳動的小豆子及可愛的文字
- 🍋 評論增加OωO聊天表情
- 🍅 頁面不同的導航背景及人物背景
- 🍐 github跳轉小三角
使用方法
- 首先記得申請JS權限
- 其次博客皮膚選擇 SimpleMemor
- 勾選禁用模板默認CSS
- 創建一個新隨筆（這里使用選項中的TinyMCE(推薦)來編寫的） —— “友鏈”；
- 點擊 “編輯 HTML 源代碼” 插入以下代碼，點擊更新；
- 只勾選 高級選項中的 “發布”、“允許評論”;
<p style="text-align: center;">歡迎來到我的友鏈小屋</p>
<div class="friendsbox"> </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>
參數說明
| 名稱 | 類型 | 默認值/實例 | 描述 |
|---|---|---|---|
| Youself | 字符串 | https://www.cnblogs.com/miluluyo/ | 個人博客園首鏈接 |
| custom | 數組 | [{ 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 }] |
導航信息 name 導航名 link 導航鏈接 istarget true跳轉到新頁面上，false當前頁面打開 |
| Friends_of_the | 字符串 | 11633791 | 友鏈文章的后綴名， | 若字符串為空則不顯示友鏈
| resume | 對象 | { "name":"麋鹿魯喲", "link":"https://www.cnblogs.com/miluluyo/", "headurl":"https://images.cnblogs.com/cnblogs_com/ elkyo/1558759/o_o_my.jpg", "introduction":"大道至簡，知易行難。" } |
自己的友鏈信息 name 導航名 link 導航鏈接 headurl 頭像 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" }] |
友鏈數組 name 昵稱 introduction 標語 url 鏈接地址 headurl 頭像地址 |
| clicktext | 新數組 | new Array("ヾ(◍°∇°◍)ﾉﾞ加油喲~ ——麋鹿魯喲", "生活是沒有標准答案的。 ——麋鹿魯喲"), |
點擊頁面時候的彈出顯示 |
| githuburl | 字符串 | https://github.com/miluluyo | github鏈接 |
最后
- 為了響應大家的號召，方便大家技術交流，現在建立了一個微信群，如果大家有需要可以掃碼（或者搜我微信號：s978761）加我好友，我邀請你加入～本群是一個純交流學習工作的群，不准發布廣告、營銷相關的信息！對了，加我記得備注上：博客園+名稱 喔~
