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

西瓜程序猿 / 2023-09-01 / 原文

cover.png

作者:西瓜程序猿


前言

默认主题:
image.png
设置自定义主题:
image.png
image.png


一、提前准备

1.1-申请自定义JS权限

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

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

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


1.2-修改博客皮肤

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

博客主题:SimpleMemory

image.png


1.3-关闭代码行号

在代码高亮这一栏,将【显示行号】取消勾选。
image.png
不然会出现这种效果:image.png
正常效果如下:
image.png


1.4-禁用默认CSS

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


1.5-侧边栏自定义配置

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

image.png


二、设置主题

主题名称:Cnblogs-Theme-SimpleMemory
开源地址:https://github.com/BNDong/Cnblogs-Theme-SimpleMemory


2.1-设置CSS

在【页面定制CSS代码】这一栏中,可以直接将下面CSS代码复制到输入框中。[西瓜程序猿]使用的是【v2.0.1】版本。
image.png
[西瓜程序猿]的例子代码:


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

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


2.2-设置JS

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

image.png
[西瓜程序猿]的例子代码:



四、最终效果

首页:
image.png
文章列表:
image.png
文章详情:
image.png