記一次部落格園美化記錄
阿新 • • 發佈:2020-03-07
[TOC]
> 這次疫情窩在家學了點前端的CSS和JQuery,正好來搗鼓一下部落格園~
## 已新增的功能:
* 人體時鐘動畫
* 小老鼠時鐘動畫
* B站風格UI
* 標籤雲
* 評論加頭像
* 右下角懸浮按鈕(置頂,關注等)
* 右上角github橫幅
* 背景動畫
* 點選背景彈出價值觀文字隨機顏色動畫
* 打賞
* copy新增版權宣告文字
## 有待考慮的功能:
> 效能以及訪問速度等體驗方面的考慮,主要看個人喜好
* 部落格精靈
* 網易雲音樂
* 標籤雲
* 背景動畫
## 改了一些可供參考的程式碼
### 複製加版權©文字宣告,特殊處理了一下,如果是本人則可以開綠燈(拷貝無需新增版權宣告)
```javascript
// 複製加版權說明 是本人則不會加類似文字
```
### 生成目錄那段程式碼有bug 被我註釋掉了,改用markdown的TOC功能更為精準
原始檔 [cnblog.js](https://files.cnblogs.com/files/wgb1234/cnblog.js)
```javascript
function GenerateContentList() {
var nodes = $('#cnblogs_post_body :header')
var content = ''
// content += ''
// content += ' 歡迎任何形式的轉載,但請務必註明出處。限於本人水平,如果文章和程式碼有表述不當之處,還請不吝賜教。')
}
```
### 新增點選背景彈出社會主義核心價值觀文字動畫
```javascript
// 隨機文字動畫
```
### 打賞這個是開源專案,只換了圖片和js路徑沒啥改動
```javascript
// tctip 支付讚賞/打賞
```
> DIY的效果還是挺不錯的,畢竟很多前輩們都把坑填好了,基本上開箱即用~
## 參考部落格
[詳談如何定製自己的部落格園面板](https://www.cnblogs.com/jingmoxukong/p/7826982.html)
[美化部落格園 新增網易雲音樂及生成文章目錄](https://www.cnblogs.com/cang12138/p/7381601.html)
[前端小白也能快速學會的部落格園部落格美化全攻略](https://juejin.im/post/5c74d695f265da2d943f6fd4)
[部落格園加上部落格精靈](https://www.cnblogs.com/flipped/p/499586
' var len = $('#cnblogs_post_body').length if ($('#cnblogs_post_body').length != 0) { $($('#cnblogs_post_body')[0]).prepend(content) } $($('#cnblogs_post_body')[len - 1]) .append('目錄
' // content += '' // 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 = '' + $(nodes[i]).text() + '
' // } else if (nodes[i].tagName === 'H2') { // item = ' ' + $(nodes[i]).text() + '
' // } // content += item // } // content += '
作者:CoderWGB