记录一下自定义博客园主题过程

2024-02-09 17:54 由镜暮发表于 #前端开发

前言

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

思路是尽量保持原有结构，不进行破坏性改动，以 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 在线压缩

CSS Minifier

自定义的步骤

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

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

热门相关：北宋大表哥总裁大人，又又又吻我了玉堂金闺影帝偏要住我家庶子风流