记录和分享一下自己自定义的博客园主题样式

前言

以前使用的都是默认的博客园主题,最近刚好有空,着手定制以下自己的博客园主题。最终效果参考当前的博客,如果看不到则需要在博客园首页头像处悬停关闭简洁模式

思路是尽量保持原有结构,不进行破坏性改动,以 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;
  /* ... */
}
  1. --text: 文本颜色
  2. --background: 背景颜色
  3. --primary: 主题色
  4. --accent: 强调色
  5. --shadow: 较浅的阴影
  6. --shadow2: 较深的阴影
  7. --bg-mask: 较浅的遮罩色
  8. --bg-mask2: 较深的遮罩色
  9. --bg-img: 背景图片
  10. --head-portrait: 头像图片

背景图片就是博客底部的纹理图片,你可以在自己博客的 设置-相册 里上传你自己的背景纹理图片,然后把变量里图片的地址替换成你自己的即可(在相册里一直点点点图片,直到有一个查看原图,点进去会新开一个标签页看图,这个标签页地址就是图片地址)

头像图片你也可以自定义,按照上面背景图片的步骤操作即可。或者直接用自己博客的头像,点击自己的昵称,进入博客园社区主页(地址是 https://home.cnblogs.com/u/账号 ),大的头像图右键新标签页打开就是头像地址

代码高亮

这里根据自己喜欢选择即可,代码块的样式没有做改动,下面是我的个人配置

  • 渲染引擎: highlight.js
  • Mac 风格: ✔️
  • 字体: Fira Code
  • 系统浅色模式时主题: atom-one-dark-reasonable

一些问题

判断是否是随笔或文章阅读页面

本来是不打算用 js 部分的,但是在判断是否是随笔阅读页面的时候不好判断,我目前是判断页面是否有 id 为 topics 的元素(也就是博文内容的那个 div)来判断的,如果用新 css 选择器的话兼容性太差,如果有更好的判断方式欢迎留言

兼容性

我没有去统计最低兼容的浏览器版本,没有使用什么新特性,只要不是上古浏览器应该没什么问题

同时也做了不同尺寸屏幕的适配,不同设备都能有流畅的阅读体验,以及进行点赞,评论等互动操作

其它

有部分显示场景我可能遇不到,在扣结构时就发现很多空的 div ,如果遇到显示异常可以留言告诉我

CSS 在线压缩

CSS Minifier

代码复制到设置里之前可以先压缩一下,减小体积

自定义的步骤

这里说一下我是如何自定义的,确实是有些繁琐

  1. 博客模板 页面选择自己的博客模板,目前我看的不同模板的页面结构排版是有细微差别的,我这里是用的官方推荐的 Custom 模板
  2. 自定义教程 里可以下载静态页面到本地
  3. 静态页面的结构是与目前的有差异的,毕竟更新迭代这么多年了,你可以在定制时,先去到浏览器工具中把目前的结构复制然后替换静态页面中的结构
  4. 对着静态页面调样式就行了,这样不会每次改完就在设置里保存然后线上页面看效果那么麻烦了

热门相关:甜蜜隐婚:老公大人,宠上瘾   貌似纯洁   铁血大明   第一强者   花都保镖