cute-cnblogs 自定義博客園樣式美化二期來啦~
說明
cute-cnblogs 可愛的博客園樣式美化、自定義博客園樣式 二期樣式已經編寫完畢了，如果說 一期樣式 給人的感覺是簡潔清爽的小嬰兒的話，那麼 二期樣式 就是一個有自己小個性（花樣）的小朋友了~
與一期一樣，需要文件的可以來 github ，喜歡我寫的樣式可以幫我點個 star 喔 ღゝ◡╹)ノ
（PS：有什麼問題也可以留言到 github issues 中喔~）
好了，讓我們擼起袖子開始更換二期樣式吧~
博客示例
ღゝ◡╹)ノ 麋鹿魯喲的博客園
介紹
可愛的博客園樣式美化、自定義博客園樣式 ღゝ◡╹)ノ
- 本樣式以簡約可愛為核心，美化博客園的显示效果，增加自定義導航；
- 基於博客園主題“Custom”進行的樣式修改；
- 閱讀目錄導航；
- 支持響應式；
功能
一期功能
- 頂部背景點點動效隨鼠標而動
- 導航欄自定義
- 頁面詩意詩句模塊
- 看板娘-貓(ฅ´ω`ฅ) （自行決定是否添加，因為這個有些影響加載速度）
- 音樂-網易雲 （自行決定是否添加）
- 上弔的貓（PS：回到頂部）（已用其餘按鈕代替此功能）
- 底部跳動的魚<・)))><<
- 點擊頁面跳動的小豆子及可愛的文字（自行決定是否添加可愛文字的點擊）
- 評論增加OωO聊天表情
- 頁面不同的導航背景及人物背景
二期增加功能
- 側邊欄显示
- 側邊欄公告欄及個人信息显示
- 閱讀目錄（標題 h1 > h2 > h3 寫了三級目錄）
- ️ 主題皮膚切換（淺白、暗黑、閱讀）
- 仿主播點贊功能點擊推薦
- ️ 讚賞模塊功能
模版選定
博客皮膚選定： 博客園 Custom 標準模板（與一期不同喔）
使用方法
基本操作
請按照順序進行操作喔~
- 創建一個新隨筆（這裏使用選項中的TinyMCE(推薦)來編寫的） —— “友鏈”；（注意，此處已與一期不同）
- 點擊 “編輯 HTML 源代碼” 插入以下代碼，修改自己的文本內容后，點擊更新；
- 只勾選 高級選項中的 “發布”、“允許評論”;
<p style="text-align: center;">歡迎來到我的友鏈小屋</p>
<div class="friendsbox">
<div id="app">
<h6 style="text-align: center; color: #2daebf;">展示本站所有友情站點，排列不分先後，均勻打亂算法隨機渲染的喔！</h6>
<div class="unionbox-box" style="display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 1.5rem; margin-top: 1.5rem;"> </div>
<hr style="position: relative; margin: 1rem 0; border: 1px dashed #9eabb3; width: calc(100%); height: 0;" />
<h2 style="text-align: center;">友鏈信息</h2>
<h5 style="text-align: left; line-height: 30px;">博客名稱：<a href="javascript:void(0)">麋鹿魯喲</a><br />博客網址：<a href="javascript:void(0)">https://www.cnblogs.com/miluluyo/</a><br />博客頭像：<a href="javascript:void(0)">https://pic.cnblogs.com/avatar/1273193/20190806180831.png</a><br />博客介紹：<a href="javascript:void(0)">大道至簡，知易行難。</a></h5>
<h2 style="text-align: center;">join us</h2>
<h5 style="text-align: center; color: #2daebf;">如需友鏈，請添加微信（s978761）告知，格式如下</h5>
<table class="table friendstable" style="margin: 0 auto;">
<tbody>
<tr><th><strong>字段</strong></th><th><strong>字義</strong></th></tr>
</tbody>
</table>
</div>
</div>
- 最後分別複製以下區域代碼，並根據參數更改數據（PS：路徑可進行更改也可不更改，我覺得更改后速度會快一點，自行down文件上傳到博客園文件中，並更改引入路徑，文件都在 github 中，喜歡記得給我個star喔~）
頁面定製CSS代碼
複製 https://blog-static.cnblogs.com/files/miluluyo/cute-cnblogs2.css 的文件內容放到 頁面定製CSS代碼 區域
博客側邊欄公告
<link href="https://blog-static.cnblogs.com/files/miluluyo/tippy.min.css" rel="stylesheet">
<script src="https://blog-static.cnblogs.com/files/miluluyo/jquery2.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/miluluyo/tippy.js"></script>
<script src="https://blog-static.cnblogs.com/files/miluluyo/milusidebar.js"></script>
<script>
milusidebar({
'names' : '麋鹿魯喲',/*你的博客園名吶*/
'notice' : '<b>溫馨提示</b><span><a href="https://github.com/miluluyo/cute-cnblogs" target="_black">cute-cnblogs</a> 樣式已開源</span><b style="margin-top: 3px;"><a style="font-size:10px" href="https://www.cnblogs.com/IsAlpaca/" target="_black">查看一期樣式</a></b>',/*裏面文字自己可以更改喔*/
'headerUrl' : 'https://images.cnblogs.com/cnblogs_com/miluluyo/1765646/o_200519075219notice5.png',/*這個是公告欄的背景圖啦，我覺得這個可愛，如果你有更好看的可以自行更改喔*/
'follow' : 'a1e76459-101d-47af-a8b6-08d523685c8c', /*還記的開始讓你複製follow括號里的內容嗎，對，就放到這裏就好啦*/
'sidebarInfo' : [[
{'icon':'#icon-github1','url':'https://github.com/miluluyo','title':'github'},
{'icon':'#icon-weixin','url':'','title':'微信','classname':'popper_weixin','click':false},
{'icon':'#icon-QQ','url':'http://wpa.qq.com/msgrd?v=3&uin=978761587&site=qq&menu=yes','title':'QQ'},
{'icon':'#icon-juejin','url':'https://juejin.im/user/5d18adce5188256e98090e33','title':'掘金'}
],[
{'icon':'#icon-weibobangding','url':'https://www.weibo.com/6001406082/profile?topnav=1&wvr=6','title':'微博'},
{'icon':'#icon-csdn','url':'https://blog.csdn.net/qq_39394518','title':'CSDN'},
{'icon':'#icon-bilibili','url':'https://space.bilibili.com/100007925','title':'bilibili'},
{'icon':'#icon-yuquemianlogo','url':'https://www.yuque.com/miluluyo','title':'語雀'}
]],/*這個模塊是個人信息內那些小圖標們，別忘記更改喔，具體參數，可以參考下面的表格喔*/
'signature':'靡不有初 鮮克有終',/*來一句你自己喜歡的句子吧*/
'popper_weixin':'<div class="popper_box"><p><b>很高興認識你鴨~ (づ｡◕ᴗᴗ◕｡)づ</b> </p><div class="popper_box_con"><div class="popper_box_con_li"><img src="https://images.cnblogs.com/cnblogs_com/miluluyo/1765646/o_200614064005qrcode.jpg" alt="">公眾號：麋鹿魯喲</div><div class="popper_box_con_li"><img src="https://images.cnblogs.com/cnblogs_com/miluluyo/1493340/t_wxh.jpg" alt="">微信號：s978761</div></div><p>（加我記得備註 博客園 喔）</div>',/*這裡是微信圖標的彈窗內容，可以自行更改內容喔*/
'portrait':'https://images.cnblogs.com/cnblogs_com/miluluyo/1765646/o_200515061851tx.jpg'
})/*這個是頭像圖片喔，你可以上傳到相冊里，然後F12獲取，或者使用博客園的那個鏈接也可以的撒~*/
</script>
參數說明
| 名稱 |
類型 |
默認值/實例 |
描述 |
| names |
字符串 |
‘麋鹿魯喲’ |
博客園名稱 |
| notice |
字符串 |
‘<b>溫馨提示</b><span><a href=”https://github.com/miluluyo/cute-cnblogs” target=”_black”>cute-cnblogs</a> 樣式已開源</span><b style=”margin-top: 3px;”><a style=”font-size:10px” href=”https://www.cnblogs.com/IsAlpaca/” target=”_black”>查看一期樣式</a></b>’ |
公告內容 |
| headerUrl |
字符串 |
‘https://images.cnblogs.com/cnblogs_com/miluluyo/1765646/o_200519075219notice5.png’ |
公告欄的背景圖 |
| follow |
字符串 |
‘a1e76459-101d-47af-a8b6-08d523685c8c’ |
複製follow括號里的內容，這是關注的那個碼 |
| sidebarInfo |
數組 |
[[ {‘icon’:’#icon-github1′,’url’:’https://github.com/miluluyo’,’title’:’github’}, {‘icon’:’#icon-weixin’,’url’:”,’title’:’微信’,’classname’:’popper_weixin’,’click’:false}, {‘icon’:’#icon-QQ’,’url’:’http://wpa.qq.com/msgrd?v=3&uin=978761587&site=qq&menu=yes’,’title’:’QQ’}, {‘icon’:’#icon-juejin’,’url’:’https://juejin.im/user/5d18adce5188256e98090e33′,’title’:’掘金’} ],[ {‘icon’:’#icon-weibobangding’,’url’:’https://www.weibo.com/6001406082/profile?topnav=1&wvr=6′,’title’:’微博’}, {‘icon’:’#icon-csdn’,’url’:’https://blog.csdn.net/qq_39394518′,’title’:’CSDN’}, {‘icon’:’#icon-bilibili’,’url’:’https://space.bilibili.com/100007925′,’title’:’bilibili’}, {‘icon’:’#icon-yuquemianlogo’,’url’:’https://www.yuque.com/miluluyo’,’title’:’語雀’} ]] |
個人信息內那些小圖標們
icon 圖標
url 跳轉鏈接
title 提示名字
classname 要添加的class名
click 是否允許點擊跳轉
本框架有擴展的icon，文件在 github 中的 icon 文件夾內，可以下載去查看 |
| signature |
字符串 |
‘靡不有初 鮮克有終’ |
個人信息簽名 （寫一句喜歡的話吧） |
| popper_weixin |
字符串 |
‘< div class=”popper_box”>< p>< b>很高興認識你鴨~ (づ｡◕ᴗᴗ◕｡)づ< /b> < /p>< div class=”popper_box_con”>< div class=”popper_box_con_li”>< img src=”https://images.cnblogs.com/cnblogs_com/miluluyo/1765646/o_200614064005qrcode.jpg” alt=””>公眾號：麋鹿魯喲< /div>< div class=”popper_box_con_li”>< img src=”https://images.cnblogs.com/cnblogs_com/miluluyo/1493340/t_wxh.jpg” alt=””>微信號：s978761< /div>< /div>< p>（加我記得備註 博客園 喔）< /div>’ |
微信焦點彈窗，內容可自行更改，可以放一些公眾號啊啥的~ |
| portrait |
字符串 |
‘https://images.cnblogs.com/cnblogs_com/miluluyo/1765646/o_200515061851tx.jpg’ |
頭像圖片路徑 |
頁首Html代碼
<div id="set_btn_box">
<div class="set_btn fly_top fadeIn animated">
<svg class="icon" aria-hidden="true"><use xlink:href="#icon-zhiding"></use></svg>
</div>
<div class="set_btn article_icon_btn catalogue_btn">
<svg class="icon" aria-hidden="true" style="color:#97A1A7"><use xlink:href="#icon-dagang"></use></svg>
</div>
<div class="set_btn article_icon_btn comment">
<a href="#comment_form_container"><svg class="icon" aria-hidden="true" style="color:#97A1A7"><use xlink:href="#icon-linedesign-01"></use></svg></a>
</div>
<div class="set_btn skin_btn">
<svg class="icon" aria-hidden="true" style="color:#97A1A7"><use xlink:href="#icon-pifu"></use></svg>
</div>
<div class="set_btn gratuity">
<svg class="icon" aria-hidden="true" style="color:#97A1A7"><use xlink:href="#icon-dashang"></use></svg>
</div>
<div class="set_btn article_icon_btn artice_recommend">
<svg class="icon" aria-hidden="true" style="color:#97A1A7"><use xlink:href="#icon-tuijian2"></use></svg>
</div>
<canvas id="thumsCanvas" width="200" height="400" style="width:100px;height:200px"></canvas>
<div class="set_btn catalogue">
<svg class="icon" aria-hidden="true" style="color:#97A1A7"><use xlink:href="#icon-cebianlan-"></use></svg>
</div>
</div>
<script src='https://blog-static.cnblogs.com/files/miluluyo/canvas2.js'></script>
<!--
<link href="//files.cnblogs.com/files/linianhui/lnh.cnblogs.css" rel="stylesheet"/>-->
頁腳Html代碼
<style id="ceshicss">
@media (max-width: 767px){
#set_btn_box {width: 100vw;left: 0;right: 0;bottom: 0;background: hsla(0,0%,100%,.6);height: 49px;display: flex;justify-content: space-between;align-items: center;padding: 12px 40px;border-top: 1px solid #e8e8e8;box-sizing: border-box;}
.set_btn {margin-top: 0;}
.set_btn.fly_top.fadeIn.animated {position: absolute;right: 10px;bottom: 60px;}
.container{bottom:50px}}
#mainContent{width:90%}
</style>
<link href="https://blog-static.cnblogs.com/files/miluluyo/tippy.min.css" rel="stylesheet">
<script src="https://unpkg.com/@popperjs/core@2.4.2/dist/umd/popper.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/miluluyo/tippy.js"></script>
<link rel='stylesheet' href='https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css'>
<script src="https://at.alicdn.com/t/font_1825850_klax1ao4o6.js"></script>
<script src="https://blog-static.cnblogs.com/files/miluluyo/three.min.js"></script>
<script src='https://blog-static.cnblogs.com/files/miluluyo/star.js'></script>
<link rel="stylesheet" href="https://blog-static.cnblogs.com/files/miluluyo/OwO.min.css" />
<script src="https://blog-static.cnblogs.com/files/miluluyo/OwO2.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/miluluyo/cute-cnblogs2.js"></script>
<script src="https://blog-static.cnblogs.com/files/miluluyo/monitoring2.js"></script>
<script>
miluframe({
Youself:'https://www.cnblogs.com/miluluyo/', /*個人的博客園鏈接*/
/*博客園導航信息*/
custom:[{
name:'首頁',
link:'https://www.cnblogs.com/miluluyo/',
istarget:false
},{
name:'聯繫',
link:'https://msg.cnblogs.com/send/%E9%BA%8B%E9%B9%BF%E9%B2%81%E5%93%9F',
istarget:true
},{
name:'技能樹',
link:'https://miluluyo.github.io/',
istarget:true
},{
name:'留言板',
link:'https://www.cnblogs.com/miluluyo/p/11578505.html',
istarget:false
},{
name:'相冊',
link:'https://www.cnblogs.com/miluluyo/gallery.html',
istarget:false
},{
name:'友鏈',
link:'https://www.cnblogs.com/miluluyo/p/11633791.html',
istarget:false
},{
name:'維護',
link:'https://www.cnblogs.com/miluluyo/p/12092009.html',
istarget:false
},{
name:'投喂',
link:'https://www.cnblogs.com/miluluyo/p/gratuity.html',
istarget:false
},{
name:'管理',
link:'https://i.cnblogs.com/',
istarget:true
}],
/*向別人展示自己的友鏈信息*/
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"
}],
/*友鏈表格頭信息，這個可以忽略*/
details:[{
field: 'name',
literal: '昵稱',
},{
field: 'introduction',
literal: '標語',
},{
field: 'url',
literal: '鏈接地址',
},{
field: 'headurl',
literal: '頭像地址',
}],
/*瀏覽器頂部小圖標*/
logoimg:'https://images.cnblogs.com/cnblogs_com/miluluyo/1765646/o_200519070633f12.png',
/*文章頁面標題前的圖標，此處圖標有擴展，下面會提到圖標*/
cuteicon:['icon-caomei','icon-boluo','icon-huolongguo','icon-chengzi','icon-hamigua','icon-lizhi','icon-mangguo','icon-liulian','icon-lizi','icon-lanmei','icon-longyan','icon-shanzhu','icon-pingguo','icon-mihoutao','icon-niuyouguo','icon-xigua','icon-putao','icon-xiangjiao','icon-ningmeng','icon-yingtao','icon-taozi','icon-shiliu','icon-ximei','icon-shizi'],
/*讚賞，若true則显示此按鈕，false則不显示*/
isGratuity:true,
/*讚賞按鈕焦點显示讚賞內容，內容可自行更改*/
gratuity:'<div class="popper_box"><p><b>要請我喝奶茶嗎 (づ｡◕ᴗᴗ◕｡)づ</b> </p><div class="popper_box_con"><div class="popper_box_con_li"><img src="https://images.cnblogs.com/cnblogs_com/miluluyo/1765646/o_200521053817wx.png" alt="">微信掃碼</div><div class="popper_box_con_li"><img src="https://images.cnblogs.com/cnblogs_com/miluluyo/1765646/o_200521053827zfb.png" >支付寶掃碼</div></div><p><b>留下一句你覺得很勵志與美的話給我吧~</b> <b><a href="https://www.cnblogs.com/miluluyo/p/12930946.html">GO</a></b></div>'
})
</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/miluluyo/mouse-click.js"></script>
<!-- 以下內容是否添加你隨意 -->
<script>
/*在文章頁面添加古詩詞*/
$("#navigator").after('<div class="poem-wrap"><div class="poem-border poem-left"></div><div class="poem-border poem-right"></div><h1>念兩句詩</h1><div id="poem_sentence"></div><div id="poem_info"></div></div>')
</script>
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
<script type="text/javascript">
jinrishici.load(function(result) {
var sentence = document.querySelector("#poem_sentence")
var info = document.querySelector("#poem_info")
sentence.innerHTML = result.data.content
info.innerHTML = '【' + result.data.origin.dynasty + '】' + result.data.origin.author + '《' + result.data.origin.title + '》'
});
</script>
<script type="text/javascript">
/* 鼠標特效，我覺得太花哨了就註釋了，喜歡的自己打開註釋就可以 */
/*var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var a = new Array("去活出你自己。","今天的好計劃勝過明天的完美計劃。","不要輕言放棄，否則對不起自己。","緊要關頭不放棄，絕望就會變成希望。","如果不能改變結果，那就完善過程。","好好活就是干有意義的事，有意義的事就是好好活！","你真正是誰並不重要，重要的是你的所做所為。","你不想為你的信仰冒一下險嗎?難道想等你老了，再後悔莫及嗎?","有些鳥兒是關不住的，它的每一根羽毛都閃耀着自由的光輝。","決定我們成為什麼樣人的，不是我們的能力，而是我們的選擇。","掉在水裡你不會淹死，呆在水裡你才會淹死，你只有游，不停的往前游。","有些路，只能一個人走。","希望你眼眸有星辰，心中有山海。","從此以夢為馬，不負韶華。","人的成就和差異決定於其業餘時間。","佛不要你皈依，佛要你歡喜。","ダーリンのこと 大好きだよ","小貓在午睡時，地球在轉。","我，混世大魔王，申請做你的小熊軟糖。","決定好啦，要暗暗努力。","吶，做人呢最緊要開心。","好想邀請你一起去雲朵上打呼嚕呀。","永遠年輕，永遠熱淚盈眶。","我生來平庸，也生來驕傲。","我走得很慢，但我從不後退。","人間不正經生活手冊。","我是可愛的小姑娘，你是可愛。","數學里，有個溫柔霸道的詞，有且僅有。","吧唧一口，吃掉難過。","你頭髮亂了哦。","健康可愛，沒有眼袋。","日月星辰之外，你是第四種難得。","你是否成為了了不起的成年人？","大家都是第一次做人。","何事喧嘩？！","人間有味是清歡。","你笑起來真像好天氣。","風填詞半句，雪斟酒一壺。","除了自渡，他人愛莫能助。","昨日種種，皆成今我。","一夢入混沌 明月撞星辰","保持獨立 適當擁有","謝謝你出現 這一生我很喜歡","做自己就好了 我會喜歡你的","太嚴肅的話，是沒辦法在人間尋歡作樂的","願你餘生可隨遇而安，步步慢。","黃瓜在於拍，人生在於嗨","奇變偶不變，符號看象限。","從來如此，便對么？","今天我這兒的太陽，正好適合曬鈣 你呢","未來可期，萬事勝意。","星光不問趕路人 時光不負有心人","我當然不會試圖摘月，我要月亮奔我而來","女生要修鍊成的五樣東西： 揚在臉上的自信，長在心底的善良， 融進血里的骨氣，刻進命里的堅強，深到骨子里的教養","燕去燕歸，滄海桑田。縱此生不見，平安惟願","我想認識你 趁風不注意","我一直想從你的窗子里看月亮","長大應該是變溫柔，對全世界都溫柔。","別在深夜做任何決定","山中何事，松花釀酒，春水煎茶。","桃李春風一杯酒，江湖夜雨十年燈。","欲買桂花同載酒，終不似，少年游。");
var le = Math.ceil(Math.random()*a.length);
var $i = $("<span></span>").text(a[le]);/*a[a_idx]*/
/*a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
2000,
function() {
$i.remove();
});
});
});*/
</script>
<!--音樂，只在PC端寬度>1000px時显示-->
<link rel="stylesheet" href="https://blog-static.cnblogs.com/files/miluluyo/APlayer.min.css">
<div id="player" class="aplayer aplayer-withlist aplayer-fixed" data-id="3116636104" 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/miluluyo/APlayer.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/miluluyo/Meting.min.js"></script>
<!--貓，只在PC端显示，移動端不加載了，因為會卡頓頁面-->
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
var mobile_flag = isMobile();
if(mobile_flag){
//console.info("移動端")
}else{
//console.info("PC端")
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>
<script>
/*記錄訪問數據，我用了兩個，一個是這個在 https://clustrmaps.com/ 網站，另一個是 https://www.51.la/ 這個網站*/
/*
第一種：https://clustrmaps.com/
註冊賬號，添加自己博客園的鏈接，選擇自定義Customize,
選擇 Image based (basic version for websites that don't support javascript)，調整到你喜歡的樣式，然後複製
：這個我插入在了側邊欄的最底部，把生成的代碼粘貼到append內，這就完事了
*/
$('#sideBarMain').append('')
/*
第二種：https://www.51.la/
註冊賬號，點控制台，添加統計ID，統計圖標显示我是不显示的
這個目前插入的js好像報錯，我的是很早之前生成的，還能用，因此還是推薦用第一種吧
別的地方也有這種很多統計訪問數據的，可以自己找找看呢
*/
</script>
參數說明
| 名稱 |
類型 |
默認值/實例 |
描述 |
| Youself |
字符串 |
https://www.cnblogs.com/miluluyo/ |
個人博客園首鏈接 |
| custom |
數組 |
[{ name:’首頁’, link:’https://www.cnblogs.com/miluluyo/’, istarget:false },{ name:’聯繫’, link:’https://msg.cnblogs.com/send/%E9%BA%8B%E9%B9%BF%E9%B2%81%E5%93%9F’, istarget:true },{ name:’技能樹’, link:’https://miluluyo.github.io/’, istarget:true },{ name:’留言板’, link:’https://www.cnblogs.com/miluluyo/p/11578505.html’, istarget:false },{ name:’相冊’, link:’https://www.cnblogs.com/miluluyo/gallery.html’, istarget:false },{ name:’友鏈’, link:’https://www.cnblogs.com/miluluyo/p/11633791.html’, istarget:false },{ name:’維護’, link:’https://www.cnblogs.com/miluluyo/p/12092009.html’, istarget:false },{ name:’投喂’, link:’https://www.cnblogs.com/miluluyo/p/gratuity.html’, istarget:false },{ name:’管理’, link:’https://i.cnblogs.com/’, istarget:true }] |
導航信息
name 導航名
link 導航鏈接
istarget true跳轉到新頁面上，false當前頁面打開 |
| 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 |
數組 |
[{ field: ‘name’, literal: ‘昵稱’, },{ field: ‘introduction’, literal: ‘標語’, },{ field: ‘url’, literal: ‘鏈接地址’, },{ field: ‘headurl’, literal: ‘頭像地址’, }] |
友鏈表格頭信息，這項可以忽略掉 |
| logoimg |
字符串 |
‘https://images.cnblogs.com/cnblogs_com/miluluyo/1765646/o_200519070633f12.png’ |
瀏覽器頂部小圖標 |
| cuteicon |
數組 |
[‘icon-caomei’,’icon-boluo’,’icon-huolongguo’,’icon-chengzi’,’icon-hamigua’,’icon-lizhi’,’icon-mangguo’,’icon-liulian’,’icon-lizi’,’icon-lanmei’,’icon-longyan’,’icon-shanzhu’,’icon-pingguo’,’icon-mihoutao’,’icon-niuyouguo’,’icon-xigua’,’icon-putao’,’icon-xiangjiao’,’icon-ningmeng’,’icon-yingtao’,’icon-taozi’,’icon-shiliu’,’icon-ximei’,’icon-shizi’] |
文章頁面標題前的圖標，此處圖標我只放入了一些水果的icon，不過可以自己引入文件進行修改名字添加自己想加的，本框架有擴展的icon，文件在 github 中的 icon 文件夾內，可以下載去查看 |
| gratuity |
字符串 |
‘<div class=”popper_box”><p><b>要請我喝奶茶嗎 (づ｡◕ᴗᴗ◕｡)づ</b> </p><div class=”popper_box_con”><div class=”popper_box_con_li”><img src=”https://images.cnblogs.com/cnblogs_com/miluluyo/1765646/o_200521053817wx.png” alt=””>微信掃碼</div><div class=”popper_box_con_li”><img src=”https://images.cnblogs.com/cnblogs_com/miluluyo/1765646/o_200521053827zfb.png” >支付寶掃碼</div></div><p><b>留下一句你覺得很勵志與美的話給我吧~</b> <b><a href=”https://www.cnblogs.com/miluluyo/p/12930946.html”>GO</a></b></div>’ |
讚賞按鈕焦點显示讚賞內容，內容可自行更改 |
| isGratuity |
布爾值 |
true |
默認true，若true則显示此按鈕，false則不显示 |
更換頂部背景圖
當前框架使用了一張圖片，也可以自己進行更換成隨機圖片API
在css樣式中
#blogTitle{background:url(https://images.cnblogs.com/cnblogs_com/miluluyo/1764887/o_20051406472117.jpg) center center / cover no-repeat #222;overflow:hidden;width:100%;height:40vh;max-height:40vh;box-shadow:0 1px 2px rgba(150,150,150,.7); /*搜索這個 更換 background: url() 里的鏈接 即可*/
最後
更多內容請查看 cute-cnblogs 自定義番外篇
（PS：可以使用番外篇里的隨機圖片API喔~）
請吃糖
如果您喜歡這裏，感覺對你有幫助，並且有多餘的軟妹幣的話，不妨投喂一顆糖喔~
<(▰˘◡˘▰)> 謝謝老闆~
微信掃碼
支付寶掃碼
讚賞的時候，留下一句你覺得很勵志與美的話給我吧~
（也可以加一個博客園給我喔，會添加在名字的旁邊喔~點擊可以跳轉~ 例如：去瞧瞧都有誰讚賞了
為了響應大家的號召，方便大家技術交流，之前建立了一個微信群，如果大家有需要可以掃碼（或者搜我微信號：s978761）加我好友，我邀請你加入～本群是一個純交流學習工作的群，不準發布廣告、營銷相關的信息！對了，加我記得備註上：博客園+名稱 加群 喔~
微信號：s978761
公眾號：麋鹿魯喲
本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理
【其他文章推薦】
※為什麼 USB CONNECTOR 是電子產業重要的元件?
※網頁設計一頭霧水該從何著手呢? 台北網頁設計公司幫您輕鬆架站!
※台北網頁設計公司全省服務真心推薦
※想知道最厲害的網頁設計公司“嚨底家”!
※推薦評價好的iphone維修中心
※聚甘新
