博客园容许用户设置多样化的主题。通过抉择皮肤,而后开启JS脚本权限,在设置外面植入跟皮肤配套的CSSJS,并且禁用默认的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. 托管到博客园上

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

形式很多,棘手就行

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


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

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

欢送大家评论交换, 蟹蟹