作者：西瓜程序猿
主頁傳送門：https://www.cnblogs.com/kimiliucn
前言
寫博客也有一個月了，發(fā)現(xiàn)博客園自帶的主題都不太好看，然后搜索了一下發(fā)現(xiàn)這款主題【Cnblogs-Theme-SimpleMemory】界面還挺好看的，也是開源的。那[西瓜程序猿]就以這個主題來介紹一下如何在博客園中進(jìn)行配置，跟著一起來操作吧！
默認(rèn)主題：
設(shè)置自定義主題：
一、提前準(zhǔn)備
1.1-申請自定義JS權(quán)限
（1）可以點擊下面網(wǎng)址進(jìn)入到后臺配置頁面，找到JS權(quán)限，點擊【申請JS權(quán)限】。
設(shè)置網(wǎng)址：https://i.cnblogs.com/settings
（2）然后填寫申請理由，申請理由樣例（一般都會通過）：
尊敬的管理員：您好，我需要自定義主題，麻煩通過下我的JS權(quán)限申請，謝謝！
1.2-修改博客皮膚
（1）將博客皮膚設(shè)置為【SimpleMemory】。
博客主題：SimpleMemory
1.3-關(guān)閉代碼行號
在代碼高亮這一欄，將【顯示行號】取消勾選。
不然會出現(xiàn)這種效果：
正常效果如下：
1.4-禁用默認(rèn)CSS
在頁面定制CSS代碼這一欄，將【禁用模板默認(rèn)CSS】勾選上。
1.5-側(cè)邊欄自定義配置
可以根據(jù)自行需要去配置博客側(cè)邊欄要顯示哪些內(nèi)容。首先點擊 個人信息——>設(shè)置——>博客設(shè)置——>選項 ，也可以直接打開下面地址訪問。
配置地址：https://i.cnblogs.com/preference
二、設(shè)置主題
主題名稱：Cnblogs-Theme-SimpleMemory
開源地址：https://github.com/BNDong/Cnblogs-Theme-SimpleMemory
官方文檔：https://bndong.github.io/Cnblogs-Theme-SimpleMemory/v2.1/dist/
2.1-設(shè)置CSS
在【頁面定制CSS代碼】這一欄中，下載鏈接中的CSS代碼后復(fù)制到輸入框中。[西瓜程序猿]使用的是【v2.0.1】版本。
可以訪問下載（如果失效了，請聯(lián)系我）。
下載地址（編碼：NegsuJog）：https://yongteng.lanzoub.com/iyTzp17bbwkd
密碼：akj4
文件截圖：
不同版本會有一定的差異，大家可以根據(jù)自己需要進(jìn)行選擇，如果需要別的版本，可以通過下面地址選擇不同的版本下載。
版本地址：https://github.com/BNDong/Cnblogs-Theme-SimpleMemory/tags
下載完成后，然后進(jìn)行解壓，然后找到dist文件夾中的【simpleMemory.css】樣式文件，將文件里的內(nèi)容復(fù)制到文本框就可以了。
2.2-設(shè)置JS
在【博客側(cè)邊欄公告】這一欄中，可以直接將下面JS代碼復(fù)制到輸入框中。大家也可以根據(jù)文檔配置自己需要的內(nèi)容。
官方文檔：https://bndong.github.io/Cnblogs-Theme-SimpleMemory/v2.1/dist/guide/install.html
[西瓜程序猿]的例子代碼：
<input id="linkListFlg" type="hidden" />
<script type="text/javascript">
window.cnblogsConfig = {
info: {
// 用戶名
name: '西瓜程序猿',
// 入園時間，年-月-日。（入園時間查看方法：鼠標(biāo)停留園齡時間上，會顯示入園時間）
startDate: '',
// 用戶頭像
avatar: 'https://pic.cnblogs.com/avatar/3240243/20230727231823.png',
// 瀏覽器 URL 圖標(biāo)
blogIcon: 'https://pic.cnblogs.com/avatar/3240243/20230727231823.png',
},
banner: {
home: {
title: "如果說人生是自我編寫的程序，那么青春就是這意味深長的代碼. ", // 主頁banner上的標(biāo)語，顯示自定義文字，默認(rèn)為空，自動獲取一句。String []
titleSource: 'one',
// 隨機(jī)背景圖 String []
background: [
"https://files-cdn.cnblogs.com/files/IIYMGF/17.bmp",
"https://files-cdn.cnblogs.com/files/IIYMGF/19.bmp",
"https://files-cdn.cnblogs.com/files/IIYMGF/20.bmp",
"https://files-cdn.cnblogs.com/files/IIYMGF/23.bmp",
"https://files-cdn.cnblogs.com/files/IIYMGF/25.bmp",
],
},
// 文章頁頭圖
article: {
background: [
"https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v2.0.4/dist/images//6d995b207bae4175ff28.webp",
"https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v2.0.4/dist/images//e58d9f9d0eee6d9b9add.webp",
],
},
},
// 列表數(shù)據(jù) ['導(dǎo)航名稱', '鏈接', 'icon']
sidebar: {
navList: [
['GetHub', 'https://github.com/kimiliucn', 'icon-github'],
['Gitee', 'https://gitee.com/kimiliucn', 'icon-github'],
],
//infoBackground: 'https://', //側(cè)邊欄個人信息背景圖片Url。
customList: {
"博客集合": { // 標(biāo)題
"data": [ // 列表數(shù)據(jù) ['列表', '鏈接']
['CSDN', 'https://blog.csdn.net/2301_79251107'],
['博客園', 'https://www.cnblogs.com/kimiliucn'],
['51CTO', 'https://blog.51cto.com/kimiliucn'],
['掘金', 'https://juejin.cn/user/1198936417906716'],
],
"icon": "icon-brush_fill" // 配置圖標(biāo)，參考文檔：定制化/字體圖標(biāo)庫
},
"特惠服務(wù)器": { // 標(biāo)題
"data": [ // 列表數(shù)據(jù) ['列表', '鏈接']
['阿里云', 'https://www.aliyun.com/minisite/goods?userCode=tkq1f513'],
['騰訊云', 'https://cloud.tencent.com/act/cps/redirect?redirect=2446&cps_key=704a9f5e93b95edff263fd4534793918&from=console'],
],
"icon": "icon-brush_fill" // 配置圖標(biāo)，參考文檔：定制化/字體圖標(biāo)庫
},
},
},
// 頁面加載loading
loading: {
rebound: {
tension: 16,
friction: 6,
},
spinner: {
id: 'spinner',
radius: 90,
sides: 3,
depth: 20,
colors: {
background: '#f0f0f0',
stroke: '#272633',
base: null,
child: '#272633',
},
alwaysForward: true, // When false the spring will reverse normally.
restAt: 0.5, // A number from 0.1 to 0.9 || null for full rotation
renderBase: false,
}
},
// Object 頂部進(jìn)度條
progressBar: {
id: 'top-progress-bar', // 請勿修改該值
color: '#77b6ff',
height: '2px',
duration: 0.2,
},
// 頁面標(biāo)簽
title: {
// String "(o?v?)ノ Hi" 失去焦點標(biāo)簽文字 當(dāng)頁面失去焦點，頁面title顯示的文字。
onblur: '(o?v?)ノ Hi',
// Number 500 失去焦點變化延時 當(dāng)頁面失去焦點，頁面title變化的延時時間，單位毫秒。
// 該配置值為 -1 時，當(dāng)頁面失去焦點，頁面title顯示的文字不會變化。
onblurTime: 500,
// String "(*′?｀*) 歡迎回來！" 獲取焦點標(biāo)簽文字 當(dāng)頁面獲取焦點，頁面title顯示的文字；顯示后，延時恢復(fù)原title。
focus: '(*′?｀*) 歡迎回來！',
// Number 1000 獲取焦點變化延時 當(dāng)頁面獲取焦點，頁面title變化的延時時間，單位毫秒。
// 該配置值為 -1 時，當(dāng)頁面獲取焦點，頁面title顯示的文字不會變化。
focusTime: 1000,
},
// 頁腳
footer: {
// Number 2 頁腳樣式 1 2 分別代表了不同的樣式
style: 1,
// 頁腳標(biāo)語
text: {
// String "" 頁腳標(biāo)語左側(cè)文字。
left: '天天熬夜',
// String "" 頁腳標(biāo)語右側(cè)文字。
right: '遲早猝死',
// Object "" 字體圖標(biāo)
iconFont: {
// 圖標(biāo)名稱
icon: "icon-xl",
// 圖標(biāo)顏色
color: "red",
// 圖標(biāo)大小
fontSize: "16px"
}
},
},
// 友情鏈接
links: {
// Array [] 頁腳友鏈
footer: [
["西瓜程序猿", 'https://www.cnblogs.com/kimiliucn'],
],
// 友鏈頁
page: [
// {
// name: '西瓜程序猿', // 昵稱
// introduction: 'IT技術(shù)類博客', // 簡介
// avatar: 'https://pic.cnblogs.com/avatar/3240243/20230727231823.png', // 頭像
// url: 'https://www.cnblogs.com/kimiliucn/' // 友鏈地址
// },
],
},
// 右下角菜單
rtMenu: {
// url "" 二維碼圖片Url。
qrCode: '',
// 打賞二維碼
reward: {
// 支付寶收款碼
alipay: '',
// 微信收款碼
wechatpay: ''
},
},
// Object 日/夜間模式 日/夜間模式配置。頁面使用日/夜間模式優(yōu)先級：用戶設(shè)置 > 自動切換 > 默認(rèn)。
switchDayNight: {
enable: true, // 是否開啟日/夜間模式切換按鈕
auto: { // 自動切換相關(guān)配置
enable: false, // 開啟自動切換
dayHour: 5, // 日間模式開始時間，整數(shù)型，24小時制
nightHour: 19 // 夜間模式開始時間，整數(shù)型，24小時制
}
},
// 動效 版本 v2.0.3 及之后，所有動效默認(rèn)配置為關(guān)閉。
animate: {
// Object 主頁banner動效配置。
homeBanner: {
enable: true, // 是否開啟動效
options: {
radius: 15,
density: 0.2,
color: 'rgba(255,255,255, .2)', // 顏色設(shè)置，“random” 為隨機(jī)顏色
clearOffset: 0.3
}
},
// Object 文章頁banner動效配置。
articleBanner: {
enable: true,
},
// Object 背景動效
background: {
enable: true,
options: {
colorSaturation: "60%",
colorBrightness: "50%",
colorAlpha: 0.5,
colorCycleSpeed: 5,
verticalPosition: "random",
horizontalSpeed: 200,
ribbonCount: 3,
strokeSize: 0,
parallaxAmount: -0.2,
animateSections: true
}
},
},
// 代碼
code: {
// String "" 渲染類型/** 所有可配置項
// cnblogs: 使用博客園默認(rèn)代碼高亮樣式。
// hljs: 使用 Highlighting 插件渲染代碼高亮樣式。
// */
type: 'hljs',
// Object 只有 code.type 為 hljs 時，此配置才生效。
options: {
hljs: {
/** 所有可配置項
default、a11y-dark、a11y-light、agate、an-old-hope、androidstudio、arduino-light、arta、ascetic
、atelier-cave-dark、atelier-cave-light、atelier-dune-dark、atelier-dune-light、atelier-estuary-dark
、atelier-estuary-light、atelier-forest-dark、atelier-forest-light、atelier-heath-dark
、atelier-heath-light、atelier-lakeside-dark、atelier-lakeside-light、atelier-plateau-dark、atelier-plateau-light
、atelier-savanna-dark、atelier-savanna-light、atelier-seaside-dark、atelier-seaside-light
、atelier-sulphurpool-dark、atelier-sulphurpool-light、atom-one-dark-reasonable、atom-one-dark、atom-one-light
、brown-paper、codepen-embed、color-brewer、darcula、dark、darkula、docco、dracula、far
、foundation、github-gist、github、gml、googlecode、grayscale、gruvbox-dark、gruvbox-light、hopscotch
、hybrid、idea、ir-black、isbl-editor-dark、isbl-editor-light、kimbie.dark、kimbie.light、lightfair
、magula、mono-blue、monokai-sublime、monokai、nord、obsidian、ocean、paraiso-dark、paraiso-light、pojoaque
、purebasic、qtcreator_dark、qtcreator_light、railscasts、rainbow、routeros、school-book、shades-of-purple
、solarized-dark、solarized-light、sunburst、tomorrow-night-blue、tomorrow-night-bright
、tomorrow-night-eighties、tomorrow-night、tomorrow、vs、vs2015、xcode、xt256、zenburn
*/
// 代碼高亮主題。
theme: 'atom-one-dark-reasonable',
// 語言識別范圍，不配置默認(rèn)不限制，支持語言 > https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md
languages: ['Bash', 'CSS', 'Dockerfile', 'Go', 'HTML', 'XML', 'HTTP']
},
// String "" 代碼框高度限制 限制高度。例如：70vh、70%
maxHeight: '70vh',
// Boolean false 代碼行號渲染
// 是否渲染代碼行號，如開啟會在代碼框左側(cè)增加行號顯示，默認(rèn)不開啟。 不與博客園行號渲染兼容，如果博客園添加代碼時勾選顯示行號并同時開啟此配置，會出現(xiàn)雙行號的現(xiàn)象。大家自己權(quán)衡使用此配置。
line: true,
// Boolean true 風(fēng)格代碼框 mac風(fēng)格代碼框樣式。
macStyle: true,
},
},
// 文章后綴
/*articleSuffix: {
// url "" 文章后綴左側(cè)圖片，不配置使用用戶頭像配置 info.avatar，用戶頭像沒配置使用主題默認(rèn)頭像。
imgUrl: '',
// String "" 關(guān)于博主，支持HTML代碼，不配置使用默認(rèn)。
aboutHtml: "I am a good person",
// String "" 版權(quán)聲明 版權(quán)聲明，支持HTML代碼，不配置使用默認(rèn)。
copyrightHtml: "版權(quán)...",
// String "" 聲援博主，支持HTML代碼，不配置使用默認(rèn)。
supportHtml: "聲援...",
},*/
// Array [] 控制臺輸出
consoleList: [
['QQ', '1934152034'],
],
// String "" 網(wǎng)站統(tǒng)計
//cnzz: "123456",
}
</script>
<script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v2.0.4/dist/simpleMemory.js" defer></script>
<script src="https://files.cnblogs.com/files/blogs/798944/cnblogs-nav.js"></script>
四、最終效果
在線效果：https://www.cnblogs.com/kimiliucn/
首頁：
文章列表：
文章詳情：
文章來源：http://www.zghlxwxcb.cn/news/detail-688007.html
原文鏈接：https://www.cnblogs.com/kimiliucn/p/17672499.html文章來源地址http://www.zghlxwxcb.cn/news/detail-688007.html
到了這里，關(guān)于博客園如何設(shè)置自定義主題？的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
