-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
322 lines (202 loc) · 20.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hexo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta property="og:type" content="website">
<meta property="og:title" content="Hexo">
<meta property="og:url" content="http://yoursite.com/index.html">
<meta property="og:site_name" content="Hexo">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Hexo">
<link rel="alternate" href="/atom.xml" title="Hexo" type="application/atom+xml">
<link rel="icon" href="/favicon.png">
<link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<div id="container">
<div id="wrap">
<header id="header">
<div id="banner"></div>
<div id="header-outer" class="outer">
<div id="header-title" class="inner">
<h1 id="logo-wrap">
<a href="/" id="logo">Hexo</a>
</h1>
</div>
<div id="header-inner" class="inner">
<nav id="main-nav">
<a id="main-nav-toggle" class="nav-icon"></a>
<a class="main-nav-link" href="/">Home</a>
<a class="main-nav-link" href="/archives">Archives</a>
</nav>
<nav id="sub-nav">
<a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
<a id="nav-search-btn" class="nav-icon" title="Search"></a>
</nav>
<div id="search-form-wrap">
<form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" results="0" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit"></button><input type="hidden" name="sitesearch" value="http://yoursite.com"></form>
</div>
</div>
</div>
</header>
<div class="outer">
<section id="main">
<article id="post-hello-world" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2017/03/30/hello-world/" class="article-date">
<time datetime="2017-03-30T12:27:59.785Z" itemprop="datePublished">2017-03-30</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2017/03/30/hello-world/">Hello World</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>Welcome to <a href="https://hexo.io/" target="_blank" rel="external">Hexo</a>! This is your very first post. Check <a href="https://hexo.io/docs/" target="_blank" rel="external">documentation</a> for more info. If you get any problems when using Hexo, you can find the answer in <a href="https://hexo.io/docs/troubleshooting.html" target="_blank" rel="external">troubleshooting</a> or you can ask me on <a href="https://github.com/hexojs/hexo/issues" target="_blank" rel="external">GitHub</a>.</p>
<h2 id="Quick-Start"><a href="#Quick-Start" class="headerlink" title="Quick Start"></a>Quick Start</h2><h3 id="Create-a-new-post"><a href="#Create-a-new-post" class="headerlink" title="Create a new post"></a>Create a new post</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo new <span class="string">"My New Post"</span></div></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/writing.html" target="_blank" rel="external">Writing</a></p>
<h3 id="Run-server"><a href="#Run-server" class="headerlink" title="Run server"></a>Run server</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo server</div></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/server.html" target="_blank" rel="external">Server</a></p>
<h3 id="Generate-static-files"><a href="#Generate-static-files" class="headerlink" title="Generate static files"></a>Generate static files</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo generate</div></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/generating.html" target="_blank" rel="external">Generating</a></p>
<h3 id="Deploy-to-remote-sites"><a href="#Deploy-to-remote-sites" class="headerlink" title="Deploy to remote sites"></a>Deploy to remote sites</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo deploy</div></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/deployment.html" target="_blank" rel="external">Deployment</a></p>
</div>
<footer class="article-footer">
<a data-url="http://yoursite.com/2017/03/30/hello-world/" data-id="cj0wdr7im0002k4qnazmxbx81" class="article-share-link">Share</a>
</footer>
</div>
</article>
<article id="post-user-select和onmousemove混用的坑" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2017/02/04/user-select和onmousemove混用的坑/" class="article-date">
<time datetime="2017-02-04T15:02:39.000Z" itemprop="datePublished">2017-02-04</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2017/02/04/user-select和onmousemove混用的坑/">user-select和onmousemove混用的坑</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>最近在项目中写了一个音乐播放器，当中就少不了拖动控制音量、播放位置等等，但是在拖动的过程中经常会选中周边的文字，这样就会导致onmouseup事件没办法触发（这个问题还在寻找答案，占坑后面补上），很自然的我就想到了user-select:</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"></div><div class="line"><span class="selector-class">.unselectable</span> {</div><div class="line"> <span class="attribute">-moz-user-select</span>: none;</div><div class="line"> <span class="attribute">-webkit-user-select</span>: none;</div><div class="line"> <span class="attribute">-ms-user-select</span>: none;</div><div class="line">}</div><div class="line"></div><div class="line"><span class="selector-tag">none</span><span class="selector-pseudo">:The</span> <span class="selector-tag">text</span> <span class="selector-tag">of</span> <span class="selector-tag">the</span> <span class="selector-tag">element</span> <span class="selector-tag">and</span> <span class="selector-tag">sub-elements</span> <span class="selector-tag">will</span> <span class="selector-tag">not</span> <span class="selector-tag">be</span> <span class="selector-tag">able</span> <span class="selector-tag">to</span> <span class="selector-tag">be</span> <span class="selector-tag">selected</span>. <span class="selector-tag">Selection</span> <span class="selector-tag">can</span> <span class="selector-tag">contain</span> <span class="selector-tag">these</span> <span class="selector-tag">elements</span>.</div><div class="line">翻译过来就是元素及其子元素都不能够被选中</div></pre></td></tr></table></figure>
<p>问题似乎很愉快的解决了，文字不再会被选中，也就不会导致onmouseup无法触发的问题。</p>
<p>但是在后面调试的过程中我发现，当我拖动元素的时候会出现一个禁止拖动的警告。我反复的检查了我拖拽的代码，发现当中没有任何问题，后来突然回想起来当我onmousedown的时候我在播放器的最外层添加了一个unselectable的一个类，这个时候播放器内的任何元素都不能被选中了，冲突在这时候就产生了，user-select:none的目的是让元素不能被选中，而拖拽时这个元素是必然要被选中的，问题找出来了，下面就是要解决这个问题，解决也简单，我只是要文字不被选中，那么我只需要在不希望被选中的元素中添加unselectable这个类。</p>
<p>踩了坑记录下，希望以后不要犯同样的错误。</p>
<p>最后祝大家新的一年工作顺利吧！</p>
</div>
<footer class="article-footer">
<a data-url="http://yoursite.com/2017/02/04/user-select和onmousemove混用的坑/" data-id="cj0wdr7j20003k4qnmrm1szel" class="article-share-link">Share</a>
</footer>
</div>
</article>
<article id="post-如何使用XX-net翻墙（iPhone篇）" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/11/12/如何使用XX-net翻墙（iPhone篇）/" class="article-date">
<time datetime="2016-11-12T12:35:25.000Z" itemprop="datePublished">2016-11-12</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/11/12/如何使用XX-net翻墙（iPhone篇）/">如何使用XX-net翻墙（iPhone篇）</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>墙内墙外之间的差别有多大想必大家都非常清楚，如果能用Google，英文还不错，那出墙总是能获取更多的知识，更广的视野。你也知道百度总是会搜出些什么？最近在折腾iPhone如何使用xx-net进行翻墙，下面做了些记录：</p>
<p><a href="https://github.com/XX-net/XX-Net" target="_blank" rel="external">https://github.com/XX-net/XX-Net</a> 这是XX-net的地址，这是一个懒人翻墙工具，图文教程，跟着走就可以了。以下的操作都是建立在PC端能够使用xx-net进行翻墙的前提下。</p>
<p>第一步：iPhone翻墙首先需要一个CA.crt的证书（CA.crt文件位于XX-Net-master\XX-Net-master\data\gae_proxy\下），需要发送到iPhone进行安装如下图所示（最好的方式就是发送到iPhone邮箱，打开可以直接安装）</p>
<p><img src="http://ogj6p9oe3.bkt.clouddn.com/1.png" alt=""></p>
<p>第二步：获取本机ip（ip不知道自行百度）,之后设置WiFi（PC和移动设备需要在同一网段）的http代理为自动，URL填写格式为<a href="http://ip地址:8086/proxy.pac请将“ip地址”替换为本机的ip地址，如下图所示。" target="_blank" rel="external">http://ip地址:8086/proxy.pac请将“ip地址”替换为本机的ip地址，如下图所示。</a></p>
<p><img src="http://ogj6p9oe3.bkt.clouddn.com/IMG_0375.PNG" alt=""></p>
<p>好了，到了这一步，恭喜你的iPhone应该成功翻墙了!!</p>
</div>
<footer class="article-footer">
<a data-url="http://yoursite.com/2016/11/12/如何使用XX-net翻墙（iPhone篇）/" data-id="cj0wdr7j20004k4qnhpxd9nb6" class="article-share-link">Share</a>
</footer>
</div>
</article>
<article id="post-console对象在ie下undefined的BUG以及解决方案" class="article article-type-post" itemscope itemprop="blogPost">
<div class="article-meta">
<a href="/2016/10/15/console对象在ie下undefined的BUG以及解决方案/" class="article-date">
<time datetime="2016-10-15T15:28:39.000Z" itemprop="datePublished">2016-10-15</time>
</a>
</div>
<div class="article-inner">
<header class="article-header">
<h1 itemprop="name">
<a class="article-title" href="/2016/10/15/console对象在ie下undefined的BUG以及解决方案/">console对象在ie下undefined的BUG以及解决方案</a>
</h1>
</header>
<div class="article-entry" itemprop="articleBody">
<p>我们在平常写JS的时候经常都需要在控制台输出一些信息(利用console或者alert)来帮助我们了解程序是否按照我们的设想在执行。今天要记录的是console这个对象在ie下为undefined的bug;</p>
<p>最近在公司的一个项目发现一个很诡异的bug,一直拖到最后才解决，因为实在想不出是为什么。测试给我提了一个bug，在ie8/ie9下一些数据不能够正常回显，而在我的电脑上都是正常显示的（所以说程序员总是会说在我电脑上的是正常的啊），之后过去测试的电脑上看不正常，回我这边还是正常，这就见鬼了。之后测试突然说你不要按F12啊，不按F12的这一次BUG就出来了。之后反复测试都发现只要是开启了控制台，就不会有BUG，而不开启，BUG就立刻显示出来了。<br><strong>查资料后发现console这个对象在ie8/ie9下是undefined（更低版本没有测试，应该也是undefined）,直到你打开控制台时，这个对象才会被创建，之后删掉了console.log，ie下的bug就解决了，因为在控制台未开启的时候console对象未被定义，这时候程序就会报错进而阻塞后面代码的运行，但开启控制台，console对象被创建，之后的代码也能够被正常运行;</strong></p>
<p>这里虽说删除console.log能够解决问题，但是如果其他浏览器还需要在控制台查看这样就很不方便了。<br>下面有两种方案能够让我们在ie依然能够正常使用console这个对象不报错</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">方案一：</div><div class="line"><span class="keyword">if</span> (<span class="keyword">typeof</span> <span class="built_in">console</span> == <span class="string">"undefined"</span>) {</div><div class="line"> <span class="keyword">this</span>.console = {<span class="attr">log</span>: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{}};</div><div class="line">}</div></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div></pre></td><td class="code"><pre><div class="line">方案二：</div><div class="line">(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">var</span> methods = [<span class="string">"assert"</span>, <span class="string">"cd"</span>, <span class="string">"clear"</span>, <span class="string">"count"</span>, <span class="string">"countReset"</span>,</div><div class="line"> <span class="string">"debug"</span>, <span class="string">"dir"</span>, <span class="string">"dirxml"</span>, <span class="string">"error"</span>, <span class="string">"exception"</span>, <span class="string">"group"</span>, <span class="string">"groupCollapsed"</span>,</div><div class="line"> <span class="string">"groupEnd"</span>, <span class="string">"info"</span>, <span class="string">"log"</span>, <span class="string">"markTimeline"</span>, <span class="string">"profile"</span>, <span class="string">"profileEnd"</span>,</div><div class="line"> <span class="string">"select"</span>, <span class="string">"table"</span>, <span class="string">"time"</span>, <span class="string">"timeEnd"</span>, <span class="string">"timeStamp"</span>, <span class="string">"timeline"</span>,</div><div class="line"> <span class="string">"timelineEnd"</span>, <span class="string">"trace"</span>, <span class="string">"warn"</span>];</div><div class="line"> <span class="keyword">var</span> length = methods.length;</div><div class="line"> <span class="keyword">var</span> <span class="built_in">console</span> = (<span class="built_in">window</span>.console = <span class="built_in">window</span>.console || {});</div><div class="line"> <span class="keyword">var</span> method;</div><div class="line"> <span class="keyword">var</span> noop = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{};</div><div class="line"> <span class="keyword">while</span> (length--) {</div><div class="line"> method = methods[length];</div><div class="line"> <span class="comment">// define undefined methods as noops to prevent errors</span></div><div class="line"> <span class="keyword">if</span> (!<span class="built_in">console</span>[method])</div><div class="line"> <span class="built_in">console</span>[method] = noop;</div><div class="line"> }</div><div class="line">})();</div></pre></td></tr></table></figure>
<p><strong>注意将上面的代码需要放在console对象使用之前</strong></p>
<p><strong>方案一：</strong> 比较精简，我们只需要判断如果console对象是undefined，则给它增加一个log方法。这个方案只能让console.log正常运行，console的其它方法依然会报错（一般我们使用log方法比较多，所以一般方案一就足够了）</p>
<p><strong>方案二：</strong> 是一个比较全方案，所有的console方法都能够在ie低版本下不报错</p>
<p>大家可以根据自己的情况选择解决方案</p>
</div>
<footer class="article-footer">
<a data-url="http://yoursite.com/2016/10/15/console对象在ie下undefined的BUG以及解决方案/" data-id="cj0wdr7im0000k4qnuo89ai1q" class="article-share-link">Share</a>
</footer>
</div>
</article>
</section>
<aside id="sidebar">
<div class="widget-wrap">
<h3 class="widget-title">Archives</h3>
<div class="widget">
<ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/03/">March 2017</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2017/02/">February 2017</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/11/">November 2016</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2016/10/">October 2016</a></li></ul>
</div>
</div>
<div class="widget-wrap">
<h3 class="widget-title">Recent Posts</h3>
<div class="widget">
<ul>
<li>
<a href="/2017/03/30/hello-world/">Hello World</a>
</li>
<li>
<a href="/2017/02/04/user-select和onmousemove混用的坑/">user-select和onmousemove混用的坑</a>
</li>
<li>
<a href="/2016/11/12/如何使用XX-net翻墙（iPhone篇）/">如何使用XX-net翻墙（iPhone篇）</a>
</li>
<li>
<a href="/2016/10/15/console对象在ie下undefined的BUG以及解决方案/">console对象在ie下undefined的BUG以及解决方案</a>
</li>
</ul>
</div>
</div>
</aside>
</div>
<footer id="footer">
<div class="outer">
<div id="footer-info" class="inner">
© 2017 John Doe<br>
Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
</div>
</div>
</footer>
</div>
<nav id="mobile-nav">
<a href="/" class="mobile-nav-link">Home</a>
<a href="/archives" class="mobile-nav-link">Archives</a>
</nav>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
<script src="/fancybox/jquery.fancybox.pack.js"></script>
<script src="/js/script.js"></script>
</div>
</body>
</html>