您好,欢迎访问代理记账网站
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

可爱博客园皮肤美化样式

cute-cnblogs

自定义博客园样式美化使用说明

博客演示

ღゝ◡╹)ノ♡ 小猫の学习笔记

博客介绍

可爱的博客园样式美化、自定义博客园样式 ღゝ◡╹)ノ♡

  • 📖 本样式以简约可爱为核心,美化博客园的显示效果,增加自定义导航
  • 🍧 基于博客园主题 SimpleMemory 进行的样式修改
  • 🍓 阅读目录导航
  • ☁️ 主题皮肤切换(浅白、暗黑、阅读)
  • 🌴 支持响应式
  • 🍎 顶部背景点点动效随鼠标而动
  • 🍊 导航栏自定义
  • 🍒 页面诗句
  • 🍌 打字猫(ฅ´ω`ฅ)
  • 🍉 底部跳动的鱼
  • 🍇 鼠标特效
  • 🍋 评论OωO聊天表情
  • 🍐 侧边栏显示
  • 🌱 侧边栏公告栏及个人信息显示
  • 🎍 仿主播点赞功能点击推荐
  • ❄️ 赞赏模块功能

使用说明

基本操作

请按照顺序进行操作

  • 选定博客皮肤 Custom

  • 申请JS权限

  • 勾选禁用模板默认CSS

  • 获取数据(不然点击头像的关注会失败)

    • 找一个没有登陆的浏览器访问自己的博客园,F12弹出窗口,找到 +加关注,复制follow括号里的内容,暂且先存在一个地方
  • 创建一个新随笔,标题 友链

  • 写入以下代码,修改自己的文本内容后,点击更新;

  • 只勾选高级选项中的 发布允许评论

    <p style="text-align: center;">欢迎来到小猫の友链小屋</p>
    <div class="friendsbox">
    <div id="app">
    <h6 style="text-align: center; color: #2daebf;">个人收藏网站推荐,排列不分先后,随机渲染的喔!</h6>
    <div class="unionbox-box" style="display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 1.5rem; margin-top: 1.5rem;">&nbsp;</div>
    <hr style="position: relative; margin: 1rem 0; border: 1px dashed #9eabb3; width: calc(100%); height: 0;" />
    <h5 style="text-align: center; color: #2daebf;">如需友链,请发链接至邮箱<br><br>你的邮箱</h5>
    </div>
    </div>
    
  • 最后分别复制以下区域代码,并根据参数更改数据

  • 路径,链接可改也可不改

  • 文件地址

    github

  • 特别说明

    博客园内需要填写的代码都在 >> code << 文件夹中,页面样式所引用的文件都在 >> blog << 文件夹中

页面代码

页面定制 CSS 代码

复制 https://blog-static.cnblogs.com/files/svyt/CSS%E4%BB%A3%E7%A0%81.css 的文件内容放到 页面定制CSS代码 区域

博客侧边栏公告

<link href="https://blog-static.cnblogs.com/files/svyt/tippy.min.css" rel="stylesheet">
<script src="https://blog-static.cnblogs.com/files/svyt/jquery2.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/svyt/tippy.js"></script>
<script src="https://blog-static.cnblogs.com/files/svyt/milusidebar.js"></script>
<script>
    milusidebar({
        'names': '小猫の学习笔记',
        /*你的博客园名呐*/
        'notice': '<b>温馨提示</b><span>小猫已下线</span><br><b>(^_−)☆</b>',
        /*里面文字自己可以更改喔*/
        'headerUrl': 'https://blog-static.cnblogs.com/files/svyt/notice.gif',
        /*这个是公告栏的背景图啦,我觉得这个可爱,如果你有更好看的可以自行更改喔*/
        'follow': '51121c94-ff3d-4b48-d7fb-08d85494b69b',
        /*还记的开始让你复制follow括号里的内容吗,对,就放到这里就好啦*/
        'sidebarInfo': [
            [{
                'icon': '#icon-weixin',
                'url': '',
                'title': '公众号',
                'classname': 'popper_weixin',
                'click': false
            }, {
                'icon': '#icon-weibobangding',
                'url': 'https://weibo.com/u/5911913957',
                'title': '新浪微博'
            }, {
                'icon': '#icon-csdn',
                'url': 'https://blog.csdn.net/qq_45039940',
                'title': 'CSDN'
            }, {
                'icon': '#icon-github1',
                'url': 'https://github.com/silence9year',
                'title': 'github'
            }, ]
        ],
        /*这个模块是个人信息内那些小图标们,别忘记更改喔,具体参数,可以参考下面的表格喔*/
        'signature': '人间不值得(。•́︿•̀。)',
        /*来一句你自己喜欢的句子吧*/
        'popper_weixin': '<div class="popper_box weChat"><p><b>很高兴认识你呢~  φ(>ω<*)</b> </p><div class="popper_box_con"><div class="popper_box_con_li"><img src="https://blog-static.cnblogs.com/files/svyt/code.gif" alt="迷路软件园">公众号:迷路软件园<p>邮箱:3440401663@qq.com</p><p>(记得备注 博客园 喔)</div></div>',
        /*这里是微信图标的弹窗内容,可以自行更改内容喔*/
        'portrait': 'https://blog-static.cnblogs.com/files/svyt/tx.gif'
    }) /*这个是头像图片喔,你可以上传到相册里,然后F12获取,或者使用博客园的那个链接也可以的撒~*/
</script>

页首Html代码

<div id="set_btn_box">
    <div class="set_btn fly_top fadeIn animated">
        <svg class="icon" aria-hidden="true"><use xlink:href="#icon-zhiding"></use></svg>
    </div>
    <div class="set_btn article_icon_btn catalogue_btn">
        <svg class="icon" aria-hidden="true" style="color:#97A1A7"><use xlink:href="#icon-dagang"></use></svg>
    </div>
    <div class="set_btn article_icon_btn comment">
        <a href="#comment_form_container"><svg class="icon" aria-hidden="true" style="color:#97A1A7"><use xlink:href="#icon-linedesign-01"></use></svg></a>
    </div>
    <div class="set_btn skin_btn">
        <svg class="icon" aria-hidden="true" style="color:#97A1A7"><use xlink:href="#icon-pifu"></use></svg>
    </div>
    <div class="set_btn gratuity">
        <svg class="icon" aria-hidden="true" style="color:#97A1A7"><use xlink:href="#icon-dashang"></use></svg>
    </div>
    <div class="set_btn article_icon_btn artice_recommend">
        <svg class="icon" aria-hidden="true" style="color:#97A1A7"><use xlink:href="#icon-tuijian2"></use></svg>
    </div>
    <canvas id="thumsCanvas" width="200" height="400" style="width:100px;height:200px"></canvas>
    <div class="set_btn catalogue">
        <svg class="icon" aria-hidden="true" style="color:#97A1A7"><use xlink:href="#icon-cebianlan-"></use></svg>
    </div>
</div>
<!-- 打字猫 -->
<div class="cat">
    <svg id="bongo-cat" viewBox="0 0 787.3 433.8">
        <defs>
            <symbol id="eye" data-name="eye" viewBox="0 0 19.2 18.7">
                <circle cx="9.4" cy="9.1" r="8"></circle>
                <path
                    d="M16.3,5.1a1.3,1.3,0,0,1-1.4-.3,7.2,7.2,0,0,0-4.5-2.6A7.2,7.2,0,0,0,5.5,3.5,6.8,6.8,0,0,0,2.8,7.8a6.8,6.8,0,0,0,1,4.8,6.2,6.2,0,0,0,4,2.7,6.1,6.1,0,0,0,4.6-.7,6.7,6.7,0,0,0,2.9-3.7,6.4,6.4,0,0,0-.5-4.5c-.1-.2.8-1,1.5-1.3s2.2,0,2.3.5a9.4,9.4,0,0,1-.2,7.2,9.4,9.4,0,0,1-5.1,5.1,9,9,0,0,1-7,.2A9.6,9.6,0,0,1,1,13.5,9.2,9.2,0,0,1,.4,6.6,8.9,8.9,0,0,1,4.6,1.3,9,9,0,0,1,11.2.2,9.3,9.3,0,0,1,16.7,4C16.9,4.3,17,4.8,16.3,5.1Z">
                </path>
            </symbol>
            <symbol id="paw-pads" data-name="paw-pads" viewBox="0 0 31.4 33.9">
                <path
                    d="M6.8,16a3.7,3.7,0,0,1,1.1,2.8,3.2,3.2,0,0,1-1.6,2.6L5,21.8H4.4a2.8,2.8,0,0,1-1.8.3A4.2,4.2,0,0,1,.2,19.1,7.7,7.7,0,0,1,0,17.6a2.8,2.8,0,0,1,.6-2,3.2,3.2,0,0,1,2.1-.8H4A5,5,0,0,1,6.8,16Zm7.3-4.8a1.8,1.8,0,0,0,.7-.5l.7-.4a3.5,3.5,0,0,0,1.1-1,3.2,3.2,0,0,0,.3-1.4,1.4,1.4,0,0,0-.2-.6,3.4,3.4,0,0,0-.3-2.4,3.2,3.2,0,0,0-2.1-1.5H13.1a4.7,4.7,0,0,0-1.6.4,2,2,0,0,0-.9.9l-.4.6v.4a6.1,6.1,0,0,0-.5,1.2,4.3,4.3,0,0,0,0,1.6,3.5,3.5,0,0,0,.5,2l.7.6a3.3,3.3,0,0,0,1.7.7A3,3,0,0,0,14.1,11.2ZM22.7,7l.6.2h.3A2.3,2.3,0,0,0,25,6.8l.4-.3.6-.3a7.5,7.5,0,0,0,1.5-.9,4.2,4.2,0,0,0,.8-1.2,1.9,1.9,0,0,0,.1-1.5A2.6,2.6,0,0,0,27.5,1,3.5,3.5,0,0,0,23.6.3a3.8,3.8,0,0,0-2,1.5,4.8,4.8,0,0,0-.7,2,3.6,3.6,0,0,0,.9,2.6ZM31,24.1a13.5,13.5,0,0,0-2.2-4.7,36.6,36.6,0,0,0-3.2-3.9,5.3,5.3,0,0,0-5-1.9,10.5,10.5,0,0,0-4.5,2.2A5.6,5.6,0,0,0,13.5,20a15.1,15.1,0,0,0,1.2,6.3c.8,2,1.7,4,2.6,5.9a1.6,1.6,0,0,0,1.5.8,1.7,1.7,0,0,0,1.9.9,17.1,17.1,0,0,0,8.7-4.8,8.2,8.2,0,0,0,1.7-2C31.6,26.3,31.3,25,31,24.1Z"
                    fill="#ef97b0"></path>
            </symbol>
        </defs>
        <g id="head">
            <g id="head__outline">
                <path
                    d="M303.2,186.3c4-7,14.8-20.2,20-26,17-19,34.6-34.9,43-41l12-8s16.6-32,21-33c9-2,33,22,33,22s20-9,79,7c41,11.1,47,14,57,22,7.5,6,18,16,18,16s33.7-19.5,41-15-2,66-2,66,5.9,12.9,11,22c9.1,16.2,13.6,20.2,19,31,3.6,7.2,8.4,28.5,10.5,43.5l-385-62Z"
                    fill="#fff"></path>
                <path
                    d="M302.9,186.9c-1.2,3-5.9,12.6-9,18.8l-12.5,25.5-.6-1.2c32.2,4.8,64.4,9.2,96.6,13.6s64.4,8.9,96.5,13.7,64.3,9.7,96.4,14.9,64.1,10.5,96.2,15.8l-5.6,5.5c-1.2-8.5-2.8-17.1-4.8-25.6-1-4.1-2.1-8.4-3.4-12.3l-.5-1.4-.5-1.4-.6-1.3-.7-1.3a59.5,59.5,0,0,0-3.1-5.5c-2.2-3.6-4.7-7.2-7.1-11s-4.8-7.6-7-11.5c-4.5-7.9-8.3-15.9-12.1-24a4,4,0,0,1-.3-2.6h0c1.4-9.1,2.7-18.2,3.7-27.4.5-4.5.9-9.1,1.2-13.7s.4-9.1.2-13.4a26.4,26.4,0,0,0-.8-6,8.1,8.1,0,0,0-.3-1.1c-.1-.3-.2-.4-.1-.3h.3c0,.1.1.1,0,.1h-.6a11.9,11.9,0,0,0-2.5.2,16.3,16.3,0,0,0-3,.7,56.7,56.7,0,0,0-6.2,2.1,212.6,212.6,0,0,0-24.5,11.9h-.1a3.9,3.9,0,0,1-4.7-.6c-4.9-4.7-10-9.4-15.1-13.8a86.6,86.6,0,0,0-7.9-6,46.1,46.1,0,0,0-8.5-4.6c-6-2.6-12.6-4.6-19.2-6.7l-19.8-5.7a324.9,324.9,0,0,0-40-8.9,196.8,196.8,0,0,0-20.2-1.8c-1.7,0-3.4-.1-5.1,0h-2.5l-2.5.2-2.5.2-2.4.4-2.4.5-1.1.3h-.5l-.4.2H433a2.5,2.5,0,0,1-2.6-.7c-4.6-4.6-9.5-9.1-14.5-13.2a82.7,82.7,0,0,0-7.9-5.7L403.9,81a10.8,10.8,0,0,0-4-.9c-.1,0-.3,0-.3.1h0l-.7.5-1.5,1.7c-1,1.2-2,2.6-2.9,3.9s-3.6,5.5-5.3,8.3c-3.5,5.7-6.8,11.4-9.9,17.3h0l-.4.4-10.2,6.6a53.6,53.6,0,0,0-4.9,3.4l-4.6,3.8c-6.2,5.1-12.1,10.6-17.9,16.2s-11.3,11.4-16.7,17.4c-2.7,3-5.3,6.1-7.8,9.2s-5,6.3-7.4,9.5c-4.2,5.6-7,10-5.7,7.1a34.1,34.1,0,0,1,2.1-3.8l3.8-5.6c2.9-4,6.3-8.3,8.5-10.9s4.4-5.2,6.7-7.7l6.9-7.4c4.7-4.9,9.4-9.7,14.3-14.3s9.8-9.3,15-13.7l4-3.2,4.2-2.9,8.3-5.7-.4.4c3-5.9,6.1-11.8,9.4-17.7,1.6-2.9,3.3-5.8,5.1-8.6l2.9-4.3,1.8-2a7.5,7.5,0,0,1,1.3-1.1c.1-.2.6-.4,1-.5l.9-.2h1.7l1.4.2,2.7.8c1.7.7,3.3,1.5,4.8,2.3a84,84,0,0,1,8.5,5.7A175.7,175.7,0,0,1,434,98.5l-2.9-.6.8-.3.7-.2L434,97l2.7-.7,2.7-.5a23,23,0,0,1,2.6-.3l2.7-.3,2.7-.2h5.3a182.1,182.1,0,0,1,21,1.3,332.5,332.5,0,0,1,41.1,8.4l20,5.5c6.7,2,13.4,4,20.1,6.7a65.3,65.3,0,0,1,9.8,5.1c3.1,2.1,5.9,4.3,8.6,6.5,5.4,4.5,10.6,9.2,15.7,14l-4.8-.6c4.1-2.4,8.2-4.6,12.4-6.7s8.6-4.2,13-6c2.3-.9,4.6-1.7,7-2.4a23.4,23.4,0,0,1,3.8-.9,20,20,0,0,1,4.4-.4h1.3l1.5.4a5.1,5.1,0,0,1,1.7.7l.9.7.8.7a8.3,8.3,0,0,1,1.6,2.6,12.7,12.7,0,0,1,.8,2.3,44.6,44.6,0,0,1,1.1,7.7c.2,5,.1,9.7-.1,14.4s-.7,9.5-1.2,14.1c-.9,9.4-2.1,18.6-3.6,27.9l-.3-2.6c3.7,7.9,7.5,15.8,11.8,23.3,2.1,3.7,4.4,7.4,6.8,11s4.9,7.2,7.3,11.1c1.3,2,2.4,4,3.5,6.1a10.9,10.9,0,0,0,.8,1.5l.8,1.8.7,1.7.6,1.7c1.5,4.4,2.6,8.7,3.7,13.1a262,262,0,0,1,5.2,26.4,4.9,4.9,0,0,1-4.1,5.6h-1.5c-32.1-5-64.2-9.9-96.3-15.1s-64.1-10.6-96.1-16.1-64-11.4-96-17.4-63.9-11.9-95.9-17.4h-.1a.8.8,0,0,1-.6-.9v-.2l16.6-32.1C299.8,192.2,304.1,183.9,302.9,186.9Z">
                </path>
            </g>
            <g id="head__face">
                <g id="eyes">
                    <use width="19.2" height="18.7" transform="translate(474.8 195.2)" xlink:href="#eye"></use>
                    <use width="19.2" height="18.7" transform="matrix(-0.51, -0.85, 0.82, -0.5, 370.39, 192.59)"
                        xlink:href="#eye"></use>
                </g>
                <g id="mouth">
                    <path d="M399.2,186.3c.9,3.6,2.6,7.8,6,9,6.4,2.3,19-6,19-6s4.1,12.4,10,15,10.7-1.7,16-6"
                        fill="#fff"></path>
                    <path
                        d="M450.2,198.3c.6,1.2.2,1.9-.2,2.2a36.7,36.7,0,0,1-7.6,4.9,14.9,14.9,0,0,1-4.8,1.4h-1.4l-1.3-.2-1.4-.4-1.3-.6a21.6,21.6,0,0,1-6.4-7.2,52.8,52.8,0,0,1-4-8.3l3.8,1.3a62.3,62.3,0,0,1-7.1,4.1,32.1,32.1,0,0,1-7.9,2.8,13.2,13.2,0,0,1-4.9.2l-1.4-.3a7.5,7.5,0,0,1-1.3-.6,7.9,7.9,0,0,1-2.3-1.6,16.8,16.8,0,0,1-2.9-4,24.1,24.1,0,0,1-1.6-4.2c-.1-.5,1.6-1.3,3-1.4s3.5.2,3.6.6a10.3,10.3,0,0,0,2.6,4.9l.7.5h2.4l1.5-.2a28.4,28.4,0,0,0,6.5-2c2.1-1,4.3-2.1,6.3-3.3h.1a2.5,2.5,0,0,1,3.4.9l.3.5a43.1,43.1,0,0,0,3.2,7.7,19.8,19.8,0,0,0,2.2,3.4,8.1,8.1,0,0,0,2.6,2.6,5,5,0,0,0,3,.7,10.8,10.8,0,0,0,3.7-1,33.4,33.4,0,0,0,7.2-4.3C448.8,197.4,449.5,197.2,450.2,198.3Z">
                    </path>
                </g>
            </g>
        </g>
        <g id="table">
            <path d="M65.7,181.8l714,124c0,74-2,54-2,128l-673-161Z" fill="#fff"></path>
            <path
                d="M786.7,304.2c-2.7,1.2-10.8,0-16.1-.9L31.1,176.4c-5.2-.9-8.9-3.8-6.2-5s14.3-1.4,19.5-.5L777.1,300.6C782.3,301.6,789.4,303.1,786.7,304.2Z">
            </path>
        </g>
        <g id="laptop">
            <g id="laptop__base">
                <polygon points="641.9 304.1 454.7 348.2 103.8 271.3 254.6 230.3 641.9 304.1" fill="#f2f2f2"></polygon>
                <path
                    d="M641.9,304.1c1.5-.1-2.3,1.5-10.3,3.6-28.9,7.5-58.1,15.2-87.7,22.6s-59.1,14.5-88.4,21.3l-.8.2-.8-.2-349.5-78-1.1-.2-8.7-1.9,8.6-2.3,150.6-41.5.6-.2h.7c62.5,11.7,125.5,23.6,188.4,35.9s125.6,25.1,188,37.6c8,1.6,11.9,3,10.4,3a185.6,185.6,0,0,1-18.4-2.6c-61.9-11.2-123.6-22.2-185-33.5s-122.7-23.1-184.4-35h1.2L104.4,273.4h-.1v-4.3l351.2,75.7h-1.5c28.3-6.7,56.3-13.3,84.3-19.5s56.5-12,85.2-18.1C631.3,305.6,640.4,304.1,641.9,304.1Z"
                    fill="#231f20"></path>
            </g>
            <g id="laptop__keyboard">
                <polygon points="371.1 274.8 256.8 253.5 257 252.7 266.2 251.1 382.4 271.5 382.3 272.3 371.1 274.8"
                    fill="#3e3e54"></polygon>
                <polygon points="237.4 265.6 221.3 262.4 221.4 261.7 230.2 260.2 246.8 262.6 246.6 263.4 237.4 265.6"
                    fill="#3e3e54"></polygon>
                <polygon points="474.6 312.9 249.9 268.1 250.1 267.3 259.2 265.8 487.7 309.6 487.5 310.5 474.6 312.9"
                    fill="#3e3e54"></polygon>
                <polygon points="411.8 309.4 204.2 266.7 204.4 266 212.9 264.5 423.9 306.3 423.7 307.2 411.8 309.4"
                    fill="#3e3e54"></polygon>
                <polygon points="450 317.3 428.5 312.9 428.8 312 440.7 310.6 462.7 314.1 462.5 315 450 317.3"
                    fill="#3e3e54"></polygon>
                <polygon points="201.6 273.9 187.5 270.9 187.7 270.2 196 268.7 210.4 271 210.3 271.7 201.6 273.9"
                    fill="#3e3e54"></polygon>
                <polygon points="222.6 278.3 208.1 275.3 208.3 274.5 216.9 273.1 231.8 275.4 231.6 276.2 222.6 278.3"
                    fill="#3e3e54"></polygon>
                <polygon points="362.9 308.1 231.5 280.2 231.7 279.5 240.7 278.1 374.2 305.1 374 305.9 362.9 308.1"
                    fill="#3e3e54"></polygon>
                <polygon points="444.3 288.4 385.2 277.4 385.4 276.5 396.6 274.9 456.9 285.1 456.7 285.9 444.3 288.4"
                    fill="#3e3e54"></polygon>
                <polygon points="526.1 303.6 460.1 291.3 460.3 290.4 472.8 288.9 540.1 300.2 539.9 301.1 526.1 303.6"
                    fill="#3e3e54"></polygon>
                <polygon points="426.2 321.6 376.1 310.9 376.3 310.1 387.4 308.7 438.5 318.5 438.3 319.4 426.2 321.6"
                    fill="#3e3e54"></polygon>
                <g>
                    <polygon points="410.6 286.5 399.1 288 398.9 288.8 499.9 308.3 513.3 305.9 513.5 305 410.6 286.5"
                        fill="#3e3e54"></polygon>
                    <polygon points="395.7 283.7 395.9 282.8 248.2 255.7 239.2 257.3 239 258 384.3 286 395.7 283.7"
                        fill="#3e3e54"></polygon>
                </g>
                <polygon points="371.3 273.9 256.9 252.7 266.4 250.3 382.4 271.5 371.3 273.9" stroke="#000"
                    stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></polygon>
                <polygon points="237.6 264.9 221.4 261.7 230.4 259.4 246.8 262.6 237.6 264.9" stroke="#000"
                    stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></polygon>
                <polygon points="474.8 312 250 267.3 259.4 265.1 487.7 309.6 474.8 312" stroke="#000"
                    stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></polygon>
                <polygon points="412 308.5 204.4 266 213.1 263.8 423.9 306.3 412 308.5" stroke="#000"
                    stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></polygon>
                <polygon points="450.2 316.4 428.8 312 440.9 309.7 462.8 314.1 450.2 316.4" stroke="#000"
                    stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></polygon>
                <polygon points="201.7 273.1 187.7 270.2 196.2 268 210.4 271 201.7 273.1" stroke="#000"
                    stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></polygon>
                <polygon points="222.8 277.6 208.3 274.5 217.1 272.4 231.8 275.4 222.8 277.6" stroke="#000"
                    stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></polygon>
                <polygon points="363.1 307.3 231.7 279.5 240.9 277.3 374.2 305.1 363.1 307.3" stroke="#000"
                    stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></polygon>
                <polygon points="444.6 287.5 385.4 276.5 396.8 274.1 456.9 285 444.6 287.5" stroke="#000"
                    stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></polygon>
                <polygon points="526.3 302.7 460.3 290.4 473 288 540.1 300.2 526.3 302.7" stroke="#000"
                    stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></polygon>
                <polygon points="426.4 320.7 376.3 310.1 387.6 307.9 438.5 318.5 426.4 320.7" stroke="#000"
                    stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></polygon>
                <g>
                    <polygon points="410.7 285.6 399.1 288 500.1 307.4 513.5 305 410.7 285.6" stroke="#000"
                        stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></polygon>
                    <polygon points="395.9 282.8 248.4 255 239.2 257.3 384.5 285.2 395.9 282.8" stroke="#000"
                        stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"></polygon>
                </g>
            </g>
            <g id="paw-right">
                <g id="paw-right--down">
                    <path
                        d="M293.2,191.3l10-7s-18.4,11.1-24,20-13,20.4-9,31c4.7,12.4,20.5,15.7,22,16,20,3.8,47.8-24.3,47.8-24.3s1.9-3.3,2.2-3.7"
                        fill="#fff"></path>
                    <path
                        d="M342.1,223.4c.9,1.2.2,2.8-.3,3.7l-.4.7-.3.3a118.1,118.1,0,0,1-14.2,12.3,83.2,83.2,0,0,1-16.2,9.8,43.9,43.9,0,0,1-9.3,3,26.3,26.3,0,0,1-10.1.2,44.5,44.5,0,0,1-9.3-3.2,34.2,34.2,0,0,1-8.3-5.5,23,23,0,0,1-5.8-8.5,21.3,21.3,0,0,1-1.3-10.3,34.9,34.9,0,0,1,2.7-9.7,76.1,76.1,0,0,1,4.5-8.5l2.4-4,.6-1,.8-1.1a15.6,15.6,0,0,1,1.6-2,49.9,49.9,0,0,1,7-6.8,136.1,136.1,0,0,1,15.3-11.2,3.1,3.1,0,0,1,4.4,1,3,3,0,0,1-.8,4.2H305l-8.6,6.2c-.9.6-2.7-.5-3.1-1.9s.5-4.4,1.5-5l6.6-4.5,3.5,5.3A131.9,131.9,0,0,0,290,197.4a52.7,52.7,0,0,0-6.4,6,6.5,6.5,0,0,0-1.3,1.6l-.6.8-.7,1-2.4,3.8c-1.6,2.6-3.1,5.2-4.4,7.8a27.7,27.7,0,0,0-2.4,8.1,15.6,15.6,0,0,0,.8,8,17.4,17.4,0,0,0,4.4,6.7,27.2,27.2,0,0,0,7.1,4.9,39.5,39.5,0,0,0,8.1,3,21.6,21.6,0,0,0,8.4,0,37.8,37.8,0,0,0,8.5-2.6,84.9,84.9,0,0,0,15.7-9,142.4,142.4,0,0,0,14.1-11.6l-.3.3,1.1-1.8C340.3,223.4,341.3,222.2,342.1,223.4Z">
                    </path>
                </g>
                <g id="paw-right--up">
                    <g>
                        <path
                            d="M282.2,215.2c-1.6-1.6-12.8-17.9-14-34.3-.1-2.5,1.7-16,12.9-22.4s22.3-1.9,26.2.4c12.2,7.3,21.2,19.1,22.8,22.4"
                            fill="#fff"></path>
                        <path
                            d="M330,181.2a2.4,2.4,0,0,1-2.6-1.3,71.4,71.4,0,0,0-9.8-10.8,64,64,0,0,0-11.7-8.6,26.3,26.3,0,0,0-6.5-2.3,26.9,26.9,0,0,0-6.9-.6,24.9,24.9,0,0,0-6.7,1.3,20.8,20.8,0,0,0-5.8,3.3,23.1,23.1,0,0,0-7.6,11,32.5,32.5,0,0,0-1.4,6.6,6.6,6.6,0,0,0,.1,1.4l.2,1.8c.1,1.2.4,2.3.6,3.5a65,65,0,0,0,4.8,13.4c1,2.2,2.2,4.3,3.4,6.4a43.1,43.1,0,0,0,3.9,5.9.6.6,0,0,1,0,.6c0,.2-.2.4-.4.7a5.7,5.7,0,0,1-1.5,1.6c-1.3.6-4.1.1-4.6-.6a89.5,89.5,0,0,1-7.2-13.7,63.7,63.7,0,0,1-4.3-14.9,25.7,25.7,0,0,1-.5-4c0-.3-.1-.6-.1-1v-1.2a12.5,12.5,0,0,1,.2-2.1,35.2,35.2,0,0,1,2.4-7.8,28.6,28.6,0,0,1,4.1-6.9,24.6,24.6,0,0,1,6.1-5.5,26.2,26.2,0,0,1,15.5-4.2,28.9,28.9,0,0,1,7.8,1.2l3.8,1.3,1.8.9,1.8,1a78.2,78.2,0,0,1,11.9,9.6,80.2,80.2,0,0,1,9.7,11.8C331.1,179.7,331.4,181,330,181.2Z">
                        </path>
                    </g>
                    <use width="31.4" height="33.93" transform="translate(273.2 166.1) rotate(-5.6)"
                        xlink:href="#paw-pads"></use>
                </g>
            </g>
            <g id="laptop__terminal">
                <path
                    d="M316.9,238.7,153.5,205.2a5.1,5.1,0,0,1-4-3.5L109.8,75.4c-1-3.3,1.9-6.6,5.6-6.3L277.9,84.5a5.2,5.2,0,0,1,4.6,3.7l40.7,144.4C324.2,236.2,320.8,239.5,316.9,238.7Z">
                </path>
                <path
                    d="M317.3,238.7a7.9,7.9,0,0,0,2.2-.7,5,5,0,0,0,2.2-1.9,3.7,3.7,0,0,0,.6-2.9l-.3-.8-.2-.9a15.4,15.4,0,0,1-.5-1.7L300,154.6l-10.7-37.5L284,98.3l-2.6-9.4a7.9,7.9,0,0,0-.4-.9,4.3,4.3,0,0,0-.4-.7,3.3,3.3,0,0,0-1.5-1.1l-.9-.3h-1.1l-2.4-.2L119.2,71.2l-2.4-.3h-2.2a3.3,3.3,0,0,0-2.8,1.6,2.4,2.4,0,0,0-.5,1.4v.8c.1.1.1.2.1.4l.2.6,1.5,4.6L119,98.8l11.8,37.3,11.7,37.2,5.9,18.6,2.9,9.3a3.4,3.4,0,0,0,2.2,2h1l1.2.3,2.4.4,153,31.1c4.3.9,7.4,2.9,5.2,3.3s-11.7-.1-16-1l-75.8-15.7L186.6,214l-19-3.9-9.5-2-4.7-1h-.7l-.8-.3a6.1,6.1,0,0,1-1.4-.7,7.6,7.6,0,0,1-2.3-2.4l-.4-.8a1.9,1.9,0,0,1-.2-.7l-.4-1.2-.7-2.3-1.4-4.6-2.9-9.2-5.8-18.5-11.5-36.9-11.5-37-2.9-9.2L109,78.5l-.7-2.3v-.6c0-.3-.1-.6-.1-.8a4.8,4.8,0,0,1,0-1.7,6.8,6.8,0,0,1,3.8-5,10.1,10.1,0,0,1,3-.7h2.6l9.6,1L204.1,76l38.5,3.7,19.3,1.9,9.6.9,4.8.5h2.6a6.6,6.6,0,0,1,2.7,1.2,7.2,7.2,0,0,1,1.9,2.4,12.1,12.1,0,0,1,.5,1.4l.3,1.1,1.3,4.7,2.6,9.3,5.2,18.6,10.4,37.3,10.4,37.3,5.3,18.6,2.6,9.4,1.3,4.6.6,2.4a7,7,0,0,1,.4,2.7,5.7,5.7,0,0,1-1.8,3.7,5.9,5.9,0,0,1-3.4,1.6,3.5,3.5,0,0,1-2.1-.4C316.7,239,316.8,238.9,317.3,238.7Z">
                </path>
            </g>
            <g id="laptop__terminal_code_scene">
                <g id="laptop__code">
                    <g stroke="#3DE0E8" stroke-width="6" transform="matrix(-1 0 0 1 278 103)">
                        <g id="f3" transform="translate(0 76)">
                            <path class="typing-animation" id="f3-l9" d="M8,25L8,25" stroke-dasharray="60,10"></path>
                            <path class="typing-animation" id="f3-l8" d="M8,13L8,13" stroke-dasharray="50,10"></path>
                            <path class="typing-animation" id="f3-l7" d="M0,1L0,1" stroke-dasharray="25,10"></path>
                        </g>
                        <g id="f2" transform="translate(0 38)">
                            <path class="typing-animation" id="f2-l6" d="M8,25L8,25" stroke-dasharray="40,10"></path>
                            <path class="typing-animation" id="f2-l5" d="M8,13L8,13" stroke-dasharray="60,10"></path>
                            <path class="typing-animation" id="f2-l4" d="M0,1L0,1" stroke-dasharray="30,10"></path>
                        </g>
                        <g id="f1">
                            <path class="typing-animation" id="f1-l3" d="M8,25L8,25" stroke-dasharray="60,10"></path>
                            <path class="typing-animation" id="f1-l2" d="M8,13L8,13" stroke-dasharray="60,10"></path>
                            <path class="typing-animation" id="f1-l1" d="M0,1L0,1" stroke-dasharray="60,10"></path>
                        </g>
                    </g>
                </g>
            </g>
            <g id="laptop__cover" style="mix-blend-mode: hard-light;">
                <polygon points="440.7 347.2 90.3 275.6 4.7 3.8 353 36.7 440.7 347.2" fill="#f2f2f2"></polygon>
                <path
                    d="M440.4,346.4c-2.5-5.3-6.5-18.8-9-27.4L390.7,178c-13.6-46.8-26.9-93.7-40.3-140.6l2.3,2L4.4,7.1,7.9,2.8,94,274.5l-2.9-2.6q83.7,16.8,166.8,34.2t166.8,35.4c8.8,1.9,17.5,5.1,14.7,5.5s-6.3-.2-12-.9-12.3-1.5-16.8-2.3Q330.5,328.1,250,312.1c-53.5-10.8-107.1-21.7-160.4-32.7l-2.3-.5-.6-2.1L1.5,4.8,0,0,5,.5,353.3,34l1.8.2.5,1.8q20.7,73.8,41.2,147.8l40.6,147.5C439.8,340.1,442.9,351.7,440.4,346.4Z">
                </path>
            </g>
        </g>
        <g id="paw-left">
            <g id="paw-left--up">
                <g>
                    <path
                        d="M545.4,261.9c-7.1-13-12.9-31.1-13.3-37.6-.6-9,0-15.6,5.2-22.2s15-9.8,22.7-8.8a26.7,26.7,0,0,1,17.3,9.4c5.3,5.8,9.4,12.9,11.6,16.6"
                        fill="#fff"></path>
                    <path
                        d="M588.9,219.2c-1.4.4-2.3-.7-2.8-1.4a93.9,93.9,0,0,0-8.9-12.5c-3.3-3.9-7.1-7-11.7-8.6a24.2,24.2,0,0,0-7.1-1.4,24.5,24.5,0,0,0-7.1.7,27,27,0,0,0-6.6,2.7,21,21,0,0,0-5.2,4.6,20.6,20.6,0,0,0-3.5,6.1,22.2,22.2,0,0,0-1.3,6.9,47.3,47.3,0,0,0,.1,7.5,52.2,52.2,0,0,0,1.4,7.1c1.4,4.8,3.1,9.7,5,14.4a147.7,147.7,0,0,0,6.5,13.9c.4.7-1,2.3-2.4,2.6s-4-.6-4.4-1.4c-2.3-4.8-4.3-9.7-6.1-14.6a128.8,128.8,0,0,1-4.6-15.3c-.3-1.3-.5-2.6-.7-4a16.4,16.4,0,0,1-.2-2.2v-2a57,57,0,0,1,.4-8.2,27.2,27.2,0,0,1,2.3-8.2c.7-1.3,1.4-2.5,2.2-3.7l1.3-1.7,1.4-1.6a28.8,28.8,0,0,1,7-5,27.6,27.6,0,0,1,8-2.5,25.6,25.6,0,0,1,8.3-.2,27.4,27.4,0,0,1,15.1,6.7,50.6,50.6,0,0,1,5.5,5.9,111.3,111.3,0,0,1,8.7,13.2C589.8,217.7,590.3,218.9,588.9,219.2Z">
                    </path>
                </g>
                <use width="31.4" height="33.93" transform="matrix(0.99, -0.03, 0.04, 1, 539.85, 203.52)"
                    xlink:href="#paw-pads"></use>
            </g>
            <g id="paw-left--down">
                <path
                    d="M538.2,239.3c-3.2,1.6-33,10.8-37,28-.4,1.8-2.1,18.9,7,26,5.5,4.3,12.7,2.8,25,0,10.3-2.3,19-5.8,40-16,9.1-4.4,16.6-8.2,22-11"
                    fill="#fff"></path>
                <path
                    d="M595.1,266.4c.1,1.4-1.4,2.4-2.4,2.9l-18.3,9.4c-6.2,3.1-12.3,6.1-18.6,9a120.8,120.8,0,0,1-19.6,7.2l-5.1,1.2-5.1,1.1a43.4,43.4,0,0,1-5.2.9,33.8,33.8,0,0,1-5.6.3,17.8,17.8,0,0,1-5.8-1.5,6.1,6.1,0,0,1-1.4-.7l-1.3-.9-2.2-2a23.6,23.6,0,0,1-5.2-10.2,44.5,44.5,0,0,1-1.3-10.9c0-.9.1-1.8.1-2.7a6.6,6.6,0,0,0,.1-1.4v-.7c.1-.3.1-.7.2-.9a21.6,21.6,0,0,1,2.1-5.5,33.4,33.4,0,0,1,7.1-8.7,67.1,67.1,0,0,1,8.7-6.4,121.7,121.7,0,0,1,19-9,1.5,1.5,0,0,1,1.7.6,3.4,3.4,0,0,1,.9,1.9c.1,1.5-1.6,4.2-2.6,4.6a91.1,91.1,0,0,0-17.8,8.5,40.1,40.1,0,0,0-7.6,5.8,22.8,22.8,0,0,0-5.2,7.3l-.4,1-.3,1a1.7,1.7,0,0,0-.2.5v.4c-.1.4-.1.8-.2,1.2s-.1,3.1-.1,4.7a35.4,35.4,0,0,0,1.4,9.3,15.6,15.6,0,0,0,4.5,7.3c2,1.9,4.7,2.6,7.8,2.5a55.9,55.9,0,0,0,9.7-1.2l4.9-1.1,4.9-1.1a121,121,0,0,0,18.8-6.8c12.4-5.3,24.6-11.5,36.8-17.4C593.4,265.4,595,264.9,595.1,266.4Z">
                </path>
            </g>
        </g>
    </svg>
</div>
<script src='https://blog-static.cnblogs.com/files/svyt/canvas2.js'></script>

页脚HTML代码

<style id="ceshicss">
        @media (max-width: 767px) {
        #set_btn_box {
            width: 100vw;
            left: 0;
            right: 0;
            bottom: 0;
            background: hsla(0, 0%, 100%, .6);
            height: 49px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 40px;
            border-top: 1px solid #e8e8e8;
            box-sizing: border-box;
        }
        .set_btn {
            margin-top: 0;
        }
        .set_btn.fly_top.fadeIn.animated {
            position: absolute;
            right: 10px;
            bottom: 60px;
        }
        .container {
            bottom: 50px
        }
        #mainContent {
            width: 90%
        }
</style>
<link href="https://blog-static.cnblogs.com/files/svyt/tippy.min.css" rel="stylesheet">
<script src="https://blog-static.cnblogs.com/files/svyt/popper.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/svyt/tippy.js"></script>
<link rel='stylesheet' href='https://blog-static.cnblogs.com/files/svyt/animate.min.css'>
<script src="https://blog-static.cnblogs.com/files/svyt/font_1825850_klax1ao4o6.js"></script>
<script src="https://blog-static.cnblogs.com/files/svyt/three.min.js"></script>
<script src='https://blog-static.cnblogs.com/files/svyt/star.js'></script>
<link rel="stylesheet" href="https://blog-static.cnblogs.com/files/svyt/OwO.min.css" />
<script src="https://blog-static.cnblogs.com/files/svyt/OwO.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/svyt/cute-cnblogs3.js"></script>
<script src="https://blog-static.cnblogs.com/files/svyt/monitoring2.js"></script>

<script>
    miluframe({
        Youself: 'https://www.cnblogs.com/svyt/',
        /*个人的博客园链接*/
        /*博客园导航信息*/
        custom: [{
            name: '首页',
            link: 'https://www.cnblogs.com/svyt/',
            istarget: false
        }, {
            name: '管理',
            link: 'https://i.cnblogs.com/',
            istarget: true
        }, {
            name: '维护',
            link: 'https://www.cnblogs.com/svyt/p/14802689.html',
            istarget: false
        }, {
            name: '相册',
            link: 'https://www.cnblogs.com/svyt/p/14802697.html',
            istarget: false
        }, {
            name: '留言板',
            link: 'https://www.cnblogs.com/svyt/p/14802703.html',
            istarget: false
        }, {
            name: '联系',
            link: 'https://msg.cnblogs.com/send/%E5%B0%8F%E7%8C%AB%E3%81%AE%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0',
            istarget: true
        }, {
            name: '技能树',
            link: 'https://www.kancloud.cn/han88829/book/830432',
            istarget: true
        }, {
            name: '友链',
            link: 'https://www.cnblogs.com/svyt/p/14794338.html',
            istarget: false
        }, {
            name: '投喂',
            link: 'https://www.cnblogs.com/svyt/p/14794091.html',
            istarget: false
        }],
        /*友链信息*/
        unionbox: [{
            "name": "小猫の学习笔记",
            "introduction": "好累呀☆⌒(>。≪)",
            "url": "",
            "headurl": "https://blog-static.cnblogs.com/files/svyt/tx.gif"
        }, {
            "name": "小猫の学习笔记",
            "introduction": "该睡觉了(^_−)☆",
            "url": "",
            "headurl": "https://blog-static.cnblogs.com/files/svyt/tx.gif"
        }],
        /*浏览器顶部小图标*/
        logoimg: 'https://blog-static.cnblogs.com/files/svyt/logo.ico',
        /*文章页面标题前的图标,此处图标有扩展,下面会提到图标*/
        cuteicon: ['icon-caomei', 'icon-boluo', 'icon-huolongguo', 'icon-chengzi', 'icon-hamigua', 'icon-lizhi', 'icon-mangguo', 'icon-liulian', 'icon-lizi', 'icon-lanmei', 'icon-longyan', 'icon-shanzhu', 'icon-pingguo', 'icon-mihoutao', 'icon-niuyouguo', 'icon-xigua', 'icon-putao', 'icon-xiangjiao', 'icon-ningmeng', 'icon-yingtao', 'icon-taozi', 'icon-shiliu', 'icon-ximei', 'icon-shizi'],
        /*赞赏,若true则显示此按钮,false则不显示*/
        isGratuity: true,
        /*赞赏按钮焦点显示赞赏内容,内容可自行更改*/
        gratuity: '<div class="popper_box"><div class="popper_box_con"><p>最近好穷好穷呀!<br>没钱买小鱼干了<br>(。•́︿•̀。)</p><div class="popper_box_con_li"><img src="https://blog-static.cnblogs.com/files/svyt/cute2.gif" alt=""></div></div></div>'
    })
</script>
<!-- 点赞 -->
<canvas width="1777" height="841" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>
<script src="https://blog-static.cnblogs.com/files/miluluyo/mouse-click.js"></script>

<!-- 以下内容是否添加你随意 -->

<script>
    /*在文章页面添加古诗词*/
    $("#navigator").after('<div class="poem-wrap"><div class="poem-border poem-left"></div><div class="poem-border poem-right"></div><h1>学诗两句</h1><div id="poem_sentence"></div><div id="poem_info"></div></div>')
</script>
<script src="https://blog-static.cnblogs.com/files/svyt/jinrishici.js" charset="utf-8"></script>
<script type="text/javascript">
    jinrishici.load(function(result) {
        var sentence = document.querySelector("#poem_sentence")
        var info = document.querySelector("#poem_info")
        sentence.innerHTML = result.data.content
        info.innerHTML = '【' + result.data.origin.dynasty + '】' + result.data.origin.author + '《' + result.data.origin.title + '》'
    });
</script>

<script type="text/javascript">
    /* 鼠标特效,我觉得太花哨了就注释了,喜欢的自己打开注释就可以 */
    var a_idx = 0;
    jQuery(document).ready(function($) {
        $("body").click(function(e) {
            var a = new Array("❥(ゝω・✿ฺ)", "(・ω<) てへぺろ", "(ゝω・)", "(・ω<)", "(•́へ•́╬)", "(;′⌒`)", "( Ĭ ^ Ĭ )", "ಠ╭╮ಠ", "(。・ˇдˇ・。)", " ヽ(。>д<)p");
            var le = Math.ceil(Math.random() * a.length);
            var $i = $("<span></span>").text(a[le]);
            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
                },
                2000,
                function() {
                    $i.remove();
                });
        });
    });
</script>

侧边栏参数说明

名称类型默认值/实例描述
names字符串'麋鹿鲁哟'博客园名称
notice字符串'<b>温馨提示</b><span><a href="https://github.com/miluluyo/cute-cnblogs" target="_black">cute-cnblogs</a>  样式已开源</span><b style="margin-top: 3px;"><a style="font-size:10px" href="https://www.cnblogs.com/IsAlpaca/" target="_black">查看一期样式</a></b>'公告内容
headerUrl字符串'https://images.cnblogs.com/cnblogs_com/miluluyo/1765646/o_200519075219notice5.png'公告栏的背景图
follow字符串'a1e76459-101d-47af-a8b6-08d523685c8c'复制follow括号里的内容,这是关注的那个码
sidebarInfo数组[[ {'icon':'#icon-github1','url':'https://github.com/miluluyo','title':'github'}, {'icon':'#icon-weixin','url':'','title':'微信','classname':'popper_weixin','click':false}, {'icon':'#icon-QQ','url':'http://wpa.qq.com/msgrd?v=3&uin=978761587&site=qq&menu=yes','title':'QQ'}, {'icon':'#icon-juejin','url':'https://juejin.im/user/5d18adce5188256e98090e33','title':'掘金'} ],[ {'icon':'#icon-weibobangding','url':'https://www.weibo.com/6001406082/profile?topnav=1&wvr=6','title':'微博'}, {'icon':'#icon-csdn','url':'https://blog.csdn.net/qq_39394518','title':'CSDN'}, {'icon':'#icon-bilibili','url':'https://space.bilibili.com/100007925','title':'bilibili'}, {'icon':'#icon-yuquemianlogo','url':'https://www.yuque.com/miluluyo','title':'语雀'} ]]个人信息内那些小图标们
icon 图标
url 跳转链接
title 提示名字
classname 要添加的class名
click 是否允许点击跳转
本框架有扩展的icon,文件在 github 中的 icon 文件夹内,可以下载去查看
signature字符串'靡不有初 鲜克有终'个人信息签名 (写一句喜欢的话吧)
popper_weixin字符串'< div class="popper_box">< p>< b>很高兴认识你鸭~ (づ。◕ᴗᴗ◕。)づ< /b> < /p>< div class="popper_box_con">< div class="popper_box_con_li">< img src="https://images.cnblogs.com/cnblogs_com/miluluyo/1765646/o_200614064005qrcode.jpg" alt="">公众号:麋鹿鲁哟< /div>< div class="popper_box_con_li">< img src="https://images.cnblogs.com/cnblogs_com/miluluyo/1493340/t_wxh.jpg" alt="">微信号:s978761< /div>< /div>< p>(加我记得备注 博客园 喔)< /div>'微信焦点弹窗,内容可自行更改,可以放一些公众号啊啥的~
portrait字符串'https://images.cnblogs.com/cnblogs_com/miluluyo/1765646/o_200515061851tx.jpg'头像图片路径

