【2024最新博客美化教程重置版】SimpleMemory配置参数让你把自己的博客玩出更多花样!

极客小俊

于 2024-04-12 15:32:28 发布

阅读量1.1k

点赞数 24

CC 4.0 BY-SA版权

分类专栏：博客专区文章标签： SimpleMemory插件前端开发免费插件编程开发免费教程 HTML+CSS 扩展库

本文链接：https://blog.youkuaiyun.com/windowsxp2018/article/details/137682275

博客专区专栏收录该内容

9 篇文章

订阅专栏

🚀 个人主页 极客小俊
✍🏻 作者简介：程序猿、设计师、技术分享
🐋 希望大家多多支持, 我们一起学习和进步！
🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注

SimpleMemory 配置参数详解

我们所有配置需要写在 window.cnblogsConfig 里

也就是说我们在博客园设置选项中的博客侧边栏公告下添加的配置代码中window.cnblogsConfig还可以根据自己想要的需求进行定制!

注意: 如果配置中存在URL类型的配置，我们要尽量配置支持Https的地址,避免奇异

1.基本信息配置

基本信息配置有以下几个参数:

如下表:

参数名	值	描述
`name`	字符串用户名	自己定义一个名字
`avatar`	一个HTTPS的URL图片路径	自己定义的头像URL路径
`startDate`	一个时间格式的字符串: 例如`2018-07-29`	设置你的入园时间
`blogIcon`	一个HTTPS的URL图片路径	博客网站的图标

举个栗子

我的基础配置代码如下:

window.cnblogsConfig = {
    info: {
        name: '极客小俊GeekerJun',
        avatar: 'https://pic.cnblogs.com/avatar/1452855/20201026072619.png',
        startDate: '2018-07-29',
        blogIcon: 'https://pic.cnblogs.com/avatar/1452855/20201026072619.png'
    }
}

注意:前面我说了如果涉及到URL地址类型的配置，你最好事先准备好自己的在线URL路径就行了!

2.侧边栏配置

在侧边栏的配置中我们可以在cnblogsConfig配置中加入sidebar参数,对侧边栏进行美化和配置!

而sidebar参数下又可以加入很多其他的一些配置,并且都是针对侧边栏的配置!

这些参数有navList(导航)、customList(菜单数据)、infoBackground(背景)、titleMsg(标题信息)、submenu(侧边栏展开设置)...

接下来我们就一个一个挨个来试一试!

navList - 菜单导航配置

我们可以加入navList参数来显示我们的个人的推广信息链接地址!

语法格式

 sidebar: { 
    navList: [
        ['参数1', '参数2', '参数3'],
        ['参数1', '参数2', '参数3'],
        ......
    ],
  }

列表参数

参数列表	描述
`参数1`	导航名称
`参数2`	链接地址
`参数3`	icon图标默认参数值: `icon-github`

举个栗子

window.cnblogsConfig = {
    sidebar: { 
        navList: [
            ['优快云', 'https://blog.youkuaiyun.com/windowsxp2018', 'icon-github'],
            ['博客园', 'https://www.cnblogs.com/GeekerJun', 'icon-github'],
            ['新浪微博', 'https://weibo.com/u/5772827747', 'icon-github']
        ],
    },
}

我们把代码复制到博客侧边栏公告

如图

然后点击保存,让我们来看看是效果吧!

如图

customList - 菜单数据

我们可以用来定制一些推广链接地址,并且将它们分类!

这个功能相当于一个文章分类, 一般我们可以定制一些精选文章，把名称和链接地址写上去就可以了!

语法格式

sidebar: {
    customList: {
        "名称": { 
            "data": [ 
                ['参数1', '参数2'],
                ['参数1', '参数2'],
                ['参数1', '参数2'],
                ['参数1', '参数2'],
                .......
            ],
            "icon": "配置图标字体图标"
        }
    }
}

参数列表

参数	描述
`参数1`	链接名称
`参数2`	链接地址

例如

