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

作者:西瓜程序猿

主页传送门:juejin.cn/user/119893...

前言

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

默认主题:

设置自定义主题:

一、提前准备

1.1-申请自定义JS权限

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

设置网址:i.cnblogs.com/settings

(2)然后填写申请理由,申请理由样例(一般都会通过):

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

1.2-修改博客皮肤

(1)将博客皮肤设置为【SimpleMemory】。

博客主题:SimpleMemory

1.3-关闭代码行号

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

不然会出现这种效果:

正常效果如下:

1.4-禁用默认CSS

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

1.5-侧边栏自定义配置

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

配置地址:i.cnblogs.com/preference

二、设置主题

主题名称:Cnblogs-Theme-SimpleMemory

开源地址:github.com/BNDong/Cnbl...

官方文档:bndong.github.io/Cnblogs-The...

2.1-设置CSS

在【页面定制CSS代码】这一栏中,可以按照下面步骤下载代码复制到输入框中。[西瓜程序猿]使用的是【v2.0.1】版本。

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

版本地址:github.com/BNDong/Cnbl...

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

2.2-设置JS

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

官方文档:bndong.github.io/Cnblogs-The...

西瓜程序猿\]的例子代码: ```bash ``` ## 四、最终效果 > 在线效果:[www.cnblogs.com/kimiliucn/](https://link.juejin.cn?target=https%3A%2F%2Fwww.cnblogs.com%2Fkimiliucn%2F "https://www.cnblogs.com/kimiliucn/") 首页: ![image.png](https://file.jishuzhan.net/article/1697869954512064514/3f84d94afc6b49a8bb6154873f3a3300.webp) 文章列表: ![image.png](https://file.jishuzhan.net/article/1697869954512064514/861ebb54f6d54973af23b59dc0319d59.webp) 文章详情: ![image.png](https://file.jishuzhan.net/article/1697869954512064514/f7842462bcfe41d3b78c4aa8697191a3.webp) > 版权声明:本文为原创文章,版权归 \[西瓜程序猿\] 所有,转载请注明出处,有任何疑问请私信咨询。 > > 原文链接:[juejin.cn/post/727368...](https://juejin.cn/post/7273685848604327951 "https://juejin.cn/post/7273685848604327951")

相关推荐
UI罐头13 小时前
后台设计指南:系统架构、交互规范与工具实战全流程解析
ui·设计·设计工具
Goboy1 天前
打造梦幻又实用的 Mermaid 马卡龙渐变风主题 —— 技术博主必备视觉指南
程序员·产品·设计
小飞悟4 天前
别再只会用 px 了!移动端适配必须掌握的 CSS 单位
前端·css·设计
MiyueFE8 天前
14 个逻辑驱动的 UI 设计技巧,助您改善任何界面
前端·设计
小飞悟8 天前
🎯 什么是模块化?CommonJS 和 ES6 Modules 到底有什么区别?小白也能看懂
前端·javascript·设计
不骞8 天前
4. 智能合约中的存储方式
设计
昕冉20 天前
Axure9中继器内部实现批量操作
设计模式·axure·设计
昕冉20 天前
Axure9中继器多数据实现分页
设计模式·axure·设计
昕冉20 天前
Axure9中继器实现数据排序
设计模式·axure·设计
二闹23 天前
数据库优化实战:从“龟速”🐢到“起飞”✈️,我的踩坑与逆袭之路
数据库·性能优化·设计