基於部落格園SimpleMemory樣式的博皮設定
阿新 • • 發佈：2020-04-17
前言:
本部落格的博皮樣式設計者是BNDong大神，在此表示衷心的感謝！為了讓更多人的部落格園更加的美觀大方，本人特此參考設計者BNDong關於部落格樣式的文章，寫了這更加通俗易懂的文章，讓更多喜歡這部落格樣式的人，可以應用此部落格樣式。
使用前準備
本主題需要部落格側邊欄公告的JS許可權，沒有的請先申請許可權。
一、選項設定（一定要勾選公告，其他可根據需要自行設定）
部落格設定
一、部落格面板：SimpleMemory
二、設定頁面定製的CSS程式碼：將base.min.css 程式碼拷貝至頁面定製CSS程式碼文字框處。
效果如下：
三、禁用模板預設CSS
選中頁面定製CSS程式碼文字框下面的禁用模板預設CSS。
四、設定部落格側邊公告欄
1 <script type="text/javascript">
2 window.cnblogsConfig = {
3 GhVersions : 'v1.2.9', // 版本
4 blogUser : "userName", // 使用者名稱
5 blogAvatar : "https://xxxx.png", // 使用者頭像
6 blogStartDate : "2016-11-17", // 入園時間，年-月-日。入園時間檢視方法：滑鼠停留園齡時間上，會顯示入園時間
7 }
8 </script>
9 <script src="https://cdn.jsdelivr.net/gh/BNDong/[email protected]/src/script/simpleMemory.min.js"></script>本人設計參考如下：
1 <script type="text/javascript">
2 window.cnblogsConfig = {
3 GhVersions : 'v1.2.9', // 版本
4 blogUser : "染血的茉莉", // 使用者名稱
5 blogAvatar : "https://pic.cnblogs.com/avatar/2003787/20200413114911.png", // 使用者頭像
6 blogStartDate : "2020-04-10", // 入園時間，年-月-日。入園時間檢視方法：滑鼠停留園齡時間上，會顯示入園時間
7 }
8 </script>
9 <script src="https://cdn.jsdelivr.net/gh/BNDong/[email protected]/src/script/simpleMemory.min.js"></script關於如何設定使用者頭像。
-
法一：至於如何設定自己喜歡的使用者頭像，我們可以把喜歡的圖片以指定的格式上傳到我們自己的部落格園後臺的相簿或檔案中，他會自動生成一個url地址，單擊右鍵複製url地址即可。
-
法二：當然是爬取其他人的圖片了，如果發現其他人的部落格或網站中有你喜歡的圖片，我們只需要選中單擊右鍵檢查就可以找到它對應的URL地址啦。（之後的主頁圖片設定，和文章頁面的圖片我的都是這樣來的。。。）
示例：
五、配置完成儲存即可成功應用博皮！
到這裡博皮的基本設定已經完成了，如果你滿意，則採用預設設定則下面的定製化設定可以不用看了，如果你還需要其他某些功能或修改其他預設設定，則請繼續往下閱讀。
定製化設定
網站配置
webpageTitleOnblur失去焦點標籤文字（當頁面失去焦點，頁面title顯示的文字。）
- 型別：
String - 預設值：
(oﾟvﾟ)ノ Hi
1 window.cnblogsConfig = {
2 webpageTitleOnblur: '(oﾟvﾟ)ノ Hi', //如要修改即把引號內容修改即可
3 }
webpageTitleFocus獲取焦點標籤文字（當頁面獲取焦點，頁面title顯示的文字）
- 型別：
String - 預設值：
(*´∇｀*) 歡迎回來！
window.cnblogsConfig = {
webpageTitleFocus: '(*´∇｀*) 歡迎回來！', //如要修改即把引號內容修改即可
}
webpageIcon網站圖示
- 型別：
Url - 預設值：
""
1 window.cnblogsConfig = {
2 webpageIcon: "https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/blog_logo.webp",//url地址可自行設定
3 }
switchDayNight:日/夜間模式
- 型別：
Object - 預設值：
1 {
2 enable: true, // 是否開啟日/夜間模式切換按鈕
3 auto: { // 自動切換相關配置
4 enable: false, // 開啟自動切換
5 dayHour: 5, // 日間模式開始時間，整數型，24小時制
6 nightHour: 19 // 夜間模式開始時間，整數型，24小時制
7 }
8 }
日/夜間模式配置。頁面使用日/夜間模式優先順序：使用者設定 > 自動切換 > 預設。
1 window.cnblogsConfig = {
2 switchDayNight: {
3 enable: true,
4 auto: {
5 enable: true //若配置為true則自動切換
6 }
7 },
8 }
或者採用預設則可進行手動切換：
選單配置
menuNavList:選單導航
- 型別：
Array - 預設值：
[]
自定義選單導航，顯示在預設導航下方。
1 window.cnblogsConfig = {
2 menuNavList: [ // 列表資料 ['導航名稱', '連結']
3 ['我的部落格1', 'https://www.cnblogs.com/bndong/'],
4 ['我的部落格2', 'https://www.cnblogs.com/bndong/'],
5 ],
6 }
menuUserInfoBgImg:選單個人資訊背景圖
- 型別：
Url - 預設值：
""
選單個人資訊背景圖片設定。
1 window.cnblogsConfig = {
2 menuUserInfoBgImg: 'https://xxx,jpg',
3 }
主頁設定
homeTopImg:主頁圖片
- 型別：
Array - 預設值：
1 [ 2 "https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/home_top_bg.webp" 3 ]
主頁圖片Url，推薦尺寸>= 1920*1080，支援多張，每次重新整理隨機設定一張。
window.cnblogsConfig = {
homeTopImg: [
"https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/home_top_bg.webp", //url地址可以自行新增
"https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/home_top_bg.webp"
],
}
homeBannerText：主頁上的標語
- 型別：
String - 預設值：
""
主頁banner上的標語，設定此選項會固定顯示文字，預設為空，自動獲取一句。
1 window.cnblogsConfig = {
2 homeBannerText: "好好學習，天天向上！",
3 }
homeBannerTextType：標語獲取源
- 型別：
String - 預設值：
"jinrishici"
主頁 banner 上的標語獲取源，預設為 jinrishici 每次重新整理隨機獲取一句古詩詞。
1 window.cnblogsConfig = {
2 homeBannerTextType: "one", //one為每日一句話，若採用homBannerText自己設定，則顯示自己設定標語優先顯示
3 }
4
5 /** 所有可配置項
6 jinrishici：每次重新整理隨機獲取一句古詩詞。
7 one：每日獲取一句話
8 */
文章頁設定
essayTopImg:文章頁圖片
- 型別：
Array - 預設值：
1 [ 2 "https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/nothome_top_bg.webp" 3 ]
文章頁banner圖片Url，推薦尺寸>= 1920*600，支援多張，每次重新整理隨機設定一張。
1 window.cnblogsConfig = {
2 essayTopImg: [
3 "https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/nothome_top_bg.webp",//url地址可自行新增
4 "https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/nothome_top_bg.webp"
5 ],
6 }
essaySuffix:文章字尾配置
- 型別：
Object - 預設值：
1 {
2 codeImgUrl : '', // 左側圖片設定，不配置使用 window.cnblogsConfig.blogAvatar
3 aboutHtml : '', // 關於博主，不配置使用預設
4 copyrightHtml: '', // 版權宣告，不配置使用預設
5 supportHtml : '', // 聲援博主，不配置使用預設
6 }
文章字尾配置，不配置使用預設。
1 window.cnblogsConfig = {
2 essaySuffix: {
3 aboutHtml: "I am a good person",
4 },
5 }
reward：打賞設定
- 型別：
Object - 預設值：
1 {
2 enable: false, // 是否開啟打賞功能
3 wechatpay: '', // 微信支付二維碼圖片URL
4 alipay: '' // 支付寶支付二維碼圖片URL
5 }
文章打賞按鈕，顯示在頁面右下角。
window.cnblogsConfig = {
reward: {
enable: true,
wechatpay: '//xxxx.png',
},
}
程式碼相關設定
essayCodeHighlightingType:部落格程式碼樣式
- 型別：
String - 預設值：
"cnblogs"
1 window.cnblogsConfig = {
2 essayCodeHighlightingType: "cnblogs",//預設配置
3 }
使用部落格園程式碼高亮樣式，介意載入速度的可以使用預設配置。或使用 highlightjs 外掛渲染程式碼高亮。
1 window.cnblogsConfig = {
2 essayCodeHighlightingType: "highlightjs",
3 }
highlightjs 程式碼高亮主題：demo
1 window.cnblogsConfig = {
2 essayCodeHighlighting: "a11y-dark",
3 }
4
5 /** 所有可配置項
6 default、a11y-dark、a11y-light、agate、an-old-hope、androidstudio、arduino-light、arta、ascetic
7 、atelier-cave-dark、atelier-cave-light、atelier-dune-dark、atelier-dune-light、atelier-estuary-dark
8 、atelier-estuary-light、atelier-forest-dark、atelier-forest-light、atelier-heath-dark
9 、atelier-heath-light、atelier-lakeside-dark、atelier-lakeside-light、atelier-plateau-dark、atelier-plateau-light
10 、atelier-savanna-dark、atelier-savanna-light、atelier-seaside-dark、atelier-seaside-light
11 、atelier-sulphurpool-dark、atelier-sulphurpool-light、atom-one-dark-reasonable、atom-one-dark、atom-one-light
12 、brown-paper、codepen-embed、color-brewer、darcula、dark、darkula、docco、dracula、far
13 、foundation、github-gist、github、gml、googlecode、grayscale、gruvbox-dark、gruvbox-light、hopscotch
14 、hybrid、idea、ir-black、isbl-editor-dark、isbl-editor-light、kimbie.dark、kimbie.light、lightfair
15 、magula、mono-blue、monokai-sublime、monokai、nord、obsidian、ocean、paraiso-dark、paraiso-light、pojoaque
16 、purebasic、qtcreator_dark、qtcreator_light、railscasts、rainbow、routeros、school-book、shades-of-purple
17 、solarized-dark、solarized-light、sunburst、tomorrow-night-blue、tomorrow-night-bright
18 、tomorrow-night-eighties、tomorrow-night、tomorrow、vs、vs2015、xcode、xt256、zenburn
19 */
頁尾配置
footerStyle：頁尾樣式
- 型別：
Int - 預設值：
2
footerStyle: 1
footerStyle: 2
可配置（例）：
1 window.cnblogsConfig = {
2 footerStyle: 1, //1 or 2
3 }
bottomBlogroll：友情連結。
- 型別：
Array - 預設值：
[]
1 window.cnblogsConfig = {
2 bottomBlogroll: [ // 友情連結，[[連結名,連結]....]
3 ["申請坑位", 'https://msg.cnblogs.com/send/BNDong'],
4 ["申請坑位", 'https://msg.cnblogs.com/send/BNDong'],
5 ["申請坑位", 'https://msg.cnblogs.com/send/BNDong'],
6 ["申請坑位", 'https://msg.cnblogs.com/send/BNDong'],
7 ["申請坑位", 'https://msg.cnblogs.com/send/BNDong'],
8 ],
9 }
bottomText：頁尾標語
- 型別：
Object - 預設值：
1 {
2 icon: "❤️",
3 left : "",
4 right: ""
5 }
可配置（例）：
1 window.cnblogsConfig = {
2 bottomText: {
3 left : "好好學習",
4 right: "天天向上",
5 },
6 }
轉載文章：
關於轉載文章在Html原始碼中加入如下程式碼來指定文章作者和來源：
1 <input id="articleAuthor" type="hidden" value="作者" /> //新增作者 2 <input id="articleSource" type="hidden" value="來源URL" /> //新增文章的url地址
注意：是新增到Html原始碼中然後更新儲存，部落格園文章的富文字編輯器和 Markdown 都有新增Html程式碼的方式！
富文字編輯器：
Markdown編輯器：直接拷貝到文字即可。
網站統計
可註冊友盟賬號然後新增站點（例如）
新增你部落格的站點然後自動生成程式碼，複製到你頁尾HTML裡面
滑鼠特效
下載mouse.js程式碼，上傳至你部落格後臺的檔案之中，然後修改下面的src連結在複製到你頁尾HTML裡面。
1 <!-- 滑鼠點選特效 --> 2 <script type="text/javascript" src="https://files.cnblogs.com/files/Liu928011/mouse.js"></script>
本人部落格側邊公告欄的定製化程式碼效果展示
1 <script type="text/javascript">
2 window.cnblogsConfig = {
3 GhVersions : 'v1.2.9', // 版本
4 blogUser : "染血的茉莉", // 使用者名稱
5 blogAvatar : "https://pic.cnblogs.com/avatar/2003787/20200413114911.png", // 使用者頭像
6 blogStartDate : "2020-04-10", // 入園時間，年-月-日。
7 menuUserInfoBgImg: 'https://files.dbnuo.com/wallpaper/menu_bg.gif', //選單個人資訊背景圖片設定。
8
9 //自定義選單導航
10 menuNavList: [
11 ['CSDN', 'https://blog.csdn.net/qq_42552533'],
12
13 ],
14
15 webpageTitleOnblur: 'Hi', //失去焦點標籤文字
16 webpageTitleFocus: '歡迎回來！', //獲取焦點標籤文字
17 webpageIcon: "https://pic.cnblogs.com/avatar/2003787/20200413114911.png", //網站圖示
18
19 //打賞設定
20 reward: {
21 enable: true,
22 wechatpay: 'https://files-cdn.cnblogs.com/files/Liu928011/WeChat.bmp',
23 },
24
25 homeTopImg: [
26 "https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/home_top_bg.webp",
27 " https://files.dbnuo.com/wallpaper/wallhaven-dgojvj.webp",
28 " https://files.dbnuo.com/wallpaper/wallhaven-13mk9v.webp",
29 " https://files.dbnuo.com/wallpaper/wallhaven-ne7lr8.webp",
30 "https://files.dbnuo.com/wallpaper/wallhaven-oxvkxp.webp",
31 "https://files.dbnuo.com/wallpaper/wallhaven-k9p8l6.webp",
32 "https://files.dbnuo.com/wallpaper/wallhaven-96w8e8.webp",
33 "https://files.dbnuo.com/wallpaper/wallhaven-47ldq9.webp",
34 "https://files.dbnuo.com/wallpaper/wallhaven-83w372.webp"
35 ],
36 essayTopImg: [
37 "https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/nothome_top_bg.webp",
38 "https://files.dbnuo.com/wallpaper/wallhaven-4d38m0.webp",
39 "https://files.dbnuo.com/wallpaper/wallhaven-wyomo6.webp",
40 "https://files.dbnuo.com/wallpaper/wallhaven-j5y525.webp",
41 "https://files.dbnuo.com/wallpaper/wallhaven-r2yjg1.webp",
42 "https://files.dbnuo.com/wallpaper/wallhaven-ym56zg.webp",
43 "https://files.dbnuo.com/wallpaper/wallhaven-yml8wd.webp",
44 "https://files.dbnuo.com/wallpaper/wallhaven-wymo2p.webp"
45 ],
46
47 //日、夜間模式配置。頁面使用日、夜間模式優先順序：使用者設定 > 自動切換 > 預設。
48 switchDayNight: {
49 enable: true,
50 auto: {
51 enable: false // 開啟自動切換
52 }
53 },
54
55 //homeBannerText: "路漫漫其修遠兮，吾將上下而求索", //主頁banner上的標語，設定此選項會固定顯示文字，預設為空，自動獲取一句
56 homeBannerTextType: "one",//每日獲取一句話
57
58 essayCodeHighlightingType: "highlightjs", //使用 highlightjs 外掛渲染程式碼高亮。
59 essayCodeHighlighting: "a11y-dark", //高亮的style
60
61 // ---- 頁尾配置 ----
62 bottomBlogroll: [ // 友情連結，[[連結名,連結]....]
63 ["百度", 'https://www.baidu.com'],
64 ["愛奇藝", 'https://www.youku.com/'],
65 ["豆瓣", 'https://www.douban.com/'],
66 ["B站", 'https://www.bilibili.com/'],
67 ["景德鎮陶瓷大學", 'http://www.jci.edu.cn/'],
68 ],
69
70 // 頁尾標語
71 bottomText: {
72 left : "路漫漫其修遠兮", // 圖示左側文字
73 right: "吾將上下而求索" // 圖示右側文字
74 },
75
76 //文章字尾配置，不配置使用預設。
77 essaySuffix: {
78 aboutHtml: "程式設計小萌新一名，希望從今天開始慢慢提高，一步步走向技術的高峰！", // 關於博主，不配置使用預設
79 copyrightHtml: '', // 版權宣告，不配置使用預設
80 supportHtml : '', // 聲援博主，不配置使用預設
81 },
82
83 }
84 </script>
85 <script src="https://cdn.jsdelivr.net/gh/BNDong/[email protected]/src/script/simpleMemory.min.js"></script>
補充說明
目前本部落格樣式為BNDong大神的最高版本，功能最為完善，但還有一些我覺不需要改的設定並沒有在此列出來，比如版本切換，字型、播放器等等，如有需要的可關注他本人的部落格樣式文章說明。最後，如果本篇文章對你有幫助，希望大家能夠多多支援哈，幫忙點亮右下角的小紅心。