博客园美化

系统管理员 2023-06-02 14:53 45阅读 0赞

# 博客园美化 #

对博客园美化，基于博皮“SimpleMemor”进行的修改，首先要申请js权限。

## 博客侧边栏公告 ##

<script type="text/javascript">
        console.log=function(){};
    
        window.cnblogsConfig = {
            GhVersions    : 'v1.1.5.1', // 版本
            blogUser      : "武培轩", // 用户名
            blogAvatar    : "https://pic.cnblogs.com/avatar/1356806/20180320195124.png",
            blogStartDate : "2018-3-20", // 入园时间，年-月-日。入园时间查看方法：鼠标停留园龄时间上，会显示入园时间,
            webpageIcon: "https://files-cdn.cnblogs.com/files/wupeixuan/blog_logo.gif",
            fontIconExtend: "//at.alicdn.com/t/font_543384_ezv3l7gd9r7.css",
            //主页banner图片
            homeTopImg: [
                "https://images.cnblogs.com/cnblogs_com/wupeixuan/1186798/o_wallhaven-4ylgl0.jpg",
                "https://images.cnblogs.com/cnblogs_com/wupeixuan/1186798/o_wallhaven-ne7lr8.jpg",
                "https://images.cnblogs.com/cnblogs_com/wupeixuan/1186798/o_wallhaven-xl67ov.jpg",
                "https://images.cnblogs.com/cnblogs_com/wupeixuan/1186798/o_wallhaven-neqwon.jpg",
                "https://images.cnblogs.com/cnblogs_com/wupeixuan/1186798/o_wallhaven-lm2762.jpg",
            ],
            //侧边栏
            menuUserInfoBgImg: 'https://images.cnblogs.com/cnblogs_com/wupeixuan/1186798/o_menu_bg.gif',
            //文章页配置
            essayTopImg: [
                "https://images.cnblogs.com/cnblogs_com/wupeixuan/1186798/o_wallhaven-d5yzvg.jpg",
                "https://images.cnblogs.com/cnblogs_com/wupeixuan/1186798/o_wallhaven-4d38m0.jpg",
                "https://images.cnblogs.com/cnblogs_com/wupeixuan/1186798/o_wallhaven-4gj334.jpg",
                "https://images.cnblogs.com/cnblogs_com/wupeixuan/1186798/o_wallhaven-j82g35.jpg",
                "https://images.cnblogs.com/cnblogs_com/wupeixuan/1186798/o_wallhaven-r2yjg1.jpg",
                "https://images.cnblogs.com/cnblogs_com/wupeixuan/1186798/o_wallhaven-wymo2p.jpg",
            ],
            // ---- 页面动效配置 ----
            homeTopAnimationRendered: true, // true || false ,是否渲染主页头图动效
            homeTopAnimation: { // 主页头图动效设置
                radius: 15,
                density: 0.2,
                color: 'rgba(255,255,255, .2)', // 颜色设置，“random” 为随机颜色
                clearOffset: 0.3
            },
            essayTopAnimationRendered: true, // true || false ,是否渲染随笔页头图动效
            essayTopAnimation: { // 随笔页头图动效设置
                triW : 14,
                triH : 20,
                neighbours : ["side", "top", "bottom"],
                speedTrailAppear : .1,
                speedTrailDisappear : .1,
                speedTriOpen : 1,
                trailMaxLength : 30,
                trailIntervalCreation : 100,
                delayBeforeDisappear : 2,
                colors: [
                    '#96EDA6', '#5BC6A9',
                    '#38668C', '#374D84',
                    '#BED5CB', '#62ADC6',
                    '#8EE5DE', '#304E7B'
                ]
            },
    
            bgAnimationRendered: true, // true || false ,是否渲染背景动效
            backgroundAnimation : { // 背景动效设置
                colorSaturation: "60%",
                colorBrightness: "50%",
                colorAlpha: 0.5,
                colorCycleSpeed: 5,
                verticalPosition: "random",
                horizontalSpeed: 200,
                ribbonCount: 3,
                strokeSize: 0,
                parallaxAmount: -0.2,
                animateSections: true
            },
            
            homeBannerTextType: "one",
            //代码高亮配置
            essayCodeHighlightingType: 'highlightjs', // 代码主题插件类型：cnblogs || highlightjs || prettify
            essayCodeHighlighting: 'idea', // 代码高亮主题，具体主题参考文档
            //页脚标语
            bottomText: {
                left : "既然选择了远方",
                right: "便只顾风雨兼程"
            },
    
            //文章后缀配置
            essaySuffix: {
                codeImgUrl   : 'https://images.cnblogs.com/cnblogs_com/wupeixuan/1186798/o_wechat.png', // >= v1.1.5 左侧图片设置，不配置使用 window.cnblogsConfig.blogAvatar
                aboutHtml    : '敲代码，健身，读书。', // 关于博主，不配置使用默认
                copyrightHtml: '本文为博主原创文章，转载请注明出处。', // 版权声明，不配置使用默认
                supportHtml  : ''  // 声援博主，不配置使用默认
            }
        
        }
    </script>
    <script src="https://blog-static.cnblogs.com/files/wupeixuan/simpleMemory.min.js"></script>
    
    <script src="https://blog-static.cnblogs.com/files/wupeixuan/mouse-click.js"></script>
    <canvas width="1777" height="841" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>

