<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>Invictus</title>
  
  <subtitle>C&#39;est la vie</subtitle>
  <link href="/atom.xml" rel="self"/>
  
  <link href="http://blog.paddings.cn/"/>
  <updated>2020-05-21T00:26:05.359Z</updated>
  <id>http://blog.paddings.cn/</id>
  
  <author>
    <name>lancelot lewis</name>
    
  </author>
  
  <generator uri="https://hexo.io/">Hexo</generator>
  
  <entry>
    <title>潇水彷徨</title>
    <link href="http://blog.paddings.cn/2018/07/30/xiami/Lost-in-river/"/>
    <id>http://blog.paddings.cn/2018/07/30/xiami/Lost-in-river/</id>
    <published>2018-07-30T13:45:07.000Z</published>
    <updated>2020-05-21T00:26:05.359Z</updated>
    
    <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script><h3 id="潇水彷徨"><a href="#潇水彷徨" class="headerlink" title="潇水彷徨"></a>潇水彷徨</h3><!-- ---茗 --><p>踱步徘徊无前路，群稚上空万鸟飞。<br>和风弱扶三蓑柳，暴雨堪折一剪梅。<br>振翅何须积跬步，断辕哪供千里行。<br>时移情移荃不察，何知相知还有谁？  </p><!-- *大四·考研毕* -->]]></content>
    
    <summary type="html">
    
      潇水彷徨
    
    </summary>
    
    
      <category term="Xiami" scheme="http://blog.paddings.cn/categories/Xiami/"/>
    
    
      <category term="poem" scheme="http://blog.paddings.cn/tags/poem/"/>
    
  </entry>
  
  <entry>
    <title>日落灵犀</title>
    <link href="http://blog.paddings.cn/2018/07/30/xiami/Sunset-with-missing/"/>
    <id>http://blog.paddings.cn/2018/07/30/xiami/Sunset-with-missing/</id>
    <published>2018-07-30T13:35:13.000Z</published>
    <updated>2020-05-21T00:26:05.359Z</updated>
    
    <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script><h3 id="日落灵犀"><a href="#日落灵犀" class="headerlink" title="日落灵犀"></a>日落灵犀</h3><!-- ---茗 --><p>长河渐落蒸日浅，暮霭停云荷池边。<br>银光弄影花亦好，可恨异地月更圆。<br>寄意寒月亲人面，伊人笑坐话秋千。<br>一盏残芯一思念，半池涟漪半池缘。  </p><!-- *毕业前夕·灵犀桥边* -->]]></content>
    
    <summary type="html">
    
      日落灵犀
    
    </summary>
    
    
      <category term="Xiami" scheme="http://blog.paddings.cn/categories/Xiami/"/>
    
    
      <category term="poem" scheme="http://blog.paddings.cn/tags/poem/"/>
    
  </entry>
  
  <entry>
    <title>清明对月</title>
    <link href="http://blog.paddings.cn/2018/07/30/xiami/Qingming-with-moon/"/>
    <id>http://blog.paddings.cn/2018/07/30/xiami/Qingming-with-moon/</id>
    <published>2018-07-30T13:30:21.000Z</published>
    <updated>2020-05-21T00:26:05.359Z</updated>
    
    <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script><h3 id="清明对月"><a href="#清明对月" class="headerlink" title="清明对月"></a>清明对月</h3><!-- ---茗 --><p>床空孤灯伫，寒食隔夜存。<br>遥托相思去，倍惜眼前人。<br>踏青青山碧，寄灯灯火莹。<br>仲暮活枯柳，斜影闹黄昏。  </p><!-- *2014-04-04* -->]]></content>
    
    <summary type="html">
    
      清明对月
    
    </summary>
    
    
      <category term="Xiami" scheme="http://blog.paddings.cn/categories/Xiami/"/>
    
    
      <category term="poem" scheme="http://blog.paddings.cn/tags/poem/"/>
    
  </entry>
  
  <entry>
    <title>夜廊听风</title>
    <link href="http://blog.paddings.cn/2018/07/30/xiami/Wind-at-lobby-night/"/>
    <id>http://blog.paddings.cn/2018/07/30/xiami/Wind-at-lobby-night/</id>
    <published>2018-07-30T13:24:29.000Z</published>
    <updated>2020-05-21T00:26:05.359Z</updated>
    
    <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script><h3 id="夜廊听风"><a href="#夜廊听风" class="headerlink" title="夜廊听风"></a>夜廊听风</h3><!-- ---茗 --><p>独卧夜廊畅丹丘，窃以石室归断垣。<br>云倦云舒自有意，花开花落我无缘。<br>何故晚风急飒飒，应怜寒叶诉嘤嘤。<br>抬望小楼新骄月，也难如钩也难圆。  </p><!-- *2014-04-20·伤愈* -->]]></content>
    
    <summary type="html">
    
      夜廊听风
    
    </summary>
    
    
      <category term="Xiami" scheme="http://blog.paddings.cn/categories/Xiami/"/>
    
    
      <category term="poem" scheme="http://blog.paddings.cn/tags/poem/"/>
    
  </entry>
  
  <entry>
    <title>秋语</title>
    <link href="http://blog.paddings.cn/2018/07/30/xiami/The-whisper-of-autumn/"/>
    <id>http://blog.paddings.cn/2018/07/30/xiami/The-whisper-of-autumn/</id>
    <published>2018-07-30T12:50:23.000Z</published>
    <updated>2020-05-21T00:26:05.355Z</updated>
    
    <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script>    <div id="aplayer-QsnHLQsQ" class="aplayer aplayer-tag-marker meting-tag-marker"         data-id="1926586" data-server="netease" data-type="song" data-mode="circulation" data-autoplay="false" data-mutex="true" data-listmaxheight="340px" data-preload="auto" data-theme="#ad7a86"    ></div><h3 id="秋语"><a href="#秋语" class="headerlink" title="秋语"></a>秋语</h3><!-- ---茗 --><p>骤雨掀地狂，乌云染树黄。<br>雾云开混沌，天地辩苍茫。  </p><!-- *高中绿苑文学社·报名作品* -->]]></content>
    
    <summary type="html">
    
      秋语
    
    </summary>
    
    
      <category term="Xiami" scheme="http://blog.paddings.cn/categories/Xiami/"/>
    
    
      <category term="poem" scheme="http://blog.paddings.cn/tags/poem/"/>
    
  </entry>
  
  <entry>
    <title>与 Input date 作斗争</title>
    <link href="http://blog.paddings.cn/2018/07/24/html/input-date/"/>
    <id>http://blog.paddings.cn/2018/07/24/html/input-date/</id>
    <published>2018-07-24T16:30:27.000Z</published>
    <updated>2020-05-21T00:26:05.359Z</updated>
    
    <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script><blockquote><p>万恶的 input，总有一天你会屈服的</p></blockquote><a id="more"></a><h2 id="前言介绍"><a href="#前言介绍" class="headerlink" title="前言介绍"></a>前言介绍</h2><p><code>input</code> 作为表单元素的输入控件，承担着复杂而又繁重的角色。从文本到数字、网址、邮箱地址，再到单选、多选、滑动条，再到年月日时分，甚至于还有输入文件的功能，然而每一种类型都让人可爱可憎可恨。最近是跟这 <code>type=date</code> 系列杠上了，于是决定对它进行一番“批判”。</p><h2 id="input-日期的种类"><a href="#input-日期的种类" class="headerlink" title="input 日期的种类"></a>input 日期的种类</h2><p>根据 <a href="http://www.w3school.com.cn/html5/att_input_type.asp" target="_blank" rel="noopener">w3school</a> 中的介绍，一共就以下几种吧（都是 HTML5 中特有的类型）。</p><ul><li>date</li><li>datetime</li><li>datetime-local</li><li>month</li><li>week</li><li>time</li></ul><h2 id="默认值的-Bug"><a href="#默认值的-Bug" class="headerlink" title="默认值的 Bug"></a>默认值的 Bug</h2><p><code>input</code>元素中支持同时显示日期和时间的类型为<code>datetime</code>、<code>datetime-local</code>两种，将<code>yyyy-MM-dd hh:mm</code>赋值给表单控件，类型为<code>datetime</code>的可以完美显示出来，但是类型为<code>datetime-local</code>就显示如下</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">The specified value <span class="string">"2018-08-09 20:54"</span> does not conform to the required format.  The format is <span class="string">"yyyy-MM-ddThh:mm"</span> followed by optional <span class="string">":ss"</span> or <span class="string">":ss.SSS"</span>.</span><br></pre></td></tr></table></figure><p><code>datetime</code>在页面中显示就是一个纯文本框，想要页面出现日期时间选择的控件就必须使用<code>datetime-local</code>，但它默认是不支持<code>yyyy-MM-dd hh:mm</code>格式的时间的，那就想着把它转换成一个<code>Date</code>对象吧。在 PC 端浏览器是可以直接使用<code>new Date()</code>将其转换成一个<code>Date</code>对象的，而到了手机端，却像个失忆患者一样，拼命的告诉你转换的值为<code>null</code>。</p><p>在查询资料之后，发现移动端浏览器中的<code>Date</code>对象是不支持<code>yyyy-MM-dd hh:mm</code>这种格式的时间字符串，需要将其改变为<code>yyyy/MM/dd hh:mm</code>形式。然后在改变之后生成的值竟然和实际的值相差 8 个小时（对应当地东八区）：</p><figure class="highlight javascript"><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"><span class="keyword">const</span> date = <span class="string">'2018/08/09 20:54'</span>;</span><br><span class="line"><span class="keyword">new</span> <span class="built_in">Date</span>(date); <span class="comment">// PC 端     2018/08/09 20:54</span></span><br><span class="line"><span class="keyword">new</span> <span class="built_in">Date</span>(date); <span class="comment">// mobile 端 2018/08/09 12:54</span></span><br></pre></td></tr></table></figure><p>尝试着按照上面的提示将原时间字符串格式转换为<code>yyyy-MM-ddThh:mm</code>，就真的可以正确的给<code>input</code>元素添加默认值了。</p><h2 id="HTML5-中new-Date的时区"><a href="#HTML5-中new-Date的时区" class="headerlink" title="HTML5 中new Date的时区"></a>HTML5 中<code>new Date</code>的时区</h2><p>在上一节中，在移动端使用<code>yyyy/MM/dd hh:mm</code>的格式给进行<code>Date</code>对象实例化的时候，会出现生成的时间直接显示成 0 时区，继续摸索中又发现实例化出来的<code>Date</code>对象调用<code>getHours</code>函数时获取出来的小时数又是经过了当地时区转化的，因而能大致得出结论：移动端中<code>Date</code>对象生成的时间转换成字符串的时候是默认不带时区，时间对象本身的值还是没有问题的。<br>接下来，坑爹的事情来了。在页面中使用了<code>datetime-local</code>用于时间选择后，现在已经能够正常赋值了（前提是使用<code>yyyy-MM-ddThh:mm</code>格式），其实也理所应当的，选择时间后，返回的依然是<code>yyyy-MM-ddThh:mm</code>格式的时间字符串（依然是 0 时区），然后再将这个值转化成<code>Date</code>对象，返回的值比预想中要大了 8 个小时，没毛病，毕竟它显示的值就是 0 时区的，再转换回东八区时间就是加 8 个小时，但问题是 PC 端转换出来的值又是正确的，总有一方得妥协。毫无疑问，选择就是你了——移动端。</p><h2 id="移动端取值、赋值的处理"><a href="#移动端取值、赋值的处理" class="headerlink" title="移动端取值、赋值的处理"></a>移动端取值、赋值的处理</h2><p>以上已经能够了解移动端中<code>input</code>元素<code>datetime-local</code>类型的坑了，接下来就是解决方案。<br>首先是在赋值默认值的时候，将获取到的时间戳转换成<code>yyyy-MM-ddTmm:hh</code>格式的字符串（不能使用<code>toISOString</code>方法，该方法会返回 0 时区的值，导致字面上看起来又少了 8 个小时）。<br>然后再选择完时间之后，提交表单的时候将获得的<code>yyyy-MM-ddTmm:hh</code>格式的时间字符串将<code>T</code>替换成<code></code>即可：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">date.replace(<span class="string">'T'</span>, <span class="string">' '</span>);</span><br></pre></td></tr></table></figure><p>这样就能实现 PC 端和移动端兼容的<code>input</code>时间选择功能。</p><h2 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h2><p>HTML5 虽然发展到现在已经很不错了，但在<code>input</code>中的日期类型中还有一定的路要走。</p>]]></content>
    
    <summary type="html">
    
      &lt;blockquote&gt;
&lt;p&gt;万恶的 input，总有一天你会屈服的&lt;/p&gt;
&lt;/blockquote&gt;
    
    </summary>
    
    
      <category term="Html" scheme="http://blog.paddings.cn/categories/Html/"/>
    
    
      <category term="html" scheme="http://blog.paddings.cn/tags/html/"/>
    
      <category term="input" scheme="http://blog.paddings.cn/tags/input/"/>
    
  </entry>
  
  <entry>
    <title>Web 页面 Meta 的 Referrer Policy</title>
    <link href="http://blog.paddings.cn/2018/07/17/html/Meta-Referrer-Policy/"/>
    <id>http://blog.paddings.cn/2018/07/17/html/Meta-Referrer-Policy/</id>
    <published>2018-07-17T11:33:36.000Z</published>
    <updated>2020-05-21T00:26:05.355Z</updated>
    
    <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script><blockquote><p>一个图片，本站或者外站，都要想办法拿到</p></blockquote><a id="more"></a><h2 id="前言介绍"><a href="#前言介绍" class="headerlink" title="前言介绍"></a>前言介绍</h2><p>近期在一个项目中，需要引用大量外部网站的图片，竟意外的发现在生成环境中没有问题，但在本地的开发环境下，有部分图片无法显示。于是就开启了跨域图片显示的斗争中。</p><h2 id="名词解释"><a href="#名词解释" class="headerlink" title="名词解释"></a>名词解释</h2><p>什么是<strong>引用策略（Referrer Policy）</strong>？引用策略就是从一个文档发出请求时，是否在请求头部定义 Referrer 的设置。</p><p>目前很多网站的防盗链机制都是用头部定义 Referrer 来判断是否是盗链。其实这个很容易破解，自己在请求时加上 Referrer 头部就行。</p><p>在哪些情况下会设置引用头呢？一般来说，加载一个 HTML 页面之后，本 HTML 页面里的 JavaScript 文件，CSS 文件，画面文件都会设置 Referrer。然后，点击这个 HTML 页面里的链接，跳转其它画面时，也会设置 Referrer。</p><h2 id="Referrer-Policy-的值"><a href="#Referrer-Policy-的值" class="headerlink" title="Referrer Policy 的值"></a>Referrer Policy 的值</h2><ol><li>空字符串</li><li>no-referrer</li><li>no-referrer-when-downgrade</li><li>same-origin</li><li>origin</li><li>strict-origin</li><li>origin-when-cross-origin</li><li>strict-origin-when-cross-origin</li><li>unsafe-url</li></ol><h3 id="空字符串"><a href="#空字符串" class="headerlink" title="空字符串"></a>空字符串</h3><p>默认值：一般浏览器的默认值是 no-referrer-when-downgrade</p><h3 id="no-referrer"><a href="#no-referrer" class="headerlink" title="no-referrer"></a>no-referrer</h3><p>所有请求不发送 referrer。</p><h3 id="no-referrer-when-downgrade"><a href="#no-referrer-when-downgrade" class="headerlink" title="no-referrer-when-downgrade"></a>no-referrer-when-downgrade</h3><p>当请求安全级别下降时不发送 referrer。目前，只有一种情况会发生安全级别下降，即从 HTTPS 到 HTTP。HTTPS 到 HTTP 的资源引用和链接跳转都不会发送 referrer。</p><h3 id="same-origin"><a href="#same-origin" class="headerlink" title="same-origin"></a>same-origin</h3><p>对于同源的链接和引用，会发送referrer，其他的不会。</p><p>同源的意思是指同一个域名且同一协议。</p><p>如果设置成 same-origin，那么 aaa.com 引用 bbb.com 的资源，不会发送 referrer。子域名也不是同一个域名，aaa.com 引用 test.aaa.com 的资源，不会发送 referrer。</p><h3 id="origin"><a href="#origin" class="headerlink" title="origin"></a>origin</h3><p>会发送 referrer，但只会发送源信息。源信息包括访问协议和域名。</p><h3 id="strict-origin"><a href="#strict-origin" class="headerlink" title="strict-origin"></a>strict-origin</h3><p>这个相当于 origin 和 no-referrer-when-downgrade 的 AND 合体。即在安全级别下降时不发送 referrer；安全级别未下降时发送源信息。</p><blockquote><p>注意：这个是新加的标准，有些浏览器可能还不支持。</p></blockquote><h3 id="origin-when-cross-origin"><a href="#origin-when-cross-origin" class="headerlink" title="origin-when-cross-origin"></a>origin-when-cross-origin</h3><p>这个相当于 origin 和 same-origin 的 OR 合体。同源的链接和引用，会发送完全的 referrer 信息；但非同源链接和引用时，只发送源信息。</p><h3 id="strict-origin-when-cross-origin"><a href="#strict-origin-when-cross-origin" class="headerlink" title="strict-origin-when-cross-origin"></a>strict-origin-when-cross-origin</h3><p>这个比较复杂，同源的链接和引用，会发送 referrer。安全级别下降时不发送 referrer。其它情况下发送源信息。</p><blockquote><p>注意：这个是新加的标准，有些浏览器可能还不支持。</p></blockquote><h3 id="unsafe-url"><a href="#unsafe-url" class="headerlink" title="unsafe-url"></a>unsafe-url</h3><p>无论是否发生协议降级，无论是本站链接还是站外链接，统统都发送 Referrer 信息。正如其名，这是最宽松而最不安全的策略。</p><h2 id="Referrer-Policy-的设置方法"><a href="#Referrer-Policy-的设置方法" class="headerlink" title="Referrer Policy 的设置方法"></a>Referrer Policy 的设置方法</h2><p>我们可以用以下方法来设置引用策略（Referrer Policy）。</p><ul><li>通过 http 响应头中的 Referrer-Policy 字段</li><li>通过 meta 标签，name 为 referrer</li><li>通过<code>&lt;a&gt;</code>、<code>&lt;area&gt;</code>、<code>&lt;img&gt;</code>、<code>&lt;iframe&gt;</code>、<code>&lt;link&gt;</code>元素的 <code>referrerpolicy</code> 属性。</li><li>通过<code>&lt;a&gt;</code>、<code>&lt;area&gt;</code>、<code>&lt;link&gt;</code>元素的 <code>rel=noreferrer</code> 属性。</li></ul><h3 id="通过-http-响应头中的-Referrer-Policy-字段"><a href="#通过-http-响应头中的-Referrer-Policy-字段" class="headerlink" title="通过 http 响应头中的 Referrer-Policy 字段"></a>通过 http 响应头中的 Referrer-Policy 字段</h3><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">Content-Security-Policy:</span> <span class="string">referrer</span> <span class="literal">no</span><span class="string">-referrer|no-referrer-when-downgrade|origin|origin-when-cross-origin|unsafe-url;</span></span><br></pre></td></tr></table></figure><p>Apache 下，设置方法如下：</p><figure class="highlight xml"><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"><span class="tag">&lt;<span class="name">IfModule</span> <span class="attr">mod_headers.c</span>&gt;</span></span><br><span class="line">  Header set Content-Security-Policy: "referrer=no-referrer"</span><br><span class="line"><span class="tag">&lt;/<span class="name">IfModule</span>&gt;</span></span><br></pre></td></tr></table></figure><h3 id="通过-meta-标签，name-为-referrer"><a href="#通过-meta-标签，name-为-referrer" class="headerlink" title="通过 meta 标签，name 为 referrer"></a>通过 meta 标签，name 为 referrer</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"referrer"</span> <span class="attr">content</span>=<span class="string">"no-referrer|no-referrer-when-downgrade|origin|origin-when-crossorigin|unsafe-url"</span>&gt;</span></span><br></pre></td></tr></table></figure><h3 id="通过标签的-referrer-属性"><a href="#通过标签的-referrer-属性" class="headerlink" title="通过标签的 referrer 属性"></a>通过标签的 referrer 属性</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"http://example.com"</span> <span class="attr">referrer</span>=<span class="string">"no-referrer|origin|unsafe-url"</span>&gt;</span>xxx<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure><h2 id="Referrer-策略还有其他历史遗留的值"><a href="#Referrer-策略还有其他历史遗留的值" class="headerlink" title="Referrer 策略还有其他历史遗留的值"></a>Referrer 策略还有其他历史遗留的值</h2><p>Referrer 策略还有其他历史遗留的值，不过不建议使用。</p><ul><li>never 等价于 no-referrer</li><li>default 等价于 no-referrer-when-downgrade</li><li>always 等价于 unsafe-url</li></ul><h2 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h2><p>所以在我当前的项目中使用<code>same-origin</code>是最好的选择了，在其他情况下就根据实际应用场景来进行选择即可</p><!-- https://yutuo.net/archives/f1b375231265f7fd.html --><!-- https://imququ.com/post/referrer-policy.html -->]]></content>
    
    <summary type="html">
    
      &lt;blockquote&gt;
