关于前端:博客园美化

博客园容许用户设置多样化的主题。通过抉择皮肤，而后开启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);

留神：

1. 页面定制CSS代码我应用的是外链导入模式（收费jsdelivr cdn减速，也能够自行抉择其它形式托管）。
2. 勾选“禁用模板默认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>

留神：

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

最初

1. 主题相干文件（css\js等）能够本人托管保护，能够自行扩大界面交互
2. 图片等动态资源能够自行寻找收费图床，当然也能够本人放到GitHub下面托管，采纳CDN拜访（参考这里）
3. 托管到博客园上

4. 图片等动态资源也能够自行搭建云盘应用😏

👉 形式很多，棘手就行 👈

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

🎈🎈🎈

🌹 继续更文，关注我，你会发现一个虚浮致力的宝藏前端😊，让咱们一起学习，独特成长吧。

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

🎁 欢送大家评论交换, 蟹蟹😊