博客园SimpleMemory皮肤的页面美化--感谢BNDong大佬

程序员文章站 2022-07-12 20:54:27

...

1. 前言说明

本博客的博皮样式设计者是BNDong大神，在此表示衷心的感谢！为了让更多人的博客园更加的美观大方，本人特此参考设计者BNDong关于博客样式的文章，写了这更加通俗易懂的文章，让更多喜欢这博客样式的人，可以应用此博客样式。

2. 入门准备

2.1 安装配置

本主题需要JS权限，没有的请先申请权限。

2.2 后台配置

博客园后台设置

2.2 选项配置

选项页面：

2.3 确定使用的版本

选择版本下载对应的ZIP压缩包

、

3. 博客设置

3.1 设置博客皮肤

博客皮肤：SimpleMemory

3.2 设置页面定制CSS

这里拿最新的v1.3.3版本为例子，使用v1.3.3 base.min.css 拷贝此文件代码至页面定制CSS代码文本框处。

3.3 禁用模板默认CSS

选中页面定制CSS代码文本框下面的禁用模板默认CSS。

3.4 设置博客侧边公告栏

<script type="text/javascript">
    window.cnblogsConfig = {
        GhVersions    : 'v1.3.3', // 版本
        blogUser      : "userName", // 用户名
        blogAvatar    : "https://xxxx.png", // 用户头像
        blogStartDate : "2016-11-17", // 入园时间，年-月-日。入园时间查看方法：鼠标停留园龄时间上，会显示入园时间
    }
</script>
<script src="https://cdn.jsdelivr.net/gh/BNDong/aaa@qq.com/src/script/simpleMemory.min.js" defer></script>

　注意：引入的文件 simpleMemory.min.js 版本需要与配置 window.cnblogsConfig.GhVersions 一致！

3.5 开启公告控件

博客设置 --> 控件显示设置 --> 勾选公告

配置完成保存即可成功应用博皮！

4 定制化设定

4.1 基础信息设置

blogUser - 用户昵称

类型：String
默认值：[默认抓取博客园用户名]

window.cnblogsConfig = {
    blogUser: 'L-Rui',
}

blogAvatar - 用户头像

类型：Url
默认值：""

用户头像图片Url。

window.cnblogsConfig = {
    blogAvatar: 'https://pic.cnblogs.com/avatar/1065454/20161119225202.png',
}

blogStartDate - 入园时间

类型：Date
默认值：2019-01-01

入园时间，年-月-日，入园时间查看方法：鼠标停留园龄时间上，会显示入园时间。

window.cnblogsConfig = {
    blogStartDate: '2019-01-01',
}

4.2 网站配置

webpageTitleOnblur - 失去焦点标签文字

类型：String
默认值：(oﾟvﾟ)ノ Hi

当页面失去焦点，页面title显示的文字。

window.cnblogsConfig = {
    webpageTitleOnblur: '(oﾟvﾟ)ノ Hi',
}

webpageTitleOnblurTimeOut - 失去焦点变化延时

类型：Number
默认值：500

当页面失去焦点，页面title变化的延时时间，单位毫秒。

版本 >= v1.3.3 后该配置值为 -1 时，当页面失去焦点，页面title显示的文字不会变化。

window.cnblogsConfig = {
    webpageTitleOnblurTimeOut: 500,
}

webpageTitleFocus - 获取焦点标签文字

类型：String
默认值：(*´∇｀*) 欢迎回来！

当页面获取焦点，页面title显示的文字；显示后，延时恢复原title。

window.cnblogsConfig = {
    webpageTitleFocus: '(*´∇｀*) 欢迎回来！',
}

webpageTitleFocusTimeOut - 获取焦点变化延时

类型：Number
默认值：1000

当页面获取焦点，页面title变化的延时时间，单位毫秒。

版本 >= v1.3.3 后该配置值为 -1 时，当页面获取焦点，页面title显示的文字不会变化。

window.cnblogsConfig = {
    webpageTitleFocusTimeOut: 1000,
}

webpageIcon - 网站图标

类型：Url
默认值：""

网站图标图片Url。

window.cnblogsConfig = {
    webpageIcon: "https://cdn.jsdelivr.net/gh/BNDong/aaa@qq.com/img/webp/blog_logo.webp",
}

switchDayNight - 日/夜间模式

版本 >= v1.2.8

类型：Object
默认值：

{
    enable: true,       // 是否开启日/夜间模式切换按钮
    auto: {             // 自动切换相关配置
        enable: false,  // 开启自动切换
        dayHour: 5,     // 日间模式开始时间，整数型，24小时制
        nightHour: 19   // 夜间模式开始时间，整数型，24小时制
    }
}

日/夜间模式配置。页面使用日/夜间模式优先级：用户设置 > 自动切换 > 默认。

window.cnblogsConfig = {
    switchDayNight: {
        enable: true,
        auto: {
            enable: true
        }
    },
}

4.3 菜单配置

menuCustomList - 菜单数据

类型：Object
相关文档：字体图标库
默认值：{}

自定义菜单数据，显示在默认数据下方。

window.cnblogsConfig = {
    menuCustomList: {
        "title1": { // 标题
            "data": [ // 列表数据 ['列表', '链接']
                ['我的博客1', 'https://www.cnblogs.com/bndong/'],
                ['我的博客2', 'https://www.cnblogs.com/bndong/'],
                ['我的博客3', 'https://www.cnblogs.com/bndong/'],
                ['我的博客4', 'https://www.cnblogs.com/bndong/'],
                ['我的博客5', 'https://www.cnblogs.com/bndong/'],
            ],
            "icon": "icon-brush_fill" // 配置图标，参考文档：定制化/字体图标库
        },
        "title2": { // 标题
            "data": [ // 列表数据 ['列表', '链接']
                ['我的博客6', 'https://www.cnblogs.com/bndong/'],
                ['我的博客7', 'https://www.cnblogs.com/bndong/'],
                ['我的博客8', 'https://www.cnblogs.com/bndong/'],
                ['我的博客9', 'https://www.cnblogs.com/bndong/'],
                ['我的博客10', 'https://www.cnblogs.com/bndong/'],
            ],
            "icon": "icon-brush_fill" // 配置图标，参考文档：定制化/字体图标库
        },
    },
}

menuNavList - 菜单导航

版本 >= v1.1.2

类型：Array
默认值：[]

自定义菜单导航，显示在默认导航下方。 icon 支持与定义，要求版本 >= v1.3.2

window.cnblogsConfig = {
    menuNavList: [ // 列表数据 ['导航名称', '链接', 'icon']
        ['我的博客1', 'https://www.cnblogs.com/bndong/', 'icon-github'],
        ['我的博客2', 'https://www.cnblogs.com/bndong/', 'icon-github'],
    ],
}

menuUserInfoBgImg - 菜单个人信息背景图片

版本 >= v1.1.5

类型：Url
默认值：""

菜单个人信息背景图片设置。

window.cnblogsConfig = {
    menuUserInfoBgImg: 'https://xxx,jpg',
}

4.4 页面动效配置

homeTopAnimationRendered - 是否渲染主页banner动效

类型：Boolean
默认值：true

是否渲染主页banner动效。

window.cnblogsConfig = {
    homeTopAnimationRendered: true,
}

homeTopAnimation - 主页banner动效配置

类型：Object
默认值：

{
    radius: 15,
    density: 0.2,
    color: 'rgba(255,255,255, .2)', // 颜色设置，“random” 为随机颜色
    clearOffset: 0.3,
}

主页banner动效配置。

window.cnblogsConfig = {
    homeTopAnimation: { color : 'random', }, }

essayTopAnimationRendered - 是否渲染文章页banner动效

类型：Boolean
默认值：true

是否渲染文章页banner动效。

window.cnblogsConfig = {
    essayTopAnimationRendered: true,
}

essayTopAnimation - 文章页banner动效配置

类型：Object
默认值：

{
    triW : 14,
    triH : 20,
    neighbours : ["side", "top", "bottom"],
    speedTrailAppear : .1,
    speedTrailDisappear : .1,
    speedTriOpen : 1,
    trailMaxLength : 30,
    trailIntervalCreation : 100,
    delayBeforeDisappear : 2,
    colorsRandom: false, // v1.2.4 是否开启随机颜色
    colors: [
        '#96EDA6', '#5BC6A9',
        '#38668C', '#374D84',
        '#BED5CB', '#62ADC6',
        '#8EE5DE', '#304E7B'
    ]
}

文章页banner动效配置。

window.cnblogsConfig = {
    essayTopAnimation: {
        triW : 14,
        triH : 20,
    },
}

bgAnimationRendered - 是否渲染页面背景动效

类型：Boolean
默认值：true

是否渲染页面背景动效。

window.cnblogsConfig = {
    bgAnimationRendered: true,
}

backgroundAnimation - 页面背景动效配置

类型：Object
默认值：

{
    colorSaturation: "60%",
    colorBrightness: "50%",
    colorAlpha: 0.5,
    colorCycleSpeed: 5,
    verticalPosition: "random",
    horizontalSpeed: 200,
    ribbonCount: 3,
    strokeSize: 0,
    parallaxAmount: -0.2,
    animateSections: true
}

