当前位置：首页 > article >正文

博客园如何设置自定义主题？

article 2025/9/11 21:53:30

前言

写博客也有一个月了，发现博客园自带的主题都不太好看，然后搜索了一下发现这款主题【Cnblogs-Theme-SimpleMemory】界面还挺好看的，也是开源的。那[西瓜程序猿]就以这个主题来介绍一下如何在博客园中进行配置，跟着一起来操作吧！

默认主题：

设置自定义主题：

一、提前准备

1.1-申请自定义JS权限

（1）可以点击下面网址进入到后台配置页面，找到JS权限，点击【申请JS权限】。

设置网址：用户中心 - 博客园

（2）然后填写申请理由，申请理由样例（一般都会通过）：

尊敬的管理员：您好，我需要自定义主题，麻烦通过下我的JS权限申请，谢谢！

1.2-修改博客皮肤

（1）将博客皮肤设置为【SimpleMemory】。

博客主题：SimpleMemory

1.3-关闭代码行号

在代码高亮这一栏，将【显示行号】取消勾选。

不然会出现这种效果：

正常效果如下：

1.4-禁用默认CSS

在页面定制CSS代码这一栏，将【禁用模板默认CSS】勾选上。

1.5-侧边栏自定义配置

可以根据自行需要去配置博客侧边栏要显示哪些内容。首先点击个人信息——>设置——>博客设置——>选项，也可以直接打开下面地址访问。

配置地址：用户中心 - 博客园

二、设置主题

主题名称：Cnblogs-Theme-SimpleMemory

开源地址：GitHub - BNDong/Cnblogs-Theme-SimpleMemory: 🍭　Cnblogs theme _ Basic theme : SimpleMemory

官方文档：SMemory | SMemory

2.1-设置CSS

在【页面定制CSS代码】这一栏中，下载链接中的CSS代码后复制到输入框中。[西瓜程序猿]使用的是【v2.0.1】版本。

可以访问下载（如果失效了，请联系我）。

下载地址（编码：NegsuJog）：https://yongteng.lanzoub.com/iyTzp17bbwkd
密码：akj4

文件截图：

不同版本会有一定的差异，大家可以根据自己需要进行选择，如果需要别的版本，可以通过下面地址选择不同的版本下载。

版本地址：Tags · BNDong/Cnblogs-Theme-SimpleMemory · GitHub

下载完成后，然后进行解压，然后找到dist文件夹中的【simpleMemory.css】样式文件，将文件里的内容复制到文本框就可以了。

2.2-设置JS

在【博客侧边栏公告】这一栏中，可以直接将下面JS代码复制到输入框中。大家也可以根据文档配置自己需要的内容。

官方文档：安装配置 | SMemory

[西瓜程序猿]的例子代码：

