forked from wwj718/wwj718.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathblockly-dev-python-browser-turtle.html
500 lines (455 loc) · 22.8 KB
/
blockly-dev-python-browser-turtle.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
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
<!--
-----------------
< 终于等到你 >
-----------------
\ ^__^
\ (oo)\_______
(__)\ )\/\
||----w |
|| ||
----------------------------------
我正在构建一个基于网络协作的虚拟团队，
喜欢你这种没事喜欢翻源码的人
如果你恰好也热爱技术、喜欢折腾，来啊，互相伤害，一起捣鼓好玩的东西吧
联系我咯: [email protected]
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>blockly开发之使用python驱动浏览器中的turtle(2)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="writing for time">
<meta name="author" content="wwj">
<!-- Le styles -->
<link href="//cdn.bootcss.com/twitter-bootstrap/2.0.4/css/bootstrap.min.css" rel="stylesheet">
<link rel="icon" href="//7kttuq.com1.z0.glb.clouddn.com/just4fun.png?imageView2/2/w/50" type="image/x-icon">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}
.tag-1 {
font-size: 13pt;
}
.tag-2 {
font-size: 10pt;
}
.tag-2 {
font-size: 8pt;
}
.tag-4 {
font-size: 6pt;
}
#footer img{
visibility: hidden;
}
</style>
<link href="//cdn.bootcss.com/twitter-bootstrap/2.0.4/css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="//cdn.bootcss.com/font-awesome/3.0.0/css/font-awesome.min.css" rel="stylesheet">
<link href="/theme/css/pygments.css" rel="stylesheet">
<link href="/theme/css/mystyle.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="/index.html">writing for time </a>
<div class="nav-collapse">
<ul class="nav">
<li class="divider-vertical"></li>
<li >
<a href="/category/编程.html">
<i class="icon-folder-open icon-large"></i>编程
</a>
</li>
<li >
<a href="/category/读书.html">
<i class="icon-folder-open icon-large"></i>读书
</a>
</li>
<li >
<a href="/category/edx.html">
<i class="icon-folder-open icon-large"></i>edx
</a>
</li>
<li >
<a href="/category/工具.html">
<i class="icon-folder-open icon-large"></i>工具
</a>
</li>
<li >
<a href="/category/观念.html">
<i class="icon-folder-open icon-large"></i>观念
</a>
</li>
<li >
<a href="/category/技术.html">
<i class="icon-folder-open icon-large"></i>技术
</a>
</li>
<li >
<a href="/category/架构.html">
<i class="icon-folder-open icon-large"></i>架构
</a>
</li>
<li >
<a href="/category/空想.html">
<i class="icon-folder-open icon-large"></i>空想
</a>
</li>
<li >
<a href="/category/诗词.html">
<i class="icon-folder-open icon-large"></i>诗词
</a>
</li>
<li >
<a href="/category/数据.html">
<i class="icon-folder-open icon-large"></i>数据
</a>
</li>
<li >
<a href="/category/算法.html">
<i class="icon-folder-open icon-large"></i>算法
</a>
</li>
<li >
<a href="/category/随笔.html">
<i class="icon-folder-open icon-large"></i>随笔
</a>
</li>
<li >
<a href="/category/瓦碎集.html">
<i class="icon-folder-open icon-large"></i>瓦碎集
</a>
</li>
<li class="active">
<a href="/category/硬件.html">
<i class="icon-folder-open icon-large"></i>硬件
</a>
</li>
<ul class="nav pull-right">
<li><a href="/archives.html"><i class="icon-th-list"></i>Archives</a></li>
</ul>
</ul>
<!--<p class="navbar-text pull-right">Logged in as <a href="#">username</a></p>-->
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="span8 offset1" id="content">
<!--<div class="alert alert-success" style="font-size:18px;">> 你那里天气好吗，有什么新闻可以当做笑话</div>-->
<section id="content">
<article>
<header>
<h1>
<a href=""
rel="bookmark"
title="Permalink to blockly开发之使用python驱动浏览器中的turtle(2)">
blockly开发之使用python驱动浏览器中的turtle(2)
</a>
</h1>
</header>
<div class="entry-content">
<div class="well">
<footer class="post-info">
<span class="label">Date</span>
<abbr class="published" title="2018-02-25T00:00:00+00:00">
<i class="icon-calendar"></i>日 25 二月 2018
</abbr>
<span class="label">By</span>
<a href="/author/wuwenjie.html"><i class="icon-user"></i>wuwenjie</a>
<span class="label">Category</span>
<a href="/category/ying-jian.html"><i class="icon-folder-open"></i>硬件</a>.
<span class="label">Tags</span>
<a href="/tag/blockly.html"><i class="icon-tag"></i>blockly</a>
</footer><!-- /.post-info --> </div>
<p>这篇文章我们将使用blockly来做一个完整的项目。</p>
<p>这篇教程涵盖以下内容：</p>
<ul>
<li>从拼搭好的积木块中，生成(generate)python代码</li>
<li>自定义自己的积木块, 并生成对应python代码</li>
<li>在浏览器中运行python代码</li>
<li>整合以上部分，使用积木块驱动turtle</li>
</ul>
<h1>效果展示</h1>
<p><img alt="" src="http://olk8jbdzi.bkt.clouddn.com/blockly_turtle.gif" /></p>
<p>生成的代码为:</p>
<p><img alt="" src="http://oav6fgfj1.bkt.clouddn.com/blockly7f8f7d33.png" /></p>
<h1>关于turtle</h1>
<p>turtle是编程教学中的一个经典概念(另一个经典概念是<code>猫</code>(来自Scratch))，turtle最初由Papert在他的<a href="https://zh.wikipedia.org/zh-hans/Logo%E8%AF%AD%E8%A8%80">Logo语言</a>引入，Logo内置一套海龟绘图（Turtle Graphics）系统，通过向海龟发送命令，用户可以直观地学习程序的运行过程，关于这块的历史沿革，可以参考我之前的文章<a href="http://blog.just4fun.site/scratch.html">Scratch的前世今生</a></p>
<h1>利用blockly generate python代码</h1>
<p>如何使用blockly generate代码，我们已经在<a href="http://blog.just4fun.site/blockly-dev-run-code.html">blockly开发之生成并运行js代码(1)</a>做了手把手教学。</p>
<p>在<a href="http://blog.just4fun.site/blockly-dev-run-code.html">blockly开发之生成并运行js代码(1)</a>中，我们将积木块generate成js代码。blockly默认支持将积木块generate成以下6种代码:</p>
<ul>
<li>JavaScript</li>
<li>Python</li>
<li>PHP</li>
<li>Lua</li>
<li>Dart</li>
<li>XML</li>
</ul>
<p>你可以在<a href="https://blockly-demo.appspot.com/static/demos/code/index.html">Code Editor</a>中体验</p>
<p>本章的目标是generate出python代码，过程十分简洁，你只需要做2件事：</p>
<ol>
<li>引入<code>python_compressed.js</code></li>
<li>generate出python代码:<code>var code = Blockly.Python.workspaceToCode(demoWorkspace);</code></li>
</ol>
<p>完整的代码参考:<a href="https://github.com/wwj718/blockly_dev/blob/master/src/blockly_3_1_generate_python/index.html">blockly_3_1_generate_python</a></p>
<p>你要做的只有这些</p>
<h1>自定义自己的积木块</h1>
<p>blockly只提供了基础的积木块（基本的语言结构），你常常需要定义自己的积木块。</p>
<p>自定义积木块时你实际在做两件事:</p>
<ol>
<li>定义积木的外观</li>
<li>定义出当前积木对应的代码</li>
</ol>
<p>判断一袋狗粮好不好吃的一种方法是看制造者自己吃不吃，我们知道Python社区用Python实现了Python(pypi)。blockly社区中自定义积木外观的工具也是用blockly实现的: <a href="https://blockly-demo.appspot.com/static/demos/blockfactory/index.html">Blockly Developer Tools</a>，文档参考:<a href="https://developers.google.com/blockly/guides/create-custom-blocks/blockly-developer-tools">Blockly Developer Tools docs</a></p>
<p><img alt="" src="http://oav6fgfj1.bkt.clouddn.com/blockly2c0249f1.png" /></p>
<p>通过拖拽积木，你就能轻松定义出积木的外观。</p>
<p>截图中有两处值得注意：</p>
<p><a href="http://oav6fgfj1.bkt.clouddn.com/blockly2af54b72.png"></a></p>
<p>红色框中是你自定义积木外观的代码描述，有两种风格你可以选择（js/json），使用json风格你会得到一个好处:可以随时将json贴回Blockly Developer Tools，从而得到对应的积木。在你生成自定义积木的时候，建议取得分享链接，以便于日后对积木做调整。</p>
<p>而绿色框中则是该积木generate出的代码，你可以选择目标语言,在此我选择Python</p>
<p>在<a href="https://github.com/wwj718/blockly_dev/blob/master/src/blockly_3_2_custom_block_generate_python/index.html">blockly_3_2_custom_block_generate_python</a>中展示了一个完整的自定义积木，如下:</p>
<div class="highlight"><pre><span></span><span class="c1">//外观 使用js风格的描述</span>
<span class="nx">Blockly</span><span class="p">.</span><span class="nx">Blocks</span><span class="p">.</span><span class="nx">draw_stamp</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">init</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">setColour</span><span class="p">(</span><span class="mi">160</span><span class="p">),</span>
<span class="k">this</span><span class="p">.</span><span class="nx">appendDummyInput</span><span class="p">().</span><span class="nx">appendField</span><span class="p">(</span><span class="s2">"stamp"</span><span class="p">),</span>
<span class="k">this</span><span class="p">.</span><span class="nx">setPreviousStatement</span><span class="p">(</span><span class="o">!</span><span class="mi">0</span><span class="p">),</span>
<span class="k">this</span><span class="p">.</span><span class="nx">setNextStatement</span><span class="p">(</span><span class="o">!</span><span class="mi">0</span><span class="p">)</span>
<span class="p">}</span>
<span class="p">},</span>
<span class="c1">//generate Python</span>
<span class="nx">Blockly</span><span class="p">.</span><span class="nx">Python</span><span class="p">.</span><span class="nx">draw_stamp</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">a</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">Blockly</span><span class="p">.</span><span class="nx">Python</span><span class="p">.</span><span class="nx">definitions_</span><span class="p">.</span><span class="nx">import_turtle</span> <span class="o">=</span> <span class="s2">"import turtle\nturtle=turtle.Turtle()"</span><span class="p">;</span>
<span class="k">return</span> <span class="s2">"turtle.stamp()\n"</span>
<span class="p">}</span>
</pre></div>
<p>关于自定义积木的话题很大，我们找机会专门讨论，在此就不展开</p>
<h1>浏览器中运行python</h1>
<p>目前有好几个项目允许你在浏览器中运行python，其中最流行的解决方案是:<a href="https://github.com/skulpt/skulpt">skulpt</a>，也许也是目前最成熟的解决方案,好些大型项目都在用它,诸如:</p>
<ul>
<li><a href="https://www.tynker.com/">tynker</a></li>
<li><a href="https://www.coursera.org/learn/interactive-python-1">coursera</a></li>
<li><a href="https://trinket.io/">trinket</a></li>
</ul>
<p>浏览器无处不在，如果能在浏览器中直接运行python，不仅免去了新用户安装环境的麻烦，教学者还可以利用js的动态性，灵活地设计课程并与用户交互，很方便对用户做引导。skulpt的主要使用场景是教学，以上便是原因。</p>
<p>skulpt使用js实现了python解释器(python2.x)，让python能运行在所有主流浏览器中，如此一来，你就可以轻松在pc/手机/ipad的浏览器中学习python</p>
<p>skulpt是一个强大而灵活的项目，自带很多电池，且有很好的可扩展性(自定义模块)，如果你有兴趣，可以参考:<a href="http://www.skulpt.org/">skulpt官网</a></p>
<p>turtle是skulpt自带的模块，你可以在<a href="http://interactivepython.org/runestone/static/thinkcspy/PythonTurtle/OurFirstTurtleProgram.html">Our First Turtle Program</a>体验它</p>
<p>在浏览器中使用python驱动turtle，官方给出了示例源码:<a href="https://gist.githubusercontent.com/bnmnetp/4650616/raw/cea29122971db097c9ccb9fdfccd3c0c9bf81edf/simpleskulpt.html">simpleskulpt</a></p>
<h1>整合</h1>
<p>经过上边的一圈探索，来看看我们现在能够做到哪些事:</p>
<ul>
<li>从拼搭好的积木块中，生成(generate)python代码</li>
<li>自定义自己的积木块, 并生成对应python代码</li>
<li>在浏览器中运行python代码</li>
<li>使用python控制浏览器中turtle</li>
</ul>
<p>接下来，整合以上部分，使用blockly积木块来驱动turtle，最小原型参考:<a href="https://github.com/wwj718/blockly_dev/tree/master/src/blockly_4_run_python_in_browser_simple">blockly_4_run_python_in_browser_simple</a> </p>
<p>上边的最小原型修改自<a href="https://gist.githubusercontent.com/bnmnetp/4650616/raw/cea29122971db097c9ccb9fdfccd3c0c9bf81edf/simpleskulpt.html">simpleskulpt</a>。修改之处仅有: 把<code>var prog = document.getElementById("yourcode").value;</code>改为blockly生成的代码:<code>var prog = Blockly.Python.workspaceToCode(demoWorkspace);</code> , 如此干净整洁!</p>
<p>这个例子中，我们可以看出blockly的灵活性，如我们在<a href="http://blog.just4fun.site/blockly-overview.html">blockly入门与介绍</a>中所言，blockly是个编辑器，只负责生成代码，至于代码之后用与干吗，它通通不关心。如此一来，就不产生耦合了。</p>
<p>要了让blockly能做出丰富的东西，我们需要把turtle的所有操作原语全都暴露为积木块，这个工作我偷了个懒，直接抠了<a href="https://hourofpython.trinket.io/from-blocks-to-code-with-trinket#/blocks/dragging-and-dropping">trinket</a>的源码。完整的代码参考:<a href="https://github.com/wwj718/blockly_dev/tree/master/src/blockly_5_run_python_in_browser_turtle_finish">blockly_5_run_python_in_browser_turtle_finish</a>。积木部分参考:<a href="https://github.com/wwj718/blockly_dev/blob/master/src/blockly_5_run_python_in_browser_turtle_finish/my_blocks.js">my_blocks.js</a>（js代码中变量被压缩过，可读性不大好）</p>
<p>如此一来我们就完成了整个项目. </p>
<p>这个项目很有代表性，使用blockly制作一个application的步骤，我们在以上过程中都经历了</p>
<p>这些步骤官方描述为:</p>
<ul>
<li>集成blockly编辑器</li>
<li>定义你的app里的功能块（block）</li>
<li>构建app的其余部分，blockly仅充当代码生成器，你需要决定这些用户生成的代码用于做什么，这也是你的app的核心功能所在</li>
</ul>
<p>关于最后一点，blockly官方说的很笼统，针对少儿编程这一领域，第三点往往可以拆解为几类典型问题。这方面我们之后有空再谈</p>
<!--
# 总结
phaser/snap
Blockly/Scratch 在少儿编程中的应用: 积累问题
-->
<h1>相关源码</h1>
<p>以下源码展示了渐进的学习过程:</p>
<ul>
<li><a href="https://github.com/wwj718/blockly_dev/tree/master/src/blockly_3_1_generate_python">blockly_3_1_generate_python</a></li>
<li><a href="https://github.com/wwj718/blockly_dev/tree/master/src/blockly_3_2_custom_block_generate_python">blockly_3_2_custom_block_generate_python</a></li>
<li><a href="https://github.com/wwj718/blockly_dev/tree/master/src/blockly_4_run_python_in_browser_simple">blockly_4_run_python_in_browser_simple</a></li>
<li><a href="https://github.com/wwj718/blockly_dev/tree/master/src/blockly_5_run_python_in_browser_turtle_finish">blockly_5_run_python_in_browser_turtle_finish</a></li>
</ul>
</div><!-- /.entry-content -->
<!--
<p style="font-size:16px" class="alert alert-info">此文对我有价值，打赏杯茶喝^_^ <a target="_blank" class="btn btn-primary btn-large" href="https://me.alipay.com/wuwj">支付宝打赏</a> </p>
-->
<hr>
<div class="alert alert-success">版权声明：<a href="http://creativecommons.org/licenses/by-nc-nd/3.0/deed.zh">自由转载-非商用-非衍生-保持署名</a></div>
<hr>
<!-- Duoshuo Comment BEGIN -->
<!--
<div class="ds-thread"></div>
<script type="text/javascript">
var duoshuoQuery = {short_name:"wwj718blog"};
(function() {
var ds = document.createElement('script');
ds.type = 'text/javascript';ds.async = true;
ds.src = 'http://static.duoshuo.com/embed.js';
ds.charset = 'UTF-8';
(document.getElementsByTagName('head')[0]
|| document.getElementsByTagName('body')[0]).appendChild(ds);
})();
</script>
-->
<!-- Duoshuo Comment END -->
</article>
</section>
</div><!--/span-->
<div style="margin-left:70px;" class="span3 well sidebar-nav" id="sidebar">
<ul class="nav nav-list">
<!--<a href="/others/startedx.html"><h3>Open edX相关咨询</h3></a>-->
<hr/>
<!--
<h3>我的服务<h3>
<a href="http://olk8jbdzi.bkt.clouddn.com/index.html"><h4>开源在线表单设计工具</h4></a>
<a href="#kinto.jsut4fun.site"><h4>kinto server(施工中)</h4></a>
<a href="#"><h4></h4></a>
-->
<!--<a href="/join-us"><h3>招兵买马(招实习!)<h3></a>-->
</hr>
</hr>
<li style="text-align: center;"><a href="https://www.e-ducation.cn/?utm_source=zgblog&utm_medium=ads&utm_campaign=marketing_01"><img src="http://os54tv4fc.bkt.clouddn.com/education.png" width="100%" max-width="250px" /> </a></li>
<hr/>
<h4>站内搜索(基于google，你可能看不到)</h4>
<div>
<script>
(function() {
var cx = '004056624884628766270:aaifcpik-ua';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search></gcse:search>
</div>
<hr>
<h4>手机访问：</h4>
<li style="text-align: center;">
<img src="http://os54tv4fc.bkt.clouddn.com/1514204585.png" width="150px" />
</li>
<li><i class="icon-external-link"></i><a href="/aboutme.html">关于我</a></li>
<li><i class="icon-external-link"></i><a href="https://github.com/wwj718">my github</a></li>
<li><i class="icon-external-link"></i><a href="#">my gmail：[email protected]</a></li>
<hr>
<li class="nav-header"><h4><i class="icon-folder-close icon-large"></i>分类</h4></li>
<li>
<a href="/category/编程.html">
<i class="icon-folder-open icon-large"></i>编程
</a>
</li>
<li>
<a href="/category/读书.html">
<i class="icon-folder-open icon-large"></i>读书
</a>
</li>
<li>
<a href="/category/edx.html">
<i class="icon-folder-open icon-large"></i>edx
</a>
</li>
<li>
<a href="/category/工具.html">
<i class="icon-folder-open icon-large"></i>工具
</a>
</li>
<li>
<a href="/category/观念.html">
<i class="icon-folder-open icon-large"></i>观念
</a>
</li>
<li>
<a href="/category/技术.html">
<i class="icon-folder-open icon-large"></i>技术
</a>
</li>
<li>
<a href="/category/架构.html">
<i class="icon-folder-open icon-large"></i>架构
</a>
</li>
<li>
<a href="/category/空想.html">
<i class="icon-folder-open icon-large"></i>空想
</a>
</li>
<li>
<a href="/category/诗词.html">
<i class="icon-folder-open icon-large"></i>诗词
</a>
</li>
<li>
<a href="/category/数据.html">
<i class="icon-folder-open icon-large"></i>数据
</a>
</li>
<li>
<a href="/category/算法.html">
<i class="icon-folder-open icon-large"></i>算法
</a>
</li>
<li>
<a href="/category/随笔.html">
<i class="icon-folder-open icon-large"></i>随笔
</a>
</li>
<li>
<a href="/category/瓦碎集.html">
<i class="icon-folder-open icon-large"></i>瓦碎集
</a>
</li>
<li>
<a href="/category/硬件.html">
<i class="icon-folder-open icon-large"></i>硬件
</a>
</li>
<li class="nav-header"><h4><i class="icon-tags icon-large"></i>Tags</h4></li>
<hr>
<a target="_blank" href="http://wwj718.github.io/feeds/all.rss.xml">订阅feed</a>
</ul> </div><!--/.well -->
</div><!--/row-->
<hr>
<footer id="footer">
<address id="about">
被误解是表达者的宿命<hr>
powered by Pelican
<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F18db4b662c04fbd6cc2851d246c51b3f' type='text/javascript'%3E%3C/script%3E"));
</script> </address><!-- /#about -->
</footer>
</div><!--/.fluid-container-->
<a href="https://github.com/wwj718"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://camo.githubusercontent.com/567c3a48d796e2fc06ea80409cc9dd82bf714434/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png"></a>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://libs.baidu.com/jquery/1.8.2/jquery.min.js"></script>
<script src="/theme/js/bootstrap-transition.js"></script>
<script src="/theme/js/bootstrap-dropdown.js"></script>
<script src="/theme/js/bootstrap-collapse.js"></script>
<!--<script src="/theme/js/autosidebar.js"></script>-->
</body>
</html>