欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

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

1. 前言说明

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

2. 入门准备

2.1 安装配置

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

2.2 后台配置

博客园后台设置

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

2.2 选项配置

选项页面:

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

2.3 确定使用的版本

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

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

3. 博客设置

3.1 设置博客皮肤

博客皮肤:SimpleMemory

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

3.2 设置页面定制CSS

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

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

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 - 菜单数据

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

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>