window.cnblogsConfig = {
    info: {
        name: '极客小俊GeekerJun',
        avatar: 'https://pic.cnblogs.com/avatar/1452855/20201026072619.png',
        startDate: '2018-07-29',
        blogIcon: 'https://pic.cnblogs.com/avatar/1452855/20201026072619.png'
    },
    sidebar: { 
        navList: [
            ['优快云', 'https://blog.youkuaiyun.com/windowsxp2018', 'icon-github'],
            ['博客园', 'https://www.cnblogs.com/GeekerJun', 'icon-github'],
            ['新浪微博', 'https://weibo.com/u/5772827747', 'icon-github']
        ],
        customList: {
            "精选文章": { 
                "data": [
                    ['正则表达式', 'https://www.cnblogs.com/GeekerJun/p/14648069.html'],
                    ['快速配置JDBC', 'https://www.cnblogs.com/GeekerJun/p/17859798.html']
                ],
                "icon": "icon-brush_fill" 
            },
            "程序人生": { 
                "data": [ 
                    ['学习方法', 'https://www.cnblogs.com/GeekerJun/p/14585746.html'],
                    ['文档阅读', 'https://www.cnblogs.com/GeekerJun/p/15047194.html']
                ],
                "icon": "icon-brush_fill" 
            },
        }
    }, 
}

我们把代码复制到博客侧边栏公告

然后点击保存,让我们来看看是效果吧!

如图

infoBackground - 侧边栏背景

这个配置参数顾名思义就是设置侧边栏的背景，你可以用你自己喜欢的图片去设置侧边的背景!

语法格式

sidebar: {
    infoBackground: 'HTTP在线地址'
}

举个栗子

我的设置如下

window.cnblogsConfig = {
    sidebar: { 
        infoBackground: 'https://s21.ax1x.com/2024/03/26/pF5lwsP.jpg',
    }, 
}

如图

效果如下

注意: 图片不要设置太大，有可能会加载很慢!

titleMsg - 设置侧边栏标题

我们可以使用titleMsg参数来设置侧边栏的标题

参数解释

名称	值	描述
`titleMsg`	接收一个String字符串	默认值为:`欢迎访问本博客~`

语法格式

sidebar: {
    titleMsg: '标题文字信息',
}

举个栗子

window.cnblogsConfig = {
    sidebar: {
        titleMsg: '欢迎来到极客小俊的小窝窝!',
    }
}

我们把配置参数加入到博客侧边栏公告中的cnblogsConfig配置里面看看效果

如图

效果如下

submenu - 设置侧边栏是否展开

这里侧边栏是否展开指的是如下区域:

如图

这里有积分排行、最新随笔、我的标签...等等分类，默认都是不展开的,也就是说每个我们都可以去定制是否默认展开,

我们可以使用submenu这个参数来进行配置，默认值为一个对象, 具体参数如下:

语法格式

window.cnblogsConfig = {
    sidebar: {
        submenu: {
            // 积分排行
            pointsRank: false,
            // 最新随笔
            latestPosts: false,
            // 我的标签
            myTags: false,
            // 随笔分类
            postsClassify: false,
            // 文章分类
            articleClassify: false,
            // 阅读排行
            readRank: false,
            // 推荐排行
            recommendRank: false,
            // 帖子档案
            postsArchive: false,
            // 文章档案
            articleArchive: false,
            // 自定义列表
            customList: false,
            // 最新评论
            latestComment: false,
        },
    },
}

你可以适当加几个配置参数到博客侧边栏公告中的cnblogsConfig中去看看效果!

举个栗子

我们把积分排行、最新随笔、我的标签的默认状态设置为展开!

代码如下

window.cnblogsConfig = {
    sidebar: {
        submenu: {
            // 积分排行
            pointsRank: true,
            // 最新随笔
            latestPosts: true,
            // 我的标签
            myTags: true,
        },
    },
}

如图

保存来看看效果吧!

如图

这很好理解，就是分类展开而已, 但是通常我们都是设置false 把它们都关闭掉, 既然默认都不展开，那么不设置也行!

3.Banner 博客图片与标语设置

这一块的设置主要是博客首页和文章页面中的图片的设置!

home - 首页配置

首页的配置，主要有在home参数下面配置background(背景图)、title(标题)、titleSource(标语)

1.配置首页背景图 - background

配置首页背景图主要是在home参数下使用background参数，值为Array

语法规则

window.cnblogsConfig = {
    banner: {
        home: {
            background: [
                "HTTP图片远程地址1",
                "HTTP图片远程地址2",
                "HTTP图片远程地址3",
                .......
            ],
        },
    },
}

举个栗子

我这里有一些现成的在线图片地址，大家可以拿去参考使用

