soarli开源开放平台

1.Instant.Page

使用方法：

JS

以下代码三选一：


                    <script src="https://open.soarli.top/instantclick/js/instantclick-1.2.2.js" type="module"></script>
                    <script src="https://open.soarli.top/instantclick/js/instantclick-3.0.0.js" type="module"></script>
                    <script src="https://open.soarli.top/instantclick/js/instantclick-5.1.0.js" type="module"></script>

2.优雅地回顶部

使用方法：

HTML

引入JS修改HTML：


                    <script src="//open.soarli.top/bysoarli/gotop.js"></script>
                    <a href="#" onclick="MGJS.goTop();return false;">⬆&nbsp;回顶部&nbsp;⬆</a>

3.禁用右键、Crtl+U和F12

使用方法：

JS

引入JS：


                    <script src="//open.soarli.top/bysoarli/secret.js"></script>

4.将markdown快速生成网页

配置记录

官方网站

使用方法：

HTML

和index.html同级目录创建README.md：


                    
                    <!DOCTYPE html>
                    <html>
                    <head>
                      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
                      <meta name="viewport" content="width=device-width,initial-scale=1">
                      <title>Matlab安装</title>
                      <meta charset="UTF-8">
                      <link rel="shortcut icon" href="https://cdn2.soarli.top/soarli.ico">
                      <meta name="referrer" content="never">
                      <link rel="stylesheet" href="//open.soarli.top/docsify/css/vue.css">
                    </head>
                    <body>
                      <div id="app" style="text-align: center;font-size: 24px;"><img src="//cdn2.soarli.top/soarli.ico"> <br>正在加载，请稍侯...</div>
                      <script src="//open.soarli.top/docsify/js/docsify.min.js"></script>
                    </body>
                    </html>

5.樱花飘落效果

使用方法：

JS

引入JS：


                    <script src="//open.soarli.top/bysoarli/yinghua.js" ></script>

6.图片懒加载

配置记录

使用方法：

HTML

需要修改HTML img标签数据结构：


                    
                    1、在head处引入文件
                    <script src="https://open.soarli.top/lazyload/echo.min.js"></script>

                    2、插入图片
                    <img src="https://open.soarli.top/lazyload/loading.gif" data-echo="图片真实地址">

                    3、紧接</body>在其之前插入以下代码：
                    <script>
                        Echo.init({
                        offset: 0,  //离可视区域多少像素的图片可以被加载
                        throttle: 0  //图片延迟多少毫秒加载
                        });
                    </script>

7.夜间模式切换动画+css定义方法

配置记录（重点）

使用方法：

HTML、CSS、JS


<!--------创建css文件并link引入---------->

                    /*定义实际页面效果格式（把自定义的夜间模式css写进去）：*/
                  .DarkMode xxx{
                  
                  }

                  /*切换动画效果（必须保留）*/
                  .Cuteen_DarkSky,.Cuteen_DarkSky:before {
                      content: "";
                      position: fixed;
                      left: 0;
                      right: 0;
                      top: 0;
                      bottom: 0;
                      z-index: 88888888;
                  }

                  .Cuteen_DarkSky {
                      background: linear-gradient(#feb8b0,#fef9db)
                  }

                  .Cuteen_DarkSky:before {
                      transition: 2s ease all;
                      opacity: 0;
                      background: linear-gradient(#4c3f6d,#6c62bb,#93b1ed)
                  }

                  .DarkMode .Cuteen_DarkSky:before {
                      opacity: 1;
                  }

                  .Cuteen_DarkPlanet {
                      z-index: 99999999;
                      position: fixed;
                      left: -50%;
                      top: -50%;
                      width: 200%;
                      height: 200%;
                      -webkit-animation: CuteenPlanetMove 2s cubic-bezier(.7,0,0,1);
                      animation: CuteenPlanetMove 2s cubic-bezier(.7,0,0,1);
                      transform-origin: center bottom;
                  }

                  @-webkit-keyframes CuteenPlanetMove {
                      0% {
                          transform: rotate(0);
                      }

                      to {
                          transform: rotate(360deg);
                      }
                  }

                  @keyframes CuteenPlanetMove {
                      0% {
                          transform: rotate(0);
                      }

                      to {
                          transform: rotate(360deg);
                      }
                  }

                  .Cuteen_DarkPlanet:after {
                      position: absolute;
                      left: 35%;
                      top: 40%;
                      width: 9.375rem;
                      height: 9.375rem;
                      border-radius: 50%;
                      content: "";
                      background: linear-gradient(#fefefe,#fffbe8);
                  }
                  
<!--------js（最好直接写在网页里）---------->
                  /*    function switchNightMode(){
                  var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
                  if(night == '0'){
                      document.querySelector('link[title="dark"]').disabled = true;
                      document.querySelector('link[title="dark"]').disabled = false;
                      document.cookie = "night=1;path=/"
                      console.log('夜间模式开启');
                  }else{
                      document.querySelector('link[title="dark"]').disabled = true;
                      document.cookie = "night=0;path=/"
                      console.log('夜间模式关闭');
                  }
                  }*/
                  function switchNightMode() {
                $('<div class="Cuteen_DarkSky"><div class="Cuteen_DarkPlanet"></div></div>').appendTo($("body")), setTimeout(function() {
                var DarkMode = document.cookie.replace(/(?:(?:^|.*;\s*)DarkMode\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
                 (DarkMode == '0') ? ($("html").addClass("DarkMode"),document.cookie = "DarkMode=1;path=/",console.log('夜间模式开启'),$('#modeicon').attr("xlink:href", "#icon-sun")):($("html").removeClass("DarkMode"),document.cookie = "DarkMode=0;path=/",console.log('夜间模式关闭'),$('#modeicon').attr("xlink:href", "#icon-_moon"))
              ,setTimeout(function() {
                  $(".Cuteen_DarkSky").fadeOut(1e3, function() {
                    $(this).remove()
                  })
                }, 2e3)
              }),50}
              function checkNightMode() {
                if ($("html").hasClass("n-f")) {
                  $("html").removeClass("day");
                  $("html").addClass("DarkMode");
                  $('#modeicon').attr("xlink:href", "#icon-sun")
                  return;
                }
                if ($("html").hasClass("d-f")) {
                  $("html").removeClass("DarkMode");
                  $("html").addClass("day");
                  $('#modeicon').attr("xlink:href", "#icon-_moon")

                  return;
                }
                if (document.cookie.replace(/(?:(?:^|.*;\s*)DarkMode\s*\=\s*([^;]*).*$)|^.*$/, "$1") === '') {
                  if (new Date().getHours() >= 23 || new Date().getHours() < 7) {
                    $("html").addClass("DarkMode");
                    document.cookie = "DarkMode=1;path=/";
                    console.log('夜间模式开启');
                    $('#modeicon').attr("xlink:href", "#icon-sun")
                  } else {
                    $("html").removeClass("DarkMode");
                    document.cookie = "DarkMode=0;path=/";
                    console.log('夜间模式关闭');
                    $('#modeicon').attr("xlink:href", "#icon-_moon")
                  }
                } else {
                  var DarkMode = document.cookie.replace(/(?:(?:^|.*;\s*)DarkMode\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
                  if (DarkMode == '0') {
                    $("html").removeClass("DarkMode");
                    $('#modeicon').attr("xlink:href", "#icon-_moon")
                  } else if (DarkMode == '1') {
                    $("html").addClass("DarkMode");
                    $('#modeicon').attr("xlink:href", "#icon-sun")
                  }
                }
              }
              
<!--------引入jquery---------->

		<script src="https://open.soarli.top/jquery/3.2.1/jquery.min.js" type="module"></script>
        
<!--------引入右下角logo---------->

		<img src="//open.soarli.top/img/dark.png" onclick="switchNightMode();" id="switchlogo" 
		style="width: 3rem;height: 3rem;position: fixed;bottom: 2rem;right: 0.5rem;z-index: 9999;cursor: pointer;" />
        
<!--------在head中引入状态检测函数---------->

        	<script>checkNightMode();</script>
      
<!--------根据操作系统当前模式自动切换到夜间模式---------->
        <script type="text/javascript" src="//open.soarli.top/bysoarli/autodarkmode.js"></script>
       
<!--------根据操作系统当前模式自动切换到夜间模式（通过CSS的实现）---------->
      @media (prefers-color-scheme: dark) { 
        body { 
          background: #121212;
        }
        article{
          color:rgba(255,255,255,.86);
        }
      }
<!--综合时间、cookie、系统深色模式智能决策是否切换的小插件-->
	<script type="text/javascript" src="//open.soarli.top/bysoarli/autodarkmode.js"></script>

8.指定soarli光标样式

使用方法：

CSS

直接引入css：


                    
                      <style type="text/css">
                      body {
                          cursor:url('https://cdn2.soarli.top/usr/plugins/HoerMouse/static/image/dew/normal.cur'), auto;
                      }
                      select, input, textarea, a, button {
                          cursor:url('https://cdn2.soarli.top/usr/plugins/HoerMouse/static/image/dew/link.cur'), auto;
                      }
                      input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly] {
                          cursor:url('https://cdn2.soarli.top/usr/plugins/HoerMouse/static/image/dew/normal.cur'), auto;
                      }
                      </style>

9.全屏插件

使用方法：

JS

引入+调用JS：


                    
                      引入：
                      <script src="//open.soarli.top/bysoarli/fullscreen.js"></script>
                      
                      调用：
                      fullScreen();
                      
                      <!--右下角夜间模式、全屏模式logo-->
<img src="//open.soarli.top/img/dark.png" onclick="switchNightMode();" style="width: 5rem;height: 5rem;position: fixed;bottom: 4rem;right: 1rem;z-index: 9999;cursor: pointer;" />
<div class="justpc">
<img src="//open.soarli.top/img/quanping.png" id="fullScreen" onclick="fullScreen();" style="width: 5rem;height: 5rem;position: fixed;bottom: 10rem;right: 1rem;z-index: 9999;cursor: pointer;" />

			<!--智慧全屏图标-->
                      <script type="text/javascript"> function fullScreen(){
                        ......
                        document.getElementById("fullScreen").src= "//open.soarli.top/img/quanping_exit.png";
                        $('#fullScreen').attr("onclick", "exitScreen();");
                          return;
                    }
              		//退出全屏
                    function exitScreen(){
                        ......
                        document.getElementById("fullScreen").src= "//open.soarli.top/img/quanping.png";
                        $('#fullScreen').attr("onclick", "fullScreen();");
                    }
					</script>

10.typora导出html文件夜间模式插件

使用方法：

JS

引入HTML：


                    
                      <script src="//open.soarli.top/bysoarli/typora_dark.js"></script>
			<span id="soarli_append"></span>

11.前端md5加密密码

配置记录

使用方法：

JS

引入JS+表单（连接checkCSRF最好加上）：


                    <script src="https://open.soarli.top/js/md5.js"></script>
                    <script>
                        function md5_encryption(){
                            document.getElementById("password1").value = hex_md5(
                                <?php // alert(document.getElementById("password").value.concat("<?=$hashCSRFvalue;?\>"))?>
                                document.getElementById("password").value.concat("<?=$hashCSRFvalue;?>")
                                <?php // 将checkCSRF的值同时作为MD5的salt ?>
                            );
                        }
                    </script>
                    
                    <input type="password" required lay-verify="required" maxlength="16" id="password" class="layui-input" placeholder="请输入密码">
                    <input type="hidden" name="password" id="password1"/>
                    <?php // 第一个password去掉了name以保证不会被表单提交，真正提交的是第二个input（id为password1的那个），从而使得浏览器记住密码时保存的是原始密码而非加密过的单次有效字符串 ?>

Webapps

Base64转换工具