-
Notifications
You must be signed in to change notification settings - Fork 0
/
hexo_yi_pjax.html
1 lines (1 loc) · 79.2 KB
/
hexo_yi_pjax.html
1
<!-- build time:Mon Mar 04 2019 16:34:53 GMT+0800 (CST) --><!DOCTYPE html><script src="/js/src/pjax/jquery_min_js.js"></script><script src="/js/src/pjax/jquery_pjax_min_js.js"></script><script src="/js/src/pjax/pjaxMain.js"></script><html class="theme-next muse use-motion" lang="en"><head><meta name="generator" content="Hexo 3.8.0"><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"><meta name="theme-color" content="#222"><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css"><link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css"><link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css"><link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.4"><link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png?v=5.1.4"><link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png?v=5.1.4"><link rel="mask-icon" href="/images/logo.svg?v=5.1.4" color="#222"><meta name="keywords" content="hexo,"><link rel="alternate" href="/atom.xml" title="Leesin's Blog" type="application/atom+xml"><meta name="description" content="一篇关于在next主题中加入pjax的文章，让你的文章如钻石般夺目。"><meta name="keywords" content="hexo"><meta property="og:type" content="article"><meta property="og:title" content="hexo next主题深度优化(一)，加入pjax功能"><meta property="og:url" content="http://mmmmmm.me/hexo_yi_pjax.html"><meta property="og:site_name" content="Leesin's Blog"><meta property="og:description" content="一篇关于在next主题中加入pjax的文章，让你的文章如钻石般夺目。"><meta property="og:locale" content="en"><meta property="og:image" content="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/15440658632431.jpg"><meta property="og:image" content="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/20181209223504210.png"><meta property="og:updated_time" content="2018-12-24T09:47:02.000Z"><meta name="twitter:card" content="summary"><meta name="twitter:title" content="hexo next主题深度优化(一)，加入pjax功能"><meta name="twitter:description" content="一篇关于在next主题中加入pjax的文章，让你的文章如钻石般夺目。"><meta name="twitter:image" content="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/15440658632431.jpg"><script type="text/javascript" id="hexo.configurations">var NexT=window.NexT||{},CONFIG={root:"/",scheme:"Muse",version:"5.1.4",sidebar:{position:"left",display:"post",offset:12,b2t:!1,scrollpercent:!1,onmobile:!1},fancybox:!0,tabs:!0,motion:{enable:!0,async:!1,transition:{post_block:"fadeIn",post_header:"slideDownIn",post_body:"slideDownIn",coll_header:"slideLeftIn",sidebar:"slideUpIn"}},duoshuo:{userId:"0",author:"Author"},algolia:{applicationID:"P88H67GUII",apiKey:"5489ac7ce78f59f4a8cb5445035f54d8",indexName:"dataiyangu",hits:{per_page:10},labels:{input_placeholder:"Search for Posts",hits_empty:"We didn't find any results for the search: ${query}",hits_stats:"${hits} results found in ${time} ms"}}}</script><link rel="canonical" href="http://mmmmmm.me/hexo_yi_pjax.html"><title>hexo next主题深度优化(一)，加入pjax功能 | Leesin's Blog</title></head><body itemscope itemtype="http://schema.org/WebPage" lang="en"><link rel="stylesheet" href="/dist/APlayer.min.css"><header id="header_left" class="header_left" itemscope itemtype="http://schema.org/WPHeader"><div class="header_left_inner"><div class="site-brand-wrapper"><div class="site-meta"><div class="custom-logo-site-title"><a href="/" class="brand" rel="start"><span class="logo-line-before"><i></i></span> <span class="logo-line-after"><i></i></span></a></div></div><div class="site-nav-toggle"><button><span class="btn-bar"></span> <span class="btn-bar"></span> <span class="btn-bar"></span></button></div></div><nav class="site-nav"><ul id="menu_left" class="menu_left"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="menu-item-icon fa fa-fw fa-home"></i><br>Home</a></li><li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="menu-item-icon fa fa-fw fa-archive"></i><br>Archives</a></li></ul></nav></div><div class="header_sidebar">黑匣子</div></header><div class="eye"><div class="eye1"><ul><li style="background-color:#C7EDCC">豆沙绿</li><li style="background-color:#FAF9DE">杏仁黄</li><li style="background-color:#FFF">银河白</li><li style="background-color:#323232">极光黑</li><li style="background-color:#FFF2E2">秋叶褐</li><li style="background-color:#FDE6E0">胭脂红</li><li style="background-color:#E3EDCD">青草绿</li><li style="background-color:#DCE2F1">海天蓝</li><li style="background-color:#E9EBFE">葛巾紫</li><li style="background-color:#EAEAEF">极光灰</li><li style="background-color:#cce8cf">qq管家</li></ul></div><div class="eye2">满天星</div></div><div id="aplayer"></div><script type="text/javascript" src="/dist/APlayer.min.js"></script><div class="container sidebar-position-left page-post-detail"><div class="headband"></div><a href="https://github.com/dataiyangu?tab=repositories"><img style="position:absolute;top:0;left:0;border:0" src="/images/github_fork.png" alt="Fork me on GitHub"></a><div class="bg_content"><canvas id="canvas"></canvas></div><header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader"><div class="header-inner"><div class="site-brand-wrapper"><div class="site-meta"><div class="custom-logo-site-title"><a href="/" class="brand" rel="start"><span class="logo-line-before"><i></i></span> <span class="site-title">Leesin's Blog</span> <span class="logo-line-after"><i></i></span></a></div><p class="site-subtitle">To be a better me</p></div><div class="site-nav-toggle"><button><span class="btn-bar"></span> <span class="btn-bar"></span> <span class="btn-bar"></span></button></div></div><nav class="site-nav"><ul id="menu" class="menu"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="menu-item-icon fa fa-fw fa-home"></i><br>Home</a></li><li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="menu-item-icon fa fa-fw fa-archive"></i><br>Archives</a></li></ul></nav></div></header><div id="pjax-container"><main id="main" class="main"><div class="main-inner"><div class="content-wrap"><div id="content" class="content"><div id="posts" class="posts-expand"><article data-scroll-reveal="enter bottom move 60px over 0.6s after 0.05s" class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="http://mmmmmm.me/hexo_yi_pjax.html"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="Leesin.Dong"><meta itemprop="description" content=""><meta itemprop="image" content="/images/avatar.gif"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Leesin's Blog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline">hexo next主题深度优化(一)，加入pjax功能</h1><div class="post-meta"><i class="fa fa-thumb-tack"></i> <font color="7D26CD">置顶</font> <span class="post-meta-divider">|</span> <span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">Posted on</span> <time title="Post created" itemprop="dateCreated datePublished" datetime="2018-12-18T19:20:00+08:00">2018-12-18 </time></span><span class="post-category"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-folder-o"></i> </span><span class="post-meta-item-text">In</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/categories/hexo/" itemprop="url" rel="index"><span itemprop="name">hexo</span></a></span></span></div></header><div class="post-body" itemprop="articleBody"><p><img src="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/15440658632431.jpg" alt=""></p><blockquote><ul><li>一篇关于在next主题中加入pjax的文章，让你的文章如钻石般夺目。</li></ul></blockquote><a id="more"></a><p>特别声明：<br><strong>看不懂没关系，往下读，因为我写的逻辑可能不是很清晰~<br>本人源码在github上实在不懂的 git clone自己扣一扣，github在博客中有连接<br>本人博客mmmmmm.me</strong></p><h1 id="背景："><a href="#背景：" class="headerlink" title="背景："></a>背景：</h1><p>我有强迫症，遇到好的东西就想给自己整上去，在这里想忠诚的奉劝大家一句，不要再搭建自己的博客了，这是一个无底洞，就跟打游戏一样，当你到达六十级之后，你发现版本更新了，顶级变成了八十级，而且，目前看来你自己只有三级，只是自己感觉自己是六十级<del>~~ 就像我，这个东西我足足花了一周多，当然也有我经常加班的原因吧，好了不吐槽了</del></p><h1 id="进入正题"><a href="#进入正题" class="headerlink" title="进入正题"></a>进入正题</h1><h2 id="pjax初体验–instantclick"><a href="#pjax初体验–instantclick" class="headerlink" title="pjax初体验–instantclick"></a>pjax初体验–instantclick</h2><p>首先本人加了一个不蒜子的群，看到有人说instantclick能够实现自己的博客实现不中断的播放（大家都知道博客一刷新，一换页，播放的歌曲插件肯定也会刷新，歌也就断了），看到这里是不是有感觉了~~，这个时候我就开始拼命的往里面加，大概花了两天放弃了，可是无奈中文文档也比较少，而且，bug巨多，最大的原因也是bug巨多，适配起来十分麻烦，比如多说评论系统等等。但是速度确实蛮快的，因为可以1鼠标放到标签上实现预加载2鼠标点下去的瞬间实现预加载，而且可以自己设定预加载的时间。（好像是这么回事，时间太久远了）<br>下面贴出我找到的几个教程，对于bug多这点不介意，喜欢钻研的同学可以看看：<br><a href="https://www.ihewro.com/archives/515/" target="_blank" rel="noopener">https://www.ihewro.com/archives/515/</a><br><a href="https://qqdie.com/archives/instantclick.html" target="_blank" rel="noopener">https://qqdie.com/archives/instantclick.html</a><br><a href="https://www.jianshu.com/p/c306360e4270" target="_blank" rel="noopener">https://www.jianshu.com/p/c306360e4270</a><br><a href="https://www.songhaifeng.com/razt/32.html" target="_blank" rel="noopener">https://www.songhaifeng.com/razt/32.html</a><br>好了就先这么多，google上也有好多，赶紧让我们进入正题吧~</p><h2 id="真正的pjax"><a href="#真正的pjax" class="headerlink" title="真正的pjax"></a>真正的pjax</h2><p>官方介绍：pushState + ajax = pjax 带来最直观的效果是整个网站变成单页应用。这样的效果将会极大的提升用户体验，并且可以减少https的请求的次数和内容。使用github上面的一个开源项目defunkt/jquery-pjax 可以很轻松的帮助我们实现pjax。</p><p>这样可以实现，刷新的时候只加载局部的html和css js 大大加快速度。<br>真诚提醒：如果对前端一点点基础都没有的话，要不就放弃吧。</p><h3 id="第一步"><a href="#第一步" class="headerlink" title="第一步"></a>第一步</h3><p>找到theme->next->layout->_layout.swig文件<br>在开头加入以下代码：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script></span><br><span class="line"><script src="https://cdn.bootcss.com/jquery.pjax/2.0.1/jquery.pjax.min.js"></script></span><br><span class="line"><script src="/js/src/pjax/pjaxBase.js"></script></span><br></pre></td></tr></table></figure><blockquote><p>解释一下：前两行是引入jq文件和pjax的js文件，jq文件必须在pjax文件前面引入，第三行是引入我自己的文件，这个文件是我自己diy的目录如图。在第二行下面<script></script>中间加入内容是一样的效果。</p></blockquote><h3 id="第二步"><a href="#第二步" class="headerlink" title="第二步"></a>第二步</h3><p>还是在这个文件中在底部加入</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">{# 在这里依次加载pjax需要的js文件 #}//swig文件中的注释是这样子的</span><br><span class="line"><script type="text/javascript" src="/js/src/pjax/category_js.js" ></script></span><br><span class="line"><script type="text/javascript" src="/js/src/pjax/opacity_js.js" ></script></span><br><span class="line"><script type="text/javascript" src="/js/src/pjax/motion_js.js" ></script></span><br><span class="line"><script type="text/javascript" src="/js/src/pjax/velocity.ui_js.js" ></script></span><br><span class="line"><script type="text/javascript" src="/js/src/pjax/velocity_js.js" ></script></span><br><span class="line"><script type="text/javascript" src="/js/src/pjax/bootstrap_js.js" ></script></span><br><span class="line"><script type="text/javascript" src="/js/src/pjax/scrollspy_js.js" ></script></span><br><span class="line"><script type="text/javascript" src="/js/src/pjax/utils_js.js" ></script></span><br><span class="line"><script type="text/javascript" src="/js/src/pjax/post-details_js.js" ></script></span><br></pre></td></tr></table></figure><p>注意这里的文件是有顺序的，具体的我会在下文详细讲述。</p><h3 id="第三步"><a href="#第三步" class="headerlink" title="第三步"></a>第三步</h3><p>第二步中的这些文件都是我自己加入的，原因是因为（划重点了！！！）<br><strong>在pjax中是局部刷新的也就是局部加载的，而以上的文件，next主题中本身是没有的，原来的文件名称没有我的_js后缀，在目录next->source->js->src下面，<br>源文件大部分都是$(document).ready()的，这个函数，大家可以上网好好查查，是加载完整个dom结构后进行加载的，当然了和js中的Window.onload是不一样的，后者是在图片等全部加载完之后才会加载js，好了不闲扯了，注意将这些文件复制到我上面的目录下并且重命名例如：/js/src/pjax/bootstrap_js.js然后将所有的文件都把$(document).ready()去掉，然后用function xxx包住，这样就可以外部调用了，我会在下面讲到，很有用哦。</strong></p><blockquote><p>为什么这么麻烦，因为next的js是相互调用的，本人比较懒，实在没有时间阅读全部的源码。</p></blockquote><p>目录：</p><h3 id="第四步"><a href="#第四步" class="headerlink" title="第四步"></a>第四步</h3><p><img src="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/20181209223504210.png" alt="upload successful"></p><p>如上面的目录，这些有的是我复制的系统核心的，因为在p我单独还建了一个/js/src/pjax/pjaxBase.js，你可能就懂了第一步了。这个js是pjax的核心，下面贴出源码：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">// define(['jquery','jquery_pjax_min_js'],function () {</span><br><span class="line">$(document).pjax('a[target!=_blank]', '#pjax-container', {</span><br><span class="line"> fragment: '#pjax-container',</span><br><span class="line"> timeout: 5000,</span><br><span class="line">});</span><br><span class="line">//用户通过浏览器的前进后退按钮，需要加载的js</span><br><span class="line">$(window).on('popstate.pjax', function () {</span><br><span class="line"> $(document).on('pjax:complete',</span><br><span class="line"> function () {</span><br><span class="line"> $('img').lazyload({</span><br><span class="line"> placeholder: '/images/loading.gif',</span><br><span class="line"> effect: 'fadeIn',</span><br><span class="line"> threshold : 100,</span><br><span class="line"> failure_limit : 20,</span><br><span class="line"> skip_invisible : false</span><br><span class="line"> });</span><br><span class="line"> pjax();</span><br><span class="line"> })</span><br><span class="line">})</span><br><span class="line">$(document).on('pjax:start',</span><br><span class="line"> function () {</span><br><span class="line"> })</span><br><span class="line">$(document).on('pjax:complete',</span><br><span class="line"> function () {</span><br><span class="line"> require.config({</span><br><span class="line"> paths: {</span><br><span class="line"> //下面注释的这几个js是之前的版本，因为给主题加入了require.js提升性能，所以将他们整合到了下面pjax_function_public文件中，效果是一样的。</span><br><span class="line"> // "category_js": "/js/src/pjax/category_js",</span><br><span class="line"> // "opacity_js":"/js/src/pjax/opacity_js",</span><br><span class="line"> // "motion_js":"/js/src/pjax/motion_js",</span><br><span class="line"> // "scrollspy_js":"/js/src/pjax/scrollspy_js",</span><br><span class="line"> // "post-details_js":"/js/src/pjax/post-details_js",</span><br><span class="line"> // "lean_analytics":"/js/src/pjax/lean_analytics",</span><br><span class="line"> // "baidutuisong":"/js/src/pjax/baidutuisong",</span><br><span class="line"> // "utils_js":"/js/src/pjax/utils_js",</span><br><span class="line"> //这个是单独的</span><br><span class="line"> "jquery.share.min":"/js/src/pjax/share/jquery.share.min",</span><br><span class="line"> // "share":"/js/src/pjax/share",</span><br><span class="line"> //这个也是单独的</span><br><span class="line"> "css":"/js/src/pjax/css",</span><br><span class="line"> //我将上面注释的内容整合到了这个js中，为了更好的提升性能，因为虽然一样的内容，多次读取文件，和读一个文件，效率还是有很大的差距的。</span><br><span class="line"> "pjax_function_public":"/js/src/pjax/pjax_function_public"</span><br><span class="line"> },</span><br><span class="line"> shim: {</span><br><span class="line"> 'share': {</span><br><span class="line"> deps: [</span><br><span class="line"> 'css!/js/src/pjax/share/share.min','jquery.share.min'</span><br><span class="line"> ]</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> });</span><br><span class="line"></span><br><span class="line"> require(['jquery.share.min','share','css','pjax_function_public'</span><br><span class="line"> ], function () {</span><br><span class="line"> $('img').lazyload({</span><br><span class="line"> placeholder: '/images/loading.gif',</span><br><span class="line"> effect: 'fadeIn',</span><br><span class="line"> threshold : 100,</span><br><span class="line"> failure_limit : 20,</span><br><span class="line"> skip_invisible : false</span><br><span class="line"> });</span><br><span class="line"></span><br><span class="line"> pjax();</span><br><span class="line"> });</span><br><span class="line"> })</span><br><span class="line"></span><br><span class="line">function pjax() {</span><br><span class="line"> /*因为下面的postdetails_js中的有个判断空指针的，如果加上就不能左移，如果去掉会报错，所以把这个放在首行来执行。*/</span><br><span class="line"> /*现在已经解决,可以放在任意的位置*/</span><br><span class="line"> /*</span><br><span class="line"> 之前一直是好的突然有次就不好了，后来解决了右边sidebar滚轮效果消失的效果之后，突然又好了。</span><br><span class="line"> 原因是因为，之前放在detail js的下面，而detail的下面undfind的判断时报错的，所以不会往下走。</span><br><span class="line"> */</span><br><span class="line"> /*判断#lv-container是否为空，目前这是我找到最好的办法，因为不判断，进入首页或其他的页面会空指针异常。*/</span><br><span class="line"> if ($("#lv-container").length > 0 ) {</span><br><span class="line"> $(".comments").css({opacity: 1});</span><br><span class="line"> $.getScript("https://cdn-city.livere.com/js/embed.dist.js");</span><br><span class="line"> }</span><br><span class="line"> //不蒜子js</span><br><span class="line"> $.getScript("https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js");</span><br><span class="line"></span><br><span class="line"> //自己写的分享</span><br><span class="line"> pjaxshare();</span><br><span class="line"></span><br><span class="line">// 分类的js</span><br><span class="line"> category_js();</span><br><span class="line">// 局部刷新后文章内容不显示bug的js</span><br><span class="line"> opacity_js()</span><br><span class="line">//点击有目录的文章sidebar不显示的bug解决</span><br><span class="line"> motion_js()</span><br><span class="line"> scrollspy_js()</span><br><span class="line"> //utils_js()</span><br><span class="line"> postdetails_js()</span><br><span class="line">//lean数量统计的js，原来的js是在themes/next/layout/_third-party/analytics/lean-analytics.swig文件中</span><br><span class="line"> lean_analytics();</span><br><span class="line"> //百度推送js</span><br><span class="line"> baidutuisong();</span><br><span class="line">// //右边sidebar滚轮效果消失了。</span><br><span class="line"> initSidebarDimension()</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>解释一下：<br>$(document).pjax(‘a[target!=_blank]’ ‘#main’, {<br>fragment: ‘#main’,<br>timeout: 5000,<br>});<br>这个函数是pjax的核心，<br>‘a[target!=_blank]’是你将会点击的标签[target!=_blank]，是当你的标签是blank的时候就是需要点击出现一个新的窗口，比如友链之类的，这个时候就不进行局部加载了，没有类似a标签的可以省略。<br>‘#main’是你将会刷新的地方<br>fragment: ‘#main’,是把那个地方的代码刷新然后放到’#main’中<br>timeout，懂js得都懂就不解释了。</p><p>$(document).on(‘pjax:complete’,<br>function() {}<br>划重点了：这个函数是在局部加载完之后自己需要DIY的js，因为pjax是局部加载我已经强调了很多遍了，这个时候有的js会失效比如说评论功能。<br>这个时候引入我们之前定义好的函数。完成！</p><p>贴几个对我很有帮助的博文和hexo next的博客和一个github，实在不懂得可以扒一扒别人的github源码，有很大的帮助。<br><a href="https://www.ihewro.com/archives/354/comment-page-3#comments" target="_blank" rel="noopener">https://www.ihewro.com/archives/354/comment-page-3#comments</a><br><a href="https://www.jimoe.cn/archives/typecho-add-pjax.html" target="_blank" rel="noopener">https://www.jimoe.cn/archives/typecho-add-pjax.html</a><br><a href="http://yelog.org/2017/02/08/pjax/" target="_blank" rel="noopener">http://yelog.org/2017/02/08/pjax/</a><br><a href="https://www.jianshu.com/p/808a647dc324" target="_blank" rel="noopener">https://www.jianshu.com/p/808a647dc324</a><br><a href="https://blog.dyboy.cn/" target="_blank" rel="noopener">https://blog.dyboy.cn/</a><br><a href="https://blog.flysay.com/" target="_blank" rel="noopener">https://blog.flysay.com/</a><br><a href="https://github.com/DIYgod/hexo-theme-sagiri" target="_blank" rel="noopener">https://github.com/DIYgod/hexo-theme-sagiri</a><br><a href="http://www.qingpingshan.com/m/view.php?aid=355579" target="_blank" rel="noopener">http://www.qingpingshan.com/m/view.php?aid=355579</a><br><a href="https://diygod.me/" target="_blank" rel="noopener">https://diygod.me/</a><br>中间有个小技巧:chrom的审查元素里面的内容是可以移动和删除的，更利于我们的检查。</p><h1 id="专门基于hexo-next主题的pjax（将丢失的js效果重现）"><a href="#专门基于hexo-next主题的pjax（将丢失的js效果重现）" class="headerlink" title="专门基于hexo next主题的pjax（将丢失的js效果重现）"></a>专门基于hexo next主题的pjax（将丢失的js效果重现）</h1><h2 id="将下面讲到的提取出来"><a href="#将下面讲到的提取出来" class="headerlink" title="将下面讲到的提取出来"></a>将下面讲到的提取出来</h2><p><strong>因为很多事被包装在$(documnent).ready(function(){})里面的，所以pjax不能加载的原因就在这里。自己提取出来，封装成函数自己调用即可</strong><br><strong>下面的需要前端基础，会通过断点进行审查</strong></p><h2 id="点击右边的sidebar，sidebar不出现"><a href="#点击右边的sidebar，sidebar不出现" class="headerlink" title="点击右边的sidebar，sidebar不出现"></a>点击右边的sidebar，sidebar不出现</h2><p>经过阅读源码，点击事件在motion.js中，将相应的代码提取出来<br>motion.js<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"> this.toggleEl.on('click', this.clickHandler.bind(this));</span><br><span class="line"> this.dimmerEl.on('click', this.clickHandler.bind(this));</span><br><span class="line"> this.toggleEl.on('mouseenter', this.mouseEnterHandler.bind(this));</span><br><span class="line"> this.toggleEl.on('mouseleave', this.mouseLeaveHandler.bind(this));</span><br><span class="line"> this.sidebarEl.on('touchstart', this.touchstartHandler.bind(this));</span><br><span class="line"> this.sidebarEl.on('touchend', this.touchendHandler.bind(this));</span><br><span class="line"> this.sidebarEl.on('touchmove', function(e){e.preventDefault();});</span><br><span class="line">`</span><br></pre></td></tr></table></figure><p></p><p>post_detail.js<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">// TOC item animation navigate & prevent #item selector in adress bar.</span><br><span class="line"> $('.post-toc a').on('click', function (e) {</span><br><span class="line"> e.preventDefault();</span><br><span class="line"> var targetSelector = NexT.utils.escapeSelector(this.getAttribute('href'));</span><br><span class="line"> var offset = $(targetSelector).offset().top;</span><br><span class="line"></span><br><span class="line"> hasVelocity ?</span><br><span class="line"> html.velocity('stop').velocity('scroll', {</span><br><span class="line"> offset: offset + 'px',</span><br><span class="line"> mobileHA: false</span><br><span class="line"> }) :</span><br><span class="line"> $('html, body').stop().animate({</span><br><span class="line"> scrollTop: offset</span><br><span class="line"> }, 500);</span><br><span class="line"> });</span><br></pre></td></tr></table></figure><p></p><p>这是线索，像java一样点到自己需要的地方，展开逻辑。</p><h3 id="sidebar自动隐藏，自动显示，点击出现，点击隐藏，回到首页，回到中间等操作"><a href="#sidebar自动隐藏，自动显示，点击出现，点击隐藏，回到首页，回到中间等操作" class="headerlink" title="sidebar自动隐藏，自动显示，点击出现，点击隐藏，回到首页，回到中间等操作"></a>sidebar自动隐藏，自动显示，点击出现，点击隐藏，回到首页，回到中间等操作</h3><p>里面如果遇到不认识的函数，可能是hexo自己封装的比如toc，<br>hexo自己的辅助函数：<a href="https://hexo.io/zh-cn/docs/helpers.html" target="_blank" rel="noopener">https://hexo.io/zh-cn/docs/helpers.html</a><br></p><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">下面这段代码是关于右边的sidebar的js的核心包括：</span></span><br><span class="line"><span class="comment"> 自动隐藏，自动显示，点击出现，点击隐藏，回到首页，回到中间等操作*/</span></span><br><span class="line"> <span class="comment">// Expand sidebar on post detail page by default, when post has a toc.</span></span><br><span class="line"> <span class="keyword">var</span> $tocContent = $(<span class="string">'.post-toc-content'</span>);</span><br><span class="line"> <span class="keyword">var</span> isSidebarCouldDisplay = CONFIG.sidebar.display === <span class="string">'post'</span> ||</span><br><span class="line"> CONFIG.sidebar.display === <span class="string">'always'</span>;</span><br><span class="line"> <span class="keyword">var</span> hasTOC = $tocContent.length > <span class="number">0</span> && $tocContent.html().trim().length > <span class="number">0</span>;</span><br><span class="line"> <span class="keyword">if</span> (isSidebarCouldDisplay && hasTOC) {</span><br><span class="line"></span><br><span class="line"> NexT.utils.displaySidebar();</span><br><span class="line"> }<span class="keyword">else</span> {</span><br><span class="line"><span class="comment">/*判断this.sidebarEl是否为null，因为从首页进入留言板的时候并没有this.sidebarEl这个属性，回报类似于空指针的异常。</span></span><br><span class="line"><span class="comment"> 下面这个空指针的判断暂时注释掉因为，如果打开的，返回到首页的时候并没有this.sidebarEl，</span></span><br><span class="line"><span class="comment">下面的代码不会进行，下面的，文章在左面没回去的bug就无法得到解决。*/</span></span><br><span class="line"><span class="comment">/*已经将空指针异常的判断打开，因为下面的源码是this.sidebar，这里的this可能并不是element，所以会导致未定义，其实在element中是定义了的</span></span><br><span class="line"><span class="comment">* 在这里将this去掉就解决了*/</span></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">* 下面这段源码在motion.js中的hideSidebar方法。*/</span></span><br><span class="line"> <span class="keyword">var</span> sidebarEl=$(<span class="string">'.sidebar'</span>)</span><br><span class="line"> <span class="keyword">if</span> (typeof(sidebarEl)!= <span class="string">"undefined"</span>) {</span><br><span class="line"> NexT.utils.isDesktop() && $(<span class="string">'body'</span>).velocity(<span class="string">'stop'</span>).velocity({paddingRight: <span class="number">0</span>});</span><br><span class="line"> sidebarEl.find(<span class="string">'.motion-element'</span>).velocity(<span class="string">'stop'</span>).css(<span class="string">'display'</span>, <span class="string">'none'</span>);</span><br><span class="line"> sidebarEl.velocity(<span class="string">'stop'</span>).velocity({width: <span class="number">0</span>}, {display: <span class="string">'none'</span>});</span><br><span class="line"> <span class="comment">/*sidebarToggleLines是在motion js里面的，在这里回报错，在下面进行了引用*/</span></span><br><span class="line"> sidebarToggleLines.init();</span><br><span class="line"> sidebarEl.removeClass(<span class="string">'sidebar-active'</span>);</span><br><span class="line"> sidebarEl.trigger(<span class="string">'sidebar.isHiding'</span>);</span><br><span class="line"> <span class="comment">// Prevent adding TOC to Overview if Overview was selected when close & open sidebar.</span></span><br><span class="line"> <span class="comment">/*下面的else的js是我自己加的因为，点击有目录的文章后右侧sidebar会自动出来，文章会自动往左面走，因为margin是0 auto的。这个时候点击主页，</span></span><br><span class="line"><span class="comment"> 文章还是在左面的没有回去，为了解决这个bug*/</span></span><br><span class="line"> <span class="keyword">if</span> (!!$(<span class="string">'.post-toc-wrap'</span>)) {</span><br><span class="line"> <span class="keyword">if</span> ($(<span class="string">'.site-overview-wrap'</span>).css(<span class="string">'display'</span>) === <span class="string">'block'</span>) {</span><br><span class="line"> $(<span class="string">'.post-toc-wrap'</span>).removeClass(<span class="string">'motion-element'</span>);</span><br><span class="line"> } <span class="keyword">else</span> {</span><br><span class="line"> $(<span class="string">'.post-toc-wrap'</span>).addClass(<span class="string">'motion-element'</span>);</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"><span class="keyword">var</span> sidebarToggleLines = {</span><br><span class="line"> lines: [],</span><br><span class="line"> push: function (line) {</span><br><span class="line"> <span class="keyword">this</span>.lines.push(line);</span><br><span class="line"> },</span><br><span class="line"> init: function () {</span><br><span class="line"> <span class="keyword">this</span>.lines.forEach(function (line) {</span><br><span class="line"> line.init();</span><br><span class="line"> });</span><br><span class="line"> },</span><br><span class="line"> arrow: function () {</span><br><span class="line"> <span class="keyword">this</span>.lines.forEach(function (line) {</span><br><span class="line"> line.arrow();</span><br><span class="line"> });</span><br><span class="line"> },</span><br><span class="line"> close: function () {</span><br><span class="line"> <span class="keyword">this</span>.lines.forEach(function (line) {</span><br><span class="line"> line.close();</span><br><span class="line"> });</span><br><span class="line"> }</span><br><span class="line">};</span><br><span class="line">`</span><br></pre></td></tr></table></figure><p></p><h3 id="添加bootstrp出现闪屏的现象"><a href="#添加bootstrp出现闪屏的现象" class="headerlink" title="添加bootstrp出现闪屏的现象"></a>添加bootstrp出现闪屏的现象</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">// .add(NexT.motion.middleWares.menu)已经注释掉了</span><br></pre></td></tr></table></figure><p>貌似bootstrp不加也行,没有发现太需要重写的函数</p><h3 id="右边的sidebar鼠标滚动目录滑动事件没了"><a href="#右边的sidebar鼠标滚动目录滑动事件没了" class="headerlink" title="右边的sidebar鼠标滚动目录滑动事件没了"></a>右边的sidebar鼠标滚动目录滑动事件没了</h3><p>核心代码是utils.js中的initSidebarDimension（）函数<br>直接调用即可。<br>**强烈建议用有道词典看看那些个函数的注释，这个注释就写的很清楚，一开始我找了好久没有跟到相关的代码，最后，偶尔看到了，还好有点英语基础。<br>utils.js<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">/**</span><br><span class="line"> * Init Sidebar & TOC inner dimensions on all pages and for all schemes.</span><br><span class="line"> * Need for Sidebar/TOC inner scrolling if content taller then viewport.</span><br><span class="line"> */</span><br><span class="line"> function initSidebarDimension () {</span><br><span class="line"> var updateSidebarHeightTimer;</span><br><span class="line"> $(window).on('resize', function () {</span><br><span class="line"> updateSidebarHeightTimer && clearTimeout(updateSidebarHeightTimer);</span><br><span class="line"> updateSidebarHeightTimer = setTimeout(function () {</span><br><span class="line"> var sidebarWrapperHeight = document.body.clientHeight - NexT.utils.getSidebarSchemePadding();</span><br><span class="line"> updateSidebarHeight(sidebarWrapperHeight);</span><br><span class="line"> }, 0);</span><br><span class="line"> });</span><br></pre></td></tr></table></figure><p></p><h3 id="局部刷新文章不显示了，文章那里是空白的。"><a href="#局部刷新文章不显示了，文章那里是空白的。" class="headerlink" title="局部刷新文章不显示了，文章那里是空白的。"></a>局部刷新文章不显示了，文章那里是空白的。</h3><p>经过审查，是opacity变成了0，我自定义了一个回调函数。<br>opacity.js<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"> opacity_js() {</span><br><span class="line"> // $(".post-block").css({visibility: 'visible',opacity:1});</span><br><span class="line"> // $(".post-header").css({visibility: 'visible',opacity:1});</span><br><span class="line"> // $(".post-body").css({visibility: 'visible',opacity:1});</span><br><span class="line"></span><br><span class="line"> $(".post-block").css({opacity:1});</span><br><span class="line"> $(".post-header").css({opacity:1});</span><br><span class="line"> $(".post-body").css({opacity:1});</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p></p><h3 id="评论没了"><a href="#评论没了" class="headerlink" title="评论没了"></a>评论没了</h3><p>我用的是来必力，其他的评论系统都是一样的操作，去评论系统的官网，或者阅读源码，跟到调用的api重新调用即可。<br><strong>注：下面紧跟着这个是之前错误的仅供记录，下面提供了正确的做法</strong><br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">/*判断#lv-container、comments是否为空，目前这是我找到最好的办法，因为不判断，进入首页或其他的页面会空指针异常。*/</span><br><span class="line"> if ($("#lv-container").length > 0 &&$('.comments').length>0) {</span><br><span class="line"> $(".comments").css({opacity: 1});</span><br><span class="line"> $.getScript("https://cdn-city.livere.com/js/embed.dist.js");</span><br><span class="line"> }</span><br></pre></td></tr></table></figure><p></p><p><strong>注：上面的版本是之前错误的，经过阅读源码</strong><br></p><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span> ($(<span class="string">"#lv-container"</span>).length > <span class="number">0</span> &&$(<span class="string">'.comments'</span>).length><span class="number">0</span>)</span><br></pre></td></tr></table></figure><p></p><p>这句话是没用的,因为每个页面里面易经理加入了这个,并且js是没有重写完整的<br><strong>正确做法：</strong><br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">(function(d, s) {</span><br><span class="line"> var j, e = d.getElementsByTagName(s)[0];</span><br><span class="line"> if (typeof LivereTower === 'function') { return; }</span><br><span class="line"> j = d.createElement(s);</span><br><span class="line"> j.src = 'https://cdn-city.livere.com/js/embed.dist.js';</span><br><span class="line"> j.async = true;</span><br><span class="line"> e.parentNode.insertBefore(j, e);</span><br><span class="line"> })(document, 'script');</span><br></pre></td></tr></table></figure><p></p><p>403的错误是localhost的原因，通过域名访问就没事了<br>不报错401就没问题<br>更新，虽然现实没问题，可是每次到首页总是会报错，id notfound，才疏学浅久久不能解决，决定换成gittalk评论。<br>参看我的另一篇文章。</p><h3 id="局部会闪一下"><a href="#局部会闪一下" class="headerlink" title="局部会闪一下"></a>局部会闪一下</h3><p>boostrap.js bootstrap是必须注释掉的</p><h3 id="阅读数没了"><a href="#阅读数没了" class="headerlink" title="阅读数没了"></a>阅读数没了</h3><p>自定义了一个js<br><strong>注意我第一行的注释</strong><br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br></pre></td><td class="code"><pre><span class="line">function lean_analytics() {</span><br><span class="line"> /*里面的参数原来是{{}}，可能会出现问题，所以在这里我直接将appid和key粘贴过来，具体问题是什么不详*/</span><br><span class="line"> AV.initialize("6og9b7lpddMqazBCDe8z4HqL-gzGzoHsz", "faKN7dalSdXLmYYJTRq98B1f");</span><br><span class="line"> $.getScript("https://cdn1.lncld.net/static/js/av-core-mini-0.6.4.js");</span><br><span class="line"> function showTime(Counter) {</span><br><span class="line"> var query = new AV.Query(Counter);</span><br><span class="line"> var entries = [];</span><br><span class="line"> var $visitors = $(".leancloud_visitors");</span><br><span class="line"></span><br><span class="line"> $visitors.each(function () {</span><br><span class="line"> entries.push( $(this).attr("id").trim() );</span><br><span class="line"> });</span><br><span class="line"></span><br><span class="line"> query.containedIn('url', entries);</span><br><span class="line"> query.find()</span><br><span class="line"> .done(function (results) {</span><br><span class="line"> var COUNT_CONTAINER_REF = '.leancloud-visitors-count';</span><br><span class="line"> if (results.length === 0) {</span><br><span class="line"> $visitors.find(COUNT_CONTAINER_REF).text(0);</span><br><span class="line"> return;</span><br><span class="line"> }</span><br><span class="line"> for (var i = 0; i < results.length; i++) {</span><br><span class="line"> var item = results[i];</span><br><span class="line"> var url = item.get('url');</span><br><span class="line"> var time = item.get('time');</span><br><span class="line"> var element = document.getElementById(url);</span><br><span class="line"> $(element).find(COUNT_CONTAINER_REF).text(time);</span><br><span class="line"> }</span><br><span class="line"> for(var i = 0; i < entries.length; i++) {</span><br><span class="line"> var url = entries[i];</span><br><span class="line"> var element = document.getElementById(url);</span><br><span class="line"> var countSpan = $(element).find(COUNT_CONTAINER_REF);</span><br><span class="line"> if( countSpan.text() == '') {</span><br><span class="line"> countSpan.text(0);</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> })</span><br><span class="line"> .fail(function (object, error) {</span><br><span class="line"> console.log("Error: " + error.code + " " + error.message);</span><br><span class="line"> });</span><br><span class="line"> }</span><br><span class="line"> function addCount(Counter) {</span><br><span class="line"> var $visitors = $(".leancloud_visitors");</span><br><span class="line"> var url = $visitors.attr('id').trim();</span><br><span class="line"> var title = $visitors.attr('data-flag-title').trim();</span><br><span class="line"> var query = new AV.Query(Counter);</span><br><span class="line"></span><br><span class="line"> query.equalTo("url", url);</span><br><span class="line"> query.find({</span><br><span class="line"> success: function(results) {</span><br><span class="line"> if (results.length > 0) {</span><br><span class="line"> var counter = results[0];</span><br><span class="line"> counter.fetchWhenSave(true);</span><br><span class="line"> counter.increment("time");</span><br><span class="line"> counter.save(null, {</span><br><span class="line"> success: function(counter) {</span><br><span class="line"> var $element = $(document.getElementById(url));</span><br><span class="line"> $element.find('.leancloud-visitors-count').text(counter.get('time'));</span><br><span class="line"> },</span><br><span class="line"> error: function(counter, error) {</span><br><span class="line"> console.log('Failed to save Visitor num, with error message: ' + error.message);</span><br><span class="line"> }</span><br><span class="line"> });</span><br><span class="line"> } else {</span><br><span class="line"> var newcounter = new Counter();</span><br><span class="line"> /* Set ACL */</span><br><span class="line"> var acl = new AV.ACL();</span><br><span class="line"> acl.setPublicReadAccess(true);</span><br><span class="line"> acl.setPublicWriteAccess(true);</span><br><span class="line"> newcounter.setACL(acl);</span><br><span class="line"> /* End Set ACL */</span><br><span class="line"> newcounter.set("title", title);</span><br><span class="line"> newcounter.set("url", url);</span><br><span class="line"> newcounter.set("time", 1);</span><br><span class="line"> newcounter.save(null, {</span><br><span class="line"> success: function(newcounter) {</span><br><span class="line"> var $element = $(document.getElementById(url));</span><br><span class="line"> $element.find('.leancloud-visitors-count').text(newcounter.get('time'));</span><br><span class="line"> },</span><br><span class="line"> error: function(newcounter, error) {</span><br><span class="line"> console.log('Failed to create');</span><br><span class="line"> }</span><br><span class="line"> });</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> error: function(error) {</span><br><span class="line"> console.log('Error:' + error.code + " " + error.message);</span><br><span class="line"> }</span><br><span class="line"> });</span><br><span class="line"> }</span><br><span class="line"> var Counter = AV.Object.extend("Counter");</span><br><span class="line"> if ($('.leancloud_visitors').length == 1) {</span><br><span class="line"> addCount(Counter);</span><br><span class="line"> } else if ($('.post-title-link').length > 1) {</span><br><span class="line"> showTime(Counter);</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line">}</span><br></pre></td></tr></table></figure><p></p><h3 id="百度统计-解决了footer自动推送"><a href="#百度统计-解决了footer自动推送" class="headerlink" title="百度统计(解决了footer自动推送)"></a>百度统计(解决了footer自动推送)</h3><p>baidutuisong.js<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">function baidutuisong() {</span><br><span class="line"> var bp = document.createElement('script');</span><br><span class="line"> var curProtocol = window.location.protocol.split(':')[0];</span><br><span class="line"> if (curProtocol === 'https') {</span><br><span class="line"> bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';</span><br><span class="line"> }</span><br><span class="line"> else {</span><br><span class="line"> bp.src = 'http://push.zhanzhang.baidu.com/push.js';</span><br><span class="line"> }</span><br><span class="line"> var s = document.getElementsByTagName("script")[0];</span><br><span class="line"> s.parentNode.insertBefore(bp, s);</span><br><span class="line"></span><br><span class="line">}</span><br></pre></td></tr></table></figure><p></p><h3 id="不蒜子阅读次数失效-解决"><a href="#不蒜子阅读次数失效-解决" class="headerlink" title="不蒜子阅读次数失效(解决)"></a>不蒜子阅读次数失效(解决)</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$.getScript("https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js");</span><br></pre></td></tr></table></figure><h3 id="分类动态（css样式，js不行）"><a href="#分类动态（css样式，js不行）" class="headerlink" title="分类动态（css样式，js不行）"></a>分类动态（css样式，js不行）</h3><p>category.js<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line">function category_js () {</span><br><span class="line"> //在a标签前面加个></span><br><span class="line"> if ($(".jiantou").length==0) {</span><br><span class="line"> $("<div class='jiantou' style='float: left'> &nbsp>&nbsp </div>").prependTo(".category-list-item");</span><br><span class="line"> }</span><br><span class="line"> //首相将子元素ul隐藏</span><br><span class="line"> $(".category-list-child").css("display","none");</span><br><span class="line"> //改变a标签的样式，"display":"inline-block"同时拥有块元素和行元素的两种特性。</span><br><span class="line"> //放到了css中</span><br><span class="line"> // $(".category-list-link").css({"width":"1000px","display":"inline-block"});</span><br><span class="line"></span><br><span class="line"> //加入过滤器功能，因为if貌似不支持this功能，a标签如果有同级元素ul的话会使跳转功能失效，没有同级元素ul的话继续跳转</span><br><span class="line"> $(".category-list-link").filter(function () {</span><br><span class="line"> return $(this).siblings(".category-list-child").length>0</span><br><span class="line"> }).attr("href","javascript:void(0)").css({"font-weight":"bold"});</span><br><span class="line"> //点击出现隐藏功能，a标签如果有同级元素ul的话会使跳转功能失效，没有同级元素ul的话继续跳转，上面已经做了处理。</span><br><span class="line"> $(".category-list-link").click(function () {</span><br><span class="line"> $(this).siblings(".category-list-child").slideToggle();</span><br><span class="line"> })</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"> $(".posts-expand .post-body ul li ").css("list-style-type", "none");</span><br><span class="line"> //去掉下划线</span><br><span class="line"> $(".category-list-link ").css("border-bottom", "none");</span><br><span class="line"></span><br><span class="line">}</span><br></pre></td></tr></table></figure><p></p><h3 id="分享失败"><a href="#分享失败" class="headerlink" title="分享失败"></a>分享失败</h3><p>原来用的addthis，不行，又换百度，还是不行，干脆自己整了一个<br>网上有share.js(有兴趣的自己学习一下)<br>share.js<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">// define(['jquery.share.min'],function () {</span><br><span class="line">var $config = {</span><br><span class="line"> sites : ['weibo','qq', 'wechat','tencent','qzone','douban', 'facebook', 'google','twitter'],</span><br><span class="line"> disabled: [ 'linkedin', 'diandian'],</span><br><span class="line"> wechatQrcodeTitle: "微信扫一扫",</span><br><span class="line"> wechatQrcodeHelper: '<p>微信扫一扫，右上角分享</p>',</span><br><span class="line"> source: 'Leesin Dong'</span><br><span class="line">};</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">$('.post-spread').share($config);</span><br><span class="line"></span><br><span class="line">function pjaxshare() {</span><br><span class="line"> $('.post-spread').share($config);</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p></p><h3 id="评分系统（已经舍弃，感觉无用）"><a href="#评分系统（已经舍弃，感觉无用）" class="headerlink" title="评分系统（已经舍弃，感觉无用）"></a>评分系统（已经舍弃，感觉无用）</h3><h3 id="懒加载函数"><a href="#懒加载函数" class="headerlink" title="懒加载函数"></a>懒加载函数</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">$('img').lazyload({</span><br><span class="line"> placeholder: '/images/loading.gif',</span><br><span class="line"> effect: 'fadeIn',</span><br><span class="line"> threshold : 100,</span><br><span class="line"> failure_limit : 20,</span><br><span class="line"> skip_invisible : false</span><br><span class="line"> });</span><br></pre></td></tr></table></figure><h1 id="忘了最后最重要的一点一点，点击浏览器的返回前进按钮，特效还是失败了"><a href="#忘了最后最重要的一点一点，点击浏览器的返回前进按钮，特效还是失败了" class="headerlink" title="忘了最后最重要的一点一点，点击浏览器的返回前进按钮，特效还是失败了"></a>忘了最后最重要的一点一点，点击浏览器的返回前进按钮，特效还是失败了</h1><p>辛辛苦苦google了三天的结果。<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(window).on('popstate.pjax', function () {</span><br><span class="line"> pjax();</span><br><span class="line">})</span><br></pre></td></tr></table></figure><p></p><p>暂时先这么多吧~<br>喜欢的点个星星，加个关注。</p></div><div><div><div style="text-align:center;color:#555;font-size:14px">-------------The End-------------</div></div></div><div><div class="my_post_copyright"><p><span>本文标题:</span><a href="/hexo_yi_pjax.html">hexo next主题深度优化(一)，加入pjax功能</a></p><p><span>文章作者:</span><a href="/" title="访问 Leesin.Dong 的个人博客">Leesin.Dong</a></p><p><span>发布时间:</span>2018年12月18日 - 19:12</p><p><span>最后更新:</span>2018年12月24日 - 17:12</p><p><span>原始链接:</span><a href="/hexo_yi_pjax.html" title="hexo next主题深度优化(一)，加入pjax功能">http://mmmmmm.me/hexo_yi_pjax.html</a></p><p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p></div></div><footer class="post-footer"><div class="post-tags"><a href="/tags/hexo/" rel="tag"><i class="fa fa-tag"></i> hexo</a></div><div class="post-nav"><div class="post-nav-next post-nav-item"><a href="/To_myself.html" rel="next" title="To myself"><i class="fa fa-chevron-left"></i> To myself</a></div><span class="post-nav-divider"></span><div class="post-nav-prev post-nav-item"><a href="/hexo_er_lazy.html" rel="prev" title="hexo next主题深度优化(二)，懒加载">hexo next主题深度优化(二)，懒加载 <i class="fa fa-chevron-right"></i></a></div></div></footer></div></article><div class="post-spread"></div></div></div><div id="gitalk-container"></div></div><div class="sidebar-toggle"><div class="sidebar-toggle-line-wrap"><span class="sidebar-toggle-line sidebar-toggle-line-first"></span> <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span> <span class="sidebar-toggle-line sidebar-toggle-line-last"></span></div></div><aside id="sidebar" class="sidebar"><div class="sidebar-inner"><ul class="sidebar-nav motion-element"><li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">Table of Contents</li><li class="sidebar-nav-overview" data-target="site-overview-wrap">Overview</li></ul><section class="site-overview-wrap sidebar-panel"><div class="site-overview"><div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person"><p class="site-author-name" itemprop="name">Leesin.Dong</p><p class="site-description motion-element" itemprop="description">To be a better me</p></div><nav class="site-state motion-element"><div class="site-state-item site-state-posts"><a href="/archives/"><span class="site-state-item-count">11</span> <span class="site-state-item-name">posts</span></a></div><div class="site-state-item site-state-categories"><a href="/categories/index.html"><span class="site-state-item-count">3</span> <span class="site-state-item-name">categories</span></a></div><div class="site-state-item site-state-tags"><a href="/tags/index.html"><span class="site-state-item-count">2</span> <span class="site-state-item-name">tags</span></a></div></nav><div class="feed-link motion-element"><a href="/atom.xml" rel="alternate"><i class="fa fa-rss"></i> RSS</a></div></div></section><section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active"><div class="post-toc"><div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#背景："><span class="nav-number">1.</span> <span class="nav-text">背景：</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#进入正题"><span class="nav-number">2.</span> <span class="nav-text">进入正题</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#pjax初体验–instantclick"><span class="nav-number">2.1.</span> <span class="nav-text">pjax初体验–instantclick</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#真正的pjax"><span class="nav-number">2.2.</span> <span class="nav-text">真正的pjax</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#第一步"><span class="nav-number">2.2.1.</span> <span class="nav-text">第一步</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#第二步"><span class="nav-number">2.2.2.</span> <span class="nav-text">第二步</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#第三步"><span class="nav-number">2.2.3.</span> <span class="nav-text">第三步</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#第四步"><span class="nav-number">2.2.4.</span> <span class="nav-text">第四步</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#专门基于hexo-next主题的pjax（将丢失的js效果重现）"><span class="nav-number">3.</span> <span class="nav-text">专门基于hexo next主题的pjax（将丢失的js效果重现）</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#将下面讲到的提取出来"><span class="nav-number">3.1.</span> <span class="nav-text">将下面讲到的提取出来</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#点击右边的sidebar，sidebar不出现"><span class="nav-number">3.2.</span> <span class="nav-text">点击右边的sidebar，sidebar不出现</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#sidebar自动隐藏，自动显示，点击出现，点击隐藏，回到首页，回到中间等操作"><span class="nav-number">3.2.1.</span> <span class="nav-text">sidebar自动隐藏，自动显示，点击出现，点击隐藏，回到首页，回到中间等操作</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#添加bootstrp出现闪屏的现象"><span class="nav-number">3.2.2.</span> <span class="nav-text">添加bootstrp出现闪屏的现象</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#右边的sidebar鼠标滚动目录滑动事件没了"><span class="nav-number">3.2.3.</span> <span class="nav-text">右边的sidebar鼠标滚动目录滑动事件没了</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#局部刷新文章不显示了，文章那里是空白的。"><span class="nav-number">3.2.4.</span> <span class="nav-text">局部刷新文章不显示了，文章那里是空白的。</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#评论没了"><span class="nav-number">3.2.5.</span> <span class="nav-text">评论没了</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#局部会闪一下"><span class="nav-number">3.2.6.</span> <span class="nav-text">局部会闪一下</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#阅读数没了"><span class="nav-number">3.2.7.</span> <span class="nav-text">阅读数没了</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#百度统计-解决了footer自动推送"><span class="nav-number">3.2.8.</span> <span class="nav-text">百度统计(解决了footer自动推送)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#不蒜子阅读次数失效-解决"><span class="nav-number">3.2.9.</span> <span class="nav-text">不蒜子阅读次数失效(解决)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#分类动态（css样式，js不行）"><span class="nav-number">3.2.10.</span> <span class="nav-text">分类动态（css样式，js不行）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#分享失败"><span class="nav-number">3.2.11.</span> <span class="nav-text">分享失败</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#评分系统（已经舍弃，感觉无用）"><span class="nav-number">3.2.12.</span> <span class="nav-text">评分系统（已经舍弃，感觉无用）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#懒加载函数"><span class="nav-number">3.2.13.</span> <span class="nav-text">懒加载函数</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#忘了最后最重要的一点一点，点击浏览器的返回前进按钮，特效还是失败了"><span class="nav-number">4.</span> <span class="nav-text">忘了最后最重要的一点一点，点击浏览器的返回前进按钮，特效还是失败了</span></a></li></ol></div></div></section></div></aside></div><script>function password(){}var div=$(".post-body"),toc=$(".post-toc-wrap");password()</script></main></div><footer id="footer" class="footer"><div class="footer-inner"><div class="copyright">© <span itemprop="copyrightYear">2019</span> <span class="with-love" id="heart"><i class="fa fa-user"></i> </span><span class="author" itemprop="copyrightHolder">Leesin.Dong</span></div><div class="powered-by">Powered by <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a></div><span class="post-meta-divider">|</span><div class="theme-info">Theme — <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Muse</a> v5.1.4</div></div></footer><div class="back-to-top"><i class="fa fa-arrow-up"></i></div></div><script type="text/javascript">"[object Function]"!==Object.prototype.toString.call(window.Promise)&&(window.Promise=null)</script><script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script><script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script><script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script><script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script><script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script><script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script><script type="text/javascript" src="/js/src/utils.js?v=5.1.4"></script><script type="text/javascript" src="/js/src/motion.js?v=5.1.4"></script><script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.4"></script><script type="text/javascript" src="/js/src/post-details.js?v=5.1.4"></script><script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.4"></script></body></html><script src="/js/src/pjax/lazyload_min.js"></script><script src="/js/src/pjax/comments/comments.gitalk.js"></script><script src="/js/src/pjax/require.js" defer async data-main="/js/src/pjax/main.js"></script><!-- rebuild by neat -->