cute-cnblogs 自定義部落格園樣式美化二期來啦~
阿新 • • 發佈：2020-06-18
# cute-cnblogs 自定義部落格園樣式美化二期來啦~
> **說明**
>
> cute-cnblogs 可愛的部落格園樣式美化、自定義部落格園樣式 二期樣式已經編寫完畢了，如果說 [一期樣式](https://www.cnblogs.com/IsAlpaca/) 給人的感覺是簡潔清爽的小嬰兒的話，那麼 [二期樣式](https://www.cnblogs.com/miluluyo/) 就是一個有自己小個性（花樣）的小朋友了~
>
> 與一期一樣，需要檔案的可以來 [github](https://github.com/miluluyo/cute-cnblogs/) ，喜歡我寫的樣式可以幫我點個 star 喔 ღゝ◡╹)ノ♡
>
> （PS：有什麼問題也可以留言到 [github issues](https://github.com/miluluyo/cute-cnblogs/issues) 中喔~）
>
> 好了，讓我們擼起袖子開始更換二期樣式吧~
## 部落格示例
ღゝ◡╹)ノ♡ [麋鹿魯喲的部落格園](https://www.cnblogs.com/miluluyo/)
## 介紹
可愛的部落格園樣式美化、自定義部落格園樣式 ღゝ◡╹)ノ♡
* :book: 本樣式以簡約可愛為核心，美化部落格園的顯示效果，增加自定義導航；
* :shaved_ice: 基於部落格園主題“SimpleMemory”進行的樣式修改；
* :strawberry: 閱讀目錄導航；
* :palm_tree: 支援響應式；
## 功能
### 一期功能
* :apple: 頂部背景點點動效隨滑鼠而動
* :tangerine: 導航欄自定義
* :cherries: 頁面詩意詩句模組
* :banana: 看板娘-貓(ฅ´ω`ฅ) （自行決定是否新增，因為這個有些影響載入速度）
* :peach: 音樂-網易雲 （自行決定是否新增）
* :pineapple: ~~上吊的貓（PS：回到頂部）~~（已用其餘按鈕代替此功能）
* :watermelon: 底部跳動的魚<・)))><<
* :grapes: 點選頁面跳動的小豆子~~及可愛的文字~~（自行決定是否新增可愛文字的點選）
* :lemon: 評論增加OωO聊天表情
* :tomato: 頁面不同的導航背景及人物背景
### 二期增加功能 * :pear: 側邊欄顯示 * :seedling: 側邊欄公告欄及個人資訊顯示 * :books: 閱讀目錄（標題 h1 > h2 > h3 寫了三級目錄） * :cloud: 主題面板切換（淺白、暗黑、閱讀） * :bamboo: 仿主播點贊功能點選推薦 * :snowflake: 讚賞模組功能 ## 模版選定 部落格面板選定： 部落格園 **Custom** 標準模板（與一期不同喔） ## 使用方法 ### 基本操作 請按照順序進行操作喔~ * 首先記得申請JS許可權 * 其次部落格面板選擇 **Custom** * 在此需要獲取資料（不然點選頭像的關注會失敗） 找一個沒有登陸的瀏覽器訪問自己的部落格園，F12彈出視窗，找到 +加關注，複製follow括號裡的內容，暫且先存在一個地方  * 勾選禁用模板預設CSS
部落格名稱：麋鹿魯喲
```
* 最後分別複製以下區域程式碼，並根據引數更改資料（PS：路徑可進行更改也可不更改，我覺得更改後速度會快一點，自行down檔案上傳到部落格園檔案中，並更改引入路徑，檔案都在 [github](https://github.com/miluluyo/cute-cnblogs/) 中，喜歡記得給我個star喔~） ### 頁面定製CSS程式碼 複製 https://blog-static.cnblogs.com/files/miluluyo/cute-cnblogs2.css 的檔案內容放到 頁面定製CSS程式碼 區域 ### 部落格側邊欄公告 ``` html
### 頁首Html程式碼
``` html
```
**頁尾Html程式碼**
```html
```
#### 引數說明
### 更換頂部背景圖
當前框架使用了一張圖片，也可以自己進行更換成隨機圖片API
在css樣式中
```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 自定義番外篇](https://www.cnblogs.com/miluluyo/p/setites.html)
（PS：可以使用番外篇裡的隨機圖片API喔~）
### 請吃糖
>
>
### 二期增加功能 * :pear: 側邊欄顯示 * :seedling: 側邊欄公告欄及個人資訊顯示 * :books: 閱讀目錄（標題 h1 > h2 > h3 寫了三級目錄） * :cloud: 主題面板切換（淺白、暗黑、閱讀） * :bamboo: 仿主播點贊功能點選推薦 * :snowflake: 讚賞模組功能 ## 模版選定 部落格面板選定： 部落格園 **Custom** 標準模板（與一期不同喔） ## 使用方法 ### 基本操作 請按照順序進行操作喔~ * 首先記得申請JS許可權 * 其次部落格面板選擇 **Custom** * 在此需要獲取資料（不然點選頭像的關注會失敗） 找一個沒有登陸的瀏覽器訪問自己的部落格園，F12彈出視窗，找到 +加關注，複製follow括號裡的內容，暫且先存在一個地方  * 勾選禁用模板預設CSS
歡迎來到我的友鏈小屋
展示本站所有友情站點，排列不分先後，均勻打亂演算法隨機渲染的喔！
友鏈資訊
部落格名稱：麋鹿魯喲
部落格網址：https://www.cnblogs.com/miluluyo/
部落格頭像：https://pic.cnblogs.com/avatar/1273193/20190806180831.png
部落格介紹：大道至簡，知易行難。
join us
如需友鏈，請新增微信（s978761）告知，格式如下
| 欄位 | 字義 |
|---|
* 最後分別複製以下區域程式碼，並根據引數更改資料（PS：路徑可進行更改也可不更改，我覺得更改後速度會快一點，自行down檔案上傳到部落格園檔案中，並更改引入路徑，檔案都在 [github](https://github.com/miluluyo/cute-cnblogs/) 中，喜歡記得給我個star喔~） ### 頁面定製CSS程式碼 複製 https://blog-static.cnblogs.com/files/miluluyo/cute-cnblogs2.css 的檔案內容放到 頁面定製CSS程式碼 區域 ### 部落格側邊欄公告 ``` html
| 名稱 | 型別 | 預設值/例項 | 描述 |
|---|---|---|---|
| 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' | 頭像圖片路徑 |
| 名稱 | 型別 | 預設值/例項 | 描述 |
|---|---|---|---|
| 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則不顯示 |
如果您喜歡這裡，感覺對你有幫助，並且有多餘的軟妹幣的話，不妨投喂一顆糖喔~
<(▰˘◡˘▰)> 謝謝老闆~
微信掃碼
支付寶掃碼
讚賞的時候，留下一句你覺得很勵志與美的話給我吧~
（也可以加一個部落格園給我喔，會新增在名字的旁邊喔~點選可以跳轉~ 例如：去瞧瞧都有誰讚賞了
> > 為了響應大家的號召，方便大家技術交流，之前建立了一個微信群，如果大家有需要可以掃碼（或者搜我微訊號：s978761）加我好友，我邀請你加入～本群是一個純交流學習工作的群，不準釋出廣告、營銷相關的資訊！對了，加我記得備註上：部落格園+名稱 加群 喔~ > > >
>微訊號：s978761
> >
>公眾號：麋鹿魯喲
> > > **看完了點個推薦唄** ღゝ◡╹)ノ♡