&lt;p&gt;一个图片，本站或者外站，都要想办法拿到&lt;/p&gt;
&lt;/blockquote&gt;
    
    </summary>
    
    
      <category term="Html" scheme="http://blog.paddings.cn/categories/Html/"/>
    
    
      <category term="html" scheme="http://blog.paddings.cn/tags/html/"/>
    
      <category term="meta" scheme="http://blog.paddings.cn/tags/meta/"/>
    
  </entry>
  
  <entry>
    <title>灯</title>
    <link href="http://blog.paddings.cn/2017/03/09/poem/Lamp/"/>
    <id>http://blog.paddings.cn/2017/03/09/poem/Lamp/</id>
    <published>2017-03-09T21:37:23.000Z</published>
    <updated>2020-05-21T00:26:05.363Z</updated>
    
    <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script><!-- https://music.163.com/song/media/outer/url?id=445867337 --><!-- 简单示例 (id, server, type)  -->    <div id="aplayer-PVXhuqsR" class="aplayer aplayer-tag-marker meting-tag-marker"         data-id="445867337" data-server="netease" data-type="song" data-mode="circulation" data-autoplay="false" data-mutex="true" data-listmaxheight="340px" data-preload="auto" data-theme="#ad7a86"    ></div><h3 id="灯"><a href="#灯" class="headerlink" title="灯"></a>灯</h3><p>—lancelot_lewis</p><p>关上灯，打开灯<br>是另外一个世界  </p><p>闭上眼，睁开眼<br>还是同一个现实</p><p><em>2017-03-09</em></p>]]></content>
    
    <summary type="html">
    
      灯
    
    </summary>
    
    
      <category term="Poem" scheme="http://blog.paddings.cn/categories/Poem/"/>
    
    
      <category term="poem" scheme="http://blog.paddings.cn/tags/poem/"/>
    
  </entry>
  
  <entry>
    <title>jQuery-File-Upload(blueimp)爬坑指南</title>
    <link href="http://blog.paddings.cn/2017/03/03/jquery/jQuery-File-Upload-blueimp-%E7%88%AC%E5%9D%91%E6%8C%87%E5%8D%97/"/>
    <id>http://blog.paddings.cn/2017/03/03/jquery/jQuery-File-Upload-blueimp-%E7%88%AC%E5%9D%91%E6%8C%87%E5%8D%97/</id>
    <published>2017-03-03T09:00:16.000Z</published>
    <updated>2020-05-21T00:26:05.359Z</updated>
    
    <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script><blockquote><p>当你无法分辨长的很像的英文的时候，能够拯救你的就只有一遍又一遍的试错了。</p></blockquote><a id="more"></a><h2 id="前言介绍"><a href="#前言介绍" class="headerlink" title="前言介绍"></a>前言介绍</h2><p>最近项目需要一个页面单独上传的功能，要求页面能够做到多文件上传。于是便去寻找 ajax 上传文件的插件，找到 github 排名最高的 ‘jQuery-File-Upload’ 插件，开发者是 ‘buleibm’。一开始还没想过这是谁，后来看到越来越多插件的作者是 ‘blueibm’，一想，原来这货是IBM啊 Ψ(￣∀￣)Ψ<br>给出官方文档地址：<a href="https://github.com/blueimp/jQuery-File-Upload/wiki" target="_blank" rel="noopener">https://github.com/blueimp/jQuery-File-Upload/wiki</a></p><h2 id="简单开始"><a href="#简单开始" class="headerlink" title="简单开始"></a>简单开始</h2><p>只需要简单的 ajax 上传功能很容易配置，首先，引入必要的<code>js</code>文件</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></pre></td><td class="code"><pre><span class="line">&lt;script src&#x3D;&quot;&#x2F;&#x2F;cdn.bootcss.com&#x2F;jquery&#x2F;2.1.4&#x2F;jquery.min.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;script src&#x3D;&quot;&#x2F;&#x2F;cdn.bootcss.com&#x2F;blueimp-file-upload&#x2F;9.17.0&#x2F;js&#x2F;vendor&#x2F;jquery.ui.widget.min.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- 可选，用于兼容古代浏览器 --&gt;</span><br><span class="line">&lt;script src&#x3D;&quot;&#x2F;&#x2F;cdn.bootcss.com&#x2F;blueimp-file-upload&#x2F;9.17.0&#x2F;js&#x2F;jquery.iframe-transport.min.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;script src&#x3D;&quot;&#x2F;&#x2F;cdn.bootcss.com&#x2F;blueimp-file-upload&#x2F;9.17.0&#x2F;js&#x2F;jquery.fileupload.min.js&quot;&gt;&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure><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></pre></td><td class="code"><pre><span class="line">&lt;input id&#x3D;&quot;fileupload&quot; type&#x3D;&quot;file&quot; name&#x3D;&quot;files[]&quot; data-url&#x3D;&quot;server.php&quot; multiple&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">    $(&#39;#fileupload&#39;).fileupload();</span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure><p>搞定（<code>data-url</code>用于配置文件上传的地址，也可以配置到 js 的初始化代码中）</p><h2 id="上传进度"><a href="#上传进度" class="headerlink" title="上传进度"></a>上传进度</h2><p>记得前几年想做文件上传进度显示是非常麻烦的，需要手动写方法不断向服务端请求上传的进度。如今，在 html5 的光环下，显示文件上传进度已经变得非常容易了。<code>jquery-file-upload</code>插件提供一个配置函数用于监听文件的上传进度，在初始化代码中配置，如下代码即可</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></pre></td><td class="code"><pre><span class="line">progress: function(e,data)&#123;</span><br><span class="line">var progress &#x3D; parseInt(data.loaded &#x2F; data.total * 100, 10);</span><br><span class="line">console.log(progress);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="队列模式"><a href="#队列模式" class="headerlink" title="队列模式"></a>队列模式</h2><p>这个页面要求的是多文件上传，总不能等一批文件上传了再上传另一批文件吧？所以文件上传队列功能就比较重要，其实也就是像模仿百度云、微云之类的文件上传方式。只需要添加一个配置项即可</p><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">sequentialUploads: true</span><br></pre></td></tr></table></figure><p>这个时候，上传多个文件就能够实现一个文件接着一个文件上传的效果了，不得不说，这个插件确实很强大。</p><h2 id="图片预览"><a href="#图片预览" class="headerlink" title="图片预览"></a>图片预览</h2><p>扒拉扒拉上传一堆图片，结果想不起来哪些图片已经上传成功，这下就尴尬了。所以简单的图片预览功能也不能少。</p><p>前端显示图片有两种方式，一种是通过<code>img</code>标签加上<code>src</code>属性（由于使用服务端的图片地址会带来额外的开销，img 的方式也会选择本地的图片转换成 base64 编码直接在浏览器显示），另一种就是通过生成<code>canvas</code>直接显示图片。</p><p>最初的想法是使用<code>file</code>绑定的文件直接生成一个<code>base64</code>地址，获取<code>file</code>值的办法就是找到对应元素，使用 js 获取其<code>value</code>， 但是在同时添加多个文件的时候，没有办法获取到所选文件的列表，尝试在<code>add</code>方法中打印出来每一个文件的<code>data</code>数据，但是打印出来<code>file</code>的<code>value</code>都是同一个，尝试了很多遍，都是一样的结果。所以，这个思路失败。</p><p>然后就开始查看官方的例子，发现就有自带图片预览功能。据调查发现，这款插件使用的是 canvas  的方式。要实现图片预览的功能还需要添加额外的 js 文件</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;script src&#x3D;&quot;&#x2F;&#x2F;cdn.bootcss.com&#x2F;blueimp-load-image&#x2F;2.12.2&#x2F;load-image.all.min.js&quot;&gt;&lt;&#x2F;script&gt;</span><br><span class="line">&lt;script src&#x3D;&quot;&#x2F;&#x2F;cdn.bootcss.com&#x2F;blueimp-file-upload&#x2F;9.17.0&#x2F;js&#x2F;jquery.fileupload-image.min.js&quot;&gt;&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure><p>这个时候生成的file对象中已经添加好了<code>preview</code>子对象（是一个canvas元素），应该在什么时候使用这个子对象呢？也找不到官方的说法，只能自己啃官方给的例子的源代码。最后发现，canvas添加到页面是绑定在<code>processalways</code>事件中，同时添加生成 canvas 最大宽度和高度，代码如下：</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></pre></td><td class="code"><pre><span class="line">previewMaxWidth: 512,</span><br><span class="line">previewMaxHeight: 5000000,</span><br><span class="line">processalways: function(e,data) &#123;</span><br><span class="line">var index &#x3D; data.index,</span><br><span class="line">preview &#x3D; data.files[index].preview;</span><br><span class="line">console.log(preview);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>另外，因为用到了<code>process</code>的绑定，还需要引入 js 文件</p><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">&lt;script src&#x3D;&quot;&#x2F;&#x2F;cdn.bootcss.com&#x2F;blueimp-file-upload&#x2F;9.17.0&#x2F;js&#x2F;jquery.fileupload-process.min.js&quot;&gt;&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure><p>这个文件一定要在<code>jquery.fileupload-image.min.js</code>文件前引入，否则页面会报错（坑爹的官方不给解释啊）</p><p>自己一直卡在这一步，在完成图片预览功能之后，发现进度显示功能出问题了，进度条不再刷新。一直找，一直找，直到发现<code>process</code>和<code>progress</code>是两个单词后，恍然大悟（进度不再更新的原因就是一直把两个单词当做了同一个，所以<code>progress</code>的功能写到了<code>process</code>里面，而<code>process</code>只会执行一次），一眼看错，浪费两小时，说得就是这回事了。</p><h2 id="其他"><a href="#其他" class="headerlink" title="其他"></a>其他</h2><p>额外还有一些小功能，文件类型的限制，拖拽功能等，参加如下：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">acceptFileTypes: &#x2F;(\.|\&#x2F;)(gif|jpe?g|png)$&#x2F;i,</span><br><span class="line">dropZone: $(document),</span><br></pre></td></tr></table></figure><p>其他一些功能可以参加官方文档详阅。</p><h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>之前也做过一些文件上传的功能，要么就是停留在本文中的 ‘简单开始’，要么就是使用整个打包好直接使用的插件<code>bootstrap-file-upload</code>，这也是第一次使用功能自己搭配的组件，认识到了插件的强大可扩展的功能，IBM果然还是厉害。同时项目也使用了<code>vue</code>，确实非常的好用，以下给出自己的本文的一个 demo 仓库，自行查看。<br><a href="https://github.com/LancelotLewis/jqeury-file-upload-demo" target="_blank" rel="noopener">https://github.com/LancelotLewis/jqeury-file-upload-demo</a></p>]]></content>
    
    <summary type="html">
    
      &lt;blockquote&gt;
