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

作者:西瓜程序猿

主页传送门: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")

相关推荐
昭昭日月明9 天前
mac 效率工具:Raycast 的扩展开发
前端·mac·设计
我命由我1234523 天前
Photoshop - Photoshop 根据需要以最佳格式保存照片
学习·ui·课程设计·设计·photoshop·ps·美工
Tisfy1 个月前
LeetCode 3508.设计路由器:STL套STL——有什么需求就设计什么数据结构
c++·leetcode·题解·设计·哈希表
我命由我123451 个月前
Photoshop - Photoshop 分享作品和设计
学习·ui·adobe·媒体·设计·photoshop·美工
舒一笑1 个月前
Saga分布式事务框架执行逻辑
后端·程序员·设计
VSORender_Farm1 个月前
新手该选哪款软件?3ds Max vs Blender深度对比
3d·渲染·blender·云渲染·设计·建筑·效果图
幂简集成explinks1 个月前
腾讯云 DeepSeek API 半价取消后的成本优化实践
人工智能·程序员·设计
我命由我123451 个月前
Photoshop - Photoshop 创建文档
学习·ui·课程设计·设计·photoshop·ps·美工
我命由我123451 个月前
Photoshop - Photoshop 创建图层蒙版
运维·学习·ui·课程设计·设计·ps·美工
我命由我123452 个月前
Photoshop - Photoshop 触控手势
笔记·学习·ui·设计·photoshop·ps·美工