记录和分享一下自己自定义的博客园主题样式 - 镜暮
source link: https://www.cnblogs.com/chkhk/p/18012539
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
记录和分享一下自己自定义的博客园主题样式 - 镜暮 - 博客园
以前使用的都是默认的博客园主题,最近刚好有空,着手定制以下自己的博客园主题。最终效果参考当前的博客,如果看不到则需要在博客园首页头像处悬停关闭简洁模式
思路是尽量保持原有结构,不进行破坏性改动,以 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 在线压缩
代码复制到设置里之前可以先压缩一下,减小体积
自定义的步骤
这里说一下我是如何自定义的,确实是有些繁琐
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK