300字范文 > 博客园SimpleMemory皮肤的页面美化--感谢BNDong大佬

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

时间：2022-12-17 13:19:43

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">blogsConfig = {GhVersions : 'v1.3.3', // 版本blogUser: "userName", // 用户名blogAvatar : "https://xxxx.png", // 用户头像blogStartDate : "-11-17", // 入园时间，年-月-日。入园时间查看方法：鼠标停留园龄时间上，会显示入园时间}</script><script src="/gh/BNDong/Cnblogs-Theme-SimpleMemory@v1.3.3/src/script/simpleMemory.min.js" defer></script>

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

3.5 开启公告控件

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

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

4 定制化设定

4.1 基础信息设置

blogUser - 用户昵称

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

blogsConfig = {blogUser: 'L-Rui',}

blogAvatar - 用户头像

类型：Url默认值：""

用户头像图片Url。

blogsConfig = {blogAvatar: '/avatar/1065454/1119225202.png',}

blogStartDate - 入园时间

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

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

blogsConfig = {blogStartDate: '-01-01',}

4.2网站配置

webpageTitleOnblur - 失去焦点标签文字

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

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

blogsConfig = {webpageTitleOnblur: '(oﾟvﾟ)ノ Hi',}

webpageTitleOnblurTimeOut - 失去焦点变化延时

类型：Number默认值：500

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

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

blogsConfig = {webpageTitleOnblurTimeOut: 500,}

webpageTitleFocus - 获取焦点标签文字

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

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

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

webpageTitleFocusTimeOut - 获取焦点变化延时

类型：Number默认值：1000

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

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

blogsConfig = {webpageTitleFocusTimeOut: 1000,}

webpageIcon - 网站图标

类型：Url默认值：""

网站图标图片Url。

blogsConfig = {webpageIcon: "/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小时制}}

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

blogsConfig = {switchDayNight: {enable: true,auto: {enable: true}},}

4.3 菜单配置

menuCustomList - 菜单数据

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

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

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

menuNavList - 菜单导航

版本 >= v1.1.2

类型：Array默认值：[]

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

blogsConfig = {menuNavList: [ // 列表数据 ['导航名称', '链接', 'icon']['我的博客1', '/bndong/', 'icon-github'],['我的博客2', '/bndong/', 'icon-github'],],}

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

版本 >= v1.1.5

类型：Url默认值：""

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

blogsConfig = {menuUserInfoBgImg: 'https://xxx,jpg',}

4.4页面动效配置

homeTopAnimationRendered - 是否渲染主页banner动效

类型：Boolean默认值：true

是否渲染主页banner动效。

blogsConfig = {homeTopAnimationRendered: true,}

homeTopAnimation - 主页banner动效配置

类型：Object默认值：

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

主页banner动效配置。

blogsConfig = {homeTopAnimation: {color : 'random',},}

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

类型：Boolean默认值：true

是否渲染文章页banner动效。

blogsConfig = {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动效配置。

blogsConfig = {essayTopAnimation: {triW : 14,triH : 20,},}

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

类型：Boolean默认值：true

是否渲染页面背景动效。

blogsConfig = {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}

页面背景动效配置。

blogsConfig = {backgroundAnimation: {colorSaturation: "60%",colorBrightness: "50%",},}

4.5主页配置

homeTopImg - 主页banner图片

类型：Array默认值：

["/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/home_top_bg.webp"]

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

blogsConfig = {homeTopImg: ["/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/home_top_bg.webp","/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/home_top_bg.webp"],}

homeBannerText - 主页banner上的标语

类型：StringorArray默认值：""

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

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

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

blogsConfig = {homeBannerText: "好好学习，天天向上！",}// blogsConfig = {homeBannerText: ["我是标语一","我是标语二","我是标语三","我是标语四",],}

homeBannerTextType - 标语获取源

版本 >= v1.1.3

类型：String默认值："jinrishici"

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

blogsConfig = {homeBannerTextType: "one",}/** 所有可配置项jinrishici：每次刷新随机获取一句古诗词。one：每日获取一句话*/

4.6 文章页配置

essayTopImg - 文章页banner图片

类型：Array默认值：

["/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/nothome_top_bg.webp"]

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

blogsConfig = {essayTopImg: ["/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/nothome_top_bg.webp","/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/nothome_top_bg.webp"],}

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

版本 >= v1.3.3

类型：Boolean默认值："false"

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

blogsConfig = {essayTitleStyle: true,}

essaySuffix - 文章后缀配置

类型：Object默认值：

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

blogsConfig = {essaySuffix: {aboutHtml: "I am a good person",},}

reward - 打赏

版本 >= v1.2.7

类型：Object默认值：

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

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

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

weChatOfficialAccounts - 公众号

版本 >= v1.3.2
类型：Url默认值：""
公众号二维码图片，显示在页面右下角。只在文章页显示公众号，首页不显示。

blogsConfig = {weChatOfficialAccounts: '//xxxx.png',}

5 个人配置分享

5.1 css路径

v1.3.3 base.min.css

5.2博客侧边栏公告

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='/z_stat.php?id=1279442252&online=1&show=line' type='text/javascript'></script></div><link rel="stylesheet" href="/npm/aplayer/dist/APlayer.min.css"><script src="/npm/aplayer/dist/APlayer.min.js"></script><script src="/npm/meting@2/dist/Meting.min.js"></script><meting-js auto="/n/yqq/playlist/7787591166.html"fixed="true"></meting-js>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。