博客园主题美化(SimpleMemory 主题1)
参考地址:https://cloud.tencent.com/developer/article/1953331
文档参考:https://bndong.github.io/Cnblogs-Theme-SimpleMemory/v1.1/#/**
window.cnblogsConfig
配置详情见:https://bndong.github.io/Cnblogs-Theme-SimpleMemory/v1.1/#/Docs/Customization/config
1.主题效果
https://www.cnblogs.com/linzhifen5/
2.主题介绍
主题使用的 SimpleMemory
这款主题,看完本教程后你能搭出相同美化的博客园主题博客了,也可按照官方教程调整细节或者新增部分功能。
github 官网:https://github.com/BNDong/Cnblogs-Theme-SimpleMemory
官方教程:https://bndong.github.io/Cnblogs-Theme-SimpleMemory/v1.1/#/
3.设置主题并申请 js 代码权限
- 进入管理>设置>博客设置>设置
- 博客主题>选择 SimpleMemory 主题
- 勾选申请 js 权限,填写开通的理由等待管理员审核通过(等待 10min 左右)。
4.覆盖默认的 css
- 进入
SimpleMemory
的 github 仓库,将src/style/base.min.css
代码复制 - 将复制到的 css 粘贴到 css 代码块中,并且勾选上 禁用默认 css
- 点击保存,强制刷新局可以看到基本样式出来了
5.侧边栏公告的基本配置
侧边栏公告中将以下代码粘贴
<script type="text/javascript"> window.cnblogsConfig = { GhVersions : 'v1.3.3', // 版本(不需要改动) blogUser : "userName", // 用户名 blogAvatar : "https://xxxx.png", // 用户头像 blogStartDate : "2016-11-17", // 入园时间,年-月-日。入园时间查看方法:鼠标停留园龄时间上,会显示入园时间 } </script> <script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v1.3.3/src/script/simpleMemory.min.js" defer></script>
6.菜单栏拓展功能(可选)
- 菜单栏扩展
- 打赏码配置
- 夜间模式配置
<script type="text/javascript"> window.cnblogsConfig = { GhVersions : 'v1.3.3', // 版本 blogUser : "leader755", // 用户名 blogAvatar : "https://gitee.com/leader755/imagehost/raw/master/blog/wx_avatar.png", // 用户头像 blogStartDate : "2018-03-105", // 入园时间,年-月-日。入园时间查看方法:鼠标停留园龄时间上,会显示入园时间 webpageTitleOnblur: '(o゚v゚)ノ风里雨里,我再这里等你', webpageIcon: "https://gitee.com/leader755/imagehost/raw/master/blog/wx_avatar.webp", menuNavList: [ // 列表数据 ['导航名称', '链接', 'icon'] ['Blog', 'https://www.leader755.com', 'icon-blog-solid'], ['yuque', 'https://www.yuque.com/leader755', 'icon-logo'], ['github', 'https://github.com/Leader755/', 'icon-github'], ['gitee', 'https://gitee.com/leader755', 'icon-gitee'], ['cnblogs', 'https://www.cnblogs.com/', 'icon-cnblogs'] ], switchDayNight:{ enable: true, // 是否开启日/夜间模式切换按钮 auto: { // 自动切换相关配置 enable: false, // 开启自动切换 dayHour: 5, // 日间模式开始时间,整数型,24小时制 nightHour: 19 // 夜间模式开始时间,整数型,24小时制 } }, homeBannerTextType: "one", reward: { //赞赏码功能 enable: true, wechatpay: 'https://gitee.com/leader755/imagehost/raw/master/blog/wxz.jpg', alipay: 'https://gitee.com/leader755/imagehost/raw/master/blog/zfb.jpg' }, weChatOfficialAccounts: 'https://gitee.com/leader755/imagehost/raw/master/blog/wxgzh.jpg', essayCodeHighlighting: "a11y-dark" } </script> <script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v1.3.3/src/script/simpleMemory.min.js" defer></script>
7.配置音乐播放器功能(可选)
将以下代码直接粘贴在页脚 HTML 代码 位置
<style> @media only screen and (max-width: 767px){ #sidebar_search_box input[type=text]{width:calc(100% - 24px)} } </style> <!--音乐--> <link rel="stylesheet" href="https://blog-static.cnblogs.com/files/elkyo/APlayer.min.css"> <div id="player" class="aplayer aplayer-withlist aplayer-fixed" data-id="3025663508" data-server="netease" data-type="playlist" data-order="random" data-fixed="true" data-listfolded="true" data-theme="#2D8CF0"></div> <script src="https://blog-static.cnblogs.com/files/elkyo/APlayer.min.js"></script> <script src="https://blog-static.cnblogs.com/files/elkyo/Meting.min.js"></script> <!--点击冒点--> <canvas width="1777" height="841" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas><script src="https://blog-static.cnblogs.com/files/elkyo/mouse-click.js"></script>
本文作者:轻风细雨_林木木
本文链接:https://www.cnblogs.com/linzhifen5/p/17235620.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
2022-03-20 跨域问题解决办法 (has been blocked by CORS policy:Response……) 原因及解决办法