- A+
前言
以前使用的都是默认的博客园主题，最近刚好有空，着手定制以下自己的博客园主题。最终效果参考当前的博客，如果看不到则需要在博客园首页头像处悬停关闭简洁模式
思路是尽量保持原有结构，不进行破坏性改动，以 css 样式为主（当前只添加了两个 js 方法用于主题切换和判断是否在随笔阅读页面）
本主题是轻量化的，只是在原有基础上微调样式。如有需要更丰富功能的可以自己搜索博客园主题定制相关的博文，有很多博主都写过教程
保留了博客园自带的推广部分没有隐藏，有需要你可以自行修改。个人能做的不多，希望博客园能持续下去
ps: 做的过程中随笔页面的支持和反对下有个升级会员的链接，还做了美化专门加了图标，结果现在貌似找不到了?
开源地址
custom-cnblogs - Github
custom-cnblogs - Gitee
设置步骤
按下面步骤在设置里添加代码即可设置自己的皮肤，如果没有开通 js 权限也没什么大问题，只是部分屏幕尺寸下非博文页的样式有点小偏差
博客皮肤
在博客皮肤里选择 Custom 这个皮肤模板
这一项是不可缺少的，必须要设置！
博客侧边栏公告
这里主要是加了个主题切换效果
<div id="custom-sidebar" onclick=switchCustomTheme(event)>主题切换</div><script>function switchCustomTheme(e){let t=document.documentElement,o="theme"in t.dataset;if(!document.startViewTransition){o?delete t.dataset.theme:t.dataset.theme="dark";return}let n=e.clientX,s=e.clientY,a=Math.hypot(Math.max(n,innerWidth-n),Math.max(s,innerHeight-s)),i;const r=document.startViewTransition(()=>{i=!o,o?delete t.dataset.theme:t.dataset.theme="dark"});r.ready.then(()=>{let e=[`circle(0px at ${n}px ${s}px)`,`circle(${a}px at ${n}px ${s}px)`];document.documentElement.animate({clipPath:i?[...e].reverse():e},{fill:"forwards",duration:500,easing:"ease-in",pseudoElement:i?"::view-transition-old(root)":"::view-transition-new(root)"})})}</script> 页脚 HTML 代码
这里主要是判断是否是博文阅读页然后添加固定的 class ，为左边的推荐和反对模块做不同大小的屏幕适配
<script>document.getElementById("topics")?document.body.classList.add("custom-detail"):document.body.classList.remove("custom-detail")</script> 页面定制 CSS 代码
css 样式部分，行数太多就没放博客里了，把项目根目录下的 style.css 文件里的内容复制到代码框里即可
如何自定义
如果你需要自定义颜色，在 style.css 最上方的 :root 选择器里有可以自定义的变量，你可以设置你喜欢的颜色
紧接着的 :root[data-theme*='dark'] 选择器里的变量值则是对应夜间模式下的主题色
:root { --text: #121212; --background: #fafafa; /* ... */ } --text: 文本颜色--background: 背景颜色--primary: 主题色--accent: 强调色--shadow: 较浅的阴影--shadow2: 较深的阴影--bg-mask: 较浅的遮罩色--bg-mask2: 较深的遮罩色--bg-img: 背景图片--head-portrait: 头像图片
背景图片就是博客底部的纹理图片，你可以在自己博客的 设置-相册 里上传你自己的背景纹理图片，然后把变量里图片的地址替换成你自己的即可（在相册里一直点点点图片，直到有一个查看原图，点进去会新开一个标签页看图，这个标签页地址就是图片地址）
头像图片你也可以自定义，按照上面背景图片的步骤操作即可。或者直接用自己博客的头像，点击自己的昵称，进入博客园社区主页（地址是
https://home.cnblogs.com/u/账号），大的头像图右键新标签页打开就是头像地址
代码高亮
这里根据自己喜欢选择即可，代码块的样式没有做改动，下面是我的个人配置
- 渲染引擎： highlight.js
- Mac 风格： ✔️
- 字体： Fira Code
- 系统浅色模式时主题： atom-one-dark-reasonable
一些问题
判断是否是随笔或文章阅读页面
本来是不打算用 js 部分的，但是在判断是否是随笔阅读页面的时候不好判断，我目前是判断页面是否有 id 为 topics 的元素（也就是博文内容的那个 div）来判断的，如果用新 css 选择器的话兼容性太差，如果有更好的判断方式欢迎留言
兼容性
我没有去统计最低兼容的版本，主体结构上应该不会有太大问题
其它
有部分显示场景我可能遇不到，在扣结构时就发现很多空的 div ，如果遇到显示异常可以留言告诉我
css 在线压缩
自定义的步骤
这里说一下我是如何自定义的，确实是有些繁琐