页面背景动效配置。

window.cnblogsConfig = {
    backgroundAnimation: {
        colorSaturation: "60%",
        colorBrightness: "50%",
    },
}

4.5 主页配置

homeTopImg - 主页banner图片

类型：Array
默认值：

[
    "https://cdn.jsdelivr.net/gh/BNDong/aaa@qq.com/img/webp/home_top_bg.webp"
]

主页banner图片Url，推荐尺寸>= 1920*1080，支持多张，每次刷新随机设置一张。

window.cnblogsConfig = {
    homeTopImg: [
        "https://cdn.jsdelivr.net/gh/BNDong/aaa@qq.com/img/webp/home_top_bg.webp",
        "https://cdn.jsdelivr.net/gh/BNDong/aaa@qq.com/img/webp/home_top_bg.webp"
    ],
}

homeBannerText - 主页banner上的标语

类型：String or Array
默认值：""

主页banner上的标语，设置此选项会显示自定义文字，默认为空，自动获取一句。

1) 设置文字，会固定显示该文字。

2) 设置数组，随机从数组中获取一条文字显示。 (版本 >= v1.3.2)

window.cnblogsConfig = {
    homeBannerText: "好好学习，天天向上！",
}

// or

window.cnblogsConfig = {
    homeBannerText: [
        "我是标语一",
        "我是标语二",
        "我是标语三",
        "我是标语四",
    ],
}

homeBannerTextType - 标语获取源

版本 >= v1.1.3

类型：String
默认值："jinrishici"

主页 banner 上的标语获取源，默认为 jinrishici 每次刷新随机获取一句古诗词。

window.cnblogsConfig = {
    homeBannerTextType: "one",
}

/** 所有可配置项
jinrishici：每次刷新随机获取一句古诗词。
one：每日获取一句话
*/

4.6 文章页配置

essayTopImg - 文章页banner图片

类型：Array
默认值：

[
    "https://cdn.jsdelivr.net/gh/BNDong/aaa@qq.com/img/webp/nothome_top_bg.webp"
]

文章页banner图片Url，推荐尺寸>= 1920*600，支持多张，每次刷新随机设置一张。

window.cnblogsConfig = {
    essayTopImg: [
        "https://cdn.jsdelivr.net/gh/BNDong/aaa@qq.com/img/webp/nothome_top_bg.webp",
        "https://cdn.jsdelivr.net/gh/BNDong/aaa@qq.com/img/webp/nothome_top_bg.webp"
    ],
}

essayTitleStyle - 文章内容标题样式设置

版本 >= v1.3.3

类型：Boolean
默认值："false"

是否设置文章内容标题样式，默认不设置。

window.cnblogsConfig = {
    essayTitleStyle: true,
}

essaySuffix - 文章后缀配置

类型：Object
默认值：

{
    codeImgUrl   : '', // >= v1.1.5 左侧图片设置，不配置使用 window.cnblogsConfig.blogAvatar
    aboutHtml    : '', // 关于博主，不配置使用默认
    copyrightHtml: '', // 版权声明，不配置使用默认
    supportHtml  : '', // 声援博主，不配置使用默认
}

文章后缀配置，不配置使用默认。

window.cnblogsConfig = {
    essaySuffix: {
        aboutHtml: "I am a good person",
    },
}

reward - 打赏

版本 >= v1.2.7

类型：Object
默认值：

{
    enable: false, // 是否开启打赏功能
    wechatpay: '', // 微信支付二维码图片URL
    alipay: '' // 支付宝支付二维码图片URL
}

文章打赏按钮，显示在页面右下角。

window.cnblogsConfig = {
    reward: {
        enable: true,
        wechatpay: '//xxxx.png',
    },
}

weChatOfficialAccounts - 公众号

版本 >= v1.3.2

类型：Url

默认值：""

公众号二维码图片，显示在页面右下角。只在文章页显示公众号，首页不显示。

window.cnblogsConfig = {
    weChatOfficialAccounts: '//xxxx.png',
}

5 个人配置分享

5.1 css路径

v1.3.3 base.min.css

5.2 博客侧边栏公告

