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

<div align="center">

<h3><b> cute-cnblogs </b><h3>

</div>

说明 <br/> “我常常有那种感受，若是这个事情来了，你却没有勇敢地去解决掉，它必定会再来。生活真是这样，它会一次次地让你去作这个功课直到你学会为止。” —— 《像我这样笨拙地生活》<br/> 博客园样式一直是我想改的，以前使用过别人写好的样式模版，加了不少东西，惋惜有一天全丢失了，博客园帮忙找回来了一部分，可是不全面，基本至关于废了，因而决定重头再来，本身写一套样式。麋鹿鲁哟的博客园<br/> 须要文件的能够来 github ，喜欢我写的样式能够帮我点个 star 喔 ღゝ◡╹)ノ♡ <br/> 好了，废话很少说，开始~ <br/>

博客示例

ღゝ◡╹)ノ♡ 麋鹿鲁哟的博客园

介绍

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

• :book: 本样式以简约可爱为核心，美化博客园的显示效果，增长自定义导航；
• :shaved_ice: 基于博客园主题“SimpleMemory”进行的样式修改；
• :strawberry: 支持响应式；

功能

• :apple: 导航点点动效随鼠标而动
• :tangerine: 导航栏自定义
• :cherries: 页面诗意诗句模块
• :banana: 看板娘-猫(ฅ´ω`ฅ)
• :peach: 音乐-网易云
• :pineapple: 上吊的猫（PS：回到顶部）
• :watermelon: 底部跳动的鱼<・)))><<
• :grapes: 点击页面跳动的小豆子及可爱的文字
• :lemon: 评论增长OωO聊天表情
• :tomato: 页面不一样的导航背景及人物背景
• :pear: github跳转小三角

使用方法

• 首先记得申请JS权限
• 其次博客皮肤选择 SimpleMemor
• 勾选禁用模板默认CSS

<br/>

• 建立一个新随笔（这里使用选项中的TinyMCE(推荐)来编写的） —— “友链”；
• 点击 “编辑 HTML 源代码” 插入如下代码，点击更新；
• 只勾选 高级选项中的 “发布”、“容许评论”;

<p style="text-align: center;">欢迎来到个人友链小屋</p>
<div class="friendsbox">&nbsp;</div>

<br/>

• 最后分别复制如下区域代码，并根据参数更改数据（PS：路径可进行更改也可不更改，自行down文件上传到博客园文件中，并更改引入路径）

（PS：建议将https://blog-static.cnblogs.com/files/elkyo/cute-cnblogs.css引入内的内容放到 页面定制CSS代码 区域）

页首Html代码

<link rel='stylesheet' href='https://blog-static.cnblogs.com/files/elkyo/cute-cnblogs.css'>
  <link rel='stylesheet' href='https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css'>
  <link rel="stylesheet" href="https://blog-static.cnblogs.com/files/elkyo/siyuan.css" />
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://blog-static.cnblogs.com/files/elkyo/monitoring.js"></script>
  <link rel="stylesheet" href="https://blog-static.cnblogs.com/files/elkyo/OwO.min.css" />
  <script src="https://blog-static.cnblogs.com/files/elkyo/OwO.min.js"></script>
  <script src="https://blog-static.cnblogs.com/files/elkyo/cute-cnblogs.js"></script>
  <script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
  <script src="https://blog-static.cnblogs.com/files/elkyo/three.min.js"></script>
  <script src='https://blog-static.cnblogs.com/files/elkyo/star.js'></script>
  <script>
  miluframe({
      /*我的连接地址*/
    Youself:'https://www.cnblogs.com/miluluyo/',
    /*导航栏信息*/
    custom:[{
      name:'留言板',
      link:'https://www.cnblogs.com/miluluyo/p/11578505.html',
      istarget:false
    },{
      name:'技能树',
      link:'https://miluluyo.github.io/',
      istarget:true
    }],
    /*本身的友链页面后缀*/
    Friends_of_the:'p/11633791.html',
    /*本身的友链信息*/
    resume:{
        "name":"麋鹿鲁哟",
        "link":"https://www.cnblogs.com/miluluyo",
        "headurl":"https://images.cnblogs.com/cnblogs_com/elkyo/1558759/o_o_my.jpg",
        "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"
      }],
    /*点击页面时候的弹出文本显示*/
    clicktext:new Array("ヾ(◍°∇°◍)ﾉﾞ加油哟~ ——麋鹿鲁哟","生活是没有标准答案的。  ——麋鹿鲁哟"),
    /*github连接*/
    githuburl:'https://github.com/miluluyo'
  })
  </script>

页脚Html代码

<!-- 底部加了小鱼<・)))><<~ -->
  <div id="jsi-flying-fish-container" class="container"></div>
  <script src='https://blog-static.cnblogs.com/files/elkyo/fish.js'></script>
  <style>
  @media only screen and (max-width: 767px){
  #sidebar_search_box input[type=text]{width:calc(100% - 24px)}
  }
  </style>

  <!--音乐-->
  <link rel="stylesheet" href="https://blog-static.cnblogs.com/files/elkyo/APlayer.min.css">
  <div id="player" class="aplayer aplayer-withlist aplayer-fixed" data-id="3025663508" data-server="netease" data-type="playlist" data-order="random" data-fixed="true" data-listfolded="true" data-theme="#2D8CF0"></div>
  <script src="https://blog-static.cnblogs.com/files/elkyo/APlayer.min.js"></script>
  <script src="https://blog-static.cnblogs.com/files/elkyo/Meting.min.js"></script>

  <!--看板娘 - 猫-->
  <script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
  <script>
      L2Dwidget.init({
          "model": {
              jsonPath: "https://unpkg.com/live2d-widget-model-hijiki/assets/hijiki.model.json",<!--这里改模型，前面后面都要改-->
              "scale": 1
          },
          "display": {
              "position": "left",<!--设置看板娘的上下左右位置-->
              "width": 100,
              "height": 200,
              "hOffset": 70,
              "vOffset": 0
          },
          "mobile": {
              "show": true,
              "scale": 0.5
          },
          "react": {
              "opacityDefault": 0.7,<!--设置透明度-->
              "opacityOnHover": 0.2
          }
      });
  window.onload = function(){
       $("#live2dcanvas").attr("style","position: fixed; opacity: 0.7; left: 70px; bottom: 0px; z-index: 1; pointer-events: none;")
  }
  </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/elkyo/mouse-click.js"></script>

参数说明

<table style="text-align: center;"> <thead> <tr> <th>名称</th> <th>类型</th> <th>默认值/实例</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>Youself</td> <td>字符串</td> <td>https://www.cnblogs.com/miluluyo/</td> <td>我的博客园首连接</td> </tr> <tr> <td>custom</td> <td>数组</td> <td>[{<br> name:'相册',<br> link:'https://www.cnblogs.com/elkyo/gallery.html',<br> istarget:false<br> },{<br> name:'技能树',<br> link:'https://miluluyo.github.io/',<br> istarget:true<br> },{<br> name:'留言板',<br> link:'https://miluluyo.github.io/p/11578505.html',<br> istarget:false<br> }]</td> <td>导航信息<br> name 导航名<br> link 导航连接<br> istarget true跳转到新页面上，false当前页面打开</td> </tr> <tr> <td>Friends_of_the</td> <td>字符串</td> <td>11633791</td> <td>友链文章的后缀名，</td>若字符串为空则不显示友链</td> </tr> <tr> <td>resume</td> <td>对象</td> <td>{<br> "name":"麋鹿鲁哟",<br> "link":"https://www.cnblogs.com/miluluyo/",<br> "headurl":"https://images.cnblogs.com/cnblogs_com/<br>elkyo/1558759/o_o_my.jpg",<br> "introduction":"大道至简，知易行难。"<br> }</td> <td>本身的友链信息<br> name 导航名<br> link 导航连接<br> headurl 头像<br> introduction 语录</td> </tr> <tr> <td>unionbox</td> <td>数组</td> <td>[{<br> "name":"麋鹿鲁哟",<br> "introduction":"生活是没有标准答案的。",<br> "url":"https://www.cnblogs.com/miluluyo",<br> "headurl":"https://images.cnblogs.com/cnblogs_com/<br>elkyo/1558759/o_o_my.jpg"<br> },{<br> "name":"麋鹿鲁哟的技能树",<br> "introduction":"大道至简，知易行难。",<br> "url":"https://miluluyo.github.io/",<br> "headurl":"https://images.cnblogs.com/cnblogs_com/<br>elkyo/1558759/o_o_my.jpg"<br> }]</td> <td>友链数组<br> name 昵称<br> introduction 标语<br> url 连接地址<br> headurl 头像地址</td> </tr> <tr> <td>clicktext</td> <td>新数组</td> <td>new Array("ヾ(◍°∇°◍)ﾉﾞ加油哟~ ——麋鹿鲁哟",<br>"生活是没有标准答案的。 ——麋鹿鲁哟"),</td> <td>点击页面时候的弹出显示</td> </tr> <tr> <td>githuburl</td> <td>字符串</td> <td>https://github.com/miluluyo</td> <td>github连接</td> </tr> </tbody> </table>

最后

• 为了响应你们的号召，方便你们技术交流，如今创建了一个微信群，若是你们有须要能够扫码（或者搜我微信号：s978761）加我好友，我邀请你加入～本群是一个纯交流学习工做的群，不许发布广告、营销相关的信息！对了，加我记得备注上：博客园+名称 喔~

原文出处：https://www.cnblogs.com/miluluyo/p/11677303.html