<input id="linkListFlg" type="hidden" />
<script type="text/javascript">
window.cnblogsConfig = {info: {// 用户名name: '西瓜程序猿',// 入园时间，年-月-日。（入园时间查看方法：鼠标停留园龄时间上，会显示入园时间）startDate: '',// 用户头像avatar: 'https://pic.cnblogs.com/avatar/3240243/20230727231823.png',// 浏览器 URL 图标blogIcon: 'https://pic.cnblogs.com/avatar/3240243/20230727231823.png',},banner: {home: {title: "如果说人生是自我编写的程序，那么青春就是这意味深长的代码. ",  // 主页banner上的标语，显示自定义文字，默认为空，自动获取一句。String []titleSource: 'one',// 随机背景图  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",],},},// 列表数据 ['导航名称', '链接', 'icon']sidebar: { navList: [['GetHub', 'https://github.com/kimiliucn', 'icon-github'],['Gitee', 'https://gitee.com/kimiliucn', 'icon-github'],],//infoBackground: 'https://',  //侧边栏个人信息背景图片Url。customList: {"博客集合": { // 标题"data": [ // 列表数据 ['列表', '链接']['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" // 配置图标，参考文档：定制化/字体图标库},"特惠服务器": { // 标题"data": [ // 列表数据 ['列表', '链接']['阿里云', '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" // 配置图标，参考文档：定制化/字体图标库},},},// 页面加载loadingloading: {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 rotationrenderBase: false,}},//  Object 顶部进度条progressBar: {id: 'top-progress-bar', // 请勿修改该值color: '#77b6ff',height: '2px',duration: 0.2,},// 页面标签title: {//  String "(oﾟvﾟ)ノ Hi" 失去焦点标签文字  当页面失去焦点，页面title显示的文字。onblur: '(oﾟvﾟ)ノ Hi',// Number 500 失去焦点变化延时   当页面失去焦点，页面title变化的延时时间，单位毫秒。// 该配置值为 -1 时，当页面失去焦点，页面title显示的文字不会变化。onblurTime: 500,// String "(*´∇｀*) 欢迎回来！" 获取焦点标签文字   当页面获取焦点，页面title显示的文字；显示后，延时恢复原title。focus: '(*´∇｀*) 欢迎回来！',// Number 1000 获取焦点变化延时   当页面获取焦点，页面title变化的延时时间，单位毫秒。// 该配置值为 -1 时，当页面获取焦点，页面title显示的文字不会变化。focusTime: 1000,},// 页脚footer: {// Number 2 页脚样式  1 2 分别代表了不同的样式style: 1,// 页脚标语text: {// String ""  页脚标语左侧文字。left: '天天熬夜',// String ""  页脚标语右侧文字。right: '迟早猝死',// Object ""  字体图标iconFont: {// 图标名称icon: "icon-xl",// 图标颜色color: "red",// 图标大小fontSize: "16px"}},},// 友情链接links: {// Array [] 页脚友链footer: [["西瓜程序猿", 'https://www.cnblogs.com/kimiliucn'],],// 友链页page: [// {//   name: '西瓜程序猿', // 昵称//   introduction: 'IT技术类博客', // 简介//   avatar: 'https://pic.cnblogs.com/avatar/3240243/20230727231823.png', // 头像//   url: 'https://www.cnblogs.com/kimiliucn/' // 友链地址// },],},// 右下角菜单rtMenu: {// url "" 二维码图片Url。qrCode: '',// 打赏二维码reward: {// 支付宝收款码alipay: '',// 微信收款码wechatpay: ''},},// Object 日/夜间模式   日/夜间模式配置。页面使用日/夜间模式优先级：用户设置 > 自动切换 > 默认。switchDayNight: {enable: true,       // 是否开启日/夜间模式切换按钮auto: {             // 自动切换相关配置enable: false,  // 开启自动切换dayHour: 5,     // 日间模式开始时间，整数型，24小时制nightHour: 19   // 夜间模式开始时间，整数型，24小时制}},// 动效  版本 v2.0.3 及之后，所有动效默认配置为关闭。animate: {// Object  主页banner动效配置。homeBanner: {enable: true, // 是否开启动效options: {radius: 15,density: 0.2,color: 'rgba(255,255,255, .2)', // 颜色设置，“random” 为随机颜色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: 使用博客园默认代码高亮样式。// 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',// 语言识别范围，不配置默认不限制，支持语言 > https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.mdlanguages: ['Bash', 'CSS', 'Dockerfile', 'Go', 'HTML', 'XML', 'HTTP']},// String "" 代码框高度限制  限制高度。例如：70vh、70%maxHeight: '70vh',// Boolean false  代码行号渲染// 是否渲染代码行号，如开启会在代码框左侧增加行号显示，默认不开启。 不与博客园行号渲染兼容，如果博客园添加代码时勾选显示行号并同时开启此配置，会出现双行号的现象。大家自己权衡使用此配置。line: true,// Boolean true 风格代码框   mac风格代码框样式。macStyle: true,},},// 文章后缀/*articleSuffix: {// url ""  文章后缀左侧图片，不配置使用用户头像配置 info.avatar，用户头像没配置使用主题默认头像。imgUrl: '',// String ""  关于博主，支持HTML代码，不配置使用默认。aboutHtml: "I am a good person",//  String "" 版权声明   版权声明，支持HTML代码，不配置使用默认。copyrightHtml: "版权...",//  String ""  声援博主，支持HTML代码，不配置使用默认。supportHtml: "声援...",},*///  Array [] 控制台输出consoleList: [['QQ', '1934152034'],],// String ""  网站统计//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>