&lt;p&gt;当你无法分辨长的很像的英文的时候，能够拯救你的就只有一遍又一遍的试错了。&lt;/p&gt;
&lt;/blockquote&gt;
    
    </summary>
    
    
    
  </entry>
  
  <entry>
    <title>Hexo文章简单加密访问</title>
    <link href="http://blog.paddings.cn/2016/12/01/blog/hexo-password/"/>
    <id>http://blog.paddings.cn/2016/12/01/blog/hexo-password/</id>
    <published>2016-12-01T10:45:29.000Z</published>
    <updated>2020-05-21T00:26:05.363Z</updated>
    
    <content type="html"><![CDATA[<div id="hexo-blog-encrypt" data-wpm="抱歉, 这个密码看着不太对, 请再试试." data-whm="抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容."><div class="hbe-input-container"><input type="password" id="hbePass" placeholder="请输入文章密码" /><label>请输入文章密码</label><div class="bottom-line"></div></div><script id="hbeData" type="hbeData" data-hmacdigest="2981aeaa7f47a326b76e455499993c5f1e329df3b6ad0f64527cb1656f31eb34">d8474d52495d73f5dbbe316818c2dff349dc8d845df9f5c25e6dfb72f076f29c639944ca5bf4dbaaac695a13d186c3bfda95a46961a3b15099d630220f68611d6677799a8986cd541a7e543bd744f53cba061eb8480cee74bfaf58c80fc8ac6f146a1975361c68e28a20bc3d4a6d9021d29a0ecc7a0387380028eb287fae30e8cb5a3336dbfb1f128a2e2a94e1ace1281043b72fa99516cc2689f8c0a26353dc09b3da794033c448d39fc9e252b85cac44f513baa73d33e36af746b2090aa8f06c18e89507b93c49e7e4b49ff7e60a823355e86fd30407b9053fa264c3843cf3bb841488ac012e3320b6f88107126115876c665098d6dfa29ca997c405858666f8345c59883d53425a94c4abd02c85611939a390a9b92d8d2e795760241bb58869b8063a409019d2a8bd1379dca0f69c6eecac23178761217cf2eeae8ca3d7a4998299027198b72f416f711b79c60e51fe2d7360e09feab7b6c29a96a99b38849a8a2aef8720d06817d6ba6bf103aecf5c8e1ffdfa134aacda13c0c38a0d13d549dc0d47cbe849d727d0d5a1be40ac487eadf7be3342d57793ea87447a55e8783ff468424423283501c95682b8a99870cdc74c9b3a9707a60141fe143b6d6008fa2cec382e96b237fafffe76def0c41762c7e30b48083d2206ba1118b27bc75841fe961edbd4ddb66a9db0be260c399ecbff1e6f794467384e861a9c838d6bb56c6d473647cb6402c9990aef5439fc8fd2f42ac0714cb33b227d621c46f9341bcedc409dc9860eab66455ceed6bd07e74bac223191060cfaeafe1c3e31857d3d5f04496ddc8c73b08210562e41950edb760a2a8a47aa66a01253c87f7e6733828bfc61fe4787324a298428d1f16e9fa23cbb1ab2ab0461508bf110a62c305b42531b2c59470ecf7d8bf2e26b6a70a451596166548e3217a5b4089f9df0ea28fdf78a40d63024dd4b2b599f16a25f1cdd540a5db75c43641e45a50cfa2425412ae454a126d0308ca82b2c4c9e2cfe12d6283359ca0a22aeb65aa8c7085d687ff1982c694b2a93306ee30d2773abee0e81126c145cac18a24b989a39db540fd5eac1808ce87720d94306b6012930735591108ac9a495a116b1adbe61000987e6e9f0f5425d75337ccd6f14c3a57da5d40ff654edb5715d963ec658e25d90e158b034ac2fe0b3afd5030176bb9c0c96f1f0b2633876f1b742b814403bce91048e1bf4a13f5c35be4ed9c81218c7e0a40da2da5d66e655a9f02420048a82c23e0eefcff81ba9f0548f9d62288e9d816e4a772d3db1dba974f481a3a4f991e73ce0fc832565687ca4a8ae2ac54eb9fc3d974b5ca65e11ba2d526f8cbcaf51ed365ae49feea06d4bd035f3e700dff059738723470bff9e6692003552fbcd118f480f7fc2f942eaa0bf7dbcc1760dabcc039159b2b76df126168c30e750281b0d60117a21a96c4f291021bb84a91ecade1cb7e6789ebc04de2b2f51bb5bc9947275d54d96bf0067a241442ad1c66f53f93e0b84078088857cbdc0857963d09a742caee6cafd709e79383b8be56d58bc0014ddaa5fcffcf44c3d12e6382c651feb95ce2d8610f215b1dd2a09ba936062174af1a869793a30e0c59562e7f6dbd0e673733460929750dcf3d41663d29e5f73f56d144c6b5530cb2c90e82000ad4084079a1c0c47588a4168720844f5ebf6bf1c38b10a9c88133da22e2839ffb5d7b8aa6de0e54181ff4fd4cbde98de5ba449ac7b127167dfa127b827211a150f8a081c5a71126f09d79aacfabf7fd1a984879fd71cf28248f73be1d8881623a647dbc60cd83b09778700625d2f1adcdcd633aa379a8b56be96315dd086bafa6a655494ec2700f9d22f810ac70a2531d1f9edad946dc5e7d2275446afcdc8258f44b8d731f3794eccee4ac491cbcdedfa3911336d368ea84efa70abc8ce444e7b85b1a9f9fb83ab7312f578a8d58b4e221f82554a7776fd395748fc3d63ca46fba4e8da50ff261fad02b457dddcffd0c069382dc1c5bfd85dd3173d01a0cd46719965c516d6359b3a9c0f403e6d1bc185f089e13bcc1b17e143ed75a05bb01e8a724d598435ddddc99d689344f50076bde9f1ec93ed247f0b3850c7c52817fe702facc5cb4a00e74a60735830f0d94f66cf2ed5d5d9f1a4d6c645e3e44eecd669978b7e4bcfec91c3075b0306ab009f07346ebb96b8261b75915aceb18cf2c438f80a23d14465971b52730d07771cab679c6957b9e1a43ce0fa861bd74386db5104b1ed5c4170968030218336c9708ec79dd46f3472e25e352dc6b6992b1073ad589e2c33edfe1dc7d531a1792e24a4e72cd44e5cd1799274c358109ccbcf025af741ac662b023a138ccf239798feb903e92eebe94d625d0ca1d3a2c5c221dbeeda82246529830609050fd7c6eaa26d993908b210f69ae8dfa0820acbe0b20f8160fb6dcc9d0448b793ecfcedc27f04e401e8a6bd8c2c7718a16c191bbee18843ddf52395a8bdee36e47f58a4b4595abf1fb1cea25ebe09d1996ce7f49d5f42d49dc8d22863e54d86b42d17974729415e79d14d06685b8f4c5b36864a62ff15728116fd25e938229b773e2e668e134c6363c74c5743b14292c45f80956a1ea0db26991bdf63a2be65ee0e7e663557e93e7188eb8b1093aa09cabac896390135d92f9dfff0e8b0b262f15a280fdadaffdd70a36b0bfc57df1a2cde4ff4b7d05e9fb74987575597141a83bd78e41262a7bc6114db42be0ec201496a3d054d1377e151e6e8b2d810ed0ddc4c0f96b1f6cd4b6e7393bc03ea3b39a2eb863ada0cdbf74ddb538eeda31702b5f686e0847fb57a34cc2eedac35e3ce4b8901ecd065bcaa06052eaae0c612f0c9cab902f0ad0dc0e6ac3d9084a22c755eb3f92d3145c8866c46437ffa4a3719ceacdfcc8a9a5ee954c564acc0b91edbb0f7dcc627e09449dcc4f9c46813911434c09cae915909f07a05ec6cd329a7c1c417861ee3df008e6e6606d7f2143bd86fc71c3a86f09d92e3424469bdfb4ce3af50994089d6bdbc5114463f1582b38c0c8d2426a14edad25087dc009560db03d9e82eb39bdaf9ecf89ba6411489733a44d96c6044ffe586b4f525da61c99185a9ad66169046d11b1fc094c491f5c6a9c6f19dd13c2b436872dca43f05f7977a69b3067894fe377d515e2c84c634bf8fa4035c33f0a3dd44743258e730edab5ba8f38ea53c8ee1b4732466cf5f557bc84df920d29c9264a20bcca2c4aed1ea3fc797da5395fa3c2b33c4de337deab40c3c24363d39bf72f69a24c2bdf3c2d59cafcac94b3fd3e5f74082842d735e664e13a31be75e5663962f465107f41870d39bc61b3cb321bad91608b7aa15f94c75bec6cdf33b89565ca4595e792325635fdc10e6af7a86f4cfd141881d928abc6ff2a7b99bb0dce42d109271bc6a895279494faa2dbbdd3964dd7b111c41e3ca719f1a45aa87c798bfe51f1cb84b98e9a93593dab00794a39ef1f39702d98d736642c8a4fba2b5508213edbad6d9acf3a3998cd2ca05adae743d43acf3beb8c84b155d3f0e5f4f8b08dea344f24fd1c96b033d9f78194d38177af700acca87431e369b859737167b08bb1973fc27217efb7e8195d91ee9eb878176c895283c2e2bfb036b3ef785b277a4976cbca8858f9048dd246d2ae690d5e9c3468015380d9972290ac41e04174a91f5c9ec5da98e4f19064f8d8bf4d41ed0f8778b08f7daeb323399355c6fdd12f64243651499b7a867b945a56f5241c0d0877094d9ee3ded58c14788c6487a03b58b2dd36904f0974072aeb7df4e4dc86d9b813589800560d765a69066a7bef53992733ae22945d7e77748e991e5166e75d57ed3babadbff2fa95361acb4ae07af991cb07146485b45ee33835ff070c5d2982715d390bd219fd06cc0d3988cf26cef15399ff61d4faa74d4a102e6ad205a3873e2d2597ac4db2d956763f1efad0a31c782f15ab2aca0bbfec9a15ee33059300e744d3eae6a95f9c6b18263aac4baac8442cc58304ae01d2a9c8de5e546e31dc36d9a32c85e4f58c71502c97ef552304c320b5200bde37aff3fe5d29df37ff24bb8b223a36b260bf8a6b4f80dd20241868fbd8ea3f8b3c6dfe65bba13faab770e6a0f36355dca0d45549fe7172aec48b7b9e0834eecf5b0f571fbc9a51b3be2ccb7b615d80cf4e2caa7fb17d756f96bb719402269f8be8760637846006a86f7b9a28974d3e1c96d41671b5911cd2b2bb1fd0ce739acb961fb47a3a391ede92d6cdabf58d998c0de56c8f1795f391e2183c6215d5cd15e894c9efef193b9e1e8cc16ac3d96aa39bb79c8aaa946c2b9324b5b41434f74787c7996ecb82976321a0f54141727e741d857345c37677a32e89a9cce0e282612ea9c06bc0a3a5093887bae7ea3c5792d98289719e0de687b115e74491e7e158b44674241f292ec8193cbcda19c859735696bc397160256e49e2747c90b0d081eb4ad79581f75594455d37879a993f89cfa549859c4bf55f6995ec98ecc7ba1bd771058fa94e3546e4f9210763898ed4e6ad3896bcf03c6a50a2c8e7dd703a98f0f09bae48a976ffe73f73592b6a50f764d6fbdfcae3b476362f6d0d051685a77d3ec6c446358304a5c3c0d3dbb55575cf3333e0d913554cbd241f0c90347873073ece7113729957c2b07a572dc0ca93752829bac54d0e9dbcc7e36d014966a0e2433f1838791e54d12389210413ebc66ee4b16f288213607c9f0975ecce11d9cdcf018da00f1b58d30fd6b2c270778708b429d91c5e1ad4859fe41a83462df330c28fe59af405f495fa917b770321cbe54cf6d00d10d1a1b4036e3ac52c7ed8ec75590b2bd7d323fbf289643135d2c8f59f9ac04493ac476067f7013e75403dcb916eeb88aa253d230471a2373085d0c30c1da65d8fcb8dfb5a8ed91d8c4e7ba9a4ff34f38bd2c463e0a5aa062aa232c348a5529d374ed46971f699b9dd4137d154f2ab4532a034eeba387dc7bb162adc6c3b3647a0165a77648662b266f39ada136e4c1ccec328bf58c078ede1eb012dda63ddb84fc0b5c2e492604ade9c8ecacd9e6ee5180ef81dcd49e7bef094ddcd3ac9a10b58e2e75ace2df1bf36507f4519ec65b321b0951788ad0e73c40c6ce1feb7278ba707d58bd4487e3fd8b59f41415fdff20e1fb1036cac01a5343f795b40046ec6f5fcabaf0f04e88820f6c619c89608029b364a51dbbc434e9135987a6f1f29e7643dc94dc78cc25e276cf80bedb060057b977118e34911b0759dc42fd6ea0f6a3e48cbfb3b506fdb13a4c3a374f94bef6a0bdde67680d41a0c2cce6f6879f35a8b4d8303246c1e4c4d744372606953c273ee75da68d8bcdbf67162fd7a290cccac974ce2fcf816046617caae1f0230dd6cb504136f43160b2a0f1673c526c44f95830427e5b0b242aa01eeba7ce06ae14a0f2e1ee420abcdc3389ec7071dd4915b655c2744012b717f300ef307a845071b689b1430a6e716a3073b86da706a26eee33c340e3eb100493c64ae816ec3816f7523959b2aa6e7b62af4f6bfda9a055195a5bb3fc6165d251c7ebfed5ea31522934f0fbc41f2b7ed1c9d8f39ce9bee15227a22361344a3339ff7dbb294dfe18e2f8171640724c5f6e916757b2d7e74effc2c205c690c1bc7e55a2ea78fec7b085f02a7ce6852a91a40b26a117ba8cafbd690df8bb79d03367b78a5b3523a836cf01351a5e48d36ac610fbae284dc244d59c8d565bb9ecf2defcc069884e56034df930d47b523f34ea05a4b2af543e4ed1a8cc351b1324c959c6713da666688d521cff3cd3c428257aa3dd4d82ab8e1662ec2689d317211587724baf435aa726d0188a02817571e0168b64d7db57a551757203642aa016a52b5534fe07cd1c2be585bad509b683ad767e7136dec4fea0ede38feeede5e6800615846796f4dbd3b9906c17d055ff814e8c04aec5a14038c3be8110c43c556cc02a25674d9078917cdf03b7729431d2153b09705cfeef6a4a86baa5cdd0d6af6ea52ab52c491dd09d8c15baf3a3093c5445eef660f3da85fd88fc7141e78086c069c046139dd2c77a244c9ee97c9f2a95a1dca55ac175841f2910d927c3b3950d9062e50d3abfa99d320e57253554a4043523c0ad719b187749a95d9bf2a788ef8aeef1130b345e8492011913094004c65bce5809efb3821f94fee3a5b67f6d61a028b5c63c8412b029c2a1ed958c4f3b1213e3fadcb29fe56b7397d6429dbf9a6083a8e839bb8305dea75877f832038e1f8ac8178ae4a6802c8bb8624446113a68961af5d3729da9ee1f6187c08b850b8702f1cd53849678bf1a8945b3471a6c38b29bf3b0f9fc7e783ce3cc740f73f9c4ed51331e52c9f466992d254219daa2ca85dc7683d2930256b87b97c8b483a1c4c818732f1ccc15fdc589256a29a73cc22eb36bb1aeabedebb26ddea9954c32e476f65bcf70622399d129fff27d448943226668640483f746bddb3818f246d04625a025dd8a3cae44d21e853a4cf3dc2c6c62075a206c005c52f2585a5bdcd86524054828f18b352689f167643883931106d2abb5c16a6b964b273751d35799fc3056044ed2c98986ccdf264b7c09d5606c98c4541e474b934fd0bb9c81ed6375251356a45500371c75316d688d42be1a117558ae33432c9059a821c64647f875cf3c85ee4bbc9edd94df1095b42fec7d55ff515a44080c2ee93b06c534a98a81ef7a74784124ec133015290777f2d4b50c6a28b0ae74b9255036ff348642af999b44abb445cda729f32d15f709868f4e3097e6a07dfe884313fc1cc2e37557c8ffdccb8aeda2c39f53005a9c1a900dbf4df2216b5d274ed01026b11851690f206f46c6d08814c124a0f09500f18017c03e2a2199662568455c309206a9dd9fd6f315b023ceec81eee62ff95e876809081bf9cdcaf52f42a2e22cea7b336899ecca9200e4872fe2853a4501dc0a6890c2efb3777e49be28170a969c75e6d5d7a1766a2830bb05a28918ac0486351a4a615b121558a3ed881ff419c3195c81aef82f0e3aa4fef20f117e114b66c143f42e57e652e5e7892b506e1e17eb810124920dc1c01c510d603af6a3bd723d3c8a1715bd2482af7a88d3712f2120b1b4ac2b1c3e8d5d3adadd5af3d549a6e55a9c130038a588697e0fa70fe43f63c11a39ab00ab7b8833a5b183915e00ffd36b331f7ade7cb7b0b8742a29faab32fe8bedf674d6ac7db7941d3f21e71162a317987476251716b82daffb97d28dc6cd5fdc0c67c863e630721e2520e68884d4842f22b4b1840563217870de8f32e75e1774820065e63a78e0ac36f69902e3f8afae2ceba70f4b638f3fb7c7537896f4f18a133f71b24302c72917281ae803e3fb4a23b0ccd810c46a6611269b067e6d3c3e33d3b77c5c2cca553ce75ee89b177e726c30399d4343c105e666dab89d7f1182e461476fb3b7fc64447682966437e3f08f0faff3e3ada7fc9c343e4cc5547672ecc1f72592a8905145d49702f677880ab030021dc2f1b52bc1830ce6c652f283bfc2cb8151c1a01aff4482c545dd963bb15e8c48b2b32098eaebb887c46a32d9208c6b34fa8f346257191a32c42c81134c4c6b37d6d901bf5aecdf4a478ed942d447be44094949cb79a71344423747d9e464593ae435eac59164704c57346574cb5213c3f4ffa29ad1af4bdb297a08becfc8a38a36dcc57dd8a29c964352d3df2cbdde1a13fd4f650f33acc600e86e9126a8c23f3d6a376c7954710cf509604411ab8cb5037f3a63c7c91c8b94b21775fe7710093c7baa63cac2932928f941ddbb836a15a4fcb92ea87720cddc3c8708c78e0c2fc6e86445b0ab8adf4d2a460db42b65e3b037415a6bb4d67bb344fd6f1959b9c5ce9e7ec07d8d93e9f9d73b281ca08d3a90a515fd247cb5316e22db848e25ba191607c0f4714d67374696573baa2e9c12f1668b333ddc0205286880e937eb77f9c3874b1f41db67d391b909a7c3733bf654114a88a79c75f7b698fe2d3ff42a241c98cd0abe12f98012b8059d4fb1abf2c4780faa896019d55902666ae3e354c850c79e33ac754d226eaedff7fddd2a27302ad5b1cea6c3f4ff11e5c6139a88595ff7d4df03436e9919aa6cb7b37c59cae570f905946ef5f73c832ed40ea2c8f65214005a6ec885880d3ff31115eaea1af8317b7b8bb8a780759314cb09d396bd3ec2b5511ebbb23fd9dee6a12ed27d802f6fb4a1eec561afe6a3650a4355d21bd4ccfe9475d336d638e52a8f79e8dcee0c6084a12e738f77f95a0a8bfe668c6cbd2d3071567629ca1d2b24380564647410fdf540d9f05b0daf8734b0caea208783fa350ca26ee63dca99c04267562f2c845bb430c0f4affcdc4c4a362017e93b5988d1e2f66a7acc5dec2be75e1ee9818ff785949f7a9dc8ee91a1003e290d8c9eb8e9a8644f7fc2dbf9b0eae300e1f53d8023771a46298f661b55b653d4f50161bfe3eefa851dd34a86b9b4c58b341bc96d907be34afeb4984a187f098de349044c6800fb3e90ae0b5f9dccbec029fac5ba10baf66e4f7128336473a4f27cee4760bc5a5e28527bc99cc2c4e5018808338b7fc17ae0fc0bafbbc5a5bd4266095da240f18fe75aa05da4f86c6bf5a4ecc3c3282adb867ae6cf2ea33d3159be8dd605e18a7d585c5e8b2c8b671892943b1ee9b5b1e77b6ef35397668643487821ae965c8be8abbcfed0fa4daf4ba4ddb82ef8aa5ee5f532b9d765ec9b46246202e1d2010e171908f0b8d13af550f175b0952cb78f36d0ec731358de5a94c2b77b0a3b8dcdac1b1600465c01f1fd70c4730284be2385ac7b6736dc72209cc247095af85d947551149af0c007c19d05e7f241cb283f51e70d84d21306057e8ef166e66a0e984c1bda3b110bb12c1f80aea2e502da17492cfdba4c385abfe6b243bb0c0543b7868eb0089b6d11b50d44881b6f317f0112dd6c95080d65733805b617fb36c2dc2dc099c8977c85a94777835f8febe6d146add3e63b9b74e961592ce08fc9bada04ee28f861b0063f52dab697ad502c60b58024fb333076db8ebb637b0d195e9d8b9fd6e995998f9954dd5ac0d5c804a0da97d25edc53f2d85b4433c81ac1f2d7ecd36995473017fcd66c172485bec9fab8d4a7a2a8d03cf6af6df99a93460eef719d30feddf84aae58abfca71bb2ca1f596c6fe75b8e9154141db422588be5878c679b70e07b38c11a90b2051cb9f5b179babf1f2f816e469209bb05ba48bf0f90aef61370d423b0e5d91ac8a197a1bc2e89498e5e028584bf6bd91bbbbccc2768c738534bc3be364886125b12626f313173ad070a924b3ff34332f6a198e10ccd676dd67046301ff3b969b0b169bed21d7898fdc476751024d8c85bfbd53a0a235a8ab06443bc1c4b7608ae62ee3e5bde4062f805757bbff93e680a3e5b7b3e8cea51f6d6a00287eb74344819bb6bd53a4c0ce25617b128ba35f07d1bc88a869bc591c92575f3fd63a1e382793d89f8ebf6f84c7cfaf96c97c01768951f31c2fc9522fd683c0ee7f3e932608119c28126f2fcd55485370ec0c4c86e5d3b65fd9910ed16988380e8fccc607ad2583fcaea57f2f88f2e7da448fc0deac79e7fc61b4d86ffea920be5bb87f430a5595a6cae5143d750664349c8779eafbae7103fbeb7b9c3092e95006489f7bf12e039561280cef32349a551a179c88bf67d87e80056814fc3bb1c17659f3f222717341a21e7239cfad1</script></div><script src="/lib/blog-encrypt.js"></script><link href="/css/blog-encrypt.css" rel="stylesheet" type="text/css">]]></content>
    
    <summary type="html">
    
      文章访问密码：password
    
    </summary>
    
    
      <category term="博客" scheme="http://blog.paddings.cn/categories/%E5%8D%9A%E5%AE%A2/"/>
    
    
      <category term="hexo" scheme="http://blog.paddings.cn/tags/hexo/"/>
    
  </entry>
  
  <entry>
    <title>冬日斜阳</title>
    <link href="http://blog.paddings.cn/2016/10/31/poem/Low-Winter-Sun/"/>
    <id>http://blog.paddings.cn/2016/10/31/poem/Low-Winter-Sun/</id>
    <published>2016-10-31T15:36:33.000Z</published>
    <updated>2020-05-21T00:26:05.363Z</updated>
    
    <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script><!-- <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="http://music.163.com/outchain/player?type=2&id=29137871&auto=1&height=66"></iframe> --><!-- https://music.163.com/song/media/outer/url?id=445867337 --><!-- <div style="width: 330px;float: right;"></div> -->    <div id="aplayer-YHUAgiBs" class="aplayer aplayer-tag-marker meting-tag-marker"         data-id="29137871" data-server="netease" data-type="song" data-mode="circulation" data-autoplay="false" data-mutex="true" data-listmaxheight="340px" data-preload="auto" data-theme="#ad7a86"    ></div><h3 id="冬日斜阳"><a href="#冬日斜阳" class="headerlink" title="冬日斜阳"></a>冬日斜阳</h3><p>—lancelot_lewis</p><p>初冬<br>暖暖的斜阳<br>照射着书桌</p><p>耳旁<br>淡淡的旋律<br>世界很安静</p><p><em>2016-10-31</em></p>]]></content>
    
    <summary type="html">
    
      冬日斜阳
    
    </summary>
    
    
      <category term="Poem" scheme="http://blog.paddings.cn/categories/Poem/"/>
    
    
      <category term="poem" scheme="http://blog.paddings.cn/tags/poem/"/>
    
  </entry>
  
  <entry>
    <title>Hexo NexT 主题SEO优化指南</title>
    <link href="http://blog.paddings.cn/2016/08/16/blog/Hexo-NexT-SEO/"/>
    <id>http://blog.paddings.cn/2016/08/16/blog/Hexo-NexT-SEO/</id>
    <published>2016-08-16T10:17:07.000Z</published>
    <updated>2020-05-21T00:26:05.359Z</updated>
    
    <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script><blockquote><p>难的不是做完一件事，难的是做好一件事</p></blockquote><h3 id="一、前言"><a href="#一、前言" class="headerlink" title="一、前言"></a>一、前言</h3><p>博客搭起来也有好一段时间了，刚搭博客那会。百度一搜，还能到第一页，现在搜索得到四五页去了。是时候补补SEO方面的优化了。</p><h3 id="二、SEO是什么"><a href="#二、SEO是什么" class="headerlink" title="二、SEO是什么"></a>二、SEO是什么</h3><p>百度百科对”seo”的定义是：SEO（Search Engine Optimization），汉译为搜索引擎优化。搜索引擎优化是一种利用搜索引擎的搜索规则来提高目的网站在有关搜索引擎内的排名的方式。SEO目的理解是：为网站提供生态式的自我营销解决方案，让网站在行业内占据领先地位，从而获得品牌收益。SEO包含站外SEO和站内SEO两方面。因此每个人都有一个标准去衡量这个新名词，确实这个新东西让我们在互联网查询自己的东西很方便，只需要你查询自己的关键词或者你查询的名词都可以很快地的出现你所需要的文章或者图片、视频乃至自己喜欢的宝贝。</p><p>除开站外SEO，自己能做的有两方面。一是针对个人网站的页面排版进行SEO的优化；二是针对搜索引擎进行主动的优化。</p><h3 id="三、针对百度搜索引擎的优化"><a href="#三、针对百度搜索引擎的优化" class="headerlink" title="三、针对百度搜索引擎的优化"></a>三、针对百度搜索引擎的优化</h3><p>生在我大天朝，百度毫无疑问是搜索大头了。尽管最近是有百度各种XXX的消息，百度也确实是做的很不对，但也不得不承认，国内其他搜索引擎还真比不上百度。所以就还是老老实实的去迎合百度搜索引擎吧。</p><h4 id="1-添加百度-sitemap"><a href="#1-添加百度-sitemap" class="headerlink" title="1. 添加百度 sitemap"></a>1. 添加百度 sitemap</h4><p>之前有一篇文章专门讲了<code>sitemap</code>的添加，这里就不多讲了，给出地址：<a href="http://lancelot_lewis.coding.me/2016/05/14/blog/hexo-sitemap/" target="_blank" rel="noopener" title="Hexo 博客添加百度sitemap">Hexo 博客添加百度sitemap</a></p><h4 id="2-添加蜘蛛协议-robots"><a href="#2-添加蜘蛛协议-robots" class="headerlink" title="2. 添加蜘蛛协议 robots"></a>2. 添加蜘蛛协议 robots</h4><p>新建robots.txt文件，添加以下文件内容，把robots.txt放在hexo站点的source文件下。</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></pre></td><td class="code"><pre><span class="line"># hexo robots.txt</span><br><span class="line">User-agent: * Allow: &#x2F;</span><br><span class="line">Allow: &#x2F;archives&#x2F;</span><br><span class="line">Disallow: &#x2F;vendors&#x2F;</span><br><span class="line">Disallow: &#x2F;js&#x2F;</span><br><span class="line">Disallow: &#x2F;css&#x2F;</span><br><span class="line">Disallow: &#x2F;fonts&#x2F;</span><br><span class="line">Disallow: &#x2F;vendors&#x2F;</span><br><span class="line">Disallow: &#x2F;fancybox&#x2F;</span><br><span class="line"></span><br><span class="line">Sitemap: http:&#x2F;&#x2F;lancelot_lewis.coding.me&#x2F;sitemap.xml</span><br><span class="line">Sitemap: http:&#x2F;&#x2F;lancelot_lewis.coding.me&#x2F;baidusitemap.xml</span><br></pre></td></tr></table></figure><p>然后去百度站长平台检测<code>robots</code>文件看看有没有生效。</p><h3 id="四、网站结构自身优化"><a href="#四、网站结构自身优化" class="headerlink" title="四、网站结构自身优化"></a>四、网站结构自身优化</h3><h4 id="1-给出站链接添加-“nofollow”-标签"><a href="#1-给出站链接添加-“nofollow”-标签" class="headerlink" title="1. 给出站链接添加 “nofollow” 标签"></a>1. 给出站链接添加 “nofollow” 标签</h4><p>网络爬虫会在当前页面搜索所有的链接，然后一个个查看，所以就很有可能跳到别的网站就不回来了。这个时候就需要<code>nofollow</code>起作用了。<br>nofollow标签是由谷歌领头创新的一个“反垃圾链接”的标签，并被百度、yahoo等各大搜索引擎广泛支持，引用nofollow标签的目的是：用于指示搜索引擎不要追踪（即抓取）网页上的带有nofollow属性的任何出站链接，以减少垃圾链接的分散网站权重。</p><p>Hexo 的 Next 主题需要改以下几个地方：</p><ul><li><p>找到<code>footer.swig</code>，路径在<code>your-hexo-site\themes\next\layout\_partials</code>，将下面代码中的<code>a</code>标签加上<code>rel=&quot;external nofollow&quot;</code>属性；</p><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">&#123;&#123; __(&#39;footer.powered&#39;, &#39;&lt;a  class&#x3D;&quot;theme-link&quot;  href&#x3D;&quot;http:&#x2F;&#x2F;hexo.io&quot;&gt;Hexo&lt;&#x2F;a&gt;&#39;) &#125;&#125;</span><br></pre></td></tr></table></figure><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">&lt;a class&#x3D;&quot;theme-link&quot; href&#x3D;&quot;https:&#x2F;&#x2F;github.com&#x2F;iissnan&#x2F;hexo-theme-next&quot;&gt;</span><br></pre></td></tr></table></figure></li><li><p>修改sidebar.swig文件，路径在your-hexo-site\themes\next\layout_macro，将下面代码中的<code>a</code>标签加上<code>rel=&quot;external nofollow&quot;</code>属性；</p><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">&lt;a href&#x3D;&quot;&#123;&#123; link &#125;&#125;&quot; target&#x3D;&quot;_blank&quot;&gt;&#123;&#123; name &#125;&#125;&lt;&#x2F;a&gt;</span><br></pre></td></tr></table></figure><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">&lt;a href&#x3D;&quot;http:&#x2F;&#x2F;creativecommons.org&#x2F;licenses&#x2F;&#123;&#123; theme.creative_commons &#125;&#125;&#x2F;4.0&quot; class&#x3D;&quot;cc-opacity&quot; target&#x3D;&quot;_blank&quot;&gt;</span><br></pre></td></tr></table></figure></li></ul><h4 id="2-keywords-和-description"><a href="#2-keywords-和-description" class="headerlink" title="2. keywords 和 description"></a>2. keywords 和 description</h4><p>在<code>\scaffolds\post.md</code>中添加如下代码，用于生成的文章中添加关键字和描述。</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">keywords:</span><br><span class="line">description:</span><br></pre></td></tr></table></figure><p><del>在<code>\themes\next\layout\_partials\head.swig</code>有如下代码，用于生成文章的keywords。原本是没有 description 的位置，可以自己在这段代码后加上以下代码：</del></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">&#123;% if page.description %&#125;</span><br><span class="line">&lt;meta name&#x3D;&quot;description&quot; content&#x3D;&quot;&#123;&#123; page.description &#125;&#125;&quot; &#x2F;&gt;</span><br><span class="line">&#123;% elif theme.description %&#125;</span><br><span class="line">&lt;meta name&#x3D;&quot;description&quot; content&#x3D;&quot;&#123;&#123; theme.description &#125;&#125;&quot; &#x2F;&gt;</span><br><span class="line">&#123;% endif %&#125;</span><br></pre></td></tr></table></figure><blockquote><p>后来经过实践发现 Hexo NexT 会默认添加 description，所以这里可以不添加这段代码</p></blockquote><h4 id="3-首页title的优化"><a href="#3-首页title的优化" class="headerlink" title="3. 首页title的优化"></a>3. 首页title的优化</h4><p>更改<code>index.swig</code>文件，文件路径是<code>your-hexo-site\themes\next\layout</code>，将下面代码</p><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">&#123;% block title %&#125;  &#123;&#123; config.title &#125;&#125;  &#123;% endblock %&#125;</span><br></pre></td></tr></table></figure><p>改成</p><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">&#123;% block title %&#125;  &#123;&#123; config.title &#125;&#125; - &#123;&#123; theme.description &#125;&#125;  &#123;% endblock %&#125;</span><br></pre></td></tr></table></figure><h4 id="4-修改文章链接"><a href="#4-修改文章链接" class="headerlink" title="4. 修改文章链接"></a>4. 修改文章链接</h4><p>HEXO默认的文章链接形式为<code>domain/year/month/day/postname</code>，默认就是一个四级url，并且可能造成url过长，对搜索引擎是十分不友好的，我们可以改成<code>domain/postname</code> 的形式。编辑站点<code>_config.yml</code>文件，修改其中的<code>permalink</code>字段改为<code>permalink: :title.html</code>即可。</p>]]></content>
    
    <summary type="html">
    
      当我们搭建一个网站之后，如果没有做一些相关的搜索引擎优化SEO，那么我们的网站是很难获取来自搜索引擎的流量的，用户很难在搜索引擎上搜索到我们网站的内容，所以接下来我们要为Hexo网站做一些简单的搜索优化。
    
    </summary>
    
    
      <category term="博客" scheme="http://blog.paddings.cn/categories/%E5%8D%9A%E5%AE%A2/"/>
    
    
      <category term="hexo" scheme="http://blog.paddings.cn/tags/hexo/"/>
    
      <category term="SEO" scheme="http://blog.paddings.cn/tags/SEO/"/>
    
  </entry>
  
  <entry>
    <title>网页中的三种地址详解</title>
    <link href="http://blog.paddings.cn/2016/07/08/html/network-address/"/>
    <id>http://blog.paddings.cn/2016/07/08/html/network-address/</id>
    <published>2016-07-08T08:05:22.000Z</published>
    <updated>2020-05-21T00:26:05.363Z</updated>
    
    <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script><blockquote><p>网页中的<code>a</code>标签具有地址跳转的功能，<code>href</code>属性指向跳转的地址。</p></blockquote><h3 id="一、三种地址模式"><a href="#一、三种地址模式" class="headerlink" title="一、三种地址模式"></a>一、三种地址模式</h3><p>网络地址分为两种，一种是绝对地址，一种是相对地址。<br>但是相对地址又可以细分为两种，一种是基于当前目录的相对地址，一种是基于服务器根目录的相对地址。</p><a id="more"></a><h3 id="二、三种地址详解"><a href="#二、三种地址详解" class="headerlink" title="二、三种地址详解"></a>二、三种地址详解</h3><p>以下做一个详细介绍：</p><ol><li><p>绝对地址是带有<code>http</code>头部的网络地址（注意，这里是一定需要带有网络协议头部的，否则会被当成相对地址），例如：<a href="http://lancelot_lewis.coding.me/" target="_blank" rel="noopener">http://lancelot_lewis.coding.me/</a></p></li><li><p>当前目录相对地址就是指根据当前目录去判断<code>a</code>链接中地址的具体位置。例如：<a href="http://lancelot_lewis.coding.me/categories/" target="_blank" rel="noopener">http://lancelot_lewis.coding.me/categories/</a> 这个目录下有5个子目录，其中一个子目录为<code>Js</code>：<a href="http://lancelot_lewis.coding.me/categories/Js/" target="_blank" rel="noopener">http://lancelot_lewis.coding.me/categories/Js/</a> ，另外一个子目录为<code>Html</code>：<a href="http://lancelot_lewis.coding.me/categories/Html/" target="_blank" rel="noopener">http://lancelot_lewis.coding.me/categories/Html/</a> ，如果想从<code>Js</code>的目录跳转到<code>Html</code>中，<code>Js</code>页面中可以添加一个这样的标签：（<code>../</code>表示回到上一目录）</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"../Html"</span>&gt;</span>Html目录<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure></li><li><p>服务器根目录相对地址就是指根据服务器的根目录去判断<code>a</code>链接中地址的具体位置，例如：<a href="http://lancelot_lewis.coding.me/2016/04/30/blog/hexo-coding/" target="_blank" rel="noopener">http://lancelot_lewis.coding.me/2016/04/30/blog/hexo-coding/</a> 这个地址是一篇博文，另外一个地址：<a href="http://lancelot_lewis.coding.me/2016/05/11/blog/hexo-guestbook/" target="_blank" rel="noopener">http://lancelot_lewis.coding.me/2016/05/11/blog/hexo-guestbook/</a> 也是一篇博文。假设现在我需要在第一篇博文中添加一个第二篇博文的地址，如果我使用当前目录相对地址的方式，就是这样：<code>../../../05/11/blog/hexo-guestbook/</code>，冗长并且需要自己清楚当前处于哪个目录，过于麻烦，并且不同的目录下这个地址还会不一样；而如果使用服务器目录相对地址就是：<code>/2016/05/11/blog/hexo-guestbook/</code>这里就只需要关注每一篇博文的地址，最前面使用一个<code>/</code>表示服务器根目录即可，这个地址就能够在博客的任意页面中使用。</p></li></ol><h3 id="三、使用场景"><a href="#三、使用场景" class="headerlink" title="三、使用场景"></a>三、使用场景</h3><p>详细介绍讲完了，再来讲讲每一种地址的具体使用场景。</p><ol><li><p>绝对地址： 绝对地址一般都是使用在跨域名的场景之中，在一个域名下的网页需要跳转到另一域名下的网页，在这里其实也只能使用绝对地址。</p></li><li><p>当前目录相对地址： 一般适用于页面结构不会改动的页面中的<code>a</code>标签和只属于某一页面的<code>js</code>跳转中。</p></li><li><p>服务器根目录相对地址： 使用范围包括了当前目录相对地址，适用于同一域名下的所有网页和<code>js</code>文件中的跳转。而且尽量使用该地址代替<code>当前目录绝对地址</code>，好处就在于，如果网页页面的结构有变，或者是编写的<code>js</code>脚本会重用在多个不同的页面，服务器相对地址就是你首要解决方案。</p></li></ol><h3 id="四、总结"><a href="#四、总结" class="headerlink" title="四、总结"></a>四、总结</h3><ol><li>跨域名的情况下使用绝对地址</li><li>尽量使用服务器根目录相对地址而不是当前目录相对地址</li><li>多编程找到合适自己的代码实践</li></ol>]]></content>
    
    <summary type="html">
    
      &lt;blockquote&gt;
