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

作者:西瓜程序猿

主页传送门: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罐头2 天前
解决 PS暂存盘已满的五种方法
设计·photoshop
BUG收容所所长4 天前
如何用 Node.js 构建一个智能文章生成器?从零开始的技术实践之旅
前端·node.js·设计
你的人类朋友4 天前
❤️‍🔥对过度设计的反思
程序员·架构·设计
你的人类朋友5 天前
✨什么是SaaS?什么是多租户?
后端·架构·设计
小阿鑫6 天前
程序员最强外设,这才是Coding该有的样子!
前端·程序员·显示器·设计·最强外设
沐森6 天前
项目开发前置环境准备
设计
BUG收容所所长7 天前
HoverMask与SelectedMask——如何让低代码平台的交互体验更加直观?
前端·javascript·设计
VSORender_Farm7 天前
3ds Max:建筑效果图制作的核心利器与全流程解析
3d·渲染·云渲染·设计·建筑·效果图
BUG收容所所长7 天前
Zustand状态管理如何驱动低代码平台的数据流?
前端·javascript·设计
BUG收容所所长7 天前
React递归渲染与react-dnd——低代码平台的组件拖拽与动态渲染实践
前端·javascript·设计