博客园美化

简介: 博客园美化

SimpleMemory 皮肤


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

  • 效果预览:

image.png


配置步骤


1. 选项


勾选 “公告”

image.png


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


皮肤选择 SimpleMemory

image.png


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. 博客侧边栏公告设置


image.png

下面是我的配置(仅供参考)

<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等)可以自己托管维护,可以自行扩展界面交互


  1. 图片等静态资源可以自行寻找免费图床,当然也可以自己放到GitHub上面托管,采用CDN访问(参考这里


  1. 托管到博客园上

image.png

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

👉 方式很多,顺手就行 👈

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

相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
目录
相关文章
|
12天前
|
搜索推荐 JavaScript 前端开发
博客添加Aplayer音乐播放器
本文介绍了如何在博客网站中添加一个美观且功能强大的音乐播放器APlayer.js,从基本设置到高级定制,包括单曲播放、播放列表以及第三方歌单的集成方法。通过简单的HTML和JavaScript代码,即可实现个性化的音乐播放体验,让访客在浏览文章的同时享受美妙的音乐。
72 12
博客添加Aplayer音乐播放器
|
2月前
|
搜索推荐
美化博客园的个人主页
美化博客园个人主页的详细步骤,包括更换博客皮肤、添加音乐播放器、鼠标特效、图片放大功能以及雪花特效等个性化设置。
16 1
美化博客园的个人主页
|
7月前
|
Web App开发 存储 机器学习/深度学习
欢迎使用CSDN-markdown编辑器
欢迎使用CSDN-markdown编辑器
46 0
|
Java 程序员
为什么别人的博客上有好看的表情 而你的博客上干巴巴的 这就教你学会 让你的博客多姿多彩
为什么别人的博客上有好看的表情 而你的博客上干巴巴的 这就教你学会 让你的博客多姿多彩
159 0
为什么别人的博客上有好看的表情 而你的博客上干巴巴的 这就教你学会 让你的博客多姿多彩
|
搜索推荐
【博客美化】03.分享按钮
【博客美化】03.分享按钮
124 0
【博客美化】03.分享按钮
|
JavaScript 前端开发
【全网最全的博客美化系列教程】07.添加一个分享的按钮吧
全网最全的博客美化系列教程相关文章目录 【全网最全的博客美化系列教程】01.添加Github项目链接 【全网最全的博客美化系列教程】02.添加QQ交谈链接 【全网最全的博客美化系列教程】03.给博客添加一只萌萌哒的小仓鼠 【全网最全的博客美化系列教程】04.
1618 0
|
移动开发 JavaScript 前端开发
博客园博客排版(js样式实例)
昨天在博客园中看到一位大神发的博客园样式排版博客,我一看。妈呀,太漂亮了,二话不说赶快学起,昨天我花了一天的时间,终于把我的博客也弄得有一丢丢像样了,有好东西,当然要分享给各位; 大神的链接:https://www.cnblogs.com/hafiz/p/9276689.html,里面讲的很细很细,每一个功能的讲解都有。
1668 0
|
Web App开发 存储 机器学习/深度学习
第一次使用CSDN-markdown编辑器
欢迎使用Markdown编辑器写博客 本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦: Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图片上传 LaT...
1086 0