碼上快樂

相關內容    簡體    繁體

cute-cnblogs 自定義博客園樣式美化二期來啦~

本文轉載自   查看原文   2020-06-18 13:31   9268    博客園樣式/ 博客園/ 樣式美化/ 自定義博客園主題樣式/ 博客園主題/ 博客園樣式美化/ 自定義博客園/ 主題樣式

cute-cnblogs 自定義博客園樣式美化二期來啦~

說明

cute-cnblogs 可愛的博客園樣式美化、自定義博客園樣式 二期樣式已經編寫完畢了，如果說 一期樣式 給人的感覺是簡潔清爽的小嬰兒的話，那么 二期樣式 就是一個有自己小個性（花樣）的小朋友了~

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

（PS：有什么問題也可以留言到 github issues 中喔~）

好了，讓我們擼起袖子開始更換二期樣式吧~

博客示例

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

介紹

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

  • 📖 本樣式以簡約可愛為核心，美化博客園的顯示效果，增加自定義導航；
  • 🍧 基於博客園主題“Custom”進行的樣式修改；
  • 🍓 閱讀目錄導航；
  • 🌴 支持響應式；

Image text

功能

一期功能

  • 🍎 頂部背景點點動效隨鼠標而動
  • 🍊 導航欄自定義
  • 🍒 頁面詩意詩句模塊
  • 🍌 看板娘-貓(ฅ´ω`ฅ) （自行決定是否添加，因為這個有些影響加載速度）
  • 🍑 音樂-網易雲 （自行決定是否添加）
  • 🍍 上吊的貓（PS：回到頂部）（已用其余按鈕代替此功能）
  • 🍉 底部跳動的魚<・)))><<
  • 🍇 點擊頁面跳動的小豆子及可愛的文字（自行決定是否添加可愛文字的點擊）
  • 🍋 評論增加OωO聊天表情
  • 🍅 頁面不同的導航背景及人物背景

二期增加功能

  • 🍐 側邊欄顯示
  • 🌱 側邊欄公告欄及個人信息顯示
  • 📚 閱讀目錄（標題 h1 > h2 > h3 寫了三級目錄）
  • ☁️ 主題皮膚切換（淺白、暗黑、閱讀）
  • 🎍 仿主播點贊功能點擊推薦
  • ❄️ 贊賞模塊功能

模版選定

博客皮膚選定： 博客園 Custom 標准模板（與一期不同喔）

使用方法

基本操作

請按照順序進行操作喔~

  • 首先記得申請JS權限

  • 其次博客皮膚選擇 Custom

  • 在此需要獲取數據（不然點擊頭像的關注會失敗）
    找一個沒有登陸的瀏覽器訪問自己的博客園，F12彈出窗口，找到 +加關注，復制follow括號里的內容，暫且先存在一個地方
    Image text

  • 勾選禁用模板默認CSS


  • 創建一個新隨筆（這里使用選項中的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;">&nbsp;</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;">如需友鏈，請添加微信（d978761）告知，格式如下</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> &nbsp;樣式已開源</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="">微信號：d978761</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="">微信號：d978761< /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>&nbsp;&nbsp;<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喔~）

請吃糖

如果您喜歡這里，感覺對你有幫助，並且有多余的軟妹幣的話，不妨投喂一顆糖喔~

<(▰˘◡˘▰)> 謝謝老板~

微信掃碼

支付寶掃碼

贊賞的時候，留下一句你覺得很勵志與美的話給我吧~

（也可以加一個博客園給我喔，會添加在名字的旁邊喔~點擊可以跳轉~ 例如：去瞧瞧都有誰贊賞了

為了響應大家的號召，方便大家技術交流，之前建立了一個微信群，如果大家有需要可以關注公眾號，發送“加群”即可～本群是一個純交流學習工作的群，不准發布廣告、營銷相關的信息！

公眾號：麋鹿魯喲

看完了點個推薦唄 ღゝ◡╹)ノ♡

更新

2020.12.11

博客園更新后頂部出現的條目以及頂部廣告，用下方代碼可以隱藏

div#top_nav { display:none } 
div#bannerbar {display: none;}

2021.03.10

博客園移動端頁面上划時偶爾抖動問題已修復

https://blog-static.cnblogs.com/files/miluluyo/cute-cnblogs2.js 鏈接更改為 https://blog-static.cnblogs.com/files/miluluyo/cute-cnblogs3.js

音樂自動播放

<script> 
let ref = setInterval(function(){
    isaplay();
},2000);
function isaplay(){
    if($(".aplayer-play").length == 1){
        $(".aplayer-play").click()
        clearInterval(ref);
    }
}
</script>


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 cute-cnblogs 番外篇-自定義博客園樣式美化 cute-cnblogs 一期樣式原文 博客園自定義樣式主題 -- cnblogs theme 可愛的博客園樣式美化、自定義博客園主題樣式 自定義css樣式美化博客園 cnBlogs博客園主題樣式美化 博客園自定義樣式 如何自定義博客園樣式 關於博客園自定義樣式 自定義博客園樣式
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM