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

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

2 入门准备

2.1 安装配置

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

2.2 后台配置

博客园后台设置

2.3 选项配置

选项页面：

2.4 确定使用的版本

选择版本 下载对应的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/Cnblogs-Theme-SimpleMemory@v1.3.3/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/Cnblogs-Theme-SimpleMemory@master/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/Cnblogs-Theme-SimpleMemory@master/img/webp/home_top_bg.webp"
]

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

window.cnblogsConfig = {
    homeTopImg: [
        "https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/home_top_bg.webp",
        "https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/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/Cnblogs-Theme-SimpleMemory@master/img/webp/nothome_top_bg.webp"
]

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

window.cnblogsConfig = {
    essayTopImg: [
        "https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/nothome_top_bg.webp",
        "https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/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',
}

4.7 页脚配置

footerStyle - 页脚样式

版本 >= v1.1.8

• 类型：Int
• 默认值：2

页脚样式：

footerStyle: 1

footerStyle: 2

window.cnblogsConfig = {
    footerStyle: 1,
}

bottomBlogroll - 友情链接

• 类型：Array
• 默认值：[]

友情链接。

window.cnblogsConfig = {
    bottomBlogroll: [ // 友情链接，[[链接名,链接]....]
        ["申请坑位", 'https://msg.cnblogs.com/send/BNDong'],
        ["申请坑位", 'https://msg.cnblogs.com/send/BNDong'],
        ["申请坑位", 'https://msg.cnblogs.com/send/BNDong'],
        ["申请坑位", 'https://msg.cnblogs.com/send/BNDong'],
        ["申请坑位", 'https://msg.cnblogs.com/send/BNDong'],
    ],
}

bottomText - 页脚标语

• 类型：Object

• 默认值：

{
    icon: "❤️",   // v1.3.0 已废弃该配置
    iconFont: {  // v1.3.0 新增配置
        icon:  "icon-xl", // iconfont 图标名称
        color: "red",     // 图标颜色
        fontSize: "16px"  // 图标大小
    },
    left : "",
    right: ""
}

页脚标语。

v1.1.4 版本之前不配置使用默认标语，v1.1.4 版本及以后不配置不会显示。

window.cnblogsConfig = {
    bottomText: {
        left : "好好学习",
        right: "天天向上",
    },
}

4.8 广告配置

advertising

版本 >= v1.3.0

• 类型：Boolean
• 默认值：true

是否显示博客园广告。

window.cnblogsConfig = {
    advertising: true,
}

5 个性化扩展

5.1 网站统计

本主题整合 CNZZ 网站统计，并对样式进行了优化。如果需要本功能，请首先去 CNZZ 配置网站的统计，然后修改下面的代码，添加至页脚 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>

如何配置 CNZZ

CNZZ 网址：U-Web

注册/登录你的账户，立即使用并开始配置站点。

添加站点

获取统计 ID

站点设置

开启详细数据。

5.2 音乐播放器

播放器使用开源项目：metowolf/MetingJS

如需使用播放器，请根据项目文档配置代码，添加至页脚Html代码中。

已知问题：使用此播放器插件，会导致博客园原有的页面锚点链接失效（主题设置的不受影响）！不影响基本使用，请大家权衡是否使用！

目前发现受影响的有：1) Markdown 文章中 [toc] 生成的目录链接跳转。2) 博客园原有的返回顶部链接跳转。

 

<!--   播放器  -->
<!-- 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/meting@2/dist/Meting.min.js"></script>
<meting-js
  auto="https://y.qq.com/n/yqq/playlist/7787591166.html"
  fixed="true"
></meting-js>

 

 

 

5.3  鼠标点击特效特效1

点击后出现社会主义核心价值观。

粘贴到页脚。

<script type="text/javascript">
/* 鼠标特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array("❤富强❤","❤民主❤","❤文明❤","❤和谐❤","❤自由❤","❤平等❤","❤公正❤","❤法治❤","❤爱国❤","❤敬业❤","❤诚信❤","❤友善❤");
        var $i = $("<span></span>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
});
</script>

　

 

　　鼠标点击特效特效2

 

点击出现烟花。

粘贴到页脚

 <script src="https://blog-static.cnblogs.com/files/yjlblog/cursor-effects.js"></script>
 <canvas width="1366" height="662" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>

 

6 个人配置分享

6.1 css路径

 v1.3.3 base.min.css

6.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/Cnblogs-Theme-SimpleMemory@v1.3.3/src/script/simpleMemory.min.js"></script>

6.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/meting@2/dist/Meting.min.js"></script>
<meting-js    
        auto="https://y.qq.com/n/yqq/playlist/7787591166.html"
        fixed="true"

></meting-js>

7 内容补充

目前本博客没有列出该皮肤所有功能模块，大家有需求的可以直接关注BNDong大神，先去浏览他的博客内容，本博客也会持续更新！！！

有问题的，欢迎大家在下方留言评论。

__EOF__

本文作者：Ray
本文链接：https://www.cnblogs.com/Rui6/p/14041329.html
关于博主：分享、记录日常遇到的问题合集！
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！