banner: {
    home: {
        background: [
            "https://img2024.cnblogs.com/blog/1452855/202404/1452855-20240412014641936-347097934.jpg",
            "https://img2024.cnblogs.com/blog/1452855/202404/1452855-20240412044959736-1781443183.jpg",
            "https://img2024.cnblogs.com/blog/1452855/202404/1452855-20240412045007680-1237713145.jpg",
            "https://img2024.cnblogs.com/blog/1452855/202404/1452855-20240412045017466-1612595097.jpg",
            "https://img2024.cnblogs.com/blog/1452855/202404/1452855-20240412045024220-55844666.jpg",
            "https://img2024.cnblogs.com/blog/1452855/202404/1452855-20240412045035662-872059791.jpg",
            "https://img2024.cnblogs.com/blog/1452855/202404/1452855-20240412045044763-1549502367.jpg",
            "https://img2024.cnblogs.com/blog/1452855/202404/1452855-20240412045049845-407059136.jpg",
            "https://img2024.cnblogs.com/blog/1452855/202404/1452855-20240412045054686-1951873183.jpg",
            "https://img2024.cnblogs.com/blog/1452855/202404/1452855-20240412045100255-724283864.jpg",
            "https://img2024.cnblogs.com/blog/1452855/202404/1452855-20240412045105517-2075641184.jpg" 
        ],
    },
},

我们把代码加入到博客中

如图

我们保存看看效果, 每次刷新页面都会随机更换一张我们设置的图片地址

注意: 图片的尺寸最好是 >= 1920*1080

效果如下

2.配置首页标题文字 - title

这主要是自定义我们主页Banner上的标语文字信息，设置此选项会显示自定义文字，如果为空，会自动获取一句标语信息!

配置首页标语文字要是在home参数下使用title参数，值为String字符串也可以是一个Array数组

如果设置字符串，会固定显示该文字。
如果设置数组，随机从数组中获取一条文字显示。

语法规则

window.cnblogsConfig = {
    banner: {
        home: {
            title: '文字信息',
        },
    },
}

或者

window.cnblogsConfig = {
    banner: {
        home: {
            title: [
                '文字信息1',
                '文字信息2',
                '文字信息3',
                ....
            ]
        },
    },
}

举个栗子

window.cnblogsConfig = {
    banner: {
        home: {
            title: '一个人的价值要看他有能力时候的所作所为!',
        }
    },
}

如图

效果如下

数组我这里就不去试了，大家自己去尝试一下就知道了, 效果是一样的!

还有刚刚说过了，如果你不设置标语会自动获取一句标语信息! 那么这里自动是在什么地方获取呢？

我们可以设置titleSource参数, 也就是主页Banner上的标语获取源，默认为jinrishici 那么每次刷新随机获取一句古诗词, 也可以设置为one 也就是说每日获取一句话!

例如

window.cnblogsConfig = {
    banner: {
        home: {
            titleSource: 'one',
        }
    },
}

文章背景图设置

文章背景图，也就是在article文章内容页面中的背景图设置，也是background参数只不过这个参数在article下设置!

语法规则

window.cnblogsConfig = {
    banner: {
        article: {
            background: [
                "图片地址1",
                "图片地址2",
                "图片地址3",
            ],
        },
    },
}

跟首页背景图片一样, 图片推荐尺寸最好是 >= 1920*1080，支持多张，每次刷新随机设置一张!

举个栗子

我这里准备了一些在线的图片地址，大家可以直接拿去用!

代码如下

window.cnblogsConfig = {
    banner: {
        article: {
            background: [
                "https://img2024.cnblogs.com/blog/1452855/202404/1452855-20240412051045157-2083404034.jpg",
                "https://img2024.cnblogs.com/blog/1452855/202404/1452855-20240412051050310-194684411.jpg",
                "https://img2024.cnblogs.com/blog/1452855/202404/1452855-20240412051055672-1959662825.jpg",
                "https://img2024.cnblogs.com/blog/1452855/202404/1452855-20240412051101889-348015696.jpg",
                "https://img2024.cnblogs.com/blog/1452855/202404/1452855-20240412051112189-1994506403.jpg",
                "https://img2024.cnblogs.com/blog/1452855/202404/1452855-20240412051120477-1788338187.jpg",
                "https://img2024.cnblogs.com/blog/1452855/202404/1452855-20240412051125521-782440724.jpg",
                "https://img2024.cnblogs.com/blog/1452855/202404/1452855-20240412051138061-1413687462.jpg",
                "https://img2024.cnblogs.com/blog/1452855/202404/1452855-20240412051143146-820715992.jpg",
                "https://img2024.cnblogs.com/blog/1452855/202404/1452855-20240412051148714-367228225.jpg",
                "https://img2024.cnblogs.com/blog/1452855/202404/1452855-20240412051153695-336891182.jpg",
                "https://img2024.cnblogs.com/blog/1452855/202404/1452855-20240412051200831-1930496304.jpg",
                "https://img2024.cnblogs.com/blog/1452855/202404/1452855-20240412051206330-442301769.jpg"
            ],
        },
    },
}