## 页面定制CSS代码 ##

[页面定制CSS代码][CSS]

## 页脚Html代码 ##

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
    <title>Live2D</title>
    <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/wupeixuan/waifu.css"/>
    
    <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/wupeixuan/flat-ui.min1.css"/>
    </head>
    <body>
    <div class="waifu" id="waifu">
    <div class="waifu-tips" style="opacity: 1; font-size: 14px"></div>
    <canvas id="live2d" width="300" height="300" class="live2d"></canvas>
    <div class="waifu-tool">
    <span class="fui-home"></span>
    <span class="fui-chat"></span>
    <span class="fui-eye"></span>
    <span class="fui-user"></span>
    <span class="fui-photo"></span>
    <span class="fui-info-circle"></span>
    <span class="fui-cross"></span>
    </div>
    </div>
    <script src="https://blog-static.cnblogs.com/files/wupeixuan/live2d.js"></script>
    <script src="https://blog-static.cnblogs.com/files/wupeixuan/waifu-tips1.js"></script>
    <script type="text/javascript">initModel()</script>
    </body>
    </html>

转载于:https://www.cnblogs.com/wupeixuan/p/11433555.html

[CSS]: https://github.com/wupeixuan/Cnblogs-Theme-SimpleMemory/blob/master/src/style/base.css

发表评论取消回复

表情：

评论列表（有 0 条评论，45人围观）

还没有评论，来说两句吧...

相关阅读

相关博客园设置

![481755-20190812173753919-901666990.png][] 转载于:https://www.cnblogs.com/yuqilihualuo/p/

r囧r小猫/ 2023年08月17日 17:07/ 0 赞/ 188 阅读

相关博客园美化笔记

鼠标点击特效大概效果可以自己试着点点在页脚html代码处加入以下js代码即可 1 <script type="text/javascript">

逃离我推掉我的手/ 2023年08月17日 15:46/ 0 赞/ 138 阅读

相关可爱的博客园样式美化、自定义博客园主题样式

cute-cnblogs 说明 “我经常有那种感觉，如果这个事情来了，你却没有勇敢地去解决掉，它一定会再来。生活真是这样，它会一次次地让你去做这个功课

曾经终败给现在/ 2023年06月08日 02:37/ 0 赞/ 13 阅读

相关博客园美化

博客园美化对博客园美化，基于博皮“SimpleMemor”进行的修改，首先要申请js权限。博客侧边栏公告 <script type="text/jav

系统管理员/ 2023年06月02日 14:53/ 0 赞/ 46 阅读

相关关于此博客园及其美化

我的美化是从[西窗夜雨][Link 1]\\(dalao\\)那里拿来二次开发的. 而这位\\(dalao\\)是这份美化的源头:[自为风月马前卒][Link 2].

女爷i/ 2023年06月02日 11:56/ 0 赞/ 23 阅读

相关博客园背景美化

第一步：随便选一个模板（我用的是simplememory） ![1475885-20190401085852526-714263524.jpg][] 第二步：设置→博客设置

骑猪看日落/ 2022年01月12日 12:05/ 0 赞/ 407 阅读

相关美化博客园首页

一，更换背景： 1.首先需要上传几张图片到自己的博客园相册中：如图： ![1398504-20190413183038542-366492055.png][]

爱被打了一巴掌/ 2022年01月05日 20:13/ 0 赞/ 512 阅读

相关博客园美化-打赏代码

1、代码  <script> window.tctipConfig = { imagePrefi

骑猪看日落/ 2021年12月24日 14:17/ 0 赞/ 369 阅读

相关博客园文章排版美化---增加返回顶部按钮

增加返回顶部按钮（1）页面定制css代码 back-to-top { background-color: 00CD00; bott

╰+哭是因爲堅強的太久メ/ 2021年12月11日 01:41/ 0 赞/ 398 阅读

相关加入博客园

是的。用博客园系统 [![嚯哟][1747790-20190722030235184-2051595569.png]][1747790-20190722030235

旧城等待，/ 2021年10月23日 15:32/ 0 赞/ 506 阅读