博客园美化

技术分享 4年前 (2022-08-23) 0 999+

关注

博客园允许用户设置多样化的主题。通过选择皮肤，然后开启JS脚本权限，在设置里面植入跟皮肤配套的CSS、JS，并且禁用默认的CSS，即可实现个性化的界面风格和交互行为。

SimpleMemory 皮肤

文档参考这里，非常详细🌹

效果预览：

配置步骤

1. 选项

勾选 “公告”

2. 基本设置、代码高亮、开通JS权限

皮肤选择 SimpleMemory

3. 页面定制CSS代码

这里我选择的是 Cnblogs-Theme-SimpleMemory V2.1.0 版本

@import url(https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@2.1.0/dist/simpleMemory.css);

注意：

页面定制CSS代码我使用的是外链导入形式（免费jsdelivr cdn加速，也可以自行选择其它方式托管）。

勾选“禁用模板默认CSS”。（使得外链css生效）

4. 博客侧边栏公告设置

下面是我的配置（仅供参考）

<script type="text/javascript">     window.cnblogsConfig = {       // iconfont（我个人的，可以自己建一个iconfont项目维护使用）       fontIconExtend: "//at.alicdn.com/t/c/font_3603036_keyavmcqbhn.css",       info: {         name: '甜点cc', // 用户名         startDate: '2016-10-08', // 入园时间，年-月-日。入园时间查看方法：鼠标停留园龄时间上，会显示入园时间         avatar: 'https://pic.cnblogs.com/avatar/1037867/20220801164532.png', // 用户头像         blogIcon: 'https://pic.cnblogs.com/avatar/1037867/20220801164532.png', // 网站图标 favicon.ico       },       sidebar: {         infoBackground: 'https://cdn.jsdelivr.net/gh/all-smile/nav@master/static/images/Machine_tool.jpg', // 个人信息背景         titleMsg: '宝宝等你很久啦~🌹🌹', // 侧边栏title信息         navList: [             ['友链', 'https://www.cnblogs.com/all-smile/p/16612170.html', 'icon-pengyoufill'],             ['个人主页', 'https://home.i-xiao.space/', 'icon-zhuye'],         ],       },       banner: {         home: {           // 主页banner标语, 随机从数组中获取一条文字显示           title: ['每一个不曾起舞的日子，都是对生命的辜负。', '为者常成，行者常至。', '逝者如斯夫，不舍昼夜。', "相逢的还会再相逢。"],           // 主页banner图片           background: [               "https://cdn.jsdelivr.net/gh/all-smile/nav@master/static/images/Machine_tool.jpg",               "https://cdn.jsdelivr.net/gh/all-smile/nav@master/static/images/horse.jpg",               "https://cdn.jsdelivr.net/gh/all-smile/nav@master/static/images/background.jpg",               "https://raw.githubusercontent.com/all-smile/nav/master/static/images/sunset.jpg",               "https://raw.githubusercontent.com/all-smile/nav/master/static/images/sunset02.jpg"           ],         },       },       // 失去焦点标签文字       title: {         onblur: '(oﾟvﾟ)ノ Hi',       },       // 页面加载loading。       loading: {         rebound: {           tension: 16,         },         spinner: {           id: 'spinner',           radius: 90,         }       },       // 页脚模式       footer: {         style: 2,         text: {           left: '蓄之既久，其发必速。',         },       },       // 友情链接       links: {         // 文章底部显示添加友链入口（博客园发送消息）         footer: [             /*             格式：             Key	Description             name	昵称             introduction	简介             avatar	头像             url	友链地址             */             ["添加友链", 'https://msg.cnblogs.com/send/甜点cc'],         ],       },       // 右下角菜单       rtMenu: {         qrCode: 'https://xxx.jpg', // 自己设置         reward: {           wechatpay: 'https:xxx.jpg' // 自己设置         },       },       animate: {         // 主页banner动效配置。         homeBanner: {           enable: true,           options: {             radius: 15,           }         },         // 文章页标题动效配置。         articleTitle: {           enable: true,         },         // 文章页banner动效配置         articleBanner: {           enable: true,         },         // 背景动效。         background: {           enable: false,         },         // 跟随鼠标动效。         mouse: {           enable: false,         },       },     };     // 友链配置     window.cnblogsConfig.links.page = [       {         name: '甜点cc', // 昵称         introduction: '博客', // 简介         avatar: 'https://pic.cnblogs.com/avatar/1037867/20220801164532.png', // 头像         url: 'https://home.i-xiao.space/blog/' // 友链地址       },     ] </script> <script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v2.1.0/dist/simpleMemory.js" defer></script>