記一次部落格園美化記錄
- 2020 年 3 月 7 日
- 筆記
目錄
這次疫情窩在家學了點前端的CSS和JQuery,正好來搗鼓一下部落格園~
已添加的功能:
- 人體時鐘動畫
- 小老鼠時鐘動畫
- B站風格UI
- 標籤雲
- 評論加頭像
- 右下角懸浮按鈕(置頂,關注等)
- 右上角github橫幅
- 背景動畫
- 點擊背景彈出價值觀文字隨機顏色動畫
- 打賞
- copy添加版權聲明文字
有待考慮的功能:
性能以及訪問速度等體驗方面的考慮,主要看個人喜好
- 部落格精靈
- 網易雲音樂
- 標籤雲
- 背景動畫
改了一些可供參考的程式碼
複製加版權©文字聲明,特殊處理了一下,如果是本人則可以開綠燈(拷貝無需添加版權聲明)
// 複製加版權說明 是本人則不會加類似文字 <script language="javascript" type="text/javascript"> jQuery(document).on('copy', function(e) { var selected = window.getSelection(); var copyFooter = '<br>==============<br>著作權歸作者所有。<br>' + '商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。<br>' + '作者：CoderWGB<br> 源地址：' + document.location.href + '<br>來源：部落格園cnblogs<br>© 版權聲明：本文為部落客原創文章，轉載請附上博文鏈接！'; //判斷是否有md的訪問按鈕來判斷是否本人 因為別人的md 你是看不見的 (目前沒想到別的辦法) var md = $(".postDesc > a:nth-last-child(3)").text() == "MD"; if(md){ copyFooter = ""; } var copyHolder = $('<div>', { html: selected + copyFooter, style: { position: 'absolute', left: '-99999px' } }); $('body').append(copyHolder); selected.selectAllChildren(copyHolder[0]); window.setTimeout(function() { copyHolder.remove(); }, 0); }); </script>生成目錄那段程式碼有bug 被我注釋掉了,改用markdown的TOC功能更為精準
源文件 cnblog.js
function GenerateContentList() { var nodes = $('#cnblogs_post_body :header') var content = '<a name="_labelTop"></a>' // content += '<div id="navCategory">' // content += '<blockquote><p style="font-size: 18pt; color:#a2b4ba"><b>目錄</b></p>' // content += '<div>' // for (var i = 0; i < nodes.length; i++) { // var item = '' // var originTitle = $(nodes[i]).text() // var resolvedTitle = resolveTitle(originTitle) // if (nodes[i].tagName === 'H1') { // item = '<a style="font-size:18px" href="#' + resolvedTitle + '">' + $(nodes[i]).text() + '</a><br>' // } else if (nodes[i].tagName === 'H2') { // item = '<a style="font-size:16px" href="#' + resolvedTitle + '">  ' + $(nodes[i]).text() + '</a><br>' // } // content += item // } // content += '</blockquote></div>' var len = $('#cnblogs_post_body').length if ($('#cnblogs_post_body').length != 0) { $($('#cnblogs_post_body')[0]).prepend(content) } $($('#cnblogs_post_body')[len - 1]) .append('<div id='signature'><p>作者：<a href='https://www.cnblogs.com/wgb1234/'>CoderWGB</a></br>歡迎任何形式的轉載，但請務必註明出處。</br>限於本人水平，如果文章和程式碼有表述不當之處，還請不吝賜教。</p></div>') } 添加點擊背景彈出社會主義核心價值觀文字動畫
// 隨機文字動畫 <script type="text/javascript"> jQuery(document).ready(function() { //注意：這裡是用的隨筆分類做例子，你自己可以根據你自己情況任意設定。 $(".catListPostCategory>ul").wrap("<div class='wrap' ></div>").parent().css({ 'width': '245px', 'height': '496px' }); var options = { "range": [-200, 300], "gravity": -10, "xPos": 0.5, "yPos": 0.5, "gravityVector": [0, 0, 1], "interval": 100, "hoverGravityFactor": 0 }; jQuery("div.wrap").starfieldTagCloud(options); }); </script> <script language="javascript" type="text/javascript"> //單擊顯示隨機文字 var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function(e) { //rgb顏色隨機 var r = Math.floor(Math.random()*256); var g = Math.floor(Math.random()*256); var b = Math.floor(Math.random()*256); var color = 'rgb'+'('+r+','+g+','+b+')'; var a = new Array("富強","❤","民主","❤", "文明","❤", "和諧","❤", "自由","❤", "平等","❤", "公正","❤", "法治","❤" ,"愛國","❤", "敬業","❤", "誠信","❤", "友善","❤"); var $i = $("<span/>").text(a[a_idx]); a_idx = (a_idx+1)%a.length; var x = e.pageX, y = e.pageY; $i.css({ "z-index":5, "top": y - 20, "left": x, "position": "absolute", "font-weight": "bold", "color": color }); $("body").append($i); $i.animate({ "top": y - 180, "opacity": 0 }, 3000, function() { $i.remove(); }); }); }); </script>打賞這個是開源項目,只換了圖片和js路徑沒啥改動
// tctip 支付讚賞/打賞 <script type="text/javascript" src="//files.cnblogs.com/files/wgb1234/pay.min.js"></script> <script> new tctip({ top: '20%', button: { id: 1, type: 'zanzhu', }, list: [ { type: 'alipay', qrImg: 'https://files.cnblogs.com/files/wgb1234/zhifubao.bmp' //替換成自己的支付寶付款碼 }, { type: 'wechat', qrImg: 'https://files.cnblogs.com/files/wgb1234/wx.bmp' //替換成自己的微信付款碼 } ] }).init() </script>DIY的效果還是挺不錯的,畢竟很多前輩們都把坑填好了,基本上開箱即用~
參考部落格
詳談如何訂製自己的部落格園皮膚
美化部落格園 添加網易雲音樂及生成文章目錄
前端小白也能快速學會的部落格園部落格美化全攻略
部落格園加上部落格精靈
