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: 支援響應式;
![Image text](https://images.cnblogs.com/cnblogs_com/miluluyo/1765646/o_200618044407bg2.png)
## 功能
### 一期功能
* :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括號裡的內容,暫且先存在一個地方 ![Image text](https://images.cnblogs.com/cnblogs_com/miluluyo/1765646/o_200617014038info.jpg) * 勾選禁用模板預設CSS
* 建立一個新隨筆(這裡使用選項中的TinyMCE(推薦)來編寫的) —— “友鏈”;(注意,此處已與一期不同)
* 點選 “編輯 HTML 原始碼” 插入以下程式碼,修改自己的文字內容後,點選更新;
* 只勾選 高階選項中的 “釋出”、“允許評論”;
``` html
部落格名稱:麋鹿魯喲
```
* 最後分別複製以下區域程式碼,並根據引數更改資料(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括號裡的內容,暫且先存在一個地方 ![Image text](https://images.cnblogs.com/cnblogs_com/miluluyo/1765646/o_200617014038info.jpg) * 勾選禁用模板預設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
> > >公眾號:麋鹿魯喲
> > > **看完了點個推薦唄** ღゝ◡╹)ノ♡