&lt;p&gt;网页中的&lt;code&gt;a&lt;/code&gt;标签具有地址跳转的功能，&lt;code&gt;href&lt;/code&gt;属性指向跳转的地址。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h3 id=&quot;一、三种地址模式&quot;&gt;&lt;a href=&quot;#一、三种地址模式&quot; class=&quot;headerlink&quot; title=&quot;一、三种地址模式&quot;&gt;&lt;/a&gt;一、三种地址模式&lt;/h3&gt;&lt;p&gt;网络地址分为两种，一种是绝对地址，一种是相对地址。&lt;br&gt;但是相对地址又可以细分为两种，一种是基于当前目录的相对地址，一种是基于服务器根目录的相对地址。&lt;/p&gt;
    
    </summary>
    
    
      <category term="Html" scheme="http://blog.paddings.cn/categories/Html/"/>
    
    
      <category term="html" scheme="http://blog.paddings.cn/tags/html/"/>
    
  </entry>
  
  <entry>
    <title>百度脑图核心——kityminder-editor 本地化改造</title>
    <link href="http://blog.paddings.cn/2016/06/21/javascript/kityminder-local/"/>
    <id>http://blog.paddings.cn/2016/06/21/javascript/kityminder-local/</id>
    <published>2016-06-21T22:50:49.000Z</published>
    <updated>2020-05-21T00:26:05.359Z</updated>
    
    <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script><h3 id="一、思维导图是什么？"><a href="#一、思维导图是什么？" class="headerlink" title="一、思维导图是什么？"></a>一、思维导图是什么？</h3><p>早在高中时代就听同学提过思维导图这种东西了，还记得那是一本物理辅导书。当时确实还不理解这种东西，可能是因为当时物理太好，不需要使用思维导图来辅助记忆那些知识点 (⊙ｏ⊙)。那时候的印象就是每一个知识点会画成一个点延伸出来的图形，这也就是思维导图的主要形态了。</p><a id="more"></a><h3 id="二、百度脑图"><a href="#二、百度脑图" class="headerlink" title="二、百度脑图"></a>二、百度脑图</h3><p><a href="http://baotu.baidu.com" target="_blank" rel="noopener">百度脑图</a>是一款在线的思维导图软件，实在是强烈推荐。唯一的缺点就是没有本地的客户端软件。当然我有使用过思维导图的PC端软件：Xmind，imindMap、Edraw。确实，该有的功能都有。但是！但是！但是！都做的很丑！而且各软件的安装包大小，小至100M，大至500+M，对此，我是难以忍耐的。回过头来看百度脑图，输入网址，一个个精美的思维导图就出现了，论美观度，我给百度脑图100分。百度脑图相比于其他软件来说，可以选择的预设思维导图种类会少很多，毕竟百度脑图使用的是js和html绘制，可操作性还是会少很多的。种类少并不局限于它的实用性。在这个简约看颜的时代，我投百度脑图一票。</p><h3 id="三、百度脑图核心——kityminder"><a href="#三、百度脑图核心——kityminder" class="headerlink" title="三、百度脑图核心——kityminder"></a>三、百度脑图核心——kityminder</h3><p>脑图用起来还很多蹩脚的地方，所以就经常给脑图写反馈意见。偶然一次发现，百度脑图其实是基于 kityminder 进行二次开发的一个产品而已。kityminder 本身是一个开源软件，也就是说，任何人都可以使用源代码进行二次开发并使用。本人也是一个矛盾体，在偏向于轻快的产品的同时，又不想被网络局限。住的那地方的网络简直令人痛心啊，隔三差五就给人闹别扭，恨不得拔网线泄恨，当然说说归说说。所以 kityminder 能够彻底解决这个问题，那么就心动不如行动吧。</p><h3 id="四、Kityminder-大变身"><a href="#四、Kityminder-大变身" class="headerlink" title="四、Kityminder 大变身"></a>四、Kityminder 大变身</h3><h4 id="1-下载kityminder-到本地"><a href="#1-下载kityminder-到本地" class="headerlink" title="1. 下载kityminder 到本地"></a>1. 下载kityminder 到本地</h4><p>找到kityminder 的github <a href="https://github.com/fex-team/kityminder" target="_blank" rel="noopener">官方地址</a>，复制kityminder 的git 仓库地址，在本地使用<code>git clone 仓库地址</code>，代码就出现在本地了。</p><h4 id="2-添加导入文件按钮"><a href="#2-添加导入文件按钮" class="headerlink" title="2. 添加导入文件按钮"></a>2. 添加导入文件按钮</h4><p><code>dist/index.html</code>文件里顶部是一个<code>h1</code>标签，添加以下代码</p><figure class="highlight html"><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></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">class</span>=<span class="string">"diy"</span>&gt;</span></span><br><span class="line">  导入</span><br><span class="line">  <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"file"</span> <span class="attr">id</span>=<span class="string">"fileInput"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br></pre></td></tr></table></figure><p>同时还需要在<code>head</code>标签中添加<code>diy</code>类的样式</p><figure class="highlight css"><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></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.diy</span> &#123;</span><br><span class="line"><span class="attribute">height</span>: <span class="number">30px</span>;</span><br><span class="line"><span class="attribute">line-height</span>: <span class="number">30px</span>;</span><br><span class="line"><span class="attribute">margin-top</span>: <span class="number">5px</span>;</span><br><span class="line"><span class="attribute">float</span>: right;</span><br><span class="line"><span class="attribute">color</span>: <span class="number">#333</span>;</span><br><span class="line"><span class="attribute">overflow</span>: hidden;</span><br><span class="line"><span class="attribute">position</span>: relative;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.diy</span> <span class="selector-tag">input</span> &#123;</span><br><span class="line"><span class="attribute">position</span>: absolute;</span><br><span class="line"><span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line"><span class="attribute">bottom</span>: <span class="number">0</span>;</span><br><span class="line"><span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line"><span class="attribute">right</span>: <span class="number">0</span>;</span><br><span class="line"><span class="attribute">display</span>: inline-block;</span><br><span class="line"><span class="attribute">opacity</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 导入</span></span><br><span class="line"><span class="built_in">window</span>.onload = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line"><span class="keyword">var</span> fileInput = <span class="built_in">document</span>.getElementById(<span class="string">'fileInput'</span>);</span><br><span class="line"></span><br><span class="line">fileInput.addEventListener(<span class="string">'change'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line"><span class="keyword">var</span> file = fileInput.files[<span class="number">0</span>],</span><br><span class="line"><span class="comment">// textType = /(md|km)/,</span></span><br><span class="line">fileType = file.name.substr(file.name.lastIndexOf(<span class="string">'.'</span>)+<span class="number">1</span>);</span><br><span class="line"><span class="keyword">switch</span>(fileType)&#123;</span><br><span class="line"><span class="keyword">case</span> <span class="string">'md'</span>:</span><br><span class="line">fileType = <span class="string">'markdown'</span>;</span><br><span class="line"><span class="keyword">break</span>;</span><br><span class="line"><span class="keyword">case</span> <span class="string">'km'</span>:</span><br><span class="line"><span class="keyword">case</span> <span class="string">'json'</span>:</span><br><span class="line">fileType = <span class="string">'json'</span>;</span><br><span class="line"><span class="keyword">break</span>;</span><br><span class="line"><span class="keyword">default</span>:</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">"File not supported!"</span>);</span><br><span class="line">alert(<span class="string">'只支持.km、.md、.json文件'</span>);</span><br><span class="line"><span class="keyword">return</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> reader = <span class="keyword">new</span> FileReader();</span><br><span class="line">reader.onload = <span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line"><span class="keyword">var</span> content = reader.result;</span><br><span class="line">editor.minder.importData(fileType, content).then(<span class="function"><span class="keyword">function</span>(<span class="params">data</span>)</span>&#123;</span><br><span class="line">$(fileInput).val(<span class="string">''</span>);</span><br><span class="line">&#125;);</span><br><span class="line">&#125;</span><br><span class="line">reader.readAsText(file);</span><br><span class="line">&#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>kityminder 原生支持json格式和markdown格式（.km文件是百度脑图网址支持导出的格式，但其本质其实就是Json格式），经过自己测试，json格式所存储的信息是最为丰富的，所以一般还是建议使用<code>.json</code>文件或者<code>.km</code>文件。<br>这里的文件读取使用的是 js 的 FileReader 对象，不了解的可以自行百度。</p><h4 id="3-添加导出文件按钮"><a href="#3-添加导出文件按钮" class="headerlink" title="3. 添加导出文件按钮"></a>3. 添加导出文件按钮</h4><p>和导入一样，导出也可以分为两种格式，代码如下：</p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 导出</span></span><br><span class="line">$(<span class="built_in">document</span>).on(<span class="string">'click'</span>, <span class="string">'.export'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">event</span>) </span>&#123;</span><br><span class="line">event.preventDefault();</span><br><span class="line"><span class="keyword">var</span> type = $(<span class="keyword">this</span>).data(<span class="string">'type'</span>),</span><br><span class="line">exportType;</span><br><span class="line"><span class="keyword">switch</span>(type)&#123;</span><br><span class="line"><span class="keyword">case</span> <span class="string">'km'</span>:</span><br><span class="line">exportType = <span class="string">'json'</span>;</span><br><span class="line"><span class="keyword">break</span>;</span><br><span class="line"><span class="keyword">case</span> <span class="string">'md'</span>:</span><br><span class="line">exportType = <span class="string">'markdown'</span>;</span><br><span class="line"><span class="keyword">break</span>;</span><br><span class="line"><span class="keyword">default</span>:</span><br><span class="line">exportType = type;</span><br><span class="line"><span class="keyword">break</span>;</span><br><span class="line">&#125;</span><br><span class="line">editor.minder.exportData(exportType).then(<span class="function"><span class="keyword">function</span>(<span class="params">content</span>)</span>&#123;</span><br><span class="line"><span class="keyword">switch</span>(exportType)&#123;</span><br><span class="line"><span class="keyword">case</span> <span class="string">'json'</span>:</span><br><span class="line"><span class="built_in">console</span>.log($.parseJSON(content));</span><br><span class="line"><span class="keyword">break</span>;</span><br><span class="line"><span class="keyword">default</span>:</span><br><span class="line"><span class="built_in">console</span>.log(content);</span><br><span class="line"><span class="keyword">break</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> aLink = <span class="built_in">document</span>.createElement(<span class="string">'a'</span>),</span><br><span class="line">evt = <span class="built_in">document</span>.createEvent(<span class="string">"HTMLEvents"</span>),</span><br><span class="line">blob = <span class="keyword">new</span> Blob([content]);</span><br><span class="line"></span><br><span class="line">evt.initEvent(<span class="string">"click"</span>, <span class="literal">false</span>, <span class="literal">false</span>);</span><br><span class="line">aLink.download = $(<span class="string">'#node_text1'</span>).text()+<span class="string">'.'</span>+type;</span><br><span class="line">aLink.href = URL.createObjectURL(blob);</span><br><span class="line">aLink.dispatchEvent(evt);</span><br><span class="line">&#125;);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p>因为没有后台，文件的导出使用的是浏览器的<code>Blob</code>对象，然后模拟<code>a</code>链接的点击进行下载。</p><h4 id="4-核心代码提取出来"><a href="#4-核心代码提取出来" class="headerlink" title="4. 核心代码提取出来"></a>4. 核心代码提取出来</h4><p>kityminder所有的三方组件都在<code>bower_components</code>文件夹中，所以必须把这个文件夹复制过来，路径和<code>index.html</code>中的静态资源目录保持一致。</p><p>这样，一个完全本地化的脑图就完成了。</p>]]></content>
    
    <summary type="html">
    
      &lt;h3 id=&quot;一、思维导图是什么？&quot;&gt;&lt;a href=&quot;#一、思维导图是什么？&quot; class=&quot;headerlink&quot; title=&quot;一、思维导图是什么？&quot;&gt;&lt;/a&gt;一、思维导图是什么？&lt;/h3&gt;&lt;p&gt;早在高中时代就听同学提过思维导图这种东西了，还记得那是一本物理辅导书。当时确实还不理解这种东西，可能是因为当时物理太好，不需要使用思维导图来辅助记忆那些知识点 (⊙ｏ⊙)。那时候的印象就是每一个知识点会画成一个点延伸出来的图形，这也就是思维导图的主要形态了。&lt;/p&gt;
    
    </summary>
    
    
      <category term="Js" scheme="http://blog.paddings.cn/categories/Js/"/>
    
    
      <category term="javascript" scheme="http://blog.paddings.cn/tags/javascript/"/>
    
      <category term="kityminder" scheme="http://blog.paddings.cn/tags/kityminder/"/>
    
  </entry>
  
  <entry>
    <title>使用requirejs 调用百度地图解决方案</title>
    <link href="http://blog.paddings.cn/2016/05/24/requirejs/requirejs-map/"/>
    <id>http://blog.paddings.cn/2016/05/24/requirejs/requirejs-map/</id>
    <published>2016-05-24T13:53:59.000Z</published>
    <updated>2020-05-21T00:26:05.355Z</updated>
    
    <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script><p>百度地图的模块化加载方案</p><p>百度地图的加载方式比较奇葩，比如百度提供的一个 js 脚本地址是这样<code>http://api.map.baidu.com/api?v=2.0&amp;ak=mXijumfojHnAaN2VxpBGoqHM</code>，直接使用浏览器访问，这个文件的内容是这样：</p><a id="more"></a><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line">(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">window</span>.BMap_loadScriptTime = (<span class="keyword">new</span> <span class="built_in">Date</span>).getTime();</span><br><span class="line">    <span class="built_in">document</span>.write(<span class="string">'&lt;script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&amp;ak=mXijumfojHnAaN2VxpBGoqHM&amp;services=&amp;t=20160503160001"&gt;&lt;/script&gt;'</span>);</span><br><span class="line">&#125;)();</span><br></pre></td></tr></table></figure><p>百度地图通过一个脚本再去请求另外一个脚本，这样的方式可能是我见的少吧，感觉这样会比较安全。<br>在直接访问后面这个网址，得到的就是真正的<code>百度地图api</code>文件了。</p><p>看起来好像直接转成 requirejs 加载的方式没有问题，那就试试？</p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// requirejs 的配置，因为百度地图是非AMD模式的，所以需要加上shim进行转换</span></span><br><span class="line"><span class="built_in">require</span>.config(&#123;</span><br><span class="line">    paths: &#123;</span><br><span class="line">        <span class="string">'BMap'</span>: [<span class="string">'http://api.map.baidu.com/api?v=2.0&amp;ak=mXijumfojHnAaN2VxpBGoqHM'</span>],</span><br><span class="line">    &#125;,</span><br><span class="line">    shim: &#123;</span><br><span class="line">        <span class="string">'BMap'</span>: &#123;</span><br><span class="line">            deps: [<span class="string">'jquery'</span>],</span><br><span class="line">            exports: <span class="string">'BMap'</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 调用百度地图</span></span><br><span class="line">define([<span class="string">'jquery'</span>,<span class="string">'BMap'</span>], <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> map = <span class="keyword">new</span> BMap.Map(<span class="string">"map"</span>);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p>来了来了，控制台非常精准的出现了错误：</p><figure class="highlight js"><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">Failed to execute <span class="string">'write'</span> on <span class="string">'Document'</span>: It isn<span class="string">'t possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">ReferenceError: BMap is not defined(…)</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">define</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">Uncaught ReferenceError: BMap is not defined</span></span><br></pre></td></tr></table></figure><p>第一个和第四个是控制台打印出来的错误信息，中间两个是 requirejs 打印出来的错误信息。其中第一个错误只是黄色的感叹号（因为当前请求的文件已经加载，大概是提醒你异步加载的文件是不能再请求脚本的）；最后一个错误是红色的叉，因为这里找不到<code>BMap</code>这个对象。</p><p>好了，大概问题知道了。如何解决？</p><p>经过大量的查找，发现 requirejs 有<code>async</code>这样一个插件，附上 requirejs 插件列表：<a href="https://github.com/requirejs/requirejs/wiki/Plugins" target="_blank" rel="noopener">https://github.com/requirejs/requirejs/wiki/Plugins</a><br>这个插件可以使当前加载的 js 脚本采用异步的方式加载更多的脚本文件，官方原话是这样的：</p><blockquote><p><strong>async</strong> : Useful for JSONP and asynchronous dependencies (e.g. Google Maps).</p></blockquote><p>所以配置好 async.js</p><figure class="highlight js"><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"><span class="built_in">require</span>.config(&#123;</span><br><span class="line">    paths: &#123;</span><br><span class="line">        <span class="string">'async'</span>: <span class="string">'../../lib/require/async'</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>调用百度地图的时候这样写：</p><figure class="highlight js"><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></pre></td><td class="code"><pre><span class="line"><span class="comment">// 调用百度地图</span></span><br><span class="line">define([<span class="string">'jquery'</span>,<span class="string">'async!BMap'</span>], <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> map = <span class="keyword">new</span> BMap.Map(<span class="string">"map"</span>);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p>这样就能成功的使用模块化的技术调用百度地图了</p>]]></content>
    
    <summary type="html">
    
      &lt;p&gt;百度地图的模块化加载方案&lt;/p&gt;