把代码复制到博客

如图

赶紧保存去看看效果吧, 这里我就不过多赘述了!

4.加载配置

加载配置是使用loading参数, 可以定义我们加载博客或者刷新博客时,所产生的一些效果和状态!

主要还是设置博客加载时候，动画的效果!

语法规则

window.cnblogsConfig = {
    loading: {
        rebound: {
           ...
        },
        spinner: {
           ...
        }
    },
}

rebound参数主要设置的就是加载时,中间三角形动画的拉伸度和摩擦力

spinner参数 主要设置的就是加载时,中间三角形的大小

loading参数下面，主要由rebound和spinner这两个参数构成, 而它们各自下面还有很多参数!

举个栗子

window.cnblogsConfig = {
    loading: {
        rebound: {
            tension: 16,  //拉伸度
            friction: 5,  //摩擦力
        },
        spinner: {
            id: 'spinner',
            radius: 90,    //三角形的大小
            sides: 3,      //数字设置大以后，三角形还会变成圆形
            depth: 4,      //设置三角形的内部构造
            colors: {
                background: '#000000',    //加载时，网页闪屏的颜色
                stroke: '#008000',        //中间图形的颜色
                base: null,
                child: '#ff0000',
            },
            alwaysForward: true,
            restAt: 0.3,         //0.1到0.9之间的数字 表示完全旋转
            renderBase: false,
        }
    },
}

这个大家自己去试试效果就行了!

5.fontIconExtend - 配置自己的字体图标库扩展

我们可以使用fontIconExtend参数来设置自己定义的字体图标

关于字体图标库如果你还有什么不清楚的，可以参考看我往期发布的文章:

如下

Font Awesome https://blog.youkuaiyun.com/windowsxp2018/article/details/135857336

iconfont https://blog.youkuaiyun.com/windowsxp2018/article/details/135864969

使用fontIconExtend来引入我们的字体图标库扩展，可以很好的美化博客!

语法规则

window.cnblogsConfig = {
    fontIconExtend: "字体图标库扩展CSS的在线URL路径",
}

这里我以iconfont 阿里巴巴免费矢量图标库 为例!

我们在iconfont的后台选择好字体库以后导出一个在线的CSS地址路径

如图

然后复制这个路径到配置中

例如

window.cnblogsConfig = {
    fontIconExtend: "//at.alicdn.com/t/c/font_4424088_pz7rgb82fxf.css",
}

然后我们就可以在我们的博客中任何参数带有icon的地方去根据图标库的名称来使用这些字体库了!

比如: 我们之前说过的文章列表配置中，就有icon参数它的值，你就可以按照图标库给出的名称进行配置即可!

如图

效果如下:

6.顶部进度条配置

也就是我们往下拖动的时候，顶部显示的进度条配置，显示在页面顶部!

这个配置很简单，基本上不用修改!

语法规则

window.cnblogsConfig = {
    progressBar: {
        id      : 'top-progress-bar',  //请勿修改该值
        color   : '#008000',           //进度条颜色
        height  : '2px',		       //进度条高度
        duration: 0.2,				   //进度条持续时间
    }
}

比如说这里我把进度条的高度设置为50px 看看是什么效果

如图

7.title标签的配置

title标签，也就是我们HTML中的title是一个意思，

title标签是用来定义文档的标题。

我们这里主要是配置博客页面在失去焦点、获取焦点、以及失去焦点延迟时间和获取焦点延迟时间 的时候title标签所出现的变化! 比如:缩小浏览器页面的时候，也就是缩小博客页面的时候

具体配置参数如下

参数	默认值	描述
`onblur`	`(oﾟvﾟ)ノ Hi`	当博客页面`失去`焦点 `title标签`显示的文字信息
`onblurTime`	`500`	当博客页面`失去`焦点`title标签` 变化的延时时间，单位:`毫秒`
`focus`	`(´∇｀) 欢迎回来！`	当博客页面`获取`焦点`title标签`显示的文字
`focusTime`	`1000`	当博客页面`获取`焦点`title标签` 变化的延时时间，单位:`毫秒`

注意:

当延迟时间配置值为-1时, 页面title显示的文字不会变化

配置如下

window.cnblogsConfig = {
    title:{
        onblur: '(oﾟvﾟ)ノ Hi',
        onblurTime: 500,
        focus: '(*´∇｀*) 欢迎回来！',
        focusTime: 1000,
    }
}