页脚参数说明

名称类型默认值/实例描述
Youself字符串https://www.cnblogs.com/miluluyo/个人博客园首链接
custom数组[{ name:'首页', link:'https://www.cnblogs.com/miluluyo/', istarget:false },{ name:'联系', link:'https://msg.cnblogs.com/send/%E9%BA%8B%E9%B9%BF%E9%B2%81%E5%93%9F', istarget:true },{ name:'技能树', link:'https://miluluyo.github.io/', istarget:true },{ name:'留言板', link:'https://www.cnblogs.com/miluluyo/p/11578505.html', istarget:false },{ name:'相册', link:'https://www.cnblogs.com/miluluyo/gallery.html', istarget:false },{ name:'友链', link:'https://www.cnblogs.com/miluluyo/p/11633791.html', istarget:false },{ name:'维护', link:'https://www.cnblogs.com/miluluyo/p/12092009.html', istarget:false },{ name:'投喂', link:'https://www.cnblogs.com/miluluyo/p/gratuity.html', istarget:false },{ name:'管理', link:'https://i.cnblogs.com/', istarget:true }]导航信息
name 导航名
link 导航链接
istarget true跳转到新页面上,false当前页面打开
resume对象{
"name":"麋鹿鲁哟",
"link":"https://www.cnblogs.com/miluluyo/",
"headurl":"https://images.cnblogs.com/cnblogs_com/
elkyo/1558759/o_o_my.jpg",
"introduction":"大道至简,知易行难。"
}
自己的友链信息
name 导航名
link 导航链接
headurl 头像
introduction 语录
unionbox数组[{
"name":"麋鹿鲁哟",
"introduction":"生活是没有标准答案的。",
"url":"https://www.cnblogs.com/miluluyo",
"headurl":"https://images.cnblogs.com/cnblogs_com/
elkyo/1558759/o_o_my.jpg"
},{
"name":"麋鹿鲁哟的技能树",
"introduction":"大道至简,知易行难。",
"url":"https://miluluyo.github.io/",
"headurl":"https://images.cnblogs.com/cnblogs_com/
elkyo/1558759/o_o_my.jpg"
}]
友链数组
name 昵称
introduction 标语
url 链接地址
headurl 头像地址
clicktext数组[{ field: 'name', literal: '昵称', },{ field: 'introduction', literal: '标语', },{ field: 'url', literal: '链接地址', },{ field: 'headurl', literal: '头像地址', }]友链表格头信息,这项可以忽略掉
logoimg字符串'https://images.cnblogs.com/cnblogs_com/miluluyo/1765646/o_200519070633f12.png'浏览器顶部小图标
cuteicon数组['icon-caomei','icon-boluo','icon-huolongguo','icon-chengzi','icon-hamigua','icon-lizhi','icon-mangguo','icon-liulian','icon-lizi','icon-lanmei','icon-longyan','icon-shanzhu','icon-pingguo','icon-mihoutao','icon-niuyouguo','icon-xigua','icon-putao','icon-xiangjiao','icon-ningmeng','icon-yingtao','icon-taozi','icon-shiliu','icon-ximei','icon-shizi']文章页面标题前的图标,此处图标我只放入了一些水果的icon,不过可以自己引入文件进行修改名字添加自己想加的,本框架有扩展的icon,文件在 github 中的 icon 文件夹内,可以下载去查看
gratuity字符串'<div class="popper_box"><p><b>要请我喝奶茶吗 (づ。◕ᴗᴗ◕。)づ</b> </p><div class="popper_box_con"><div class="popper_box_con_li"><img src="https://images.cnblogs.com/cnblogs_com/miluluyo/1765646/o_200521053817wx.png" alt="">微信扫码</div><div class="popper_box_con_li"><img src="https://images.cnblogs.com/cnblogs_com/miluluyo/1765646/o_200521053827zfb.png" >支付宝扫码</div></div><p><b>留下一句你觉得很励志与美的话给我吧~</b>  <b><a href="https://www.cnblogs.com/miluluyo/p/12930946.html">GO</a></b></div>'赞赏按钮焦点显示赞赏内容,内容可自行更改
isGratuity布尔值true默认true,若true则显示此按钮,false则不显示

自定义样式

当前框架使用了一张图片,可以换成自己喜欢的图片,在CSS样式中

 #blogTitle{background:url(https://images.cnblogs.com/cnblogs_com/miluluyo/1764887/o_20051406472117.jpg) center center / cover no-repeat #222;overflow:hidden;width:100%;height:40vh;max-height:40vh;box-shadow:0 1px 2px rgba(150,150,150,.7);       /*搜索这个 更换 background: url() 里的链接 即可*/

更改鼠标样式

*{cursor: url(https://files-cdn.cnblogs.com/files/miluluyo/cursora.ico),auto;}  /* url可更换为你想更换的图标样式(ico文件可上传在博客园文件中,之后获取路径 */

字体颜色及样式

/* html中引入 */
<link rel="stylesheet" href="https://blog-static.cnblogs.com/files/miluluyo/siyuan.css" />
/*修改字体*/
*{font-family: "Noto Sans SC";font-weight: 100;}
/*修改默认a标签颜色*/
a:visited,a:link{color: #2daebf;text-decoration: none;}
a:hover{color: #f60;text-transform: none}
/*字体大小及颜色*/
#cnblogs_post_body p{font-size: 1rem;}
body, textarea, input, button, select, keygen, legend{color:#7f8c93}

浏览器图标

// href 可更换为自己的图标链接(文件可上传在博客园相册中,上传ok后点进图片F12获取路径即可)
$("head").append('<link type="image/x-icon" rel="icon"  href="https://images.cnblogs.com/cnblogs_com/elkyo/1762178/o_200511031646f12.png">')

顶部背景图

/* href 可更换为自己的图片链接(文件可上传在博客园相册中,获取路径即可)*/
#blogTitle {
    background: url(http://api.dujin.org/bing/1366.php) center center / cover no-repeat rgb(34, 34, 34);
}

页面诗句模块

// 此处调用今日诗词API
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
<script type="text/javascript">
  jinrishici.load(function(result) {
    var sentence = document.querySelector("#poem_sentence")
    var info = document.querySelector("#poem_info")
    sentence.innerHTML = result.data.content
    info.innerHTML = '【' + result.data.origin.dynasty + '】' + result.data.origin.author + '《' + result.data.origin.title + '》'
  });
</script>

分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进