<script type="text/javascript">
    // ---- 主页配置 ----
    window.cnblogsConfig = {
        GhVersions: 'v1.3.3', // 版本
        blogUser: "L-RUI", // 用户名
        blogAvatar: "https://files.cnblogs.com/files/Rui6/blogAvatar2.ico", // 用户头像
        //blogStartDate : "2020-04-10",                                                // 入园时间，年-月-日。
        menuUserInfoBgImg: 'https://files.dbnuo.com/wallpaper/menu_bg.gif', //菜单个人信息背景图片设置。



        // ---- 公众号图片配置 ----
        weChatOfficialAccounts: 'https://files.cnblogs.com/files/Rui6/We.ico',

        //自定义菜单导航
        menuNavList: [
            ['CSDN', 'https://blog.csdn.net/qq_45061258'],
            ['GitHub', 'https://github.com/L-Rui-G']
        ],


        // ---- 网站配置 ----
        webpageTitleOnblur: "(◍´꒳`◍) Hi, L-Rui", // 当前页失去焦点，页面title显示文字
        webpageTitleOnblurTimeOut: 500, // 当前页失去焦点，页面title变化，延时时间，单位毫秒
        webpageTitleFocus: "(*´∇｀*) 欢迎回来！", // 当前页获取焦点，页面title显示文字，显示后延时恢复原title
        webpageTitleFocusTimeOut: 1000, // 当前页获取焦点，页面title变化，延时时间，单位毫秒
        webpageIcon: "https://files.cnblogs.com/files/Rui6/blogAvatar2.ico", // 网站图标


        //打赏设置
        reward: {
            enable: true,
            wechatpay: 'https://images.cnblogs.com/cnblogs_com/Rui6/1848426/t_200916021730weixin.jpg?a=1605605943096',
            alipay: 'https://images.cnblogs.com/cnblogs_com/Rui6/1848426/t_200916021739zhifubao.jpg?a=1605605943096'

        },

        // ---- 主页配置 ----
        homeTopImg: [ // 主页图片Url，推荐尺寸>= 1920*1080，支持多张，每次刷新随机设置一张
            "https://img2020.cnblogs.com/blog/1772450/202011/1772450-20201113105542436-475532576.jpg"
        ],
        // ---- 随笔页配置 ----
        essayTopImg: [ // 随笔页图片Url，支持多张，每次刷新随机设置一张
            "https://img2020.cnblogs.com/blog/1772450/202011/1772450-20201113105542436-475532576.jpg"
        ],

        //日、夜间模式配置。页面使用日、夜间模式优先级：用户设置 > 自动切换 > 默认。
        switchDayNight: {
            enable: true,
            auto: {
                enable: false // 开启自动切换
            }
        },

        //homeBannerText: "路漫漫其修远兮，吾将上下而求索",     //主页banner上的标语，设置此选项会固定显示文字，默认为空，自动获取一句
        homeBannerTextType: "one", //每日获取一句话

        essayCodeHighlightingType: "highlightjs", //使用 highlightjs 插件渲染代码高亮。
        essayCodeHighlighting: "a11y-dark", //高亮的style

        // ---- 页脚配置 ----
        bottomBlogroll: [ // 友情链接，[[链接名,链接]....]
            ["BING", 'https://cn.bing.com/'],
            ["卡卡动漫", 'http://www.kakadm.com/'],
            ["百度贴吧", 'https://tieba.baidu.com/'],
            ["B站", 'https://www.bilibili.com/'],
            ["博客园地址", 'https://www.cnblogs.com/Rui6/'],
        ],

        // 页脚标语
        bottomText: {
            left: "路漫漫其修远兮", // 图标左侧文字
            right: "吾将上下而求索" // 图标右侧文字
        },

        //文章后缀配置，不配置使用默认。
        essaySuffix: {
            aboutHtml: "编程小萌新一名，希望从今天开始慢慢提高，一步步走向技术的高峰！", // 关于博主，不配置使用默认
            copyrightHtml: '', // 版权声明，不配置使用默认
            supportHtml: '', // 声援博主，不配置使用默认
        },




    }
</script>
<script src="https://cdn.jsdelivr.net/gh/BNDong/aaa@qq.com/src/script/simpleMemory.min.js"></script>

View Code

5.3 页脚 HTML 代码

<!--   网站统计  -->
<div id="cnzzProtocol"  style="display: none;">
    <span class="id_cnzz_stat_icon" id='cnzz_stat_icon_1279442252'></span>
    <script src='https://v1.cnzz.com/z_stat.php?id=1279442252&online=1&show=line' type='text/javascript'></script>
</div>

<!--   播放器  -->
<!-- require APlayer -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<!-- require MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/aaa@qq.com/dist/Meting.min.js"></script>
<meting-js    
        auto="https://y.qq.com/n/yqq/playlist/7787591166.html"
        fixed="true"

></meting-js>

相关标签： html java js python javascript

上一篇：非常实用的8种idea插件, 还不知道就out了！

下一篇： Windows10安装IDEA 2020.1.2及你懂得