&lt;p&gt;百度地图的加载方式比较奇葩，比如百度提供的一个 js 脚本地址是这样&lt;code&gt;http://api.map.baidu.com/api?v=2.0&amp;amp;ak=mXijumfojHnAaN2VxpBGoqHM&lt;/code&gt;，直接使用浏览器访问，这个文件的内容是这样：&lt;/p&gt;
    
    </summary>
    
    
      <category term="Js" scheme="http://blog.paddings.cn/categories/Js/"/>
    
    
      <category term="requirejs" scheme="http://blog.paddings.cn/tags/requirejs/"/>
    
  </entry>
  
  <entry>
    <title>Tomcat 开启 gzip</title>
    <link href="http://blog.paddings.cn/2016/05/17/tomcat/tomcat-gzip/"/>
    <id>http://blog.paddings.cn/2016/05/17/tomcat/tomcat-gzip/</id>
    <published>2016-05-17T18:33:07.000Z</published>
    <updated>2020-05-21T00:26:05.355Z</updated>
    
    <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script><h3 id="一、原理介绍"><a href="#一、原理介绍" class="headerlink" title="一、原理介绍"></a>一、原理介绍</h3><p>HTTP 压缩可以大大提高浏览网站的速度，它的原理是，在客户端请求服务器对应资源后，从服务器端将资源文件压缩，再输出到客户端，由客户端的浏览器负责解压缩并浏览。</p><a id="more"></a><p>相对于普通的浏览过程HTML ,CSS,Javascript , Text ，它可以节省40%左右的流量。更为重要的是，它可以对动态生成的，包括CGI、PHP , JSP , ASP , Servlet,SHTML等输出的网页也能进行压缩，压缩效率也很高。 </p><h3 id="二、Tomcat-配置"><a href="#二、Tomcat-配置" class="headerlink" title="二、Tomcat 配置"></a>二、Tomcat 配置</h3><p>找到 tomcat <code>server.xml</code>文件里的</p><figure class="highlight xml"><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></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">Connector</span> <span class="attr">port</span>=<span class="string">"80"</span> <span class="attr">protocol</span>=<span class="string">"HTTP/1.1"</span></span></span><br><span class="line"><span class="tag">               <span class="attr">connectionTimeout</span>=<span class="string">"20000"</span></span></span><br><span class="line"><span class="tag">               <span class="attr">redirectPort</span>=<span class="string">"8443"</span></span></span><br><span class="line"><span class="tag">              <span class="attr">useBodyEncodingForURI</span>=<span class="string">"true"</span></span></span><br><span class="line"><span class="tag">              <span class="attr">URIEncoding</span>=<span class="string">"UTF-8"</span></span></span><br><span class="line"><span class="tag">                /&gt;</span></span><br></pre></td></tr></table></figure><p>改为：</p><figure class="highlight xml"><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"><span class="tag">&lt;<span class="name">Connector</span> <span class="attr">port</span>=<span class="string">"80"</span> <span class="attr">protocol</span>=<span class="string">"HTTP/1.1"</span></span></span><br><span class="line"><span class="tag">                  <span class="attr">connectionTimeout</span>=<span class="string">"20000"</span></span></span><br><span class="line"><span class="tag">                  <span class="attr">redirectPort</span>=<span class="string">"8443"</span></span></span><br><span class="line"><span class="tag">                  <span class="attr">useBodyEncodingForURI</span>=<span class="string">"true"</span></span></span><br><span class="line"><span class="tag">                  <span class="attr">URIEncoding</span>=<span class="string">"UTF-8"</span></span></span><br><span class="line"><span class="tag">                  <span class="attr">compression</span>=<span class="string">"on"</span></span></span><br><span class="line"><span class="tag">                  <span class="attr">compressionMinSize</span>=<span class="string">"2048"</span></span></span><br><span class="line"><span class="tag">                  <span class="attr">noCompressionUserAgents</span>=<span class="string">"gozilla,traviata"</span></span></span><br><span class="line"><span class="tag">                  <span class="attr">compressableMimeType</span>=<span class="string">"text/html,text/xml,text/javascript,application/x-javascript,application/javascript,text/css,text/plain"</span></span></span><br><span class="line"><span class="tag">                    /&gt;</span></span><br></pre></td></tr></table></figure><ul><li>compression=”on” 打开压缩功能 </li><li>compressionMinSize=”50” 启用压缩的输出内容大小，默认为2KB </li><li>noCompressionUserAgents=”gozilla, traviata” 对于以下的浏览器，不启用压缩 </li><li>compressableMimeType=”text/html,text/xml,text/javascript,text/css,text/plain”　哪些资源类型需要压缩<br>重启 tomcat 即可</li></ul><h3 id="三、测试"><a href="#三、测试" class="headerlink" title="三、测试"></a>三、测试</h3><h5 id="1-外网环境"><a href="#1-外网环境" class="headerlink" title="1. 外网环境"></a>1. 外网环境</h5><p>如果你有外网环境，可直接借用第三方的工具进行检测：<br><a href="http://tool.chinaz.com/Gzips/" target="_blank" rel="noopener">http://tool.chinaz.com/Gzips/</a><br>这里给出的是站长之家的一个链接，直接在里面输入网址即可，会告诉你是否启用 gzip，以及压缩率是多少。</p><h5 id="2-内网环境"><a href="#2-内网环境" class="headerlink" title="2. 内网环境"></a>2. 内网环境</h5><p>上述方法只适用于有外网环境的机器测试，如果是内网环境还有个简单的方法可以进行判断：</p><ul><li>首先打开自己的内地网址。</li><li>按 f12 打开浏览器的控制台（这里使用的是 webkit 内核的浏览器），点击<code>network</code>栏，再刷新页面，点击最开始的配置中设置需要 gzip 的文件类型中的任意一个，出现下图中所示两点即为成功：</li></ul><p><img data-src="http://i3.buimg.com/5d9cddcdb5384685.png" alt="gzip"></p><p>但是这个方法不能检测到 gzip 的压缩率。<br>笨一点的办法也有，点击这个面板中的<code>Response</code>，把里面内容复制到一个文本文件中，保存，看文件的大小，再相除。</p>]]></content>
    
    <summary type="html">
    
      &lt;h3 id=&quot;一、原理介绍&quot;&gt;&lt;a href=&quot;#一、原理介绍&quot; class=&quot;headerlink&quot; title=&quot;一、原理介绍&quot;&gt;&lt;/a&gt;一、原理介绍&lt;/h3&gt;&lt;p&gt;HTTP 压缩可以大大提高浏览网站的速度，它的原理是，在客户端请求服务器对应资源后，从服务器端将资源文件压缩，再输出到客户端，由客户端的浏览器负责解压缩并浏览。&lt;/p&gt;
    
    </summary>
    
    
      <category term="Tomcat" scheme="http://blog.paddings.cn/categories/Tomcat/"/>
    
    
      <category term="tomcat" scheme="http://blog.paddings.cn/tags/tomcat/"/>
    
  </entry>
  
  <entry>
    <title>IE9 不支持 base 标签</title>
    <link href="http://blog.paddings.cn/2016/05/17/html/ie9-base/"/>
    <id>http://blog.paddings.cn/2016/05/17/html/ie9-base/</id>
    <published>2016-05-17T14:33:51.000Z</published>
    <updated>2020-05-21T00:26:05.363Z</updated>
    
    <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script><p>最近在学习使用 requirejs，config 的配置中有一个<code>baseUrl</code>代表 requirejs 加载 js 时的基地址，所有的文件都是根据这个基地址去查找相对地址。<br>html 中有这么一个<code>base</code>标签也是来完成这件事的，w3school里面是这么介绍的：</p><a id="more"></a><blockquote></blockquote><p><strong>定义和用法</strong><br>&lt;base&gt; 标签为页面上的所有链接规定默认地址或默认目标。<br>通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。<br>使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 &lt;a&gt;、&lt;img&gt;、&lt;link&gt;、&lt;form&gt; 标签中的 URL。</p><p>在使用中却发现，<code>base</code>标签在 chrome 和 edge 浏览器下没有问题，可是切换到 ie9 模式的时候，<code>base</code>标签失效了，就像是 ie9 不认识这个标签一样，完全无视了。在切换到 ie10 和 ie11 的时候，就没有问题。</p><p>最初还怀疑是 edge 浏览器模拟 ie9 的环境不是很完美，所以就索性装了一个 win7的虚拟机。win7 自带的浏览器是 ie8，正好 ie8 一起测试一样。</p><p>ie8 的确是不支持，再把浏览器升级到 ie9，果然也是不支持的，好吧，那只能选择放弃了。</p><p>贴两张图，大家感受一下：</p><p><img data-src="http://i4.buimg.com/81b17096e0b69672.png" alt="w3school"><br><img data-src="http://i2.buimg.com/3b603ea303efa04c.png" alt="w3schools"></p><p>第一个是<a href="http://www.w3school.com.cn/tags/tag_base.asp" target="_blank" rel="noopener">w3school</a>的介绍，第二个是<a href="http://www.w3schools.com/tags/tag_base.asp" target="_blank" rel="noopener">w3schools</a>的介绍。<br>仔细观察，第一个图特意有标明<code>所有浏览器都支持</code>，请自行感受。</p>]]></content>
    
    <summary type="html">
    
      &lt;p&gt;最近在学习使用 requirejs，config 的配置中有一个&lt;code&gt;baseUrl&lt;/code&gt;代表 requirejs 加载 js 时的基地址，所有的文件都是根据这个基地址去查找相对地址。&lt;br&gt;html 中有这么一个&lt;code&gt;base&lt;/code&gt;标签也是来完成这件事的，w3school里面是这么介绍的：&lt;/p&gt;
    
    </summary>
    
    
      <category term="Html" scheme="http://blog.paddings.cn/categories/Html/"/>
    
    
      <category term="html" scheme="http://blog.paddings.cn/tags/html/"/>
    
      <category term="base" scheme="http://blog.paddings.cn/tags/base/"/>
    
  </entry>
  
  <entry>
    <title>Hexo high一下小功能</title>
    <link href="http://blog.paddings.cn/2016/05/14/blog/hexo-high/"/>
    <id>http://blog.paddings.cn/2016/05/14/blog/hexo-high/</id>
    <published>2016-05-14T21:12:00.000Z</published>
    <updated>2020-05-21T00:26:05.351Z</updated>
    
    <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script><blockquote><p>额外一点小功能可以为博客增光添彩。</p></blockquote><h3 id="一、引言"><a href="#一、引言" class="headerlink" title="一、引言"></a>一、引言</h3><p>博客建立之初，有各种奇奇怪怪的想法，有网上找相关教程看到的，也有自己突发奇想的，这里介绍一下<code>high一下</code>功能。</p><a id="more"></a><h3 id="二、high-一下源码"><a href="#二、high-一下源码" class="headerlink" title="二、high 一下源码"></a>二、high 一下源码</h3><figure class="highlight html"><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><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">li</span>&gt;</span> <span class="tag">&lt;<span class="name">a</span> <span class="attr">title</span>=<span class="string">"把这个链接拖到你的Chrome收藏夹工具栏中"</span> <span class="attr">href</span>=<span class="string">'javascript:(function() &#123;</span></span></span><br><span class="line"><span class="tag"><span class="string">    function c() &#123;</span></span></span><br><span class="line"><span class="tag"><span class="string">        var e = document.createElement("link");</span></span></span><br><span class="line"><span class="tag"><span class="string">        e.setAttribute("type", "text/css");</span></span></span><br><span class="line"><span class="tag"><span class="string">        e.setAttribute("rel", "stylesheet");</span></span></span><br><span class="line"><span class="tag"><span class="string">        e.setAttribute("href", f);</span></span></span><br><span class="line"><span class="tag"><span class="string">        e.setAttribute("class", l);</span></span></span><br><span class="line"><span class="tag"><span class="string">        document.body.appendChild(e)</span></span></span><br><span class="line"><span class="tag"><span class="string">    &#125;</span></span></span><br><span class="line"><span class="tag"><span class="string"> </span></span></span><br><span class="line"><span class="tag"><span class="string">    function h() &#123;</span></span></span><br><span class="line"><span class="tag"><span class="string">        var e = document.getElementsByClassName(l);</span></span></span><br><span class="line"><span class="tag"><span class="string">        for (var t = 0; t &lt; e.length; t++) &#123;</span></span></span><br><span class="line"><span class="tag"><span class="string">            document.body.removeChild(e[t])</span></span></span><br><span class="line"><span class="tag"><span class="string">        &#125;</span></span></span><br><span class="line"><span class="tag"><span class="string">    &#125;</span></span></span><br><span class="line"><span class="tag"><span class="string"> </span></span></span><br><span class="line"><span class="tag"><span class="string">    function p() &#123;</span></span></span><br><span class="line"><span class="tag"><span class="string">        var e = document.createElement("div");</span></span></span><br><span class="line"><span class="tag"><span class="string">        e.setAttribute("class", a);</span></span></span><br><span class="line"><span class="tag"><span class="string">        document.body.appendChild(e);</span></span></span><br><span class="line"><span class="tag"><span class="string">        setTimeout(function() &#123;</span></span></span><br><span class="line"><span class="tag"><span class="string">            document.body.removeChild(e)</span></span></span><br><span class="line"><span class="tag"><span class="string">        &#125;, 100)</span></span></span><br><span class="line"><span class="tag"><span class="string">    &#125;</span></span></span><br><span class="line"><span class="tag"><span class="string"> </span></span></span><br><span class="line"><span class="tag"><span class="string">    function d(e) &#123;</span></span></span><br><span class="line"><span class="tag"><span class="string">        return &#123;</span></span></span><br><span class="line"><span class="tag"><span class="string">            height : e.offsetHeight,</span></span></span><br><span class="line"><span class="tag"><span class="string">            width : e.offsetWidth</span></span></span><br><span class="line"><span class="tag"><span class="string">        &#125;</span></span></span><br><span class="line"><span class="tag"><span class="string">    &#125;</span></span></span><br><span class="line"><span class="tag"><span class="string"> </span></span></span><br><span class="line"><span class="tag"><span class="string">    function v(i) &#123;</span></span></span><br><span class="line"><span class="tag"><span class="string">        var s = d(i);</span></span></span><br><span class="line"><span class="tag"><span class="string">        return s.height &gt; e &amp;&amp; s.height &lt; n &amp;&amp; s.width &gt; t &amp;&amp; s.width &lt; r</span></span></span><br><span class="line"><span class="tag"><span class="string">    &#125;</span></span></span><br><span class="line"><span class="tag"><span class="string"> </span></span></span><br><span class="line"><span class="tag"><span class="string">    function m(e) &#123;</span></span></span><br><span class="line"><span class="tag"><span class="string">        var t = e;</span></span></span><br><span class="line"><span class="tag"><span class="string">        var n = 0;</span></span></span><br><span class="line"><span class="tag"><span class="string">        while (!!t) &#123;</span></span></span><br><span class="line"><span class="tag"><span class="string">            n += t.offsetTop;</span></span></span><br><span class="line"><span class="tag"><span class="string">            t = t.offsetParent</span></span></span><br><span class="line"><span class="tag"><span class="string">        &#125;</span></span></span><br><span class="line"><span class="tag"><span class="string">        return n</span></span></span><br><span class="line"><span class="tag"><span class="string">    &#125;</span></span></span><br><span class="line"><span class="tag"><span class="string"> </span></span></span><br><span class="line"><span class="tag"><span class="string">    function g() &#123;</span></span></span><br><span class="line"><span class="tag"><span class="string">        var e = document.documentElement;</span></span></span><br><span class="line"><span class="tag"><span class="string">        if (!!window.innerWidth) &#123;</span></span></span><br><span class="line"><span class="tag"><span class="string">            return window.innerHeight</span></span></span><br><span class="line"><span class="tag"><span class="string">        &#125; else if (e &amp;&amp; !isNaN(e.clientHeight)) &#123;</span></span></span><br><span class="line"><span class="tag"><span class="string">            return e.clientHeight</span></span></span><br><span class="line"><span class="tag"><span class="string">        &#125;</span></span></span><br><span class="line"><span class="tag"><span class="string">        return 0</span></span></span><br><span class="line"><span class="tag"><span class="string">    &#125;</span></span></span><br><span class="line"><span class="tag"><span class="string"> </span></span></span><br><span class="line"><span class="tag"><span class="string">    function y() &#123;</span></span></span><br><span class="line"><span class="tag"><span class="string">        if (window.pageYOffset) &#123;</span></span></span><br><span class="line"><span class="tag"><span class="string">            return window.pageYOffset</span></span></span><br><span class="line"><span class="tag"><span class="string">        &#125;</span></span></span><br><span class="line"><span class="tag"><span class="string">        return Math.max(document.documentElement.scrollTop, document.body.scrollTop)</span></span></span><br><span class="line"><span class="tag"><span class="string">    &#125;</span></span></span><br><span class="line"><span class="tag"><span class="string"> </span></span></span><br><span class="line"><span class="tag"><span class="string">    function E(e) &#123;</span></span></span><br><span class="line"><span class="tag"><span class="string">        var t = m(e);</span></span></span><br><span class="line"><span class="tag"><span class="string">        return t &gt;= w &amp;&amp; t &lt;= b + w</span></span></span><br><span class="line"><span class="tag"><span class="string">    &#125;</span></span></span><br><span class="line"><span class="tag"><span class="string"> </span></span></span><br><span class="line"><span class="tag"><span class="string">    function S() &#123;</span></span></span><br><span class="line"><span class="tag"><span class="string">        var e = document.createElement("audio");</span></span></span><br><span class="line"><span class="tag"><span class="string">        e.setAttribute("class", l);</span></span></span><br><span class="line"><span class="tag"><span class="string">        e.src = i;</span></span></span><br><span class="line"><span class="tag"><span class="string">        e.loop = false;</span></span></span><br><span class="line"><span class="tag"><span class="string">        e.addEventListener("canplay", function() &#123;</span></span></span><br><span class="line"><span class="tag"><span class="string">            setTimeout(function() &#123;</span></span></span><br><span class="line"><span class="tag"><span class="string">                x(k)</span></span></span><br><span class="line"><span class="tag"><span class="string">            &#125;, 500);</span></span></span><br><span class="line"><span class="tag"><span class="string">            setTimeout(function() &#123;</span></span></span><br><span class="line"><span class="tag"><span class="string">                N();</span></span></span><br><span class="line"><span class="tag"><span class="string">                p();</span></span></span><br><span class="line"><span class="tag"><span class="string">                for (var e = 0; e &lt; O.length; e++) &#123;</span></span></span><br><span class="line"><span class="tag"><span class="string">                    T(O[e])</span></span></span><br><span class="line"><span class="tag"><span class="string">                &#125;</span></span></span><br><span class="line"><span class="tag"><span class="string">            &#125;, 15500)</span></span></span><br><span class="line"><span class="tag"><span class="string">        &#125;, true);</span></span></span><br><span class="line"><span class="tag"><span class="string">        e.addEventListener("ended", function() &#123;</span></span></span><br><span class="line"><span class="tag"><span class="string">            N();</span></span></span><br><span class="line"><span class="tag"><span class="string">            h()</span></span></span><br><span class="line"><span class="tag"><span class="string">        &#125;, true);</span></span></span><br><span class="line"><span class="tag"><span class="string">        e.innerHTML = " &lt;p&gt;If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.&lt;/p&gt; &lt;p&gt;";</span></span></span><br><span class="line"><span class="tag"><span class="string">        document.body.appendChild(e);</span></span></span><br><span class="line"><span class="tag"><span class="string">        e.play()</span></span></span><br><span class="line"><span class="tag"><span class="string">    &#125;</span></span></span><br><span class="line"><span class="tag"><span class="string"> </span></span></span><br><span class="line"><span class="tag"><span class="string">    function x(e) &#123;</span></span></span><br><span class="line"><span class="tag"><span class="string">        e.className += " " + s + " " + o</span></span></span><br><span class="line"><span class="tag"><span class="string">    &#125;</span></span></span><br><span class="line"><span class="tag"><span class="string"> </span></span></span><br><span class="line"><span class="tag"><span class="string">    function T(e) &#123;</span></span></span><br><span class="line"><span class="tag"><span class="string">        e.className += " " + s + " " + u[Math.floor(Math.random() * u.length)]</span></span></span><br><span class="line"><span class="tag"><span class="string">    &#125;</span></span></span><br><span class="line"><span class="tag"><span class="string"> </span></span></span><br><span class="line"><span class="tag"><span class="string">    function N() &#123;</span></span></span><br><span class="line"><span class="tag"><span class="string">        var e = document.getElementsByClassName(s);</span></span></span><br><span class="line"><span class="tag"><span class="string">        var t = new RegExp("\\b" + s + "\\b");</span></span></span><br><span class="line"><span class="tag"><span class="string">        for (var n = 0; n &lt; e.length; ) &#123;</span></span></span><br><span class="line"><span class="tag"><span class="string">            e[n].className = e[n].className.replace(t, "")</span></span></span><br><span class="line"><span class="tag"><span class="string">        &#125;</span></span></span><br><span class="line"><span class="tag"><span class="string">    &#125;</span></span></span><br><span class="line"><span class="tag"><span class="string"> </span></span></span><br><span class="line"><span class="tag"><span class="string">    var e = 30;</span></span></span><br><span class="line"><span class="tag"><span class="string">    var t = 30;</span></span></span><br><span class="line"><span class="tag"><span class="string">    var n = 350;</span></span></span><br><span class="line"><span class="tag"><span class="string">    var r = 350;</span></span></span><br><span class="line"><span class="tag"><span class="string">    var i = "//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake.mp3";</span></span></span><br><span class="line"><span class="tag"><span class="string">    var s = "mw-harlem_shake_me";</span></span></span><br><span class="line"><span class="tag"><span class="string">    var o = "im_first";</span></span></span><br><span class="line"><span class="tag"><span class="string">    var u = ["im_drunk", "im_baked", "im_trippin", "im_blown"];</span></span></span><br><span class="line"><span class="tag"><span class="string">    var a = "mw-strobe_light";</span></span></span><br><span class="line"><span class="tag"><span class="string">    var f = "//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css";</span></span></span><br><span class="line"><span class="tag"><span class="string">    var l = "mw_added_css";</span></span></span><br><span class="line"><span class="tag"><span class="string">    var b = g();</span></span></span><br><span class="line"><span class="tag"><span class="string">    var w = y();</span></span></span><br><span class="line"><span class="tag"><span class="string">    var C = document.getElementsByTagName("*");</span></span></span><br><span class="line"><span class="tag"><span class="string">    var k = null;</span></span></span><br><span class="line"><span class="tag"><span class="string">    for (var L = 0; L &lt; C.length; L++) &#123;</span></span></span><br><span class="line"><span class="tag"><span class="string">        var A = C[L];</span></span></span><br><span class="line"><span class="tag"><span class="string">        if (v(A)) &#123;</span></span></span><br><span class="line"><span class="tag"><span class="string">            if (E(A)) &#123;</span></span></span><br><span class="line"><span class="tag"><span class="string">                k = A;</span></span></span><br><span class="line"><span class="tag"><span class="string">                break</span></span></span><br><span class="line"><span class="tag"><span class="string">            &#125;</span></span></span><br><span class="line"><span class="tag"><span class="string">        &#125;</span></span></span><br><span class="line"><span class="tag"><span class="string">    &#125;</span></span></span><br><span class="line"><span class="tag"><span class="string">    if (A === null) &#123;</span></span></span><br><span class="line"><span class="tag"><span class="string">        console.warn("Could not find a node of the right size. Please try a different page.");</span></span></span><br><span class="line"><span class="tag"><span class="string">        return</span></span></span><br><span class="line"><span class="tag"><span class="string">    &#125;</span></span></span><br><span class="line"><span class="tag"><span class="string">    c();</span></span></span><br><span class="line"><span class="tag"><span class="string">    S();</span></span></span><br><span class="line"><span class="tag"><span class="string">    var O = [];</span></span></span><br><span class="line"><span class="tag"><span class="string">    for (var L = 0; L &lt; C.length; L++) &#123;</span></span></span><br><span class="line"><span class="tag"><span class="string">        var A = C[L];</span></span></span><br><span class="line"><span class="tag"><span class="string">        if (v(A)) &#123;</span></span></span><br><span class="line"><span class="tag"><span class="string">            O.push(A)</span></span></span><br><span class="line"><span class="tag"><span class="string">        &#125;</span></span></span><br><span class="line"><span class="tag"><span class="string">    &#125;</span></span></span><br><span class="line"><span class="tag"><span class="string">&#125;)()    '</span>&gt;</span>High一下<span class="tag">&lt;/<span class="name">a</span>&gt;</span> <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br></pre></td></tr></table></figure><p>网上找的教程是直接把这段代码当成一个菜单项加在博客主题配置的<code>_config.yml</code>文件中</p><figure class="highlight yml"><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></pre></td><td class="code"><pre><span class="line"><span class="attr">menu:</span></span><br><span class="line">  <span class="attr">high:</span> <span class="string">javascript:void(0)</span></span><br><span class="line"><span class="attr">menu_icons:</span></span><br><span class="line">  <span class="attr">high:</span> <span class="string">play</span></span><br></pre></td></tr></table></figure><p>像这种格式添加，这里只是举个例子，实际操作一定要找到对应的模块添加。（先说明一下个人使用的是<code>NexT</code>主题）第一个 high 的<code>javascript:void(0)</code>是指<code>a</code>标签的跳转链接，其实这里的功能就是为了让它不跳转的，另外还有一个功能，可以把空链接的<code>a</code>标签悬浮变成手型的鼠标。第二个 <code>high</code>对应的<code>play</code>是展示的图标，<code>NexT</code>主题使用的是<code>fontawesome</code>图标，这里的<code>play</code>就是其对应的图标，想自己 diy 一下就去<code>fontawesome</code>上找个自己喜欢的。</p><p>这样的方法简单粗暴有效，并且还有一个好处，可以直接把这个链接保存成浏览器的书签，这样就能在任何网页都能够调用这个 High一下 的方法。且不评价这个方式好不好，但是如果这个功能就这样结束，那就太没意思了。所以，得改。</p><h3 id="三、high-一下独立-cdn"><a href="#三、high-一下独立-cdn" class="headerlink" title="三、high 一下独立 cdn"></a>三、high 一下独立 cdn</h3><p>最初的想法是把<code>high一下</code>独立成一个js文件，方便使用 cdn 来调用。这个挺简单，js 提取出来成为一个函数，然后给特定的元素绑定点击触发的事件即可。<code>NexT</code>主题加载外部 js 文件在 <code>layout-&gt;_scripts-&gt;vendors.swg</code>中，我模仿了加载<code>fancybox</code>的方式，添加了这段代码：</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">&#123;% if theme.high %&#125;</span><br><span class="line">  &#123;% set js_vendors.high  &#x3D; &#39;high&#x2F;high.js?v&#x3D;1.0.0&#39; %&#125;</span><br><span class="line">&#123;% endif %&#125;</span><br></pre></td></tr></table></figure><p>这样的处理就可以在主题的配置文件中使用配置选择是否打开<code>high一下</code>功能，现在就还需要把<code>high.js</code>放到对应的文件夹中，我这边的路径是<code>next-&gt;source-&gt;vendors-&gt;high-&gt;high.js</code>。后来又发现<code>high.js</code>的源码中还有着这么一段：</p><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">var f &#x3D; &quot;&#x2F;&#x2F;s3.amazonaws.com&#x2F;moovweb-marketing&#x2F;playground&#x2F;harlem-shake-style.css&quot;;</span><br></pre></td></tr></table></figure><p>外部还引用了一个亚马逊云的 css 文件，兵来将挡水来土掩，css文件也要转移：</p><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">var f &#x3D; &quot;&#x2F;vendors&#x2F;high&#x2F;high.css&quot;;</span><br></pre></td></tr></table></figure><p>css 放到和 js 同一个目录下。<br>源码里还有这么一段：</p><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">var i &#x3D; musicUrl || &quot;&#x2F;&#x2F;s3.amazonaws.com&#x2F;moovweb-marketing&#x2F;playground&#x2F;harlem-shake.mp3&quot;;</span><br></pre></td></tr></table></figure><p>这个就是播放的歌曲地址里，这个也可以随意改。<br>但是！但是！但是！重要的事情提醒三次，这个 js 是专门根据这首曲子写的，我尝试换了其他的曲子，效果都不理想，所以就只能将就用这首曲子了。</p><h3 id="四、high-一下自定义页面歌曲"><a href="#四、high-一下自定义页面歌曲" class="headerlink" title="四、high 一下自定义页面歌曲"></a>四、high 一下自定义页面歌曲</h3><p>就这样就结束还是有点不甘心，我是希望能做到每个页面都能够自定义播放的曲子。虽然其他曲子都对不上这个 js的节奏，但是这个想法的创意很棒，必须得实现！<br>首先是在需要自定义曲子的文章中加上：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"musicUrl"</span> <span class="attr">url</span>=<span class="string">"***"</span>&gt;</span><span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><p>然后最终版<code>high.js</code>代码是这样：</p><figure class="highlight js"><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><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span>.getElementsByClassName(<span class="string">'menu-item-high'</span>)[<span class="number">0</span>].addEventListener(<span class="string">'click'</span>, (<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line"><span class="keyword">var</span> play = <span class="literal">false</span>;</span><br><span class="line"><span class="keyword">var</span> musicUrl = <span class="built_in">document</span>.getElementById(<span class="string">'musicUrl'</span>);</span><br><span class="line"><span class="keyword">if</span>(musicUrl)&#123;</span><br><span class="line">musicUrl = musicUrl.getAttribute(<span class="string">'url'</span>);</span><br><span class="line">&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">musicUrl = <span class="literal">null</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line"><span class="keyword">if</span>(play)&#123;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'Enjoying'</span>);</span><br><span class="line"><span class="keyword">return</span>;</span><br><span class="line">&#125;</span><br><span class="line">play = <span class="literal">true</span>;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">c</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line"><span class="keyword">var</span> e = <span class="built_in">document</span>.createElement(<span class="string">"link"</span>);</span><br><span class="line">e.setAttribute(<span class="string">"type"</span>, <span class="string">"text/css"</span>);</span><br><span class="line">e.setAttribute(<span class="string">"rel"</span>, <span class="string">"stylesheet"</span>);</span><br><span class="line">e.setAttribute(<span class="string">"href"</span>, f);</span><br><span class="line">e.setAttribute(<span class="string">"class"</span>, l);</span><br><span class="line"><span class="built_in">document</span>.body.appendChild(e)</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">h</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line"><span class="keyword">var</span> e = <span class="built_in">document</span>.getElementsByClassName(l);</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> t = <span class="number">0</span>; t &lt; e.length; t++) &#123;</span><br><span class="line"><span class="built_in">document</span>.body.removeChild(e[t])</span><br><span class="line">&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">p</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line"><span class="keyword">var</span> e = <span class="built_in">document</span>.createElement(<span class="string">"div"</span>);</span><br><span class="line">e.setAttribute(<span class="string">"class"</span>, a);</span><br><span class="line"><span class="built_in">document</span>.body.appendChild(e);</span><br><span class="line">setTimeout(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line"><span class="built_in">document</span>.body.removeChild(e)</span><br><span class="line">&#125;, <span class="number">100</span>)</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">d</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line"><span class="keyword">return</span> &#123;</span><br><span class="line">height: e.offsetHeight,</span><br><span class="line">width: e.offsetWidth</span><br><span class="line">&#125;</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">v</span>(<span class="params">i</span>) </span>&#123;</span><br><span class="line"><span class="keyword">var</span> s = d(i);</span><br><span class="line"><span class="keyword">return</span> s.height &gt; e &amp;&amp; s.height &lt; n &amp;&amp; s.width &gt; t &amp;&amp; s.width &lt; r</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">m</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line"><span class="keyword">var</span> t = e;</span><br><span class="line"><span class="keyword">var</span> n = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">while</span> (!!t) &#123;</span><br><span class="line">n += t.offsetTop;</span><br><span class="line">t = t.offsetParent</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">return</span> n</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">g</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line"><span class="keyword">var</span> e = <span class="built_in">document</span>.documentElement;</span><br><span class="line"><span class="keyword">if</span> (!!<span class="built_in">window</span>.innerWidth) &#123;</span><br><span class="line"><span class="keyword">return</span> <span class="built_in">window</span>.innerHeight</span><br><span class="line">&#125; <span class="keyword">else</span> <span class="keyword">if</span> (e &amp;&amp; !<span class="built_in">isNaN</span>(e.clientHeight)) &#123;</span><br><span class="line"><span class="keyword">return</span> e.clientHeight</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">return</span> <span class="number">0</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">y</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line"><span class="keyword">if</span> (<span class="built_in">window</span>.pageYOffset) &#123;</span><br><span class="line"><span class="keyword">return</span> <span class="built_in">window</span>.pageYOffset</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">return</span> <span class="built_in">Math</span>.max(<span class="built_in">document</span>.documentElement.scrollTop, <span class="built_in">document</span>.body.scrollTop)</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">E</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line"><span class="keyword">var</span> t = m(e);</span><br><span class="line"><span class="keyword">return</span> t &gt;= w &amp;&amp; t &lt;= b + w</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">S</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line"><span class="keyword">var</span> e = <span class="built_in">document</span>.createElement(<span class="string">"audio"</span>);</span><br><span class="line">e.setAttribute(<span class="string">"class"</span>, l);</span><br><span class="line">e.src = i;</span><br><span class="line">e.loop = <span class="literal">false</span>;</span><br><span class="line">e.addEventListener(<span class="string">"canplay"</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">setTimeout(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">x(k)</span><br><span class="line">&#125;, <span class="number">500</span>);</span><br><span class="line">setTimeout(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">N();</span><br><span class="line">p();</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> e = <span class="number">0</span>; e &lt; O.length; e++) &#123;</span><br><span class="line">T(O[e])</span><br><span class="line">&#125;</span><br><span class="line">&#125;, <span class="number">15500</span>)</span><br><span class="line">&#125;, <span class="literal">true</span>);</span><br><span class="line">e.addEventListener(<span class="string">"ended"</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">N();</span><br><span class="line">h();</span><br><span class="line">paly = <span class="literal">false</span>;</span><br><span class="line">&#125;, <span class="literal">true</span>);</span><br><span class="line">e.innerHTML = <span class="string">" &lt;p&gt;If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.&lt;/p&gt; &lt;p&gt;"</span>;</span><br><span class="line"><span class="built_in">document</span>.body.appendChild(e);</span><br><span class="line">e.play()</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">x</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line">e.className += <span class="string">" "</span> + s + <span class="string">" "</span> + o</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">T</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line">e.className += <span class="string">" "</span> + s + <span class="string">" "</span> + u[<span class="built_in">Math</span>.floor(<span class="built_in">Math</span>.random() * u.length)]</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">N</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line"><span class="keyword">var</span> e = <span class="built_in">document</span>.getElementsByClassName(s);</span><br><span class="line"><span class="keyword">var</span> t = <span class="keyword">new</span> <span class="built_in">RegExp</span>(<span class="string">"\\b"</span> + s + <span class="string">"\\b"</span>);</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> n = <span class="number">0</span>; n &lt; e.length; ) &#123;</span><br><span class="line">e[n].className = e[n].className.replace(t, <span class="string">""</span>)</span><br><span class="line">&#125;</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="keyword">var</span> e = <span class="number">30</span>;</span><br><span class="line"><span class="keyword">var</span> t = <span class="number">30</span>;</span><br><span class="line"><span class="keyword">var</span> n = <span class="number">350</span>;</span><br><span class="line"><span class="keyword">var</span> r = <span class="number">350</span>;</span><br><span class="line"><span class="keyword">var</span> i = musicUrl || <span class="string">"//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake.mp3"</span>;</span><br><span class="line"><span class="keyword">var</span> s = <span class="string">"mw-harlem_shake_me"</span>;</span><br><span class="line"><span class="keyword">var</span> o = <span class="string">"im_first"</span>;</span><br><span class="line"><span class="keyword">var</span> u = [<span class="string">"im_drunk"</span>, <span class="string">"im_baked"</span>, <span class="string">"im_trippin"</span>, <span class="string">"im_blown"</span>];</span><br><span class="line"><span class="keyword">var</span> a = <span class="string">"mw-strobe_light"</span>;</span><br><span class="line"><span class="keyword">var</span> f = <span class="string">"/vendors/high/high.css"</span>;</span><br><span class="line"><span class="keyword">var</span> l = <span class="string">"mw_added_css"</span>;</span><br><span class="line"><span class="keyword">var</span> b = g();</span><br><span class="line"><span class="keyword">var</span> w = y();</span><br><span class="line"><span class="keyword">var</span> C = <span class="built_in">document</span>.getElementsByTagName(<span class="string">"*"</span>);</span><br><span class="line"><span class="keyword">var</span> k = <span class="literal">null</span>;</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> L = <span class="number">0</span>; L &lt; C.length; L++) &#123;</span><br><span class="line"><span class="keyword">var</span> A = C[L];</span><br><span class="line"><span class="keyword">if</span> (v(A)) &#123;</span><br><span class="line"><span class="keyword">if</span> (E(A)) &#123;</span><br><span class="line">k = A;</span><br><span class="line"><span class="keyword">break</span></span><br><span class="line">&#125;</span><br><span class="line">&#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">if</span> (A === <span class="literal">null</span>) &#123;</span><br><span class="line"><span class="built_in">console</span>.warn(<span class="string">"Could not find a node of the right size. Please try a different page."</span>);</span><br><span class="line"><span class="keyword">return</span></span><br><span class="line">&#125;</span><br><span class="line">c();</span><br><span class="line">S();</span><br><span class="line"><span class="keyword">var</span> O = [];</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> L = <span class="number">0</span>; L &lt; C.length; L++) &#123;</span><br><span class="line"><span class="keyword">var</span> A = C[L];</span><br><span class="line"><span class="keyword">if</span> (v(A)) &#123;</span><br><span class="line">O.push(A)</span><br><span class="line">&#125;</span><br><span class="line">&#125;</span><br><span class="line">&#125;;</span><br><span class="line">&#125;)(), <span class="literal">false</span>);</span><br></pre></td></tr></table></figure><p>这样就能自定义每篇文章的 high 的曲子都不一样了，当然也都纯属娱乐，不要过于较真。（因为有挺多朋友说我神经，所以就暂时先把这个功能关闭了）。</p>]]></content>
    
    <summary type="html">
    
      &lt;blockquote&gt;
&lt;p&gt;额外一点小功能可以为博客增光添彩。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h3 id=&quot;一、引言&quot;&gt;&lt;a href=&quot;#一、引言&quot; class=&quot;headerlink&quot; title=&quot;一、引言&quot;&gt;&lt;/a&gt;一、引言&lt;/h3&gt;&lt;p&gt;博客建立之初，有各种奇奇怪怪的想法，有网上找相关教程看到的，也有自己突发奇想的，这里介绍一下&lt;code&gt;high一下&lt;/code&gt;功能。&lt;/p&gt;
    
    </summary>
    
    
      <category term="博客" scheme="http://blog.paddings.cn/categories/%E5%8D%9A%E5%AE%A2/"/>
    
    
      <category term="hexo" scheme="http://blog.paddings.cn/tags/hexo/"/>
    
  </entry>
  
  <entry>
    <title>Hexo 博客添加百度sitemap</title>
    <link href="http://blog.paddings.cn/2016/05/14/blog/hexo-sitemap/"/>
    <id>http://blog.paddings.cn/2016/05/14/blog/hexo-sitemap/</id>
    <published>2016-05-14T12:30:48.000Z</published>
    <updated>2020-05-21T00:26:05.363Z</updated>
    
    <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script><blockquote><p>在这个搜索引擎至上的年代，更好的被搜索引擎收录成为必不可少的一步。</p></blockquote><h3 id="一、引言"><a href="#一、引言" class="headerlink" title="一、引言"></a>一、引言</h3><p>个人搭建的博客没有基于任何知名的平台，那么在搜索引擎被收录的可能就微乎其微，那么如何提高被搜索到的几率呢？</p><a id="more"></a><p>这里就会牵扯到网站的SEO方案，我对这个不是很熟悉，就不在这里大放厥词了。搭建自己的个人博客的时候，无意之中找到一篇介绍添加百度站点收录的文章。自己跟着这篇文章去设置百度，中间也遇到了一些小问题，但是最后也都解决掉了。所以在这里做一个总结。</p><h3 id="二、生成-sitemap-文件"><a href="#二、生成-sitemap-文件" class="headerlink" title="二、生成 sitemap 文件"></a>二、生成 sitemap 文件</h3><p>需要先安装两个 hexo 插件：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-generator-sitemap --save-dev</span><br><span class="line">npm install hexo-generator-baidu-sitemap --save-dev</span><br></pre></td></tr></table></figure><p>一个是传统的 sitemap，一个是百度专有的 sitemap。多多益善。<br>安装完这两个插件，再重启 hexo，在本地访问 <a href="http://127.0.0.4000/sitemap.xml">http://127.0.0.4000/sitemap.xml</a> 和 <a href="http://127.0.0.4000/baidusitemap.xml">http://127.0.0.4000/baidusitemap.xml</a> 就能正确的展示出两个sitemap 文件了。</p><h3 id="三、注册百度站长平台"><a href="#三、注册百度站长平台" class="headerlink" title="三、注册百度站长平台"></a>三、注册百度站长平台</h3><h3 id="四、添加个人网站"><a href="#四、添加个人网站" class="headerlink" title="四、添加个人网站"></a>四、添加个人网站</h3><p>进入站点管理添加需要管理的网站地址，第二步的验证有三种方式：文件、html标签、cname。因为个人使用的是 <a href="http://coding.net" target="_blank" rel="noopener">coding</a> 的<code>pages</code>服务，域名是属于系统分配的，所以无法使用cname验证来完成，当然如果这是你的个人域名，这个方案也是挺容易的。</p><p>其次我尝试使用文件的方式来实现，但是不幸的是，失败了。经过调查发现是因为 hexo 在生成文章的时候会把所有的<code>.html</code> 文件处理一遍，加上一些额外的东西，结果就是导致了 百度站点验证的文件里面多了很多其他东西，所以就无法验证通过。</p><p>所以最终的方案就是添加 html 标签了。添加完相应的标签之后，上传到自己的博客之中，多刷新几次，百度站点那边就会通过了。</p><h3 id="五、提交-sitemap-文件"><a href="#五、提交-sitemap-文件" class="headerlink" title="五、提交 sitemap 文件"></a>五、提交 sitemap 文件</h3><p>转到链接提交处，选择自己的站点网址。找到自动提交，选择<code>sitemap</code>。按照提示的格式添加自己的sitemap文件</p><p><img data-src="http://i4.buimg.com/f1b34db2bfca606e.png" alt="sitemap"></p><p>接下来要做的就是等待了，过上一两天就会在这里看到提取的 url 数量了</p>]]></content>
    
    <summary type="html">
    
      &lt;blockquote&gt;
