-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathatom.xml
504 lines (268 loc) · 200 KB
/
atom.xml
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
501
502
503
504
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>苏茂林</title>
<subtitle>Kevin.Su's Blog</subtitle>
<link href="https://www.sumaolin.com/atom.xml" rel="self"/>
<link href="https://www.sumaolin.com/"/>
<updated>2023-03-14T08:55:50.606Z</updated>
<id>https://www.sumaolin.com/</id>
<author>
<name>Kevin Su</name>
</author>
<generator uri="https://hexo.io/">Hexo</generator>
<entry>
<title>极速 ChatGPT API 的接入指南</title>
<link href="https://www.sumaolin.com/2023/03/14/%E6%9E%81%E9%80%9FChatGPT-API%E7%9A%84%E6%8E%A5%E5%85%A5%E6%8C%87%E5%8D%97/"/>
<id>https://www.sumaolin.com/2023/03/14/%E6%9E%81%E9%80%9FChatGPT-API%E7%9A%84%E6%8E%A5%E5%85%A5%E6%8C%87%E5%8D%97/</id>
<published>2023-03-14T08:54:07.000Z</published>
<updated>2023-03-14T08:55:50.606Z</updated>
<content type="html"><![CDATA[<h2 id="账号及秘钥申请"><a href="#账号及秘钥申请" class="headerlink" title="账号及秘钥申请"></a>账号及秘钥申请</h2><p>不用注册账号，不用验证手机号码，9.9一步到位了！1分钟搞定</p><p>一个可以购买 OpenAI API Key 的服务：<a href="https://openaikey.xyz/">https://openaikey.xyz</a>，还聚合了许多能够使用 API Key 的工具</p><blockquote><p><a href="https://twitter.com/DottChen/status/1633765795946987522">Dott 在 Twitter: “发现一个可以购买 OpenAI API Key 的服务：https://t.co/dgR9N6W2J8，还聚合了许多能够使用 API Key 的工具。 现在直接买 Key 的成本比付费 API 还低，买了二十个用来刷 GPT Index 打造个人智脑…… 推荐一下给国内注册账号有困难但又想使用基于 API Key 的服务的同学，挺方便。” / Twitter</a></p></blockquote><p>直接购买了一个9.9，购买流程很顺畅，付款后直接发邮件，通过邮件中的 license key 在网站中转换出新注册的 openai的账号和 API Key，可以通过邮件直接找回账号信息和密码</p><p><img src="http://upic.vivife.com/uPic/TinySnap-2023-03-14-11.36.39%2520(1).png" alt="TinySnap-2023-03-14-11.36.39 (1)"></p><h2 id="官网域名使用指南"><a href="#官网域名使用指南" class="headerlink" title="官网域名使用指南"></a>官网域名使用指南</h2><p>API 调用的官方域名是这样的：<a href="https://api.openai.com/v1/chat/completions">https://api.openai.com/v1/chat/completions</a> ，国内调用会超时的，所以要用其他方法优化下</p><ol><li><p><a href="https://github.com/noobnooc/noobnooc/discussions/9">使用 Cloudflare Workers 解决 OpenAI 和 ChatGPT 的 API 无法访问的问题 · noobnooc/noobnooc · Discussion #9 (github.com)</a></p><blockquote><p>该方案的主要思路是使用 Cloudflare 的 Workers 来代理 OpenAI 的 API 地址，配合自己的域名即可在境内实现访问。因为 Cloudflare Workers 有每天免费 10 万次的请求额度，也有可以免费注册的域名，所以几乎可以说是零成本。而且该方法理论上支持所有被认证的网站，而不只是 OpenAI</p></blockquote><p>正好自己 blog 部署到了 Cloudflare 上了，直接按教程配置了一个专门的域名openai.a.com 作为 api 的代理，在苹果手机上 配置 chatGPT-Siri 项目时候使用了这个域名，证明可用</p></li></ol><p>有了 API Key 和代理域名 openai.a.com 就可以极速入手使用下面的的开源项目了，总共分两步</p><ol><li>修改 API Key 成自己的</li><li>修改 请求api的域名为自己的代理域名 openai.a.com</li><li>运行项目</li></ol><h2 id="相关APP-服务"><a href="#相关APP-服务" class="headerlink" title="相关APP 服务"></a>相关APP 服务</h2><h3 id="在线服务"><a href="#在线服务" class="headerlink" title="在线服务"></a>在线服务</h3><ol><li><a href="https://chat.theb.ai/#/chat/1002">BAI Chat (theb.ai)</a></li></ol><h3 id="开源"><a href="#开源" class="headerlink" title="开源"></a>开源</h3><ol><li><p><a href="https://github.com/cosin2077/chaty/blob/main/README.zh-CN.md">Chaty – 一站式chatGPT百宝箱 chaty/README.zh-CN.md at main · cosin2077/chaty · GitHub</a></p><blockquote><p>Chaty可以让您：</p><ul><li>拥有一个chatGPT命令行机器人;</li><li>部署ChatGPT Web服务;</li><li>部署基于ChatGPT的NodeJS API 服务;</li><li>部署微信ChatGPT机器人;</li><li>部署Telegram ChatGPT机器人;</li><li>部署Discord ChatGPT机器人;</li><li>更多服务正在不断开发中!</li></ul><p>让Chaty助力您探索ChatGPT的世界。</p></blockquote><p>对前端很友好，会npm就可以了</p><p>设置自动的代理域名无效，后续再看下</p></li><li><p><a href="https://github.com/Yue-Yang/ChatGPT-Siri/blob/main/README-zh_CN.md">ChatGPT-Siri/README-zh_CN.md at main · Yue-Yang/ChatGPT-Siri · GitHub</a></p><p>苹果手机上通过捷径 来使用 chatGPT，编辑这个捷径</p><pre><code> 1. 配置 API Key 2. 修改api.openai.com 改成自己申请的代理 openai.a.com</code></pre><p>保存后点击捷径就会弹出 输入框了</p><p><img src="http://upic.vivife.com/uPic/15811678782879_.pic.jpg" alt="15811678782879_.pic"></p><p>后续：语音调起还没学会</p></li></ol>]]></content>
<summary type="html"><h2 id="账号及秘钥申请"><a href="#账号及秘钥申请" class="headerlink" title="账号及秘钥申请"></a>账号及秘钥申请</h2><p>不用注册账号，不用验证手机号码，9.9一步到位了！1分钟搞定</p>
<p>一个可以购买 OpenA</summary>
</entry>
<entry>
<title>MacBook_Pro_2015硬盘扩容升级</title>
<link href="https://www.sumaolin.com/2022/07/10/MacBook-Pro-2015%E7%A1%AC%E7%9B%98%E6%89%A9%E5%AE%B9%E5%8D%87%E7%BA%A7/"/>
<id>https://www.sumaolin.com/2022/07/10/MacBook-Pro-2015%E7%A1%AC%E7%9B%98%E6%89%A9%E5%AE%B9%E5%8D%87%E7%BA%A7/</id>
<published>2022-07-10T08:58:10.000Z</published>
<updated>2022-07-10T09:41:49.000Z</updated>
<content type="html"><![CDATA[<p>B 站看了个 自己动手拆卸 MacBook 笔记本换固态硬盘的的视频，看到手边自己的 MacBook Pro 2015 手痒难耐了，下单配件：SSD 固态硬盘，硬盘接口转接卡，笔记本电池等！开工</p><span id="more"></span><p>电脑硬件配置：<a href="https://support.apple.com/kb/SP715?viewlocale=zh_CN&locale=zh_CN">MacBook Pro (Retina 显示屏 13 英寸, 2015 年初) - 技术规格 (中国) (apple.com)</a></p><h3 id="安装硬盘"><a href="#安装硬盘" class="headerlink" title="安装硬盘"></a>安装硬盘</h3><ol><li><p><a href="https://www.bilibili.com/video/BV1HE411M7z2/">MacBook Pro 2013-2015 款 15 英寸更换 SSD 固态硬盘_哔哩哔哩_bilibili</a></p></li><li><p><a href="https://www.bilibili.com/video/BV1Va4y1v7oP/?spm_id_from=autoNext">【DIY】2013 - 2015 MacBook Pro NVMe SSD 升级详细教程_哔哩哔哩_bilibili</a> <strong>推荐</strong></p><ol><li>Mac 系统的安装盘制作</li><li>需要准备的转接头</li><li>提到了更换后 SSD 的速度可以打到 1000M，更换前是 600M，性能提升不错</li></ol><p>晚上开电脑看下配置，买个 SSD 来试试</p></li><li><p><a href="https://www.bilibili.com/video/BV1D54y1D78z?spm_id_from=333.999.0.0">【DIY】如何把丐版 MacBook Pro 变高配_哔哩哔哩_bilibili</a></p><p>这个要买主板更换了，感觉不合适还是买 SSD 硬盘更换吧</p></li><li><p>选硬盘：<a href="https://zhuanlan.zhihu.com/p/125702799">2020 之 Macbook Pro DIY 升级 SSD 及 Time Machine 数据恢复 - 知乎 (zhihu.com)</a></p></li></ol><h4 id="预想的配件"><a href="#预想的配件" class="headerlink" title="预想的配件"></a>预想的配件</h4><ol><li>SSD 硬盘：<a href="https://item.jd.com/100018768506.html">【三星 980】三星（SAMSUNG）1TB SSD 固态硬盘 M.2 接口(NVMe 协议) 980（MZ-V8V1T0BW）【行情 报价 价格 评测】-京东 (jd.com)</a> 799</li><li>转接口：<a href="https://item.taobao.com/item.htm?spm=a230r.1.14.217.20ad9190VqoSsd&id=586085643504&ns=1&abbucket=16#detail">NVMe PCIe M.2 转苹果 2013 2014 2015 款 Macbook Air Pro SSD 转接卡-淘宝网 (taobao.com)</a> 15</li><li>硬盘盒子：<a href="https://item.jd.com/100024210022.html#crumb-wrap">【绿联 10902】绿联 M.2 NVMe 移动硬盘盒 Type-C3.2 接口 SSD 固态硬盘盒子笔记本电脑 M2 全铝外置盒 10902【行情 报价 价格 评测】-京东 (jd.com)</a> 99</li></ol><h3 id="电池更换"><a href="#电池更换" class="headerlink" title="电池更换"></a>电池更换</h3><ol><li><a href="https://post.smzdm.com/p/a992k5ep/">缝缝补补再三年：MacBook Pro 13 寸 2015 款更换电池【保姆级教程】<em>笔记本电脑</em>什么值得买 (smzdm.com)</a></li><li><a href="https://post.smzdm.com/p/awxlmrwk/">给步入老年的 macbook pro 做个大手术，换个“肾”（电池更换）<em>笔记本电脑</em>什么值得买 (smzdm.com)</a></li><li><a href="https://post.smzdm.com/p/awxl4xl4/">电池起鼓如同炸弹！Macbook Pro 更换电池详解及苹果官方使用建议<em>笔记本电脑</em>什么值得买 (smzdm.com)</a></li><li><a href="https://post.smzdm.com/p/a78zn859/">MacbookPro 2015 原装电池鼓了包，自己动手换电池 <em>电池</em>什么值得买 (smzdm.com)</a></li></ol><p>选的电池： <a href="https://item.jd.com/55306988976.html">京歌宝 苹果笔记本电池 MacBook Pro A1502 电脑电池 A1493A1582 电池 13.3 英寸【图片 价格 品牌 报价】-京东 (jd.com)</a> 328</p><h3 id="回顾"><a href="#回顾" class="headerlink" title="回顾"></a>回顾</h3><p>09 号开始上班了，前面三天在家开始收到了快递来的电池，SSD 固态硬盘，硬盘盒子。没有固态硬盘转接卡，所以只能先换电池了，结果换好电池后，触摸板和键盘失灵了，咨询了电池商家的客服，说是触摸板的排线因为换电池时候弯折过度失灵了，重新淘宝下单了触摸板排线，只能等硬盘接口转接卡和触摸板排线了。中间看买的固态硬盘价格降价了，没法保价就退了。重新思考了下，选了 512G 的固态和 2T 的机械硬盘，机械硬盘用来 TimeMachine 备份系统，这样不用重装系统了，直接用 TimeMachine 恢复就可以了。</p><p>周五把 Mac Pro 也带回家了，可以备份系统，直接把这边高版本的系统恢复到 MacBook Pro 上去</p><p>周六先收到了触摸板排线，就开始折腾替换排线，按电池的客服指导断开电池连接后更换了排线，电源链接那块扣的太紧，要通过卡片插入到缝隙中把三面往上撬开才容易扣出来，直接扣很费劲。更换排线后，重新安装电池链接，开机重试后键盘还不起作用，电池的客服小哥又指导重新安装下键盘排线的连接，就可以了，这时候就剩硬盘接口转接卡和两个硬盘了</p><p>周日上午来硬盘先送到了，所以就先备份了 Mac Pro 和 MacBook Pro 两台机器上的系统，机械硬盘格式化分区后，选择一个分区为 TimeMachine 的备份分区，开始备份就好了，就是时间挺长的，MacBook Pro 的 110G 系统备份 2-3 个小时，Mac Pro 系统 220G 吧也备份了三个多小时（估计不准，经历了第一个时间备份后就没有在意了玩游戏去了）</p><p>下午硬盘接口转接卡来了，谨慎起见还是先断开了电源链接，通过转接卡把新固态硬盘安装上去了，重新链接电源接口，开机启动都 OK，安装好后盖。插上备份系统的硬盘，按着 option 键 + 开机键，就进入恢复系统界面，可以选择从硬盘恢复系统，不过这时候找不到安装好的固态硬盘，是因为硬盘系统是没有格式化的，差点就重新拆机拿出来装到硬盘盒里去 Mac Pro 那边格式化去，还好恢复系统里面有硬盘管理工具，直接格式化加分区就好了，然后通过恢复到固态硬盘就好了。恢复时间也挺长的，不过恢复好了就是原来的环境设置了，不用重新安装需要的 APP 了</p><p>从 06.04 看视频后，开始动心动念了，后续折腾了一周 到 06.12 才大体安装好，谢谢 买来电池的那家客服小哥，提供了后续的技术咨询服务！</p><p>最终的更换配件列表</p><ol><li> 电池： <a href="https://item.jd.com/55306988976.html">京歌宝 苹果笔记本电池 MacBook Pro A1502 电脑电池 A1493A1582 电池 13.3 英寸【图片 价格 品牌 报价】-京东 (jd.com)</a> 价格：328</li><li> SSD 固态硬盘：<a href="https://item.jd.com/100010130139.html">【雷克沙 NM620】雷克沙（Lexar）NM620 512G SSD 固态硬盘 M.2 接口（NVMe 协议）四通道高速 PCle 迅捷读写 办公游戏性能再升级【行情 报价 价格 评测】-京东 (jd.com)</a> 319</li><li> 转接口：<a href="https://detail.tmall.com/item.htm?id=631924720504&spm=a1z09.2.0.0.3b352e8dF3TKJt&_u=229svo2ce25">Acasis m.2 NVME 硬盘 SSD 转苹果笔记本 2013 2014 2015 2016 2017MacbookPro AIR 苹果硬盘转接卡固态转接头-tmall.com 天猫</a> 11</li><li> 机械硬盘：<a href="https://item.jd.com/10040776776977.html">【希捷（SEAGATE）酷鱼 2.5 英寸 SATA】希捷（SEAGATE） 笔记本硬盘 酷鱼机械硬盘一体机 2.5 英寸 SATA3.0 128MB 【ST2000LM015】2TB【行情 报价 价格 评测】-京东 (jd.com)</a> 393</li><li> 触摸板排线：<a href="https://item.taobao.com/item.htm?spm=a1z09.2.0.0.3b352e8dF3TKJt&id=627952423568&_u=229svo289e0">苹果原装拆触摸板排线 A1466A1502A1398A1706A1707A1708A1989A1990-淘宝网 (taobao.com)</a> 15</li><li> 硬盘盒子：<a href="https://item.jd.com/100024210022.html#crumb-wrap">【绿联 10902】绿联 M.2 NVMe 移动硬盘盒 Type-C3.2 接口 SSD 固态硬盘盒子笔记本电脑 M2 全铝外置盒 10902【行情 报价 价格 评测】-京东 (jd.com)</a> 83</li></ol><p>总计花费：1149 ，硬盘盒子原来是想替换下来的 SSD 按装进去当随身硬盘用的，发现接口不能用，看来还得买个转接卡才行了，弄完了月底使用来看没什么大问题，才开始感觉有点卡顿，后面就挺流畅的了</p>]]></content>
<summary type="html"><p>B 站看了个 自己动手拆卸 MacBook 笔记本换固态硬盘的的视频，看到手边自己的 MacBook Pro 2015 手痒难耐了，下单配件：SSD 固态硬盘，硬盘接口转接卡，笔记本电池等！开工</p></summary>
<category term="Mac" scheme="https://www.sumaolin.com/tags/Mac/"/>
</entry>
<entry>
<title>Mac系统配置前端开发环境</title>
<link href="https://www.sumaolin.com/2021/08/15/Mac%E7%B3%BB%E7%BB%9F%E9%85%8D%E7%BD%AE%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83/"/>
<id>https://www.sumaolin.com/2021/08/15/Mac%E7%B3%BB%E7%BB%9F%E9%85%8D%E7%BD%AE%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83/</id>
<published>2021-08-15T15:01:00.000Z</published>
<updated>2022-01-20T04:12:09.024Z</updated>
<content type="html"><![CDATA[<p>二手的顶配 Mac Pro 垃圾桶到货了，新系统从零开始配置开发环境，包括终端软件改为 iTerm2，bash 改为 zsh, 并且安装 oh-my-zsh</p><span id="more"></span><h3 id="必备软件"><a href="#必备软件" class="headerlink" title="必备软件"></a>必备软件</h3><ol><li><p><a href="https://u.tools/">uTools</a> Alfred 替代品，跨系统，Linux Mac Windows 都可以，中国人写的，插件也很实用</p><p>软件免费，插件免费，跨平台同步配置是首付的，很良心了</p><p>常用的 插件</p><p>vscode ：查找 vscode 项目历史，直接通过 vscode 打开 项目</p><p>Tinypng: 直接压缩图片并可以替换原有的文件</p></li><li><p><a href="https://juejin.cn/post/6844904178075058189">iTerm2 + Oh My Zsh</a></p><p>开发 50%以上的时间和终端打交道的，弄个高颜值好用的终端还是第一需求的</p><p>下载 iTerm 软件安装，配置 oh-my-zsh ，设置 iterm 软件的 sh 默认为 zsh，设置 zsh 的 theme 皮肤，和 iTerm 中 字符集</p><p>安装 Homebrew，这样安装软件时候直接 命令行 <code>brew install</code></p></li><li><p>Git 的配置</p><p><code>ssh-keygen</code> 生产公钥秘钥，配置公钥到 git 线上服务上（github，gitee，gitlab)</p><p>不同 git 服务器下载自动设置不同的用户名和邮箱 : <a href="https://segmentfault.com/a/1190000013727784">利用 Git-hook 自动配置不同仓库的用户信息</a></p></li><li><p><a href="https://code.visualstudio.com/">vscode</a></p><p>直接下载安装了，安装插件 <a href="https://github.com/shanalikhan/code-settings-sync.git">Settings Sync</a> 添加 Gist 同步不同电脑上的 vscode 配置</p></li><li><p><a href="https://github.com/nvm-sh/nvm">nvm</a> nodejs 版本管理工具，前端开发离不开的</p><p>安装起那么开发环境 <code>brew install nvm</code></p><p>npm 配置下载源 registry <code>npm config set registry https://registry.npm.taobao.org</code></p></li><li><p><a href="https://www.spectacleapp.com/">Spectacle</a> 的出现让调整窗口，分屏变得与 windows 一样简单</p><p>多窗口管理工具，常用 commond + option + 左右方向键，让当前窗口占据屏幕的左右一半屏幕</p></li><li><p><a href="https://www.jianshu.com/p/40b71d939a05">MAC Command 键与 Control 键调换方案</a> <strong>推荐</strong></p><p>试了半天，我很特殊电脑上是 command 的 option 进行了互调，笔记本电脑上用习惯了，现在调成一样的</p><p>以前从 windows 系统转过来的是很不习惯，外接键盘鼠标分别进行了设置，触摸板和鼠标又区别进行设置</p><blockquote><p>window 上使用的一套罗技的鼠标和键盘，之间把 usb 发射器插入 Mac 来切换输入设备，Mac 下的默认键盘映射有点 Mac 笔记本自带的布局不一样的。通过如下设置：</p><ol><li><em>键盘</em> “系统偏好设置”—“键盘”—“修饰键” 将键盘上的 Windows 映射成 option 键，alt 键映射成苹果键</li><li>鼠标 “系统偏好设置”—“鼠标”—“滚动方向：自然” 勾选取掉，这样就和 window 下一样自然使用鼠标了</li></ol><p>鼠标设置优点烦恼：用 Mac 笔记本的时候触摸板的上下方向又反了，用外交设备的时候只能用外接设备，用笔记本的时候用要再改变回来，<code>2017.12.12</code> 更新： <a href="https://pilotmoon.com/scrollreverser/">SCROLL REVERSER</a> 解决了这个问题</p></blockquote></li></ol><h3 id="选装软件"><a href="#选装软件" class="headerlink" title="选装软件"></a>选装软件</h3><ol><li><p><a href="https://typora.io/">Typora</a> Markdown 写作工具</p><blockquote><p>以前用过马克飞象觉得快捷键挺好用的，不过这款 App 直接所见即所得模式，一会查询下相关的快捷键，更喜欢的还有 theme 的选择，默认竟然是 GitHub 的</p></blockquote></li><li><p><a href="https://matthewpalmer.net/vanilla/">Vanilla</a></p><blockquote><p>Hide menu bar icons on your Mac</p></blockquote><p>Mac 工具栏 icons 管理工具，可以选择那些软件 icon 隐藏和展示</p></li><li><p><a href="https://www.jianguoyun.com/">坚果云</a> 不同机器间同步文件用的，免费用户有流量限制，平时同步文档用，已经保存软件安装包用</p></li><li><p><a href="https://www.mowglii.com/itsycal/">Itsycal</a> 好用的通知栏日历软件</p></li><li><p><a href="https://fliqlo.com/">fliqlo</a> 屏保工具</p></li><li><p><a href="https://www.rescuetime.com/">RescueTime</a> 时间记录工具</p><p>记录每个软件上使用时间，早在 Mac 系统的屏幕使用时间功能，并且可以 web 查看统计表格</p></li><li><p><a href="https://pomotodo.com/intl/zh-CN/">番茄土豆</a> 时间管理工具</p></li><li><p><a href="https://wakatime.com/">wakatime</a> 有 vscode 插件，可以统计每个项目上的使用时间</p></li></ol><h3 id="参考资料"><a href="#参考资料" class="headerlink" title="参考资料"></a>参考资料</h3><ol><li><p><a href="https://github.com/bestswifter/blog/blob/master/articles/efficient-mac.md">如何大幅度提高 Mac 开发效率</a></p></li><li><p><a href="https://support.apple.com/zh-cn/HT201236">Mac 键盘快捷键</a></p></li><li><p><a href="https://github.com/bestswifter/macbootstrap">macbootstrap</a> A bootstrap script for new Mac</p><blockquote><p>对新 mac 设置脚步，不用在搜索教程一步步的设置啦，一行命令搞定，并且详细讲解了设置的细节</p></blockquote></li><li><p><a href="https://www.zhihu.com/question/35050387">macOS 有哪些冷门但是一但发现就无法自拔的软件？</a></p><p><a href="https://www.mowglii.com/itsycal/">Itsycal</a> 好用的通知栏日历软件</p><p><a href="https://macwk.com/soft/pdf-expert">PDF Expert</a> PDF 工具</p><p><a href="https://fliqlo.com/">fliqlo</a> 屏保工具</p><p><a href="https://neededapps.com/screentolayers/">ScreenToLayers</a> 屏幕截图保存为 PSD</p><p><a href="https://macwk.com/soft/ipack">iPack</a> 解压缩软件，不用压缩 mac 特有的文件</p><p><a href="http://www.hammerspoon.org/">Hammerspoon</a> lua 脚步定制自动化工具</p><p>可以自己看找自己需要的软件</p></li></ol><h3 id="顶配的-Mac-Pro-配置"><a href="#顶配的-Mac-Pro-配置" class="headerlink" title="顶配的 Mac Pro 配置"></a>顶配的 Mac Pro 配置</h3><ol><li><p><a href="https://support.apple.com/kb/SP697?locale=zh_CN">Mac Pro（2013 年末) - 技术规格</a></p><p>收到自己的二手顶配 Mac Pro 了 128G 内存，1T M2 硬盘，双 D7 6G 显卡</p><p>处理器查了下 ： <a href="https://ark.intel.com/content/www/cn/zh/ark/products/75283/intel-xeon-processor-e5-2697-v2-30m-cache-2-70-ghz.html">英特尔 ® 至强 ® 处理器 E5-2697 v2</a></p><p>疑惑的是内存明明是 1866Mhz 的 32G 内存条，系统要降到 1066Mhz 区使用，网上说是为了散热设置的，回去拆下两个内存条来看下 能不能提升 到 1866Mzh，看文章：<a href="http://blog.chinaunix.net/uid-14214482-id-3220464.html">DDR3 内存带宽计算</a> 这样读写速度带宽就能提升 ，不过 CPU 中限制了 <code>最大内存带宽59.7 GB/s</code></p><blockquote><p>测试了拆下 2 个 32G 内存条，标准的 1066mHz，没法升高到 1866 Hz，感觉还是 128 内存安装在上面吧</p></blockquote><p>硬盘感觉也要高了，现在监测的 写 1400M，读 1800M，当时让卖家加的：<a href="https://item.jd.com/100002183461.html">三星（SAMSUNG）1TB SSD 固态硬盘 M.2 接口(NVMe 协议) 970 EVO Plus（MZ-V7S1T0B）</a> ，R 3500M，W 3300M。感觉也就一半的性能用到了，后面其他机器用到了，可以换下来！</p><p>替换： <a href="https://item.jd.com/100005185781.html">雷克沙（Lexar）NM610 1TB M.2 NVMe SSD 固态硬盘 PCle3.0 四通道(NM610-1TB)</a> 599 价格</p><p>多花了 1 倍的价格</p></li><li><p><a href="https://www.feng.com/post/12981301"> 这个 Mac Pro 垃圾桶值得入手吗</a></p><p>哈哈，讨论了一周，<a href="https://browser.geekbench.com/macs/mac-pro-late-2013-intel-xeon-e5-2697-v2-2-7-ghz-12-cores">还是看数据性能</a>，感觉 还是 m1 芯片的 mac mini 性能高，比较各种硬件的标准 7 年提审了很多，5 纳米的制造工艺也是很有优势的</p></li></ol>]]></content>
<summary type="html"><p>二手的顶配 Mac Pro 垃圾桶到货了，新系统从零开始配置开发环境，包括终端软件改为 iTerm2，bash 改为 zsh, 并且安装 oh-my-zsh</p></summary>
<category term="F2E" scheme="https://www.sumaolin.com/categories/F2E/"/>
<category term="Mac" scheme="https://www.sumaolin.com/categories/F2E/Mac/"/>
<category term="F2E" scheme="https://www.sumaolin.com/tags/F2E/"/>
<category term="Mac" scheme="https://www.sumaolin.com/tags/Mac/"/>
<category term="iTerm" scheme="https://www.sumaolin.com/tags/iTerm/"/>
</entry>
<entry>
<title>Typescript cheatSheet</title>
<link href="https://www.sumaolin.com/2018/12/31/Typescript-cheatSheet/"/>
<id>https://www.sumaolin.com/2018/12/31/Typescript-cheatSheet/</id>
<published>2018-12-31T09:34:14.000Z</published>
<updated>2022-01-20T04:12:09.025Z</updated>
<content type="html"><![CDATA[<p>想学 Typescript 好久啦，一直没行动，从看过的文章写个 cheatSheet 开始吧，以后用到的时候好快速复习！</p><span id="more"></span><p>一直想学，就一直，一直，一直想，并没学！双十一耗的掘金小册的羊毛，买了本关于Typescript的小册： <a href="https://juejin.im/book/5da08714518825520e6bb810">深入浅出TypeScript：从基础知识到类型编程</a> ，想着学起来吧，希望不是资料收集癖犯了！</p><h2 id="Reference"><a href="#Reference" class="headerlink" title="Reference"></a>Reference</h2><h3 id="电子书"><a href="#电子书" class="headerlink" title="电子书"></a>电子书</h3><ol><li><a href="https://juejin.im/book/5da08714518825520e6bb810">深入浅出TypeScript：从基础知识到类型编程</a></li><li><a href="https://welearnmore.gitbook.io/typescript-book/">《浅谈 TypeScript》</a></li><li><a href="https://jkchao.github.io/typescript-book-chinese/">TypeScript Deep Dive 中文版</a> 翻译 《深入理解TypeScript》</li></ol><h3 id="视频"><a href="#视频" class="headerlink" title="视频"></a>视频</h3><ol><li><a href="https://nodelover.me/course/ts-basic">TypeScript 精通指南</a></li></ol><h3 id="文章"><a href="#文章" class="headerlink" title="文章"></a>文章</h3><ol><li><a href="https://github.com/semlinker/awesome-typescript">Awesome TypeScript</a> Typescipt文章的收集</li><li><a href="https://github.com/Suremotoo/ts-axios-doc">黄奕老师-ts重构axios文档</a></li><li><a href="https://github.com/leer0911/myXHR/blob/master/doc/README.md">TypeScript 重构 Axios 全攻略</a></li><li><a href="https://juejin.im/post/5d906269f265da5ba7451b02">[译]axios 是如何封装 HTTP 请求的</a></li><li><a href="https://juejin.im/post/5ce0d562f265da1bc23f4813">TypeScript 从听说到入门（上篇）</a></li><li><a href="https://juejin.im/post/5ce751aef265da1bbc6faf30">TypeScript 从听说到入门（下篇）</a></li><li><a href="https://neuroforge.de/typescript-how-to-convert-a-page-based-rest-api-to-a-data-stream/">Typescript: How to convert a Page-Based REST API into a data stream</a></li></ol>]]></content>
<summary type="html"><p>想学 Typescript 好久啦，一直没行动，从看过的文章写个 cheatSheet 开始吧，以后用到的时候好快速复习！</p></summary>
<category term="F2E" scheme="https://www.sumaolin.com/categories/F2E/"/>
<category term="Typescript" scheme="https://www.sumaolin.com/tags/Typescript/"/>
<category term="CheatSheet" scheme="https://www.sumaolin.com/tags/CheatSheet/"/>
<category term="beginer" scheme="https://www.sumaolin.com/tags/beginer/"/>
</entry>
<entry>
<title>小程序</title>
<link href="https://www.sumaolin.com/2017/01/10/%E5%B0%8F%E7%A8%8B%E5%BA%8F/"/>
<id>https://www.sumaolin.com/2017/01/10/%E5%B0%8F%E7%A8%8B%E5%BA%8F/</id>
<published>2017-01-10T10:01:48.000Z</published>
<updated>2022-01-20T04:12:09.028Z</updated>
<content type="html"><![CDATA[<p>昨天小程序正式上线了，上俩月来了各种折腾 react 相关的项目，现在有时间来看看了！</p><span id="more"></span><h2 id="2017-01-10"><a href="#2017-01-10" class="headerlink" title="2017-01-10"></a>2017-01-10</h2><p>开始的工作资料看吧，微信出品被各种热捧，没正式发布前就各种小程序的资料了，不过还是要看各种官方资料啊</p><h3 id="官方资料列表"><a href="#官方资料列表" class="headerlink" title="官方资料列表"></a>官方资料列表</h3><ol><li><p><a href="http://daxue.qq.com/content/content/id/3109">张小龙:小程序将于 1 月 9 日上线</a></p><blockquote><p>大神对小程序的理念的解读，能更好的列举小程序的应用场景！</p></blockquote></li><li><p><strong>官方教程</strong> <a href="https://mp.weixin.qq.com/debug/wxadoc/dev/?t=201715">简易教程 · 小程序</a></p></li><li><p><a href="http://www.w3cschool.cn/weixinapp/9wou1q8j.html">微信小程序开发教程手册文档</a></p></li></ol><h2 id="2017-01-11"><a href="#2017-01-11" class="headerlink" title="2017-01-11"></a>2017-01-11</h2><h3 id="开发工具-（工欲善其事必先利其器吗！）"><a href="#开发工具-（工欲善其事必先利其器吗！）" class="headerlink" title="开发工具 （工欲善其事必先利其器吗！）"></a>开发工具 （工欲善其事必先利其器吗！）</h3><ol><li><a href="https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201715">开发者工具</a></li></ol><blockquote><p><strong>官方</strong></p></blockquote><ol start="2"><li><a href="https://chemzqm.github.io/wept/">微信小程序 web 端实时运行工具</a></li></ol><blockquote><p>支持热更新，可以生成二维码到手机上预览，作者的本意是：<code>因为 WEPT 只是调试 UI 用的，而不是组件库</code> 做 UI 的调试工作</p></blockquote><ol start="3"><li><a href="https://segmentfault.com/a/1190000007132719">用 vscode 开发微信小程序</a></li></ol><blockquote><p>还不成熟吧，支持代码提示，预览功能 <a href="https://marketplace.visualstudio.com/items?itemName=qinjia.vscode-wechat">vscode-wechat</a>, 希望以后能有更多功能！</p></blockquote><h2 id="2017-01-13"><a href="#2017-01-13" class="headerlink" title="2017-01-13"></a>2017-01-13</h2><h3 id="开发工具"><a href="#开发工具" class="headerlink" title="开发工具"></a>开发工具</h3><ol><li><a href="https://github.com/maichong/labrador">微信小程序模块化开发框架</a></li></ol><blockquote><p>对复杂项目的支持 ES7</p></blockquote><h2 id="2017-02-27"><a href="#2017-02-27" class="headerlink" title="2017-02-27"></a>2017-02-27</h2><ol><li><a href="http://www.jianshu.com/p/e7fd6ae1429b">微信小程序快速开发，两周内从创意到上线</a> (5 好评)</li></ol>]]></content>
<summary type="html"><p>昨天小程序正式上线了，上俩月来了各种折腾 react 相关的项目，现在有时间来看看了！</p></summary>
<category term="F2E" scheme="https://www.sumaolin.com/categories/F2E/"/>
<category term="F2E" scheme="https://www.sumaolin.com/tags/F2E/"/>
<category term="f2e" scheme="https://www.sumaolin.com/tags/f2e/"/>
<category term="小程序" scheme="https://www.sumaolin.com/tags/%E5%B0%8F%E7%A8%8B%E5%BA%8F/"/>
</entry>
<entry>
<title>readList 201608</title>
<link href="https://www.sumaolin.com/2016/08/08/readList-201608/"/>
<id>https://www.sumaolin.com/2016/08/08/readList-201608/</id>
<published>2016-08-08T06:59:02.000Z</published>
<updated>2022-01-20T04:12:09.027Z</updated>
<content type="html"><![CDATA[<p>八月份的文章荟萃</p><span id="more"></span><h2 id="2016-08-08"><a href="#2016-08-08" class="headerlink" title="2016-08-08"></a>2016-08-08</h2><ol><li><a href="http://www.jianshu.com/p/d857c3ff78d6">如何让你的网页打开速度降低到1s内</a></li><li><a href="http://www.jianshu.com/p/35e20bb361d0#">大公司里怎样开发和部署前端代码？(附实践方案)</a></li><li><a href="https://github.com/fouber/blog/issues/6">大公司里怎样开发和部署前端代码？</a> github相关的讨论值得一看</li><li><a href="https://github.com/Carrotzpc/docker_web_app">高质量Node.js微服务的编写和部署</a> docker相关的node实践</li></ol><h2 id="2016-08-09"><a href="#2016-08-09" class="headerlink" title="2016-08-09"></a>2016-08-09</h2><ol><li><a href="http://stackoverflow.com/questions/16330404/how-to-remove-remote-origin-from-git-repo">how to remove remote origin from git repo</a></li></ol><blockquote><p><code>git remote set-url git:your-url;</code><br>‘git remote show origin’</p></blockquote>]]></content>
<summary type="html"><p>八月份的文章荟萃</p></summary>
<category term="ReadList" scheme="https://www.sumaolin.com/categories/ReadList/"/>
<category term="readList" scheme="https://www.sumaolin.com/tags/readList/"/>
</entry>
<entry>
<title>React课程学习</title>
<link href="https://www.sumaolin.com/2016/07/06/React%E8%AF%BE%E7%A8%8B%E5%AD%A6%E4%B9%A0/"/>
<id>https://www.sumaolin.com/2016/07/06/React%E8%AF%BE%E7%A8%8B%E5%AD%A6%E4%B9%A0/</id>
<published>2016-07-06T06:38:55.000Z</published>
<updated>2022-01-20T04:12:09.025Z</updated>
<content type="html"><![CDATA[<p><a href="/2016/06/06/hackathon-blog/">上一篇</a>是关于react 资料的搜集，内容太多，后面参照hackathon-blog 中给出的关于react的资料: <a href="http://guoyongfeng.github.io/idoc/index.html">React课程学习</a>, 整个资料循序渐进，挺易懂的！关于学习过程中的问题单开一章</p><span id="more"></span><h2 id="2016-06-29"><a href="#2016-06-29" class="headerlink" title="2016-06-29"></a>2016-06-29</h2><h3 id="1-Error"><a href="#1-Error" class="headerlink" title="1. Error:"></a>1. Error:</h3><figure class="highlight bash"><table><tr><td class="code"><pre><code class="hljs bash">Hash: 396f0bfb9d565b6f60f0<br>Version: webpack 1.13.1<br>Time: 52ms<br> [0] ./src/index.js 0 bytes [built] [failed]<br><br>ERROR <span class="hljs-keyword">in</span> ./src/index.js<br>Module parse failed: F:\Users\react\webpack-demo\src\index.js Unexpected token (9:6)<br>You may need an appropriate loader to handle this file <span class="hljs-built_in">type</span>.<br>SyntaxError: Unexpected token (9:6)<br> at Parser.pp.raise (F:\Users\react\webpack-demo\node_modules\acorn\dist\acorn.js:923:13)<br> at Parser.pp.unexpected (F:\Users\react\webpack-demo\node_modules\acorn\dist\acorn.js:1490:8)<br> at Parser.pp.parseExprAtom (F:\Users\react\webpack-demo\node_modules\acorn\dist\acorn.js:333:12)<br> at Parser.pp.parseExprSubscripts (F:\Users\react\webpack-demo\node_modules\acorn\dist\acorn.js:228:19)<br> at Parser.pp.parseMaybeUnary (F:\Users\react\webpack-demo\node_modules\acorn\dist\acorn.js:207:17)<br> at Parser.pp.parseExprOps (F:\Users\react\webpack-demo\node_modules\acorn\dist\acorn.js:154:19)<br> at Parser.pp.parseMaybeConditional (F:\Users\react\webpack-demo\node_modules\acorn\dist\acorn.js:136:19)<br> at Parser.pp.parseMaybeAssign (F:\Users\react\webpack-demo\node_modules\acorn\dist\acorn.js:112:19)<br> at Parser.pp.parseParenAndDistinguishExpression (F:\Users\react\webpack-demo\node_modules\acorn\dist\acorn.js:376:28)<br> at Parser.pp.parseExprAtom (F:\Users\react\webpack-demo\node_modules\acorn\dist\acorn.js:307:19)<br> at Parser.pp.parseExprSubscripts (F:\Users\react\webpack-demo\node_modules\acorn\dist\acorn.js:228:19)<br> at Parser.pp.parseMaybeUnary (F:\Users\react\webpack-demo\node_modules\acorn\dist\acorn.js:207:17)<br> at Parser.pp.parseExprOps (F:\Users\react\webpack-demo\node_modules\acorn\dist\acorn.js:154:19)<br> at Parser.pp.parseMaybeConditional (F:\Users\react\webpack-demo\node_modules\acorn\dist\acorn.js:136:19)<br> at Parser.pp.parseMaybeAssign (F:\Users\react\webpack-demo\node_modules\acorn\dist\acorn.js:112:19)<br> at Parser.pp.parseExpression (F:\Users\react\webpack-demo\node_modules\acorn\dist\acorn.js:88:19)<br> at Parser.pp.parseReturnStatement (F:\Users\react\webpack-demo\node_modules\acorn\dist\acorn.js:1872:26)<br> at Parser.pp.parseStatement (F:\Users\react\webpack-demo\node_modules\acorn\dist\acorn.js:1737:19)<br> at Parser.pp.parseBlock (F:\Users\react\webpack-demo\node_modules\acorn\dist\acorn.js:2009:21)<br> at Parser.pp.parseFunctionBody (F:\Users\react\webpack-demo\node_modules\acorn\dist\acorn.js:610:22)<br> at Parser.pp.parseMethod (F:\Users\react\webpack-demo\node_modules\acorn\dist\acorn.js:579:8)<br> at Parser.pp.parseClassMethod (F:\Users\react\webpack-demo\node_modules\acorn\dist\acorn.js:2155:23)<br> at Parser.pp.parseClass (F:\Users\react\webpack-demo\node_modules\acorn\dist\acorn.js:2140:10)<br> at Parser.pp.parseStatement (F:\Users\react\webpack-demo\node_modules\acorn\dist\acorn.js:1733:19)<br> at Parser.pp.parseTopLevel (F:\Users\react\webpack-demo\node_modules\acorn\dist\acorn.js:1666:21)<br> at Parser.parse (F:\Users\react\webpack-demo\node_modules\acorn\dist\acorn.js:1632:17)<br> at Object.parse (F:\Users\react\webpack-demo\node_modules\acorn\dist\acorn.js:885:44)<br> at Parser.parse (F:\Users\react\webpack-demo\node_modules\webpack\lib\Parser.js:902:15)<br> at DependenciesBlock.<anonymous> (F:\Users\react\webpack-demo\node_modules\webpack\lib\NormalModule.js:104:16)<br> at DependenciesBlock.onModuleBuild (F:\Users\react\webpack-demo\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10)<br><br></code></pre></td></tr></table></figure><h4 id="原因是，-loaders-中-test-匹配正则错误-没有引号，-js"><a href="#原因是，-loaders-中-test-匹配正则错误-没有引号，-js" class="headerlink" title="原因是， loaders 中 test 匹配正则错误, 没有引号，/\.js$/ "></a>原因是， loaders 中 test 匹配正则错误, 没有引号，<code>/\.js$/ </code></h4><h2 id="2016-06-30"><a href="#2016-06-30" class="headerlink" title="2016-06-30"></a>2016-06-30</h2><h3 id="1-webpack-加速！"><a href="#1-webpack-加速！" class="headerlink" title="1. webpack 加速！"></a>1. webpack 加速！</h3><p>看到了 webpack resolve 模块了，添加了alias， extensions 感觉编译速度并不明显， 从7s多到5s多的样子，只是基本的模块，并没有添加逻辑代码。可是在loaders 中.js 的解析中添加了 <code>exclude: path.resolve(__dirname, 'node_modules')</code> 之后编译速度进入1s 内982ms</p><h3 id="2-webpack-添加resolve-和-解析样式文件的-loaders-style-loader-css-loader-less-loader-，报错信息：Uncaught-ReferenceError-require-is-not-defined"><a href="#2-webpack-添加resolve-和-解析样式文件的-loaders-style-loader-css-loader-less-loader-，报错信息：Uncaught-ReferenceError-require-is-not-defined" class="headerlink" title="2. webpack 添加resolve 和 解析样式文件的 loaders: [style-loader, css-loader, less-loader] ，报错信息：Uncaught ReferenceError: require is not defined"></a>2. webpack 添加resolve 和 解析样式文件的 loaders: [style-loader, css-loader, less-loader] ，报错信息：<code>Uncaught ReferenceError: require is not defined</code></h3><p>搜索相关的保存信息<code>Uncaught ReferenceError: require is not defined</code> 得到的相关 参考文章： <a href="https://segmentfault.com/q/1010000004429238">webpack打包react-dom后，浏览器报require is not defined错误?</a> </p><blockquote><p>问题解决，是我将react-dom加入到webpack的noparse 中了，删掉即可！</p></blockquote><p>同样删掉后，并不能解决问题，只好一步步注释回退到原来的状态，检测出错的模块，最后还是检测到是 webpack noParse的问题，不过webpack-dev-server 命令前要先webpack 下打包文件到build目录下，前面一直掉到这个坑里了！</p><h4 id="提示"><a href="#提示" class="headerlink" title="提示"></a>提示</h4><p><a href="http://guoyongfeng.github.io/idoc/html/React%E8%AF%BE%E7%A8%8B%E4%B8%93%E9%A2%98/Webpack%E5%9F%BA%E7%A1%80.html#t77.%E8%A7%A3%E6%9E%90%E6%A0%B7%E5%BC%8F%E6%96%87%E4%BB%B6">Webpack基础: 7.解析样式文件</a>，还没有实现热更新功能，所以修改less文件需要重新webpack才能看到结果</p><h3 id="3-react-hot-amp-webpack-dev-server-–inline-–hot-配置热更新是报错！"><a href="#3-react-hot-amp-webpack-dev-server-–inline-–hot-配置热更新是报错！" class="headerlink" title="3. react-hot & webpack-dev-server –inline –hot 配置热更新是报错！"></a>3. react-hot & webpack-dev-server –inline –hot 配置热更新是报错！</h3><figure class="highlight bash"><table><tr><td class="code"><pre><code class="hljs bash">ERROR <span class="hljs-keyword">in</span> ./src/index.js<br>Module not found: Error: Cannot resolve <span class="hljs-string">'file'</span> or <span class="hljs-string">'directory'</span> F:\Users\react\webpack-demo\node_modules\react\dist\react.js/lib/ReactMount <span class="hljs-keyword">in</span> F:\Users\react\webpack-demo\src<br> @ ./src/index.js 1:301-332<br><br>ERROR <span class="hljs-keyword">in</span> ./src/container/App.js<br>Module not found: Error: Cannot resolve <span class="hljs-string">'file'</span> or <span class="hljs-string">'directory'</span> F:\Users\react\webpack-demo\node_modules\react\dist\react.js/lib/ReactMount <span class="hljs-keyword">in</span> F:\Users\react\webpack-demo\src\container<br> @ ./src/container/App.js 1:301-332<br><br>ERROR <span class="hljs-keyword">in</span> ./src/components/Button/Button.js<br>Module not found: Error: Cannot resolve <span class="hljs-string">'file'</span> or <span class="hljs-string">'directory'</span> F:\Users\react\webpack-demo\node_modules\react\dist\react.js/lib/ReactMount <span class="hljs-keyword">in</span> F:\Users\react\webpack-demo\src\components\Button<br> @ ./src/components/Button/Button.js 1:301-332<br></code></pre></td></tr></table></figure><p>注释掉 webpack 中的resolve 的alias 模块 这样就可以解析react & react-dom 模块 通过react-hot。webpack 编译通过，可以运行<code>npm run dev</code>，浏览器打开后报错：</p><figure class="highlight bash"><table><tr><td class="code"><pre><code class="hljs bash">[HMR] Waiting <span class="hljs-keyword">for</span> update signal from WDS...<br>abstract-xhr.js:132 GET http://localhost:3000/sockjs-node/info?t=1467279375252 net::ERR_CONNECTION_REFUSED<br>client:70 [WDS] Disconnected!<br></code></pre></td></tr></table></figure><p>修改 webpack-dev-server 的port 为3000后解决，端口号要一致。 不过并没有实现热更新功能（编辑器修改，浏览器预览效果）</p><p><a href="http://guoyongfeng.github.io/idoc/html/React%E8%AF%BE%E7%A8%8B%E4%B8%93%E9%A2%98/%E4%BD%BF%E7%94%A8Webpack%E6%90%AD%E5%BB%BA%E5%BC%80%E5%8F%91%E6%80%81%E5%B7%A5%E4%BD%9C%E6%B5%81.html">使用Webpack搭建开发环境工作流</a> 关于自动刷新， 和 HMR 的配置 关于 <a href="http://www.jianshu.com/p/941bfaf13be1">WEBPACK DEV SERVER</a> 关于webpack-dev-server 的说明挺详细的，提到了关于热更新不起作用的 原因 <a href="https://github.com/gaearon/react-hot-loader/blob/master/docs/Troubleshooting.md#the-following-modules-couldnt-be-hot-updated-they-would-need-a-full-reload">The following modules couldn’t be hot updated: (They would need a full reload!)</a></p><blockquote><ol><li>webpack dev server 中提到了前后端配合的相关配置</li><li>troubleshooting.md 各种配置报错的解决办法！</li></ol></blockquote><h4 id="解决办法"><a href="#解决办法" class="headerlink" title="解决办法"></a>解决办法</h4><p>webpack 中devSever 配置中把，publicPath 去掉就OK，就可以了，</p><blockquote><p>loader 中关于js 的loader配置改成了loaders 后面是数组，如果loader 通过! 链接的话也可以</p></blockquote><h2 id="2016-07-04"><a href="#2016-07-04" class="headerlink" title="2016-07-04"></a>2016-07-04</h2><h3 id="1-React-Router-使用教程"><a href="#1-React-Router-使用教程" class="headerlink" title="1. React Router 使用教程"></a>1. <a href="http://www.ruanyifeng.com/blog/2016/05/react_router.html">React Router 使用教程</a></h3><blockquote><p>入门挺不错的！</p></blockquote><h3 id="2-React-Mixin-的前世今生"><a href="#2-React-Mixin-的前世今生" class="headerlink" title="2. React Mixin 的前世今生"></a>2. <a href="https://zhuanlan.zhihu.com/p/20361937">React Mixin 的前世今生</a></h3><blockquote><p>有点高深的内容，可以完全没读懂啊！</p></blockquote><h3 id="3-github-notetaker应用开发"><a href="#3-github-notetaker应用开发" class="headerlink" title="3. github-notetaker应用开发"></a>3. <a href="http://guoyongfeng.github.io/idoc/html/React%E8%AF%BE%E7%A8%8B%E4%B8%93%E9%A2%98/github-notetaker%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91.html">github-notetaker应用开发</a></h3><h4 id="7-接入真实的数据"><a href="#7-接入真实的数据" class="headerlink" title="7.接入真实的数据"></a><a href="http://guoyongfeng.github.io/idoc/html/React%E8%AF%BE%E7%A8%8B%E4%B8%93%E9%A2%98/github-notetaker%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91.html#t97.%E6%8E%A5%E5%85%A5%E7%9C%9F%E5%AE%9E%E7%9A%84%E6%95%B0%E6%8D%AE">7.接入真实的数据</a></h4><blockquote><p>用到了mixin</p></blockquote><h2 id="2016-07-05"><a href="#2016-07-05" class="headerlink" title="2016-07-05"></a>2016-07-05</h2><p>github-note-taker 中使用了firebase ，直接写代码并没有运行，查看了 <a href="https://console.firebase.google.com/">firebase</a>官网，已经 <a href="https://github.com/firebase/reactfire/blob/master/docs/guide.md">ReactFire Guild</a></p><blockquote><p>最终没有使用 firebase 通过 state 中的notes mock了相应的数据</p></blockquote><h3 id="1-github-note-taker-调试完成，属性了组织开发react的方式和-react-router的基本用法"><a href="#1-github-note-taker-调试完成，属性了组织开发react的方式和-react-router的基本用法" class="headerlink" title="1. github-note-taker 调试完成，属性了组织开发react的方式和 react-router的基本用法"></a>1. github-note-taker 调试完成，属性了组织开发react的方式和 react-router的基本用法</h3><h3 id="2-React-router路由实践"><a href="#2-React-router路由实践" class="headerlink" title="2. React-router路由实践"></a>2. <a href="http://guoyongfeng.github.io/idoc/html/React%E8%AF%BE%E7%A8%8B%E4%B8%93%E9%A2%98/React-router%E8%B7%AF%E7%94%B1%E5%AE%9E%E8%B7%B5.html">React-router路由实践</a></h3><blockquote><p>明天coding 下</p></blockquote><h3 id="3-React-AJAX的最佳实践"><a href="#3-React-AJAX的最佳实践" class="headerlink" title="3. React-AJAX的最佳实践"></a>3. <a href="http://guoyongfeng.github.io/idoc/html/React%E8%AF%BE%E7%A8%8B%E4%B8%93%E9%A2%98/React-AJAX%E7%9A%84%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5.html">React-AJAX的最佳实践</a></h3><blockquote><p>作者并没写完，只是给提纲！</p></blockquote><h2 id="2016-07-06"><a href="#2016-07-06" class="headerlink" title="2016-07-06"></a>2016-07-06</h2><h3 id="1-coding-React-router路由实践"><a href="#1-coding-React-router路由实践" class="headerlink" title="1. coding React-router路由实践"></a>1. coding <a href="link">React-router路由实践</a></h3><h4 id="1"><a href="#1" class="headerlink" title="1."></a>1.</h4><figure class="highlight bash"><table><tr><td class="code"><pre><code class="hljs bash">invariant.js:39 Uncaught Invariant Violation: findComponentRoot(..., .0): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like <form>, <p>, or <a>, or using non-SVG elements <span class="hljs-keyword">in</span> an <svg> parent. Try inspecting the child nodes of the element with React ID ``.<br></code></pre></td></tr></table></figure><h2 id="2016-07-11"><a href="#2016-07-11" class="headerlink" title="2016-07-11"></a>2016-07-11</h2><p>看了redux 入门，进入公司项目</p><h2 id="2016-07-27"><a href="#2016-07-27" class="headerlink" title="2016-07-27"></a>2016-07-27</h2><p>继续吧！期望这个星期，这个月底能完成 hackathon-blog 项目，现在先把redux熟悉</p><h2 id="2016-08-02"><a href="#2016-08-02" class="headerlink" title="2016-08-02"></a>2016-08-02</h2><p>redux 入门的todo demo 调试完成，next: Middleware</p><p><a href="https://github.com/lewis617/react-redux-tutorial#reactredux%E7%B3%BB%E5%88%97%E6%95%99%E7%A8%8B">React+Redux系列教程</a></p><h2 id="2016-08-04"><a href="#2016-08-04" class="headerlink" title="2016-08-04"></a>2016-08-04</h2><ol><li><a href="https://zhuanlan.zhihu.com/p/21386862?refer=purerender">React实践 - Component Generator</a></li><li><a href="https://zhuanlan.zhihu.com/p/20597452">redux middleware 详解</a></li></ol>]]></content>
<summary type="html"><p><a href="/2016/06/06/hackathon-blog/">上一篇</a>是关于react 资料的搜集，内容太多，后面参照hackathon-blog 中给出的关于react的资料: <a href="http://guoyongfeng.github.io/idoc/index.html">React课程学习</a>, 整个资料循序渐进，挺易懂的！关于学习过程中的问题单开一章</p></summary>
<category term="F2E" scheme="https://www.sumaolin.com/categories/F2E/"/>
<category term="React" scheme="https://www.sumaolin.com/categories/F2E/React/"/>
<category term="F2E" scheme="https://www.sumaolin.com/tags/F2E/"/>
<category term="React" scheme="https://www.sumaolin.com/tags/React/"/>
<category term="Redux" scheme="https://www.sumaolin.com/tags/Redux/"/>
</entry>
<entry>
<title>hackathon blog</title>
<link href="https://www.sumaolin.com/2016/06/06/hackathon-blog/"/>
<id>https://www.sumaolin.com/2016/06/06/hackathon-blog/</id>
<published>2016-06-06T08:07:29.000Z</published>
<updated>2022-01-20T04:12:09.025Z</updated>
<content type="html"><![CDATA[<p>报名参加了 <a href="https://cnodejs.org/topic/5750d47c491b9c4f36910fe9">[北京] 6月4号，5号 项目实战之博客系统</a>，虽然没能按时完成项目，但是还是收获很多的，在这里总结下，同事作为 <a href="https://github.com/sumaolin/hackathon-blog">hackathon-blog</a> 的readme ，记录下遇到的坑坑坑……</p><span id="more"></span><h1 id="hackathon-blog"><a href="#hackathon-blog" class="headerlink" title="hackathon-blog"></a>hackathon-blog</h1><p>参加活动 ： <a href="https://cnodejs.org/topic/5750d47c491b9c4f36910fe9">博客系统实践周末Hackathon</a></p><h2 id="2016-06-04"><a href="#2016-06-04" class="headerlink" title="2016-06-04"></a>2016-06-04</h2><h3 id="遇到问题"><a href="#遇到问题" class="headerlink" title="遇到问题"></a>遇到问题</h3><h4 id="1-express不是内部或外部命令"><a href="#1-express不是内部或外部命令" class="headerlink" title="1. express不是内部或外部命令"></a>1. <code>express不是内部或外部命令</code></h4><p> 最新express4.0版本中将命令工具分家出来了(项目地址:<a href="https://github.com/expressjs/generator)%E6%89%80%E4%BB%A5%E6%88%91%E4%BB%AC%E8%BF%98%E9%9C%80%E8%A6%81%E5%AE%89%E8%A3%85%E4%B8%80%E4%B8%AA%E5%91%BD%E4%BB%A4%E5%B7%A5%E5%85%B7,%E5%91%BD%E4%BB%A4%E5%A6%82%E4%B8%8B">https://github.com/expressjs/generator)所以我们还需要安装一个命令工具,命令如下</a>:<br> <code>npm install -g express-generator</code></p><h4 id="2-passport-amp-passport-local-的认证问题"><a href="#2-passport-amp-passport-local-的认证问题" class="headerlink" title="2. passport & passport-local 的认证问题"></a>2. passport & passport-local 的认证问题</h4><h5 id="参考："><a href="#参考：" class="headerlink" title="参考："></a>参考：</h5><ol><li><p><a href="https://scotch.io/tutorials/easy-node-authentication-setup-and-local">Easy Node Authentication: Setup and Local</a></p></li><li><p><a href="https://github.com/rockq-org/express-passport-quick-getstarted">express-passport-quick-getstarted</a> </p></li><li><p><a href="https://segmentfault.com/a/1190000002926232#articleHeader0">使用passportjs进行登录验证</a></p></li><li><p><a href="http://blog.fens.me/nodejs-express-passport/">Express结合Passport实现登陆认证</a></p></li><li><p><a href="http://passportjs.org/docs">passport doc</a> 官方文档，先看了几个例子，看完官方文档，豁然开朗了，使用了不同的方法去通过认证</p></li></ol><h4 id="3-install-phantomjs-error"><a href="#3-install-phantomjs-error" class="headerlink" title="3. install phantomjs error"></a>3. <code>install phantomjs error</code></h4><p> 当时没遇到这个问题，当时的网络自带翻墙功能，回来再次安装的时候报错，无法安装，<a href="https://github.com/rockq-org/hackathon-blog/issues/13">参考</a> ，就可以解决了</p><h2 id="2016-06-05"><a href="#2016-06-05" class="headerlink" title="2016-06-05"></a>2016-06-05</h2><h3 id="react-amp-redux-amp-react-router"><a href="#react-amp-redux-amp-react-router" class="headerlink" title="react & redux & react-router"></a><a href="https://facebook.github.io/react/index.html">react</a> & <a href="https://github.com/reactjs/redux">redux</a> & <a href="https://github.com/reactjs/react-router">react-router</a></h3><h3 id="相关工具"><a href="#相关工具" class="headerlink" title="相关工具"></a>相关工具</h3><ol><li><a href="https://github.com/zalmoxisus/redux-devtools-extension">redux-devtools-extension</a></li><li><a href="https://github.com/facebook/react-devtools">react-devtools</a></li></ol><h3 id="资料"><a href="#资料" class="headerlink" title="资料"></a>资料</h3><ol><li><a href="https://github.com/lewis617/react-redux-tutorial">React+Redux系列教程</a></li><li><a href="http://cn.redux.js.org/">Redux 中文文档</a></li><li><a href="https://github.com/icefox0801/JSErrorMonitor#%E5%BA%94%E7%94%A8%E7%9A%84%E6%A1%86%E6%9E%B6%E5%92%8C%E5%BA%93">文档收集</a></li></ol><h2 id="2016-06-06"><a href="#2016-06-06" class="headerlink" title="2016-06-06"></a>2016-06-06</h2><p> 两天的 hackathon 活动，感觉到自己的不足，要恶补下自己的基础知识了，首先完成这个blog 的认为</p><ol><li>passport-local 认证 【** 2016-06-08 18:04:17 ** 完成】</li><li>react & redux 登录注册页面</li><li>blog 编辑器</li><li>blog 列表（编辑删除），tag 功能！</li></ol><h2 id="2016-06-07"><a href="#2016-06-07" class="headerlink" title="2016-06-07"></a>2016-06-07</h2><p> <a href="https://github.com/ilivebox/the-little-mongodb-book">The Little MongoDB Book 中文版 - v1.0</a> 【介绍的很全面，很适合入门！】</p><h2 id="2016-06-08"><a href="#2016-06-08" class="headerlink" title="2016-06-08"></a>2016-06-08</h2><h3 id="疑问"><a href="#疑问" class="headerlink" title="疑问"></a>疑问</h3><ol><li>chrome plugin Postman 中 body 类型： form-data， x-www-form-urlencoded， raw， binary 的疑问区别<blockquote><p>在hackathon-blog 活动中 推荐使用的postman 并且@hain 演示推荐了 raw 的方式提交数据，回来自己再弄，可是怎么也体检不成功了！一直怀疑自己 body-parse 模块配置有问题，看了下面的文章才豁然开朗</p></blockquote></li></ol><p> <a href="https://github.com/ilivebox/the-little-mongodb-book/blob/master/zh-cn/mongodb.markdown">四种常见的 POST 提交数据方式</a></p><p> 总结下： </p><ul><li>x-www-form-urlencoded 是from 表单默认提交方式， <code>Content-Type: application/x-www-form-urlencoded</code></li><li>form-data 是form 上传文件 时候用到的方式， <code>Content-Type: multipart/form-data</code></li><li>raw 是自定义 提交表单的格式 的，后面可以选择application/json 或者 application/xml 等方式，等同自定义了 <code>Content-type</code>的类型；</li><li>binary 根据以前上传文件的理解，是最新的通过二进制的形式上传数据</li></ul><h2 id="2016-06-12"><a href="#2016-06-12" class="headerlink" title="2016-06-12"></a>2016-06-12</h2><p> 端午前接口按规划的弄好了，按计划改实现react & redux 登录注册页面了， </p><h2 id="2016-06-15"><a href="#2016-06-15" class="headerlink" title="2016-06-15"></a>2016-06-15</h2><h3 id="已读"><a href="#已读" class="headerlink" title="已读"></a>已读</h3><ol><li><p><a href="https://blog.jimmylv.info/2016-01-22-React.js-Best-Practices-for-2016/">【译】展望2016，React.js 最佳实践 (中英对照版)</a></p><blockquote><p>很概况全面的介绍了下 react 中用到的相关技术</p></blockquote></li><li><p><a href="https://github.com/petehunt/react-howto/blob/master/README-zh.md">如何学习React</a></p><blockquote><p>怎样学习 react 系列</p></blockquote></li><li><p><a href="http://chatting8.com/?p=883">Redux是如何工作的 (一)</a></p><blockquote><p>redux 通过管理state 树来管理 react 组件熟的更新</p></blockquote></li><li><p><a href="http://geek.csdn.net/news/detail/81106">React知识库内容精选：10篇文章让你迅速了解该框架</a></p></li></ol><h3 id="未读"><a href="#未读" class="headerlink" title="未读"></a>未读</h3><ol><li><p>【系列】<a href="http://mulgore.github.io/2016/05/23/follow-react-lesson/">和我一起实战react</a></p></li><li><p>【系列】<a href="http://mulgore.github.io/2016/06/01/used-CNodeAPI-for-development-of-react-webapp/">基于CNodeAPI使用react开发一个完整的Web应用</a></p></li></ol><h2 id="2016-07-06"><a href="#2016-07-06" class="headerlink" title="2016-07-06"></a>2016-07-06</h2><p> 上面是关于react 资料的搜集，内容太多，后面参照hackathon-blog 中给出的关于react的资料: <a href="http://guoyongfeng.github.io/idoc/index.html">React课程学习</a>, 整个资料循序渐进，挺易懂的！关于学习过程中的问题单开一章： <a href="/2016/07/06/React%E8%AF%BE%E7%A8%8B%E5%AD%A6%E4%B9%A0/">React课程学习</a></p>]]></content>
<summary type="html"><p>报名参加了 <a href="https://cnodejs.org/topic/5750d47c491b9c4f36910fe9">[北京] 6月4号，5号 项目实战之博客系统</a>，虽然没能按时完成项目，但是还是收获很多的，在这里总结下，同事作为 <a href="https://github.com/sumaolin/hackathon-blog">hackathon-blog</a> 的readme ，记录下遇到的坑坑坑……</p></summary>
</entry>
<entry>
<title>readList 2016.06.01</title>
<link href="https://www.sumaolin.com/2016/06/02/readList-2016-06-01/"/>
<id>https://www.sumaolin.com/2016/06/02/readList-2016-06-01/</id>
<published>2016-06-02T06:53:47.000Z</published>
<updated>2022-01-20T04:12:09.027Z</updated>
<content type="html"><</code></pre><ol start="2"><li><a href="https://yjhjstz.gitbooks.io/deep-into-node/content/">深入理解Node.js：核心思想与源码分析</a> 【电子书】</li></ol><pre><code>>深入理解Node.js：核心思想与源码分析</code></pre><ol start="3"><li><a href="https://github.com/febobo/react-native-redux-FeInn">react native redux FeInn 从零到1让你学会搭建一个APP</a></li></ol><h2 id="2016-06-12"><a href="#2016-06-12" class="headerlink" title="2016-06-12"></a>2016-06-12</h2><ol><li><p><a href="https://darknode.in/network/nginx-google-analytics/">Nginx 内配置 Google Analytics 指南</a> 【自己的网站可以配置实践下】</p></li><li><p><a href="http://www.w3cfuns.com/notes/26894/65fd1b670c97595cc23f3a7416d11cc5.html">文字龙卷风</a> 【很赞的效果】</p></li></ol><h2 id="2016-06-13"><a href="#2016-06-13" class="headerlink" title="2016-06-13"></a>2016-06-13</h2><ol><li><p><a href="http://www.css88.com/doc/jsdoc/index.html">JSDoc 中文文档</a></p></li><li><p><a href="https://fe.ele.me/gou-jian-express-api-wu-ge-you-yong-de-zhong-jian-jian/?f=tt">构建 Express Api 五个有用的中间件[译]</a> </p></li></ol><blockquote><p>跨域 cors<br> gzip 压缩 compression<br> 安全设置 helmet<br> 分布式多进程处理 cluster<br> 生产日志 morgan<br> https SSL</p></blockquote><h2 id="2016-06-16"><a href="#2016-06-16" class="headerlink" title="2016-06-16"></a>2016-06-16</h2><ol><li><p><a href="https://zilongshanren.com/LearnEmacs/">21 天学会 Emacs</a> 【LearnEmacs系列教材】</p></li><li><p><a href="http://www.cnblogs.com/wangfupeng1988/p/4001284.html">深入理解javascript原型和闭包系列</a></p></li></ol><h2 id="2016-06-17"><a href="#2016-06-17" class="headerlink" title="2016-06-17"></a>2016-06-17</h2><ol><li><a href="http://www.moye.me/nodejs_articles/">莫邪 Node.js系列文章</a> <blockquote><p>涉及很多方面，很值得看看</p></blockquote></li></ol>]]></content>
<summary type="html"><p>转眼进入六月了，在开个readlist ，把一些看过的网上资料，总结于此！</p></summary>
<category term="ReadList" scheme="https://www.sumaolin.com/categories/ReadList/"/>
<category term="F2E" scheme="https://www.sumaolin.com/tags/F2E/"/>
<category term="readlist" scheme="https://www.sumaolin.com/tags/readlist/"/>
</entry>
<entry>
<title>koa begainer</title>
<link href="https://www.sumaolin.com/2016/05/10/koa-begainer/"/>
<id>https://www.sumaolin.com/2016/05/10/koa-begainer/</id>
<published>2016-05-10T10:48:41.000Z</published>
<updated>2022-01-20T04:12:09.026Z</updated>
<content type="html"><![CDATA[<p>想学习下后端的Node or Koa 相关的知识，目标能实现开发，从一个个网上的例子的一行行代码开始敲起！</p><span id="more"></span><h1 id="kick-off-koa"><a href="#kick-off-koa" class="headerlink" title="kick-off-koa"></a><a href="https://github.com/koajs/kick-off-koa">kick-off-koa</a></h1><h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p> 总共11 个 exercise 想每天做一个呢，结果一下午 complete all。总结：</p><ol><li>简单的英文提示，基本能看懂大概意思，按提示的点能够独立完成。很简单的入门课程！</li><li>对于异步理解很不到位，最后一个exercise: authentication 一直报错：<figure class="highlight bash"><table><tr><td class="code"><pre><code class="hljs bash">should be redirected to <span class="hljs-string">'/'</span><br></code></pre></td></tr></table></figure>先’this.redirect=”/“‘ 改为 ‘this.redirct(“/“)’，还是一直报错，最后实在没办法，看了下github 中的解决办法，<br>才发现’var body = parse(this)’ 写错了，应该是’var body = yield parse(this)’ 少了yield。现在对于异步的理解还很浅显，感觉是body 调用的时候数据还没parse完。</li></ol><h2 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h2><ol><li><a href="http://www.jscon.cc/koa-action-1/">[Koa系列-1]简单入门</a></li><li><a href="http://www.jscon.cc/koa-action-2/">[koa系列-2]路由</a></li></ol><blockquote><p>在kick-off-koa基础上，深入的讲解了下, 其中讲到了两张代码模式：<br> 1. Express-style，用法来自于express框架，它能够开启app.get, app.put, app.post, app.delete等功能<br> 2. Middleware-style,此时将 实例化 一个 koa-route 对象，在这个对象中配置路由规则，然后作为一个中间件塞入到app.use方法中。</p></blockquote><h1 id="基于-koa-开发论坛系统"><a href="#基于-koa-开发论坛系统" class="headerlink" title="基于 koa 开发论坛系统"></a><a href="http://cnodejs.org/topic/563f6e708e90ab7c391e9f71">基于 koa 开发论坛系统</a></h1><h2 id="2016-05-05"><a href="#2016-05-05" class="headerlink" title="2016-05-05"></a>2016-05-05</h2><ol><li><a href="http://nswbmw.github.io/N-club/1/1.3.html">co 和 koa</a> 中理解不了thunk函数</li></ol><h2 id="2016-05-09"><a href="#2016-05-09" class="headerlink" title="2016-05-09"></a>2016-05-09</h2><ol><li><a href="https://nswbmw.github.io/N-club/2/2.1.html">模版系统</a></li></ol><pre><code>主要是 [co-ejs](https://github.com/nswbmw/co-ejs) 的各种报错问题，都提交到 [wiki](https://github.com/nswbmw/co-ejs/issues/2) 中，最后通过 项目中的 demo 中的文件找到的 解决方法！看了下 [co-ejs setting](https://github.com/nswbmw/co-ejs#settings), 有点被自己蠢哭了，答案都在这里啊！> root: view root directory. layout: global layout file, default is layout, set false to disable layout. viewExt: view file extension (default html). cache: cache compiled templates (default true). debug: debug flag (default false). locals: global locals, can be function type, this in the function is koa's ctx. filters: ejs custom filters. open: open sequence (default <%). close: close sequence (default %>).</code></pre><h2 id="2016-05-10"><a href="#2016-05-10" class="headerlink" title="2016-05-10"></a>2016-05-10</h2><ol><li><a href="http://nswbmw.github.io/N-club/3/README.html">路由</a></li></ol><pre><code>window下安装koa-frouter一直报错，看到 [koa-frouter](https://github.com/nswbmw/koa-frouter) 官网的issus 有这个问题，原因是:`出现这个问题是因为windows的文件命名不能带有通配符*` 所以 @作者修改了该问题发布了 [email protected]版本修复这个安装时候的问题相关 issuse[npm i koa-frouter --save 报错](https://github.com/nswbmw/koa-frouter/issues/4)话说koa-frouter, co-ejs 都是这个教程的作者写的啊！</code></pre><h2 id="2016-05-11"><a href="#2016-05-11" class="headerlink" title="2016-05-11"></a>2016-05-11</h2><h3 id="参数验证与错误处理"><a href="#参数验证与错误处理" class="headerlink" title="参数验证与错误处理"></a><a href="http://nswbmw.github.io/N-club/4/4.1.html">参数验证与错误处理</a></h3><p> <a href="https://github.com/nswbmw/koa-scheme">koa-scheme</a> 用于输入输出（this.request, this.response) 数据格式的校验，代码编写后要写测试用例，先看后面的</p><p> <a href="https://github.com/nswbmw/koa-errorhandler">koa-errorhandler</a></p><h3 id="缓存和配置"><a href="#缓存和配置" class="headerlink" title="缓存和配置"></a><a href="http://nswbmw.github.io/N-club/5/5.1.html">缓存和配置</a></h3><p> <a href="https://github.com/nswbmw/koa-router-cache">koa-router-cache</a> 匹配路径 请求的cache，业务逻辑层之前的缓存</p><p> <a href="https://github.com/nswbmw/co-cache">co-cache</a> 业务逻辑之后，数据层之前，把写经常用的查询数据，缓存起来！ 需要用到mongodb ，后面测试</p><p> <a href="https://github.com/nswbmw/config-lite">config-lite</a> 配置文件的区分调用plugin</p><h2 id="2016-05-12"><a href="#2016-05-12" class="headerlink" title="2016-05-12"></a>2016-05-12</h2><h3 id="测试"><a href="#测试" class="headerlink" title="测试"></a><a href="http://nswbmw.github.io/N-club/6/README.html">测试</a></h3><p> 主要用到的npm <a href="https://github.com/blakeembrey/co-mocha">co-mocha</a> 与 <a href="https://github.com/avbel/co-supertest">co-supertest</a></p><p> describe // 一直写错了，</p><p> 参考了 <a href="http://www.ruanyifeng.com/blog/2015/12/a-mocha-tutorial-of-examples.html">测试框架 Mocha 实例教程</a> 和 <a href="https://cnodejs.org/topic/516526766d38277306c7d277">初识 mocha in NodeJS</a> </p><p> <a href="http://www.cnblogs.com/wade-xu/p/4673460.html">带你入门带你飞Ⅱ 使用Mocha + Chai + SuperTest测试Restful API in node.js</a></p><blockquote><p>.send(obj) post 的请求的时候，发送请求参数</p></blockquote><p> Anything you can do with superagent, you can do with supertest - for example multipart file uploads!<br> 测试上传图片的请求<br> <figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript">request(app)<br>.post(<span class="hljs-string">'/'</span>)<br>.field(<span class="hljs-string">'name'</span>, <span class="hljs-string">'my awesome avatar'</span>)<br>.attach(<span class="hljs-string">'avatar'</span>, <span class="hljs-string">'test/fixtures/homeboy.jpg'</span>)<br>...<br></code></pre></td></tr></table></figure></p><h2 id="2016-05-13"><a href="#2016-05-13" class="headerlink" title="2016-05-13"></a>2016-05-13</h2><p> 继续测试<br> <figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript">it(<span class="hljs-string">'post /signup'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> *(<span class="hljs-params">done</span>) </span>{<br> <span class="hljs-keyword">yield</span> agent.post(<span class="hljs-string">'/signup'</span>)<br> .send(param)<br> .end(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">err, res</span>)</span>{<br> <span class="hljs-keyword">return</span> done(err);<br> });<br>});<br><span class="hljs-comment">// 报错信息，感觉是因为 生成器函数中，不能使用 done 参数</span><br><span class="hljs-built_in">Error</span>: timeout <span class="hljs-keyword">of</span> 2000ms exceeded. Ensure the done() callback is being call<br>ed <span class="hljs-keyword">in</span> <span class="hljs-built_in">this</span> test.<br></code></pre></td></tr></table></figure></p><h2 id="2016-05-16"><a href="#2016-05-16" class="headerlink" title="2016-05-16"></a>2016-05-16</h2><p> 经过前面的铺垫，开始根据第七章构建一个完整的论坛demo</p><p> 做完7.5 可以开始初步的调试</p><h2 id="2016-05-17"><a href="#2016-05-17" class="headerlink" title="2016-05-17"></a>2016-05-17</h2><h3 id="安装mongodb"><a href="#安装mongodb" class="headerlink" title="安装mongodb"></a>安装mongodb</h3><ol><li><a href="http://www.cnblogs.com/linjiqin/p/3192159.html">Windows7下安装MongoDB</a> </li></ol><p> 吃了路径没有写对的亏，一直启动不成功，以后要注意</p><h3 id="调试"><a href="#调试" class="headerlink" title="调试"></a>调试</h3><ol><li>node app.js 报错:<figure class="highlight bash"><table><tr><td class="code"><pre><code class="hljs bash">[email protected] start f:\Users\dev\bbs<br>node app.js<br><br>f:\Users\dev\bbs\node_modules\mongoose\lib\schema.js:556<br> throw new TypeError(<span class="hljs-string">'Undefined type `'</span> + name + <span class="hljs-string">'` at `'</span> + path +<br> ^<br><br>TypeError: Undefined <span class="hljs-built_in">type</span> `C` at `0`<br> Did you try nesting Schemas? You can only nest using refs or arrays.<br> at Function.Schema.interpretAsType (f:\Users\dev\bbs\node_modules\mongoose\l<br>ib\schema.js:556:11)<br> at Schema.path (f:\Users\dev\bbs\node_modules\mongoose\lib\schema.js:464:29)<br><br> at Schema.add (f:\Users\dev\bbs\node_modules\mongoose\lib\schema.js:348:12)<br> at new Schema (f:\Users\dev\bbs\node_modules\mongoose\lib\schema.js:94:10)<br> at Schema (f:\Users\dev\bbs\node_modules\mongoose\lib\schema.js:67:12)<br> at Object.<anonymous> (f:\Users\dev\bbs\models\comment.js:18:18)<br> at Module._compile (module.js:409:26)<br> at Object.Module._extensions..js (module.js:416:10)<br> at Module.load (module.js:343:32)<br> at Function.Module._load (module.js:300:12)<br> at Module.require (module.js:353:17)<br> at require (internal/module.js:12:17)<br> at Object.<anonymous> (f:\Users\dev\bbs\models\index.js:13:19)<br> at Module._compile (module.js:409:26)<br> at Object.Module._extensions..js (module.js:416:10)<br> at Module.load (module.js:343:32)<br><br>npm ERR! Windows_NT 6.1.7601<br>npm ERR! argv <span class="hljs-string">"C:\\Program Files\\nodejs\\node.exe"</span> <span class="hljs-string">"C:\\Users\\KevinSu\\AppData</span><br><span class="hljs-string">\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js"</span> <span class="hljs-string">"start"</span><br>npm ERR! node v4.4.3<br>npm ERR! npm v3.8.7<br>npm ERR! code ELIFECYCLE<br>npm ERR! [email protected] start: `node app.js`<br>npm ERR! Exit status 1<br>npm ERR!<br>npm ERR! Failed at the [email protected] start script <span class="hljs-string">'node app.js'</span>.<br>npm ERR! Make sure you have the latest version of node.js and npm installed.<br>npm ERR! If you <span class="hljs-keyword">do</span>, this is most likely a problem with the bbs package,<br>npm ERR! not with npm itself.<br>npm ERR! Tell the author that this fails on your system:<br>npm ERR! node app.js<br>npm ERR! You can get information on how to open an issue <span class="hljs-keyword">for</span> this project with:<br>npm ERR! npm bugs bbs<br>npm ERR! Or <span class="hljs-keyword">if</span> that isn<span class="hljs-string">'t available, you can get their info via:</span><br><span class="hljs-string">npm ERR! npm owner ls bbs</span><br><span class="hljs-string">npm ERR! There is likely additional logging output above.</span><br><span class="hljs-string"></span><br><span class="hljs-string">npm ERR! Please include the following file with any support request:</span><br><span class="hljs-string">npm ERR! f:\Users\dev\bbs\npm-debug.log</span><br></code></pre></td></tr></table></figure></li></ol><p> 重点错误信息：<br> <figure class="highlight bash"><table><tr><td class="code"><pre><code class="hljs bash">TypeError: Undefined <span class="hljs-built_in">type</span> `C` at `0`<br> Did you try nesting Schemas? You can only nest using refs or arrays.<br> at Function.Schema.interpretAsType (f:\Users\dev\bbs\node_modules\mongoose\l<br> ib\schema.js:556:11)<br></code></pre></td></tr></table></figure><br> 和 <code>at Object.<anonymous> (f:\Users\dev\bbs\models\comment.js:18:18)</code> 定位代码错误的位置</p><p> 百度 错误 得到的是 <a href="http://stackoverflow.com/questions/27259449/mongoose-error-nesting-schemas">Mongoose error: nesting Schemas</a> 没看懂，感觉是mongodb 的使用出问题了，直接去 <a href="https://github.com/Automattic/mongoose/issues">mongoose 官网issuse</a></p><p> 发现错误 <code>module.exports = Schema('Comment', CommontSchema);</code> 写错了，应该是<code>module.exports = mongoose.model('Comment', CommontSchema);</code></p><h2 id="2016-05-18"><a href="#2016-05-18" class="headerlink" title="2016-05-18"></a>2016-05-18</h2><p> 继续昨天的调试</p><ol><li><p><a href="http://nswbmw.github.io/N-club/7/README.html">7.1. 基础项目搭建</a> 中<code>default.js</code> 关于 routerCacheConf 的配置是以前旧版本的koa-router-cache的使用方法，运行会报错：</p><figure class="highlight bash"><table><tr><td class="code"><pre><code class="hljs bash"> Error: `key` must be string or generatorFunction!<br> at module.exports (f:\Users\dev\bbs\node_modules\koa-router-cache\lib\index.<br>js:13:13)<br> at Object.<anonymous> (f:\Users\dev\bbs\app.js:32:9)<br> at Module._compile (module.js:409:26)<br> at Object.Module._extensions..js (module.js:416:10)<br> at Module.load (module.js:343:32)<br> at Function.Module._load (module.js:300:12)<br> at Function.Module.runMain (module.js:441:10)<br> at startup (node.js:139:18)<br> at node.js:968:3<br></code></pre></td></tr></table></figure><p>新的配置方法请参考 <a href="https://github.com/nswbmw/koa-router-cache">koa-router-cache</a></p></li><li><p>然后就可以启动了 简单的<code>node app.js</code> 看到没报错启动成功了，可以直接 <code> http://localhost:3000</code>页面报错，cli里面不报错，想了半天原因，后面才想去没有index.html 页面，只有signup页面，直接访问 <code>http://localhost:3000/signup</code>就OK了！</p></li><li><p>5章节就OK啦！继续下一节了！</p></li></ol><h2 id="2016-05-19"><a href="#2016-05-19" class="headerlink" title="2016-05-19"></a>2016-05-19</h2><p> 7.8 章节点code 了，next code 7.9 章节</p><h2 id="2016-05-20"><a href="#2016-05-20" class="headerlink" title="2016-05-20"></a>2016-05-20</h2><p> 昨天调试了几个bug，都是代码单词拼写错误或者分号缺少造成的语法错误，<code>node app.js</code>已经可以运行，但是首页打不开，今天继续调试！</p><p> 感觉进步啊，不知道为啥，路由的不起作用，</p><p> next:</p><pre><code>1. vscode debug 功能学习下2. router/topic/_id 不进入</code></pre><h2 id="2016-05-23"><a href="#2016-05-23" class="headerlink" title="2016-05-23"></a>2016-05-23</h2><p> /index 不响应，后台不报错， 浏览器无响应，不知道从何入手啊!</p><p> 翻了下 <a href="https://github.com/nswbmw/N-club/issues">N-club issuse</a>, 感觉是自己没起redis 服务，在 <a href="https://github.com/nswbmw/N-club/issues/5#issuecomment-206723697">co-cache这个模块用到了redis</a> 中作者明确说 <code>需要同时开启mongoDB和redis的</code>, 参考 <a href="http://blog.csdn.net/renfufei/article/details/38474435">Windows下安装并设置Redis</a> 安装开启redis 服务</p><h2 id="2016-05-27"><a href="#2016-05-27" class="headerlink" title="2016-05-27"></a>2016-05-27</h2><ol><li><p><a href="http://keenwon.com/1275.html">在windows上部署使用Redis</a> 设置redis 为系统服务</p></li><li><p>debug 到 <code>userCard.ejs</code> 中 <code><% var userInfo = yield $User.getUserByName(name) %></code> 这行出错了！，再具体的不知道bug 的原因</p></li></ol><h2 id="2016-05-30"><a href="#2016-05-30" class="headerlink" title="2016-05-30"></a>2016-05-30</h2><h3 id="bug-解决办法"><a href="#bug-解决办法" class="headerlink" title="bug 解决办法"></a>bug 解决办法</h3><ol><li>学习 vscode debug koa 的方法，看下是否可以定位到具体的bug</li></ol><p> 参考: <a href="https://cnodejs.org/topic/572209ea35af8a704195f552">【视频教程】使用vscode调试koa2-example</a></p><ol start="2"><li>学习下一章写测试 test , 关于 ‘$User.getUserByName(name)’ 的测试，看是否能找出bug</li></ol><h3 id="post-signin-bug"><a href="#post-signin-bug" class="headerlink" title="post /signin bug"></a>post /signin bug</h3><p> 先开始发现mongodb 中存入的密码是明文，然后登陆的时候是 比对的 是md5的值，发现注册的时候，schema中 md5(password) 的值没有赋值给body, 而是赋值给了this，所以body 中的还是明文的密码</p><p> 然后登陆 post /signin 是报错了！</p><p> 错误提示<br> <figure class="highlight bash"><table><tr><td class="code"><pre><code class="hljs bash">koa-generic-session <span class="hljs-built_in">set</span> error: Cannot <span class="hljs-built_in">read</span> property <span class="hljs-string">'maxAge'</span> of undefined<br> at MongoStore.set$ (f:\Users\dev\bbs\node_modules\koa-generic-session-mongo\dist\store.js:195:33)<br> at tryCatch (f:\Users\dev\bbs\node_modules\babel-runtime\regenerator\runtime.js:72:40)<br> at GeneratorFunctionPrototype.invoke [as _invoke] (f:\Users\dev\bbs\node_modules\babel-runtime\regenerator\runtime.js:334:22)<br> at GeneratorFunctionPrototype.prototype.(anonymous <span class="hljs-keyword">function</span>) [as next] (f:\Users\dev\bbs\node_modules\babel-runtime\regenerator\runtime.js:105:21)<br> at onFulfilled (f:\Users\dev\bbs\node_modules\co\index.js:65:19)<br> at f:\Users\dev\bbs\node_modules\co\index.js:54:5<br> at Object.co (f:\Users\dev\bbs\node_modules\co\index.js:50:10)<br> at Object.toPromise (f:\Users\dev\bbs\node_modules\co\index.js:118:63)<br> at next (f:\Users\dev\bbs\node_modules\co\index.js:99:29)<br> at onFulfilled (f:\Users\dev\bbs\node_modules\co\index.js:69:7)<br> at f:\Users\dev\bbs\node_modules\co\index.js:54:5<br> at Object.co (f:\Users\dev\bbs\node_modules\co\index.js:50:10)<br> at Object.toPromise (f:\Users\dev\bbs\node_modules\co\index.js:118:63)<br> at next (f:\Users\dev\bbs\node_modules\co\index.js:99:29)<br> at onFulfilled (f:\Users\dev\bbs\node_modules\co\index.js:69:7)<br> at f:\Users\dev\bbs\node_modules\co\index.js:54:5<br></code></pre></td></tr></table></figure></p><h2 id="2016-06-01"><a href="#2016-06-01" class="headerlink" title="2016-06-01"></a>2016-06-01</h2><h3 id="bugList"><a href="#bugList" class="headerlink" title="bugList"></a>bugList</h3><ol><li><p><a href="#signin-post-bug">koa-generic-session set error: Cannot read property ‘maxAge’ of undefined</a></p></li><li><p>detail topic/:id</p></li></ol> <figure class="highlight bash"><table><tr><td class="code"><pre><code class="hljs bash">NotFoundError: Not Found<br> at Object.module.exports.throw (f:\Users\dev\bbs\node_modules\koa\lib\context.js:91:23)<br> at Object.error (f:\Users\dev\bbs\node_modules\koa-errorhandler\index.js:70:73)<br> at next (native)<br> at Object.<anonymous> (f:\Users\dev\bbs\node_modules\koa-compose\index.js:28:19)<br> at next (native)<br> at onFulfilled (f:\Users\dev\bbs\node_modules\co\index.js:65:19)<br> at process._tickCallback (node.js:369:9)<br></code></pre></td></tr></table></figure><p> ** fix ** : koa-frouter 在Windows中的配置问题<br> <figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript">routerConf: {<br> <span class="hljs-attr">root</span>: <span class="hljs-string">'./routes'</span>,<br> <span class="hljs-attr">wildcard</span>: <span class="hljs-string">'_'</span><br>}<br></code></pre></td></tr></table></figure></p><h2 id="2016-06-02"><a href="#2016-06-02" class="headerlink" title="2016-06-02"></a>2016-06-02</h2><h3 id="继续-post-signup-时候的-bug"><a href="#继续-post-signup-时候的-bug" class="headerlink" title="继续 post /signup 时候的 bug"></a>继续 <code>post /signup</code> 时候的 <a href="#post-signin-bug">bug</a></h3><p>暂时解决办法：app.js</p><figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript">app.use(session({<br> <span class="hljs-attr">store</span>: <span class="hljs-keyword">new</span> MongoStore(config.mongodb),<br> <span class="hljs-attr">beforeSave</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">ctx, sess</span>)</span>{<br> ctx.session.cookie = sess.cookie = {<br> <span class="hljs-attr">httpOnly</span>: <span class="hljs-literal">true</span>,<br> <span class="hljs-attr">path</span>: <span class="hljs-string">'/'</span>,<br> <span class="hljs-attr">overwrite</span>: <span class="hljs-literal">true</span>,<br> <span class="hljs-attr">signed</span>: <span class="hljs-literal">true</span>,<br> <span class="hljs-attr">maxAge</span>: & * <span class="hljs-number">24</span> * <span class="hljs-number">60</span> * <span class="hljs-number">60</span> * <span class="hljs-number">1000</span> <span class="hljs-comment">//one day in ms</span><br> };<br> }<br>}));<br></code></pre></td></tr></table></figure><p>通过<code>koa-generic-session</code> 中的method <code>beforeSave</code> 直接添加cookie 的相关设置</p><h2 id="2016-06-03"><a href="#2016-06-03" class="headerlink" title="2016-06-03"></a>2016-06-03</h2><h3 id="1-post-create-bug"><a href="#1-post-create-bug" class="headerlink" title="1. post /create bug:"></a>1. post /create bug:</h3><figure class="highlight bash"><table><tr><td class="code"><pre><code class="hljs bash">ValidationError: Topic validation failed<br> at MongooseError.ValidationError (f:\Users\dev\bbs\node_modules\mongoose\lib\error\validation.js:22:11)<br> at model.Document.invalidate (f:\Users\dev\bbs\node_modules\mongoose\lib\document.js:1366:32)<br> at f:\Users\dev\bbs\node_modules\mongoose\lib\document.js:1242:17<br> at validate (f:\Users\dev\bbs\node_modules\mongoose\lib\schematype.js:702:7)<br> at f:\Users\dev\bbs\node_modules\mongoose\lib\schematype.js:733:9<br> at Array.forEach (native)<br> at SchemaString.SchemaType.doValidate (f:\Users\dev\bbs\node_modules\mongoose\lib\schematype.js:707:19)<br> at f:\Users\dev\bbs\node_modules\mongoose\lib\document.js:1240:9<br> at nextTickCallbackWith0Args (node.js:420:9)<br> at process._tickCallback (node.js:349:13)<br></code></pre></td></tr></table></figure><p>fixed ： post/signin 时候的 session 中添加user 属性 topic schema 定义的user 是对象！ 代码敲错了！</p><p>整个代码可以跑起来了，下面 写 test</p><h3 id="测试-test"><a href="#测试-test" class="headerlink" title="测试 test"></a>测试 test</h3><p> <code>npm i mocha co-mocha supertest co-supertest --save-dev</code> 依赖的模块</p><p> test/signup.js 测试注册功能！</p><h3 id="Next-Doing"><a href="#Next-Doing" class="headerlink" title="Next Doing"></a>Next Doing</h3><p> test/signin.js 登录功能<br> test/create.js 发帖功能<br> test/comment.js 回帖功能</p><p> 部署到coding 演示平台上</p><h1 id="参考链接"><a href="#参考链接" class="headerlink" title="参考链接"></a>参考链接</h1><h2 id="系列教程"><a href="#系列教程" class="headerlink" title="系列教程"></a>系列教程</h2><ol><li><a href="https://github.com/koajs/kick-off-koa">kick-off-koa</a> 【已完成】</li></ol><pre><code>>npm 安装，cli 交互模式学习。应该深入学习 [NodeSchool](http://nodeschool.io/zh-cn/) 下各个课程。</code></pre><ol start="2"><li><p><a href="http://cnodejs.org/topic/563f6e708e90ab7c391e9f71">基于 koa 开发论坛系统</a> 【进行……】</p></li><li><p><a href="https://github.com/nswbmw/N-blog">使用 Express + MongoDB 搭建多人博客</a></p></li><li><p><a href="http://www.nodebeginner.org/index-zh-cn.html">Node入门</a></p></li><li><p><a href="http://www.kancloud.cn/kancloud/create-voting-app/63977">使用React、Node.js、MongoDB、Socket.IO开发一个角色投票应用</a> <a href="https://github.com/papersnake/newdenfaces-es6">github</a></p></li><li><p><a href="https://scotch.io/tutorials/build-a-react-flux-app-with-user-authentication">Build a React + Flux App with User Authentication</a></p></li><li><p><a href="https://github.com/mulgore/kodo">和我一起实战react</a> 【未完成】</p></li><li><p><a href="https://github.com/zoubin/streamify-your-node-program">对Node.js中 stream模块的学习积累和理解</a></p></li></ol><h2 id="入门系列"><a href="#入门系列" class="headerlink" title="入门系列"></a>入门系列</h2><ol><li><a href="https://github.com/guo-yu/koa-guide">koa 中文文档</a></li><li><a href="https://github.com/koajs/koa/wiki">koa 中间件</a></li><li><a href="http://17koa.com/koa-generator-examples/">一起学koa</a></li><li><a href="https://cnodejs.org/topic/56936889c2289f51658f0926">koa技术分享</a></li></ol><h2 id="解读系列"><a href="#解读系列" class="headerlink" title="解读系列"></a>解读系列</h2><ol><li><a href="https://github.com/berwin/Blog/issues/8">koa</a></li><li><a href="http://taobaofed.org/blog/2016/03/18/error-handling-in-koa/">如何优雅的在 koa 中处理错误</a></li><li><a href="https://github.com/zoubin/streamify-your-node-program">对Node.js中 stream模块的学习积累和理解</a></li><li><a href="link">stream-handbook</a></li></ol><h2 id="NPM库"><a href="#NPM库" class="headerlink" title="NPM库"></a>NPM库</h2><ol><li><a href="http://doxmate.cool/node-webot/wechat/index.html">微信公共平台Node库wechat</a></li></ol>]]></content>
<summary type="html"><p>想学习下后端的Node or Koa 相关的知识，目标能实现开发，从一个个网上的例子的一行行代码开始敲起！</p></summary>
<category term="Nodejs" scheme="https://www.sumaolin.com/categories/Nodejs/"/>
<category term="Nodejs" scheme="https://www.sumaolin.com/tags/Nodejs/"/>
<category term="koa" scheme="https://www.sumaolin.com/tags/koa/"/>
</entry>
<entry>
<title>readList</title>
<link href="https://www.sumaolin.com/2016/05/06/readList/"/>
<id>https://www.sumaolin.com/2016/05/06/readList/</id>
<published>2016-05-06T06:39:43.000Z</published>
<updated>2022-01-20T04:12:09.027Z</updated>
<content type="html"><![CDATA[<p>五月份 工作中遇到问题汇总</p><span id="more"></span><ol><li><a href="http://blog.csdn.net/kongjiea/article/details/38614695">css3用AnimationEnd判断动画是否完成， css3在动画完成后执行事件</a></li></ol><h2 id="2016-05-06-21-14"><a href="#2016-05-06-21-14" class="headerlink" title="2016-05-06 21:14"></a>2016-05-06 21:14</h2><h3 id="1-介绍两个移动端使用的WebKit私有属性-webkit-touch-callout和-webkit-tap-highlight-color"><a href="#1-介绍两个移动端使用的WebKit私有属性-webkit-touch-callout和-webkit-tap-highlight-color" class="headerlink" title="1. 介绍两个移动端使用的WebKit私有属性-webkit-touch-callout和-webkit-tap-highlight-color"></a>1. <a href="http://www.css88.com/archives/5393">介绍两个移动端使用的WebKit私有属性-webkit-touch-callout和-webkit-tap-highlight-color</a></h3><blockquote><p><code>-webkit-touch-callout</code> 当你触摸并按住触摸目标时候，禁止或显示系统默认菜单</p><blockquote><p><code>-webkit-tap-highlight-color</code> 当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时，覆盖显示的高亮颜色。</p></blockquote></blockquote><h2 id="2016-05-09-18-38"><a href="#2016-05-09-18-38" class="headerlink" title="2016-05-09 18:38"></a>2016-05-09 18:38</h2><ol><li><a href="http://www.cnblogs.com/zhongweiv/p/nodejs.html">Node.js学习系列总索引</a></li></ol><h2 id="2016-05-10-20-00-05"><a href="#2016-05-10-20-00-05" class="headerlink" title="2016-05-10 20:00:05"></a>2016-05-10 20:00:05</h2><ol><li><a href="http://i5ting.github.io/stuq-gulp/">Gulp实战和原理解析</a> 【未读】</li></ol><p> 参考下重写下 generator-kmapp， 以前将就这用，今天更新了下就莫名其妙的报错了！感觉是 task : <code>wiredep-include</code> 遍历html文件时候，有的文件没有引人 公用的 bower 文件引人引起的，抽时间解决下！</p><ol start="2"><li><p><a href="http://yizaoyiwan.com/stories/23">如何在全职工作同时做一个自由职业者</a> 发现个好网站，一早一晚【未读】</p></li><li><p><a href="http://yizaoyiwan.com/stories/23">Promise 进阶核心</a>【未读】</p></li></ol><h2 id="2016-05-16-16-11-59"><a href="#2016-05-16-16-11-59" class="headerlink" title="2016-05-16 16:11:59"></a>2016-05-16 16:11:59</h2><ol><li><a href="http://cookingjs.github.io/intro.html">cooking</a> 【改天试用下】<blockquote><p>一个全局安装的命令行工具<br> 一个包含了基本依赖（Babel + webpack + 基本 loader）和预配置的 webpack<br> 一个配置和依赖都能通过插件扩展的构建工具</p></blockquote></li></ol><h2 id="2016-05-19-10-47-38"><a href="#2016-05-19-10-47-38" class="headerlink" title="2016-05-19 10:47:38"></a>2016-05-19 10:47:38</h2><ol><li><p><a href="http://www.webhek.com/javascript-object-keys">Javascript Object.keys()用法</a> obj.attrs 转换成 array</p></li><li><p><a href="http://mp.weixin.qq.com/s?__biz=MzA3MDExNzcyNA==&mid=2650392056&idx=1&sn=0e0cd289b852d41567e475d911763e63&scene=0#wechat_redirect">互联网服务端技术——如何学（下B）</a> 很通俗易懂，说明白了某个技术出现的需求原因！</p></li></ol><h2 id="2016-05-24-16-57-25"><a href="#2016-05-24-16-57-25" class="headerlink" title="2016-05-24 16:57:25"></a>2016-05-24 16:57:25</h2><ol><li><a href="https://segmentfault.com/a/1190000004408436">Win下必备神器之Cmder</a><blockquote><p>Chocolatey软件包管理系统 ‘choco install’ 安装软件</p></blockquote></li></ol><h2 id="2016-05-27-13-54-30"><a href="#2016-05-27-13-54-30" class="headerlink" title="2016-05-27 13:54:30"></a>2016-05-27 13:54:30</h2>]]></content>
<summary type="html"><p>五月份 工作中遇到问题汇总</p></summary>
<category term="ReadList" scheme="https://www.sumaolin.com/categories/ReadList/"/>
<category term="F2E" scheme="https://www.sumaolin.com/tags/F2E/"/>
<category term="前端" scheme="https://www.sumaolin.com/tags/%E5%89%8D%E7%AB%AF/"/>
<category term="笔记" scheme="https://www.sumaolin.com/tags/%E7%AC%94%E8%AE%B0/"/>
</entry>
<entry>
<title>three.js beginer</title>
<link href="https://www.sumaolin.com/2016/04/28/three-js-beginer/"/>
<id>https://www.sumaolin.com/2016/04/28/three-js-beginer/</id>
<published>2016-04-28T09:34:00.000Z</published>
<updated>2022-01-20T04:12:09.028Z</updated>
<content type="html"><![CDATA[<p>three.js 相关的收集资料</p><span id="more"></span><h2 id="2016-04-28-17-36"><a href="#2016-04-28-17-36" class="headerlink" title="2016-04-28 17:36"></a>2016-04-28 17:36</h2><ol><li><a href="http://www.ituring.com.cn/minibook/792">Three.js入门指南</a> 【未读】</li><li><a href="https://github.com/davidlyons/frontporch">Intro to WebGL with Three.js</a> </li></ol><blockquote><p>有demo 很详尽</p></blockquote><ol start="3"><li><a href="http://threejs.org/">http://threejs.org/</a> 【官网】</li></ol>]]></content>
<summary type="html"><p>three.js 相关的收集资料</p></summary>
<category term="F2E" scheme="https://www.sumaolin.com/categories/F2E/"/>
<category term="three.js" scheme="https://www.sumaolin.com/categories/F2E/three-js/"/>
<category term="canvas" scheme="https://www.sumaolin.com/tags/canvas/"/>
<category term="three.js" scheme="https://www.sumaolin.com/tags/three-js/"/>
<category term="webGL" scheme="https://www.sumaolin.com/tags/webGL/"/>
</entry>
<entry>
<title>docker入门</title>
<link href="https://www.sumaolin.com/2016/04/25/docker%E5%85%A5%E9%97%A8/"/>
<id>https://www.sumaolin.com/2016/04/25/docker%E5%85%A5%E9%97%A8/</id>
<published>2016-04-25T13:07:46.000Z</published>
<updated>2022-01-20T04:12:09.025Z</updated>
<content type="html"><![CDATA[<p>docker 入门使用</p><span id="more"></span><h1 id="入门资料"><a href="#入门资料" class="headerlink" title="入门资料"></a>入门资料</h1><h2 id="遇到问题"><a href="#遇到问题" class="headerlink" title="遇到问题"></a>遇到问题</h2><ol><li><code>Error starting daemon: open /var/run/docker.pid: permission denie</code></li></ol><blockquote><p>运行任何docker 相关的命令都提示： <code>FATA[0000] Cannot connect to the Docker daemon. Is 'docker -d' running on this host?</code> ，按提示输入<code>docker -d'后不 提示</code>Error starting daemon: open /var/run/docker.pid: permission denie`。</p></blockquote><p> ** 解决办法 **</p><p> <code>boot2docker stop & boot2docker start</code> 重新进入后恢复正常，</p><ol start="2"><li><code>docker pull redis:2.8.19</code> 是一直报错：</li></ol><blockquote><p><code>8c37ff647cf2: Error pulling image (2.8.19) from redis, Untar re-exec error: exit status 1: output: unexpected EOF Error pulling image (2.8.19) from redis, Untar re-exec error: exit status 1: output: unexpected EOF</code></p></blockquote><h2 id="2016-04-27-16-58"><a href="#2016-04-27-16-58" class="headerlink" title="2016-04-27 16:58"></a>2016-04-27 16:58</h2><p>昨天系统莫名其妙的升级到Windows10 回退到Windows 7 后又各种问题，直接重置了一天系统，今天总算能用了（白白浪费一天时间）</p><p>由于重装系统的缘故，docker也升级到了 1.9 直接使用Docker Toolbox， 使用上和boot2docker 是有差别的的，通过docker terminal快捷进入，就可以直接docker images 查看了，操作了</p><p>** 疑问 ** <code>docker-machine ssh default</code> 是做什么的？管理主机？</p><ol><li><p>docker 参数 -d</p><blockquote><p>docker run指定的命令如果不是那些一直挂起的命令（比如运行top，不断echo），就是会自动退出的。-d命令是设置detach为true，根据官方的文档，意思是让这个命令在后台运行，但并不是一直运行（我们在一个正常的Linux Terminal中运行/bin/bash，运行完了也就完了，不会一直挂着等待响应的，所以确实没办法用daemon方式来跑/bin/bash）。</p></blockquote></li><li><p>docker quick terminal 进入的是MINGW64 所以window 盘符转换 D: -> /d</p></li><li><p><a href="https://dashboard.daocloud.io/mirror">配置Docker加速器</a><br> 配置docker toolbox 的<code>--registry-mirror</code>，速度瞬间上去了</p></li></ol><h2 id="2016-04-28-18-21"><a href="#2016-04-28-18-21" class="headerlink" title="2016-04-28 18:21"></a>2016-04-28 18:21</h2><ol><li><a href="https://yeasy.gitbooks.io/docker_practice/content/index.html">Docker —— 从入门到实践</a> 【电子书】</li><li><a href="http://wiki.jikexueyuan.com/project/docker/">Docker 中文教程</a></li><li><a href="http://www.csdn.net/article/2015-07-21/2825268">如何将nodeclub构建成Docker镜像</a></li></ol>]]></content>
<summary type="html"><p>docker 入门使用</p></summary>
<category term="docker" scheme="https://www.sumaolin.com/categories/docker/"/>
<category term="docker" scheme="https://www.sumaolin.com/tags/docker/"/>
</entry>
<entry>
<title>移动端Web上传图片</title>
<link href="https://www.sumaolin.com/2016/04/06/%E7%A7%BB%E5%8A%A8%E7%AB%AFWeb%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87/"/>
<id>https://www.sumaolin.com/2016/04/06/%E7%A7%BB%E5%8A%A8%E7%AB%AFWeb%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87/</id>
<published>2016-04-06T10:04:42.000Z</published>
<updated>2022-01-20T04:12:09.028Z</updated>
<content type="html"><![CDATA[<p>最近遇到了移动端图片上传以及上传前对图片的缩放，旋转，裁剪等功能的需求，查看了图片的裁剪和旋转的插件基本上适合PC端交互，只找到了一个 <a href="http://fengyuanchen.github.io/cropper/">Cropper</a> 还可以，看来有些交互要自己思考设计！</p><span id="more"></span><h3 id="2016-04-14-【文件格式的转换，Base64-amp-Blob-amp-File】"><a href="#2016-04-14-【文件格式的转换，Base64-amp-Blob-amp-File】" class="headerlink" title="2016-04-14 【文件格式的转换，Base64 & Blob & File】"></a>2016-04-14 【文件格式的转换，Base64 & Blob & File】</h3><ol><li><a href="http://www.blogjava.net/jidebingfeng/articles/406171.html">javascript将base64编码的图片数据转换为file并提交</a><blockquote><p>测试chrome 浏览器，和iOS9.3 中可以（微信）【解决了canvas.toBlob()不支持问题】, 代码如下：</p></blockquote><figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript">convertBase64UrlToBlob: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">urlData, type</span>)</span>{<br> contentType = type || <span class="hljs-string">''</span>;<br> <span class="hljs-keyword">var</span> bytes=<span class="hljs-built_in">window</span>.atob(urlData.split(<span class="hljs-string">','</span>)[<span class="hljs-number">1</span>]); <span class="hljs-comment">//去掉url的头，并转换为byte</span><br> <span class="hljs-comment">//处理异常,将ascii码小于0的转换为大于0</span><br> <span class="hljs-keyword">var</span> ab = <span class="hljs-keyword">new</span> <span class="hljs-built_in">ArrayBuffer</span>(bytes.length);<br> <span class="hljs-keyword">var</span> ia = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Uint8Array</span>(ab);<br> <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i < bytes.length; i++) {<br> ia[i] = bytes.charCodeAt(i);<br> }<br><br> <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> Blob( [ab] , {<span class="hljs-attr">type</span> : contentType});<br>}<br></code></pre></td></tr></table></figure></li><li><a href="http://stackoverflow.com/questions/16245767/creating-a-blob-from-a-base64-string-in-javascript">Creating a Blob from a base64 string in JavaScript</a><figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">b64toBlob</span>(<span class="hljs-params">b64Data, contentType, sliceSize</span>) </span>{<br> contentType = contentType || <span class="hljs-string">''</span>;<br> sliceSize = sliceSize || <span class="hljs-number">512</span>;<br><br> <span class="hljs-keyword">var</span> byteCharacters = atob(b64Data);<br> <span class="hljs-keyword">var</span> byteArrays = [];<br><br> <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> offset = <span class="hljs-number">0</span>; offset < byteCharacters.length; offset += sliceSize) {<br> <span class="hljs-keyword">var</span> slice = byteCharacters.slice(offset, offset + sliceSize);<br><br> <span class="hljs-keyword">var</span> byteNumbers = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Array</span>(slice.length);<br> <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i < slice.length; i++) {<br> byteNumbers[i] = slice.charCodeAt(i);<br> }<br><br> <span class="hljs-keyword">var</span> byteArray = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Uint8Array</span>(byteNumbers);<br><br> byteArrays.push(byteArray);<br> }<br><br> <span class="hljs-keyword">var</span> blob = <span class="hljs-keyword">new</span> Blob(byteArrays, {<span class="hljs-attr">type</span>: contentType});<br> <span class="hljs-keyword">return</span> blob;<br>}<br></code></pre></td></tr></table></figure><blockquote><p>结合第一段代码可以发现，window.atob(b64Data.split(‘,’)[1]), 要去掉url的头，而且代码看起来更健壮！</p></blockquote></li></ol><h3 id="2016-04-20-20-17"><a href="#2016-04-20-20-17" class="headerlink" title="2016-04-20 20:17"></a>2016-04-20 20:17</h3><h4 id="修改canvas-toDataURL-默认的截图是96dpi-怎么调高dpi"><a href="#修改canvas-toDataURL-默认的截图是96dpi-怎么调高dpi" class="headerlink" title="修改canvas.toDataURL() 默认的截图是96dpi 怎么调高dpi"></a>修改canvas.toDataURL() 默认的截图是96dpi 怎么调高dpi</h4><ol><li><a href="http://stackoverflow.com/questions/14488849/higher-dpi-graphics-with-html5-canvas">Higher DPI graphics with HTML5 canvas</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL">HTMLCanvasElement.toDataURL()</a></li><li><a href="http://www.html5rocks.com/en/tutorials/canvas/hidpi/">High DPI Canvas</a></li></ol><h3 id="2016-06-02-14-05-01"><a href="#2016-06-02-14-05-01" class="headerlink" title="2016-06-02 14:05:01"></a>2016-06-02 14:05:01</h3><ol><li><a href="http://qiutc.me/post/uploading-image-file-in-mobile-fe.html">移动端图片上传的实践</a> 总结的挺详细的</li></ol><h2 id="参考链接"><a href="#参考链接" class="headerlink" title="参考链接"></a>参考链接</h2><ol><li><a href="https://github.com/xiangpaopao/blog/issues/7">移动端Web上传图片实践</a></li><li><a href="http://blog.csdn.net/iefreer/article/details/40740465">Canvas实例教程：图像移动、大小调整和裁剪</a></li></ol><h2 id="参考库"><a href="#参考库" class="headerlink" title="参考库"></a>参考库</h2><ol><li><p><a href="https://github.com/gokercebeci/canvasResize">canvasResize</a></p></li><li><p><a href="https://github.com/fengyuanchen/cropperjs">cropperjs</a></p><blockquote><p>without jQuery, 很强大的，API很清楚</p></blockquote></li></ol>]]></content>
<summary type="html"><p>最近遇到了移动端图片上传以及上传前对图片的缩放，旋转，裁剪等功能的需求，查看了图片的裁剪和旋转的插件基本上适合PC端交互，只找到了一个 <a href="http://fengyuanchen.github.io/cropper/">Cropper</a> 还可以，看来有些交互要自己思考设计！</p></summary>
<category term="F2E" scheme="https://www.sumaolin.com/categories/F2E/"/>
</entry>
<entry>
<title>readList</title>
<link href="https://www.sumaolin.com/2016/04/05/readList-1/"/>
<id>https://www.sumaolin.com/2016/04/05/readList-1/</id>
<published>2016-04-05T06:39:43.000Z</published>
<updated>2022-01-20T04:12:09.027Z</updated>
<content type="html"><![CDATA[<p>平时好文章 搜集</p><span id="more"></span><h1 id="这里作为读过的网络文章的链接汇总吧"><a href="#这里作为读过的网络文章的链接汇总吧" class="headerlink" title="这里作为读过的网络文章的链接汇总吧"></a>这里作为读过的网络文章的链接汇总吧</h1><h2 id="F2E"><a href="#F2E" class="headerlink" title="F2E"></a>F2E</h2><ol><li><a href="http://blog.csdn.net/kongjiea/article/details/38614695">css3用AnimationEnd判断动画是否完成， css3在动画完成后执行事件</a></li></ol><h3 id="2016-04-05"><a href="#2016-04-05" class="headerlink" title="2016-04-05"></a>2016-04-05</h3><ol><li><a href="http://www.ruanyifeng.com/blog/2013/06/emmet_and_haml.html">HTML代码简写法：Emmet和Haml</a></li></ol><pre><code>>Emmet支持的简写规则: <figure class="highlight html"><table><tr><td class="code"><pre><code class="hljs html">E 代表HTML标签。<br>E#id 代表id属性。<br>E.class 代表class属性。<br>E[attr=foo] 代表某一个特定属性。<br>E{foo} 代表标签包含的内容是foo。<br>E>N 代表N是E的子元素。<br>E+N 代表N是E的同级元素。<br>E^N 代表N是E的上级元素。<br></code></pre></td></tr></table></figure></code></pre><ol start="2"><li><a href="http://emmet.evget.com/">Emmet快捷方式查询</a></li></ol><h3 id="2016-04-12"><a href="#2016-04-12" class="headerlink" title="2016-04-12"></a>2016-04-12</h3><ol><li><a href="http://www.cnblogs.com/demix/archive/2009/11/28/1612715.html">@font-face与性能</a></li><li><a href="http://isux.tencent.com/icon-font.html">图标字体化浅谈</a></li></ol><h3 id="2016-04-14"><a href="#2016-04-14" class="headerlink" title="2016-04-14"></a>2016-04-14</h3><ol><li><a href="http://www.blogjava.net/jidebingfeng/articles/406171.html">javascript将base64编码的图片数据转换为file并提交</a><blockquote><p>测试chrome 浏览器，和iOS9.3 中可以（微信）【解决了canvas.toBlob()不支持问题】, 代码如下：</p></blockquote><figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript">convertBase64UrlToBlob: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">urlData, type</span>)</span>{<br> contentType = type || <span class="hljs-string">''</span>;<br> <span class="hljs-keyword">var</span> bytes=<span class="hljs-built_in">window</span>.atob(urlData.split(<span class="hljs-string">','</span>)[<span class="hljs-number">1</span>]); <span class="hljs-comment">//去掉url的头，并转换为byte</span><br> <span class="hljs-comment">//处理异常,将ascii码小于0的转换为大于0</span><br> <span class="hljs-keyword">var</span> ab = <span class="hljs-keyword">new</span> <span class="hljs-built_in">ArrayBuffer</span>(bytes.length);<br> <span class="hljs-keyword">var</span> ia = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Uint8Array</span>(ab);<br> <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i < bytes.length; i++) {<br> ia[i] = bytes.charCodeAt(i);<br> }<br><br> <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> Blob( [ab] , {<span class="hljs-attr">type</span> : contentType});<br>}<br></code></pre></td></tr></table></figure></li><li><a href="http://stackoverflow.com/questions/16245767/creating-a-blob-from-a-base64-string-in-javascript">Creating a Blob from a base64 string in JavaScript</a><figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">b64toBlob</span>(<span class="hljs-params">b64Data, contentType, sliceSize</span>) </span>{<br> contentType = contentType || <span class="hljs-string">''</span>;<br> sliceSize = sliceSize || <span class="hljs-number">512</span>;<br><br> <span class="hljs-keyword">var</span> byteCharacters = atob(b64Data);<br> <span class="hljs-keyword">var</span> byteArrays = [];<br><br> <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> offset = <span class="hljs-number">0</span>; offset < byteCharacters.length; offset += sliceSize) {<br> <span class="hljs-keyword">var</span> slice = byteCharacters.slice(offset, offset + sliceSize);<br><br> <span class="hljs-keyword">var</span> byteNumbers = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Array</span>(slice.length);<br> <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i < slice.length; i++) {<br> byteNumbers[i] = slice.charCodeAt(i);<br> }<br><br> <span class="hljs-keyword">var</span> byteArray = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Uint8Array</span>(byteNumbers);<br><br> byteArrays.push(byteArray);<br> }<br><br> <span class="hljs-keyword">var</span> blob = <span class="hljs-keyword">new</span> Blob(byteArrays, {<span class="hljs-attr">type</span>: contentType});<br> <span class="hljs-keyword">return</span> blob;<br>}<br></code></pre></td></tr></table></figure><blockquote><p>结合第一段代码可以发现，window.atob(b64Data.split(‘,’)[1]), 要去掉url的头，而且代码看起来更健壮！</p></blockquote></li></ol><h3 id="2016-04-16"><a href="#2016-04-16" class="headerlink" title="2016-04-16"></a>2016-04-16</h3><ol><li><a href="http://www.jianshu.com/p/3cb5c6f2421c">如何优雅地使用Sublime Text3</a>【很全的一篇使用指南】</li></ol><pre><code>1. _</code></pre><p>_<br> build System _<br>_<br> 【可以自己构建node 一键运行】<br> > 在sublime text中依次打开<code>Tools -> Build System -> New Build System... </code>粘贴以下代码后保存<code>(如Node.sublime-build)</code>, 然后把Build System设成Automatic<br> <figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript">{ <span class="hljs-string">"cmd"</span>: [<span class="hljs-string">"node"</span>, <span class="hljs-string">"--use-strict"</span>, <span class="hljs-string">"--harmony"</span>, <span class="hljs-string">"$file"</span>], <span class="hljs-string">"selector"</span>: <span class="hljs-string">"source.js"</span>}<br><br></code></pre></td></tr></table></figure><br> 2. _<br>_<br> WakaTime – 记录你的Code时间 _<br>_</p><pre><code> > WakaTime可以做到精确地统计到你花在某个项目上的时间;WakaTime针对不同的IDE，拥有不同的插件，在Sublime上安装着插件，就能统计到我使用Sublime进行的所有项目的行为。可以高效管理和知晓自己code时间 sublime & vsCode 都安装了WakaTime 插件了！3. _</code></pre><p>_<br> 定制属于自己的快捷键 _<br>_</p><pre><code> > 设置快捷键。在SublimeText里，打开Preferences -> Key Bindings - User，设置的快捷键。 这样结合1 就可以 快捷运行当前的node 文件了4. _</code></pre><p>_<br> <a href="http://www.bluesdream.com/blog/write-your-own-sublime-text2-plug.html">编写自己的Sublime Text2 插件</a> _<br>_<br> 【很简单的实例】</p><p> Sublime 是迄今为止用的使用的最好用的编辑器了，大部分时间工作时间都在使用，以前了解过其相关的 snipper, hotkey机制，实现了一些自己的定制，现在了解了build System , new Plugin 机制可以更深入的定制了，’一直想写个直接输入当前时间的 plugin’。</p><p> _<br>_<br> 刚发现了编辑Markdown 文件时sublime 中Ctrl + P输入 @ 会出现目录，真是神器啊！ _<br>_</p><ol start="2"><li><a href="https://luolei.org/track-your-time/">时间都去哪了?用RescueTime和WakaTime来记录你的时间</a></li></ol><pre><code>从上面文章中看到了的，感觉对自己很有用，最近拖延症晚期了，改变下，正使用Pomotodo 改正中……</code></pre><h3 id="2016-04-18"><a href="#2016-04-18" class="headerlink" title="2016-04-18"></a>2016-04-18</h3><ol><li><a href="http://www.tuicool.com/articles/3EVz2qB"> React Native 开发指南</a> 【Facebook官方出品，中译】</li></ol><h3 id="2016-04-19-15-12"><a href="#2016-04-19-15-12" class="headerlink" title="2016-04-19 15:12"></a>2016-04-19 15:12</h3><ol><li><a href="https://mingyili.github.io/2015/11/05.html#pagewrap">移动端底部input 样式布局修复方案</a></li></ol><pre><code>修复了input 父类元素 postion: abusolut or fixed 软键盘弹出覆盖 input 元素的问题通过 transform: translate3D(0,y,0) 整体向上滚动键盘的高度实现主要通过window resize() 事件监听触发的键盘弹起事件，这个事件在iOS 中无法监听，只有通过android 可以监听到，而且iOS下没有问题，所以只处理 Android 的resize 的事件就可以了知乎的相关讨论 [移动web页面，input获取焦点弹出系统虚拟键盘时，挡住input，求解决方案？](https://www.zhihu.com/question/32746176?sort=created)</code></pre><ol start="2"><li>15:25</li></ol><pre><code>Sublime Date plugin: F5 输入date+hour; Shift + F5 输入hour</code></pre><h3 id="2016-04-20"><a href="#2016-04-20" class="headerlink" title="2016-04-20"></a>2016-04-20</h3><ol><li><a href="http://www.appelsiini.net/projects/lazyload">Lazy Load Plugin for jQuery</a> 【图片懒加载】</li></ol><h3 id="2016-04-22-11-20"><a href="#2016-04-22-11-20" class="headerlink" title="2016-04-22 11:20"></a>2016-04-22 11:20</h3><ol><li>Dove Wedding 婚礼空间 预览模式下崩溃问题</li></ol><p> 昨天确定的swipe 初始化的时候会崩溃</p>]]></content>
<summary type="html"><p>平时好文章 搜集</p></summary>
<category term="ReadList" scheme="https://www.sumaolin.com/categories/ReadList/"/>
<category term="F2E" scheme="https://www.sumaolin.com/tags/F2E/"/>
<category term="前端" scheme="https://www.sumaolin.com/tags/%E5%89%8D%E7%AB%AF/"/>
<category term="笔记" scheme="https://www.sumaolin.com/tags/%E7%AC%94%E8%AE%B0/"/>
</entry>
<entry>
<title>自定义Yeoman生成器</title>
<link href="https://www.sumaolin.com/2016/04/03/%E8%87%AA%E5%AE%9A%E4%B9%89Yeoman%E7%94%9F%E6%88%90%E5%99%A8/"/>
<id>https://www.sumaolin.com/2016/04/03/%E8%87%AA%E5%AE%9A%E4%B9%89Yeoman%E7%94%9F%E6%88%90%E5%99%A8/</id>
<published>2016-04-02T23:51:23.000Z</published>
<updated>2022-01-20T04:12:09.029Z</updated>
<content type="html"><![CDATA[<p>年前整理的一篇文章：<a href="http://www.jscon.co/coding/frontend/yeoman_generator.html">自定义Yeoman生成器 —— JSCON-简时空</a>, 因为原链接的可读性太差，就通过MarkDown语法重新整理了下，根据该文章 构建了自己的yeoman generator ：<a href="https://github.com/sumaolin/generator-kmapp">generator-kmapp</a>, 只是简单的实现了模板复制，安装bower , 和npm 依赖模块的功能，这样实现一键构建业务中的开发环境：本地服务器，自动刷新，less自动编译，接口转发等功能。</p><span id="more"></span><h2 id="1-Getting-Started"><a href="#1-Getting-Started" class="headerlink" title="1 Getting Started"></a>1 Getting Started</h2><h3 id="1-1、设置Node模块"><a href="#1-1、设置Node模块" class="headerlink" title="1.1、设置Node模块"></a>1.1、设置Node模块</h3><p>Yeoman提供了generator-generator方便快速编写自己的生成器。</p><blockquote><p>安装: npm install -g generator-generator</p></blockquote><blockquote><p>运行: yo generator</p></blockquote><ul><li>创建一个名为generator-name的文件夹（name为你的生成器名）;【important】</li><li>创建package.json文件，这是NodeJS模块的“信息图”，可以手动或者使用命令npm init生成</li></ul><figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript">{<br> <span class="hljs-string">"name"</span>: <span class="hljs-string">"generator-name"</span>,<br> <span class="hljs-string">"version"</span>: <span class="hljs-string">"0.1.0"</span>,<br> <span class="hljs-string">"description"</span>: <span class="hljs-string">""</span>,<br> <span class="hljs-string">"keywords"</span>: [<span class="hljs-string">"yeoman-generator"</span>],<br> <span class="hljs-string">"dependencies"</span>: {<br> <span class="hljs-string">"yeoman-generator"</span>: <span class="hljs-string">"^0.17.3"</span><br> }<br>}<br></code></pre></td></tr></table></figure><blockquote><p>name属性必须要有generator-前缀；keywords属性必须包含yeoman-generator，务必确保是最新的，可运行命令npm install –save yeoman-generator完成更新/安装</p></blockquote><h3 id="1-2、文件树结构"><a href="#1-2、文件树结构" class="headerlink" title="1.2、文件树结构"></a>1.2、文件树结构</h3><ol><li>当调用yo name命令时，默认调用的是app生成器，对于的逻辑放置在app/文件夹下</li><li>当调用yo name:subcommand命令时，必须要有对于的subcommand/文件夹</li></ol><p>如果文件结构如下，则该生成器暴露yo name和yo name:router两个命令</p><figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript">├───package.json<br>├───app/<br>│ └───index.js<br>└───router/<br> └───index.js<br></code></pre></td></tr></table></figure><p>如果你不想把所有代码都放在根目录下，Yeoman提供了另外的一种方式：可以放在generators/目录下</p><figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript">├───package.json<br>└───generators/<br> ├───app/<br> │ └───index.js<br> └───router/<br> └───index.js<br></code></pre></td></tr></table></figure><h3 id="1-3、继承generator"><a href="#1-3、继承generator" class="headerlink" title="1.3、继承generator"></a>1.3、继承generator</h3><p>结构写好了，需要开始写实际的逻辑代码。Yeoman提供了基础生成器供你继承，这些基础生成器提供了很多方便的方法供你调用。基本写法：</p><figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> generators = <span class="hljs-built_in">require</span>(<span class="hljs-string">'yeoman-generator'</span>);<br><span class="hljs-built_in">module</span>.exports = generators.Base.extend();<br></code></pre></td></tr></table></figure><p>如果你的生成器需要name参数（比如yo name:router foo中的foo），想将它赋给this.name的话：</p><figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> generators = <span class="hljs-built_in">require</span>(<span class="hljs-string">'yeoman-generator'</span>);<br><span class="hljs-built_in">module</span>.exports = generators.NamedBase.extend();<br></code></pre></td></tr></table></figure><blockquote><p>上面两种方式都能用于创建app生成器或者子生成器，Base多用于app生成器，NamedBase多用于需要指定文件名的子生成器</p></blockquote><h3 id="1-4、重写构造函数"><a href="#1-4、重写构造函数" class="headerlink" title="1.4、重写构造函数"></a>1.4、重写构造函数</h3><p>有些方法只能在constructor方法中调用，常用于状态控制；可以传入构造函数重写默认的构造函数：</p><figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">module</span>.exports = generators.Base.extend({<br> <span class="hljs-comment">// The name `constructor` is important here</span><br> <span class="hljs-attr">constructor</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{<br> <span class="hljs-comment">// Calling the super constructor is important so our generator is correctly set up</span><br> generators.Base.apply(<span class="hljs-built_in">this</span>, <span class="hljs-built_in">arguments</span>);<br><br> <span class="hljs-comment">// Next, add your custom code</span><br> <span class="hljs-built_in">this</span>.option(<span class="hljs-string">'coffee'</span>); <span class="hljs-comment">// This method adds support for a `--coffee` flag</span><br> }<br>});<br></code></pre></td></tr></table></figure><h3 id="1-5、添加方法"><a href="#1-5、添加方法" class="headerlink" title="1.5、添加方法"></a>1.5、添加方法</h3><p>一般给原型添加的方法是按顺序执行的，不过后面我们会看到一些特殊的方法会触发不同的执行顺序：</p><figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">module</span>.exports = generators.Base.extend({<br> <span class="hljs-attr">method1</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{<br> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'method 1 just ran'</span>);<br> },<br> <span class="hljs-attr">method2</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{<br> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'method 2 just ran'</span>);<br> }<br>});<br></code></pre></td></tr></table></figure><h3 id="1-6、运行生成器"><a href="#1-6、运行生成器" class="headerlink" title="1.6、运行生成器"></a>1.6、运行生成器</h3><p>到了这一步，你已经拥有一个可以运行的生成器了。下一步就是检验生成器是否按自己的逻辑运行。由于是在本地开发生成器，在全局npm模块中并不存在，需要手动链接。进入generator-name/文件夹，运行：</p><figure class="highlight coffeescript"><table><tr><td class="code"><pre><code class="hljs coffeescript"><span class="hljs-built_in">npm</span> link<br></code></pre></td></tr></table></figure><p>这将自动安装工程依赖包，同时将本地文件链接进全局模块；运行完毕之后，你就可以调用yo name并看到之前定义的console.log信息。</p><p>至此，恭喜你完成了简单的生成器！</p><h3 id="1-7、找到工程根目录"><a href="#1-7、找到工程根目录" class="headerlink" title="1.7、找到工程根目录"></a>1.7、找到工程根目录</h3><p>当运行一个生成器，Yeoman将计算当前的文件目录信息。最为关键的是，Yeoman将.yo-rc.json所在的目录作为工程的根目录，之后Yeoman将当前文件目录跳转到根目录下运行请求的生成器。这个.yo-rc.json文件是由Storage模块创建的，在生成器内部调用this.config.save()方法就会创建它。所以，如果你发现你的生成器不是在你当前工作目录下运行，请确保。yo-rc.json不存在你目录的其他层级中</p><h2 id="2、运行上下文"><a href="#2、运行上下文" class="headerlink" title="2、运行上下文"></a>2、运行上下文</h2><h3 id="2-1、静态方法都是Action"><a href="#2-1、静态方法都是Action" class="headerlink" title="2.1、静态方法都是Action"></a>2.1、静态方法都是Action</h3><p>如果一个函数直接作为生成器的原型（prototype）的属性，则会当做action自动（按顺序）执行。如何声明不会自动执行的辅助函数以及私有函数呢？有三种方法：</p><ol><li>给方法前面添加前缀（例如：_method）</li><li>使用实例函数声明（this.mehtod）<figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript">generators.Base.extend({<br> <span class="hljs-attr">init</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{<br> <span class="hljs-built_in">this</span>.helperMethod = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{<br> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'won\'t be called automatically'</span>);<br> };<br> }<br>});<br></code></pre></td></tr></table></figure></li><li>继承自父类生成器<figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> MyBase = generators.Base.extend({<br> <span class="hljs-attr">helper</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{<br> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'won\'t be called automatically'</span>);<br> }<br>});<br><br><span class="hljs-built_in">module</span>.exports = MyBase.extend({<br> <span class="hljs-attr">exec</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{<br> <span class="hljs-built_in">this</span>.helper();<br> }<br>});<br></code></pre></td></tr></table></figure><h3 id="2-2、运行顺序"><a href="#2-2、运行顺序" class="headerlink" title="2.2、运行顺序"></a>2.2、运行顺序</h3>Yeoman是按照优先级顺序依次执行所定义的方法。当你定义的函数名字是Yeoman定义的优先级函数名时，会自动将该函数列入到所在优先级队列中，否则就会列入到default优先层级队列中。</li></ol><p>依次执行的方法名称为：</p><ol><li><strong>initializing</strong> - 你的初始化方法（检测当前目录状态，获取配置等）</li><li><strong>prompting</strong> – 给用户展示选项提示（调用this.prompt()）</li><li><strong>configuring</strong> – 保存用户配置项，同时配置工程（创建.editorconfig文件或者其他metadata文件）</li><li><strong>default</strong></li><li><strong>writing</strong> – 用于生成和生成器相关的文件（比如routes,controllers等）</li><li><strong>conflicts</strong> – 用于处理冲突异常（内部使用）</li><li><strong>install</strong> – 用于安装相关库 (npm, bower)</li><li><strong>end</strong> – 最后调用，常用于清理、道别等</li></ol><h2 id="3、UI"><a href="#3、UI" class="headerlink" title="3、UI"></a>3、UI</h2><p>Yeoman默认是跑在终端的，但不限于终端。因此记住，不要使用console.log()或者process.stdout.write()向用户反馈信息，应当使用generator.log方法。</p><h3 id="3-1、提示框"><a href="#3-1、提示框" class="headerlink" title="3.1、提示框"></a>3.1、提示框</h3><p>Yeoman中最为主要的UI交互就是提示框，由Inquirer.js组件提供。使用下列方式调用：</p><figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">module</span>.exports = generators.Base.extend({<br> <span class="hljs-attr">prompting</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{<br> <span class="hljs-keyword">var</span> done = <span class="hljs-built_in">this</span>.async();<br> <span class="hljs-built_in">this</span>.prompt({<br> <span class="hljs-attr">type</span> : <span class="hljs-string">'input'</span>,<br> <span class="hljs-attr">name</span> : <span class="hljs-string">'name'</span>,<br> <span class="hljs-attr">message</span> : <span class="hljs-string">'Your project name'</span>,<br> <span class="hljs-attr">default</span> : <span class="hljs-built_in">this</span>.appname <span class="hljs-comment">// Default to current folder name</span><br> }, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">answers</span>) </span>{<br> <span class="hljs-built_in">this</span>.log(answers.name);<br> done();<br> }.bind(<span class="hljs-built_in">this</span>));<br> }<br>})<br></code></pre></td></tr></table></figure><blockquote><p>这里我们使用promoting的优先层级 。由于咨询用户是一个异步的过程，会卡住命令逻辑的运行，所以需要调用yo的异步方法：<code>var cb = this.async();</code></p></blockquote><h3 id="3-2、记住用户偏好"><a href="#3-2、记住用户偏好" class="headerlink" title="3.2、记住用户偏好"></a>3.2、记住用户偏好</h3><p>当用户运行你的生成器时，很多时候会输入相同的答案；Yeoman扩展了Inquirer.js的API，额外增加了store的属性表示用户可以将之前填写过的答案作为后续的默认答案：</p><figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">this</span>.prompt({<br> <span class="hljs-attr">type</span> : <span class="hljs-string">'input'</span>,<br> <span class="hljs-attr">name</span> : <span class="hljs-string">'username'</span>,<br> <span class="hljs-attr">message</span> : <span class="hljs-string">'What\'s your Github username'</span>,<br> <span class="hljs-attr">store</span> : <span class="hljs-literal">true</span><br>}, callback);<br></code></pre></td></tr></table></figure><blockquote><p>提供默认答案时，程序会强制用户输入</p></blockquote><h3 id="3-3、命令行参数"><a href="#3-3、命令行参数" class="headerlink" title="3.3、命令行参数"></a>3.3、命令行参数</h3><p>可以直接像在命令中传入参数：</p><figure class="highlight bash"><table><tr><td class="code"><pre><code class="hljs bash">yo webapp my-project<br></code></pre></td></tr></table></figure><p>在这里，my-project作为第一个参数。为了提示系统我们期望用户传入参数，需要调用generator.argument()方法，该方法接受name作为参数，以及额外的限制条件。</p><blockquote><p> 该argument方法必须在构造器中调用。这些条件是（key/value型）：</p></blockquote><figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-string">'desc'</span>： <span class="hljs-comment">//Description for the argument</span><br><span class="hljs-string">'required'</span>： <span class="hljs-comment">// Boolean whether it is required</span><br><span class="hljs-string">'optional'</span>： <span class="hljs-comment">//Boolean whether it is optional</span><br><span class="hljs-string">'type'</span>： <span class="hljs-comment">// String, Number, Array, or Object</span><br><span class="hljs-string">'defaults'</span>： <span class="hljs-comment">//Default value for this argument</span><br><span class="hljs-string">'banner'</span>: <span class="hljs-comment">//String to show on usage notes (this one is provided by default)</span><br></code></pre></td></tr></table></figure><p>示例代码：</p><figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">module</span>.exports = generators.Base.extend({<br> <span class="hljs-comment">// note: arguments and options should be defined in the constructor.</span><br> <span class="hljs-attr">constructor</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{<br> generators.Base.apply(<span class="hljs-built_in">this</span>, <span class="hljs-built_in">arguments</span>);<br><br> <span class="hljs-comment">// This makes `appname` a required argument.</span><br> <span class="hljs-built_in">this</span>.argument(<span class="hljs-string">'appname'</span>, { <span class="hljs-attr">type</span>: <span class="hljs-built_in">String</span>, <span class="hljs-attr">required</span>: <span class="hljs-literal">true</span> });<br> <span class="hljs-comment">// And you can then access it later on this way; e.g. CamelCased</span><br> <span class="hljs-built_in">this</span>.appname = <span class="hljs-built_in">this</span>._.camelize(<span class="hljs-built_in">this</span>.appname);<br> }<br>});<br></code></pre></td></tr></table></figure><h3 id="3-4、选项"><a href="#3-4、选项" class="headerlink" title="3.4、选项"></a>3.4、选项</h3><p>选项看上去像参数，不过它前面多了两短横杠（flags）：</p><figure class="highlight bash"><table><tr><td class="code"><pre><code class="hljs bash">yo webapp --coffee<br></code></pre></td></tr></table></figure><blockquote><p>使用generator.option()方法获取选项值，该方法也有可选的限制属性（key/value型）：</p></blockquote><figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-string">'desc'</span>： <span class="hljs-comment">// Description for the option</span><br><span class="hljs-string">'type'</span> ：<span class="hljs-comment">// Either Boolean, String or Number</span><br><span class="hljs-string">'defaults'</span>： <span class="hljs-comment">// Default value</span><br><span class="hljs-string">'hide'</span>： <span class="hljs-comment">//Boolean whether to hide from help</span><br></code></pre></td></tr></table></figure><p>举例：</p><figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-built_in">module</span>.exports = generators.Base.extend({<br> <span class="hljs-comment">// note: arguments and options should be defined in the constructor.</span><br> <span class="hljs-attr">constructor</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{<br> generators.Base.apply(<span class="hljs-built_in">this</span>, <span class="hljs-built_in">arguments</span>);<br><br> <span class="hljs-comment">// This method adds support for a `--coffee` flag</span><br> <span class="hljs-built_in">this</span>.option(<span class="hljs-string">'coffee'</span>);<br> <span class="hljs-comment">// And you can then access it later on this way; e.g.</span><br> <span class="hljs-built_in">this</span>.scriptSuffix = (<span class="hljs-built_in">this</span>.options.coffee ? <span class="hljs-string">".coffee"</span>: <span class="hljs-string">".js"</span>);<br> }<br>});<br></code></pre></td></tr></table></figure><h2 id="4、处理依赖"><a href="#4、处理依赖" class="headerlink" title="4、处理依赖"></a>4、处理依赖</h2><p>在运行生成器时，经常会伴随着npm和bower命令去安装依赖文件，Yeoman已经将这些功能抽离出来方便用户使用</p><h3 id="4-1、npm"><a href="#4-1、npm" class="headerlink" title="4.1、npm"></a>4.1、npm</h3><p>使用generator.npmInstall()运行npm安装命令，无论你调用多少次，Yeoman会确保该命令只执行一次</p><figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript">generators.Base.extend({<br> <span class="hljs-attr">installingLodash</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{<br> <span class="hljs-keyword">var</span> done = <span class="hljs-built_in">this</span>.async();<br> <span class="hljs-built_in">this</span>.npmInstall([<span class="hljs-string">'lodash'</span>], { <span class="hljs-string">'saveDev'</span>: <span class="hljs-literal">true</span> }, done);<br> }<br>}):<br></code></pre></td></tr></table></figure><p>上面的代码等价于命令行：</p><figure class="highlight bash"><table><tr><td class="code"><pre><code class="hljs bash">npm install lodash --save-dev<br></code></pre></td></tr></table></figure><h3 id="4-2、bower"><a href="#4-2、bower" class="headerlink" title="4.2、bower"></a>4.2、bower</h3><p>使用generator.bowerInstall()运行bower安装命令，无论你调用多少次，Yeoman会确保该命令只执行一次</p><figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript">generators.Base.extend({<br> <span class="hljs-attr">end</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{<br> <span class="hljs-built_in">this</span>.spawnCommand(<span class="hljs-string">'composer'</span>, [<span class="hljs-string">'install'</span>]);<br> }<br>});<br></code></pre></td></tr></table></figure><blockquote><p>记得在end队列中调用spawnCommand命令,否则用户没有耐心等那么久的。</p></blockquote><h2 id="5、文件系统"><a href="#5、文件系统" class="headerlink" title="5、文件系统"></a>5、文件系统</h2><p>方便文件流的输入输出，Yeoman使用两种位置环境： <strong>destination context</strong> 和 <strong>template context</strong></p><h3 id="5-1、destination-contex-目标位置上下文"><a href="#5-1、destination-contex-目标位置上下文" class="headerlink" title="5.1、destination contex 目标位置上下文"></a>5.1、destination contex 目标位置上下文</h3><p>destination context 目标位置上下文，这里的“目标”是指你想架构应用的位置。这个位置要么是当前文件夹，要么就是文件.yo-rc.json所在的父文件夹位置；</p><blockquote><p>该.yo-rc.json文件确保所有的终端用户都以同样的方式方法生成器所在的子文件（夹）</p></blockquote><p>使用<code>generator.destinationRoot()</code>获取目标位置上下文；也可以手动传参重新设置，当然没有人愿意那么做的；用<code>generator.destinationPath('sub/path')</code>拼接所需要的路径字符串。示例：</p><figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">// Given destination root is ~/projects</span><br>generators.Base.extend({<br> <span class="hljs-attr">paths</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{<br> <span class="hljs-built_in">this</span>.destinationRoot();<br> <span class="hljs-comment">// returns '~/projects'</span><br><br> <span class="hljs-built_in">this</span>.destinationPath(<span class="hljs-string">'index.js'</span>);<br> <span class="hljs-comment">// returns '~/projects/index.js'</span><br> }<br>});<br></code></pre></td></tr></table></figure><h3 id="5-2、template-context-模板位置上下文"><a href="#5-2、template-context-模板位置上下文" class="headerlink" title="5.2、template context 模板位置上下文"></a>5.2、template context 模板位置上下文</h3><p>template context 模板位置上下文 ：就是你模板文件所在的文件夹位置，这个文件夹基本上是你读取并拷贝文件的地方。默认的template context是<code>./templates/</code>，你可以通过<code>generator.sourceRoot('new/template/path')</code>指定新的模板文件夹位置；与上面类似，可使用<code>generator.sourceRoot()</code>获取模板位置，使用<code>generator.templatePath('app/index.js')</code>拼接路径。示例：</p><figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript">generators.Base.extend({<br> <span class="hljs-attr">paths</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{<br> <span class="hljs-built_in">this</span>.sourceRoot();<br> <span class="hljs-comment">// returns './templates'</span><br><br> <span class="hljs-built_in">this</span>.templatePath(<span class="hljs-string">'index.js'</span>);<br> <span class="hljs-comment">// returns '~/templates/index.js'</span><br> }<br>});<br></code></pre></td></tr></table></figure><h3 id="5-3、文件操作API"><a href="#5-3、文件操作API" class="headerlink" title="5.3、文件操作API"></a>5.3、文件操作API</h3><p>Yeoman把所有的文件方法都放在this.fs中了，它是<a href="https://github.com/sboudrias/mem-fs-editor">mem-fs-editor</a>的一个示例对象，可自行查看API接口。<br><strong>示例：拷贝模板文件</strong><br>假如。、templates/index.html文件内容为：</p><figure class="highlight vbscript-html"><table><tr><td class="code"><pre><code class="hljs vbscript-html"><span class="xml"><span class="hljs-tag"><<span class="hljs-name">html</span>></span></span><br><span class="xml"> <span class="hljs-tag"><<span class="hljs-name">head</span>></span></span><br><span class="xml"> <span class="hljs-tag"><<span class="hljs-name">title</span>></span></span><span class="vbscript"><%= title %></span><span class="xml"><span class="hljs-tag"></<span class="hljs-name">title</span>></span></span><br><span class="xml"> <span class="hljs-tag"></<span class="hljs-name">head</span>></span></span><br><span class="xml"><span class="hljs-tag"></<span class="hljs-name">html</span>></span></span><br></code></pre></td></tr></table></figure><p>我们使用copyTpl方法拷贝模板：（更多参看<a href="https://lodash.com/docs#template">Lodash template syntax</a>）</p><figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript">generators.Base.extend({<br> <span class="hljs-attr">writing</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{<br> <span class="hljs-built_in">this</span>.fs.copyTpl(<br> <span class="hljs-built_in">this</span>.templatePath(<span class="hljs-string">'index.html'</span>),<br> <span class="hljs-built_in">this</span>.destinationPath(<span class="hljs-string">'public/index.html'</span>),<br> { <span class="hljs-attr">title</span>: <span class="hljs-string">'Templating with Yeoman'</span> }<br> );<br> }<br>});<br></code></pre></td></tr></table></figure><p>一旦生成器运行完成，我们就会获得public/index.html</p><figure class="highlight bash"><table><tr><td class="code"><pre><code class="hljs bash">Templating with Yeoman<br></code></pre></td></tr></table></figure><blockquote><p>Yeoman仍保留了旧的文件API，可参看 <a href="http://yeoman.github.io/generator/actions.html">API documentation</a> 。旧的文件API总是假设文件来自template context，写文件总是在destination context中，所以它们不要求你传入文件路径信息，程序会自动处理</p></blockquote><p><strong>建议</strong>：尽可能使用新的<code>fs</code>API，它的使用起来比较清晰</p><h2 id="6、储存用户设置"><a href="#6、储存用户设置" class="headerlink" title="6、储存用户设置"></a>6、储存用户设置</h2><p>常常需要存储用户的设置项并在子生成器中使用，比如用户使用什么编程语言（比如使用CoffeeScript？）等这些配置项都存储在.yo-rc.json中（使用 <a href="http://yeoman.github.io/generator/Storage.html">Yeoman Storage API</a>.）,可以通过<code>generator.config</code>对象获取API方法。</p><h3 id="6-1、常用方法"><a href="#6-1、常用方法" class="headerlink" title="6.1、常用方法"></a>6.1、常用方法</h3><ol><li><p><code>generator.config.save()</code><br>保存配置项到文件.yo-rc.json文件中（若文件不存在将自动 创建），由于该文件决定工程的根目录，因而一个最佳实践就是：就算什么也没有也应当调用save方法。</p><blockquote><p>每次设置配置项都会自动调用save方法，因此你可以不用显示调用</p></blockquote></li><li><p><code>generator.config.set(key,val)</code></p> <figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript"><span class="hljs-string">"Name"</span>: <span class="hljs-string">"用于存储的键"</span>,<br><span class="hljs-string">"val"</span> : <span class="hljs-string">"任何JSON类型的值（String，Number, Array, Object）"</span><br></code></pre></td></tr></table></figure></li><li><p><code>generator.config.get()</code><br>根据键获得配置项</p></li><li><p><code>generator.config.getAll()</code><br>获取可用的所有配置信息；主要返回值不是按引用返回的，所以要更改里面的配置项还是需要调用set方法。</p></li><li><p><code>generator.config.delete()</code><br>删除某个键值（及其值）</p></li><li><p><code>generator.config.defaults()</code><br>将对象作为默认的配置信息，采用不覆盖原则</p></li></ol><h3 id="6-2、-yo-rc-json-文件结构"><a href="#6-2、-yo-rc-json-文件结构" class="headerlink" title="6.2、.yo-rc.json 文件结构"></a>6.2、.yo-rc.json 文件结构</h3><p>该文件可存储多个生成器的信息，每个生成器依据名字划分命名空间防止冲突，这也意味着每个生成器的配置项只能被子生成器读取到，不同生成器间的配置信息不能通过 Yeoman Storage API.访问。（使用命令行参数或者选项在不同构造器间传递参数。</p><p>文件样本：</p><figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs javascript">{<br> <span class="hljs-string">"generator-backbone"</span>: {<br> <span class="hljs-string">"requirejs"</span>: <span class="hljs-literal">true</span>,<br> <span class="hljs-string">"coffee"</span>: <span class="hljs-literal">true</span><br> },<br> <span class="hljs-string">"generator-gruntfile"</span>: {<br> <span class="hljs-string">"compass"</span>: <span class="hljs-literal">false</span><br> }<br>}<br></code></pre></td></tr></table></figure><h2 id="参考文档"><a href="#参考文档" class="headerlink" title="参考文档"></a>参考文档</h2><ol><li><a href="http://yeoman.io/authoring/">WRITING YOUR OWN YEOMAN GENERATOR</a></li><li><a href="http://www.html-js.com/article/1732">学习Bower – 前端开发包管理工具</a><blockquote><p> 原文的2个链接失效了，不放上来了</p></blockquote></li></ol><h2 id="整理文档"><a href="#整理文档" class="headerlink" title="整理文档"></a>整理文档</h2><ol><li><a href="http://www.jscon.co/coding/frontend/yeoman_generator.html">自定义Yeoman生成器 —— JSCON-简时空</a></li></ol>]]></content>
<summary type="html"><p>年前整理的一篇文章：<a href="http://www.jscon.co/coding/frontend/yeoman_generator.html">自定义Yeoman生成器 —— JSCON-简时空</a>, 因为原链接的可读性太差，就通过MarkDown语法重新整理了下，根据该文章 构建了自己的yeoman generator ：<a href="https://github.com/sumaolin/generator-kmapp">generator-kmapp</a>, 只是简单的实现了模板复制，安装bower , 和npm 依赖模块的功能，这样实现一键构建业务中的开发环境：本地服务器，自动刷新，less自动编译，接口转发等功能。</p></summary>
<category term="node" scheme="https://www.sumaolin.com/categories/node/"/>
<category term="F2E" scheme="https://www.sumaolin.com/tags/F2E/"/>
<category term="node" scheme="https://www.sumaolin.com/tags/node/"/>
<category term="f2e" scheme="https://www.sumaolin.com/tags/f2e/"/>
<category term="yeoman" scheme="https://www.sumaolin.com/tags/yeoman/"/>
<category term="kmapp" scheme="https://www.sumaolin.com/tags/kmapp/"/>
<category term="generator" scheme="https://www.sumaolin.com/tags/generator/"/>
</entry>
<entry>
<title>webuploader</title>
<link href="https://www.sumaolin.com/2016/03/25/webuploader/"/>
<id>https://www.sumaolin.com/2016/03/25/webuploader/</id>
<published>2016-03-25T10:57:27.000Z</published>
<updated>2022-01-20T04:12:09.028Z</updated>
<content type="html"><![CDATA[<p>很早就听说<a href="http://fex.baidu.com/webuploader/">webuploader</a>上传插件了，当时看到演示，感觉很惊艳，这次遇到的项目有上传图片的核心需求，就建议后端配合用下，比较Demo里的后端实现是通过PHP实现的，前端折腾下体验效果</p><span id="more"></span><h1 id="Dove-Wedding-使用中遇到的问题"><a href="#Dove-Wedding-使用中遇到的问题" class="headerlink" title="Dove Wedding 使用中遇到的问题"></a>Dove Wedding 使用中遇到的问题</h1><ol><li>请柬 webuploader 中多次选取图片bug，第一二次可以，第三次无法选取，同一文件不无法重复选择</li></ol><blockquote><p>duplicate {Boolean} [可选] [默认值：undefined] 去重， 根据文件名字、文件大小和最后修改时间来生成hash Key.</p></blockquote><p> 默认情况下是选取相同文件的时候不会触发 ‘fileQueued’ 事件 只有设置 ‘为非零’ 时候才会触发 ‘fileQueued’ 一直以为要设置为 ‘true’ or ‘false’, 很坑的参数！翻了好久的 <a href="https://github.com/fex-team/webuploader/issues/71">issues</a></p><p> _<br>_<br> 上面解决了无法选取同一文件的问题 _<br>_</p>]]></content>
<summary type="html"><p>很早就听说<a href="http://fex.baidu.com/webuploader/">webuploader</a>上传插件了，当时看到演示，感觉很惊艳，这次遇到的项目有上传图片的核心需求，就建议后端配合用下，比较Demo里的后端实现是通过PHP实现的，前端折腾下体验效果</p></summary>
<category term="F2E" scheme="https://www.sumaolin.com/categories/F2E/"/>
<category term="F2E" scheme="https://www.sumaolin.com/tags/F2E/"/>
<category term="webuploader" scheme="https://www.sumaolin.com/tags/webuploader/"/>
<category term="upload" scheme="https://www.sumaolin.com/tags/upload/"/>
</entry>
<entry>
<title>web storage api</title>
<link href="https://www.sumaolin.com/2016/02/24/web-storage-api/"/>
<id>https://www.sumaolin.com/2016/02/24/web-storage-api/</id>
<published>2016-02-24T02:14:24.000Z</published>
<updated>2022-01-20T04:12:09.028Z</updated>
<content type="html"><![CDATA[<p>项目中想加入 webStorage 减小网络开销，提高加载速度，增强用户体验，想系统的看下 web storage方面的文章！</p><span id="more"></span><h2 id="Web-Storage-API"><a href="#Web-Storage-API" class="headerlink" title="Web Storage API"></a>Web Storage API</h2><h3 id="参考文章"><a href="#参考文章" class="headerlink" title="参考文章"></a>参考文章</h3><p>早上在几个前端同事的桌子上翻到的 <a href="http://book.douban.com/subject/5402708/">HTML5高级程序设计</a> 相关的基础知识看第9章补充的。然后搜索下网络知识：</p><ol><li><p><a href="http://www.zhangxinxu.com/wordpress/2011/09/html5-localstorage%E6%9C%AC%E5%9C%B0%E5%AD%98%E5%82%A8%E5%AE%9E%E9%99%85%E5%BA%94%E7%94%A8%E4%B8%BE%E4%BE%8B/">HTML5 localStorage本地存储实际应用举例</a></p></li><li><p><a href="http://adamed.iteye.com/blog/1698740">localStorage、sessionStorage用法总结</a></p></li></ol><pre><code>>不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。</code></pre><ol start="3"><li><p><a href="https://imququ.com/post/summary-of-my-blog-optimization.html">本博客零散优化点汇总</a></p></li><li><p><a href="https://imququ.com/post/enhance-security-for-ls-code.html">使用 SRI 增强 localStorage 代码安全</a></p></li><li><p><a href="http://blog.csdn.net/a497785609/article/details/48321405">Web移动端使用localStorage缓存Js和css文件</a> _<br>_<br>推荐 _<br>_</p></li></ol><ol start="6"><li><p><a href="http://www.w3ctech.com/topic/284">基于 postMessage 和 localStorage 的跨域本地存储方案</a></p></li><li><p><a href="http://www.w3ctech.com/topic/767">【译】在本地存储中保存图片和文件</a> _<br>_<br>推荐 _<br>_</p></li></ol><ol start="8"><li><p><a href="http://www.w3ctech.com/topic/284">基于 postMessage 和 localStorage 的跨域本地存储方案</a></p></li><li><p><a href="https://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/">Storing images and files in IndexedDB</a></p></li><li><p><a href="https://hacks.mozilla.org/2012/02/saving-images-and-files-in-localstorage/">Saving images and files in localStorage</a></p></li></ol><h3 id="实践"><a href="#实践" class="headerlink" title="实践"></a>实践</h3><p> 参考 上面的文章 5 对 所有的js 和 css 进行localStorage 缓存，每个缓存文件的链接可以通过v=new Date().getTime() 进行细化的版本控制，需要更新的添加 参数，不需要的不更新</p><h4 id="Next"><a href="#Next" class="headerlink" title="Next"></a>Next</h4><ol><li>localStorage 本地存储 的require(‘js’) 模式的调用</li></ol><h5 id="20160401-更新"><a href="#20160401-更新" class="headerlink" title="20160401 更新"></a>20160401 更新</h5><ol><li><a href="http://www.famanoder.com/bokes/56fd271ad20b0ffc34ae5983">“高三”笔记之动态JS、动态样式</a></li></ol><h2 id="关于-application-manifest"><a href="#关于-application-manifest" class="headerlink" title="关于 application manifest"></a>关于 application manifest</h2><ol><li><p><a href="http://www.cnblogs.com/_franky/archive/2012/11/23/2783947.html">manifest 和 application cache</a></p></li><li><p><a href="http://www.jnecw.com/p/490">HTML5 离线存储实战之manifest（附缓存整个文件夹的方法）</a></p></li><li><p><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Using_the_application_cache">MDN 使用应用缓存</a> 够详尽！</p></li></ol><h5 id="2016-04-18"><a href="#2016-04-18" class="headerlink" title="2016-04-18"></a>2016-04-18</h5><ol><li><p><a href="http://js8.in/2015/12/06/%E6%89%8B%E6%9C%BA%E7%99%BE%E5%BA%A6localstorage%E7%BB%86%E7%B2%92%E5%BA%A6%E7%BC%93%E5%AD%98%E4%BB%8B%E7%BB%8D/">手机百度localstorage细粒度缓存介绍</a></p></li><li><p><a href="http://js8.in/2014/05/28/%E6%89%8B%E6%9C%BA%E7%99%BE%E5%BA%A6%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96%E4%B9%8B%E8%B7%AF/">手机百度前端工程化之路</a></p></li></ol><h3 id="疑问"><a href="#疑问" class="headerlink" title="疑问"></a>疑问</h3><h5 id="1-application-cache-数据量的大小？"><a href="#1-application-cache-数据量的大小？" class="headerlink" title="1. application cache 数据量的大小？"></a>1. application cache 数据量的大小？</h5><p>不像localStorage 多数资料给出明确的大小是 5M, 查询的资料中很少提及 application cache 的大小，目前找到的文章中形成了两张说法：</p><ol><li><p><a href="http://www.html5rocks.com/zh/tutorials/appcache/beginner/">应用缓存初级使用指南</a></p><blockquote><p>网站的缓存数据量不得超过 5 MB。不过，如果您要编写的是针对 Chrome 网上应用店的应用，可使用 unlimitedStorage 取消该限制</p></blockquote></li><li><p><a href="http://blog.csdn.net/spring21st/article/details/7222390">[HTML5]Application Cache使用中需要注意的事项</a></p><blockquote><p> Safari桌面浏览器(Mac以及 Windows)没有限制<br> Mobile Safari限制为10MB<br> Chrome限制为5MB<br> Android浏览器对应用程序缓存大小没有限制<br> Firefox桌面版有无限的应用程序缓存大小<br> Opera的应用程序缓存大小可以由用户管理，但有一个默认大小50MB</p></blockquote></li></ol><pre><code>各种浏览器的的 数据量的大小是不一样的。查看 html5 [Application cache API 官方的文件](https://www.w3.org/TR/2011/WD-html5-20110405/offline.html#disk-space)，也是支持各个浏览器自己定义的 允许的disk space 大小，甚至允许用户管理。</code></pre><p> _<br>_<br> 最终的方案 ：通用的application cache disk space 限制在5M _<br>_</p><p> _<br>_<br> tip: _<br>_<br> <a href="chrome://appcache-internals/">chrome://appcache-internals/</a> 可以查看chorme 中 application cache 的使用大小，亲自证实不止 5M</p><h5 id="2-想缓存的文件太多了，手写很麻烦，怎么办呢？"><a href="#2-想缓存的文件太多了，手写很麻烦，怎么办呢？" class="headerlink" title="2. 想缓存的文件太多了，手写很麻烦，怎么办呢？"></a>2. 想缓存的文件太多了，手写很麻烦，怎么办呢？</h5><ol><li><a href="http://www.jb51.net/html5/376884.html">详解HTML5中的manifest缓存使用</a> 中使用 <a href="https://www.npmjs.com/package/grunt-manifest">grunt-manifest</a>自动生成manifest文件。因为我的构建工具使用的是gulp 所以去npmjs 搜索了<a href="https://www.npmjs.com/package/gulp-manifest">gulp-manifest</a>，感兴趣的看官方文档吧，很详尽！</li></ol><h4 id="3-js控制-缓存文件的更新"><a href="#3-js控制-缓存文件的更新" class="headerlink" title="3. js控制 缓存文件的更新"></a>3. js控制 缓存文件的更新</h4><p> 参考：<a href="http://www.html5rocks.com/zh/tutorials/appcache/beginner/">应用缓存初级使用指南</a><br> <figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs Javascript"><span class="hljs-comment">// Check if a new cache is available on page load.</span><br><span class="hljs-built_in">window</span>.addEventListener(<span class="hljs-string">'load'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>{<br><br> <span class="hljs-built_in">window</span>.applicationCache.addEventListener(<span class="hljs-string">'updateready'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>{<br> <span class="hljs-keyword">if</span> (<span class="hljs-built_in">window</span>.applicationCache.status == <span class="hljs-built_in">window</span>.applicationCache.UPDATEREADY) {<br> <span class="hljs-comment">// Browser downloaded a new app cache.</span><br> <span class="hljs-comment">// Swap it in and reload the page to get the new hotness.</span><br> <span class="hljs-built_in">window</span>.applicationCache.swapCache();<br> <span class="hljs-keyword">if</span> (confirm(<span class="hljs-string">'A new version of this site is available. Load it?'</span>)) {<br> <span class="hljs-built_in">window</span>.location.reload();<br> }<br> } <span class="hljs-keyword">else</span> {<br> <span class="hljs-comment">// Manifest didn't changed. Nothing new to server.</span><br> }<br> }, <span class="hljs-literal">false</span>);<br><br>}, <span class="hljs-literal">false</span>);<br><br></code></pre></td></tr></table></figure></p><h5 id="4-注意事项"><a href="#4-注意事项" class="headerlink" title="4. 注意事项"></a>4. 注意事项</h5><ol><li><a href="http://blog.csdn.net/fdipzone/article/details/12718945"> HTML5 使用application cache 接口实现离线数据缓存</a></li></ol><blockquote><ol><li>站点离线存储的容量限制是5M<ol start="2"><li>如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程将视为失败，浏览器继续全部使用老的缓存</li><li>引用manifest的html必须与manifest文件同源，在同一个域下</li><li>在manifest中使用的相对路径，相对参照物为manifest文件</li><li>CACHE MANIFEST字符串应在第一行，且必不可少</li><li>系统会自动缓存引用清单文件的 HTML 文件</li><li>manifest文件中CACHE则与NETWORK，FALLBACK的位置顺序没有关系，如果是隐式声明需要在最前面</li><li>FALLBACK中的资源必须和manifest文件同源</li><li>当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。</li><li>站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问</li><li>当manifest文件发生改变时，资源请求本身也会触发更新</li></ol></li></ol></blockquote><ol start="2"><li><a href="http://www.cnblogs.com/_franky/archive/2012/11/23/2783947.html">manifest 和 application cache</a></li></ol><blockquote><ol><li>备用项如果发生命中,则也会被缓存.</li></ol></blockquote><blockquote><ol start="2"><li>明示项和备用项优先级高于白名单.</li></ol></blockquote><blockquote><ol start="3"><li>白名单使用通配符”_<br>“. 则会进入白名单的open状态. 这种状态下.所有不在相关Cache区域出现的url都默认使用HTTP相关缓存头策略.</li></ol></blockquote><blockquote><ol start="4"><li>白名单使用具体的前缀匹配或更具体的URL,则都属于blocking状态.这种状态下,白名单所匹配的,非Cache区域出现的URL,与open的_<br>匹配的结果一致,但是不在白名单中,又不在整个manifest的资源,会block.也就是访问，加载不能.</li></ol></blockquote><h2 id="阅读列表-2015-02-22-2015-02-28"><a href="#阅读列表-2015-02-22-2015-02-28" class="headerlink" title="阅读列表 [2015.02.22 - 2015.02.28]"></a>阅读列表 [2015.02.22 - 2015.02.28]</h2><h4 id="1-npm构建工具"><a href="#1-npm构建工具" class="headerlink" title="1. npm构建工具"></a>1. npm构建工具</h4><ol><li><a href="http://www.infoq.com/cn/news/2016/02/gulp-grunt-npm-scripts-part1">我为何放弃Gulp与Grunt，转投npm scripts 上</a>,</li><li><a href="http://www.infoq.com/cn/news/2016/02/gulp-grunt-npm-scripts-part2">我为何放弃Gulp与Grunt，转投npm scripts 中</a>,</li><li><a href="http://www.infoq.com/cn/news/2016/02/gulp-grunt-npm-scripts-part3">我为何放弃Gulp与Grunt，转投npm scripts 下</a></li></ol><blockquote><p>使用的gulp 的项目构建工具，有时间可以试下直接npm 构建。webpack 中可以使用npm 管理js 包依赖管理</p></blockquote><p> 微博上的相关讨论： <a href="http://weibo.com/1746173800/Dji2uysKB?type=comment#_rnd1456298199966">入口</a></p><h4 id="2-WebRTC"><a href="#2-WebRTC" class="headerlink" title="2. WebRTC"></a>2. WebRTC</h4><ol><li><a href="http://www.infoq.com/cn/articles/webrtc-implementation-ideas">实现WebRTC的几个想法</a></li></ol>]]></content>
<summary type="html"><p>项目中想加入 webStorage 减小网络开销，提高加载速度，增强用户体验，想系统的看下 web storage方面的文章！</p></summary>
<category term="F2E" scheme="https://www.sumaolin.com/categories/F2E/"/>
<category term="F2E" scheme="https://www.sumaolin.com/tags/F2E/"/>
<category term="sessionStorage" scheme="https://www.sumaolin.com/tags/sessionStorage/"/>
<category term="localStorage" scheme="https://www.sumaolin.com/tags/localStorage/"/>
<category term="web storage api" scheme="https://www.sumaolin.com/tags/web-storage-api/"/>
</entry>
<entry>
<title>hello-hexo</title>
<link href="https://www.sumaolin.com/2016/02/17/hello-hexo/"/>
<id>https://www.sumaolin.com/2016/02/17/hello-hexo/</id>
<published>2016-02-17T10:03:20.000Z</published>
<updated>2022-01-20T04:12:09.026Z</updated>
<content type="html"><![CDATA[<p>一直想弄个自己的博客 记录下自己的技术方面的点点滴滴</p><p>新年第一天上班，正好看到 hexo 可以借助 github.com 构建自己的静态博客，正好可以折腾下！</p><span id="more"></span><h2 id="基本的安装"><a href="#基本的安装" class="headerlink" title="基本的安装"></a>基本的安装</h2><p>(懒癌发作!)都是做开发的不一步步讲解了，直接上参考链接吧：</p><ol><li><a href="http://yangjian.me/workspace/building-blog-with-hexo/">使用 hexo 搭建博客</a> <strong>无效了无奈</strong></li></ol><h3 id="本地调试地址端口无效"><a href="#本地调试地址端口无效" class="headerlink" title="本地调试地址端口无效"></a>本地调试地址端口无效</h3><h4 id="解决办法"><a href="#解决办法" class="headerlink" title="解决办法"></a>解决办法</h4><p>搜索参考网上的说是端口占用了 把 ip 地址改为常用的 127.0.0.1:4000 就 OK 了<br>修改方法：直接找到<code>node_modules/ hexo-serve/index.js</code></p><figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs Javascript">hexo.config.server = assign({<br> <span class="hljs-attr">log</span>: <span class="hljs-literal">false</span>,<br> <span class="hljs-attr">ip</span>: <span class="hljs-string">'127.0.0.1'</span><br>}, hexo.config.server);<br></code></pre></td></tr></table></figure><h4 id="2016-02-22-更新"><a href="#2016-02-22-更新" class="headerlink" title="2016.02.22 更新"></a>2016.02.22 更新</h4><p>参考了 <a href="https://github.com/hexojs/hexo-server">hexo-server</a>, 本地服务的 IP ，和 port 可以在启动参数中配置的</p><p>还可以直接写到站点的 配置文件中_config.yml</p><figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs Javascript">server:<br> port: <span class="hljs-number">4000</span><br> <span class="hljs-attr">log</span>: <span class="hljs-literal">false</span><br> <span class="hljs-attr">ip</span>: <span class="hljs-number">127.0</span><span class="hljs-number">.0</span><span class="hljs-number">.1</span><br> <span class="hljs-attr">compress</span>: <span class="hljs-literal">false</span><br> <span class="hljs-attr">header</span>: <span class="hljs-literal">true</span><br></code></pre></td></tr></table></figure><h3 id="主题安装-themes"><a href="#主题安装-themes" class="headerlink" title="主题安装 themes"></a>主题安装 themes</h3><p>喜欢的主题 <a href="https://github.com/iissnan/hexo-theme-next">hexo-theme-next</a> ，使用文档很详细：<a href="http://theme-next.iissnan.com/">文档地址</a> ，不废话了！</p><p>喜欢的主题列表</p><ol><li><a href="https://github.com/heroicyang/hexo-theme-modernist">hexo-theme-modernist</a></li><li><a href="https://github.com/iissnan/hexo-theme-next">hexo-theme-next</a></li></ol><h4 id="评论"><a href="#评论" class="headerlink" title="评论"></a>评论</h4><p><a href="http://duoshuo.com/">多说</a> 服务停掉了，想法使用 gittalk 或者 gitment</p><h4 id="统计"><a href="#统计" class="headerlink" title="统计"></a>统计</h4><p><a href="http://sitecenter.baidu.com/sc-web/">百度统计</a> ，现在换掉了，改成了 Google analyst</p><h4 id="搜索"><a href="#搜索" class="headerlink" title="搜索"></a>搜索</h4><p><a href="https://swiftype.com/">Swiftype</a> 并没使用上</p><h4 id="文章摘要"><a href="#文章摘要" class="headerlink" title="文章摘要"></a>文章摘要</h4><figure class="highlight javascript"><table><tr><td class="code"><pre><code class="hljs Javascript">以上是摘要<br><!--more--><br>以下是全文<br></code></pre></td></tr></table></figure><h2 id="部署上线"><a href="#部署上线" class="headerlink" title="部署上线"></a>部署上线</h2><h3 id="Question"><a href="#Question" class="headerlink" title="Question"></a>Question</h3><p>上面都是配置问题，本地没有问题的，终究要部署到<code>github.com</code> 上的，那么问题来了</p><p>部署上去 无法访问，我是在 git 的根目录下有新建了个 blog 目录，因为原来的 git 下有东西了</p><p>怀疑是自己的 git root 下面已经有东西了，在子目录 blog 下影响的，把 git remote 改为新的地址：<code>[email protected]:sumaolin/hexo.git</code></p><p>可是 hexo deploy 还是报错</p><p><a href="https://hexo.io/zh-cn/docs/deployment.html">查官方文档</a>，发现需要插件 hexo-deployer-git 安装后 hexo deploy 报错</p><figure class="highlight bash"><table><tr><td class="code"><pre><code class="hljs Bash">Permission denied (publickey).<br>fatal: Could not <span class="hljs-built_in">read</span> from remote repository.<br></code></pre></td></tr></table></figure><p>搜索相关的 <code>git Permission denied</code>的问题</p><h3 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h3><ol><li><a href="http://blog.itpub.net/25851087/viewspace-1262468/">由于 SSH 配置文件的不匹配，导致的 Permission denied (publickey)及其解决方法 </a></li><li><a href="http://my.oschina.net/grnick/blog/201155">Github 访问时出现 Permission denied (public key)</a></li><li><a href="http://stackoverflow.com/questions/2499331/git-with-ssh-on-windows">Git with SSH on Windows</a></li><li><a href="http://stackoverflow.com/questions/2643502/git-permission-denied-publickey">Git - Permission denied (publickey)</a></li></ol><h3 id="思路"><a href="#思路" class="headerlink" title="思路"></a>思路</h3><ol><li><p>首先想到的是重新生产公钥和密钥，重新配置 github 账号中的公钥，结果行不通</p></li><li><p>参考链接 1 中，修改了 IdentityFile 的值，还是没有起作用</p></li><li><p>通过参考链接 2 中</p></li></ol><figure class="highlight bash"><table><tr><td class="code"><pre><code class="hljs Bash">ssh -v [email protected]<br></code></pre></td></tr></table></figure><blockquote><p>查看使用到的秘钥，可以看到有 id_rsa，可是不起作用，为什么？</p></blockquote><figure class="highlight bash"><table><tr><td class="code"><pre><code class="hljs Bash">ls /.ssh/ 查看目录下的私钥<br></code></pre></td></tr></table></figure><blockquote><p>只有 knowe_hosts</p></blockquote><p>可是我查看的 username/.ssh/ 目录下面有 id_rsa 并且公钥已经加入到 github 中了,百思不得其解啊，突然想到 /.ssh/ 不是 username/.ssh/ 应该是 ssh 单独配置的，通过<code>where ssh</code> 命令查看，当前 ssh 使用的 git 安装的 ssh, 到 git 安装目录 ：<code>C:\Program Files (x86)\Git</code> 果然找到了<code>.ssh/</code> 目录，里面有新生产的公钥和密钥，添加到 github 中就可以了</p><h3 id="知识点"><a href="#知识点" class="headerlink" title="知识点"></a>知识点</h3><figure class="highlight bash"><table><tr><td class="code"><pre><code class="hljs Bash">ssh-keygen -t rsa -C <span class="hljs-string">"[email protected]"</span> // 生产ssh使用的公钥和私钥<br>ssh -t [email protected] // 测试ssh 是否配置成功<br>ssh -v [email protected] // 查看详细的请求过程，包括使用的公钥密钥<br><span class="hljs-built_in">where</span> ssh // 查看当前的ssh 的路径<br></code></pre></td></tr></table></figure><h2 id="参考链接"><a href="#参考链接" class="headerlink" title="参考链接"></a>参考链接</h2><ol><li><p><a href="http://ibruce.info/2013/11/22/hexo-your-blog/">hexo 你的博客</a> <strong>推荐</strong></p><blockquote><p>博客的主题也挺喜欢的</p></blockquote></li></ol><h2 id="后续更新"><a href="#后续更新" class="headerlink" title="后续更新"></a>后续更新</h2><h3 id="github-amp-coding-同时部署"><a href="#github-amp-coding-同时部署" class="headerlink" title="github & coding 同时部署"></a>github & coding 同时部署</h3><ol><li>github & coding.net 一键同时部署（coding.net 通过 webhook 自动部署)，国内国外区分访问</li></ol><h4 id="参考链接-1"><a href="#参考链接-1" class="headerlink" title="参考链接"></a>参考链接</h4><ol><li><p><a href="https://segmentfault.com/a/1190000002900848">在 Coding 上搭建 Hexo 个人博客！</a></p><p>关于 webhook 的自动部署 说的很明白</p></li><li><p><a href="http://www.jianshu.com/p/7ad9d3cd4d6e">hexo 干货系列：（四）将 hexo 博客同时托管到 github 和 coding</a></p><p>关于 deplay github & coding.net 的写法 ，国内国外区分访问</p></li></ol><h4 id="思路-1"><a href="#思路-1" class="headerlink" title="思路"></a>思路</h4><p>迁移到 coding.net 后，对与国内的的线路一直无法访问，一直以为修改 DNS 服务商后 没有生效，所以等 48 小时后的今天访问，还是不生效，感觉是自己配置的问题了，由于先参考了<a href="https://segmentfault.com/a/1190000002900848">在 Coding 上搭建 Hexo 个人博客！</a>, 潜意识的 以为只能通过 coding.net 的 演示功能部署呢，今天找问题时候发现，coding.net 的 pages 功能，还可以免费绑定域名（演示平台需要会员才可以绑定域名），所以新建了个个人博客的项目，改_config.yml 直接部署到该项目，把 cname 解析到 sumaolin.coding.me 而不是 sumaolin.coding.io （演示功能用到的域名），几秒后可以访问了！</p><p>其实 <a href="http://www.jianshu.com/p/7ad9d3cd4d6e">hexo 干货系列：（四）将 hexo 博客同时托管到 github 和 coding</a> 提到过 coding.net 两种部署方式的：</p><blockquote><p>部署博客方式有两种，第一种就是 pages 服务的方式，也推荐这种方式，因为可以绑定域名，而第二种演示的方式必须升级会员才能绑定自定义域名。pages 方式也很简单就是在 source/需要创建一个空白文件，至于原因，是因为 coding.net 需要这个文件来作为以静态文件部署的标志。就是说看到这个 Staticfile 就知道按照静态文件来发布。</p></blockquote><p>以后看资料要仔细了，自己的坑自己踩啊！另外 pages 部署的时候不用 创建空白文件 Staticfile 也可以！</p><h3 id="图片的使用"><a href="#图片的使用" class="headerlink" title="图片的使用"></a>图片的使用</h3><h4 id="参考链接-2"><a href="#参考链接-2" class="headerlink" title="参考链接"></a>参考链接</h4><ol><li><p><a href="http://blog.shiqichan.com/create-blog-with-hexo/">使用 Hexo 创建十七蝉的日志 # 如何加入图片</a></p><blockquote><p>本地存储图片，将图片放在 source/images 目录下，然后</p><figure class="highlight plaintext"><figcaption><span>text](/img/QQ截图20160403180630.jpg "测试，本地图片")</span></figcaption><table><tr><td class="code"><pre><code class="hljs ![Alt"><br></code></pre></td></tr></table></figure></blockquote></li><li><p><a href="http://blog.shiqichan.com/use-qiniu-store-image-for-hexo/">使用七牛为 Hexo 存储图片</a></p><p>从上文中找到了 相关的插件 <a href="https://github.com/gyk001/hexo-qiniu-sync">hexo-qiniu-sync</a>, 插件已经更新完善了，所以直接使用该插件了，参考了该插件的文档</p><p>因为本域名没有备案，还要设置 dns 等</p></li><li><p><a href="http://blog.csdn.net/pxzy/article/details/8490058">Sublime Text 2 中怎样查找 scope 的名称</a></p><p>使用过 sublime plugin “MarkdownEditing” 快捷键 mdi, mdl, mdh1 挺方便的，不过不喜欢在预览模式下写，所以通过 sublime-snippet 直接 定义相应的快捷键，操作方法，参考 <a href="http://www.jianshu.com/p/219de00c8343">使用 Sublime-snippet 来快速做前端页面</a>, 遇到的问题是设置 scole 时候一直无法 trigger ，原谅写错了，一直以为是这个 scope 对应的 sublime Syntax 中的一样就可以了，查找了上面的链接，才发现 too yong too simple 了，mardown 对应的 scope 是 text.html.mardown</p></li></ol><h4 id="qiniu-图库使用"><a href="#qiniu-图库使用" class="headerlink" title="qiniu 图库使用"></a>qiniu 图库使用</h4><figure class="highlight bash"><table><tr><td class="code"><pre><code class="hljs bash">λ hexo qiniu i<br>ERROR Plugin load failed: hexo-qiniu-sync<br>SyntaxError: Unexpected token a<br> at Object.parse (native)<br> at Object.<anonymous> (E:\hexoBlog\hexo\node_modules\hexo-qiniu-sync\config.js:10:17)<br> at Module._compile (module.js:409:26)<br> at Object.Module._extensions..js (module.js:416:10)<br> at Module.load (module.js:343:32)<br> at Function.Module._load (module.js:300:12)<br> at Module.require (module.js:353:17)<br> at require (E:\hexoBlog\hexo\node_modules\hexo\lib\hexo\index.js:213:21)<br> at E:\hexoBlog\hexo\node_modules\hexo-qiniu-sync\index.js:9:14<br> at E:\hexoBlog\hexo\node_modules\hexo\lib\hexo\index.js:229:12<br> at tryCatcher (E:\hexoBlog\hexo\node_modules\hexo-fs\node_modules\bluebird\js\release\util.js:16:23)<br> at Promise._settlePromiseFromHandler (E:\hexoBlog\hexo\node_modules\hexo-fs\node_modules\bluebird\js\release\promise.js:497:31)<br> at Promise._settlePromise (E:\hexoBlog\hexo\node_modules\hexo-fs\node_modules\bluebird\js\release\promise.js:555:18)<br> at Promise._settlePromise0 (E:\hexoBlog\hexo\node_modules\hexo-fs\node_modules\bluebird\js\release\promise.js:600:10)<br> at Promise._settlePromises (E:\hexoBlog\hexo\node_modules\hexo-fs\node_modules\bluebird\js\release\promise.js:683:18)<br> at Promise._fulfill (E:\hexoBlog\hexo\node_modules\hexo-fs\node_modules\bluebird\js\release\promise.js:624:18)<br> at Promise._resolveCallback (E:\hexoBlog\hexo\node_modules\hexo-fs\node_modules\bluebird\js\release\promise.js:424:57)<br> at Promise._settlePromiseFromHandler (E:\hexoBlog\hexo\node_modules\hexo-fs\node_modules\bluebird\js\release\promise.js:510:17)<br> at Promise._settlePromise (E:\hexoBlog\hexo\node_modules\hexo-fs\node_modules\bluebird\js\release\promise.js:555:18)<br> at Promise._settlePromise0 (E:\hexoBlog\hexo\node_modules\hexo-fs\node_modules\bluebird\js\release\promise.js:600:10)<br> at Promise._settlePromises (E:\hexoBlog\hexo\node_modules\hexo-fs\node_modules\bluebird\js\release\promise.js:683:18)<br> at Promise._fulfill (E:\hexoBlog\hexo\node_modules\hexo-fs\node_modules\bluebird\js\release\promise.js:624:18)<br> at E:\hexoBlog\hexo\node_modules\hexo-fs\node_modules\bluebird\js\release\nodeback.js:42:21<br> at E:\hexoBlog\hexo\node_modules\graceful-fs\graceful-fs.js:78:16<br> at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:380:3)<br></code></pre></td></tr></table></figure><p>一直报错，全部是从 <a href="https://github.com/gyk001/hexo-qiniu-sync">hexo-qiniu-sync</a> 中复制粘贴过来的，只是把七牛的秘钥文件单独出来了，没有找到原因</p><h4 id="2016-08-10"><a href="#2016-08-10" class="headerlink" title="2016-08-10"></a>2016-08-10</h4><p>继续前天的工作，想到了先把秘钥配置写到 _config.xml 中测试了下是 OK 的，那么就是单独读取秘钥文件的时候不成功，可能的原因：</p><ol><li>秘钥路径不正确 改为 <code>./sec/qn.json</code></li><li>qn.json 文件格式不正确，改为了严格的 json 格式 OK 了</li></ol><p>插件的配置 OK 了，看下插件的使用了，官网的使用方式：</p><figure class="highlight django"><table><tr><td class="code"><pre><code class="hljs django"><span class="hljs-template-tag">{% <span class="hljs-name">qnimg</span> qiniu.jpg title:qnimg alt:qnimg %}</span><br></code></pre></td></tr></table></figure><p>文件保存到根目录下的 static/img 目录下，同步成功了</p><p>页面上不显示：</p><ol><li>我开启了白名单功能，只有白名单中的域名可以加载</li><li>设置了自定义域名功能，需要设置 <code>urlPrefix</code>属性设置为自定义的域名</li></ol><p>每次都贴一次很麻烦啊，直接定义 sublime text snippet: qnimg:</p><figure class="highlight html"><table><tr><td class="code"><pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">snippet</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">content</span></span><br><span class="hljs-tag"> ></span><![CDATA[ {% qnimg ${1:imgName} title:${2:imgTitile} alt:${2:imgTitle} %}<br> ]]></content<br> ><br> <span class="hljs-comment"><!-- Optional: Set a tabTrigger to define how to trigger the snippet --></span><br> <span class="hljs-tag"><<span class="hljs-name">tabTrigger</span>></span>qnimg<span class="hljs-tag"></<span class="hljs-name">tabTrigger</span>></span><br> <span class="hljs-comment"><!-- Optional: Set a scope to limit where the snippet will trigger --></span><br> <span class="hljs-tag"><<span class="hljs-name">scope</span>></span>text.html.markdown<span class="hljs-tag"></<span class="hljs-name">scope</span>></span><br><span class="hljs-tag"></<span class="hljs-name">snippet</span>></span><br></code></pre></td></tr></table></figure><p>这样就完美了 每次 qnimg Tab 下就可以了</p><p>发现个美中不足的地方： <a href="https://github.com/gyk001/hexo-qiniu-sync/issues/39">qiniu 中开启了防盗链白名单功能，所以本地 hexo s 时无法实时预览图片？</a> 期望有解决方法</p><h4 id="2016-08-12"><a href="#2016-08-12" class="headerlink" title="2016-08-12"></a>2016-08-12</h4><p>根据作者的介绍使用 <code>offline:true</code>配置可以开启 本地调用功能的，并且更新到 V 1.4.5 版本解决了软连的问题</p><h4 id="2016-09-27"><a href="#2016-09-27" class="headerlink" title="2016-09-27"></a>2016-09-27</h4><p>更新的时候 hexo v3.2.2 更新后 没有了 hexo server 选项了，这也没法开启 offline:true 验证了，hexo 官方确认是个 windows 下的 bug</p><h4 id="2016-12-21"><a href="#2016-12-21" class="headerlink" title="2016-12-21"></a>2016-12-21</h4><p>有时间了，再折腾下上次遗留的问题： <code>hexo-qiniu-sync插件配置好后 hexo server 无法启动了</code></p><ol><li><p> 上次冲洗 hexo init 个 blog 是有 hexo server 命令的，所以肯定了这个是插件引起的问题</p></li><li><p> 在配置_config.yml 中去掉了关于 hexo-qiniu-sync 的配置</p></li></ol><figure class="highlight bash"><table><tr><td class="code"><pre><code class="hljs bash">λ hexo server<br>ERROR Plugin load failed: hexo-qiniu-sync<br>TypeError: Cannot <span class="hljs-built_in">read</span> property <span class="hljs-string">'secret_file'</span> of undefined<br> at Object.<anonymous> (F:\nodeDev\hexo\node_modules\hexo-qiniu-sync\config.js:8:21)<br> at Module._compile (module.js:409:26)<br> at Object.Module._extensions..js (module.js:416:10)<br> at Module.load (module.js:343:32)<br> at Function.Module._load (module.js:300:12)<br> at Module.require (module.js:353:17)<br> at require (F:\nodeDev\hexo\node_modules\hexo\lib\hexo\index.js:213:21)<br> at F:\nodeDev\hexo\node_modules\hexo-qiniu-sync\index.js:9:14<br> at F:\nodeDev\hexo\node_modules\hexo\lib\hexo\index.js:229:12<br> at tryCatcher (F:\nodeDev\hexo\node_modules\bluebird\js\release\util.js:16:23)<br> at Promise._settlePromiseFromHandler (F:\nodeDev\hexo\node_modules\bluebird\js\release\promise.js:510:31)<br> at Promise._settlePromise (F:\nodeDev\hexo\node_modules\bluebird\js\release\promise.js:567:18)<br> at Promise._settlePromise0 (F:\nodeDev\hexo\node_modules\bluebird\js\release\promise.js:612:10)<br> at Promise._settlePromises (F:\nodeDev\hexo\node_modules\bluebird\js\release\promise.js:691:18)<br> at Promise._fulfill (F:\nodeDev\hexo\node_modules\bluebird\js\release\promise.js:636:18)<br> at Promise._resolveCallback (F:\nodeDev\hexo\node_modules\bluebird\js\release\promise.js:431:57)<br> at Promise._settlePromiseFromHandler (F:\nodeDev\hexo\node_modules\bluebird\js\release\promise.js:522:17)<br> at Promise._settlePromise (F:\nodeDev\hexo\node_modules\bluebird\js\release\promise.js:567:18)<br> at Promise._settlePromise0 (F:\nodeDev\hexo\node_modules\bluebird\js\release\promise.js:612:10)<br> at Promise._settlePromises (F:\nodeDev\hexo\node_modules\bluebird\js\release\promise.js:691:18)<br> at Promise._fulfill (F:\nodeDev\hexo\node_modules\bluebird\js\release\promise.js:636:18)<br> at F:\nodeDev\hexo\node_modules\bluebird\js\release\nodeback.js:42:21<br>INFO Start processing<br>FATAL Something<span class="hljs-string">'s wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html</span><br><span class="hljs-string">Template render error: (unknown path) [Line 91, Column 2]</span><br><span class="hljs-string"> unknown block tag: qnimg</span><br><span class="hljs-string"> at Object.exports.prettifyError (F:\nodeDev\hexo\node_modules\nunjucks\src\lib.js:34:15)</span><br><span class="hljs-string"> at Obj.extend.render (F:\nodeDev\hexo\node_modules\nunjucks\src\environment.js:469:27)</span><br><span class="hljs-string"> at Obj.extend.renderString (F:\nodeDev\hexo\node_modules\nunjucks\src\environment.js:327:21)</span><br><span class="hljs-string"> at F:\nodeDev\hexo\node_modules\hexo\lib\extend\tag.js:66:9</span><br><span class="hljs-string"> at Promise._execute (F:\nodeDev\hexo\node_modules\bluebird\js\release\debuggability.js:299:9)</span><br><span class="hljs-string"> at Promise._resolveFromExecutor (F:\nodeDev\hexo\node_modules\bluebird\js\release\promise.js:481:18)</span><br><span class="hljs-string"> at new Promise (F:\nodeDev\hexo\node_modules\bluebird\js\release\promise.js:77:14)</span><br><span class="hljs-string"> at Tag.render (F:\nodeDev\hexo\node_modules\hexo\lib\extend\tag.js:64:10)</span><br><span class="hljs-string"> at Object.tagFilter [as onRenderEnd] (F:\nodeDev\hexo\node_modules\hexo\lib\hexo\post.js:253:16)</span><br><span class="hljs-string"> at F:\nodeDev\hexo\node_modules\hexo\lib\hexo\render.js:65:19</span><br><span class="hljs-string"> at tryCatcher (F:\nodeDev\hexo\node_modules\bluebird\js\release\util.js:16:23)</span><br><span class="hljs-string"> at Promise._settlePromiseFromHandler (F:\nodeDev\hexo\node_modules\bluebird\js\release\promise.js:510:31)</span><br><span class="hljs-string"> at Promise._settlePromise (F:\nodeDev\hexo\node_modules\bluebird\js\release\promise.js:567:18)</span><br><span class="hljs-string"> at Promise._settlePromise0 (F:\nodeDev\hexo\node_modules\bluebird\js\release\promise.js:612:10)</span><br><span class="hljs-string"> at Promise._settlePromises (F:\nodeDev\hexo\node_modules\bluebird\js\release\promise.js:691:18)</span><br><span class="hljs-string"> at Async._drainQueue (F:\nodeDev\hexo\node_modules\bluebird\js\release\async.js:138:16)</span><br><span class="hljs-string"> at Async._drainQueues (F:\nodeDev\hexo\node_modules\bluebird\js\release\async.js:148:10)</span><br><span class="hljs-string"> at Immediate.Async.drainQueues [as _onImmediate] (F:\nodeDev\hexo\node_modules\bluebird\js\release\async.js:17:14)</span><br><span class="hljs-string"> at processImmediate [as _immediateCallback] (timers.js:383:17)</span><br><span class="hljs-string">FATAL (unknown path) [Line 91, Column 2]</span><br><span class="hljs-string"> unknown block tag: qnimg</span><br><span class="hljs-string">Template render error: (unknown path) [Line 91, Column 2]</span><br><span class="hljs-string"> unknown block tag: qnimg</span><br><span class="hljs-string"> at Object.exports.prettifyError (F:\nodeDev\hexo\node_modules\nunjucks\src\lib.js:34:15)</span><br><span class="hljs-string"> at Obj.extend.render (F:\nodeDev\hexo\node_modules\nunjucks\src\environment.js:469:27)</span><br><span class="hljs-string"> at Obj.extend.renderString (F:\nodeDev\hexo\node_modules\nunjucks\src\environment.js:327:21)</span><br><span class="hljs-string"> at F:\nodeDev\hexo\node_modules\hexo\lib\extend\tag.js:66:9</span><br><span class="hljs-string"> at Promise._execute (F:\nodeDev\hexo\node_modules\bluebird\js\release\debuggability.js:299:9)</span><br><span class="hljs-string"> at Promise._resolveFromExecutor (F:\nodeDev\hexo\node_modules\bluebird\js\release\promise.js:481:18)</span><br><span class="hljs-string"> at new Promise (F:\nodeDev\hexo\node_modules\bluebird\js\release\promise.js:77:14)</span><br><span class="hljs-string"> at Tag.render (F:\nodeDev\hexo\node_modules\hexo\lib\extend\tag.js:64:10)</span><br><span class="hljs-string"> at Object.tagFilter [as onRenderEnd] (F:\nodeDev\hexo\node_modules\hexo\lib\hexo\post.js:253:16)</span><br><span class="hljs-string"> at F:\nodeDev\hexo\node_modules\hexo\lib\hexo\render.js:65:19</span><br><span class="hljs-string"> at tryCatcher (F:\nodeDev\hexo\node_modules\bluebird\js\release\util.js:16:23)</span><br><span class="hljs-string"> at Promise._settlePromiseFromHandler (F:\nodeDev\hexo\node_modules\bluebird\js\release\promise.js:510:31)</span><br><span class="hljs-string"> at Promise._settlePromise (F:\nodeDev\hexo\node_modules\bluebird\js\release\promise.js:567:18)</span><br><span class="hljs-string"> at Promise._settlePromise0 (F:\nodeDev\hexo\node_modules\bluebird\js\release\promise.js:612:10)</span><br><span class="hljs-string"> at Promise._settlePromises (F:\nodeDev\hexo\node_modules\bluebird\js\release\promise.js:691:18)</span><br><span class="hljs-string"> at Async._drainQueue (F:\nodeDev\hexo\node_modules\bluebird\js\release\async.js:138:16)</span><br><span class="hljs-string"> at Async._drainQueues (F:\nodeDev\hexo\node_modules\bluebird\js\release\async.js:148:10)</span><br><span class="hljs-string"> at Immediate.Async.drainQueues [as _onImmediate] (F:\nodeDev\hexo\node_modules\bluebird\js\release\async.js:17:14)</span><br><span class="hljs-string"> at processImmediate [as _immediateCallback] (timers.js:383:17)</span><br><span class="hljs-string"></span><br></code></pre></td></tr></table></figure><p>看来是安装了 hexo-qiniu-sync 插件的问题</p><p>搜索了下相关问题，找到了条有价值的信息: <a href="http://mp.weixin.qq.com/s?__biz=MzIzNzEzNDMxOA==&idx=1&mid=2651006828&sn=c553c202b1162f6bd37d87a41a8a961d">Hexo 七牛云同步插件的使用</a></p><blockquote><p>基本的安装、配置在插件主页也有过说明，按照配置即可，这里记录下遇到的坑。注意在_config.yml 中不要配置插件栏如下，否则会报错找不到 hexo server 的命令，可参考问题: <a href="https://github.com/gyk001/hexo-qiniu-sync/issues/41">https://github.com/gyk001/hexo-qiniu-sync/issues/41</a></p></blockquote><p>原来官方已经解决了，按照提示注释掉 插件就可以了，再来个测试 OK</p><p>发现刚才测试的 考辛斯的图片并没有同步到七牛 ，并且 deploy 后连接还是原来的域名下的</p><h4 id="2017-05-13"><a href="#2017-05-13" class="headerlink" title="2017-05-13"></a>2017-05-13</h4><p>终于完成了这个 hexo-qiniu-sync 插件的调试，可以痛快的使用了</p><p>下面在弄个自己的<a href="/2017/05/13/hexo-theme/">hexo-theme</a></p><ol><li>前几天测试过从新 <code>hexo init</code> 个新项目的话 是有 <code>hexo server</code> 命令并且能够运行的，看来是 hexo-qiniu-sync 插件出问题了。有时间修复下</li><li>自动部署的问题 看到了个更简洁的: <a href="https://www.jianshu.com/p/e22c13d85659">手把手教你使用 Travis CI 自动部署你的 Hexo 博客到 Github 上</a></li></ol><h4 id="2019-08-28"><a href="#2019-08-28" class="headerlink" title="2019-08-28"></a>2019-08-28</h4><p> 七牛的服务停掉了，算是弃坑七牛了，自动部署时候一直报错！</p><p>新开了篇新文章，整理 <a href="/2017/05/13/hexo-theme/">hexo-theme</a> </p>]]></content>
<summary type="html"><p>一直想弄个自己的博客 记录下自己的技术方面的点点滴滴</p>
<p>新年第一天上班，正好看到 hexo 可以借助 github.com 构建自己的静态博客，正好可以折腾下！</p></summary>
<category term="node" scheme="https://www.sumaolin.com/categories/node/"/>
<category term="heox" scheme="https://www.sumaolin.com/tags/heox/"/>
<category term="blog" scheme="https://www.sumaolin.com/tags/blog/"/>
<category term="node" scheme="https://www.sumaolin.com/tags/node/"/>
</entry>
<entry>
<title>After hello hexo</title>
<link href="https://www.sumaolin.com/2016/02/17/hexo-theme/"/>
<id>https://www.sumaolin.com/2016/02/17/hexo-theme/</id>
<published>2016-02-17T10:03:20.000Z</published>
<updated>2022-01-20T04:12:09.026Z</updated>
<content type="html"><![CDATA[<p>建好了网站下面就是优化了，主要的几个问题</p><ol><li>自动化部署 TravisCI</li><li>评论</li><li>PWA</li><li>theme 主题</li></ol><span id="more"></span><h2 id="自动化部署-TravisCI"><a href="#自动化部署-TravisCI" class="headerlink" title="自动化部署 TravisCI"></a>自动化部署 TravisCI</h2><h3 id="Reference"><a href="#Reference" class="headerlink" title="Reference"></a>Reference</h3><ol><li><p><a href="https://qinyuanpei.github.io/posts/3521618732/">持续集成在Hexo自动化部署上的实践</a> <strong>推荐</strong> </p><p>持续集成的概念讲的很通透，讲起因，讲落地的困难，到 hexo 的 TravisCI</p></li><li><p><a href="https://www.mspring.org/2018/11/29/HexoClient%E4%BD%BF%E7%94%A8%E5%B8%AE%E5%8A%A9/">HexoClient使用帮助</a> </p></li></ol><h2 id="评论"><a href="#评论" class="headerlink" title="评论"></a>评论</h2><p>虽然流量很少，不过也少了互动，不知道来的用户的想法，少了反馈</p><p>适用于hexo的评论组件挺多的，如：<a href="http://duoshuo.com/">多说</a> ，<a href="https://changyan.kuaizhan.com/">畅言</a> 等依赖服务端的评论服务，也有无服务端依赖的如： <a href="https://valine.js.org/">Valine</a> ，<a href="https://github.com/gitalk/gitalk">Gitalk</a> ，<a href="https://github.com/imsun/gitment">Gitment</a> ，<a href="https://vssue.js.org/">Vssue</a> 。</p><ol><li><p>多说</p><p>服务停掉了</p></li><li><p>畅言</p><blockquote><ul><li>需要填入备案号且审核通过</li><li>用户发表评论要绑定手机号</li><li>有广告</li></ul></blockquote><p>Reference： <a href="https://ziyue.life/201812/ad52hc4b.html">为 Hexo 的 Indigo 主题添加畅言评论系统</a> </p><p>上面列出几条，有一条都要 pass 掉了</p></li><li><p><a href="https://valine.js.org/">Valine</a> 一款快速、简洁且高效的无后端评论系统</p><blockquote><p>Valine 诞生于2017年8月7日，是一款基于<a href="https://leancloud.cn/">LeanCloud</a>的快速、简洁且高效的无后端评论系统</p></blockquote></li><li><p><a href="https://github.com/gitalk/gitalk">Gitalk</a> is a modern comment component based on Github Issue and Preact</p></li><li><p><a href="https://github.com/imsun/gitment">Gitment</a> </p><p>Reference：<a href="https://imsun.net/posts/gitment-introduction/">Gitment：使用 GitHub Issues 搭建评论系统</a> ，中文的使用说明</p></li><li><p><a href="https://vssue.js.org/">Vssue</a> Vue 驱动的、基于 Issue 的评论插件</p><blockquote><ul><li><strong>Vssue</strong> 支持 Github、Gitlab 和 Bitbucket，并且很容易扩展到其它平台。<strong>Gitment</strong> 和 <strong>Gitalk</strong> 仅支持 Github。</li><li><strong>Vssue</strong> 可以发表、编辑、删除评论。<strong>Gitment</strong> 和 <strong>Gitalk</strong> 仅能发表评论。</li><li><strong>Vssue</strong> 是基于 <a href="https://vuejs.org/">Vue.js</a> 开发的，可以集成到 Vue 项目中，并且提供了一个 <a href="https://vssue.js.org/zh/guide/vuepress.html">Vuepress 插件</a>。 <strong>Gitment</strong>基于原生JS，而 <strong>Gitalk</strong> 基于 <a href="https://github.com/developit/preact">Preact</a>。</li></ul></blockquote></li></ol><h3 id="2019-10-30"><a href="#2019-10-30" class="headerlink" title="2019.10.30"></a>2019.10.30</h3><p>选择了Gittalk，在 <a href="https://github.com/yscoder/hexo-theme-indigo">hexo-theme-material-indigo</a> 的 <a href="https://github.com/yscoder/hexo-theme-indigo/wiki/%E5%AE%89%E8%A3%85">wiki</a> 中有gittalk 的 <a href="https://github.com/yscoder/hexo-theme-indigo/wiki/%E9%85%8D%E7%BD%AE">配置</a>，本来是想改主题代码呢，看代码有相关的配置，就修改了 主题下<code>_config.yml</code> 下面的评论配置就可以了，”集成了 <a href="https://disqus.com/">disqus</a>、<a href="http://www.uyan.cc/">友言</a>、<a href="https://github.com/imsun/gitment">gitment</a> 和 <a href="https://valine.js.org/">valine</a>，开启其一即可”</p><p>使用 <a href="https://github.com/abelsu7/hexo-theme-indigo-plus">hexo-theme-indigo-plus</a> 主题时候，配置了<code>baidu_url_submitter</code> 但是一直报错，今天也解决掉了，是对YML 语法的不了解导致的，其中的数组是用 <code>-</code> 开头的，所以一直报错，得看下 <a href="http://www.ruanyifeng.com/blog/2016/07/yaml.html">YAML 语言教程</a> 的提高下</p><p>还有个不影响运行，但是一直提示的错误：<code>Error: Cannot find module './build/Release/DTraceProviderBindings'</code> ，重新安装了hexo <code>npm install hexo --no-optional</code> 解决了，搜索到的参考：<a href="https://xuanwo.io/2014/08/14/hexo-usual-problem/">Hexo常见问题解决方案</a> </p><p>折腾了好久，感觉blog 也没啥有营养的资料，现在整体想要的功能都有了，主要是评论，后面暂时放弃 PWA 的优化，和主题定制（也没头绪想要定制成什么样子），暂时放一放 hexo 的折腾，专注下blog 内容了</p><h2 id="PWA"><a href="#PWA" class="headerlink" title="PWA"></a>PWA</h2><blockquote><p>渐进式应用(Progressive Web Apps，PWA)是Google提出的新一代Web应用概念，其目的是提供可靠、快速、接近Native应用的服务方案。</p></blockquote><p>Github page 支持 https，自己还么升级呢，同时 PWA 也算 速度上的优化！</p><h3 id="Reference-1"><a href="#Reference-1" class="headerlink" title="Reference"></a>Reference</h3><ol><li><p><a href="https://qinyuanpei.github.io/posts/450254281/">迁移Hexo博客到Google渐进式Web应用(PWA)</a> </p><p>使用的插件： <a href="https://github.com/JLHwung/hexo-offline">hexo-offline</a> </p></li><li><p><a href="https://richardcao.me/2017/09/03/Hexo-PWA/">五步让 Hexo 博客支持 PWA</a> </p></li><li><p><a href="https://github.com/funnycoderstar/funnycoderstar/issues/6">hexo博客支持PWA了</a> </p></li></ol><h2 id="Theme-主题"><a href="#Theme-主题" class="headerlink" title="Theme 主题"></a>Theme 主题</h2><p>想自己写一套呢，不过现在看中一套 Meterial 风格的theme ： <a href="https://github.com/yscoder/hexo-theme-indigo">hexo-theme-material-indigo</a> 和它的进化版本： <a href="https://github.com/abelsu7/hexo-theme-indigo-plus">hexo-theme-indigo-plus</a> ，试着改写下吧</p><h3 id="Reference-2"><a href="#Reference-2" class="headerlink" title="Reference"></a>Reference</h3><ol><li><p><a href="https://chensd.com/2016-06/hexo-theme-guide.html">Hexo 主题制作指南</a> 很详细的 五星推荐</p></li><li><p><a href="http://mrzhang123.github.io/2017/04/01/hexo-theme/">如何写一个自己的hexo主题</a> </p></li><li><p><a href="http://www.codeblocq.com/2016/03/Create-an-Hexo-Theme-Part-1-Index/">Create an Hexo Theme - Part 1: Index</a> </p></li><li><p><a href="https://github.com/abelsu7/hexo-theme-indigo-plus">hexo-theme-indigo-plus</a> 使用文档 </p><p>不错的文档，其实是搭建hexo的整个过程，主题风格也喜欢</p></li></ol><h2 id="Feature"><a href="#Feature" class="headerlink" title="Feature"></a>Feature</h2><ol><li>最近写东西都是在 Markdown 中整理，使用的编辑器是 Typora ，想着和hexo 组合起来，做到一键部署更新呢！</li></ol>]]></content>
<summary type="html"><p>建好了网站下面就是优化了，主要的几个问题</p>
<ol>
<li>自动化部署 TravisCI</li>
<li>评论</li>
<li>PWA</li>
<li>theme 主题</li>
</ol></summary>
<category term="node" scheme="https://www.sumaolin.com/categories/node/"/>
<category term="heox" scheme="https://www.sumaolin.com/tags/heox/"/>
<category term="blog" scheme="https://www.sumaolin.com/tags/blog/"/>
<category term="node" scheme="https://www.sumaolin.com/tags/node/"/>
</entry>
</feed>