仔细观察浏览器缩小放大以后titile标签位置文字的变化, 这些大家自己去尝试就可以了!

如图

8.配置页脚

也就是配置博客页面底部的一些样式, 我们可以使用footer参数进行配置!

它下面也有具体配置的参数!

页脚样式

我们可以使用style参数, 参数的值有1和2

例如

window.cnblogsConfig = {
    footer: {
        style: 1,
    },
}

效果如下

页脚标语

页脚标语我们可以使用text参数进行配置

text参数中可以设置左、中、右 左和右设置标语文字, 中间设置图标字体作为展示!

语法规则

window.cnblogsConfig = {
    //页脚配置
    footer: {
        style: 2,
        text: {
            left: '好好学习',
            right:'天天向上',
            iconFont: {
                icon:  "icon-shujuzhanshi",
                color: "green",
                fontSize: "36px"
            }
        },
    },
}

如图

页脚音乐播放器

我们可以在博客的页脚设置一个音乐播放器，让用户更加有意境!

关于音乐播放器，我们直接配置代码就可以调用了!

代码如下

aplayer: {
enable: true,
cdn: {
 aplayer: 'https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-y/aplayer/1.10.1/APlayer.min.js',
 aplayercss: 'https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-y/aplayer/1.10.1/APlayer.min.css',
 meting: 'https://cdn.staticfile.org/meting/2.0.1/Meting.min.js'
},
options: {
   id: '1',              //音乐列表中的id 默认设置1就可以了
   server: 'netease',    //音乐服务平台
   type: 'playlist',     //播放类型
   auto: 'netease',      //音乐支持平台
   fixed: 'true',        //是否启用固定模式, 相当于播放器的固定状态
   mini: 'true',		 //是否启用迷你模式
   theme: '#2980b9',     //播放器初始化颜色
   loop: 'all',			 //是否循环
   order: 'random',      //播放方式 
   preload: 'auto',      //加载模式
   volume: '0.7',        //音量设置
   mutex: 'true',        //是否防止同时播放多个音乐
   lrcType: '0',         //歌词类型,当设置为0时，不显示歌词!
   listFolded: 'true',   //音乐列表是否应该先折叠
   listMaxHeight: '340px',//音乐列表最大高度
   storageName: 'cnblogsTheme', //播放器存储模式
  }
}

调用效果

对于这个播放器我们还可以详细对每一个参数进行设置, 主要是options参数的设置，具体解释如下表:

参数	默认取值	描述
`id`	`1`	音乐列表中的id 默认设置1就可以了
`server`	`netease`	音乐服务平台: 取值范围: `netease`, `tencent`, `kugou`, `xiami`, `baidu`
`type`	`playlist`	播放类型, 取值就用`playlist`就行了
`auto`	`netease`	音乐支持平台, 取值范围: `netease`, `tencent`, `xiami`
`fixed`	`true`	是否启用固定模式, 相当于播放器的固定状态
`mini`	`true`	是否启用迷你模式
`theme`	`颜色值`	播放器初始化颜色
`loop`	`all`	是否循环音乐取值范围: `'all', 'one', 'none'`
`order`	`random`	播放方式取值范围: `'list', 'random'`
`preload`	`auto`	加载模式取值范围: `'none', 'metadata', 'auto'`
`volume`	`0.7`	音量设置默认就可以了
`mutex`	`true`	是否防止同时播放多个音乐默认`true`就可以了
`lrcType`	`0`	歌词类型,当设置为0时，不显示歌词! 一般就这样子就行了!
`listFolded`	`true`	音乐列表是否应该先折叠
`listMaxHeight`	`340px`	音乐列表最大高度
`storageName`	`cnblogsTheme`	播放器存储模式，默认就`cnblogsTheme`

links - 友情链接

我们也可以在页脚底部配置一些友情链接来进行推广!

语法格式

window.cnblogsConfig = {
    links: {
        footer: [
            ["名称1", '链接地址'],
            ["名称2", '链接地址'],
            ["名称3", '链接地址'],
            ["名称4", '链接地址'],
            ["名称5", '链接地址'],
        ],
    },
}

举个栗子

links: {
    footer: [
        ["优快云", 'https://blog.youkuaiyun.com/windowsxp2018'],
        ["哔哩哔哩", 'https://space.bilibili.com/395999414'],
        ["新浪微博", 'https://weibo.com/u/5772827747'],
        ["项目接单", 'https://mp.weixin.qq.com/s/ZB6EfNqd_GYAhEh19RvGSw'],
        ["个人博客", 'https://www.cnblogs.com/GeekerJun'],
    ],
},