记录和分享一下自己自定义的博客园主题样式 |
您所在的位置：网站首页 › 新闻主题的定义 › 记录和分享一下自己自定义的博客园主题样式 |
|
前言
以前使用的都是默认的博客园主题，最近刚好有空，着手定制以下自己的博客园主题。最终效果参考当前的博客，如果看不到则需要在博客园首页头像处悬停关闭简洁模式 思路是尽量保持原有结构，不进行破坏性改动，以 css 样式为主 本主题是轻量化的，只是在原有基础上微调样式。如有需要更丰富功能的可以自己搜索博客园主题定制相关的博文，有很多博主都写过教程 保留了博客园自带的推广部分没有隐藏，有需要你可以自行修改。个人能做的不多，希望博客园能持续下去 ps: 做的过程中随笔页面的支持和反对下有个升级会员的链接，还做了美化专门加了图标，结果现在貌似找不到了😦 开源地址custom-cnblogs - github custom-cnblogs - gitee 设置步骤按下面步骤在设置里添加代码即可设置自己的皮肤，如果没有开通 js 权限也没什么大问题，只是部分屏幕尺寸下非博文页的样式有点小偏差 博客皮肤在博客皮肤里选择 Custom 这个皮肤模板 这一项是不可缺少的，必须要设置！ 博客侧边栏公告这里主要是加了个主题切换效果 主题切换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)"})})} 页脚 HTML 代码这里主要是判断是否是博文阅读页然后添加固定的 class ，为左边的推荐和反对模块做不同大小的屏幕适配 document.getElementById("topics")?document.body.classList.add("custom-detail"):document.body.classList.remove("custom-detail") 页面定制 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/账号 ），大的头像图右键新标签页打开就是头像地址 CSS 在线压缩CSS Minifier 代码复制到设置里之前可以先压缩一下，减小体积 代码高亮这里根据自己喜欢选择即可，代码块的样式没有做改动，下面是我的个人配置 渲染引擎： highlight.js Mac 风格： ✔️ 字体： Fira Code 系统浅色模式时主题： atom-one-dark-reasonable 页首 HTML 代码这一部分 js 代码是后加的，主要是为了解决后面说的 微信内置浏览器查看博客时自定义样式加载异常 的问题 let mainCssLink=document.getElementById("MainCss");mainCssLink&&mainCssLink.parentNode.removeChild(mainCssLink) 一些问题 判断是否是随笔或文章阅读页面本来是不打算用 js 部分的，但是在判断是否是随笔阅读页面的时候不好判断，我目前是判断页面是否有 id 为 topics 的元素（也就是博文内容的那个 div）来判断的，如果用新 css 选择器的话兼容性太差，如果有更好的判断方式欢迎留言 兼容性我没有去统计最低兼容的浏览器版本，没有使用什么新特性，只要不是上古浏览器应该没什么问题 同时也做了不同尺寸屏幕的适配，不同设备都能有流畅的阅读体验，以及进行点赞，评论等互动操作 微信内置浏览器查看博客时自定义样式加载异常目前我看的 pc 端和移动端主流浏览器无论登录与否样式都是正常加载的 但是微信内置的浏览器就有问题了： 没登陆的话，不会加载自定义样式，会显示默认主题。连 page_begin_html 和 page_end_html 两部分的脚本都不给加载，这就没办法了 我自己登陆了，样式能加载，但是默认的主题样式也会加载，会造成显示混乱。但是脚本模块能加载，这个倒是可以解决目前还不知道别人登录状态下查看自己的博客是默认皮肤还是自定义皮肤，有在微信看的帮忙反馈下看看 总之就是很不理解博客园为何要设置成这样的逻辑，可能是担心恶意脚本会使微信封访问吧，但是这个登录后会同时加载默认主题样式和自定义样式应该是个 bug 其它有部分显示场景我可能遇不到，在扣结构时就发现很多空的 div ，如果遇到显示异常可以留言告诉我 自定义的步骤这里说一下我是如何自定义的，确实是有些繁琐 在 博客模板 页面选择自己的博客模板，目前我看的不同模板的页面结构排版是有细微差别的，我这里是用的官方推荐的 Custom 模板 在 自定义教程 里可以下载静态页面到本地 静态页面的结构是与目前的有差异的，毕竟更新迭代这么多年了，你可以在定制时，先去到浏览器工具中把目前的结构复制然后替换静态页面中的结构 对着静态页面调样式就行了，这样不会每次改完就在设置里保存然后线上页面看效果那么麻烦了 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |