臧超博客博主建立了一个blogger大陆博友QQ群，陆陆续续的，有不少爱好者进入这个群，大家很热心讨论着，这不，昨天有一个blogger博友在看了我的博客代码后，指出有几处jquery的调用问题，我回来进行试着修改，修改后感觉对博客的加载速度有大大的提高，今天遂将心得记录在此，具体修改可以到我模板的开源库（模板gitbub）看看。
以前，由于自己对代码修改完全是陌生的，在修改原博客模板的时候总是小心翼翼，不敢乱动里面的代码，为了解决国内访问问题，我将博客xml文档中的jquery的相应版本一一下载到本地，然后全部上传到七牛云，再从七牛调用到xml文档中，这样成功的将博客搭建，速度也可以。
本打算就这样一直下去，并不想对jquery的调用再作任何变动了，前几天经那位博友提示，发现国内有一个网站（http://www.bootcdn.cn/）提供全套的jquery库，直接可以引用，于是我试了一试，还非常不错，这是其一。
其二，原模板中的jquery版本较旧，在最初修改的时候，找的版本与原版中是一一对应的，这次进行修改的时候，换成了最新的版本，结果仍然可以，这又是一个新发现。同时我删除了在使用小工具时的代码中引用的代码，因为一个博客中同类型的jquery只需要一个。
其三，我删除了一个jquery.migrate的库，结果也没有影响，后来一查这个是用于插件更新的，删除后并不影响网站的功能，同时也减少请求内容，增加网站加载速度。
其四，我将网站中涉及jquery.sidr的代码（官方网站在这里，如果使用请看官方说明，功能是实现侧边栏菜单弹出和隐藏，主要是在手机浏览网站时，有一个菜单按钮功能的实现）进行了调用，这个也是自己发现的问题，原模板中是在github中的引用，我找到jquery.sidr的官方网站，查看了它如何使用，依葫芦画瓢，结果网站侧边栏菜单的按钮却失效了。失效后，我鼠标悬念在侧边栏菜单的按钮上，发现url链接中显示一段sidr-main的代码，我想这段代码肯定是控制这个功能的，于是我再对比备份的未修改的xml文档和修改过的xml文档，发现真是被我删掉了，我从未修改的相应部分代码中，凭经验将与此功能相关的代码保留了下来用<script>标签包裹起来，再上传到后台中，结果侧边栏菜单按钮的功能就恢复了。以下是本博客使用的jquery.sidr调用方法，另外还有其它几种，相对这一种是比较简单的。
以前，由于自己对代码修改完全是陌生的，在修改原博客模板的时候总是小心翼翼，不敢乱动里面的代码，为了解决国内访问问题，我将博客xml文档中的jquery的相应版本一一下载到本地，然后全部上传到七牛云，再从七牛调用到xml文档中，这样成功的将博客搭建，速度也可以。
本打算就这样一直下去，并不想对jquery的调用再作任何变动了，前几天经那位博友提示，发现国内有一个网站（http://www.bootcdn.cn/）提供全套的jquery库，直接可以引用，于是我试了一试，还非常不错，这是其一。
其二，原模板中的jquery版本较旧，在最初修改的时候，找的版本与原版中是一一对应的，这次进行修改的时候，换成了最新的版本，结果仍然可以，这又是一个新发现。同时我删除了在使用小工具时的代码中引用的代码，因为一个博客中同类型的jquery只需要一个。
其三，我删除了一个jquery.migrate的库，结果也没有影响，后来一查这个是用于插件更新的，删除后并不影响网站的功能，同时也减少请求内容，增加网站加载速度。
其四，我将网站中涉及jquery.sidr的代码（官方网站在这里，如果使用请看官方说明，功能是实现侧边栏菜单弹出和隐藏，主要是在手机浏览网站时，有一个菜单按钮功能的实现）进行了调用，这个也是自己发现的问题，原模板中是在github中的引用，我找到jquery.sidr的官方网站，查看了它如何使用，依葫芦画瓢，结果网站侧边栏菜单的按钮却失效了。失效后，我鼠标悬念在侧边栏菜单的按钮上，发现url链接中显示一段sidr-main的代码，我想这段代码肯定是控制这个功能的，于是我再对比备份的未修改的xml文档和修改过的xml文档，发现真是被我删掉了，我从未修改的相应部分代码中，凭经验将与此功能相关的代码保留了下来用<script>标签包裹起来，再上传到后台中，结果侧边栏菜单按钮的功能就恢复了。以下是本博客使用的jquery.sidr调用方法，另外还有其它几种，相对这一种是比较简单的。
<!DOCTYPE html> <html> <head> <!-- Your other stuff (you can have problems if you don't add minimum scale in the viewport) --> <meta name="viewport" content="width=device-width,minimum-scale=1"> <!-- Include a Sidr bundled CSS theme --> <link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.sidr/2.2.1/stylesheets/jquery.sidr.dark.min.css"> </head> <body> <!-- More stuff --> <!-- Include jQuery --> <script src="//cdn.jsdelivr.net/jquery/2.2.0/jquery.min.js"></script> <!-- Include the Sidr JS --> <script src="//cdn.jsdelivr.net/jquery.sidr/2.2.1/jquery.sidr.min.js"></script> </body> </html>
评论