&lt;p&gt;在这个搜索引擎至上的年代，更好的被搜索引擎收录成为必不可少的一步。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h3 id=&quot;一、引言&quot;&gt;&lt;a href=&quot;#一、引言&quot; class=&quot;headerlink&quot; title=&quot;一、引言&quot;&gt;&lt;/a&gt;一、引言&lt;/h3&gt;&lt;p&gt;个人搭建的博客没有基于任何知名的平台，那么在搜索引擎被收录的可能就微乎其微，那么如何提高被搜索到的几率呢？&lt;/p&gt;
    
    </summary>
    
    
      <category term="博客" scheme="http://blog.paddings.cn/categories/%E5%8D%9A%E5%AE%A2/"/>
    
    
      <category term="hexo" scheme="http://blog.paddings.cn/tags/hexo/"/>
    
  </entry>
  
  <entry>
    <title>Hexo NexT 主题 添加留言本页面</title>
    <link href="http://blog.paddings.cn/2016/05/11/blog/hexo-guestbook/"/>
    <id>http://blog.paddings.cn/2016/05/11/blog/hexo-guestbook/</id>
    <published>2016-05-11T13:26:54.000Z</published>
    <updated>2020-05-21T00:26:05.363Z</updated>
    
    <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="/assets/css/APlayer.min.css"><script src="/assets/js/APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="/assets/js/Meting.min.js"></script><blockquote><p>留言让博客看起来更加的人性化</p></blockquote><p>NexT 主题官网有给出添加标签页、分类页的方法，其实添加留言本的方式异曲同工。方式稍微会有一点不同。</p><a id="more"></a><h3 id="一、添加留言本-page"><a href="#一、添加留言本-page" class="headerlink" title="一、添加留言本 page"></a>一、添加留言本 page</h3><p>进入到博客的根目录，运行命令：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo new page guestbook</span><br></pre></td></tr></table></figure><h3 id="二、留言本页面中添加多说访客代码"><a href="#二、留言本页面中添加多说访客代码" class="headerlink" title="二、留言本页面中添加多说访客代码"></a>二、留言本页面中添加多说访客代码</h3><p>上一步中使用 hexo 命令新建了一个 page，进入到博客的<code>source</code>目录，里面会多了一个<code>gusetbook</code>文件夹，里面有一个<code>index.md</code>文件，打开该文件编辑：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"ds-recent-visitors"</span> <span class="attr">data-num-items</span>=<span class="string">"28"</span> <span class="attr">data-avatar-size</span>=<span class="string">"42"</span> <span class="attr">id</span>=<span class="string">"ds-recent-visitors"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><p>这段代码加到<code>index.md</code>底部就行。<br>然后要登录自己多说的站点，进入设置-&gt;自定义CSS，添加：</p><figure class="highlight css"><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></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#ds-reset</span> <span class="selector-class">.ds-avatar</span> <span class="selector-tag">img</span>,</span><br><span class="line"><span class="selector-id">#ds-recent-visitors</span> <span class="selector-class">.ds-avatar</span> <span class="selector-tag">img</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">54px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">54px</span>;     <span class="comment">/*設置圖像的長和寬，這裏要根據自己的評論框情況更改*/</span></span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">27px</span>;     <span class="comment">/*設置圖像圓角效果,在這裏我直接設置了超過width/2的像素，即為圓形了*/</span></span><br><span class="line">    <span class="attribute">-webkit-border-radius</span>: <span class="number">27px</span>;     <span class="comment">/*圓角效果：兼容webkit瀏覽器*/</span></span><br><span class="line">    <span class="attribute">-moz-border-radius</span>: <span class="number">27px</span>;</span><br><span class="line">    <span class="attribute">box-shadow</span>: inset <span class="number">0</span> -<span class="number">1px</span> <span class="number">0</span> <span class="number">#3333</span>sf;     <span class="comment">/*設置圖像陰影效果*/</span></span><br><span class="line">    <span class="attribute">-webkit-box-shadow</span>: inset <span class="number">0</span> -<span class="number">1px</span> <span class="number">0</span> <span class="number">#3333</span>sf;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-id">#ds-recent-visitors</span> <span class="selector-class">.ds-avatar</span> &#123;</span><br><span class="line">    <span class="attribute">float</span>: left</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/*隱藏多說底部版權*/</span></span><br><span class="line"><span class="selector-id">#ds-thread</span> <span class="selector-id">#ds-reset</span> <span class="selector-class">.ds-powered-by</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: none;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h3 id="三、菜单设置中添加留言本"><a href="#三、菜单设置中添加留言本" class="headerlink" title="三、菜单设置中添加留言本"></a>三、菜单设置中添加留言本</h3><p>找到<code>NexT</code>主题设置的<code>_config.yml</code>文件里面的<code>menu</code>项</p><figure class="highlight yml"><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"><span class="attr">menu:</span></span><br><span class="line">  <span class="attr">home:</span> <span class="string">/</span></span><br><span class="line">  <span class="comment">#about: /about</span></span><br><span class="line">  <span class="attr">archives:</span> <span class="string">/archives</span></span><br><span class="line">  <span class="attr">tags:</span> <span class="string">/tags</span></span><br><span class="line">  <span class="attr">categories:</span> <span class="string">/categories</span></span><br><span class="line">  <span class="attr">guestbook:</span> <span class="string">/guestbook</span></span><br></pre></td></tr></table></figure><h3 id="四、添加多语言文件的值"><a href="#四、添加多语言文件的值" class="headerlink" title="四、添加多语言文件的值"></a>四、添加多语言文件的值</h3><p>因为这里使用的是中文，找到<code>languages</code>文件夹里面的<code>zh-Hans.yml</code>文件，<code>menu</code>子项中添加留言：</p><figure class="highlight yml"><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"><span class="attr">menu:</span></span><br><span class="line">  <span class="attr">home:</span> <span class="string">首页</span></span><br><span class="line">  <span class="attr">archives:</span> <span class="string">归档</span></span><br><span class="line">  <span class="attr">categories:</span> <span class="string">分类</span></span><br><span class="line">  <span class="attr">tags:</span> <span class="string">标签</span></span><br><span class="line">  <span class="attr">about:</span> <span class="string">关于</span></span><br><span class="line">  <span class="attr">search:</span> <span class="string">搜索</span></span><br><span class="line">  <span class="attr">commonweal:</span> <span class="string">公益404</span></span><br><span class="line">  <span class="attr">guestbook:</span> <span class="string">留言</span></span><br></pre></td></tr></table></figure>]]></content>
    
    <summary type="html">
    
      &lt;blockquote&gt;
&lt;p&gt;留言让博客看起来更加的人性化&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;NexT 主题官网有给出添加标签页、分类页的方法，其实添加留言本的方式异曲同工。方式稍微会有一点不同。&lt;/p&gt;
    
    </summary>
    
    
      <category term="博客" scheme="http://blog.paddings.cn/categories/%E5%8D%9A%E5%AE%A2/"/>
    
    
      <category term="hexo" scheme="http://blog.paddings.cn/tags/hexo/"/>
    
  </entry>
  
</feed>
