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

SimpleMemory 皮肤

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

  • 效果预览：

博客园美化 - 图1

配置步骤

1. 选项

勾选 “公告”

博客园美化 - 图2

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

皮肤选择 SimpleMemory

博客园美化 - 图3

3. 页面定制CSS代码

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

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

注意：

  1. 页面定制CSS代码我使用的是外链导入形式（免费jsdelivr cdn加速，也可以自行选择其它方式托管）。
  2. 勾选“禁用模板默认CSS”。（使得外链css生效）

4. 博客侧边栏公告设置

博客园美化 - 图4

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

  1. <script type="text/javascript">
  2.     window.cnblogsConfig = {
  3.       // iconfont（我个人的，可以自己建一个iconfont项目维护使用）
  4.       fontIconExtend: "//at.alicdn.com/t/c/font_3603036_keyavmcqbhn.css",
  5.       info: {
  6.         name: '甜点cc', // 用户名
  7.         startDate: '2016-10-08', // 入园时间，年-月-日。入园时间查看方法：鼠标停留园龄时间上，会显示入园时间
  8.         avatar: 'https://pic.cnblogs.com/avatar/1037867/20220801164532.png', // 用户头像
  9.         blogIcon: 'https://pic.cnblogs.com/avatar/1037867/20220801164532.png', // 网站图标 favicon.ico
  10.       },
  11.       sidebar: {
  12.         infoBackground: 'https://cdn.jsdelivr.net/gh/all-smile/nav@master/static/images/Machine_tool.jpg', // 个人信息背景
  13.         titleMsg: '宝宝等你很久啦~🌹🌹', // 侧边栏title信息
  14.         navList: [
  15.             ['友链', 'https://www.cnblogs.com/all-smile/p/16612170.html', 'icon-pengyoufill'],
  16.             ['个人主页', 'https://home.i-xiao.space/', 'icon-zhuye'],
  17.         ],
  18.       },
  19.       banner: {
  20.         home: {
  21.           // 主页banner标语, 随机从数组中获取一条文字显示
  22.           title: ['每一个不曾起舞的日子，都是对生命的辜负。', '为者常成，行者常至。', '逝者如斯夫，不舍昼夜。', "相逢的还会再相逢。"],
  23.           // 主页banner图片
  24.           background: [
  25.               "https://cdn.jsdelivr.net/gh/all-smile/nav@master/static/images/Machine_tool.jpg",
  26.               "https://cdn.jsdelivr.net/gh/all-smile/nav@master/static/images/horse.jpg",
  27.               "https://cdn.jsdelivr.net/gh/all-smile/nav@master/static/images/background.jpg",
  28.               "https://raw.githubusercontent.com/all-smile/nav/master/static/images/sunset.jpg",
  29.               "https://raw.githubusercontent.com/all-smile/nav/master/static/images/sunset02.jpg"
  30.           ],
  31.         },
  32.       },
  33.       // 失去焦点标签文字
  34.       title: {
  35.         onblur: '(oﾟvﾟ)ノ Hi',
  36.       },
  37.       // 页面加载loading。
  38.       loading: {
  39.         rebound: {
  40.           tension: 16,
  41.         },
  42.         spinner: {
  43.           id: 'spinner',
  44.           radius: 90,
  45.         }
  46.       },
  47.       // 页脚模式
  48.       footer: {
  49.         style: 2,
  50.         text: {
  51.           left: '蓄之既久，其发必速。',
  52.         },
  53.       },
  54.       // 友情链接
  55.       links: {
  56.         // 文章底部显示添加友链入口（博客园发送消息）
  57.         footer: [
  58.             /*
  59.             格式：
  60.             Key    Description
  61.             name    昵称
  62.             introduction    简介
  63.             avatar    头像
  64.             url    友链地址
  65.             */
  66.             ["添加友链", 'https://msg.cnblogs.com/send/甜点cc'],
  67.         ],
  68.       },
  69.       // 右下角菜单
  70.       rtMenu: {
  71.         qrCode: 'https://xxx.jpg', // 自己设置
  72.         reward: {
  73.           wechatpay: 'https:xxx.jpg' // 自己设置
  74.         },
  75.       },
  76.       animate: {
  77.         // 主页banner动效配置。
  78.         homeBanner: {
  79.           enable: true,
  80.           options: {
  81.             radius: 15,
  82.           }
  83.         },
  84.         // 文章页标题动效配置。
  85.         articleTitle: {
  86.           enable: true,
  87.         },
  88.         // 文章页banner动效配置
  89.         articleBanner: {
  90.           enable: true,
  91.         },
  92.         // 背景动效。
  93.         background: {
  94.           enable: false,
  95.         },
  96.         // 跟随鼠标动效。
  97.         mouse: {
  98.           enable: false,
  99.         },
  100.       },
  101.     };
  102.     // 友链配置
  103.     window.cnblogsConfig.links.page = [
  104.       {
  105.         name: '甜点cc', // 昵称
  106.         introduction: '博客', // 简介
  107.         avatar: 'https://pic.cnblogs.com/avatar/1037867/20220801164532.png', // 头像
  108.         url: 'https://home.i-xiao.space/blog/' // 友链地址
  109.       },
  110.     ]
  111. </script>
  112. <script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v2.1.0/dist/simpleMemory.js" defer></script>

注意：

  • 上面配置中 加载的 js 脚本，要和 上一步的CSS外链同一个版本（这里是V2.1.0），否则可能会不生效或者出现别的问题

最后

  1. 主题相关文件（css\js等）可以自己托管维护，可以自行扩展界面交互
  2. 图片等静态资源可以自行寻找免费图床。当然也可以自己放到GitHub上面托管，采用CDN访问（参考这里）
  3. 托管到博客园上

博客园美化 - 图5

  1. 图片等静态资源也可以自行搭建云盘使用😏

👉 方式很多，顺手就行 👈

我的博客园主页请看这里😊欢迎来访问呀🌹

🎈🎈🎈

🌹 持续更文，关注我，你会发现一个踏实努力的宝藏前端😊，让我们一起学习，共同成长吧。

🎉 喜欢的小伙伴记得点赞关注收藏哟，回看不迷路 😉

🎁 欢迎大家评论交流, 蟹蟹😊