SegmentFault 静晴轩最新的文章
2022-11-23T08:00:00+08:00
https://segmentfault.com/feeds/blogs
https://creativecommons.org/licenses/by-nc-nd/4.0/
2022,「倾城之链」运营第 6 年感记
https://segmentfault.com/a/1190000042869736
2022-11-23T08:00:00+08:00
2022-11-23T08:00:00+08:00
jeffjade
https://segmentfault.com/u/jeffjade
1
<p>转眼间,距离「<a href="https://link.segmentfault.com/?enc=qiLWhj%2FJ4LdM8CYUNTykYQ%3D%3D.l362%2BP6QTaYEMz1gGmGsFjH5DlHc3L40hrL2NAZjd14MXuX8t52mKjvzRhCvI0kY" rel="nofollow">倾城之链</a>」诞生之时,已有六年之久。如今(2022.10.25),倾城收录网站已突破 1000 款,值此之时,有必要督促自己深入思考,不仅是「倾城」过往的总结、未来之设想,更要确立后续业余项目方向、乃至职业规划。于是乎,便有了这篇文章,也有意将其做成年度系列,年与时驰,环境变迁,认知更替,载之于文,<strong>以慰这似水流年</strong>。</p><h2>应用名称</h2><p><a href="https://link.segmentfault.com/?enc=4IbbZ2HcYuLfRGj%2FwpLJKg%3D%3D.fcD3gbHWBTi4pGb3f8dgbjRH2CjcyHstYKaGrUwrr9JagelV7B07HzIe88tJx3WOzL8SvC99HYNum6N%2BJLRjRA%3D%3D" rel="nofollow">倾城之链</a>。</p><h2>应用平台</h2><p>Web 应用、小程序、快应用。</p><p><img src="/img/remote/1460000042869739" alt="倾城之链 - 优质网站导航应用" title="倾城之链 - 优质网站导航应用"></p><h2>应用简介</h2><p><a href="https://link.segmentfault.com/?enc=Zm1wY69RbH3m6BOMDiGPZA%3D%3D.VeOOCDtgbeXoYKI5OOc8FOL5cvKyN4uNTQieV0%2BXG%2Bo%3D" rel="nofollow">倾城之链</a>,新一代<strong>开放型导航</strong>平台,为云集全球「优质网站」而生。在这里,您可以便捷的探索互联网中那更广阔的世界,同时还能分享为您所欢喜的网站。</p><h2>官方地址</h2><p><a href="https://link.segmentfault.com/?enc=T3BhtX%2F3ICzuDSY6CDL2%2BA%3D%3D.roXzXjR3Vn77eqbpz5foLA5TNSG0%2Bi8xbq4ivmVdiDE%3D" rel="nofollow">https://nicelinks.site/</a> 。</p><h2>应用简介</h2><h3>探索更广阔的世界,为您</h3><p>在这个信息化的世界,海量的讯息可能让您不知所措;担心错过她而努力汲取的同时,却可能错过更多;<a href="https://link.segmentfault.com/?enc=oyGZlNKvTYQEkvxCOvMDPw%3D%3D.EXrea6qChTIz2qCC6ZI3IknM9KaWeonBDNuz%2FpFVl2Qkwls7sgEvM0pymcZKEb6P" rel="nofollow">「倾城之链」</a>的存在,即是为您解决这种困扰;在这里,您可以浏览全球各类智慧的结晶;丰富视野的同时,可以标注抑或分享您喜欢的站点,从而为更多挖掘讯息的人提供建设性参考。</p><h3>分享,为您所欢喜的网站</h3><p>在当今这信息化时代,即便是再小的个体,也当有自己的品牌。=然而,独立的才是自己的。<a href="https://link.segmentfault.com/?enc=QzXM8WXj%2B9P0JVee2dfa8g%3D%3D.7DXL%2FuTdh7eGpEeycqzk5FudkW1dQ34C862RUhAWqS8%2FS8DlxQeGNmB%2F2wfMaliQ" rel="nofollow">「倾城之链」</a>作为一个开放平台,鼓励您创造属于您的个人品牌,烙印着自己的风格,替自己代言、发声。如果您已经这样做了,您可以尽情分享在这里,让更多人知道,且从中受益。当然,您也可以分享出您欢喜的其他有意思站点,让您的见识惠及更多人。</p><h2>应用截图</h2><p><img src="/img/remote/1460000042869740" alt="倾城之链截图" title="倾城之链截图"></p><h2>网站特色</h2><ol><li>收集有价值<strong>网站</strong>,并在后台审核,力争所收录的内容,可对他人产生积极作用;</li><li>鼓励用户<strong>自荐、推荐</strong>欢喜的网站,使得见闻、见识可以互相,从而惠及更多人;</li><li>尽最大可能为收录的<strong>网站</strong>,提供完善<code>推荐语</code>,使用户能轻易知道该网站价值;</li><li><strong>内置搜索</strong>功能,并在不断完善中,使得用户可以便捷索引到主动想要的内容;</li><li>持续在经营的社交网站等,对优质网站,进行分享传播,从而提升其访问量;</li><li>陆续更新其它功能如<a href="https://link.segmentfault.com/?enc=P7qjfR%2BgDCRe6TtFO67c9w%3D%3D.VNa2vo8yI6Pnjuy4YAgu9%2F347LmnZQSifKJ7B2CXsQM%3D" rel="nofollow">箴言锦语</a>(云集所喜欢的<a href="https://link.segmentfault.com/?enc=TF8qysW02eziIkCXerBqHg%3D%3D.bKj%2FT5eJZTPIS%2F5vyWzyhdq%2F6LwW35E1ypQDatgNhE4%3D" rel="nofollow">曼妙句子</a>),以促进网站趣味性。</li></ol><h2>所用技术</h2><ul><li>前端:<a href="https://link.segmentfault.com/?enc=5JSytN5p7pmr19uoE6hroA%3D%3D.WPRfveFwBzWtvDoOVekBImIoalX6pzV3dWjnKSUKkb%2FNwd4ND4Ztl%2FItdZoNCVeoCsCcnnlVCSxmMVo5lpI5xg%3D%3D" rel="nofollow">Vue</a>、vue-router、Webpack、vuex、axios、marked 等</li><li>后端:Node(Koa2) + <a href="https://link.segmentfault.com/?enc=13Xf2sTl53gOoDTOvoeKtg%3D%3D.M9kD3p4CIP0pngsLfqlKgn05cEZZuzNYp1ZAK4LGNemtTcbHkEfY2rvVB8B%2FFaMkL3EoQPIUit6yAMIGP0ElWg%3D%3D" rel="nofollow">MongoDB</a> + <a href="https://link.segmentfault.com/?enc=5XG%2Fms8GywBaYx2J4V135Q%3D%3D.mxMKrhcTHkTf1BNEGPxpMlD%2FErIrkxdtSk4%2FEFj%2BwRxsdvk9FiDXlMM6COH8nERag0XEmi%2BF0cab6IxrIhDeaQ%3D%3D" rel="nofollow">Redis</a> 等</li><li>工具:Mac、<a href="https://link.segmentfault.com/?enc=AZOVOHgWDbjLcgt0q1RQQQ%3D%3D.oYRBPuasFuUwWaJSSbC0SIiHW2RAlOMaK03TojTeNfo%3D" rel="nofollow">Git</a>、<a href="https://link.segmentfault.com/?enc=hDY6wXO9nwQ74Zx4RSqE%2Fg%3D%3D.XM%2BfuDrczvCT%2BGgpIt%2FrTV8Ulrh%2BGul%2BkM5MoJcRKnNYXmgEKXlHE7gcSDSsg7Ui0%2FWmmsQRzrdwwuxOAlwjoA%3D%3D" rel="nofollow">VsCode</a>、<a href="https://link.segmentfault.com/?enc=ZDEQcI9ZN3RA3vFpBoj5MA%3D%3D.Vw9iFOxqcQ29qhwoK1326R0CNiUw96k5T4Wx3t%2BOSw7Hi1451jaD7GXP7W4Nu8f8bxaMDCTuROP91CTlQVBruA%3D%3D" rel="nofollow">prettier</a>、Yarn 等;</li><li>其他: <a href="https://link.segmentfault.com/?enc=GGoQ9MUJvtzUqkzUfgARdg%3D%3D.haSmbBZxEqd8lOIRej%2FPka39JgbrKs%2FQwZKGtc%2B7B5dqpunmHkgOCm8z7VZQDsEzzlSnUPh%2B3JRGgqPoUpzr%2Bg%3D%3D" rel="nofollow">Prerender</a>(For SEO)、<a href="https://link.segmentfault.com/?enc=w%2FTEaTWhxeGi5KJGB9jSZQ%3D%3D.qxM9uOXj0hXcZCvi%2BafOc2U7rutgjQByMQyQKR%2B9Y3%2Bm61MmGC7o29x%2FbGPilxsXvvuaLRHXjx6srMH7Fc%2B4OA%3D%3D" rel="nofollow">Waline</a>(评论)、<a href="https://link.segmentfault.com/?enc=GOTf2oRAxpPzduHLm8hy5g%3D%3D.C3PozEnQnntClUvozmGYzWIr7KTv%2Fi2s3GivEpHhhlNXIFw0iYZDEnTp56V52kKKHLjt18eOOi1zMaO9bIg4pg%3D%3D" rel="nofollow">Gatsby</a></li></ul><h2>作者简介</h2><p>业余<strong>独立开发者</strong><a href="https://link.segmentfault.com/?enc=cS4AfiTripDW8IPZx3QRAw%3D%3D.Lrc0DXP%2FLBNpfgaBBH9Lzmfz%2BobfQbIzDjGx%2FogwNvqApW7lET%2FVPqYVbcp6VAyi" rel="nofollow">杨轩帅</a>,目前在国内一家智能手机研发公司做<a href="https://link.segmentfault.com/?enc=H%2BaSmMeNsPZY1Y%2FruaIHnQ%3D%3D.41OBAdqYoZFawe7EsTmL%2B11lhK1VZ7zdt%2FvgvJxtyDz96PlFy%2F2%2FBQHBzdy0s%2FAdXI6dAicRQrkQaouMMqjopg%3D%3D" rel="nofollow">快应用</a>相关;工作内容繁杂,侧重工具型产品的思考与设计,当然也仍会写些代码;出于对高效工作的追求,比较热衷与创造一些好产品 / 工具;相比之下,业余时间写代码会更多一些。</p><h2>独立开发者?</h2><p>目前仍是一名<code>业余独立开发者</code>。工作内外,都有很多想法,以及一些痛点;个人非常倾向将其抽象出来,加以设计,用代码实现出一个工具,或是一款产品,为自己和他人都能带来价值;即便只有自己用,也觉得很酷(极客范儿)。</p><p>从另一角度回答这个问题,有必要理解下其定义;<strong>『独立开发者』</strong>,一般指的是“从产品立项、设计、开发、推广、到盈利的闭环全部独立完成的人”。也想有更多志同道合朋友,组成一个团队,聚集起来完成一款产品;但这并不容易,只能是自己事必躬亲,孤军奋战。</p><p>因此,目前所开辟的业余项目,包括<a href="https://link.segmentfault.com/?enc=m1BgJFPyrGMwDrrB2tXgmA%3D%3D.tIjYHmM7Yybtfj6TDrSKgUVRXdkqKqh6gitZMp8Yc2Q%3D" rel="nofollow">倾城之链</a>在内,涉及的全部工作,都须自己去完成;在不擅长的领域,难免捉襟见肘,比如 UI 设计、交互设计,运营推广、监控运维等环节。但,始终<strong>保持学习</strong>,并<strong>积极实践</strong>,受益匪浅。</p><h2>项目初衷</h2><p>那些年,在搭建这个人博客平台 ──「<a href="https://link.segmentfault.com/?enc=TC3XNRwFMLUeRwmomQZFtg%3D%3D.ozX0KFz%2FlFMbkrXKKbchzVugNR74WIwC%2FqouUles5Ak%3D" rel="nofollow">晚晴幽草轩</a>」之时,就有深刻的认识到:当今时代,<strong>即便是再小的个体,也当有自己的品牌</strong>;这一观点在过去很多文章中,都有极力的去呈现、宣扬。然而,这种影响力毕竟有限,况且对于那些优质品牌,也无法起到实质性作用。要知道,当今时代,最重要莫过于「信息」;对信息的承载,可以说绝大部分是源于网络;而信息在网络中传播,起着绝对作用的则是各类网站;故此,不难得出:对于很多品牌最佳的承载,即「专属网站」;因此,在 2016 年初,就决心自己开发一款产品,为这观点以布道,使那优秀能广传;这即是<a href="https://link.segmentfault.com/?enc=WZvbXzL%2F4ivxbASM%2FryRig%3D%3D.aVcWfSvfza3RlHcWMI3iTB41mFCG9oYsHxhpqI%2Btipo%3D" rel="nofollow">「倾城之链」</a>得诞生的动机与起源;整体而言呢,可总结为以下几点:</p><ul><li>尝试解决大数据信息时代,高效汲取<strong>优质、有价值信息</strong>,以更好服务网民;</li><li>搭建汇聚优质网站平台,并赋予其<strong>👍</strong>、<strong>👎</strong>、分享等功能,以促进个体品牌发展;</li><li>作为前端开发工程师(当时),欲借此契机,学习、磨练各项技术,提升自我;</li></ul><p>假如您对<a href="https://link.segmentfault.com/?enc=eqc%2FyIclFkA%2B0aOBLiXIzg%3D%3D.FP2tIttNuzfJU07gn0%2Fs2O1FWiomsmmwAxbxNHyKZBNqx0mwgPPMhFmBqG80B07n" rel="nofollow">「倾城」</a> 想要了解更多,可参见早期撰写的文章:</p><ul><li><a href="https://link.segmentfault.com/?enc=OvyY2CerwftNcre9COxKKQ%3D%3D.SansLbvvNqxlWam1tngJFUC5rP1oI6tOfwvhj%2FywMsqwIan7CMFMZ%2BcIwF6iltwFfEKa5nZjSBJXsYe3VcdlHipW%2BBfw3S3e%2B8XSSGRWlXg%3D" rel="nofollow">云集优站,尽在「倾城之链」</a></li><li><a href="https://link.segmentfault.com/?enc=QLfohFawrodkcjU3AuVFvQ%3D%3D.ypGuuq5Q2WmsWP3e5HAKJF6ATyZNvpIJZrXc2hJ6wzMS3X0DgAfdxDkA2zM0IrsCijKZDd%2BVzdtcFjchm1fJug%3D%3D" rel="nofollow">云集优站,尽在「倾城之链」其二</a></li><li><a href="https://link.segmentfault.com/?enc=Kc5Od7zAyvSVNFMw5M0LLQ%3D%3D.S5%2F0dIpxBomlkXZZkR3DKHAcd7zika3j7GSWoeOdoyk%3D" rel="nofollow">网络应用百科之 ── 倾城之链</a></li></ul><h2>如何运营?</h2><p><a href="https://link.segmentfault.com/?enc=%2FEVeq7pMqyH8VjlUKHKH%2Fw%3D%3D.6qAoaUdB%2BSKIY4m0Divr3o44e5ulq%2FZm4hJVz8PFhKo%3D" rel="nofollow">倾城之链</a>支持用户注册、登录,以<strong>提交</strong>推荐的网站。截至目前,从开发到运营,乃至推广,仍由「<a href="https://link.segmentfault.com/?enc=Rfw4IlHlmtosKgAzYqXQdw%3D%3D.PUy183a5KqFxGgWXilDOhIRuL7Q7YEZC%2FoxzkOyOG04wHL3xIHpchjq9FFMys5uN" rel="nofollow">@轩帅</a>」完成;主要负责审核推荐网站、重设「主题 & 标签」、编写<strong>推荐语</strong>、发布<a href="https://link.segmentfault.com/?enc=C9C6S2MnykUtrcrB6JN%2F%2FA%3D%3D.SUtsxfddOwug5tkdlv%2FIpHTulv3nGOw6NuZGU0f70TA%3D" rel="nofollow">倾城周刊</a>等工作(其中大部分精确性工作,比如生成周刊,通过 Node.js 或 <a href="https://link.segmentfault.com/?enc=wVik1evwQYSJy7lm%2Blb%2Fkg%3D%3D.4BdZy%2F0WVCYo4ufd4xp6UynMqRsiTEIhP%2FUdceNGHqH8RIanNCQa7WLsR%2BQUZ66B5O4H4VpV7kDIpMzedcc7hw%3D%3D" rel="nofollow">Deno</a> 编写脚本来完成)。遇见特别有用的产品,会通过小程序或网址推给同事或朋友。得空,也前往 <a href="https://link.segmentfault.com/?enc=22%2BWkbbm%2FB8WnLseVLbTtw%3D%3D.rm4Zg5lwRVlmg8g5bIusBP9FZM2FO9Mzn3MuOGHHn0Q4Ql%2FoSJrjAGTQ0HJINWB0nHKK1IVUl4e4jYi2%2BZGroA%3D%3D" rel="nofollow">Product Hunt</a>、<a href="https://link.segmentfault.com/?enc=x9OxuzLHtYt17rBmntqg5A%3D%3D.7aUuuzd0bhN41eEKY2sxjD15YkJLUhA2U1LhO0S%2Fks%2FZDQNLEGHFK3Gcid0AM6bG1IJs67nEyBfLxlpLTWYPcQ%3D%3D" rel="nofollow">阿酷导航</a>等平台,发现更多有价值 Web 应用。</p><h2>如何推广?</h2><p>从 2019 年开始,主要推广方式变更为:私域互链(还维护了其他几个网站)、购买 Google ADS(谷歌广告)、社区发推广帖、友情链接、SEO 优化。Google Ads 有两段时间,因为每次点击价格问题折腾蛮多,其他的就是不定期增加投入、修改广告内容描述、以及设计并制作广告素材;关乎广告素材制作,虽留有<a href="https://link.segmentfault.com/?enc=YhzDf%2FnwM1jk8eoi2sOzbg%3D%3D.kjddefsQ6uzpFDCWBmZQwvixE88u73Mwy1iOw%2FjrSGc%3D" rel="nofollow">谷歌自适应广告素材,制作心得分享</a>一文,至今也不得其法,只能不断改进设计,然后交由 Google 机器学习去评判,不理想就撤掉重新再来。社区发帖,有在以下平台尝试:</p><ul><li>晚晴幽草轩:<a href="https://link.segmentfault.com/?enc=8aCHpiHi0MOLSn1gFAcPhg%3D%3D.YQtn%2F%2BymQEhjAv5wWuRc9Js8YV6Wq%2Bg4d2YQxEtzkHZ1pwJ83%2B%2FTjBLul%2Bd10b9vq0%2BlsE%2F8NiCmZCxBcHj%2BDiZiLTfPsygPS4EOqDlEy78%3D" rel="nofollow">云集优站,尽在「倾城之链」</a> <code> 2017-12-31</code></li><li>晚晴幽草轩:<a href="https://link.segmentfault.com/?enc=1bLnVVldylz%2BPRWZSXWr%2Bw%3D%3D.FCdKwQ1nqqqBXPQMNPD9e9kSRSdeHfFYiYEsUW6Hl1cmqR1OU5cFlvPVLvKTu11UKa30a%2FQi%2BOWPJgMQpBeYog%3D%3D" rel="nofollow">云集优站,尽在「倾城之链」其二</a> <code> 2018-12-23</code></li><li>链滴社区:<a href="https://link.segmentfault.com/?enc=yFOTptZoehTGfvDWVXOtUw%3D%3D.LAGbMdZiMv8NzM38CzCha4FECZ0V9jzZhoGX3o%2B0AjqHLdHLBaAzaeQFdRmIdyMI" rel="nofollow">「自荐」:个人开源 Web 应用——倾城之链</a> <code>2019-10</code></li><li>v2ex 社区:<a href="https://link.segmentfault.com/?enc=HDC8OV%2Fj%2Fr1IE0E69Pcfxg%3D%3D.0oQHRZdW4fotnr3qfYZSRxtDbv5uq5PeznKqYebd2tORIPH3QGGezekWflVDk%2Bnn" rel="nofollow">「自荐」个人开源 Web 应用:「倾城之链」</a> <code>2019-12</code></li><li>创造者日报社区:<a href="https://link.segmentfault.com/?enc=Hxz0v2%2BZquhr2LH%2FLUjxPQ%3D%3D.sZ8x1h6wqG3e4mSWlNWXLxakI8w3IJRYAlj4TJkWB17dMKFbrokEyH2GhOIRHrifGScy%2Bupsuu1DKMmp7tg3bQ%3D%3D" rel="nofollow">倾城之链 - 免费实用的资源网站导航</a> <code>2020-04</code></li><li>思否社区:<a href="https://segmentfault.com/a/1190000038196276">轩帅:开启技术变现之路,探索第三收入来源</a> <code>2020-11</code></li><li>为爱发电:<a href="https://link.segmentfault.com/?enc=HJ%2B%2FMxrD7Mc2QEYxw1mG4A%3D%3D.HoJIgq5NbKr%2F0NZSy745s03IJxCjhageVdT6hB7LjEA%3D" rel="nofollow">致力于塑造新一代、高质量的 Web 应用(网站)导航</a>;<code>2021.02</code></li><li>悠然宜想亭:<a href="https://link.segmentfault.com/?enc=KhMfta5wCtlm5UZTlyiCYA%3D%3D.Lb7t8cFFBc3LIGre84%2FUTFFRDp3nQg42ZMEm6Bz2yAw%3D" rel="nofollow">倾城之链:云集全球优秀网站(推荐)</a> <code>2021-03</code></li><li>电鸭社区:<a href="https://link.segmentfault.com/?enc=ndAAMkBaVa%2BE8xoPHH9k8g%3D%3D.1lNR10r3BfxuDcFG%2FTTd4MOnyLJ4gffrNv44lf4%2BZBzA9KUyPZxkcv%2FE0wDl4pTs" rel="nofollow">「自荐」:个人开源多平台应用——「倾城之链」</a> <code>2021.10</code></li><li>线圈社区:<a href="https://link.segmentfault.com/?enc=56JC9UhjlVeAflaufneP9w%3D%3D.t8gcY%2FQdhkA5ZRHfN0hNA1h%2BnwX9uUX6FUO4Sh0BCzRt3J5a4ax%2BbitESY6KpOsE" rel="nofollow">倾城之链 | NICE LINKS</a> <code>2022.09</code></li><li>小众软件:<a href="https://link.segmentfault.com/?enc=dlaNwgqD8UcPMGc0c4jCDg%3D%3D.Nwi%2BCKvw6VESoH9I5nsUrcVcwO2MDqaedXDrn4IjF9%2BKn6NcuLzNIJf3bYjc3gxi" rel="nofollow">【自荐】倾城之链:在线导航平台,专注优质网站</a> <code>2022.10</code></li><li>独立开发者社区:<a href="https://link.segmentfault.com/?enc=%2FyvUcD5D%2BqKIO7hy6pc2%2Fw%3D%3D.wRSmZHGpT3Pwbul8wkYidQyqx7lJwP7CVp5Z2R3OoO0%3D" rel="nofollow">我的作品 倾城之链 - 优质网站导航应用</a> <code>2022.10</code></li></ul><p>从流量角度来看,社区发帖所能带来的流量有限,不及投放一天 Google 广告;值此市场低迷之际,持续广告投入,也非长久之计。优化 SEO,从用户所需——「<strong>搜索</strong>行为」来攫取黄金,相比之下,是更为明智的选择;这也是目前主要努力方向之一。</p><h2>盈利方式</h2><p>盈「利」:如果特指金钱;目前方式仅有:<strong>广告收入</strong>(包含:微信公众号、Google AdSense、小程序广告)。实际上,<strong>利</strong>,也可以是掌握技术、开阔思维、获取信息、获取数据、收获经验、节省时间等等。「倾城」的初衷与维护,以及后续可能的发展,在时间、得到和失败的洗礼中,逐渐变迁,这「盈利方式」也跟随变化,有必要在此,对其过往趋利方式做下总结:</p><ul><li>17 ~ 18 年:主要是学习技术,不乏包括前端、后端、设计、运维等;</li><li>19 ~ 20 年:开发小程序、快应用,尝试开辟新的获利方式和途径;</li><li>21 ~ 22 年:学习投放 Google AdSense 广告、SEO、接入微信登录等;</li></ul><p>当然,所学到零碎技能,远不止这些;此外,收录千款 Web 应用,从而了解很多效率工具、创意产品,对工作和生活,都有一定积极意义。目前来看,在这可量化的价值中,占比最多的莫过于,由「倾城」间接促进提高的<strong>工作薪酬</strong>。未来,探索用户对象、构建<strong>盈利模式</strong>,亦是努力侧重点。</p><h2>心得感悟</h2><p>过去这几年的业余时间,很大部分给了娱乐;其余不多的“雨露”,则在产品设计及臆想,倾城运营及推广等方面做了“均沾”;如今回顾,虽说有些决策只是蹉跎了岁月,但成长总是需要过程,也就能够释怀。但以下几个方面,在之后的折腾中,实该避免:</p><ul><li><strong>做好认知</strong>:<code>认知</code>,近期工作总是围绕的主题,<em>五看三定</em>,久思已倦🤮。但,不可否认,做产品须先做好对其<strong>认知</strong>:<strong>服务客户是谁</strong>?<strong>竞争对手有哪些</strong>?如何错位/对位竞争?市场盘子有多大?<strong>如何为客户带来价值</strong>?<strong>盈利模式是什么</strong>?未来商业价值何在?.....将这些准确思考并评估清晰,再做长短期规划、可行性分析、实际落地,相信是更棒的选择。</li><li><strong>瞄准客户</strong>:从前总是幻想,「倾城」可以被所有人使用;事实上,绝无可能。就自身而言,假如半年前给我很好的机器学习资料,多半也只是收藏;实际生活、工作用不到,也就不太会去关注、学习乃至使用(于大多数人,学习甚苦,娱乐至上)。<strong>用户心智</strong>与产品匹配度,是绕不开的结界。因此,后续主要服务于<code>互联网从业人员</code>;至于内容,则依旧保持开放,不乏包括技术、有趣、人文、信息、资源等。</li><li><strong>保持平衡</strong>:逐利、客户、产品、技术、情怀等考量,该要保持<strong>适当平衡</strong>(作为开发者,先前较侧重技术、情怀)。按道理,产品、技术都该服务于<strong>获利</strong>;但获利本质上是为获取更高层次的利「幸福、价值体现」;如果抛弃情怀(价值观),本末倒置之余,也难以在困境中坚持。倘若不能盈利,产品也是难以长久(近两年主要精力在此)。</li><li><strong>跟随趋势</strong>:视频信息,相比于图文,越发更具优势;虽不愿承认,但这是铁一般的事实。就目前而言,「倾城」仍是图文信息,想调整为「视频」格式输出,倒也可以,只不过没有足够智能工具加持,就只有人工处理,代价颇高(得闲时,可录制几期视频,或搞几次直播)。未来将折腾,最好跟随趋势:如 XR、AI、Web3 等。</li><li><strong>经营资产</strong>:打工上班,相对最简单的收入来源;但其本质是一种负债——不上班便没有收入,跟自媒体<code>蹭热点</code>式经营没有本质区别;相信越来越多人意识到:<strong>税后收入</strong>及多种收入来源的必要性(经营资产、远离负债)。就自媒体或独立开发者而言,经营长期性内容、打造专属品牌,综合来看或是更可取的选择。</li></ul><p>备注:这 <code> 五看三定 </code> 模型,最早源自 IBM 战略制定方法论;五看分别是:看行业 / 趋势(行业现状,及未来发展趋势)、<strong>看市场/客户</strong>(市场规模、发展趋势、市场需求、客户痛点)、<strong>看竞争</strong>(分析竞争对手、知己知彼)、<strong>看自己</strong>、<strong>看机会</strong>(市场空间有多大、战略机会点);根据「五看」得到的输出,在战略制定阶段需要“三定”:<strong>定战略控制点</strong>(即:竞争优势)、<strong>定目标</strong>(可量化)、<strong>定策略</strong>(具体的方案、阶段里程碑、实施策略等)。</p><h2>未来路线图</h2><p><a href="https://link.segmentfault.com/?enc=994i9IUPqLqo9kQf0aMtgA%3D%3D.Rj2l98OTa7YUsUxhUihmXWi2%2BmMy8vXXMXZVhQPRR20%3D" rel="nofollow">倾城之链</a> 是在 2017 年初,源于个人所需,外加技术修炼,而开启的独立项目;无论是之前抑或是以后,我自己始终是她的最为忠实的用户;为此,无论「倾城」是否持续盈利,甚至是账面上的亏损,依旧会持续维护。目前而言,为「倾城」所制定的<strong>路线图</strong>有如下几条(欢迎各界对<code>倾城</code>感兴趣的朋友,提出您宝贵的建议):</p><ul><li><strong>认知</strong>:思考:如何错位竞争、如何获得更多流量,如何建立更多盈利方式;</li><li><strong>迭代</strong>:优化网站性能,改进 SEO,解决发现的存在问题,增添有价值新功能;</li><li><strong>学习</strong>:学习<a href="https://link.segmentfault.com/?enc=xqxzCaPUgp%2F4RLflCYJHqg%3D%3D.J7lYnzGPIX8z%2F91dAlPRLbUtjSmThMP8erXJbgRz%2FdufuLVctg2ao941tL6IYyiz" rel="nofollow">机器学习</a>相关技术,探索如何用新的手段来填充 & 审核内容。</li></ul><p>2022 年 10 月 15 日 ~ 11 月 22 日,写于〔深圳福田〕</p><h2>您可能感兴趣的文章</h2><ul><li><a href="https://link.segmentfault.com/?enc=DYOH2TP6sV3LCgd8kGVOpg%3D%3D.GUVVot6TyKiW8AkiMUZytiYb4gIAhKzG6skFWwvgWo2ROkUJOyeQY9hgpz4ixoXv" rel="nofollow">如何基于 Deno 做持久化定时任务?</a></li><li><a href="https://link.segmentfault.com/?enc=bRT%2FhZFdPmz7%2F4qCirpUUw%3D%3D.BiKryx5uf4r%2BpX2VUHtnbP%2BLkSm9PtfjlqfEHwCznmhNUrmtmq083An9MdPVvVc%2B" rel="nofollow">NPM 如何发布和使用带范围(scope)的包?</a></li><li><a href="https://link.segmentfault.com/?enc=EsnhkvcPISSi70TvJcc0Ng%3D%3D.zG8BnvoV0Ex%2FR06HUusSlm4XVrpOVbtQDewckfOpi%2BVJNR0dYujEwMr7j5N6r1nJ" rel="nofollow">如何基于 Espanso 提高打字效率,提升幸福感?</a></li><li><a href="https://link.segmentfault.com/?enc=AJWwd5cZMeMDFwV70ROlhw%3D%3D.UMshlriHKrQQrRVBi9hbvEieNQbs8m2%2FN5cqL1GrUlbtxHw36krfImL6FGB1QPc4" rel="nofollow">如何更提升各类网站 PC 端访问体验?</a></li><li><a href="https://link.segmentfault.com/?enc=j3QIFPYEllU236UuEGN5Vw%3D%3D.g1SPipPZP3rsSf91Z7Co6MFpxJLrpLtU58%2B9bbk8e%2FXPb87uG4ja7H5U4zbXttV%2BQfPkOh%2FuC5XteqjzyBWNeQ%3D%3D" rel="nofollow">Awesome Chrome 插件集锦</a></li><li><a href="https://link.segmentfault.com/?enc=YykZcyZ%2BSdC1wFDxuxu%2B8Q%3D%3D.UJa1kALhnxgpE7opajOXVRUwKKLPK%2F4ntcJMgpCl3jFTJC7xVgaF9WaNw660P1Dw0%2BgDyoxfWI%2Fc2sMSvWOdcw%3D%3D" rel="nofollow">Vimium让您的Chrome起飞</a></li><li><a href="https://link.segmentfault.com/?enc=qBP9RMhcdnxn5s%2BUCsTI9Q%3D%3D.dFOQ2Xmb8YtGi7lkmd5e0mmXNRX1QTeDoc%2FmHM9SHG1xV3MzVS5Wt419KY4bf4tsaCgYDsXA5%2BsVXrHmiiymvw%3D%3D" rel="nofollow">那些所倚靠的利器记载</a></li><li><a href="https://link.segmentfault.com/?enc=iEEAZy6jzCppk7iG17kC7g%3D%3D.%2FeOG%2BTtezcD0Ol6ms1H09nlwy4N2%2FkMo4adW0wV2kw1uZIlG9cgqZkEgYzEA%2BBQutKD3DT1s8m3tU4cbGF4COA%3D%3D" rel="nofollow">Win下最爱效率神器:AutoHotKey</a></li><li><a href="https://link.segmentfault.com/?enc=WSL6BqicZ0b4IFTgym5BGQ%3D%3D.OYDmG8uyiL2RMFB%2BMyy6sMsW%2FJ5P%2BnHqXp2pPEO8A41eAPu6FyV%2B1GmzBCetHINK8zE6im40gRF7igSTep7DEwelC4l2F9zt2u76MHY73L0%3D" rel="nofollow">Win下必备神器之Cmder</a></li><li><a href="https://link.segmentfault.com/?enc=KDDti8FlsAflHSkCIYgOYQ%3D%3D.RN2sMZNilIaAy2fPOk58W6s5roAA8hoXgyHRF4StwTpX2ls1lBV7ADFLo3Z1tl02rM8NGZXathAukHHwp%2BpeRw%3D%3D" rel="nofollow">新编码神器Atom使用纪要</a></li><li><a href="https://link.segmentfault.com/?enc=I%2BF7ZKlhdmoS8P7gqS85Tg%3D%3D.F6AJ%2F6mMPVYAtArZzezJyHLUNJAiEp0fCYq4nuvtuz1gaUxRQESRkTHgqix2lavD" rel="nofollow">sublime text 下的Markdown写作</a></li><li><a href="https://link.segmentfault.com/?enc=KVDWeJwOVYKhxfkC408lXA%3D%3D.ATbqDTvmBaMzDUJ6f6rt478c75AcOxcASvifG03Iep88dggnQSIn6QfDWL2Dz1fkQ4I5TBXmliGJMS4ZNQ8czg%3D%3D" rel="nofollow">SublimeText下写作利器之MarkdownEditing</a></li><li><a href="https://link.segmentfault.com/?enc=udxmz1fY1BzceHWgjDvXrw%3D%3D.NpznZ3g3SWr23tw%2FY99I3yMb0jlhqyK40pOiY1V7JGG22XGai1Gi7Ag3X8%2BWnmXoxvKJAlkAVf%2FfFmPf0%2B9rwf1pFo%2Fjg4Y2itDXlzxN7%2Bw%3D" rel="nofollow">Mac必备软件渐集之ZSH-终极Shell</a></li></ul>
地表最强 Markdown 文本编辑工具——Obsidian
https://segmentfault.com/a/1190000041923452
2022-05-31T18:23:10+08:00
2022-05-31T18:23:10+08:00
jeffjade
https://segmentfault.com/u/jeffjade
9
<p>沈从文先生在给张兆和的情书中,有写道:“<strong>我一辈子走过许多地方的路,行过许多地方的桥,看过许多形状的云,喝过许多种类的酒,却只爱过一个正当最好年龄的人</strong>”。近十年,写文章或文档,用过非常多基于 <a href="https://link.segmentfault.com/?enc=9dwMh8smsnzUaGA2cL9bAA%3D%3D.P5%2FfKhc45hVgqKFhRi0lEGCDs5cbDmDNOcZIOZ5zM2UYiYbiOsqPlz5pLcN2bWUD" rel="nofollow">Markdown</a> 出色的文本编辑工具,诸如 <a href="https://link.segmentfault.com/?enc=uze%2Fu4QARKRe3ON8cFfL5g%3D%3D.8GsBwOfrJjzsJ9X79EOMyFgtIOY7gK3IZrqw1wO1BTt5H45gnzvth9uRHn%2FwJNiyQ%2BQD8%2Fyitl%2BFaabFJ8zlwQ%3D%3D" rel="nofollow">Sublime Text</a> 、 <a href="https://link.segmentfault.com/?enc=VhQ6OTcP5shj0ZoS1aJr6Q%3D%3D.0nFthEVLy%2FDb34afDpeDpP%2FmSEZBLSWSP97Y8ZK7foKD6SFYbeG7hohs20nRa9DPSxcS2GBhZTmWbCSO1MHO6A%3D%3D" rel="nofollow">Cmd Markdown</a> 、 <a href="https://link.segmentfault.com/?enc=hA09m03l2MI8E79vWQGiRw%3D%3D.AwP%2BsI93FmO5U7n3oKZGVtKAvHj1ZiqhjgvW30tGfY35C5jTDM6TeMsEzA7bYQag44VkbTBmTNZRYW8E4nOndg%3D%3D" rel="nofollow">MarkEditor</a> 、 <a href="https://link.segmentfault.com/?enc=rad5XIFuFGBdcsfhDBoWKA%3D%3D.4kZVQjyc4OASQutObdrjQtC1nSMIl4UEurxd9ejlAtLCnXcL2%2FLN0CVeO5HiPmsGAx%2BA1eqynQ7wmxA8an%2BqHQ%3D%3D" rel="nofollow">Typora</a> , <a href="https://link.segmentfault.com/?enc=YMF454fY5BvzeYQWm1ppQg%3D%3D.vc37zsYXERpRX8YizfpxH8rcD%2BG1xYRv8Bs84WYpfcY%3D" rel="nofollow">Arya 在线</a> 等等,直到遇见 <a href="https://link.segmentfault.com/?enc=z%2FVt7n3DLun%2B5eQOhzjWyQ%3D%3D.dXYfd%2BaRwOI88SWMZjZN%2B7wc3OkSDskl4uzvZGKErDcXuWRchjpPHruex8hj2qWRB6c1S42nOPFQQFvVXRuWmQ%3D%3D" rel="nofollow">Obsidian</a> ,被强大的功能、完美的设计所震撼、折服,堪称<strong>地表最强文本编辑工具</strong>。</p><p>文章首发于:<a href="https://link.segmentfault.com/?enc=vXh4gh25PNK1cN84WyTS%2Fg%3D%3D.puExF7geGEtynsbSeMUHc2WvQVWAppI5xeXKXssgM4jJpzXim%2BdBNi%2FivSjP8N5tMkJ74ww5QUR2djmpAY3%2BFQ%3D%3D" rel="nofollow">地表最强 Markdown 文本编辑工具——Obsidian|悠然宜想亭</a>。</p><blockquote><a href="https://link.segmentfault.com/?enc=HYL6F69pLviBoM17MinHeQ%3D%3D.lYmciol91C%2Fq7naHWAqhLxS1kFrrBiyT%2FCuJhCwbLbgZvOY5G%2BurtaLKX3F3czikQSvFWE2YkBFxKnUcEAWaMQ%3D%3D" rel="nofollow">Obsidian</a> 是一个强大的<strong>知识库</strong>、一款好用的<strong>笔记应用</strong>程序,位于纯文本 <code>Markdown</code> 文件的本地文件夹之上。其目标是:永远成为你第二个大脑。人脑是非线性的:人们总是从一个想法跳到另一个想法。你的第二个大脑应该同样工作。在 Obsidian 中,建立和跟随<strong>连接</strong> 是无摩擦的。像园丁一样照顾你的笔记;在一天结束时,坐下来惊叹于您自己的知识图谱。── 出自 <a href="https://link.segmentfault.com/?enc=ECUWfnIBlXVQSPL7FrMesA%3D%3D.8ZYjxh%2Bb0yc7IEmBOXqgcIvMxmrMlvGYSuoTpMr6lasQ72%2BbIxuflyCK8%2FbvgopKQUOFi%2BsM5px0BAJrdu5yCQ%3D%3D" rel="nofollow">倾城之链 | Obsidian</a> 。</blockquote><p><img src="/img/remote/1460000041923454" alt="Obsidian 倾城之链" title="Obsidian 倾城之链"></p><p><a href="https://link.segmentfault.com/?enc=9VWbN3edk4T29IXUwplZ4Q%3D%3D.GjrHO%2BGV9UCs4Mjdjs1PjLtYsmxFNlqIMeqthMgvWm2G%2BUlzS8MGy%2BHEJukyfJszBxUKrsaG3ar6SPyH6EYGTg%3D%3D" rel="nofollow">Obsidian</a> ,它不仅是极其好用的文本编辑工具,而且还是一款<strong>强大的知识库</strong>;但,在这里就不对<strong>知识库</strong>作探讨,主要就其极致的文本编辑体验,结合自己短暂的实践体验,来跟朋友们分享下 Obsidian 的优势:</p><ul><li>默认<strong>所见即所得</strong>(wysiwyg)的编辑模式;</li><li>支持粘贴 HTML 自动转换为 Markdown;</li><li>所有操作默认有<strong>快捷键</strong>,并且方便自行更改;</li><li>应用打开极快,操作流畅,所占用内存很少;</li><li>100% 免费供个人使用,无需账户或注册;</li><li><strong>支持扩展</strong>,社区已贡献有 <a href="https://link.segmentfault.com/?enc=Z91X8C0Lv48XEhhU5MM%2FWQ%3D%3D.SEAbc7Sxq7SBPv5HNliXGnUd4Nf1F0663l0tOmzo5TM%3D" rel="nofollow">近 600 个插件</a> ;</li></ul><p>要着重称赞的就是 Obsidian 的插件,这在 Markdown 编辑器工具中是少见的。首先,这种机制本身就很赞,不将所有功能,都集成于应用本身,而按需给予,善莫如是,使其能在<strong>轻量</strong>与<strong>强大</strong>中平衡;其次,有了这种机制,即能允许用户介入,参与贡献,无疑是为产品功能丰富,提供了绝佳的途径。</p><p><strong>备注</strong>:Obsidian 插件,安装与使用,都非常方便;前往 <a href="https://link.segmentfault.com/?enc=7oUbvLBrPA2wheP%2FK32oxQ%3D%3D.92U4JXqYE8OD02mezWpgT6iktMsxLoxAzVWEwwgLBH0%3D" rel="nofollow">Obsidian Plugins</a>,检索您想要的插件;如果您已安装并打开 Obsidian,点击 <code>Open in Obsidian</code>,即可快速在 Obsidian 中,打开该插件;点击 <code>install</code> 安装之后,再点击 <code>enable</code> 即可启用该插件(如下截图)。对于有需要按键才能作用的插件,您还可以修改<code>快捷键</code>以及其他设置参数。</p><p><img src="/img/remote/1460000041923455" alt="Obsidian Pangu Plugin" title="Obsidian Pangu Plugin"></p><p>下面,跟大家分享些个人所喜欢的插件:</p><h2><a href="https://link.segmentfault.com/?enc=qKCVOWASPU7FZhDgoW1rtA%3D%3D.WN7ztvcfT%2BxkxiRYj8uGMEYD0H6rk%2BabYh87w8XC8eABcALidqFEOFzDmpjT9A1YSSXHHe5oAJy91xGrUspqTQ%3D%3D" rel="nofollow">ADVANCED TABLES</a> :改进的表格导航、格式化和操作</h2><blockquote>Add improved navigation, formatting, and manipulation to markdown tables in Obsidian</blockquote><p>Markdown 的表格语法比在 Word 中插入表格还要麻烦,一旦想要增改某个内容,更是灾难。该插件则大大简化了表格输入的流程。</p><p>要创建表格,请创建一个 <code>|</code> 字 符,然后键入表格的第一个标题并按 <code>Tab</code>,就会触发插件的自动补全语法。之后通过 <code>Tab</code> / <code>Shift + Tab</code> 来在表格之间移动光标,通过 <code>Enter</code> 完成输入;顷刻之间,就能写完您想要的表格,实在是完美。</p><p><img src="/img/remote/1460000041923456" alt="Advanced Tables for Obsidian" title="Advanced Tables for Obsidian"></p><p>如果您想了解更多,可参见 Github 源码: <a href="https://link.segmentfault.com/?enc=%2Bq7E07fKgeOfpcocZ91IJQ%3D%3D.vNrc2%2FULl7zQ0lh0b%2Fo2RWzxwvJNiMMzvuP3b1SqyndL6Gbs%2FvIopuvMNWPeSm%2FvCYEODgODvk5QDUlzidylGg%3D%3D" rel="nofollow">tgrosinger/advanced-tables-obsidian</a> 。</p><h2><a href="https://link.segmentfault.com/?enc=b%2BAVf4iIbnlwyWOuCALnEg%3D%3D.xcj6XfuG1IADlY1BVQvkqmS1HV6umbwVsypFaHF80iAZyE3u381nZJ3ZUyY%2F05o%2F" rel="nofollow">OBSIDIAN PANGU</a> :改进中英文间距</h2><blockquote>为 Obsidian 笔记加上「盘古之白」,排版强迫症者的福音。 | A small plugin aims to add space between Chinese Characters and English Alphabet, and it is a boon for typographically compulsive people.</blockquote><p>这个小插件,旨在增加汉字和英文字母之间,添加<strong>空格</strong>,使得整个排版更加专业且美观;这对于排版强迫症的人来说,是一个福音(我个人非常喜欢,先前是借助 <a href="https://link.segmentfault.com/?enc=DWSsxA1dnIPNPDngRWlFog%3D%3D.H4aprg8wJE0u3HcXJSX6kgtIyyRz77AHR37iqeprldrxfbq0rjVfkZ6lAnUhEFboO5x9mA1JuYldKp7Je6lCSQ%3D%3D" rel="nofollow">Prettier</a> 或其他工具,来实现)。</p><p>如果你想了解更多,可以参见 Github 源码: <a href="https://link.segmentfault.com/?enc=X3ov1%2FjYhPN%2BQwYClGO7Mg%3D%3D.msMqNUqL1RsbKPmcfTsgh8%2FjzZiXIbJTR3GPbVr86nLHxRg%2BBLzvApPDTO4NcZM7" rel="nofollow">Obsidian Pangu Plugin</a> 。</p><h2><a href="https://link.segmentfault.com/?enc=8Oq7fUmDXhtsdy%2BLcW7%2FBQ%3D%3D.px1sKvqDHteGlFZxxRaxqz0jMRlEQ6TbLnh4njQxNet%2FT0XSytYNLbEH9RQwFd8KFNqaSAA717hdag7GR7NIUaPjidk2joyyYEkEIbmJizw%3D" rel="nofollow">Editor Syntax Highlight</a> :代码高亮</h2><blockquote>A plugin for Obsidian which allows syntax highlighting for code blocks in the editor.</blockquote><p>这对于程序员(软件开发)来讲,非常有价值;它能让编辑界面的代码,页面的元数据都有高亮效果;而且支持的格式极多,如 <code>xml</code>、<code>json</code>、<code>ts</code>、<code>js</code>、<code>html</code>、<code>css</code>、<code>python</code>、<code>bash</code> 等等。值得一提的是,在代码区域,可以放心使用 <code>Tab</code> 按键,无需担心会清空你选中的代码,其效果跟在代码编辑器中是一致的,体验极佳。</p><p><img src="/img/remote/1460000041923457" alt="Editor Syntax Highlight Obsidian Plugin" title="Editor Syntax Highlight Obsidian Plugin"></p><p>如果你想了解更多,可以参见 Github 源码: <a href="https://link.segmentfault.com/?enc=r4CFZV4nFnvwiCsHbIc03g%3D%3D.iKLR8JAmUJLp2lFpfiEDyreRwYCWC4pYOxx0I2w45U%2BzYj93hqjTtKN%2B1FwsywrMIaUdgwK83N7fK5WDpZf1Dg%3D%3D" rel="nofollow">Editor Syntax Highlight Obsidian Plugin</a> 。</p><h2><a href="https://link.segmentfault.com/?enc=gzzVoCxaJt9hVENIFP6LRA%3D%3D.50nIF%2B6b%2Bzez1E5bi2179K%2BYPYQwPxVhKE2fYgievbnM1SG2qrfJaiiwsFsNEhqN" rel="nofollow">Kanban</a> :看板模块</h2><blockquote>Create markdown-backed Kanban boards in Obsidian</blockquote><p><code>Kanban</code>,这款插件可以为 Obsidian 增加看板模块;让你可以使用看板,来管理<strong>任务或笔记</strong>。它有两种看板创建方式:使用命令添加新的看板,也可以使用右键菜单创建;而且可以在 Markdown 和看板中,随时切换,如果你想要用 Obsidian <strong>管理日常任务</strong>的话,它是非常好的插件。另一种创建看板的方式是,在文件顶端,注入如下标记:</p><pre><code>---
kanban-plugin: basic
---</code></pre><p><img src="/img/remote/1460000041923458" alt="Obsidian kanban" title="Obsidian kanban"></p><p>关于如何创建和使用看板,可参见: <a href="https://link.segmentfault.com/?enc=aH2olStETaT6g6EoyhssIA%3D%3D.gxKrT69ISBgfKZDWNHBNW385qoQL35iv0rLhOdDe0u2Ckc944pFLOVZrPz6qga%2F8JH2wcWp9zrsZsyBk0LFvHvbXJscm1Oj9qGoVWE1sP4Aqtt6P9zSi9KOLGqBYww9v" rel="nofollow">创建看板</a> ;最简单的方式是:右键单击文件夹,并选择 <code>New Kanban board</code>。值得一提的是,Obsidian 的看板功能,其使用体验,在笔者看来要比 <a href="https://link.segmentfault.com/?enc=P4TGBb%2FT1NgC9yyJIn21qw%3D%3D.dOBAufpxyRf1lHFwe1rtP2fVOwvyyqBxNHsD1xNtAjcQbLxG2GorZRBf4tHvhmNpVp4HDKczEN1BSbG1%2FwE1eA%3D%3D" rel="nofollow">Giuhub</a> 、 <a href="https://link.segmentfault.com/?enc=fYD30xvrAi4FckPDQAQfmQ%3D%3D.w%2F8nJCXTvrJom2ivyQLrR02c1HCkKoXlOiua4DdrLop1bIIMf9G6uMnWTzIDmE6wRU5o3NnWc1nm66L2%2BbInxQ%3D%3D" rel="nofollow">Gitlab</a> 、 <a href="https://link.segmentfault.com/?enc=AeNv5MuldAlHWQFuVa6GPA%3D%3D.5x5ENvhJyR%2FkzcbGSfsD2hzaqcQh8yDA8SVaMP02Z4nuj7Hu82TMtfRwmvBjNSba7FTOJb06Mf%2FqiX99wuKQUg%3D%3D" rel="nofollow">Trello</a> 要用很多,强烈推荐。</p><p>如果你想了解更多,可以参见 Github 源码: <a href="https://link.segmentfault.com/?enc=Q%2B%2Ft0BJWW%2FyCnudiBVVG6Q%3D%3D.akVt%2FHYgOxzGDD8TvNkW4Z4yfaZXLm6vBjx9IGKke%2FaLqojWqyxyrqj%2FAe3lfyCQ7LV0TPfF0WYM7zq9FueVIw%3D%3D" rel="nofollow">Advanced Tables for Obsidian</a> 。</p><h2>Outline:文件大纲(官方插件)</h2><blockquote>Display the outline of current file or linked pane</blockquote><p>Outline 是一款大纲插件,可以根据标题自动为 Obsidian 文档生成目录大纲,可以快速预览所有标题,也可以用来快速跳转到指定位置,如果你经常写长文章的话会非常有用,Outline 是官方插件,到核心插件中启用即可自动开启。具体操作为:打开设置(<code>command + ,</code>) => Core Plugin => 发起检索 <code>Outline</code> => 选择开启。</p><h2><a href="https://link.segmentfault.com/?enc=sikz63WvZ%2BMdKWta5u2YiQ%3D%3D.X3sjk2g%2FU8YHyXzW4gUhdR1oOKnssvjRvrmqqoWoLnjB0LlQfchoLl20krY%2FAHTtbI8yWgSe2T%2BmkXRxLWWQ9Q%3D%3D" rel="nofollow">Mind Map</a> :思维导图插件</h2><blockquote>This repository contains a plugin for Obsidian for viewing Markdown notes as Mind Maps using Markmap.</blockquote><p>Mind Map 是一款 <code> 思维导图 </code> 插件,它可以为你的 Markdown 文本转换为思维导图,可以更清晰地查看文章的结构和内容,还支持一些简单的操作,比如放大缩小、拖拽、收起展开节点等,你还可以一键复制思维导图图片,分享或保存到其他位置。</p><p><img src="/img/remote/1460000041923459" alt="Obsidian Mind Map" title="Obsidian Mind Map"></p><p>如果你想了解更多,可以参见 Github 源码: <a href="https://link.segmentfault.com/?enc=C33gwIQYGpIliJ2wpEN7Xg%3D%3D.WuMmsYh25sFCapRjLs%2BRFOfx4P%2B%2F7xQSDPBWbQEV2cTTuut9Dcp50Zz5VIaGDwWU" rel="nofollow">Obsidian Mind Map</a> 。</p><h2><a href="https://link.segmentfault.com/?enc=9pPnZRYhnkcQ48NSPrTeBg%3D%3D.4tBX29INudlLqtBMQLEQFqPYkIjJiP164TnmeMCoCN%2ByuwNZyrIFFNfgHOtlZUHsqZlmOdPVckVpWnnMEZndjg%3D%3D" rel="nofollow">Paste URL into selection</a> :快速插入链接</h2><blockquote>Insert links (URLs) into a selected text "notion-style" using regular <code>Ctrl/Cmd + V</code></blockquote><p>当想要在鼠标选中的单词上插入 URL 时,基于 Markdown 语法,并不是很方便;此时你可以安装 <code>Paste URL into selection</code> 这款插件;启用该插件后,只需要选中文字再 <code>Cmd + V</code> (or <code>Ctrl V</code> Windows 系统) 键,就可以直接添加链接,比富文本编辑器中操作,还要方便许多。</p><p>如果你想了解更多,可以参见 Github 源码: <a href="https://link.segmentfault.com/?enc=33EBd%2BR8RxOA425AF9CZZg%3D%3D.LM3o219Gl%2BJJMfB7uvG7C0bQLzE374grHOCErEzOr2%2BvSvSc2HVJPy6ymMSowE%2FlnShK%2BubEWYBBS5UeVxbmLA%3D%3D" rel="nofollow">Paste URL into selection</a> 。</p><h2><a href="https://link.segmentfault.com/?enc=Gpbp5UBWkEGkabuvMZzC%2Fw%3D%3D.oHSB1o36L%2Bhue4FQG9MascjeuIC95EcgIwm0xdagrRqR9wWKshgbZawaVtSq2f%2FwQxk6qD%2FwxwxHNM%2Bn4kbBKg%3D%3D" rel="nofollow">Checklist</a> :待办任务增强</h2><blockquote>Consolidate checklists across all files into a single view</blockquote><p>Checklist 是一款<strong>待办任务增强</strong>插件,它可以为 Obsidian 的侧边栏增加一个任务栏,你可以在该栏目下查看到所有笔记中的待办任务,可以快速跳转到任务的位置,也可以直接在任务栏上勾选完成任务。其用法如下:</p><ul><li>启用此插件后,您将看到清单出现在右侧边栏中;</li><li>您标记的任何清单项目块都 <code>#todo</code> 将显示在此侧边栏中;</li><li>您可以通过在编辑器中勾选它们(例如 <code>- [ ]</code>-> <code>- [x]</code>)或单击侧栏中的清单项目来完成清单项目,这将为您更新 <code>.md</code> 文件;</li></ul><p><img src="/img/remote/1460000041923460" alt="Obsidian Checklist" title="Obsidian Checklist"></p><p>如果你想了解更多,可以参见 Github 源码: <a href="https://link.segmentfault.com/?enc=41nV5SEuZcW35Hy%2FyHydsg%3D%3D.iVSlD06TW73xY6go1PW0WvuWjrEebRcWwmokX4p4T8yfcuQBkKVV%2FzyH6CpSwljR64p14JgVfLqyGUhd3dndfw%3D%3D" rel="nofollow">obsidian-checklist-plugin</a> 。</p><h2><a href="https://link.segmentfault.com/?enc=bi%2Bfd2wuRQL0cTnvBvPjug%3D%3D.rVh0jwPd4YQWQbhiRkPLpJ%2FY7cNIwKfpvFJ9oU72PS2aiMCDr8BTt%2FYZaXKLydgT" rel="nofollow">Calendar</a>:日历📅</h2><blockquote>This plugin for Obsidian creates a simple Calendar view for visualizing and navigating between your daily notes.</blockquote><p>Calendar 是一款为增强 Daily notes 而制作的日历插件,它可以在侧边栏上增加日历模块,你可以用它来快速跳转到特定时间的每日笔记,而且你还可以用它来为没有每日笔记的日期创建笔记,可以为之前的日期创建,也可以创建未来的笔记。其用法如下:</p><p>在设置菜单中启用插件后,您应该会看到日历视图出现在右侧边栏中。该插件会读取您的每日笔记设置,以了解您的日期格式、每日笔记模板的位置以及它创建的新每日笔记的位置。</p><p><img src="/img/remote/1460000041923461" alt="Obsidian Calendar" title="Obsidian Calendar"></p><p>如果你想了解更多,可以参见 Github 源码:<a href="https://link.segmentfault.com/?enc=kysBJ9DiJNQE1OnU%2Fr7xuQ%3D%3D.4GltDQfkAqJ%2FSKd7uiXoJyW%2BM2JfjghVbI97w9H6KJcPdYJTf5qGgrABdRsBnsgHSVcF%2FbVQHTBjP8LUqfXLqQ%3D%3D" rel="nofollow">obsidian-calendar-plugin</a>。</p><p>如今,<a href="https://link.segmentfault.com/?enc=iSyS6fOfWZ4nX1lfj8pecg%3D%3D.5Uan4%2BuwY24mOrlVv%2BOypKrMJjqUcCXdCgWOSh7aRDMzn88GQIXf5K0pTfx6aqptF25MHdsHvI7x2%2F5k3JPfMg%3D%3D" rel="nofollow">Obsidian</a> 插件市场,所蕴含的宝藏已十分丰富,大凡能想到优化点,都已有人贡献出良好的设计方案。如果您有自己独特诉求,完全可以基于Obsidian,定制属于自己的插件,只需阅读相关文档,懂些 JavaScript 编程基础即可。具体可参见文章:<a href="https://link.segmentfault.com/?enc=%2BP4kUxi%2FsFbzpc%2BEgrYIFg%3D%3D.eWYqwhxcEtSXJCx9hHCyMCGWodvY%2BkOQEouW1IcKbZ%2F8lJjncdeTN6oCm%2Fh4O4bb757Wxh5%2FzzwoPBvYQCfB1A%3D%3D" rel="nofollow">为 Obsidian.md 创建插件</a> 或 <a href="https://link.segmentfault.com/?enc=Gnq6ASSv3M16lLmd9CKNPg%3D%3D.k9cGV2sOlTGTEd6Xg59ocxL3SESOc7XiEjackEEx65yw6Gq5Jd6uE71HTwI5QiL41w0JhA2BglrY%2FkkG5NGL4DfISrDD8t%2FZOnaL7G5pe64%3D" rel="nofollow">How to create your own Obsidian Plugin</a>。</p><p>窃以为,好的工具与强大工具,其最大区别在于:前者会让使用者觉得自己跟软件本身都很强;而后者只会让使用者觉得工具很强。<a href="https://link.segmentfault.com/?enc=3DadZAWoeLwQklnuI33Aog%3D%3D.xFOnOAYzD0TuOdcH0YI2t6MdeMN5C793vl%2ByI3Wybo%2BIYNmc9Bb8967P3%2FGQq17uzcCMXE2EHy5Pedwu0AiffA%3D%3D" rel="nofollow">Obsidian</a> 就属于前者,它能让用户 0 配置,即能快速上手使用;又能很好支持愿意折腾的朋友,在上面各种折腾,附加额外功能,实在是值得称赞。如今,只使用了没几天,尚有更多玩法儿,等待探索;欢迎各路朋友,分享您宝贵的建议和意见。</p><h2>您可能感兴趣的文章</h2><ul><li><a href="https://link.segmentfault.com/?enc=v%2FmBp7yZQEDGYCvS%2B5rWyA%3D%3D.eRNr3AnW8abNyp58xLyKu0pxp2um2cU0V%2BXB%2B3XU5qs%3D" rel="nofollow">谷歌自适应广告素材,制作心得分享</a></li><li><a href="https://link.segmentfault.com/?enc=%2BxQMSYdQ06IBvVItfSCDXA%3D%3D.osNLjr21XEdA2Cki%2FkHiVSFrsuK5hKRQBrNQqhLLjacIa3%2FWuSHGZqx7rSJlVzIb" rel="nofollow">优质网站同好者周刊(第 38 期)- 倾城之链</a></li><li><a href="https://link.segmentfault.com/?enc=CNvT%2FQJagV3%2FBSf95tcvlg%3D%3D.gT63L8xtUwlZfVOcXDNlUCLIUi2E6LOCIPzyjVqtypKN4%2F4MCHPNYYRb4iAqkZO1" rel="nofollow">优质网站同好者周刊(第 37 期)- 倾城之链</a></li><li><a href="https://link.segmentfault.com/?enc=TPee7LiWnmy0J7069FXwpg%3D%3D.TR8MeOhvaFHkUrQ9oIiZUUmWsKlrb4xf8We2A6x5vUxTm3N4g4IMMG7KNmewvn3R" rel="nofollow">优质网站同好者周刊(第 36 期)- 倾城之链</a></li><li><a href="https://link.segmentfault.com/?enc=e7qn063Ob0sKl4OQcYQN6Q%3D%3D.ubk1mwdD8lmsUBwKRxXM%2FbhVS32z7NEt6%2BVJ1cb51TZzdFklu7R6IzGhD86jikfGZCmanB%2BqKsKuAqF8XzX7fw%3D%3D" rel="nofollow">开启技术变现之路,探索第三收入来源</a></li><li><a href="https://link.segmentfault.com/?enc=BrHMwCF3acXf3%2B2jIKEHvA%3D%3D.cGU7wTRoP8g0DZJx2dhtL%2BHQM%2BM0UqSqCTuBkiuuzS7TIdf5hUvkJ%2BcywOB7kbNdbV029cfgLEiNE%2F3WvonZpQjUfhGBc%2FzqNCu502c%2FmRg%3D" rel="nofollow">云集优站,尽在「倾城之链」</a></li><li><a href="https://link.segmentfault.com/?enc=Dsh6cbu8v3m5BZ4TQeesaw%3D%3D.5vcxt8Y3DJcxE6xsS8CzMGAWPvrJtyFHS1NRFqtqKDGA7f4aqQ%2BuNnYGLjRJr7Okb%2FC7gluSMe%2Fj29zoMpQwNA%3D%3D" rel="nofollow">云集优站,尽在「倾城之链」其二</a></li><li><a href="https://link.segmentfault.com/?enc=Tby5EQJUB%2BCfsWfOvmZg5w%3D%3D.1PpFdIUw4VGJqqKhWzz34yrM4pW5bWWv6dcoNhK5%2FA%2F%2FsGj7dAHkq4E0DM3ZeGqZeMiPXmK2rvRtcX76eIj9BJVz%2F%2B1d6%2F7pgHJnQHXu%2Bag%3D" rel="nofollow" title="欲问美图何处寻?倾城之链有定音">欲问美图何处寻?倾城之链有定音</a></li><li><a href="https://link.segmentfault.com/?enc=ZobmkvBoCukKZgNPvDM%2Byg%3D%3D.mBKi2FD5MoFSIGLrGXz35eN3Q4lprUPiCgEFBpFThfiwibjuHgshdjc4p%2BHoo8b5LAh%2F0LFj3SkiQqvsuiQATbW6omZdOqnRH8RQkeMguyw%3D" rel="nofollow">超实用图片工具网站,值得典藏</a></li><li><a href="https://link.segmentfault.com/?enc=l2QPdS5gmYRbugWhEEfa7g%3D%3D.Vm5bKzg%2BJS1ma98kLzZ1iwL2cPo9kbNoSYKzVz4Tdray93wgM8WaIjMr%2BGqGc5XaFNFdplVTf8Ky4sEJmEU3weYZEZVeLblOV%2BiZ8A0Gb%2BUp24UcyCYC40HZhJi0VJw0" rel="nofollow">高质量免费图标资源大全</a></li><li><a href="https://link.segmentfault.com/?enc=mCi0APRehERizB3SordK4w%3D%3D.fjqsy73FWYAvHZd03%2BI2FpkMae7tYB6QotuBZ8v60Ly3eiZe%2BrnwQKDgZnVhCG0WMbyFSb8eO3GpXV8%2BYc%2F0M%2BkU%2BD2IZgwxG5Hv5naNYFE%3D" rel="nofollow">十佳 AI 产品工具,为生活添彩</a></li><li><a href="https://link.segmentfault.com/?enc=hxtOWpBQIsvI7UoCguB3LA%3D%3D.KDP%2BMvrZU%2Bsyah2RsLa%2BtebDYJplEQNJYoOSLQ4Fsxq3p%2BwFKTJND7qU7W0ppAs6o%2BhMaBHWW0hpwsBH%2FsA64NmWd8BMYWj60Ie%2B%2FdAnun38T2YmwaUUlLUz04eo4eFr" rel="nofollow">最想与朋友分享的网站列表</a></li></ul>
Uptime Kuma | 超棒的自托管监控工具
https://segmentfault.com/a/1190000041797543
2022-05-06T08:20:00+08:00
2022-05-06T08:20:00+08:00
jeffjade
https://segmentfault.com/u/jeffjade
3
<h2><a href="https://link.segmentfault.com/?enc=xw2ZheYg4jFgZ4Vh6CvQ3A%3D%3D.2GBsPuNA8z%2BH00KCRyrNd%2BwQ%2Fa9V%2Bpp2nvQuXlH%2FpmLVkyTmgltA9KJvF04Uv0fuCZvkqSue37y71fiSOXkFjw%3D%3D" rel="nofollow">Uptime Kuma</a></h2><p><strong>标签</strong>:<a href="https://link.segmentfault.com/?enc=nkrUrVVLJ22oXvo7PRVIdw%3D%3D.%2FR5cR4sacNVoJinNfwT03nIXxOArAhx0%2F99dP%2BKakZ2qmdJZr08yAEQCce2cDdC0qgkIfFo2e8A316TzfVIIBA%3D%3D" rel="nofollow"><code>自动化</code></a> · <a href="https://link.segmentfault.com/?enc=JqpW624fGtX0lVa0PGGj7g%3D%3D.1HhJqRLIgP%2Fz0dNPyR12OyA1c5BSOHvELhDJ4eC%2FkHSdffJQMBBqJkfpFZIla7QO" rel="nofollow"><code>工具</code></a> · <a href="https://link.segmentfault.com/?enc=mIlxpGV6sIRJ3ghDuz9snw%3D%3D.ONIWS%2FW8uI4XzDi6zbVo37RmFAFJz%2BVEH3xK8bH9Yf2Tm6VT%2FPe69jbE5%2FvjxL7t" rel="nofollow"><code>开源</code></a></p><blockquote>A self-hosted monitoring tool.</blockquote><p><img src="/img/remote/1460000041797545" alt="倾城之链 - Uptime Kuma" title="倾城之链 - Uptime Kuma"></p><p><strong>推荐语</strong>:<a href="https://link.segmentfault.com/?enc=tFU4Gj6KVXoBmosIPfEMHw%3D%3D.A2MZSWE%2B9nsowxjx%2FDdG6T3WLPgZMYXc9%2BBhhXNZ4ziWO2mlEU8mkDHPu7csGPTBJco0qHsXY9hxBmU40ZEccA%3D%3D" rel="nofollow">Uptime Kuma</a>,是一个类似于“Uptime Robot”的自托管监控工具(开源项目)。它支持灵活配置,拥有漂亮的界面,支持任何人托管部署,针对监控 Web 网站或者后台接口,有非常高的价值。它具有以下功能特征:</p><ul><li>监控 HTTP(s) / TCP / HTTP(s) 关键字 / Ping / DNS 记录 / 推送 / Steam 游戏服务器的正常运行时间。</li><li>花哨的、反应式的、快速的 UI/UX。</li><li>通过 Telegram、Discord、Gotify、Slack、Pushover、电子邮件 (SMTP) 和 <a href="https://link.segmentfault.com/?enc=vLnO5%2FncaRzp7ifNqj%2BsHA%3D%3D.DhdRoRIcx1BukX2Fx6FIA8BaU4MlZnlwUcasMW9TPO8Nkr2T4N9TzOLrWrpTYoPHU2ZRKKDox9dyXHPM4mLjeMi796ygJ6LCusk2yFKmsCe3DDr9LHrfKVgIqGinO9kBMHMTIQX%2FaEH0GU184VEfL3ZANn5Xn6ET9P%2BKbs7nsMc%3D" rel="nofollow">70 多种通知服务发送通知,请单击此处查看完整列表</a>。</li><li>默认 20 秒间隔;</li><li>支持多种语言;</li><li>简单状态页面;</li><li>Ping 图(Ping Chart);</li><li>证书信息(Certificate Info);</li></ul><h3>如何安装?</h3><p><a href="https://link.segmentfault.com/?enc=JqhhWdPMNUcQKIQdP73laQ%3D%3D.krAsBOPDa5JcDO1jerU%2Fmp%2Bv8QCNGGYm9lWC7ZWuWAzZ5mvqsz39YRewIczGNh5F36DxEUCu393pk9EYdAe4Pg%3D%3D" rel="nofollow">Uptime Kuma</a> 支持 Docker、基于 Node.js 工具链(外加 Git、 pm2)等方式部署,以下是基于 Docker(目前最近版本:<a href="https://link.segmentfault.com/?enc=FBnc4S%2BVKTV%2Bsy3eMqvfag%3D%3D.o%2F5t3ZtKIuTl4u4EZsDf2QIaptgLOEHnidmrFqsEYDX4BcwBUoxSfclBRp2%2FCvC3C7UeTIoe%2FCv0CeLXKn99wG2NOke7fkEgV24OLTE054s%2FSlXDZaM6lxhilvo6xwtX" rel="nofollow">louislam/uptime-kuma</a> 为 <code>v1.14.1</code>) 的安装方式:</p><pre><code class="bash">docker run -d --restart=always -p 3001:3001 -v uptime-kuma:/app/data --name uptime-kuma louislam/up</code></pre><p>当然,您如果喜欢,也可以基于 Docker Compose 来安装,详情可参见文章:<a href="https://link.segmentfault.com/?enc=K26FTWvXtxOb6CRgI15%2FIw%3D%3D.EgFW5ZZLxFH26povbPuBSvgbh0rP2JRIAeP6GbwF7ETdT3L1dvXsdHYZ0qh041CPd2TKSsd6B5qEswTEfdnjrA%3D%3D" rel="nofollow">如何基于 Docker 部署 Uptime Kuma 服务?</a>。</p><p><a href="https://link.segmentfault.com/?enc=A7QPF6R67KH%2FWVFKDdCWQw%3D%3D.E9pZKdT5x6R7gJ99kD6Qd%2B%2FCdkbU%2FKycScjvm6PnAZdtgN7QLC3C2KATJCHN7fDcbu5BP%2FOsQF1lFyTse7g9Yw%3D%3D" rel="nofollow">Uptime Kuma</a> 服务,在我来看非常有价值;可将其部署起来,监控正在维护的各种服务(如<a href="https://link.segmentfault.com/?enc=GegXo%2BO1jrntvboxgzI3pw%3D%3D.aqIgNjxguzSbJ1xQCNV5E8ce7Jpyy%2ByLjC6f13lyah4%3D" rel="nofollow">倾城之链</a>、<a href="https://link.segmentfault.com/?enc=%2BywVAqVH1XE8pLccF2YOlQ%3D%3D.NjoI1E5jmI%2Feutzio9Lfk20PLqviWna5ztsmp22iIAQ%3D" rel="nofollow">曼妙句子</a>);倘若应用出现问题,使得我能在第一时间知道,从而快速排查并修复,从而最大限度降低损失。</p><p>── 出自<a href="https://link.segmentfault.com/?enc=kryUnD%2F6ho0ZnBMhFw8zHg%3D%3D.jEmxDKOCEfWVArCyfSMF41hJyMMEWVGq3NmcOI8kyR0BEWruPF5Esc71QLWM5a1O9cuVZC8MNMQvzhM1Aoop9A%3D%3D" rel="nofollow">倾城之链 - Uptime Kuma</a></p>
大前端资源、教程锦集
https://segmentfault.com/a/1190000011108579
2017-09-11T10:23:57+08:00
2017-09-11T10:23:57+08:00
jeffjade
https://segmentfault.com/u/jeffjade
25
<h2><strong><a href="https://link.segmentfault.com/?enc=zj1z%2FyPLdmsEm4mFP9bZIA%3D%3D.c5u3U6OGanZJ56oR3cadYtXcLChSczD9PwwDGTu0x7azu6Kex1APBoV4TGKRwhDXjAq34AA76cdzl0fuT8I6NQ%3D%3D" rel="nofollow">Nice Front-end Tutorial</a></strong></h2>
<h3>目标与哲学</h3>
<p>众所周知,前端发展如火如荼,日新月异,而且很长一段时间内都将如此。这份由<a href="https://link.segmentfault.com/?enc=algH%2Fm3pcAvzL3rAVib6kg%3D%3D.gXCMwHfLIaFDPx%2Bj6%2FvDq6D0PPO3wrTx34RoHwrGi5Q%3D" rel="nofollow">晚晴幽草轩轩主</a>正在维护的教程列表;旨在为<code>前端学习</code>,<code>技能提升</code>,<code>视野扩展</code>,<code>资料查找</code>等行个方便。将会在日常工作探索、学习中,持续保持更新,增新优之章,除旧失之文;尽可能使得这份列表保持简练,以避免信息过重且冗杂;望其能在浩如烟海的讯息中,堪有所用。详细说明,可参见:<a href="https://link.segmentfault.com/?enc=Fgl0uXITdpKfqk3ilI66mA%3D%3D.Xn6HUnT%2Byj220gstipLTKFN%2FeawT4UUPcX6vMXoq2XW8MHW7bqi0S3XGTR9zfm31NkY3T6nHh%2Fc8zmjYiofTlQTsa28j2c23q3HfxmKnYNo%3D" rel="nofollow">与时俱进版前端资源教程</a>。</p>
<h3>分类目录</h3>
<ul>
<li><a href="https://link.segmentfault.com/?enc=KsT8zaA0TUuf0wWM0xOYMA%3D%3D.9giguyfEgunYpe%2Bc8F35T2gzIj6rSXZ5670aDUPTgMkurYSDWtBxILuzMhM7xZLsT6hg2bTkBjP3CCpOU2kJniicyf3nCGi9DxE5M5eU5mtxz1loFXy6ykIOucSKj6ST" rel="nofollow"><strong>大前端综合</strong></a></li>
<li><a href="https://link.segmentfault.com/?enc=yT5BPv9%2Bknq7oFzGUP117Q%3D%3D.Tkn2DR1JJJmC2XScVm%2F739s2SJXyxKKge9YO6kirk%2F8CqLJ5V%2B31VVgZfR8mR0a%2BXFToLJnUpyHXSNe8d5tb9Eg7MzeWNcoZPmiT1Zl4VL%2FkwK9BCti0SgsqSPf6GWwW" rel="nofollow"><strong>Tools</strong></a></li>
<li><a href="https://link.segmentfault.com/?enc=pDQfJjKiQVRzMvcBqvk%2BVA%3D%3D.Mn4DhS4IL%2Fc0l703O1QpIeK%2FMUFBeFOPI%2FGVmQLF5GzOEXtOvssBKPuZC88BpN3vfI3omV1QcPtEXHSeoGNX1x%2F7OP1z%2BoPhAO7zCNBMSR8oHPuNte4aiWcKTiQb0s40" rel="nofollow"><strong>EcmaScript</strong></a></li>
<li><a href="https://link.segmentfault.com/?enc=z5nQIDvdLi7Zj2AUj1qIiQ%3D%3D.4T4XBMJiAem6YHnl4hygXybVAcdxmfLLNwx1pkcq%2BG4UWTWYdp6PpohwC%2FWzKWj%2F9K%2BElRtftztDwBfOx4eNniNk3Hy3POKcB0w9MyC6Q7HESOjqPPT9gecGJH5M70SX" rel="nofollow"><strong>Css3</strong></a></li>
<li><a href="https://link.segmentfault.com/?enc=cW4BTrKcXfTJpKFgY5Oj2Q%3D%3D.TZLyhtM%2B0VS3H%2Bxy524MFVQ55v6w74hj%2F0iB%2B7xPqqYZVsSgIGmoiOE42yLOIubJI%2FpDoQkjuzfaVuEefcK2xzkRu9ex%2FS7gKBJN9KyozQk6pjZ%2BFiMFpWse26rS1dJA" rel="nofollow"><strong>Vue</strong></a></li>
<li><a href="https://link.segmentfault.com/?enc=IenuCrUb%2BGnz9PfmvO1nEQ%3D%3D.ggd7S830eLZWbm0pKMaFYAp%2F3s%2FUyNwZepbycXLtjNm2FCsY%2BzZw6R8RQnfTdVpUtyRWrJSf8eX%2B6kwGml0RLrhk04k50x6BJZg6wa30icbFtiQxO7hK9lcpo99zteG6" rel="nofollow"><strong>React</strong></a></li>
<li><a href="https://link.segmentfault.com/?enc=V%2BDKnQBDQNY2BbYd%2FFqo4g%3D%3D.AwsN8qa7fqBXkfJ2T9zo4fVjOrzR2TUE%2B6UsKMuC3buSBosmFAPZN0C%2BJVPN5s00QIJgPT5PHXLsbbV0Y%2BsyZLFJKBn9K6XC2lvMxvjPWvj0gWq%2FzZSt2TkYEkbaFM4%2B" rel="nofollow"><strong>Angular</strong></a></li>
<li><a href="https://link.segmentfault.com/?enc=p2D2YJhr31PtUa%2FY8u7mkA%3D%3D.kTTM56bzuJ%2B02FOIkmuoWVxCRIyhd99AHwsHshGza0za6EEPZXPQcQiCuGgFwCNCq5RYTwFoFKN%2BpCj4%2FIdcDDeORdFxTvhFIC7zdUEMy%2FkkK0byt4DGHcW56F0K%2BGW7" rel="nofollow"><strong>Webpack</strong></a></li>
<li><a href="https://link.segmentfault.com/?enc=8iR7MyWrrRNABd1WMy5mAA%3D%3D.26LrvTA%2Fnk8itNYfs70def0N%2BHF35pr%2FwZu2VgLTvry2EutKb5MTMwKNnomIwaKf8X9p2jDtx2%2BFFG%2FUDga%2BOrXlpTZHk7tunflHNtATOgDTeMp2y%2BQJU%2BsfzcwEAise" rel="nofollow"><strong>Gulp</strong></a></li>
<li><a href="https://link.segmentfault.com/?enc=eJFJ%2B7U3UxKf3hLQAic8Xg%3D%3D.Kn7VfyeewTL12SEkKom2XJsdIyfv4I5iSpnhQtXHz%2Brtw0HlbYFlffs%2B0feq%2BzO%2FzMCiMyy5XSRWDq%2FCRcqIajUspBJoEf49U3ZamlEt6pZNpx4A0Nw94PnxEpQcqyQH" rel="nofollow"><strong>Chrome</strong></a></li>
<li><a href="https://link.segmentfault.com/?enc=KW7pShSO5RuWrq%2F6umTV4A%3D%3D.tERyKXgW3g77A%2BkpP5XqW6RR9PdpdqqwI5sGBxmv5fJk1UXryFdOwQIm8NyhkyFSO7F9smvlHgUrV9SU25%2BGupxhYLevpukPAJu2aypHYYBt6rODt%2FMJ1rjxwlsqRGDf" rel="nofollow"><strong>Nodejs</strong></a></li>
<li><a href="https://link.segmentfault.com/?enc=pE3ABYXDPJac8glxHat1cA%3D%3D.hmgAm1xRNCCuPXQqHYEATEHxIEc%2F8ME5g00Ye4scj0bin5oGkZFb6HwsEgLxhGb3eueq88v6ClGxFD2ziQRWV3DSLW%2BsczqkaPJ7cLYjJJVnqju0p5DDdzgzkddHvITF" rel="nofollow"><strong>Pwa</strong></a></li>
<li><a href="https://link.segmentfault.com/?enc=R6cp11oAPiqhqBI8j6xcfg%3D%3D.GOioXqisgsfEaQOiWnvjBRXRn1gadj%2BH99Hcg1pR4lad2QVuMqWfi3Twas7Hawe16VzNPHtgKabgswTvTh9VIL4I8slSy5%2BaiCcb2q5A6tI%2FlxH41m%2BfVg9T1WbbEbDw" rel="nofollow"><strong>WebAssembly</strong></a></li>
<li><a href="https://link.segmentfault.com/?enc=RRuBH9dL%2FLx4ehUZcapDvg%3D%3D.ANV3GPjAEcLfKxg6wq14JbOz9OLI64y4pVMK9SgyhF%2BeFEwKNMfOcXYOBJbk5ELhpyCOlgV%2Bd6Y10p8m2plaL37jwiw%2FZeKmIHUpyWsqLAgnkeBLn3hDTh9a7P3uy%2B7c" rel="nofollow"><strong>Mongodb</strong></a></li>
<li><a href="https://link.segmentfault.com/?enc=SiDotE2e8xFTRwASzmdH0A%3D%3D.iAXZYtN5wx6cqYL5GL0TRPXRHwhidieU7MycVUpAmF2BwtGk5EyGNoLj%2FPynn8bNLrifYzVY%2B35veExkfmIJFL5aqcfGECUoiY0DHtGja7my8072YD7fKfXQwdxhtitO" rel="nofollow"><strong>Nginx</strong></a></li>
<li><a href="https://link.segmentfault.com/?enc=V54C4GZ287RVFM4bQSeLyQ%3D%3D.n4WOn77B2MbMZZaOkO%2FINXSUUUdW2kRakXelEutoDYagX5YvDX%2BtF2nwAGhTxRt1yT5U5%2FvYElob9Y6hggUWWvREiJsqWF3rBrT4jSWbHhMieN3eME9Im5ADlzAAgL74" rel="nofollow"><strong>UI</strong></a></li>
<li><a href="https://link.segmentfault.com/?enc=ipak5SL%2BA5krexLb42BwQg%3D%3D.lR0xefXUhM1jlez5itZdaQnf9b2KXYeY5WYvGznk8qtL9ycZKhDfa81YRlX9XF%2Fcd8cHx5uFn8YXZv2p9PIduW0lbrpJFOMzJXHjA19aqIk3T5qQUxzPxMs1eGj%2B9CNm" rel="nofollow"><strong>Git</strong></a></li>
<li><a href="https://link.segmentfault.com/?enc=fL7Vffc4zS693zUGqEifug%3D%3D.QMA9EFKMphpnf0BMRV4ZnZyHw5eIljYtNs8PYMccVy0Akfj0rGcvIQ90De%2BWRn%2B%2FzrzUG%2FVaNwPYavu3PJH%2B9yrXDIF2kQY2UvQI6CKG%2FbUcYTtri9tQdcplXhK4WP1tKRxc7C1ANO1esCU6Apzv0A%3D%3D" rel="nofollow"><strong>Optimization</strong></a></li>
<li><a href="https://link.segmentfault.com/?enc=7vsUY0lnLfcf8cUfYmJ1Bw%3D%3D.VcYuhwnuQ2NXpjxyHtd47ZZ6DWWrs604mBBjygrAUt8i2DLjfV3Q1JMgUPKIHW9HyMBuzFJACtKZ%2FIEyfzhOvELfKKxXqg3KaWOFiILGSID9m0HqovS%2FC%2BxhmBBlzrsX" rel="nofollow"><strong>Testing</strong></a></li>
<li><a href="https://link.segmentfault.com/?enc=lTtyK1YtgM12nNNhjl0R%2BA%3D%3D.rOYy7EhMFqTv36sLTr%2Fxv0pkN%2F5PGfFOSxbZa7%2Bf35GarHXUcm%2FQQqIf%2FvhUImBVYRJS%2BttseJ0fvPG6gKKS%2FF5tP4CYvVR1KKzay666prKhRpWIRfj2RiPHtpvmoRuFYMCZeG8hHyhq331gVNdqCg%3D%3D" rel="nofollow"><strong>Interesting</strong></a></li>
</ul>
<blockquote><p>持续更新中 Ing 。</p></blockquote>
<h3>相关链接</h3>
<ul>
<li><a href="https://link.segmentfault.com/?enc=0k%2FJYSRz7RsV3COpzqzh7g%3D%3D.Nu%2BxHE7gmoUAQqsvZix4ZdLuZGOI%2FZxISYmb6Y%2F9D0U%3D" rel="nofollow">个人博客</a></li>
<li><a href="https://link.segmentfault.com/?enc=dDFcdozl%2BsEf7sJStkO5%2FQ%3D%3D.RarLabg9W2jZFZRpqxz7h1lXkXeu6w%2BZipS8X31rH2E%3D" rel="nofollow">微博</a></li>
<li><a href="https://link.segmentfault.com/?enc=%2FGAh9vWw4QgsVKyp25nguw%3D%3D.B1ziOgklCE%2Fekh%2Fk8r2RqnOLpi6tP3p%2FBbaOO0LXExIZkbr5m7k4jodw5tYdT4a2" rel="nofollow">简书</a></li>
<li><a href="https://link.segmentfault.com/?enc=7djaP9387DJsI9HTErjcfw%3D%3D.fgbKaj8ftVDw8oaOHwiEThc4tqz3bc5lIMQjiSkxV7zx6VNssTw12saiKEBAWOUO" rel="nofollow">知乎</a></li>
<li><a href="https://link.segmentfault.com/?enc=u6BZSq4yt7OBQUqhSJOlzg%3D%3D.RG2%2F%2BGDnYXdum05OhI0AHmVd2cugFpIoNd%2Fe8uYsG%2Bc%3D" rel="nofollow">Twitter</a></li>
<li><a href="https://link.segmentfault.com/?enc=hI%2FA1T%2Fgp95C1dVQeXH6fw%3D%3D.U1wEr9FbE6aHiT4iRxL4mP5i5Z651mWJNBsUJ2Cgx%2FU1cg4dw8QzMJtkFY2wFNrZ" rel="nofollow">Facebook</a></li>
<li><a href="https://link.segmentfault.com/?enc=BMIWtu0A7EAw%2F9kR6HlywA%3D%3D.y1wpciWxuoZPq4vl3KeR%2Fzx4%2Fpu1FGrkGiw6CNwmff6qmoJkSvYq7wz2nOzUFbI5CYdzx9msvZr0qKmKjEtz3fwMUcv5B0mOKbkcMh8DGVYWN%2BH4lB9AlcnEqfs8BXjL" rel="nofollow">微信公众号-静晴轩</a></li>
</ul>
<h3><a href="https://link.segmentfault.com/?enc=K5ko74xxHPmi0%2Fx9gOnIbA%3D%3D.zKitFIilZS8D6Y8FliwIAspgg8kRfGZsRt%2BVSTfJI5%2B1gAcmD4%2B%2F47DRud%2B0TV%2Fj" rel="nofollow">大前端联盟</a></h3>
<blockquote>
<p>此二维码是为<strong>前端爱好者</strong>而设置的微信群,取名:<strong>大前端联盟</strong>。</p>
<p><strong>目的:</strong>方便大家一起交流下技术,切磋下技艺,分享下心得。</p>
<p>当然并不会刻意去遏制唠唠嗑、吹吹水,聊聊天;但请把握分寸 & 尺度。<br>在这里:你可以结识结识更多的同行,<br>或者得到一些工作机会(有种招聘渠道叫“内推推荐”),<br>当然也可以跟大家探讨些有价值的问题,<br>(请记住有 <strong>Goolge</strong>,<strong>Stackoverflow</strong>,<strong>Segmentfault</strong> 等等的存在)。</p>
<p><strong>加入者需要满足的条件:</strong>你正在玩儿(/学习)<strong>前端</strong>,并且有心想玩儿的更好。</p>
</blockquote>
<p>(入群后,请修改群内昵称为:<strong>所在城市名-职业-昵称</strong>,可主动自我介绍下)此二维码有效期至 2017-09-18.</p>
<hr>
<p><strong>备注</strong>:目前群人数,已过百人,上述二维码已不能进群;可扫描<a href="https://link.segmentfault.com/?enc=vdIhQXgy4QOXZfjsgWJL%2Bg%3D%3D.2styguIJ34pRkLq38Rpnyh0LzOcNFUL7Pne9MrpMFhZP1qIlJZyo9GSYrmPAe3INQCSvHHdhwrxXzfBhkdOQiuyqKmMZjVR6crMMOxS92wQ%3D" rel="nofollow">这里</a>二维码,说明来意or出处,手动添加入群。</p>
写于 2016 年末
https://segmentfault.com/a/1190000007983630
2017-01-01T23:45:03+08:00
2017-01-01T23:45:03+08:00
jeffjade
https://segmentfault.com/u/jeffjade
4
<blockquote><p>原文出处:<a href="https://link.segmentfault.com/?enc=EV1D%2FtwWT3qUK6q%2BfH%2Flgg%3D%3D.nCs4UhZ5pjm%2BFNFkmHhEpt3CAYfc7CLXnWG1eiqHpNs%3D" rel="nofollow">晚晴幽草轩</a><br>原文链接:<a href="https://link.segmentfault.com/?enc=zb9uRUwjUHWP4%2FuTyvvlRA%3D%3D.HExCv4GRtx%2F8tvGeNktr3eU%2Bz%2BL8LgGP09dNj37fBrHj4Y5vkKxTTDY9w4PjLuI789yjmHwIu1AQjLurHQGFGOmLhvTDash6oTRCMCJzVzo%3D" rel="nofollow">写于 2016 年末</a></p></blockquote>
<p>猝不及防的,今日就被成为了 2016 最后的一天;这想必是,近期的过活充实过了头,以致忽视了时光的流逝。时间这尤物,你越想试图去抓住她的时候,你会觉得她便嘀嗒的越快,虽然她的脚步从来都是恒定的。每遇旧去新至的边界,总会将过往岁月梳理一番,化为于文字以尘封;也借此对即将到来的时光加以憧憬,汇愿景于清单,力而为之,在时间的原力累积;经年往复,再来回顾,也不至心有戚戚感慨一事无成。这种仪式感,即便是在播种的时刻,也能令人感到幸福,这便是这篇碎碎念的由来了。</p>
<p><img src="/img/remote/1460000007983633?w=1400&h=933" alt="图片来自500px.com" title="图片来自500px.com"></p>
<h2><strong>按惯例,该有前言</strong></h2>
<p>2016 年的经历较之于2015,要丰富了些,上半部有在一篇名曰:<a href="https://link.segmentfault.com/?enc=QA8jXjoYE5bWJhEqbOJX4Q%3D%3D.0GBoVh6dex0pBzJJ1MmMf%2FfVOm6rXcoky0HvCV5gL2TsibabIDHZEkHXO1R0p%2FmLtU8G2o9TRPCCJaYlp1t%2F5Q%3D%3D" rel="nofollow">写于职业边上</a>有过记载;下半部则是投奔了新的东家,在新的环境和氛围里,朝十晚七,敲敲打打,工学兼备,自得其乐;外面的世界很大,出来走走看看,较于一隅之偏安,好去太多,毕竟这不是在日本做寿司;所以,对于这个选择,很是觉得明智。每逢节假便觅个餐、逛KTV、看电影、或偶尔爬个山,单调的消遣,简单的快乐。值得一提的是,在近一个月的时间里,则体味了一番加班潜入夜的滋味;虽不建议如此,可人生的丰富不就在于各色的体验么?当然,这种时光成为一种常态之时,多少有些暗无天日的味道——毕竟连去亲近下朝阳和晚霞的没有的时候,不就是这个意思?细思起来,2016年的生活倒不至于如此简易单调,只不过,总觉得写这种东西要有所保留(或载于私密日记中),否则总感觉像是脱光了展露给很多人看,这种感受,懂事儿后就没体会过;我猜肯定很难为情。前些日子,有偶然读到几则大师的文字,据悉是出自季羡林先生的《清华园日记》;那其中实足的展现了大师年轻时候的真性情,也由衷的对他老人家多了几分倾佩。但我想,如季先生年轻时知晓自己的这些文字,被世人所读到,多少也不会情愿。故此,按下不表。</p>
<h2><strong>谈谈这工作</strong></h2>
<p>无论于生活还是人生,工作这事儿都具有重要意义。何况,如今大部分国人的生存,还得依靠工作来维系呢。因此呢,这事儿得说道一番。毕业后,因为不晓得能干什么,而选择了编程;如今,也还在做这个,除了不晓得还能干什么别的外,更多的成份是欢喜——对于编程这项工作。15年6月,在编程这块,由写游戏转到了Web前端;辗转一年有半,这行业发展可谓真<code>日新月异</code>,这也是欢喜得由来:要知道长时间用一种手段,做相同的事儿,是很枯燥的存在(在日本做寿司到80岁高龄的人,真Tm厉害);每天都有新的东西可以学习、体验,这着实很令人开心。同时也因此会产生焦虑:当没有足够的精力和时间,去跟上节奏的时候,多少会衍生出来的,不是么?</p>
<p>5月份时候,入前端几近整一年,有对所使用的前端技术变更,写了篇文章<a href="https://link.segmentfault.com/?enc=BT2AXxFJMoiahhSWDYGTVA%3D%3D.42k5qTWyhrEakgHoPo7zipghJupSD9IVdLJrm01sn1SB2aGs7xRkheicI8mK%2FAATQ0AhFpbObEwKrS5CeUR08aC3wRnG0TKCYm5Dcs%2BzM4Y%3D" rel="nofollow">所历前端“姿势”更替记(其一)</a>;时隔半年,正如预料,<code>所历前端“姿势”更替记(其二)</code>早也该写出来了,只是忙懒汇聚的日子,计划总赶不上突如其来的变化,搁浅至今未能提笔。可以一说的是,2016下半年 <code>Vue</code>如期的更新到了2(React等新型框架同样有极大的变化);写了几篇关于<code>Gulp</code>的文章,不久之后却全部投身在<code>Webpack</code>的石榴裙下;在一份前端技术调查中,<code>Jquery</code>虽使用率排名仍居首不下,但我司已弃用这玩意儿(微注:很早之前,个人便不怎么推荐随意使用它,虽然它很强大,可是它历史的使命在这一年,已经宣告完成);还在使用<code>ES5</code>的朋友们,可以转到<code>ES6/ES7</code>,其中酸爽,谁用谁知道(个人挺喜欢).....显然这不是一篇关乎技术的论述,也按下不说。</p>
<p>对于Web前端的风云变化,其中有几篇爆文,可以一读,窥一斑而见全豹,譬如:<a href="https://link.segmentfault.com/?enc=asYeYBoUbFeSRKGLFllkYQ%3D%3D.op7Sl0mCHXwkzgXPYmLZdkwT8G2OOBIB68BiSPdyaZRNl6VweXHXJPGQA0x2hMyW" rel="nofollow">在 2016 年学 JavaScript 是一种什么样的体验?</a>,<a href="https://link.segmentfault.com/?enc=YYxqbJkFFGlQ2BfNwN9Z9w%3D%3D.R0n51FKlZoc7sL1GUXdzxkllm0gY%2Bc80AuorjZSM1VSO7ZJv6CWA%2FgPajXeBtI1d" rel="nofollow">如何评价真阿当的文章:《2016年前端技术观察</a>,大致可以对其发展窥测一二,当然还有不同人对这个不同态度。个人态度是:不论是计算机、程序,还是牵扯到的框架,协议,规则等等,都类属于工具;能使人高效去完成新的需求跟想法,就当去探索、尝试、学习。天下武功,唯快不破。只有迅速的完成该做的,才有时间去享受生活。</p>
<p>据悉截至到 2035 年左右,科技都将会有长足的进步和发展 <sup><a class="footnote-ref">1</a></sup> 。那么在这之后的 20 年,从事技术还是一件蛮不错的选择;然而,这也要求我们拥有持续学习的能力与激情<sup><a class="footnote-ref">2</a></sup>。所以,在接下来的 2017 年,在技术方面,计划前端技能持续深入的同时,渗透要学习设计与后端。工作方面,当然希望赚取更多身外之物(钱这东西我很需要,也蛮喜欢)的同时,能够产出些更有价值的产品。</p>
<h2><strong>说说这博客</strong></h2>
<p>关乎博客,是很有必要一谈的,毕竟这事儿,我很用心的在去做,这也很有价值。16年产出颇少,有输出二十七篇于本博客(含本篇);从百度统计来看,这一年收获浏览量(PV)量 20.6万+;访客数(UV)12.5万;IP数12.4万+。这数字还算满意,毕竟是在没怎么运营、也没去迎合百度SEO、也没勤于更新的前提之下。自己对于流量(虚荣)这块,也是希望有一个厚积薄发的过程——博文与我自身,都能有一份看得见的同步成长历程。</p>
<p>在新的纪元2017年里,关乎博客,有给默默给自己定下可以量化的目标:每月至少产出博文三篇(至于访问量,自然是多多益善);而这份内容,自然也是基于分享,以经世致用为准则。毕竟在我成长的过程中,他人优秀博客,给予了我很大帮助;同时从某度搜出来大部分疑难求助,浪费了不少时间。所以,岂能再<code>助纣为虐</code>?再者的是,窃以为:<strong>欲要做一个有意思的人,首先得成为一个有情怀和原则的人</strong>。有那么些时候,臭美的欣赏下自己,便是基于骄傲自己有这般特质。</p>
<p>博客自上半年加入赞赏以来,陆续的有收到些许赞扬和打赏,这里由衷的表示感谢;是你们慷慨的鼓励,让我知道这份分享和坚守,对你们也是有价值的。2017年,力争产出更多有用的文章,以作答谢。</p>
<h2><strong>聊聊那些爱好</strong></h2>
<p>哇,<strong>电影!</strong> 从年初的《澳门风云3》、星爷的《美人鱼》开始,到昨晚的《情圣》;不完全统计,2016年有在影院刷电影近30部(私下刷的也不在少数)。较于2015,有着旗鼓相当的数量。对于电影,两小时内体会另一种世界,别提多值得;如果运气不错,遇到些靠谱的剧本和导演,体会那镜头下和技战术中的艺术,着实是一种享受。有生之年,想必我都不会感到特无聊,毕竟有那么多优秀的电影,在等着我去欣赏。</p>
<p>啥,<strong>电视剧?</strong> 从年时到青年,即便是去年,都会消耗满多可以浪费的时间沉浸其中,并且自身很多特质,也是处于电视剧影响的我,在16年这365天里,奇迹般的没去追个剧;记忆中看过几部,也不过是将个别老剧回味了下,譬如古天乐版的《神雕侠侣》,侯勇主演的《大染坊》等等。这份时间的节省,得感谢祖国各电视剧导演们,每当想看上得时候,总被各种神剧情给雷得退却了;谈及综艺?它和浪费时间是划等号的,所以...。</p>
<p>耶,<strong>动漫。</strong> 非深度漫迷,那些年追过《犬夜叉》,随后沉醉《火影》——2016年也奏响了告别的钟声。16年下半年,沉迷一部动漫,那就是《秦时明月》!以前也是看了几幕,然而总觉得画风和面部表情,跟火影相比相去甚远,就没怎么有兴趣。自偶然看到《秦时明月之君临天下》某集,突被迷住,一发不可收,以混乱颠倒的顺序,2天内刷完了玄机自07年更新至今的五部,感觉甚爽(就是更新忒慢,惜哉)。如今,每周四更新的《秦时明月》、《画江湖》便成了一份期待。</p>
<p>哈,<strong>社交。</strong> 先前的自己,作为Coder,有活跃于<code>简书</code>,<code>博客园</code>,<code>SegmentFault</code>,<code>V2EX</code>,<code>开发者头条</code>等处,2016年多半之在自家田里微更;生活中,则是将发言、分享的阵地,由朋友圈转移到了微博——<a href="https://link.segmentfault.com/?enc=J%2Ff6krpk5pzOZvuN4378NA%3D%3D.B3Im5NDJdxor47cH2QuywEXVNbOdQzNYeQtkwa9sCNk%3D" rel="nofollow">杨琼璞</a>。插播一则广告:玩儿微博的朋友,如果你也中意编程|动漫|影视|分享... 不妨关注下,分享只给你有意思的,这是认真的 ((^-^)) 。</p>
<p>噢,<strong>读书。</strong> 谈及这事儿,自惭形秽。按着心和兴趣,读书这事儿,蛮喜欢。要说追逐名利,读书也是最稳妥且低成本的投资;而且论及令内心平静,再如约妹撩人,这也是不二的选择。可是我的16年,对于读书,几乎是一份空白卷,引以为憾。2017年,总要能坐得住身,静得下心,书间文海,寄情志趣。</p>
<p>喔,<strong>旅行。</strong> 作为宅男,却也蛮喜欢这事儿,可是在宅于动的较量中,16年基本没去远一点地方走动;那心之所往的山巅草原,也没能按照计划,与之相约,实在不堪回首去年那些清单。读万卷书,行万里路,这之于丰富人生,是再好没有的搭配。2017年,名山大川,云海雪原,再不辜负你的等待,保证!</p>
<p>擦,<strong>运动...</strong> 这比读书还令人感到心酸,16年几乎没怎么保持运动,好担心未来有一天,不收腹不弯腰,看不到自己的膝盖(小肚腩越发丰满,桑心);未来很好,所以要好好保重自己身体。而作为男人,体能、体型更是十二分需要注重的大事。2017年,这个是首当其冲须要予以大改的,我要遇见你,我的八块腹肌!</p>
<p>最后,很需要补充一点的是:<strong>如今正处在人类历史变革浪潮最高处,前所未有!</strong> 从 2016 年发生的那些变化,你应该预料、且认识到:“世界正处在一个前所未有的大变局,机器人、自动化、人工智能正在变得比人类更强大。在可预见的将来,技术最终将淘汰人类(尤其是精确性事务!!)”。在这样大时代的背景之下,人类社会的形态,将发生颠覆性的变化(推荐阮一峰先生的<a href="https://link.segmentfault.com/?enc=jkUW12Yj2FwLpX9jtxj0ow%3D%3D.ZnrugHtqbrltoKwndeV0wEfOxRZe1UeMkPCqjKVR74y%2FavZul%2BwT2YlrpnLbHY2e" rel="nofollow">《未来世界的幸存者》</a>)。窃以为,未来属于拥有资源跟技术人的天下,更多的人沦为为生存而挣扎(如今,不正是如此?)。但,机会与困境同在,在这个浪潮里,只要我们紧跟时代的步伐,创新与眼界并拥,努力和坚持同在,步步为营,稳扎稳打,相信在不久的将来,颠覆真正降临之时,可以打出一场漂亮的翻盘战!2017 Fighting 共勉。</p>
<p>昔年有在<a href="https://link.segmentfault.com/?enc=VOiqKixjD4jYtx9Q3eLHgw%3D%3D.CieGH4RHFJBBrPU2KrIWvCtMhA%2BO7mXX3ILb7vRw4Ik5bua2kDMbOALk4g%2BhdQufmVJzVs6JV3uR7EpYeaS3sf9FUVwllfDoX5GFW6WuPHU%3D" rel="nofollow">写于2015年末的总结</a>中写道:“明年此时,期待字里行间多一分自信与从容,洒脱和无憾”。而今,要寄语于明朝的是:纵年与时驰,可初心不改;即意与岁去,依激情满怀(当然:赚更多钱和提升自己,是大前提)。</p>
<p>以上,于2016/12/31 深圳南山。</p>
<hr>
<ol>
<li> 美国有一个未来学家叫做 Raymond Kurzweil <a href="https://link.segmentfault.com/?enc=1OuvwV50mA%2F0AYcSWbHP5w%3D%3D.pKsoVku%2Bme3X3NjzXlEPV36c8s%2Bha8QCGSxXI0lv6Pwv4yGD5Na6mn0M8JIH95KHmSLRKNXfZ5F2YZ6k5BhyJMQDPiz4fMIpHC6MqyN1rtK0jUMOqcPK42RbM3JS1qv7LrEp70DzK%2BsvQzLywgG3dg%3D%3D" rel="nofollow">雷蒙德·库茨魏尔</a>写了一本书《奇点临近》,其中预测在2035年后,机器人智力将达到人类水平;首次听到这个,是处于财经作家吴晓波先生的<a href="https://link.segmentfault.com/?enc=%2FtlN2fhi6QOWuKtSUNp5YA%3D%3D.jZAEyZr3QJuHjof2QODvZ3OtM6yWCx%2B5E3jcR82wpybwbrweAf36xg0gevM80igCOC3sCVJxLOZczLKocj5UPA%3D%3D" rel="nofollow">一篇演讲</a>。未来难以预测,但从如今人工智能发展来看,这番预测有着不低的可信度。 <a class="footnote-backref">↩</a>
</li>
<li> 前端技术的发展,起于那刀耕火种的06年,那是后端为主的 MVC 时代,到后来 Ajax 带来的 SPA 时代;JQuery解放生产力的放肆时代,MVC 驱动的框架时代;以及如今正方兴未艾的 MVVM 数据驱动视图的美好时代(Node 带来的全栈时代?这个你怎么看?);前端及数据科学,绝对是 16 最火爆的方向,一同这前端技术的兴起和发展,都还只是一个开端,而非终点。所以,前端的路会越发明朗,同时也是越发艰难:所以不去持续学习怎么可以? <a class="footnote-backref">↩</a>
</li>
</ol>
Vue ES6 Jade Scss Webpack Gulp
https://segmentfault.com/a/1190000005115926
2016-05-13T12:00:45+08:00
2016-05-13T12:00:45+08:00
jeffjade
https://segmentfault.com/u/jeffjade
6
<blockquote><p><strong>原文链接</strong>: <a href="https://link.segmentfault.com/?enc=K8oxQMSyrLNEr9jtOtBSNQ%3D%3D.AZRDC3OsifU54sXC6k5MFJcpUaxLserYk4R%2BYN0dhWVOt5Z7qLrpIIM%2BJx0IVAzD5XDx4m3za6XBug07dLhEOpWLUUV5h4qRGwEh4XoRtlk%3D" rel="nofollow">http://www.jeffjade.com/2016/05/08/106-vue-es6-jade-scss-webpack-gulp/</a></p></blockquote>
<p>一直以来非常庆幸曾经有翻过《代码大全2》;这使我崎岖编程之路少了很多不必要的坎坷。它在<strong>软件工艺的话题</strong>中有写到一篇:“首先是为人写程序,其次才是机器(<strong>Write Programs for People First, Computers Second</strong>)”。虽然这是针对代码<strong>可读性</strong>来谈及的,但这间接昭示了<strong>开发效率</strong>之重要不是?此次以 <code>Vue</code> , <code>Es6</code>, <code>Jade</code>, <code>Scss</code> , <code>Webpack</code>, <code>Gulp</code>等一套强大组合来改善团队前端工作流,首因即出于这个理念。 </p>
<p><img src="http://7xoosr.com1.z0.glb.clouddn.com/vue-webpack-sharp-sword.jpg" alt="Vue ES6 Jade Scss Webpack Gulp" title="Vue ES6 Jade Scss Webpack Gulp"></p>
<p>不觉间,突入这深似海的<strong>前端</strong>,已近一年。虽然时间不长,却也经历了几个框架的更替。然而这并未使我感觉到Coding的 快乐:因为本质上,整日都在做着重复的事儿用重复的方法,这就好如让你整日拿着烂扫帚,在一座乏味的猥楼前,人为而机械地,日复一日地扫楼前枯枝落叶一般。如此,倒也没什么忒糟糕;只是有一点:即便扫得三年,这经验和功力也就几天(即学会这套机制所用时间)而已。直到遇到这<code>Vue</code> <code>Webpack</code>。</p>
<p>为何有上述的一点小<strong>感慨</strong>嘞?这缘于现在的工作内容。如今我们团队人倒满多,再招几个就可凑在一起踢一场足球了。主有前端(Js)后端(Php),并加Android,Ios各一名。大家合力为公司几近所有款游戏,提供运营服务。而我等前端所做的事儿,体现在用户那里,不过就是游戏中的<strong>活动(Activity)</strong>,这在本地中某一场景下,以webView得以承载和展现。我们的工作大部分即将运营策划的一些形形色色活动,以Html+JS+Css加以实现下。</p>
<p>这本身虽不具可吐槽性,可喜的是(?),公司数十款不用应用游戏,前端er得为此这些不同款游戏做相似运营活动;因为每一个活动(SPA)页面过于独立,故而每一个新活动,从切图,到布局,调样式,写逻辑,测试至发布,全部得重新来一遍。时常为此“念天地之悠悠,独怆然而泪下”。要知道<strong>无聊和乏味的工作是罪恶</strong>,不管是对于个人还是之于时代。</p>
<p>本着<strong>工欲善其事,必先利其器</strong>的理念,一直以来在工作效率这块,略怀执念:<strong>一个问题不应该被解决两次</strong>。毕竟有了快速迭代产品的能力,以及完成需求的高效,才能节省出时间来研究产品的运行效率,或者别的。宁愿多一分钟用来发呆,也无意多一秒低效以来勤奋。在此记载一篇,以纪录前端编程之路的一个转折。前端发展日新月异, 有闻戏言一句道:"每六星期重写一个前端框架"。而在这么多框架下,缘何选取了这几个组合,天意如此吧:信息汹涌万千,首次接触到就它们,然后就是它们了。</p>
<p><img src="/img/bVvC36" alt="Vue ES6 Jade Scss Webpack Gulp" title="Vue ES6 Jade Scss Webpack Gulp"><br><strong><code>Vue</code></strong>:上一个解决工作需求机制,是以<strong>Backnone</strong>,<strong>RequireJs</strong>,<strong>jQuery</strong>组合来撸(后期我有注入<strong>Gulp</strong>);虽也能将工程模块儿化来写,不过,这跟我期望相去甚远。并且前端发展到如今这地步,<strong>组件化</strong>开发,也早已流行开来。先前在前端选型上,虽然也知道<strong>AngularJS</strong>,<strong>ReactJS</strong>等大名,不过因为<strong>Vue</strong>的简洁强大,更因看着特合口味(用户界面完全可以用嵌套的组件树来描述),所以没怎么纠结,也就它了。如今回看,这是非常明智的抉择。前几日有看到一篇<a href="https://link.segmentfault.com/?enc=77cWLi9GSwTG%2BTBOwkSkyg%3D%3D.%2FfiHBA2OXxdWTWDp%2FxSoRw7bu43PbrOMwzaJQzvBVZc%3D" rel="nofollow">《2016 年后 Web 开发趋势是什么》</a>,涨更多姿势。</p>
<p><strong><code>ES6</code></strong>:这是时代发展的大趋势,学习它是蛮必要的。对于ES5,它的变动在于增加而非修改,用抑或不用,成本仅仅在于学习 Es6 这块儿,不用考虑任何兼容。如今,对于 Es6 尚在学习中,谈不好。不过提供更多 Api,语法糖,让写 js 更加便捷,用着很是舒爽,尤其<code>=></code> <code>import</code>等;个人比较推荐,团队目前使用情形还并不理想,有待推进。</p>
<p><strong><code>Jade</code></strong>:用了<strong>Vue</strong>,最大的好处在于可以组件化来开发各个SPA;由此,就得编写大量常用组件,达到各个功能/布局模块可以公用&复用,如此也方便统一维护and改善。虽然<strong>html</strong>的标签就那么多,然而写她的人确是层次不齐的。很是希望每位写组件的队友能够优雅统一,然而发现这是事儿,还是提供一种机制令其不能写得太糟糕更容易些。当然,实施过程中,这个跟<strong>Scss</strong>,<strong>Es6</strong>一样,都没有强制使用。</p>
<p><strong><code>Scss</code></strong>:用它比较好的优势在于:使写CSS有了编程得感觉,这对于大型应用也的确很有用,可对于SPA应用,优劣几乎相抵;在机制中推荐出来,最大得目的在于:想让队友们可以多一项技能。可根据使用得情形来看,只是让我更明白两点:学习态度跟结果因人而异且差别很大;人类得大脑思维方式更趋向于懒and习惯。</p>
<p><strong><code>Webpack</code></strong>:用这款强大的打包工具,主因是官方推荐它。后来证明它的确强大异常(它能把各种资源,例如JS(含JSX)、coffee、组件模版(含jade)、样式(含less/sass)、图片等等都作为模块来使用和处理),同样的学习成本也最大。在折腾这套机制时候,消耗时间最多的就是在这块。并且类如图片打包路径问题,首次开启Webpack巨慢等问题,如今都没很好的解决,只得采取写兼容办法。不过,它在整个项目机制中起着举足轻重的作用。</p>
<p><strong><code>Gulp</code></strong>:Gulp在15年就有使用。将其列入新机制完全是出于高效开发的目的。团队工作,需要先行在内网测试ok,方才可以发布外网。而<code>webpack</code>打包部署在本地,这就需要采用ftp工具上传打包内容。先前使用所<code>Xftp</code>,后来试用过<strong>WinScp</strong>,以及<strong>GoodSync</strong>,感觉都不是很理想;SublimeText下的<code>sftp</code>插件倒不错,却作用于激活而变动的tab,对打包生成出来的不能work。而Gulp下的<code>gulp-sftp</code>却很好适用这一场景,监测本地某文件下指定文件变化,指定内容上传。因此必用<strong>Gulp</strong>。更有<code>gulp-tinypng</code>(熊猫一键压图),<code>gulp-spritesmith</code>(一键生成雪碧图)等等可用的插件,一键以为之,大大节约开发时间成本。</p>
<p>下图为 Vue+ES6+Jade+Scss+Webpack+Gulp 开发项目机制所涉及到的<strong>npm</strong>插件:<br><img src="http://7xoosr.com1.z0.glb.clouddn.com/vue-gulp-webpack-plugn.jpg" alt="Vue ES6 Jade Scss Webpack Gulp" title="Vue ES6 Jade Scss Webpack Gulp"></p>
<p><strong><code>Other</code></strong>:<strong>工欲善其事,必先利其器</strong>,语言,框架皆可以归结为器;而不当仅局限于开发工具以及PC/MAC机。欲要高效开发,熟悉语言框架,拥有敏捷思维,丰富经验等无疑是最有帮助的。但这些层次非朝夕可至;那么在其他方面有所提升,倒也挺有裨益。如之前所提到的以<strong>Gulp</strong>来拼图/压图/ftp上传;再如熟悉开发工具(SublimeText/Atom),这在文末有点自荐;再如写些脚本,批量处理新建项目模版等等;当一件事被重复做超过三次,且有代码实现以替代的可能,就当花点时间Coding以解放生产力。</p>
<p><strong><code>总结</code></strong>:以上些许唠叨,即为这段时间折腾的由头。如今,团队开发机制,也正全面向这套过渡;常用组件也已完善不少;开发效率在之后越发将得到提高;因Vue本身自带其他各方面优质特性,产出的作品各个方面也都大有改进,幸甚。如此,编程才是充满积极意义的。下一步,当朝着前端<strong>工程化</strong>、<strong>自动化</strong>方向前进,而这块儿,另一队友目前也正在践行的路上,Go Fighting。以下为一路折腾过来的学习参考:</p>
<p><strong>Vue篇</strong><br><a href="https://link.segmentfault.com/?enc=%2FPOXFYMEI9bHl7r0ra3WHQ%3D%3D.2f00fULoTSYSbt7fq7UZcRaqO1aAuKAmAftgWw3XpF2OqzfI2HDfcq02GaJadogpeZFw3gq2NF0A7QZ6uEH56g%3D%3D" rel="nofollow">Vue.js:轻量高效的前端组件化方案</a> 来自Vue作者<strong>尤雨溪</strong><br><a href="https://link.segmentfault.com/?enc=I8xHPEoS0QtJpofT%2BnSQTQ%3D%3D.xeVzWyvjAEuKzcXuQvUrhFVI%2BViA8Gu2JLykhLYFCYQ%3D" rel="nofollow">Vue官方教程</a><br><a href="https://link.segmentfault.com/?enc=kPpzCZzufHWF5DftR4QLQA%3D%3D.B1qRp9DKZYiFKYLrKz9Rv30K05SYe3s%2FZLAyzWhNrYgRgWE1nEO26Rj%2FUiMmGYl8" rel="nofollow">Vue.js 源码学习笔记</a>来自<strong>囧克斯</strong><br><a href="https://link.segmentfault.com/?enc=3L2sl6oyOovxrPX84Iv9bg%3D%3D.6YOLy4jGCplKlFRgXYQWljZF%2F3vcPYoXWHjmYNSZqdyi3HVRK78tL7opdpRblqTzAzbMilciFcsBPN8p4lC8gQ%3D%3D" rel="nofollow">vue-router文档</a><br><a href="https://link.segmentfault.com/?enc=TCFrtRY21lOfHromQeAd4Q%3D%3D.nKq02RFoz3b5O4EBcbPqJE6VH7Lfx1gw6Ag%2B%2BPFnj1N%2F1foSTnin6ip1lPev7kaURP7%2Bv5a%2BhwyCog7Aq8o22A%3D%3D" rel="nofollow">Vue 组件化开发实践</a><br><a href="https://link.segmentfault.com/?enc=%2BiVAPQwKRykrx7kUgvlxqg%3D%3D.kpH0tz7eN%2F%2BFfA4UWxeyRA2euewV0u1D5ZbF8wvcso4YUQHBEiXX1qiojpF2h7NHSbuQA9%2FzT217Q1XlHh%2FA6xQT%2BnNHAritdWFgRvkt3GA%3D" rel="nofollow">mvvm学习&vue实践小结</a></p>
<hr>
<p><strong>Webpack篇</strong></p>
<p><a href="https://link.segmentfault.com/?enc=2wM4pBHl5ss0VcQoa6UEHw%3D%3D.yHUHq3cem05J1Omh4B9KoMWVqI1ij6I3sZ81agdZ3Ck6rGqTlQ1N9Af1wojMaDexrUjOqH6yCjYv9JU8riiaQg%3D%3D" rel="nofollow"><strong>一小时包教会 —— webpack 入门指南</strong></a><br><a href="https://link.segmentfault.com/?enc=3%2BIlKgC%2FFnkjrA3B4e10xg%3D%3D.Z3qS3leMkSF74ZYRFua%2B8oxeplnFRHVyrj3QQaZ88TYy1UAy6iHEGH4BwlEOUs4GWNNzzXvvNhfj6AQVbpvqDA%3D%3D" rel="nofollow">webpack-doc(中文文档)</a><br><a href="https://link.segmentfault.com/?enc=fc8thuWnr1GqiwZDBdiHtw%3D%3D.38i7vCL9hLgxxz1TIECDz%2FsdrxbvmonfAf9%2F1iP4kB4%3D" rel="nofollow">详解前端模块化工具-Webpack</a><br><a href="https://link.segmentfault.com/?enc=eHHig4kfrvxEG4eFC1yOTw%3D%3D.XqIrUjuwTuMfkBdXo7Z7kQkEfmoPcJPZrqv7wDLBIBI%3D" rel="nofollow">webpack常用配置总结</a><br><a href="https://link.segmentfault.com/?enc=JBuIx2Wq%2BUeJsT5rbtFd%2Fw%3D%3D.CXExwERsEgz%2FY%2F6QWCBuI2uHM8iLvHKsEH6Qfl3%2FvTcvSLUdejQS4DrLvQ5HK5oqatXMS3daKU3eWyod%2FESFjildiMuqd%2BPv5G%2FgEQ9J2II%3D" rel="nofollow">Webpack 性能优化 (一) 使用别名做重定向</a></p>
<hr>
<p><strong>Gulp篇</strong><br><a href="https://link.segmentfault.com/?enc=z6e7MQ6KaSj4WJgpQ4zjtw%3D%3D.KnmtCBxYWdbRx7BzAZGBeMBJGYYFZ1ITqiNAJHvXM7ussdpTiFIeiSxTZkhCQKFW" rel="nofollow">Gulp开发教程(翻译)</a><br><a href="https://link.segmentfault.com/?enc=5LkAuZfsPRllTWVvQbVuBw%3D%3D.XAmWAkijhMQfbG5ZpPoUqbByRbCXR1%2Be6PIPOurybhlclHhduKLNN2i6CbbVS%2FyFLKpZkasud9MWzBwWabNFAQ%3D%3D" rel="nofollow">Gulp探究折腾之路(I)</a><br><a href="https://link.segmentfault.com/?enc=zXvuVm2u5aGjKDDjeCjfhQ%3D%3D.GvdxTjY42jbtnHBD6C4ce5czifsPaBcR%2B6vchCYabmvtaJtXbxTzkDQYthhjfNM2DEiTPZEI9WpkHibKbad6hA%3D%3D" rel="nofollow">Gulp折腾之路(II)</a></p>
<hr>
<p><strong>Sass篇</strong><br><a href="https://link.segmentfault.com/?enc=8aL4f4fsgBE%2BwK7HZPaPjw%3D%3D.rYN4RplMzIIFd%2FEKjEAAPkQDq1yArb49eoF8VYcUlVGZWwamvrMD7DuktBlK8sYhAZNF%2B41leJhScb7ssSq8Ig%3D%3D" rel="nofollow">Sass中文教程</a></p>
<hr>
<p><strong>Jade篇</strong><br><a href="https://link.segmentfault.com/?enc=jldiQQfdXexvQlVQCIFbxA%3D%3D.hLO3ikrzPBACGLb1kQSi8qns9Jp6wqaFLYJHUuRd5EF28v250QRhqfi8Gl1m%2F%2B60" rel="nofollow">Jade中文教程</a></p>
<hr>
<blockquote><p>原文出处:<a href="http:www.jeffjade.com">http:www.jeffjade.com</a><br>原文链接:<a href="https://link.segmentfault.com/?enc=bgH8Qqi4hxbLX2h5SNYjnw%3D%3D.iT87i6FRQNi9NkTwDk9k%2BtlCbSJDyDxRDzbEvHokRZEFR3pZJrea%2FUiI14kb%2FgdPgFzT23lTRAzDIoqvwFoaukZGWUrh4pxZfn2GZ7hVjdk%3D" rel="nofollow">http://www.jeffjade.com/2016/05/08/106-vue-es6-jade-scss-webpack-gulp/</a></p></blockquote>
<hr>
<p><strong>猜你喜欢(/对你有用)的文章</strong></p>
<ul>
<li><p><a href="https://link.segmentfault.com/?enc=RZDmFHXeizmMe0h%2Br0R%2BRA%3D%3D.2Sm7SUG%2FNrouDj%2BK1mK53y8yoRi0UKpiGt%2BZSAIY0cYwXQzV%2FIk6ua7FrzOBYO8wB8e3fvqCG9e85kgJm78S6NoBHJSVXqVvqk9%2FeV7YT4Y%3D" rel="nofollow">如何优雅地使用Sublime Text</a></p></li>
<li><p><a href="https://link.segmentfault.com/?enc=pRU97Ht3HWZl%2F9dJenX5Cg%3D%3D.nemDyH4aO4dqpXsCm3ssGl90C6fzn61tZ3mpGjdVob%2FGKX3bpEnc5hwbDS4DIbMuTGOjlYUQan703SlGuIafU%2FPtyn%2Bzyttncou2kGqF6uo%3D" rel="nofollow">Win下必备神器之Cmder</a></p></li>
<li><p><a href="https://link.segmentfault.com/?enc=KBqhp0TyzcVtl9L66B965Q%3D%3D.767TxyD9e3Fm3fmi%2Bsm6OnfEHM7NhFLOwYCKoGTS4SYTLg9HJZ80WHh1f6ysBrvsH3wsTl4MGlnqxvg2XH2eGA%3D%3D" rel="nofollow">新编码神器Atom使用纪要</a></p></li>
</ul>
那些所倚靠的利器记载
https://segmentfault.com/a/1190000004628751
2016-03-17T19:50:05+08:00
2016-03-17T19:50:05+08:00
jeffjade
https://segmentfault.com/u/jeffjade
3
<p>工作近三年,使用PC快六年,拥抱Mac整一年,投<code>具器</code>石榴裙三年。14年第一次被同事推荐<code>Everything</code>,开启了JeffJade对工具的折腾之旅,并乐此不疲。时去两年,这必然是消耗了一些时间,但对效率的提升,心情之保养,以及思维持续扩散,无疑是起了不可磨灭的功绩。是时候对这期间的热忱和折腾,做一个总结了。</p>
<p><img src="/img/bVtAk2" alt="那些所倚靠的利器记载" title="那些所倚靠的利器记载"></p>
<h2><strong>Win&Mac方面</strong></h2>
<ul>
<li><p><strong>SublimeText3</strong>: 编码垒字的神器,还能览图/文件对比/...,偏爱ing;有将其总结在: <a href="https://link.segmentfault.com/?enc=p2REo6KwqSqjDgRJo2uG%2BQ%3D%3D.T8fphtEuR4NCshHFz%2BIqHEQneDp6%2FxgK7FV%2F0uxZoF60zgLDyNLXyS6LaBYRY9ntYYNVBgYIKi4dM67vZyY%2BsBA4gTpC4j1Im1mgdPjd1lI%3D" rel="nofollow"><strong>如何优雅地使用Sublime Text</strong></a> 一文中。</p></li>
<li><p><a href="https://link.segmentfault.com/?enc=KprxpvGKlt66J61Ajqo9FQ%3D%3D.GLkHZy6NCuD9klocZn5TRqe8tnk1jHjsSt%2B6tKdEbfY%3D" rel="nofollow"><strong>Atom</strong></a>: 新一代编码写文神器;虽还在发展,却已惊艳;堪称用过最舒爽写 <strong>Markdown</strong> 利器(除了会卡)。对于Atom有仿撰一文:<a href="https://link.segmentfault.com/?enc=F95dtNJThegCBv0kc3ddLA%3D%3D.fxiUGWZzCFQXLY8BSrbv0ZyIDCsk1KPTbv5UjFhBGVovaeYpbX8savQE6w5evkG9Pm88bzfseHqKmzmafKV2aw%3D%3D" rel="nofollow">新编码神器Atom使用纪要</a>,予以总结。类Web App,缺点是会卡顿,坐等完善。</p></li>
<li><p><strong>Chrome</strong>: Web世界里的神,里的神,的神,神。偏爱ing;无数强大插件,令其如虎添翼;<strong>Vimium</strong>插件,效率必备!早前有在<a href="https://link.segmentfault.com/?enc=wVTpi3Z5L%2FgsbJ9XaNmxFw%3D%3D.8K0n62owS9qGJU%2BsHB1kXcACsmtSLlHukSYwEhLjsf7E6kHUk6QY54nO%2BU6SVAK1AB1tt9FqgPqBsfAoS9o3fg%3D%3D" rel="nofollow">Vimium~让您的Chrome起飞</a>一篇中记载。</p></li>
<li><p><strong>Evernote</strong>: 纪录/收藏你想保存的文|图|网页;Chrome有其插件,手机可掉其保存;很强大。</p></li>
<li><p><strong>为知笔记</strong>: 功能同<strong>Evernote</strong>一般丰满,身材更骨感?;在<strong>Evernote</strong> 日益过于丰盈之后,久转投于此,直到现在。</p></li>
<li><p><strong>网易云音乐</strong>: 初遇<code>QQ音乐</code>,处过<code>天天动听</code>,恋过<code>酷狗</code>,上过<code>酷我</code>,一夜情过<code>千千静听</code>,移情过<code>虾米</code>,和<code>豆瓣FM</code>好过,同<code>百度随心听</code>约过,最后,发现音乐的世界,还得是你~<strong>网易云音乐</strong>。也许还有更好的,可是遇见她,已经满足了。</p></li>
<li><p><a href="https://link.segmentfault.com/?enc=fikcyegNKaZaMW4NGOMp1Q%3D%3D.Y6yu93Sn9XTJLheIA8O%2BCLETunsroXiR2mWHU7RoaYU%3D" rel="nofollow">作业部落客户端</a> :开启卓越写作之旅,支持全平台+离线使用,一键发布文稿,社交化批注。身材苗条,面容姣好,免费Markdown书写平台的魅力战斗机;现在转移到<strong>Atom</strong>了。</p></li>
<li><p><a href="https://link.segmentfault.com/?enc=kjVEWydV2its3JwSvD7hDA%3D%3D.%2FVEKjurepavMqTCvXnk3LyZG7%2Bisb6KQEbwv0wFlmlE%3D" rel="nofollow"><strong>Nodejs</strong></a>: 可以辅助让Sublime编译Js;可以做<strong>Web开发</strong>,<strong>REST开发</strong><strong>,</strong>Web聊天室/爬虫<strong>,</strong>Web博客<strong>(Hexo),</strong>Web论坛**等等,可参见<a href="https://link.segmentfault.com/?enc=9pXLNQIelspIpSoavoy7Mg%3D%3D.fch7YnUp%2Fg5DFCGyMelaDUXv4OAsf96LcpSFfuclCqw3pb9wVpcaVsWabUKk%2FJ%2Bw" rel="nofollow">分享十五个NodeJS应用场景</a>;还可以利用Nodejs的包管理器<code>Npm</code> 安装<code>Gulp</code> <code>Webpack</code>等屌炸天工具~做大多你可以想到的东东;Web端必备。</p></li>
</ul>
<h2><strong>Mac方面</strong></h2>
<p>坦白来讲,Mac对于不撸游戏的玩家,要比Windows出众太多;当然了也要贵太多。在此二者的比较上,只能说“一份价钱一分货”的理论,彰显的可谓淋漓尽致。不仅系统如此,软件亦如是:</p>
<ul>
<li><p><strong>Alfred</strong> : 这款神器,还用多讲么?仅其免费部分,已然拉远Windows下数款软件组合。</p></li>
<li><p><strong>Homebrew</strong> : 虽然Mac下没有自带类似Linus下apt-get这样的功能,但是Mac有Homebrew(brew),记载有<a href="https://link.segmentfault.com/?enc=mrHcq%2BKuCcEL2eRlY21L3g%3D%3D.AiJY7lE5JeBA4YZTH8UXNMQ%2FpRKONkyqo1S%2BKZ0WC4YFEJOqyrKY7ZS6srO9WFeefYkJV3PNLe3qd%2FVuJpY0lpVFW8sAxDD%2FFcSDWOcoS94%3D" rel="nofollow">Mac必备软件渐集之Brew</a>。</p></li>
<li><p><strong>oh my zsh</strong> :Mac下的原生Bash,其实还挺好用的。但是,谁让知道了有她的存在了呢?分分钟移情别恋了。这段移情史有在<a href="https://link.segmentfault.com/?enc=u9Ck4MHOLm0phxxbE2GiBA%3D%3D.Zxu1sMMrvPcT2ue4iHjGEJkhmOU9thxfa8mjvd0bb4myYasG6cX95QDX5z%2F610rjyInconzLJREE6%2FdtiUJpSMVIFAAPREkQWf1B4J7L4eg%3D" rel="nofollow">Mac必备软件渐集之ZSH-终极Shell</a>记载。</p></li>
<li><p><strong>iTerm</strong> : Mac这款终端,倘若要阐明,同上如出一撤。唯一出入是:没有为她拙文残撰以记载之。</p></li>
<li><p><strong>CheatSheet</strong> : 优雅操作,就得搞起快捷键。Mac下热键,辣么多,得(Dei)亏这<strong><strong>CheatSheet</strong></strong>了。</p></li>
<li><p><strong>Kindle</strong> : Mac下读书软件,没怎么折腾,就用了这<strong>Kindle</strong>,体验良好,且同手机,以及<strong>Kindle</strong>设备完好同步,没道理不用她。</p></li>
<li><p><strong>TeamViewer</strong> :一款用着挺便捷的远程软件;觉得好,没有同类个工具对比过,也就不好说她究竟有多好。</p></li>
</ul>
<h2><strong>Windows方面</strong></h2>
<p>曾一度觉得:“真爱生命,当远离Windows(For Coder)”。在不得不使用Windows搞事儿期间,几番折腾过后,这略有的偏见倒改善不少;这多半要归功于以下利器:</p>
<ul>
<li><p><strong>AutoHotKey</strong>: 如果你愿意折腾,她真是一件神器;即便无意花费精力,网上随意搜索些脚本拿来用,至少也是Windows下一柄利器。具体有在 <strong><a href="https://link.segmentfault.com/?enc=OSALsW7T8Wjq%2BkRh0crhmQ%3D%3D.cmhlVcnYSdTlrybb5jqsvGmSEaquqOkFRMGjMIcmDvL1pxAZjmZqdNKYNmjkVFohrg4TF7o2dmNGIwdvTeDJ3g%3D%3D" rel="nofollow">Win下最爱效率神器:AutoHotKey</a></strong> 阐述。</p></li>
<li><p><strong>Listary</strong>: 本地搜索<strong>神器</strong>,当然还有别的作用,More&More;接触她后,直接导致我抛弃了<strong><strong>Everything</strong></strong> (申明:我真不是一个见异思迁的男人)。</p></li>
<li><p><strong>Launchy</strong> : 快速启动安装的应用程序,老而弥坚,有丝Mac下Spotlight之风。据悉类似还有<strong><strong>Rolan</strong></strong> 和 <strong><strong>Wox</strong></strong>等。</p></li>
<li><p><strong>Picasa3</strong>: 图片查看器中的佼佼者,偏爱ing。姑姑出品,必属精品!</p></li>
<li><p><strong>Clover</strong>: 在Win下必备,谁让Win资源管理器太...QT,TotalCommand太重(⊙o⊙)…</p></li>
<li><p><strong>Everything</strong>: 本来必备神器,无奈我移情别恋了--Listary。不过是不会忘了你。</p></li>
<li><p><strong>Foxmail</strong>: 对比体验不多,不做评判,反正Win下就用此款(没给惹什么事儿),不用其自带的。</p></li>
<li><p><strong>Beyond Compare</strong> : 文件/夹比较利器; 此款为所接触同类中最佳。</p></li>
<li><p><a href="https://link.segmentfault.com/?enc=uGrx1y3moFaQ5gghQugTVw%3D%3D.XNfXlPjCkzkEGBKL0LoP2QNlS%2FK%2B5BdWCuNQ0A1mzG59gzsIQe4lsekHo1vXCR5i" rel="nofollow">Cmder</a> : windows下cmd的替换工具,支持PowerShell;同比还有PowerShell,<a href="https://link.segmentfault.com/?enc=43opzZDhZH5lQi%2FuvnYSTA%3D%3D.0KAjeB4HbCe2xdQUYLyEZFpGhpJSXBgzLd0%2BO%2F%2BiR3xOiwSnun4GPi111Co4t0sA" rel="nofollow">ConEmu</a> 等。对于<strong><strong>Cmder</strong></strong>有在:<a href="https://link.segmentfault.com/?enc=61kBFbNWe7HhaJobbTYZlg%3D%3D.SE7uggsRZF2Np%2FmNZ%2BCRzG%2F7RTSdHxrpg%2B5LACwF%2BEOKoEa%2FDwoWYtxx0zkRjhN6TJpAyoG5e%2F%2B1Igp%2FYQPBaqiDhMSDhYd4rPpasYK2BDk%3D" rel="nofollow">Win下必备神器之Cmder</a> 一文中予以总结。</p></li>
<li><p><a href="https://link.segmentfault.com/?enc=QvihJ37MCUiDcjgcoENsdg%3D%3D.2SFGnp0AsghzzN2%2BS9LK2V7BAWazF0VCmnykNYDFSl5hkB%2Bix4ENxxzhloOaEVTT" rel="nofollow"><strong>Git for Windows</strong></a> : 打包好了,直接使用;Git 一族必备。</p></li>
<li><p><a href="https://link.segmentfault.com/?enc=stPZzztzOciXTFQ0uUivig%3D%3D.F0pvdJLV%2FDgrSwf602AQUMA%2FP4c0etVPWjkOL5ImhIo%3D" rel="nofollow"><strong>GoodSync</strong></a>: 文件同步好帮手。可以同步 <code>本地文件</code> <code>P2P</code> <code>云</code>(Dropbox,Google,OnDrive,FTP/SFTP等等),还可以同步<strong>应用程序</strong> 以及各设备;强大且不失简洁。比如:<strong>SFTP</strong>同步,用过SublimeText的SFTP(最方便,却老弹框),WinSCP(F5即可同步,设计却不人性化),Gulp的SFTP(只是需要率先Watch),Xftp4(老牌了,都是手动点来点去,额)。</p></li>
<li><p><a href="https://link.segmentfault.com/?enc=OfIadFhRewT%2BrvYssYsSog%3D%3D.ZaylbdIRDAk7NmVivksjP%2BIOQE5mpQbUHJ0O9kCBol0%3D" rel="nofollow"><strong>Total Commander</strong></a>: 资源管理器集大成者,只是快捷键太繁琐,用她需要花费些时间了解她先;个人还是用 <code>Clover</code>(虽然她很容易发脾气,简单就好)。</p></li>
<li><p><a href="https://link.segmentfault.com/?enc=YkX1dF0Z6f%2BhkuJVIq9NVA%3D%3D.TKVGghOdCJ8AZoRwkZbVAXawvpeZTFxBT1aEyZMZLGU%3D" rel="nofollow"><strong>ShareX</strong></a>: 截图、注释、上传,复制 URL 一条龙服务;免费,强大而简洁;自动存储;支持双屏;支持录制;还有给力有用的工具集...大有相见恨晚之感 (☆_☆)(唯一没中不足是:安装时需率先安装Steam桌面应用,不过无妨)。</p></li>
</ul>
<h2><strong>手机方面</strong></h2>
<p>除却微信,秋秋,<strong>为知</strong>,知乎 常用的有以下几款软件倒可以一叙:</p>
<ul>
<li><p><strong>Chrome</strong> : 手机浏览器,最后还是拥抱<strong><strong>Chrome</strong></strong>了,还是你干净可人。谁让那UC,360等不是弹窗,就是自作聪明乱推荐嘞?</p></li>
<li><p><strong>简书</strong> :集读写于一体的阅读社区,现在已大名在外;主用来在零碎时间读写文章,增长些见闻(额,现在鸡汤尤多);自建一专题 <a href="https://link.segmentfault.com/?enc=gVzi7TQXEEpPU%2F98G8WjWg%3D%3D.D7UtBrpkNZmIDmT6THRMhC9%2BmsJNcuYP%2ByksfZRfLnREdC5TBrnU4lF5om7Sy4W3" rel="nofollow">折腾之美</a>,以做汇集折腾见识之用(^_^,这是赤裸裸的广告)。</p></li>
<li><p><strong>Kindle</strong> : 手机上阅读软件蛮多,但Kindle有依托于挺有格调的亚马逊,很自然各个设备都有她软件的存在了。</p></li>
<li><p><strong>开眼视频</strong> : 这款视频软件真心不错;多在5左右分钟,涉及剧情/音乐/创意/动画/旅行等等;多为精品,堪称佳作,类似的还有:<strong>魔力盒</strong>。</p></li>
<li><p><strong>锤子便签</strong> :这里真没有广告的意思,坦言,锤子便签为所用便签体验之最,没有之一。</p></li>
<li><p><strong>SegmentFault</strong> :专注于程序员开发者的社区平台,提供开发相关的高质量问答,专栏,笔记,文章等服务。零碎时间看下问答or文章;偶尔也会作答or求教。</p></li>
<li><p><strong>VST全聚合</strong> : 这款为Tv量身定做的视频软件,可了不得了(手机端也可用),高清,海量,快速,更新迅速;那些没在电影刷的电影,基本都在这里给享受了,这在<a href="https://link.segmentfault.com/?enc=%2F43JMERlilRUAQ4TkvM8Ug%3D%3D.iTcy%2BMQu8cwGJFuHXmk5V68WdFnOtcxwt5k52CC8o4KyTJh8bhFZwg4sDzjm5XWw5BDd0YSTFwNmvnqcaKWBmw%3D%3D" rel="nofollow">所欢喜过的那些电影(2015下)</a>有过见证。</p></li>
<li><p><strong>奇妙清单</strong> :在这里为自己计划做下ToDoList,类同网页上的番茄土豆,轻量清新,偶尔会用下。</p></li>
</ul>
<h2><strong>外设方面</strong></h2>
<p><strong>Mac</strong> (主要负责优雅和爽了) ;<strong>Kindle</strong>(偶尔读读书) ;<strong>机械键盘</strong> (如果编码垒字较多的话,最好备着);<strong>ipod Shuffle</strong>( 跑步听歌利器)等等。</p>
<p><strong>以下为工位高清无码图</strong><br><img src="/img/bVtAkb" alt="www.jeffjade.com|工作桌" title="www.jeffjade.com|工作桌"></p>
<blockquote><p>文章来源:<a href="https://link.segmentfault.com/?enc=jdRShWY74AHGyUTkk6e8Qw%3D%3D.CfIMP65NmWhh3PvJek4NwThxle04rsKXMTWpCLJXqTQ%3D" rel="nofollow">http://www.jeffjade.com</a><br>原文链接:<a href="https://link.segmentfault.com/?enc=9sifwzWvLvkL06FTtLsmSQ%3D%3D.M6T13e4gWH%2FcFsJzziTX%2FIPeS3Aze1PRMd6bI4tbNu1bEqteB8zA2aH0iSDP1KtC%2Bx6NeWUxt99HTWSpV1yYNQ%3D%3D" rel="nofollow">http://www.jeffjade.com/2016/03/17/2016-03-17-jade-tools/#</a></p></blockquote>
<p>本文参与了 SegmentFault「<a href="https://segmentfault.com/a/1190000004537274">我是工具控</a>」分享,如果你也手持利器,那就一起来分享吧。</p>
Win下最爱效率利器:AutoHotKey
https://segmentfault.com/a/1190000004611125
2016-03-15T17:32:58+08:00
2016-03-15T17:32:58+08:00
jeffjade
https://segmentfault.com/u/jeffjade
4
<p><a href="https://link.segmentfault.com/?enc=frKuc%2BoyWBUe85Xydz1wNQ%3D%3D.%2FMvTzqBNZA39vr%2F7jv28hBK%2Bc5DdRLI%2FEgn7ku6nzIs%3D" rel="nofollow">AutoHotkey</a> 是一个windows下的开源、免费、自动化软件工具。它由最初旨在提供键盘快捷键的脚本语言驱动(称为:<strong>热键</strong>),随着时间的推移演变成一个完整的脚本语言。但你不需要把它想得太深,你只需要知道它可以简化你的重复性工作,一键自动化启动或运行程序等等;以此提高我们的<strong>工作效率</strong>,改善<strong>生活品质</strong>;通过按键映射,鼠标模拟,定义宏等。</p>
<p>如觉此处排版不尽如你意,可移步<a href="https://link.segmentfault.com/?enc=Kl1c%2FLjxSlw1TRVH8twO5g%3D%3D.GMGF%2B48HsiGewkXJaDSzI7UoOefzX0Rq27QI2YRPMd77ee%2BGtkDdobK2vu3iAZfcCfJYiEWc0tgwPKUtS45T%2Fw%3D%3D" rel="nofollow"><strong>Win下最爱效率神器:AutoHotKey</strong></a>查看,(^^)。</p>
<hr>
<p><strong>『有则推荐』</strong>: 自 2017 年初,就有开始利用闲余时光,打磨个人最新作品——<a href="https://link.segmentfault.com/?enc=J8aJefEYcVGtLnoRue1fAg%3D%3D.FBPrHhoih7rNI8qOwsqQ5GPXvRmPGNCOnbmC7djghT4DOUPhilpWNfKlbEWuYwfE" rel="nofollow">「倾城之链」 </a>,有意将其打造成优良开放型平台,旨在云集全球优秀网站,让您更为便捷地探索互联网中那更广阔的世界;在这里,您可以轻松发现、学习、分享更多有用或有趣的事物。目前仍在不断迭代、优化中,如果您对此感兴趣,不妨先尝试一下: <a href="https://link.segmentfault.com/?enc=sRxncPgCCtHVApRJe%2BUNQQ%3D%3D.Td1VuS8Ixis%2FjjNMuF7jqskeYAvv8pmLLoibBCh%2BQzaSwh6Wb5hdUcE1e1mPvJ5l" rel="nofollow">「倾城之链」 </a>;亦十分欢迎提出您宝贵意见或建议。 (Upade@2018-01-23 于深圳.南山)。</p>
<hr>
<p><img src="/img/remote/1460000004847822?w=1280&h=853" alt="图片来自:zoommyapp.com" title="图片来自:zoommyapp.com"></p>
<p>如要问__AutoHotKey__是什么?这是一个仁者见仁,智者见智的问题。你可以将其看作是一个热键增添器,也可以当成改键器/屏幕录制器,或者是游戏热键外挂等等。你可以在<a href="https://link.segmentfault.com/?enc=L8JKeQk8ghSfaTiXbAqU3g%3D%3D.An%2BW7lmYTy1YouUvrkHJXqyUp%2Bb4Zz%2BXVAcklf3wWkdt5oKk6peK7ddiRK5aZnf1Fqh%2BW2k%2BnVWnJsK7COL54Q%3D%3D" rel="nofollow">AutoHotkey 擅长什么?</a>得到一个方向;笔者这里只是介绍一些粗浅却很实用的用法,与诸君分享。</p>
<h2>下载安装AutoHotkey</h2>
<p>在浏览器中输入网址 <a href="https://link.segmentfault.com/?enc=V3s32vKoy9cwV%2FJWkiDRlQ%3D%3D.h%2F3RRVzPdrThor5m0%2BMhnmsNXEqCVNl%2BRxHNnp6FivU%3D" rel="nofollow">http://www.autohotkey.com/</a> 进入AutoHotkey的官网,点击“download”下载即可将AutoHotkey保存到本地磁盘。接着双击点击安装就可以了。</p>
<h2><strong>建立AutoHotkey脚本</strong></h2>
<p>安装完成后默认会在系统盘的“本地文档”下创建一个"AutoHotkey.ahk"脚本,双击以后我们会看到任务栏右下角有个图标,就表示它在运行了[如下图标注处所示]。我们在里面写入相应的映射代码然后右击选择"<strong>reload this script</strong>"执行它就可以开始使用AutoHotkey里面设置好的功能了。<br><img src="/img/remote/1460000004847823" alt="AutoHotKey" title="AutoHotKey"></p>
<p>如果我们想在其他地方放置脚本怎么办呢?很简单,只要新建一个文本文档,将其后缀名改为.ahk然后执行它就行了。所以,在同一台电脑中,你甚至可以存放多个脚本。当用不到该脚本了只需要,鼠标移到该图标处,右键选择<strong>exit</strong>即可,很是方便。</p>
<p>为了方便修改该脚本,你可以将其放置于你觉得方便的位置,丝毫不影响,双击可运行之。我们还可以为该脚本设置开机自启动,只需要将该脚本生成一个“快捷方式”,然后将此快捷方式放置到程序自启动文件夹之下即可,一般都在这儿:</p>
<blockquote>C:ProgramDataMicrosoftWindowsStart MenuProgramsStartUp</blockquote>
<p>如此一开机,就可以使用脚本中所配置的功能,大为便捷。</p>
<h2>简单实用的实例</h2>
<p>这里简单说明下脚本中常用符号代表的含义:</p>
<blockquote>
<strong>#</strong> 号代表 <strong><em>Win</em></strong> 键;<br><strong>!</strong> 号代表 <strong><em>Alt</em></strong> 键;<br><strong>^</strong> 号代表 <strong><em>Ctrl</em></strong> 键;<br><strong>+</strong> 号代表 <strong><em>shift</em></strong> 键;<br><strong>::</strong> 号(两个英文冒号)起分隔作用;<br><strong>run</strong>,非常常用 的 AHK 命令之一;<br><strong>;</strong> 号代表 注释后面一行内容;</blockquote>
<p><strong>run</strong>它的后面是要运行的程序完整路径(比如我的<strong>Sublime</strong>的完整路径是:D:Program Files (x86)Sublime Text 3sublime_text.exe)或网址。为什么第一行代码只是写着“notepad”,没有写上完整路径?因为“notepad”是“运行”对话框中的命令之一。</p>
<p>如果你想按下“Ctrl + Alt + Shift + Win + Q”(这个快捷键真拉风啊。( ̄▽ ̄))来启动 QQ 的话,可以这样写:</p>
<blockquote>^!+#q::run QQ所在完整路径地址。</blockquote>
<p><strong>AutoHotKey</strong>的强大,有类似Mac下的<strong>Alfred2</strong>之风,可以自我定制(当然啦,后者还是强大太多)。所以可以说,她强大与否,在于使用者的你爱或者不爱<code>折腾</code>。学以致用,如果简单的折腾下,可以使得我们工作效率大幅提升,何乐不为?况且,在见识的增长中,这可以给我们思维带来极大的营养。以下是笔者常用功能的脚本配置:</p>
<h3>极速打开网页</h3>
<pre><code>;Notes: #==win !==Alt 2015-05-20 ^==Ctr +==shift
;=========================================================================
#j::Run www.jeffjade.com
#b::Run https://www.baidu.com/
#c::Run https://www.google.com/
#y::Run http://www.cnblogs.com/jadeboy/
#0::Run https://tinypng.com/
#v::Run https://www.v2ex.com/
;-------------------------------------------------------------------------</code></pre>
<p>这是特常用的功能;如上脚本,<strong>Win+J</strong>即可打开自己个人博客,<strong>Win+0</strong>则打开熊猫网址去压缩图片... ...。不管pc焦点何在,使用自己配置的快捷键,即可达到所想,方便而快捷,大慰我心。网上冲浪,自然选取了Chrome,配之以<strong>Vimium</strong>插件<a href="https://link.segmentfault.com/?enc=KnQGA7v%2Fdw8Zk9AOnp4TCQ%3D%3D.vnvKt85BQOvGO3RoC%2Bn%2BQpoe481%2FAWY4dgw5PcjJlXkf3RDGecvJrZAmGq4Zo0%2BolydWnYaOUKeU0xxxUuYA7Q%3D%3D" rel="nofollow">Vimium~让您的Chrome起飞</a>,分分钟甩掉鼠标;生命聊聊不过百年,如此短暂,在鼠标经常性滑过去来做一些可以更高便捷的事儿,所不必要消耗的一秒半秒,我没那么慷慨(即使我会花费更多时间去发发呆)。</p>
<blockquote>__温馨提示__: 以下几个系统默认的 Win 快捷键:<br>Win + E:打开资源管理器; <br>Win + D:显示桌面; <br>Win + F:打开查找对话框; <br>Win + R:打开运行对话框; <br>Win + L:锁定电脑; <br>Win + PauseBreak:打开系统属性对话框;<br>Win + Q: 本地文件/网页等搜索;<br>Win + U: 打开控制面板-轻松使用设置中心;</blockquote>
<h3>便捷呼出程序</h3>
<pre><code>!n::run notepad
!c::run, D:\SoftwareKit\_jade_new_soft\cmd_markdown_win64\Cmd Markdown.exe
!r:: run, D:\SoftwareKit\_jade_new_soft\cmder_mini\Cmder.exe
!q::run, D:\Program Files (x86)\Tencent\QQIntl\QQUninst.exe
!space::run, D:\Program Files (x86)\Sublime Text 3\sublime_text.exe
;==========================================================================</code></pre>
<p>以上为<strong>Alt</strong>外加一些键来打开本地应用程序。即便完全可以自己配置<strong>热键</strong>,但是一旦多了,不常用的话记起来也略显麻烦。所以选择<strong>Alt</strong>键组合来打开本地应用程序。<strong>Win</strong>键来呼出网页。在有了<strong>Launchy</strong>这类软件之后,也就不怎么过为本地程序配置快捷键了。</p>
<p>之前一段时间认为,珍爱生命,就当远离Windows。在给其配了SSD硬盘,在不断折腾应用一些软件,在不断了解&熟悉Windows之后,这一想法倒也缓和了不少。Windows下的<strong>AutoHotKey</strong> + <strong>Listary</strong> + <strong>Launchy</strong> 组合,倒也有了点Mac下 <code>Alfred2</code>免费功能部分。这一点在<a href="https://link.segmentfault.com/?enc=wPiCiyormcZFi7lZ5xBqCg%3D%3D.KxfwCHtMyYSAwNM1aDs7nyMJ4%2FbuRqTWhTtiuHN2ZWLGD7K%2BYv3gS%2FgOK3IK1Tr7hQda01CxfFEJUJj6q2A8qXWldA79wunC%2BY7M0iAerfE%3D" rel="nofollow">Windows下效率必备软件</a>中有过记载。</p>
<h3>一键拷贝文件路径</h3>
<pre><code>^+c::
; null=
send ^c
sleep,200
clipboard=%clipboard% ;%null%
tooltip,%clipboard%
sleep,500
tooltip,
return</code></pre>
<p>只需要<strong>Ctrl+shift+c</strong>即可拷贝文件路径;方便快捷,爽!。</p>
<h3>改掉大写键为Enter</h3>
<pre><code>;replace CapsLock to LeftEnter; CapsLock = Alt CapsLock
$CapsLock::Enter
LAlt & Capslock::SetCapsLockState, % GetKeyState("CapsLock", "T") ? "Off" : "On"
!u::Send ^c !{tab} ^v</code></pre>
<p>看网上朋友说<strong>CapsLock</strong>(大写切换按键)没怎么大用处;想来也是,个人每次需要输入大写字符,也是配合Shift来实现。那么此按键意义何在?那就改成<strong>Enter</strong>键好了。有时候右手需要操纵鼠标时候,左手小拇指按此键来实现换行,蛮好;既然大写切换不怎么常用,那么用<strong>Alt+CapsLock</strong>来组合实现也无不妥;以上脚本即为此意。</p>
<h3>缩写快速打出常用语</h3>
<pre><code>::/mail::gmail@gmail.com
::/jeff::http://www.jeffjade.com/
::/con::console.log();
::/js::javascript:;
::/fk::轩先生这会子肯定在忙,请骚后。thx。祝君:天天开心,日日欣悦。</code></pre>
<p><strong>AutoHotKey</strong>一个很强大之处,在任何能正常显示 <strong>unicode</strong>字符的程序中(比如浏览器的地址栏、MS Word Rtx);如以上代码,键入<code>/jeff</code> 后,再加<strong>空格</strong>、或 <strong>tab</strong>、或<strong>回车</strong>,就可以触发缩写;根据输入不同方式(空格,tab,回车)输出的内容后也相应附加了[空格/tab/回车,用起来很是舒爽]; 当然了这里<code>/jeff</code>也可以配置其他如<code>:jeff</code>,按照个人喜好了。</p>
<h3>颜色神偷</h3>
<pre><code>^#c::
MouseGetPos, mouseX, mouseY
; 获得鼠标所在坐标,把鼠标的 X 坐标赋值给变量 mouseX ,同理 mouseY
PixelGetColor, color, %mouseX%, %mouseY%, RGB
; 调用 PixelGetColor 函数,获得鼠标所在坐标的 RGB 值,并赋值给 color
StringRight color,color,6
; 截取 color(第二个 color)右边的6个字符,因为获得的值是这样的:#RRGGBB,一般我们只需要 RRGGBB 部分。把截取到的值再赋给 color(第一个 color)。
clipboard = %color%
; 把 color 的值发送到剪贴板
return</code></pre>
<p>这个功能,搞Web端还是可以备着的。很好用,按下配置好快捷键,即可取得鼠标所在光标处颜色色值到剪切版中-爽啊。(个人用<code>Win+C</code>呼出了 __Chrome__,<code>Alt+C</code>调出作业部落客户端__Cmd Markdown__,所以这里就用了<code>Ctrl+Win+c</code>来取色,也还算方便)</p>
<h3>神速激活/打开/隐藏程序</h3>
<pre><code>#c::
IfWinNotExist ahk_class Chrome_WidgetWin_1
{
Run "C:\Users\Administrator\AppData\Local\Google\Chrome\Application\chrome.exe"
WinActivate
}
Else IfWinNotActive ahk_class Chrome_WidgetWin_1
{
WinActivate
}
Else
{
WinMinimize
}
Return</code></pre>
<p>以上这段脚本可以做到,Chrome的各种状态切换:<strong>Win+C</strong>,Chrome没打开状态时候 --> 打开;打开没激活状态时候 --> 激活;打开处在激活状态时候 ---> 隐藏。恩,我用着挺爽的,你也试试?</p>
<h2>折腾AutoHotKey总结</h2>
<p><strong>折腾</strong>是奔着实用才去做的,所以笔者也只是看下可以常用功能而已。其实<strong>AutoHotKey</strong>远不止如此;<a href="https://link.segmentfault.com/?enc=dIE1YnqDnzXQR11DrNj4Vg%3D%3D.iaSLAvoqGbzL22IQqAL%2F%2BKr%2BIc23zQKEV40uchfWw8z8wniG6R5A4GqYO36fEN%2FOBq%2Fw8vcIYHT13CVuj8OS%2FA%3D%3D" rel="nofollow">AutoHotkey 学习指南</a>这里可见一斑。网络上也可以搜出<strong>AutoHotKey 懒人包</strong>,里面有二十余脚本,如:<em>“计时器”</em>,<em>“禁止Win键”</em>,<em>“秒杀窗口,左键加右键”</em>云云;需要的话下载即可使用;知乎有一专栏<a href="https://link.segmentfault.com/?enc=WDNphvi1IX46lpHPFsQa6A%3D%3D.cHiGrut4%2Bkkl3S0XAXVN5ciir%2BhU8C7nkhA2H3seOd2smWQfur4huEv5oWiG0Pw%2F" rel="nofollow">AutoHotkey 之美</a>,粗略扫了下,算是一可以扩充见识之门;<a href="https://link.segmentfault.com/?enc=W7uh31Kva70EOVeVfsmKtw%3D%3D.BB1WGQT3HHces%2F57El8Fn0shshitC3hSofG%2Fyr7%2BwxeKCZkM%2Fc86NZwLvV4Ovg46IoZmvfP9Wr57rh%2FFDQ0FA8wIUTjsq8%2BwBJqWHlyiNVk%3D" rel="nofollow">AutoHotKey实用脚本分享</a>一文介绍了一些常用脚本实例,有兴趣更多了解<strong>AutoHotKey</strong>的朋友们,可参看下。</p>
<p><strong>AutoHotKey</strong>定有很多好用的功能,此文仅作简单介绍,抛砖以引美玉。希望知道更多有用玩法的朋友可以慷慨分享,让我等Coder效率可以提一提,节省那么些时间:去学习,去把妹(/泡哥),去享受生活。如果可以,也殷切希望,以此篇介绍给不怎么爱折腾的朋友带来一点参考。王小波在《思维的乐趣》中引用罗素一言:<strong>「须知参差多态,乃是幸福的本源」</strong>;如果您不喜欢折腾,这里并无勉强之意;生活之事,快乐就好。</p>
<p>最后自荐简书一专题<a href="https://link.segmentfault.com/?enc=5bH36TXLHkX%2BZjbxM2z91g%3D%3D.ws%2FRrB%2BA9Id6NzD8MpzMzxYzhP5UD3NndYYT205iG%2FOuZKQPybr8pFGu%2FgH8yPp7" rel="nofollow">《折腾之美》</a>:工欲善其事,必先利其器。大道至简:<strong>因为折腾,所以简洁</strong>;为爱折腾的你而生,欢请你的入盟(专题起源可参见<a href="https://link.segmentfault.com/?enc=gO9MHabFgSMoNBNxe5cs2g%3D%3D.wFZye1e7aIqObftUv%2BfKjKMJKPzKvVQCNzkHZ9fW9JKX%2F3w3HFl2j3ZBaJxvwSDqj3YjTLgGVKrWvN9Y5aZS%2BVPT7Gy3JBNb3yQjuA0oWWk%3D" rel="nofollow">折腾之美-序</a>)。</p>
<p>-----2016-03-11晚---于深圳------</p>
<blockquote>文章来源:<a href="https://link.segmentfault.com/?enc=%2BYGtwgkbwmmkmqsQO5jeOQ%3D%3D.NRkDq%2FqyqUzQG1mdDqb0a3QKGiwsKUYYMYdjPMDLcKQ%3D" rel="nofollow">http://www.jeffjade.com</a><br>原文链接:<a href="https://link.segmentfault.com/?enc=0JYSSx1xcL0DRtYd9UWj4g%3D%3D.2Qz5kGgbsN%2BRSDwOJKNRUb0g5D2mH96qtTCYnvXafd8ULx3jEYKGFaUH4JskDiheHHCcBVTFEqY8Y3sB%2B48BKQ%3D%3D" rel="nofollow">http://www.jeffjade.com/2016/...</a>
</blockquote>
新编码神器Atom使用纪要
https://segmentfault.com/a/1190000004562183
2016-03-08T13:43:09+08:00
2016-03-08T13:43:09+08:00
jeffjade
https://segmentfault.com/u/jeffjade
1
<p><a href="https://link.segmentfault.com/?enc=kFdS7ufxV1c%2FEGPMm8QLjg%3D%3D.F%2FPkhKMbgwAZXJB3zBIMLUuB03%2BQRjgyn08dKprr0bs%3D" rel="nofollow">Atom</a>是 <code>Github</code> 专门为程序员推出的一个跨平台文本编辑器。她很大程度上继承了SublimeText的美,而又不仅如此。有费了蛮大力气总结了一篇关于SublimeText文章: <a href="https://link.segmentfault.com/?enc=kRglWKaXgeak4dN8z2ngBw%3D%3D.kvkDTmWL6Zw5TpfrXXYSCLt%2FI4Ue8XteJd8MzOOEjaW2sWogu3Tsf0cvk5kNIs97z3RaNLbrYiP0x6Pn0Z79cmtPN%2Fzex0qYXnsJhMHZTgU%3D" rel="nofollow">如何优雅地使用Sublime Text</a>,这其中可以感受个人对于Sublime的钟爱。而如今试用了 <code>Atom</code> 一个多月以来,我被迫见异思迁了,幸好我不是一个喜新厌旧的男人~在编码砌字时,很多时候一款编辑器的标签不够用的,所以现在两款兼而用之。</p>
<p>原文首发(<a href="https://link.segmentfault.com/?enc=p0ncNoKh%2BtHrYAe6dyt77g%3D%3D.VumTot5r6i8JiptJYTa%2FftAKXIO8AlP1VF1BWx2hF9w%3D" rel="nofollow">个人博客~晚晴幽草轩</a>): <a href="https://link.segmentfault.com/?enc=2deBUM5r7pxketbgnPwiQQ%3D%3D.bqZpQcpHev0VyaTKR%2BKbg7i%2Fw%2BEpQDRnSKAMZpahXmeUGQ26ph59cWrVnozKZXk0oSkM3LRElyIP%2Fa2wv2rC%2Bg%3D%3D" rel="nofollow">新编码神器Atom使用纪要</a></p>
<h2>Atom与SublimeText3对比</h2>
<ul>
<li><p>Atom1.0之后,有比Sublime更美的UI,不输Sublime的插件包,比Sublime更加舒适的细节,比如:Atom下 <code>cmd-\</code> 显示或隐藏目录树;(Sublime默认是 <code>Ctrl+K+B</code> )。</p></li>
<li><p>更为简洁人性化的设置/插件安装等(当然SublimeText也不太复杂)。</p></li>
<li><p>Atom算是一款web app,源码都是 CoffeeScript 写的,连界面都可以用 CSS 来自定义,扩展可以用JS开发,完全可以深度定制打造自己的IDE。Sublime基于Python,两者扩展性都非常强。</p></li>
<li><p><strong>Atom</strong> 暂时还是免费的。而SublimeText,额,一直会弹那个框(使用网上注册码?)。</p></li>
<li><p>对 <code>Markdown</code>的支持更加完美(见下文);这一点真心是赞的不要不要的。</p></li>
<li><p>类Web App嘛,对各平台的支持更为有好;比如:在mac下打开xxx文件/文件夹,Atom:terminal下直接 <strong>atom xxx</strong> 即可。而SublimeText会相对繁琐很多,比如为其添加系统别名,可参见<a href="https://link.segmentfault.com/?enc=%2Fiw3D8Mlb%2FTLvN5nIPp8FA%3D%3D.EDIVI44HR9jMYDjMpMcDW%2BRVKvpKGdZpolbr7WX72QjY2U4vvuvK7MuBGnU29bygKsUq2O%2BG45RVcWMCAcZtgei%2F1nhmH3eGEWCMSI82j%2FM%3D" rel="nofollow">Mac必备软件渐集之ZSH-终极Shell</a>。windows下,安装了 <strong>Atom</strong>,就已经在鼠标右键列表了。</p></li>
<li><p><code>Atom</code>,类Web的年轻一代编辑神器,在打开软件速度上稍逊SublimeText3。相比之下,对大文件响应处理上相比之下,还需很大提升。不过潜力还是挺足的。</p></li>
<li><p><strong>Atom</strong> 有友好的中文社区<a href="https://link.segmentfault.com/?enc=HlE7kCyiPk5dUlNHfNiiDw%3D%3D.KLztOOqVvH24eYPNfmdSe8frex5TVpIFCZp2GTsfbho%3D" rel="nofollow">Atom China</a>。</p></li>
</ul>
<p>关于如何初步使用Atom,可以参见 <a href="https://link.segmentfault.com/?enc=KVzjRgIVDiz9xY5G6KcK2g%3D%3D.gnIFqUz8o3dj136J72cIub%2FLncBOImO7y8qyFWZV%2Fw0Ku%2BJ0vt%2Fr0xR4Fk6i9ektq%2Ff6tkxD%2FKzhsOjxymtxvDeFO7lbdYLPUa3C4dxohp4%3D" rel="nofollow">官方手册:Atom 基础使用</a>。</p>
<p><img src="http://7xoosr.com1.z0.glb.clouddn.com/atom.png" alt="Atom is a text editor that's modern, approachable, yet hackable to the core—a tool you can customize to do anything but also use productively without ever touching a config file." title="Atom is a text editor that's modern, approachable, yet hackable to the core—a tool you can customize to do anything but also use productively without ever touching a config file."></p>
<h2>Atom安装篇</h2>
<h3>Atom软件本身安装</h3>
<ol>
<li><p>可以去Atom官网下载安装包,跟普通安装一致。</p></li>
<li>
<p>可以在终端terminal中安装:</p>
<ul>
<li>
<p>Mac OS</p>
<pre><code>brew install Caskroom/cask/atom
</code></pre>
</li>
<li>
<p>Window OS</p>
<pre><code>可以用管理员身份打开Powershell,然后用 choco install 去安装 Atom.</code></pre>
<pre><code>choco install atom</code></pre>
<p>这一点具体可以参见文章:<a href="https://link.segmentfault.com/?enc=oZueg7bURFDTwpfXcpaoUg%3D%3D.jaKRMPGQHx3fKiVx64TsIV9iVBmF7EkRg5fk2sUqYC%2F3bsE8OWbzxiu72lKgsDzjAuwVD9mSloX%2F3gSZa7U6tUZEHX%2FKOf6EWwWiD8JYMAg%3D" rel="nofollow">Win下必备神器之Cmder</a></p>
</li>
</ul>
</li>
</ol>
<h3>Atom的插件安装</h3>
<ol>
<li><p><code>Command+Shift+P</code>呼出设置界面,点击 <strong>Install</strong> ,在调出的页面输入框中输入你想安装的插件名,搜索这个插件,然后再出现的插件选项中点击下载。</p></li>
<li>
<p>Atom编辑器还自带了一个叫做<code>apm</code>(Atom Package Manager)的包管理工具,用过npm的同学应该对包管理工具不会陌生,我们可以通过apm查找Atom插件,安装和删除插件等操作。比如对emmet插件的操作。</p>
<pre><code>
//查找
~ apm search emmet
//安装
~ apm install emmet
//删除
~ apm remove emmet
</code></pre>
</li>
</ol>
<h2>Atom快捷键篇</h2>
<h3>文件切换</h3>
<p><code>ctrl-shift-s</code> 保存所有打开的文件 <br><code>cmd-shift-o</code> 打开目录 <br><code>cmd-\</code> 显示或隐藏目录树 <br><code>ctrl-0</code> 焦点移到目录树 <br>目录树下,使用a,m,delete来增加,修改和删除 <br><code>cmd-t</code>或<code>cmd-p</code> 查找文件 <br><code>cmd-b</code> 在打开的文件之间切换 <br><code>cmd-shift-b</code> 只搜索从上次git commit后修改或者新增的文件</p>
<h3>导航</h3>
<p>(等价于上下左右) <br><code>ctrl-p</code> 前一行 <br><code>ctrl-n</code> 后一行 <br><code>ctrl-f</code> 前一个字符 <br><code>ctrl-b</code> 后一个字符 </p>
<p><code>alt-B</code>, <code>alt-left</code> 移动到单词开始 <br><code>alt-F</code>, <code>alt-right</code> 移动到单词末尾 </p>
<p><code>cmd-right</code>, <code>ctrl-E</code> 移动到一行结束 <br><code>cmd-left</code>, <code>ctrl-A</code> 移动到一行开始 </p>
<p><code>cmd-up</code> 移动到文件开始 <br><code>cmd-down</code> 移动到文件结束 </p>
<p><code>ctrl-g</code> 移动到指定行 row:column 处</p>
<p><code>cmd-r</code> 在方法之间跳转</p>
<h3>目录树操作</h3>
<p><code>cmd-\</code> 或者 <code>cmd-k cmd-b</code> 显示(隐藏)目录树 <br><code>ctrl-0</code> 焦点切换到目录树(再按一次或者<code>Esc</code>退出目录树) <br><code>a</code> 添加文件 <br><code>d</code> 将当前文件另存为(duplicate) <br><code>i</code> 显示(隐藏)版本控制忽略的文件 <br><code>alt-right</code> 和 <code>alt-left</code> 展开(隐藏)所有目录 <br><code>ctrl-al-]</code> 和 <code>ctrl-al-[</code> 同上 <br><code>ctrl-[</code> 和 <code>ctrl-]</code> 展开(隐藏)当前目录 <br><code>ctrl-f</code> 和 <code>ctrl-b</code> 同上 <br><code>cmd-k h</code> 或者 <code>cmd-k left</code> 在左半视图中打开文件 <br><code>cmd-k j</code> 或者 <code>cmd-k down</code> 在下半视图中打开文件 <br><code>cmd-k k</code> 或者 <code>cmd-k up</code> 在上半视图中打开文件 <br><code>cmd-k l</code> 或者 <code>cmd-k right</code> 在右半视图中打开文件 <br><code>ctrl-shift-C</code> 复制当前文件绝对路径</p>
<h3>书签</h3>
<p><code>cmd-F2</code> 在本行增加书签 <br><code>F2</code> 跳到当前文件的下一条书签 <br><code>shift-F2</code> 跳到当前文件的上一条书签 <br><code>ctrl-F2</code> 列出当前工程所有书签</p>
<h3>选取</h3>
<blockquote><p>大部分和导航一致,只不过加上shift</p></blockquote>
<p><code>ctrl-shift-P</code> 选取至上一行 <br><code>ctrl-shift-N</code> 选取至下一样 <br><code>ctrl-shift-B</code> 选取至前一个字符 <br><code>ctrl-shift-F</code> 选取至后一个字符 <br><code>alt-shift-B</code>, <code>alt-shift-left</code> 选取至字符开始 <br><code>alt-shift-F</code>, <code>alt-shift-right</code> 选取至字符结束 <br><code>ctrl-shift-E</code>, <code>cmd-shift-right</code> 选取至本行结束 <br><code>ctrl-shift-A</code>, <code>cmd-shift-left</code> 选取至本行开始 <br><code>cmd-shift-up</code> 选取至文件开始 <br><code>cmd-shift-down</code> 选取至文件结尾 <br><code>cmd-A</code> 全选 <br><code>cmd-L</code> 选取一行,继续按回选取下一行 <br><code>ctrl-shift-W</code> 选取当前单词</p>
<h3>编辑和删除文本</h3>
<h4>基本操作</h4>
<p><code>ctrl-T</code> 使光标前后字符交换 <br><code>cmd-J</code> 将下一行与当前行合并 <br><code>ctrl-cmd-up</code>, <code>ctrl-cmd-down</code> 使当前行向上或者向下移动 <br><code>cmd-shift-D</code> 复制当前行到下一行 <br><code>cmd-K</code>, <code>cmd-U</code> 使当前字符大写 <br><code>cmd-K</code>, <code>cmd-L</code> 使当前字符小写</p>
<h4>删除和剪切</h4>
<p><code>ctrl-shift-K</code> 删除当前行 <br><code>cmd-backspace</code> 删除到当前行开始 <br><code>cmd-fn-backspace</code> 删除到当前行结束 <br><code>ctrl-K</code> 剪切到当前行结束 <br><code>alt-backspace</code> 或 <code>alt-H</code> 删除到当前单词开始 <br><code>alt-delete</code> 或 <code>alt-D</code> 删除到当前单词结束</p>
<h4>多光标和多处选取</h4>
<p><code>cmd-click</code> 增加新光标 <br><code>cmd-shift-L</code> 将多行选取改为多行光标 <br><code>ctrl-shift-up</code>, <code>ctrl-shift-down</code> 增加上(下)一行光标 <br><code>cmd-D</code> 选取文档中和当前单词相同的下一处 <br><code>ctrl-cmd-G</code> 选取文档中所有和当前光标单词相同的位置</p>
<h4>括号跳转</h4>
<p><code>ctrl-m</code> 相应括号之间,html tag之间等跳转 <br><code>ctrl-cmd-m</code> 括号(tag)之间文本选取 <br><code>alt-cmd-.</code> 关闭当前XML/HTML tag</p>
<h4>编码方式</h4>
<p><code>ctrl-shift-U</code> 调出切换编码选项</p>
<h4>查找和替换</h4>
<p><code>cmd-F</code> 在buffer中查找 <br><code>cmd-shift-f</code> 在整个工程中查找</p>
<h4>代码片段</h4>
<p><code>alt-shift-S</code> 查看当前可用代码片段</p>
<blockquote><p>在<code>~/.atom</code>目录下<code>snippets.cson</code>文件中存放了你定制的snippets</p></blockquote>
<p><a href="https://link.segmentfault.com/?enc=GmhmHPRXODicqSm2QsjO4w%3D%3D.z0cxk4NPgjTtmZjdRRlE8tu7dhjME2KRMTK5DY5t9tcVODvXqzh7uXQTSuIJze7t" rel="nofollow">定制说明</a></p>
<h4>自动补全</h4>
<p><code>ctrl-space</code> 提示补全信息</p>
<h4>折叠</h4>
<p><code>alt-cmd-[</code> 折叠 <br><code>alt-cmd-]</code> 展开 <br><code>alt-cmd-shift-{</code> 折叠全部 <br><code>alt-cmd-shift-}</code> 展开全部 <br><code>cmd-k cmd-N</code> 指定折叠层级 N为层级数</p>
<h4>文件语法高亮</h4>
<p><code>ctrl-shift-L</code> 选择文本类型</p>
<h4>使用Atom进行写作</h4>
<p><code>ctrl-shift-M</code> Markdown预览 <br>可用代码片段</p>
<blockquote><p>b, legal, img, l, i, code, t, table</p></blockquote>
<h4>git操作</h4>
<p><code>cmd-alt-Z</code> checkout HEAD 版本 <br><code>cmd-shift-B</code> 弹出untracked 和 modified文件列表 <br><code>alt-g down</code> <code>alt-g up</code> 在修改处跳转 <br><code>alt-G D</code> 弹出diff列表 <br><code>alt-G O</code> 在github上打开文件 <br><code>alt-G G</code> 在github上打开项目地址 <br><code>alt-G B</code> 在github上打开文件blame <br><code>alt-G H</code> 在github上打开文件history <br><code>alt-G I</code> 在github上打开issues <br><code>alt-G R</code> 在github打开分支比较 <br><code>alt-G C</code> 拷贝当前文件在gihub上的网址</p>
<h2>推荐一些好用的插件</h2>
<ul>
<li>
<p>主题</p>
<ul>
<li><p><a href="https://link.segmentfault.com/?enc=QkJji3n6vwlBpdotBrJF3g%3D%3D.3uZydtLQnpy3MkgG7yjk8NDsePwXkKlKvAcKB9hDZlg%3D" rel="nofollow">seti-ui</a>A dark colored UI theme for Atom with custom file icons. (+Seti Syntax)</p></li>
<li><p><a href="https://link.segmentfault.com/?enc=%2FeIYzbF2McMnj%2FM0WEchWg%3D%3D.3P7Isi%2Bg%2FMBEQhM3duedsOKh%2BwXK8A8aqWKPq2y6B3lrYysxQzgvTqayMRG4YjkN" rel="nofollow">atom-material-ui</a> 好看到爆</p></li>
<li><p><a href="https://link.segmentfault.com/?enc=ECC52Auo1rrGUgMJD5y6NQ%3D%3D.CvyKZrrIYwBQJyvIzWriMQMd14FEyOTt2xhx0JUT2iBzDqlgI8%2Bwa46KEPrP4Faz" rel="nofollow">atom-material-syntax</a></p></li>
</ul>
</li>
<li>
<p>美化</p>
<ul>
<li><p><a href="https://link.segmentfault.com/?enc=FZ48T5eVEnJu1H1DDFaYXA%3D%3D.HBimWILIxIBfRhnuT6dmwYmJxaED%2FiZJZVS4up894AYLGwqJJDh5mVp7rzzJTQRY" rel="nofollow">atom-beautify</a> 一键代码美化</p></li>
<li><p><a href="https://link.segmentfault.com/?enc=4u9t4teS2Ppmd6adLyZPXA%3D%3D.s1RG8V5VJAZfy5%2BijUB1zPXBAaG5U3vXSWw3BT%2Buu2lysUnWoMp%2BFMm65NzLjn8p" rel="nofollow">file-icons</a> 给文件加上好看的图标</p></li>
<li><p><a href="https://link.segmentfault.com/?enc=RWo3Df09bgyKgTncJg5v8w%3D%3D.8kf1FeYbMVNRZRrvnmkJkzGHFYmio%2BW9%2FGXeRdIasCp%2FEesRFD%2BWZMF7wQN3cwWh" rel="nofollow">atom-minimap</a> 方便美观的缩略滚动图</p></li>
</ul>
</li>
<li>
<p>git</p>
<ul><li><p><a href="https://link.segmentfault.com/?enc=RWEDO2VcZn%2FIroSNDNWyWg%3D%3D.lKksUe56iFbFJolrIR3W8tkIedUCbbkgX9z%2FI5nAKenp%2BAfL6McxkryecQAoQOd5" rel="nofollow">atomatigit</a> 可视化git操作</p></li></ul>
</li>
<li>
<p>代码提示 <br> -<a href="https://link.segmentfault.com/?enc=RsvlYK9P%2BMA%2FWO3zZvWyFQ%3D%3D.PYf4HxT18VPiBAZ%2FHmbJ0%2BJfo6n%2FKpy6J2HS6cxqV2k%3D" rel="nofollow">emmet</a> 这个不用介绍了吧,前端开发必备,谁用谁知道;</p>
<ul>
<li><p><a href="https://link.segmentfault.com/?enc=ZTcH2WXZCwyoL%2Fx7lu7S5Q%3D%3D.Svt3Y976IRIT2vr%2Ft4OmVqdDB0olu6ncdJ%2F9SGGPHqdlIwrSyudZ6dTQfclTFD1g" rel="nofollow">atom-ternjs</a> js代码提示很强大,高度定制化</p></li>
<li><p><a href="https://link.segmentfault.com/?enc=S%2BZDHe7HC8pGA3K5jghmkw%3D%3D.nuHNcuJ8e6cLKVFfk04YMdHqkbT%2BIIeNdTjE2SDYCnse29i3cwQrILQBhTPl3Bie" rel="nofollow">docblockr</a> jsdoc 给js添加注释</p></li>
<li><p><a href="https://link.segmentfault.com/?enc=Iw%2F%2BsiHbErP%2FhyXo9DQn9w%3D%3D.dmP3BOXzkS%2Beap0i12B90q9jzdyjugPVRQk6obaM6A8UgumKcHJ%2F52NmOn%2BJZ1Bq" rel="nofollow">color-picker</a> 取色器 必备插件</p></li>
<li><p><a href="https://link.segmentfault.com/?enc=IHcU6sUYkpcdTxd%2F1N53Kg%3D%3D.JwFnIEY%2FMDxHwYIAdSLb%2F5iJIgvVB8t%2Fjt5h6rIhCuz2mlRdgng8trDhLHQAN6C0" rel="nofollow">pigments</a> 颜色显示插件 必装</p></li>
<li><p><a href="https://link.segmentfault.com/?enc=sEiBtJdpcCMoQ2XAnUDftw%3D%3D.mcpARzgqdm5b92iiwq%2FHF9V9fX5XocUJT%2BZzDA8Xnb5A6Uc18AN%2FF43ZUqIo%2BgFI" rel="nofollow">terminal-panel</a> 直接在atom里面写命令了</p></li>
<li><p><a href="https://link.segmentfault.com/?enc=i%2F3ds8c97Iarnv4NVkdZiQ%3D%3D.qbzqrBVct2z1LN%2Bqqy%2FgBLj04Eru9NpKLIDDuzcDX8ssOKs7aPN%2Btu2rUraZcHR5" rel="nofollow">svg-preview</a> svg预览</p></li>
<li><p>便捷操作</p></li>
<li><p><a href="https://link.segmentfault.com/?enc=XqsHeEOO1SsraCyAigC6Hw%3D%3D.FOuI%2FRHoZps5NW1BgExF1YePmZV7Ltn7qQ20u9hoswRfNI1wwito9L4pkSbQOBJz" rel="nofollow">advanced-open-file</a> 快速打开、切换文件</p></li>
</ul>
</li>
<li>
<p>代码校验</p>
<ul><li><p><a href="https://link.segmentfault.com/?enc=HQcY40EF7oymmX1Uu%2BBpeQ%3D%3D.Q5xXyEWfFNnTMIgTbjuXj8%2BIybzxin7CdSMiqEEExUI%3D" rel="nofollow">linter</a>代码校验工具;A Base Linter with Cow Powers</p></li></ul>
</li>
<li>
<p>Web前端</p>
<ul>
<li><p><a href="https://link.segmentfault.com/?enc=QY6p%2FghfHx7ujFxVWD327A%3D%3D.n9N7aUuYohLO6EFMgL8LcfeCVxoquJ9QsnBUBpAW%2B%2FJXpJsa%2FGQ3MlU3ckIYS%2Bbo" rel="nofollow">autoclose-html</a> 闭合html标签</p></li>
<li><p><a href="https://link.segmentfault.com/?enc=0%2FZNSphnOdqkYJ4S8GuTFg%3D%3D.0IfJFZJLHjURB%2FatMAf3%2BYSjAT%2Fngt62EMbObcSIEUNczTf8DNqwNVCR%2FxXkKD8R" rel="nofollow">language-vue-component</a> Atom编写Vue高亮</p></li>
<li><p><a href="https://link.segmentfault.com/?enc=cmaJCDrzAeSCpe2HWADoRQ%3D%3D.piGsxjG5C96chmgcsh4oGHjsMd9O3To559Wq5631QMA0dk5ndTDLepnVeavRxih%2B" rel="nofollow">vue-autocompile</a> Auto compiles vue in atom</p></li>
<li><p><a href="https://link.segmentfault.com/?enc=xKRu7rJBJ5AhXqbezcoa1g%3D%3D.ieb9lou1b8tS0O1YHw7ztbBiAFN4CGc2Yg7Laq74it9ez%2BasV6MfBI8lsgN9f0sq" rel="nofollow">language-vue</a> Syntax highlighting for vue component files</p></li>
</ul>
</li>
</ul>
<p>其插件已相当丰满,可以在<a href="https://link.segmentfault.com/?enc=FkaxERPIqNgRU0Kf%2FKzVGg%3D%3D.dUus4KXvBBKwOkK2PSEF8DFuwju9cFhsR9MZcx2xsWE%3D" rel="nofollow">这里</a>搜索查找。Packages make Atom do amazing things.</p>
<h3><strong>舒爽书写作(Markdown)</strong></h3>
<p>Atom有自带MarkdownPreview,支持<code>Ctrl+Shift+M</code>实时预览。装上<a href="https://link.segmentfault.com/?enc=6KXodG6B%2BgmBITS%2BIIR52g%3D%3D.OxSlnwKOWZomn9lOM6qnwVHs6m9JqZnIncsgnUODQfNiwLl2%2FKEx%2BQ0zk7S5q1J1" rel="nofollow">markdown-writer</a>插件,根据其默认配置:<a href="https://link.segmentfault.com/?enc=B1W77srre2WrAaABFb9gDg%3D%3D.XrRferZNroPd3%2FYkVzhL5Dm2MZjL3%2B1WpP6h1tH5yFHPwVPCh%2BHuz3fqub9s7ezTvew92auVx0yNhm0ain0ygA%3D%3D" rel="nofollow">Settings for Keymaps</a>,完美;想必之下比<code>SublimeText</code>下的书写爽很多;也比<code>简书</code>,<code>作业部落</code>要更为强大。 比如对已经写下的文字<strong>加粗</strong>,选中 <code>Command+B</code>即可;如果文字还没写,空格下 <strong>Command+B</strong> 就会生成 <code>**|**</code>,光标在第二个<code>*</code>之后,很是方便。 当然这快捷是可以更改的, <code>cmd + shift + p</code>输入setting呼出设置界面自行更改。 <code>markdown-writer</code>书写 <strong>Markdown</strong> 默认快捷键如下:</p>
<table>
<thead><tr>
<th align="center">快捷键操作</th>
<th align="center">作用效果</th>
</tr></thead>
<tbody>
<tr>
<td align="center">"shift-cmd-K":</td>
<td align="center">"markdown-writer : <strong> insert-link"</strong>
</td>
</tr>
<tr>
<td align="center">"shift-cmd-I":</td>
<td align="center">"markdown-writer : <strong> insert-image"</strong>
</td>
</tr>
<tr>
<td align="center">"cmd-i":</td>
<td align="center">"markdown-writer : <strong> toggle-italic-text"</strong>
</td>
</tr>
<tr>
<td align="center">"cmd-b":</td>
<td align="center">"markdown-writer : <strong> toggle-bold-text"</strong>
</td>
</tr>
<tr>
<td align="center">"cmd-'":</td>
<td align="center">"markdown-writer : <strong> toggle-code-text"</strong>
</td>
</tr>
<tr>
<td align="center">"cmd-k":</td>
<td align="center">"markdown-writer : <strong> toggle-keystroke-text"</strong>
</td>
</tr>
<tr>
<td align="center">"cmd-h":</td>
<td align="center">"markdown-writer : <strong> toggle-strikethrough-text"</strong>
</td>
</tr>
<tr>
<td align="center">"ctrl-alt-1":</td>
<td align="center">"markdown-writer : <strong> toggle-h1"</strong>
</td>
</tr>
<tr>
<td align="center">"ctrl-alt-2":</td>
<td align="center">"markdown-writer : <strong> toggle-h2"</strong>
</td>
</tr>
<tr>
<td align="center">"ctrl-alt-3":</td>
<td align="center">"markdown-writer : <strong> toggle-h3"</strong>
</td>
</tr>
<tr>
<td align="center">"ctrl-alt-4":</td>
<td align="center">"markdown-writer : <strong> toggle-h4"</strong>
</td>
</tr>
<tr>
<td align="center">"ctrl-alt-5":</td>
<td align="center">"markdown-writer : <strong> toggle-h5"</strong>
</td>
</tr>
<tr>
<td align="center">"shift-cmd-O":</td>
<td align="center">"markdown-writer : <strong> toggle-ol"</strong>
</td>
</tr>
<tr>
<td align="center">"shift-cmd-U":</td>
<td align="center">"markdown-writer : <strong> toggle-ul"</strong>
</td>
</tr>
<tr>
<td align="center">"shift-cmd->":</td>
<td align="center">"markdown-writer : <strong> toggle-blockquote"</strong>
</td>
</tr>
<tr>
<td align="center">'shift-cmd-"':</td>
<td align="center">"markdown-writer : <strong> toggle-codeblock-text"</strong>
</td>
</tr>
<tr>
<td align="center">"cmd-j cmd-p":</td>
<td align="center">"markdown-writer : <strong> jump-to-previous-heading"</strong>
</td>
</tr>
<tr>
<td align="center">"cmd-j cmd-n":</td>
<td align="center">"markdown-writer : <strong> jump-to-next-heading"</strong>
</td>
</tr>
<tr>
<td align="center">"cmd-j cmd-d":</td>
<td align="center">"markdown-writer : <strong> jump-between-reference-definition"</strong>
</td>
</tr>
<tr>
<td align="center">"cmd-j cmd-t":</td>
<td align="center">"markdown-writer : <strong> jump-to-next-table-cell"</strong>
</td>
</tr>
</tbody>
</table>
<p>原文(<a href="https://link.segmentfault.com/?enc=TnXTN7tt8r%2FEqwWkYFlq8A%3D%3D.6q6jm7O7SkVeXOZMJOIphCP6IxlN4P3lG4jRum1hjpk%3D" rel="nofollow">晚晴幽草轩</a>): <a href="https://link.segmentfault.com/?enc=aixSlWYMCaU5n01MzqX8oA%3D%3D.D6BSAi5k9fnyiptiWkdtfaJhrPnOcqRgVqe5CJAP27JQxzALS%2Bdz9re3bv4mCOtNxexnSNYt9qHHZuqa7N%2FIGg%3D%3D" rel="nofollow">http://www.jeffjade.com/2016/03/03/2016-03-02-how-to-use-atom/</a></p>
<p><strong>您可能感兴趣(/有用)的文章:</strong></p>
<ul>
<li><p><a href="https://link.segmentfault.com/?enc=X8GbR0yKW4tHg9%2Fz5Aadjg%3D%3D.3oLBAh97zZNCSE2l2OS%2B3PSCz%2FmryERgbRV0X5bv6xwFGnfcIeVWM7YvndKYVbNfVsRS3LpOYT10h5y%2FmzLCTPBhb59kXfNtgE%2BXpHH5wGs%3D" rel="nofollow">如何优雅地使用Sublime Text</a></p></li>
<li><p><a href="https://link.segmentfault.com/?enc=T8Z0pViURztRMV292hXykA%3D%3D.2QaYXXuZGGwBD5ciBYVZ0dRxdQm3cOO5fGl2%2Fc9VTeudQ7rnm2Wqe9mWRKJJC759" rel="nofollow">sublime text 下的Markdown写作</a></p></li>
<li><p><a href="https://link.segmentfault.com/?enc=LrSvJRN1Zk%2BsUAGwRxQZBw%3D%3D.xr6Ov%2B%2BfewbMxC4Rgoy1AOfzTfBZgDvzkHIvWnRvXwKNIrVV68TnE%2Bmrt1Ohe7D30dJFXueVkU%2FRsiWftRz3EQ%3D%3D" rel="nofollow">SublimeText下写作利器之MarkdownEditing</a></p></li>
<li><p><a href="https://link.segmentfault.com/?enc=uAX5aWtL%2FsYXejpaOotLOA%3D%3D.TiKcb8KMNU2Y%2BZ6ujcGSD0dmqUxew2HkHUKOVRIFm2dBGTEmX%2BctoUBnWRMEyuCbNEkWvZT1RYiJ5ipmCc8skSyClP3y4bXzukIvwnZjfFU%3D" rel="nofollow">Mac必备软件渐集之ZSH-终极Shell</a></p></li>
</ul>
博客引入漂亮字体二三事
https://segmentfault.com/a/1190000004452866
2016-02-18T17:18:37+08:00
2016-02-18T17:18:37+08:00
jeffjade
https://segmentfault.com/u/jeffjade
3
<p>最近兴致上来,就想更换了那Blog标题字体(汉字的);网上搜索了一番,发现<code>蘇新詩柳繁體</code>这款甚合我心;然后就着手搞将了起来,分分钟也算是替换了;但,这仅仅是此次折腾的开始;这就细细道来作为学习笔记记载。</p>
<p><a href="https://link.segmentfault.com/?enc=nBgBt8j35hKoTMRNSPEzRA%3D%3D.FEYo29oYVEZJlCRV%2BgOuohLJO4Ktv4ZLnPIjtsRwiiFuLdr4Cd1tU24JebfJue1xLw2ptjuRW8azKhYmfB5Vmw%3D%3D" rel="nofollow">原文首发链接</a><a href="https://link.segmentfault.com/?enc=cGZr7LaT3tkTrvmwvGTuRA%3D%3D.Ldr%2FZNuifLToO6jZqvlrCPVx5kajsH14r0%2F9rS5SDL25I61sc4Z9%2FcTt%2BjLGqYxEmMQPgfE%2BfNRgrw9Qz4O60Q%3D%3D" rel="nofollow">http://www.jeffjade.com/2015/10/28/2015-10-28-css3-webfont/</a></p>
<p><img src="http://upload-images.jianshu.io/upload_images/207604-93c4f399bcc150da.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" title=""></p>
<h2><strong>CSS3 @font-face</strong></h2>
<p>当然要使用自定义字体,就得借助下@font-face:CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中;@font-face的语法规则如下:</p>
<pre><code class="css"> @font-face {
font-family: <YourWebFontName>;
src: <source> [<format>][,<source> [<format>]]*;
[font-weight: <weight>];
[font-style: <style>];
}</code></pre>
<p><strong>其取值说明:</strong></p>
<ol>
<li><p>YourWebFontName:此值指的就是你自定义的字体名称,最好是使用你下载的默认字体,他将被引用到你的Web元素中的font-family。如“font-family:"YourWebFontName";”</p></li>
<li><p>source:此值指的是你自定义的字体的存放路径,可以是相对路径也可以是绝路径;</p></li>
<li><p>format:此值指的是你自定义的字体的格式,主要用来帮助浏览器识别,其值主要有以下几种类型:truetype,opentype,truetype-aat,embedded-opentype,avg等;</p></li>
<li><p>weight和style:这两个值大家一定很熟悉,weight定义字体是否为粗体,style主要定义字体样式,如斜体。</p></li>
</ol>
<p>在@font-face网络字体技术之前,浏览器显示网页上文字使用的字体只能限制在电脑里已经安装的几款字体里。而且每个人的电脑里安装的字体是因人而异的。@font-face的作用是从网上下载并使用自定义字体,使页面显示字体不依赖用户的操作系统字体环境。</p>
<p>好吧,这里涉及到一个字体format的问题,因为不同的浏览器对字体格式支持是不一致的。使用CSS3自定义字体的时候,为了兼容所有浏览器,服务器需要输出4种格式的字体,分别是eot、svg、ttf和woff。所以,若要尽量更全的支持不同浏览器,那么这里就得这样搞了:</p>
<pre><code class="css">@font-face {
font-family: ‘MyFontFamily’;
src: url(‘myfont-webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘myfont-webfont.woff’) format(‘woff’),
url(‘myfont-webfont.ttf’) format(‘truetype’),
url(‘myfont-webfont.svg#svgFontName’) format(‘svg’);
}</code></pre>
<p>使用@font-face只是申明&定义了一种字体;使用时还是得根据<em>font-family</em>特性加入些默认字体以留后路。即便如此,之后也会有些问题。W3C中描述如下:</p>
<blockquote><p><strong>font-family</strong>: <strong>规定元素的字体系列</strong>。可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。也就是说,font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。</p></blockquote>
<p><strong>注意</strong>:使用某种特定的字体系列(Geneva)完全取决于用户机器上该字体系列是否可用;这个属性没有指示任何字体下载。因此,强烈推荐使用一个通用字体系列名作为后路。</p>
<h2><strong>网络字体(Web font)文件格式</strong></h2>
<p><strong>WOFF</strong>:Web Open Font Format<br>这种字体格式专门用于网上,由Mozilla联合其它几大组织共同开发。WOFF字体通常比其它字体加载的要快些,因为使用了OpenType (OTF)和TrueType (TTF)字体里的存储结构和压缩算法。这种字体格式还可以加入元信息和授权信息。这种字体格式有君临天下的趋势,因为所有的现代浏览器都开始支持这种字体格式。</p>
<p>支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】;</p>
<p><strong>SVG / SVGZ</strong>:Scalable Vector Graphics (Font).<br>SVG是一种用矢量图格式改进的字体格式,体积上比矢量图更小,适合在手机设备上使用。只有iPhone上的Safari(4.1)之前的版本支持它。目前火狐、IE都不支持SVG字体格式。火狐推迟对SVG字体的支持,重点放在WOFF格式上。SVGZ是压缩版的SVG。</p>
<p>支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。</p>
<p><strong>OTF / TTF</strong>:OpenType Font 和 TrueTypeFont。<br>.ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,因此他不为网站优化。部分的因为这种格式容易被复制(非法的),这才催生了WOFF字体格式。然而,OpenType有很多独特的地方,受到很多设计者的喜爱。</p>
<p>【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】;</p>
<p><strong>EOT</strong>:Embedded Open Type。<br>这是微软创造的字体格式(是微软在15年前发明了网络字体@font-face)。这种格式只在IE6/IE8里使用。</p>
<p>.woff字体是Web字体中最佳格式,他是一个开放的TrueType/OpenType的压缩版本。即:最起码要支持下这种格式吧。而网上下载的只有.ttf;所以就开始了字体格式转换。</p>
<h2><strong>获取<code>@font-face</code>所需字体格式</strong></h2>
<p>这个阶段折腾的老久了。毕竟是汉字的,网络上搜索的一些在线工具尝试了不少,很好工作的却也不多。<br>最后在这个网站<a href="https://link.segmentfault.com/?enc=Tbuq3FpH4DFNk7OCWJjrLA%3D%3D.QX8NtFdjYr3vW%2BEexIPRLTr6siHCcMa2DMAw6HVz%2FSHdGQDA8sQE9jOVJbaPl7mc" rel="nofollow">https://onlinefontconverter.com/</a>,得到了.woff 和 .svg格式的转换。<a href="https://link.segmentfault.com/?enc=gf4fHXprrv3gwkmFccgDsA%3D%3D.Lljx6vlb%2B9inYV30AMlBzl6Vz%2Bg26SXo5nKmbkr3l0ybHMTONCZ%2BexvU9zVwyY2m" rel="nofollow">Here</a>有介绍。</p>
<p>这里插说一段,在即将放弃的时候,发现了这个网站<a href="https://link.segmentfault.com/?enc=Uu1xMxZhGs4GhBHOEeYRPA%3D%3D.DakYAmFFvJNlD%2FO4Uq6B%2FH%2Bow%2FAxgfp5POCPogb64AlQtpgcqM1U5M7H7fD%2BRe1YKbByTDWMqIzS%2FCUFCGwvPg%3D%3D" rel="nofollow">http://www.fontsquirrel.com/tools/webfont-generator</a>;国外的人士,做事就是认真,一键上传我的.tff格式的字体,它就可以帮助生成对应的4种格式外加.woff2;并且给出CSS以及对应的Demo实例(使用的是 <strong>OPTIMAL</strong>模式)。而且文件还相当的小(5种格式字体加起来就有不到150KB)。惊喜之余,不太相信,一经测试,果然,将汉字给过滤掉了。使<strong>用BASIC模式</strong>确实可以不破坏内容的生成各种格式字体,但难免的,也很大(.woff格式3528KB)。不过,对于英文的转换,还是相当可取的。如何使用?可<a href="https://link.segmentfault.com/?enc=%2FJ1uEIeHWwiprkszxlC0nQ%3D%3D.T1Lh32%2FJ39FQ1TGfaMU5SitReqmBgRSpVTlQ7ndddjeejInMHOkcAQc4OOlOQ0cB" rel="nofollow">ClickHere</a>查看。</p>
<p>搞到此处,于大部分浏览器,渲染出<code>蘇新詩柳繁體</code>的标题,是没问题了。即便在Chrome浏览器上一开始是字体未显示,到被默认字体替代了,加载完毕后才重新以<code>蘇新詩柳繁體</code>渲染出来;而Safari则是,从不显示直到加载完毕才渲染出来。手机上能够渲染出来需要的时间就更长了(Android由空白到请求完成后渲染)。(<em>@ο@</em>) 哇~,如此体验着实好*啊。<br>导致这种现象,必然是各大浏览器渲染时存在的差异所致;@w3ctech<a href="https://link.segmentfault.com/?enc=L5H%2FyTFvSJLxENR75g3H7w%3D%3D.N%2BtgTnoPDSu1DBmBb3neqiX4btwgKQA6sIHAoIS1YY2sHy01Hb0yGSynqrxHvLxH" rel="nofollow">在响应式网站中,提升加载webfonts的性能</a>一文中有过详尽的叙述:</p>
<blockquote><p>A. 如果请求字体还不可用,IE 会立即使用后备字体呈现,并在字体下载完成之后马上重新呈现;</p></blockquote>
<p>B. Firefox 和 Chrome 35+ 会首先下载3秒钟的字体,如果超过3秒钟后,会使用后备字体渲染网页,等到指定字体下载完成后再重新渲染网页;<br>C. Safari 和 Chrome 35之前的版本,会等到指定字体下载完成后再渲染网页(PS:就是不会使用后备字体)。</p>
<p><strong>注:</strong>以上说明中没有表示IE的版本以及Safari的版本号,所以需要自己测试才能算正确。<br>因此,如果网络连接缓慢,在大多数浏览器中将延迟超过3秒的文本渲染。在最坏的情况下,如果你的字体加载带有时间限制(由于一些连接很慢的移动设备),Safari 用户将不会再展示文本,剩下一个空白网页。如果网页请求超时,最终将只会呈现一个空白网页。</p>
<p>毕竟用的是较全汉字繁体: .ttf格式5735KB;.woff格式3534KB,.svg格式竟然11622KB,有点醉了,555。根据@张鑫旭这篇<a href="https://link.segmentfault.com/?enc=6qsXFciACIzP66bNdbOnOw%3D%3D.vYw7YN3iTxZn1ngaVtj2TNLrwaYuAc9RLeFmOOcDkh025o41DzmYyz%2FJPrJSLhvE9cJVwMIcYJlKNgnf5WqBLD8t3LlypJVq70qHR1R7GlhQVm5sQAdcMvKyMgzrJdkYdTAZCnbmAbXs%2Fl6pt%2F4CF%2BaY6TodVEnLVEGMau0XhSs%3D" rel="nofollow">fontforge制作自定义字体及在手机上应用举例</a>文中提到的,可以采取软件(Eg:fontforge)提取出自己想要的部分,从而减小字体文件的大小,来增强体验;但是我这边是汉字,折腾起来不容易啊,555。如此,就牵扯到了:网络字体(Web font)的效率问题了。</p>
<h2><strong>网络字体(Web font)的效率</strong></h2>
<p>字体文件的体积可能非常的大(尤其是对于汉字),而且需要额外的HTTP连接,这些都会降低网站页面的加载速度。所以,在使用网络字体@font-face前,根据网络上的说法:需要清楚它的利与弊,判断网络字体是否真的有必要用在你的网站页面上。</p>
<blockquote><p>如果你决定使用个性化自定义字体,可以采用一个非常灵活的方法,就是只加载尽量少的字体字符数和尽量少的字体风格(粗体/斜体)。例如,如果你使用谷歌字体,你可以只加载指定的字体风格组合:</p></blockquote>
<pre><code class="css">@import url(http://fonts.googleapis.com/css?family=Averia+Sans+Libre:400,300italic,700);</code></pre>
<p>以下是@<a href="https://link.segmentfault.com/?enc=%2B%2FLM1A6EvQm1Yqs4rGFSiQ%3D%3D.gaY9XvwBPpUb7TVPLavuKQ%2BK%2B9YEvE5dWGrHWjEJxUv%2BA3dHG%2B5Q6BVKZtI3fGuW" rel="nofollow">Airen的博客</a>对于使用@font-face的写于提醒:</p>
<ol>
<li><p>如果你的项目中是英文网站,而且项目中的Logo,Tags等应用到较多的这种特殊字体效果,我建议你不要使用图片效果,而使用@font-face,但是你是中文网站,我觉得还是使用图片比较合适,因为加载英文字体和图片没有多大区别,但是你加载中文字体,那就不一样了,因为中文字体太大了,这样会影响到项目的某些性能的优化;</p></li>
<li><p>致命的错误,你在@font-face中定义时,文件路径没有载对;</p></li>
<li><p>你只定义了@font-face,但并没有应用到你的项目中的DOM元素上;</p></li>
</ol>
<p>就目前我的需求而言,Blog用到这字体,仅是在于标题那5个汉字而已。如不能优化至流畅之境,倒不如采用加载经过Ps处理的图片呢;毕竟之于体验和炫酷间抉择,还是前者更为重要些。然,还是得为此探究一番,万一已经好的解决办法了呢?一查,果真有!喜不自胜。</p>
<h2><strong>base64编码字体,自定义你的网站字体!</strong></h2>
<p>CSS3给我们带来了@font-face,网页中可以展现的字体就不局限于电脑中已安装的几款字体。@font-face的作用是从网上下载并使用自定义字体,使页面显示字体不依赖用户的操作系统字体环境。</p>
<p>然而:字体文件的体积一般都比较大,而且需要额外的http请求连接,而且需要兼容多种浏览器的话,往往需要三四个或者更多格式的字体文件。尤其是汉字字体文件;于是乎就有了,WebFont (Web Open Font Format)这个技术,极大滴有针对性的压缩了字体文件的体积,压缩了体积就解决了个大问题,很实用。WebFont的字体转换成base64编码,直接放在样式表里面,哇哦,完美。要实现这个,首先我们得<strong>生成下载需要的字体</strong>;毕竟,整个汉字库辣(那)么大,即便生成base64,其体积也不小哇。</p>
<h3><strong>生成下载需要的字体</strong></h3>
<p>先设置我们要使用的文字,使用WebFont,推荐阿里妈妈WebFont平台 <a href="https://link.segmentfault.com/?enc=Wtk9OUxN2VYoEn6%2FM8wkkQ%3D%3D.XrpMR%2FuD79as4qDn%2FeYqR6xsNTONatu%2FwcTzvUnoNxufTpRktxzmo1MIWelDhula" rel="nofollow">http://www.iconfont.cn/webfont/#</a>!/webfont/index 和有字库 <a href="https://link.segmentfault.com/?enc=cKUgloWIbZBkd9rsxVJ9Tg%3D%3D.4T8c8KmJeB%2BG3LcS6BB1uucB3QmNctNNWNOgrmh9GGA%3D" rel="nofollow">http://www.youziku.com/</a>,使用简单粗暴,输入你要的文字,下载就完了,代码都给你生成好了。</p>
<pre><code class="css">@font-face {font-family: 'webfont';
src: url('//at.alicdn.com/t/glgkzeyrgbonu3di.eot'); /* IE9*/
src: url('//at.alicdn.com/t/glgkzeyrgbonu3di.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('//at.alicdn.com/t/glgkzeyrgbonu3di.woff') format('woff'), /* chrome、firefox */
url('//at.alicdn.com/t/glgkzeyrgbonu3di.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('//at.alicdn.com/t/glgkzeyrgbonu3di.svg#NotoSansHans-Black') format('svg'); /* iOS 4.1- */
}</code></pre>
<p>ctrl+c ctrl+v 就解决了需求,在需要的地方使用即可(这里可以直接使用它给你生成的在线字体woff格式等文件【只有你输入的那些汉字喔】),兼容至BT的IE6,简直碉堡。但,好吧,世间没有那么完美的事儿喔。<code>阿里妈妈webfont</code>平台只有思源系的5种不同字体而已,哭晕,没有我倾爱的<code>蘇新詩柳</code>啊。</p>
<h3><strong>base64编码字体</strong></h3>
<p>经过譬如上面操作,得到字体文件之后,即可运用一些软件(譬如<a href="https://link.segmentfault.com/?enc=2kkkQ4CdwEajFOFKYCDShQ%3D%3D.kVs5KE2C1XvTf%2BWGrRayXKiLdO7fG2pSUnViOUI2Q67mw56vAeI8aM5tNSPxFEGk" rel="nofollow">http://www.giftofspeed.com/base64-encoder/</a>编码之,使之生成base64编码string。<strong>使用:</strong>把处理好了的base64编码放在下面代码中(直接替代xxxxx即可),然后调用<code>webfont-base</code>这个定义好的字体,大功告成!</p>
<pre><code class="css">@font-face {
font-family: 'webfont-base';
src: url(data:font/truetype;charset=utf-8;base64,XXXXXXXXXXXXXXXXX) format('truetype');
font-weight: normal;
font-style: normal
}</code></pre>
<p>额,好吧,使用这个网站生成的base64也是奇葩的--有很多空格换行,base64文件蛮大的话,就需要想点办法予以处理下才好。</p>
<p></p>
<p class="codepen">See the Pen <a href="http://codepen.io/jeffjade/pen/MaQOOM/">MaQOOM</a> by jeffjade (<a href="http://codepen.io/jeffjade">@jeffjade</a>) on <a href="https://link.segmentfault.com/?enc=MVdXPalE3ETl%2FUXamZHlEg%3D%3D.0FWMuKJ0yBPWNApJjg%2BGgVBCyvFxPfG6qvYDlBN0FX8%3D" rel="nofollow">CodePen</a>.</p>
<br><script async src="//assets.codepen.io/assets/embed/ei.js"></script><h3><strong>字体文件加载优化</strong></h3>
<p>之前已经探明,可以使用字体base64编码信息的CSS字体文件,来替代请求woff格式字体下载;但该CSS文件的大小取决于你选择的字符集合以及相关方面,也许该文件相当的大(最高可达100~300KB)。因此,使用gzip压缩以及设置强缓存的方式对于用户来说是很重要的。</p>
<p>不过幸运的是只有当你网页的浏览者第一次访问该CSS文件的时候会发出请求。由于在第一次的时候,用户本地没有该字体文件,所以浏览器就会去异步加载他们,并且存储在localStorage中。当用户的网络环境较慢的情况下,能够看到后备字体以及webfonts渲染过程,不过这些只会发生在用户第一次访问你网页的时候。大多数用户不会太在意这一细节。</p>
<p>当用户第二次网页页面的时候,浏览器将从localStorage中加载CSS文件内容,这种方式相当的快速(5~50ms)。在这种情况下用户看不到任何的闪烁,因为所有的操作将是同步进行的,这仅仅只需要几毫秒的时间。具体可参见@<a href="https://link.segmentfault.com/?enc=Qj%2FwJ6wmkR2lVpM1FFzC5Q%3D%3D.NrQ64IT7rTa1sgE02scebVZfBZN76JviQWGxo5hNblKXWPRZ%2FFfkbgCGTmRX6e53" rel="nofollow">在响应式网站中,提升加载webfonts的性能</a>一文所书。</p>
<p><strong>体验至上,优化不止,且学且究,渐探渐优。</strong></p>
<hr>
<p>参考文章链接:<br><a href="https://link.segmentfault.com/?enc=XwUNDUcDbNQ52LlC0sQvIg%3D%3D.oatv93kbDR4sLtaPuf0qEg%2BpQGqPZ7LBEbl1sbYDX4w%3D" rel="nofollow">@font-face的用法</a><br><a href="https://link.segmentfault.com/?enc=kWjUDjiW7xBvfrXaDPTUkg%3D%3D.qGr8sjm6V5RgpXqsK8AebFVQHJjNqqIPaF2H0dXTZ59Vw%2B7aoJ%2FmMJUuA3A66Cz2" rel="nofollow">Font-face 字体文件格式</a><br><a href="https://link.segmentfault.com/?enc=6MVVPj5cUBNW5GRxOeX3jA%3D%3D.3ZXc5PMzJ%2Fyywj%2B4HeZU%2BbzB7Ca1RWbv6FX5k5NwhKL5K%2B0AhQ2rJ1RSOJyFbXZY" rel="nofollow">CSS3 @font-face</a><br><a href="https://link.segmentfault.com/?enc=sbVjbIGbe9nyuXpVJ%2F7u0w%3D%3D.g33D6mJUUDwT8SLs3pyzPtBfThW6WXe7AZStrXaN80M%3D" rel="nofollow">base64编码字体,自定义你的网站字体!</a><br><a href="https://link.segmentfault.com/?enc=dy2XLNKosxdyBOayPYox6A%3D%3D.0UmVjpXlu7yx%2Bv0GC1%2BibhIkG7MWCLymeyi25eveZMZcSIHtXK1SpBycGeXvvtL9" rel="nofollow">在响应式网站中,提升加载webfonts的性能</a></p>
Win下必备神器之Cmder
https://segmentfault.com/a/1190000004408436
2016-02-03T10:32:05+08:00
2016-02-03T10:32:05+08:00
jeffjade
https://segmentfault.com/u/jeffjade
31
<p>诚言,对于开发码字者,Mac和Linux果断要比Windows更贴心;但只要折腾下,Windows下也是有不少利器的。之前就有在<a href="https://link.segmentfault.com/?enc=0kOtsPLCU6ajviJdvltVgA%3D%3D.eyxzsHNPtl1bB9biFyVhGRm9sqCzzEjtzBLogza6kSvGGWBqvA%2BhGwp8lSw8B4CAP8UwFUsTm2lQCwzOG9gP778%2Fmkd3ZENSr7blk1MWCaY%3D" rel="nofollow">Windows下效率必备软件</a>一文中对此做了下记载;其虽没<code>oh-my-zsh</code>那么逆天的存在,却也甚是好用,至少要比Windows原生Cmd好出了天际。因为<strong>好用</strong>,所以<strong>“必备”</strong>。</p>
<blockquote>原文链接:<a href="https://link.segmentfault.com/?enc=mVLYpAp%2BQfDXHP6rgYh%2FkA%3D%3D.HAIKom%2BfApH%2BfNN7ZFn5aCItR783l%2FGu9qbmeA3dBkg9my609JVMQ%2BAax8CkWYxlUCxW3j83KCXcQvojkfGs0FN4ICj10I1bts%2B68Oo5UWg%3D" rel="nofollow">http://www.jeffjade.com/2016/...</a>
</blockquote>
<hr>
<p><strong>『有则推荐』</strong>: 自 2017 年初,就有开始利用闲余时光,打磨个人最新作品——<a href="https://link.segmentfault.com/?enc=5MFOsGvAWpB9lORGKEtiZg%3D%3D.UsCJZL7NojJZJ%2BM9YIjWnzW%2F3AbL2Wu1%2BoeSd8Og9%2BBVvWhobE6uR33GTijEYgaX" rel="nofollow">「倾城之链」 </a>,有意将其打造成优良开放型平台,旨在云集全球优秀网站,让您更为便捷地探索互联网中那更广阔的世界;在这里,您可以轻松发现、学习、分享更多有用或有趣的事物。目前仍在不断迭代、优化中,如果您对此感兴趣,不妨先尝试一下: <a href="https://link.segmentfault.com/?enc=vIRku2OQ2lJowzMixu3N0A%3D%3D.vjMRn1awVP6SNlyjaTLmFPXZotOXfNohop7ADrR37oguk2NMS0zFdoGM5VLXeUok" rel="nofollow">「倾城之链」 </a>;亦十分欢迎提出您宝贵意见或建议。 (Upade@2018-01-23 于深圳.南山)。</p>
<hr>
<p><img src="/img/remote/1460000004841783" alt="Cmder" title="Cmder"></p>
<h2><strong>安裝 cmder</strong></h2>
<p><a href="https://link.segmentfault.com/?enc=HORGA5jc%2Fi8qj0f6P9EQYA%3D%3D.BlIFtA6aoCa6Dsy5MmeKUIgYqIGkFdbazfa%2F%2FimOXn4%3D" rel="nofollow">Cmder官网</a><code>http://cmder.net/</code>(她把conemu,msysgit和clink打包在一起,让你无需配置就能使用一个真正干净的Linux终端!她甚至还附带了漂亮的monokai配色主题。);作为一个压缩档的存在, 可即压即用。你甚至可以放到USB就可以虽时带着走,连调整过的设定都会放在这个目录下,不会用到系统机码(Registry),所以也很适合放在Dropbox / Google Drive / OneDrive共享于多台电脑。</p>
<p>下载的时候,有两个版本,分别是mini与full版;唯一的差别在于有没有内建msysgit工具,这是Git for Windows的标准配备;全安装版 cmder 自带了 msysgit, 压缩包 23M, 除了 git 本身这个命令之外, 里面可以使用大量的 linux 命令;比如 grep, curl(没有 wget); 像vim, grep, tar, unzip, ssh, ls, bash, perl 对于爱折腾的Coder更是痛点需求。</p>
<p><img src="/img/remote/1460000004841793" alt="cmder强大自带命令" title="cmder强大自带命令"></p>
<h2><strong>配置 Cmder</strong></h2>
<h3><strong>启动Cmder</strong></h3>
<p>因为她是即压即用的存在,所以点击<code>Cmder.exe</code>即可运行。很显然这般打开她,不怎么快捷,即便用<code>Listary</code>高效搜索到她,然后点击,我们可以这样做:</p>
<p>1.把 <strong>cmder</strong> 加到环境变量:可以把<code>Cmder.exe</code>存放的目录添加到系统环境变量;加完之后,<code>Win+r</code>一下输入<code>cmder</code>,即可。</p>
<p>2.<strong>添加 cmder 到右键菜单</strong>:在某个文件夹中打开终端,这个是一个(超级)痛点需求,实际上上一步的把 <strong>cmder</strong> 加到环境变量就是为此服务的,在管理员权限的终端输入以下语句即可:</p>
<pre><code>Cmder.exe /REGISTER ALL</code></pre>
<p><strong>打开一个管理员权限终端:</strong>输入 Ctrl + t,或者点击下面控制条的绿色加号,勾选 Run as administrator</p>
<p><img src="/img/remote/1460000004841801" alt="Run as administrator" title="Run as administrator"></p>
<p>这就打开了一个管理员权限的终端, 在里面输入上述语句,就可在每个文件夹右键菜单中点击 <code>Cmder here</code>唤起Cmder,方便快捷。</p>
<p>不用打开文件夹就能打Cmder,并进入该目录;爽。</p>
<p>3.借用Win下逆天神器:<code>AutoHotKey</code>(这个下篇要好好记载下)为Cmder配置自己喜欢的快捷键(个人用<code>Alt+r</code>):</p>
<pre><code>!r:: run, D:\**\cmder_mini\Cmder.exe</code></pre>
<p>个人比较推崇使用<code>AutoHotKey</code>;高效简洁,才是王道。</p>
<h3><strong>默认开启设置</strong></h3>
<p>作为强大的存在,必然支持私人定制。输入<code>win + alt + p </code>或者 在底部右击点击 settings, 进入设置页面;可以根据自己的所需进行各种配置(字体,皮肤等等等等)。</p>
<p>目前游走在前端,<code>Gulp</code>已离不开,<code>Cmder+PowerShell</code>这个组合无疑是运行gulp的利器。如下图所示,可以设置<code>PowerShell</code>作为默认开启的选项;也可以更改默认开启是所在目录。</p>
<p><img src="/img/remote/1460000004841802" alt="Cmder-Seting" title="Cmder-Seting"></p>
<h3><strong>解决文字重叠问题</strong></h3>
<p>Win + ALT + P 唤出设置界面 > mian > font > monospce,去掉那勾勾即可。</p>
<h3><strong>修改命令提示符号·λ·</strong></h3>
<p><img src="/img/remote/1460000004841804" alt="Cmder修改命令提示符号" title="Cmder修改命令提示符号"></p>
<p>Cmder预设的命列列提示符号是<strong>λ</strong>;如果用着不习惯,可以将这个字元改成Mac / Linux环境下常见的<strong>$</strong>符号,具体操作如下:</p>
<p>编辑Cmder安装目录下的vendorinit.bat批处理文件(min版本15行),把:</p>
<pre><code>@prompt $E[1;32;40m$P$S{git}{hg}$S$_$E[1;30;40m {lamb} $S$E[0m</code></pre>
<p>修改成以下即可:</p>
<pre><code>@prompt $E[1;32;40m$P$S{git}{hg}$S$_$E[1;30;40m $$ $S$E[0m</code></pre>
<p>这个亲测在<code>cmder.exe</code>可以,但在<code>PowerShell.exe</code>需要另行设置:打开文件config/cmder.lua(prompt.lua也有版本是这个),将第二行中的<strong>λ</strong>修改为Linux下常用的<strong>$</strong>即可;亲测可行(2016-01-13)。</p>
<h2><strong>常用功能介绍</strong></h2>
<p>cmder 功能极为强大,功能也非常多,但从视窗画面上看不太出其强大实力,这里就先说下其「看的见」的功能:</p>
<p><img src="/img/remote/1460000004841806" alt="Cmder强大功能图示" title="Cmder强大功能图示"></p>
<p>如上图示编号的部分说明如下:</p>
<ol>
<li>
<p>Cmder常用快捷键<br>跟一般浏览器页签操作习惯一致:</p>
<ul>
<li>可以利用<code>Tab</code>,自动路径补全(爽,赞!);</li>
<li>可以利用<strong>Ctrl+T</strong>建立新页签;</li>
<li>利用<strong>Ctrl+W</strong>关闭页签;</li>
<li>还可以透过<strong>Ctrl+Tab</strong>切换页签;</li>
<li>
<strong>Alt+F4</strong>:关闭所有页签</li>
<li>
<strong>Alt+Shift+1</strong>:开启cmd.exe</li>
<li>
<strong>Alt+Shift+2</strong>:开启powershell.exe</li>
<li>
<strong>Alt+Shift+3</strong>:开启powershell.exe (系统管理员权限)</li>
<li>
<strong>Ctrl+1</strong>:快速切换到第1个页签</li>
<li>
<strong>Ctrl+n</strong>:快速切换到第n个页签( n值无上限)</li>
<li>
<strong>Alt + enter</strong>: 切换到全屏状态;</li>
<li>
<strong>Ctr+r</strong> 历史命令搜索;</li>
<li>
<strong>End, Home, Ctrl</strong> : Traversing text with as usual on Windows</li>
</ul>
</li>
<li>可在视窗内搜寻画面上出现过的任意关键字。</li>
<li>新增页签按钮,可透过滑鼠新增页签。</li>
<li>切换页签按钮,可透过滑鼠切换页签。</li>
<li>锁定视窗,让视窗无法再输入。</li>
<li>切换视窗是否提供卷轴功能,启动时可查询之前显示过的内容。</li>
<li>按下滑鼠左键可开启系统选单,滑鼠右键可开启工具选项视窗。 Win+Alt+P :开启工具选项视窗</li>
</ol>
<h2><strong>cmder元件组成</strong></h2>
<p>cmder其实结合了多套软体,其中包括<a href="https://link.segmentfault.com/?enc=61o0phw6YGSCtvXe7wITgA%3D%3D.PF9CjRegEXWLDqtHOMT6dlwr%2FNGBLqfk7bX0Lmjf2YxObOoU0wWi43mLvFRfLfmX" rel="nofollow">msysgit</a>与最重要的<a href="https://link.segmentfault.com/?enc=F%2FOpfYeF306VoRVsDDV3Ew%3D%3D.2ioSYRpFfh3DPeq5N1GkFSIrTC2GRkv8XWnbGIyd3Gg%3D" rel="nofollow">ConEmu</a>与<a href="https://link.segmentfault.com/?enc=CaADIv5yc4%2Bma5uODQ6FRw%3D%3D.kuuOCmc3ERP4o3zJP%2FbRLOtQvxwwfYrTyLI8rCwt2UhV9YHlCJ0MOVgjGnWLMcFB" rel="nofollow">Clink</a>软体,而ConEmu与Clink这两套软体就是cmder真正的核心元件。</p>
<ul>
<li>
<strong>msysgit</strong>除了提供Git for Windows 相关工具外,其实还提供了多套Unix/Linux 环境下常用的指令列工具,例如less, ls, tar, unzip, md5sum, grep, sed, … 等多套工具。光是一个grep 就不知道比Windows 内建的findstr 强几百倍了!</li>
<li>
<strong>ConEmu</strong>也可以是单独一款软件存在,曾经一度迷恋于它,然而其体验并不如<strong>cmder</strong>,便放弃它了。</li>
<li>
<strong>Clink</strong> 将GNU Readline 函式库整合进原生的Windows 命令提示字元视窗,提供命令列模式下强大的编辑与输入能力,这也是用了cmder 之后会这么像在Linux 环境下使用的感觉。</li>
</ul>
<p>上述功能,目前没怎么用,根据<strong>学以致用</strong>原理,也就还没去了解去折腾。</p>
<h3>
<a href="https://link.segmentfault.com/?enc=2AuQ6Y9LboGhLjWP%2Bbak0A%3D%3D.kBYdFhU4AiiZnnYFUyLBeysuWFR1wQY2i0vioPK2Qq8%3D" rel="nofollow">Chocolatey</a>软件包管理系统</h3>
<p>在 Linux 下,大家喜欢用 apt-get(mac下用brew) 来安装应用程序,如今在 windows 下,大家可以使用 Chocolatey 来快速下载搭建一个开发环境。<code>Chocolatey</code>的哲学就是完全用命令行来安装应用程序, 它更像一个包管理工具(背后使用 Nuget )</p>
<p>另外需要说明的是, Chocolatey 只是把官方下载路径封装到了 Chocolatey 中,所以下载源都是其官方路径,所以下载的一定是合法的,但是如果原软件是需要 Licence 注册的话,那么 Chocolatey 下载安装好的软件还是需要你去购买注册。不过 Chocolatey 一般还是会选用免费 Licence 可用的软件。</p>
<p>安装chocolatey,运行如下命令即可:</p>
<pre><code class="shell">@powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin</code></pre>
<p>安装软件命令 <code>choco install softwareName</code>,短写是 <code>cinst softwareName</code>。可安装的应用程序,可以参见其 <a href="https://link.segmentfault.com/?enc=1X3JmXMdquTtXa6c%2B3IcJw%3D%3D.Cn6FSWP6AUblHYXnRY%2B1Htsu36SuXIkoZ2SjFL42S2A%3D" rel="nofollow">Package列表</a>。以下是window下开发常用的开发环境应用:</p>
<pre><code class="shell">choco install autohotkey.portable #安装 AutoHotkey (Portable)
choco install nodejs.install #安装 node
choco install git.install #安装 git
choco install ruby #安装 ruby
choco install python #安装 python
choco install jdk8 #安装 JDK8
choco install googlechrome #安装 Chrome
choco install google-chrome-x64 #Google Chrome (64-bit only)
choco install firefox #安装 firefox
choco install notepadplusplus.install #安装 notepad++
choco install Atom #安装 Atom
choco install SublimeText3 #安装 SublimeText3</code></pre>
<h2><strong>其他功能</strong></h2>
<ul>
<li>Cmder还增加了<strong>alias</strong>功能;他让你用短短的指令执行一些常见但指令超长又难以记忆的语法;比如 <code>ls</code> <code>cls</code>等等;在其控制台输入<code>alias</code>可以查看。</li>
<li>主控台文字自动放大缩小功能,你只要按<strong>下Ctrl+滑鼠滚轮</strong>就可以办到;果你用支援两点触控的笔电,也可以在触控板上用两指放大的手势调整文字大小。还有:<strong>up</strong>,向上翻历史命令;</li>
<li>
<strong>Cmder</strong>有极为简单的<strong>复制粘贴</strong>操作。<strong>Ctr+V</strong>直接粘贴;用鼠标选中你想拷贝的内容,自动就复制到剪切板;天神,这悉数的美感;点赞!</li>
<li>
<strong>自定义aliases</strong>:打开Cmder目录下的config文件夹,里面的aliases文件就是我们可以配置的别名文件,只需将里面ls命令的别名按下列方式修改就可以在ls命令下显示中文。</li>
</ul>
<pre><code>ls=ls --show-control-chars --color=auto $*</code></pre>
<p>当然,别名文件还可以有许多其他配置,如:</p>
<pre><code>e.=explorer .
gcc=cd D:\Document\gcc\
gw=cd D:\Document\GitHub\work
gl=git log --oneline --all --graph --decorate $*
ls=ls --show-control-chars --color=auto $*
pwd=cd
clear=cls</code></pre>
<p>这个在公司电脑上总不成功;问题<code>无效的宏定义。</code>;在写到这里时候,还未查明缘由<strong>【待探究,待更新】</strong>。</p>
<p>---2016-01-14 20:05更新:</p>
<p>感谢@V友(zongwan)可以修改Cmder目录下<code>vendor\profile.ps1</code>文件,Like This:</p>
<pre><code>Set-Alias st "C:\Program Files\Sublime Text 3\sublime_text.exe"
function Git-Status { git status }
Set-Alias gs Git-Status
function go-Work {cd E:\work\web\cdn\}
Set-Alias gw go-Work</code></pre>
<p><code>st xxx</code>就用实现以sublimeText打开xxx文件;<code>gw</code>下就能进入所设置的目录;<code>gs</code>相当于在使用git文件目录下用<code>git status</code>;凡此种种,为常用命令设置下简短别名,真心不错。</p>
<p>Windows的cmd就是一个奇葩的存在…如果你愿意花时间去找,你能找到很多的可以替代它的软件,譬如:<code>Babun</code>, <code>Gow</code> ,<code>Conemu</code> , <code>clink</code>等等,任何一款都比原生Cmd来得快意。环境虽如是,体验却在你。</p>
<p>大概就这样,折腾让生活更美好,不止于编程码字。还是那句话,与君共勉:<br>“<strong>过一个平凡无趣的人生实在太容易了,你可以不读书,不冒险,不运动,不写作,不外出,不折腾……但是,人生最后悔的事情就是:我本可以。</strong>”——陈素封。</p>
<h2>参考文章</h2>
<ul>
<li><a href="https://link.segmentfault.com/?enc=UIStERNVpVHklRRJCGvocw%3D%3D.aAb%2FQIxM%2BiPmdLnrDuUMiUc9GQJKBFB3D0%2Fqy3Zg97I%3D" rel="nofollow">Cmder官网</a></li>
<li><a href="https://link.segmentfault.com/?enc=w3cJqDDD27DL73neNhzEfg%3D%3D.7gatt%2F7ywatwjxHXYrZ2StO2C7fVLHeXmt%2BJdqKhFWk%3D" rel="nofollow">利用 Chocolatey 快速在 Windows 下搭建一个开发环境</a></li>
<li><a href="https://link.segmentfault.com/?enc=ohHP4h9kjDc8biUkf7tj8Q%3D%3D.RVniAwfFkHLd6m7CbnZx52j85CaFg3SHUax%2Fic%2FT9MENMPkbCS%2F3csnZWgW1gsLf0cpFsNAqLkO2xYST%2F%2BGJNw%3D%3D" rel="nofollow">介绍好用工具:Cmder ( 具有Linux 温度的Windows 命令提示字元工具 )</a></li>
</ul>
<p>对您可能有用(/感兴趣)的文章:</p>
<ul>
<li><a href="https://link.segmentfault.com/?enc=cX1k9zDQRfi7A53YMBtr6g%3D%3D.LeRPZA1PD%2BUilkJu4vs4bYJLTQXwa8lDv1XnhGbUtOnBH5flWtv5PmBCb%2Fm%2BdW3Ni3oGjQDINLmnpemwObdCcwWsiF01Tt0mphV8y9LsElw%3D" rel="nofollow">如何优雅地使用Sublime Text</a></li>
<li><a href="https://link.segmentfault.com/?enc=VXtPETelPQR9uFqiU0DK7Q%3D%3D.WKf5aGR9KureXXXUKSXS84TXm95%2FiBt5qYMYVRv8AYAyAnTGvrQdZTDkx3pnG1RR" rel="nofollow">sublime text 下的Markdown写作</a></li>
<li><a href="https://link.segmentfault.com/?enc=FLG0WZrmeRYQ2OsOkPD1Vw%3D%3D.NQU0wV7kviRgK1ba6D6iWC42uqrtPIJIYoDT0ERVD3Fd7y%2FMpz7SdcjW75rveiG9xd8PVGEAZNbggDBV%2FCvm8NupfgWuQdxr3lqTjin%2FGLk%3D" rel="nofollow">Mac必备软件渐集之ZSH-终极Shell</a></li>
<li><a href="https://link.segmentfault.com/?enc=pp8Qpq82E6WBos6gWADzXg%3D%3D.BtXjNk47ojUKm8hvcvC7f6xM%2B3WdJX8POqRjhbgvRnYUo6m7erbrLjsCjVKJ7RHRtgJSF45msaOkczqM2VjeCA%3D%3D" rel="nofollow">Vimium~让您的Chrome起飞</a></li>
<li><a href="https://link.segmentfault.com/?enc=e86RCQmWlVRI4ZAIC0T7Bg%3D%3D.j0QsdEdF%2BSGS1JVlebBdLMEXOL5Orwd8qwkWPNOwE0E7mqNS7Vu3LNRQR9F3VLcLODSqeAGXhL89br3aXWFl4g%3D%3D" rel="nofollow">SublimeText下写作利器之MarkdownEditing</a></li>
</ul>
CSS实现水平|垂直居中漫谈
https://segmentfault.com/a/1190000004261548
2016-01-06T21:29:24+08:00
2016-01-06T21:29:24+08:00
jeffjade
https://segmentfault.com/u/jeffjade
13
<p>原文首链:<a href="https://link.segmentfault.com/?enc=yERnqtaPxmeNgX4QHDOy5g%3D%3D.M9MYwUx%2FYCTqCTo9YywodYrhH3OqlDw9XOaDRgU1RF2XdXyO55FwUQ3aJC4Qkn2nLIl4Ss9lUZ%2FbFuEVVHly6pV3SDa4IkiPxjfmj6kOV17TFtDR4NP8Vm9aBi7BXer9" rel="nofollow">CSS实现水平|垂直居中漫谈</a></p>
<p>利用CSS进行元素的水平居中,比较简单,手到擒来:行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可。而撸起垂直居中,相信于大多初撸者来说,与我相似,内心是抗拒的。于此,以我司同事一内部分享为基,加以搜集完善,得8种CSS垂直居中书写之法;个中有示例Demo,以及代码和优劣之评。</p>
<p><a href="https://link.segmentfault.com/?enc=YiGsRYS94wlB1J9H4KlliA%3D%3D.AgXiINIBkwjJZ02ZWvCctxsvjQ7tHbJ%2B9o%2BdXP9JLQsK%2FfOWP6pDCBRy%2Fjeyp72EiHmY4KvGk4tpMbKELXj%2FsA%3D%3D" rel="nofollow">CSS实现水平居中(3法)</a></p>
<p><a href="https://link.segmentfault.com/?enc=BoTXu2lNoNsQ7jbUXoO%2BoQ%3D%3D.FY1qhxfknw1iodr72Du9I1vqOkvU9VcM8qcYigHoHJcJwcd8JDmcwZpLRUADY%2FR7OczGhYeYHst9NB0BQci%2Fcg%3D%3D" rel="nofollow">CSS实现垂直居中(8法)</a></p>
<p><a href="https://link.segmentfault.com/?enc=lMI%2FoNO%2BvjK7BYMxxPcHJQ%3D%3D.FudVhJ8uMaRBKahU749M3IVEOlrUK4XeDVS7GrboTVp%2Fak2BVkOn5i6tVnkOoci%2FOKUnZtGHgTQZ5mpKN%2FxvNA%3D%3D" rel="nofollow">CSS文本垂直居中(5法)</a>[Update: 2016-01-06]</p>
<p>PS:窃以为,对于CSS足够熟悉的话,以CSS多种属性组合出的“奇技淫巧”想必是层次不穷的,这里也只是搜集整理了其中为大家常用而又简洁的部分而已。</p>
<hr>
<p><strong>注解:</strong> 好吧,周末被“加班”了耶,搞搞需求整整Blog还算闲适;在写居中示例时,搜肠刮肚没什么适宜之词,便逼的自己“什兴大发“,特胡驺几句自黑乱言,填充内容,耶聊以慰籍;贴之于下,祈与同道者共嗨 ?。</p>
<pre><code>周末把码黄昏后,有咸香盈袖。
莫道不消魂,独弄键盘,人比黄花瘦。
真可谓:天堂有路你不走,学海无涯苦作舟。
到头来:码山有路勤为径?三十功名尘与土。
饶上个:一入'哀啼'深似海,从此'逍遥'没长'苏'。
</code></pre>
<p>PS: 更新于2015-11-25 之后在CodePen有看到一文将<strong>绝对居中</strong>阐述的更为全面,链接如下:<a href="http://codepen.io/shshaw/full/gEiDt">http://codepen.io/shshaw/full/gEiDt</a></p>
如何优雅地使用 Sublime Text
https://segmentfault.com/a/1190000004248611
2016-01-05T10:03:18+08:00
2016-01-05T10:03:18+08:00
jeffjade
https://segmentfault.com/u/jeffjade
14
<p>Sublime Text:一款具有代码高亮、语法提示、自动完成且反应快速的编辑器软件,不仅具有华丽的界面,还支持插件扩展机制,用她来写代码,绝对是一种享受。相比于难于上手的Vim,浮肿沉重的Eclipse,VS,即便体积轻巧迅速启动的Editplus、Notepad++,在SublimeText面前大略显失色,无疑这款性感无比的编辑器是Coding和Writing最佳的选择,没有之一。</p>
<blockquote>原文首链:<a href="https://link.segmentfault.com/?enc=lpY5eBvPh5QdIOc4jkbv1A%3D%3D.s2L9BrHhR9xMn5X0dRSNFyUyYkiH8%2BQHXpbaIP2omclKCiitfQ2ik6gJ3hLkHsm9qP29JP2hDs3rNp48a2jsz70WhB28AcIvct1ipK8wqSQ%3D" rel="nofollow">http://www.jeffjade.com/2015/...</a>
</blockquote>
<hr>
<p><strong>『有则推荐』</strong>: 自 2017 年初,就有开始利用闲余时光,打磨个人最新作品——<a href="https://link.segmentfault.com/?enc=XcrwIXOOEJyQ1zyAkfCGBw%3D%3D.WpHTku%2FPjQdLxLCajujAqhbf%2BwUBtgmshnLcNnZ3Mo5C5mLte2I6nWja7YcsfvfP" rel="nofollow">「倾城之链」 </a>,有意将其打造成优良开放型平台,旨在云集全球优秀网站,让您更为便捷地探索互联网中那更广阔的世界;在这里,您可以轻松发现、学习、分享更多有用或有趣的事物。目前仍在不断迭代、优化中,如果您对此感兴趣,不妨先尝试一下: <a href="https://link.segmentfault.com/?enc=0Qw9oH2LyrJoi97tCKm0MA%3D%3D.m7OQKN57ZXJXM4fV2AwfJ4xDkOczzmSzmJKb8EjyHJAK9lexxeDjedyfbakGfJuY" rel="nofollow">「倾城之链」 </a>;亦十分欢迎提出您宝贵意见或建议。 (Upade@2018-01-23 于深圳.南山)。</p>
<hr>
<h2><strong>如何优雅地使用 Sublime Text 之目录</strong></h2>
<blockquote><ul>
<li><a href="https://link.segmentfault.com/?enc=WxgvB%2BC6ESgWR3OZ1dPtOA%3D%3D.ymBxJkIW8mDnjNI6Q9OwDwSifmM7W7b0Q7gAd0KTUOceb8%2FVLKijKHpjDn8UceRYPzk%2BtCnw1PjrmJzrPYKNr1Q0ok7OexgBkJCu4GpoeJg%3D" rel="nofollow">Sublime Text 2和3的对比</a></li>
<li><a href="https://link.segmentfault.com/?enc=HOwznpT7Xkk4lgYI%2Fqxbkg%3D%3D.8h%2BMxmHQSnfjAwp1N%2Bh%2Fy%2B9%2BemLXFPUvFxTt7618HyckeZVN7fefmlKhhrdt9gY%2FBl%2BWQ2D6BGsIf4oCmpIkpFU0gLYRxjF7DfHClX4iCSA%3D" rel="nofollow">Sublime Text 3安装插件</a></li>
<li><strong><a href="https://link.segmentfault.com/?enc=e71d9kwR6xuig7%2FegcjT%2Bw%3D%3D.hJ7fXat%2FB%2F6yx3WSOp%2B8QtOb2x1G8xLUmUZt5Sq7OH67CF7G7RYFlGAtecsDZ7q6E1QVz4ZLI5qLTxgkJ3v1%2B1YSJjh2rrMGF9ckX4GcgfQ%3D" rel="nofollow">Sublime Text 3插件推荐</a></strong></li>
<li><a href="https://link.segmentfault.com/?enc=Mzl5MFoQa4tpJ4igb1Lm5Q%3D%3D.m8Ovs7pAfEXLeVbwbM5YugTMLyBTSROpaCisIs15CUN37A8Y%2BmcKMtfg6EiIlq0sLa5WKzX%2BLRrbVzCyPd30g7SLXNhh6ARyGP9hFBauOcI%3D" rel="nofollow">定制属于自己的快捷键</a></li>
<li><strong><a href="https://link.segmentfault.com/?enc=F1%2FUU9gmiiWB9J0lGLqoBA%3D%3D.43eNQgwVEAfOeSFEktCnxURyiSKnT47bdxtyvOMuyZLwoF1IZU72wlndxfCaVcVYMEyfHsJM0BgFvxus2VkYdmIvGqISb53obwY5vzMR00Q%3D" rel="nofollow">Sublime不可不知的实用技巧</a></strong></li>
<li><a href="https://link.segmentfault.com/?enc=x4oTOwCnennvJ%2FkPeDeNOg%3D%3D.bAm0YU6KygBZriiJM6qLkWDpy0pTXxj%2BBjDPMBDlPIQwGq%2F9Aa5GlQ261Qg7eHNdmwo54niMtRZtlPubjq4%2FRxrG71hOTXdG9z1g9%2BK5fCE%3D" rel="nofollow">定制属于自己的个性化主题</a></li>
<li><a href="https://link.segmentfault.com/?enc=A7MuLQkGeyplZEpeqotzNQ%3D%3D.LWbM3SbMPsfkIMB4ZCxbfiR8QODTwugtfhJVF23bZev3wshQDCY8QClKTj2CXELIq1gZmi%2B4eUBczaVwxwpa%2BfXRC%2BUCwB9uchGrk26Eaw0%3D" rel="nofollow">Sublime锦上添花些许设置</a></li>
<li><a href="https://link.segmentfault.com/?enc=uOl5dd8KvLPi1VcfOWjaeA%3D%3D.Vx%2BDfz9fzIcr5f%2Bh19z5BlrgUbDvltpe%2F3m6MGOq2L7EV2OV0SLRuy5Dnvq%2F5Y8yttuBkWBrFQqP%2B9NGN%2BFFc3SRSeLtAojK7fyF8tTbNu8%3D" rel="nofollow">写在一路更来的结语</a></li>
</ul></blockquote>
<h2><strong>Sublime Text 2 和 3 的对比</strong></h2>
<p>相比于2,Sublime Text 3就秒启动一项,就压倒性地胜利了。因此在之后的叙述中都以Sublime Text 3为主角。并且3一直在不断的完善更新,具体的差异可参看<a href="https://link.segmentfault.com/?enc=3uhDaD6d9HCz60lm2SKV6w%3D%3D.Fdhc%2FLWzs79nJiu7g0UeTrlIuI1hqOoUARw8KKC3WH6iH%2B2RU2t70oOP5n8gtSWL" rel="nofollow">Sublime Blog</a>。简单的说:</p>
<ul>
<li>ST3支持在项目目录里面寻找变量</li>
<li>提供了对标签页更好地支持(更多的命令和快捷键)</li>
<li>加快了程序运行的速度</li>
<li>更新了API,使用Python3.3</li>
</ul>
<p>强烈推荐朋友们使用 3!唯快不破,不解释。</p>
<h2><strong>Sublime Text 3 安装插件</strong></h2>
<p>Sublime Text的强大就是她拥有强大的课可扩展性。您可根据自己的需要安装不同的插件;这使得她变的无比强大的同时又不失轻便。</p>
<h4><strong>插件安装方式一:直接安装</strong></h4>
<p>安装Sublime text 3插件很方便,可以直接下载安装包解压缩到Packages目录(菜单->preferences->packages)。</p>
<h4><strong>插件安装方式二:使用Package Control组件安装</strong></h4>
<p>按Ctrl+`调出console(注:安装有QQ输入法的这个快捷键会有冲突的,输入法属性设置-输入法管理-取消热键切换至QQ拼音)粘贴以下代码到底部命令行并回车:</p>
<pre><code class="python">import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())</code></pre>
<p>重启Sublime Text 3。如果在Perferences->package settings中看到package control这一项,则安装成功。按下Ctrl+Shift+P调出命令面板输入install 调出 Install Package 选项并回车,然后在列表中选中要安装的插件。</p>
<p>PS:国内使用SublimeText3,经常可能遇到无法安装可用插件问题,可remove掉<strong>Package Control</strong>重新安装下;如遇到连Package Control也无法安装,则可以在别处拷贝一份关于Package Control的文件-(Package Control.sublime-package)存放于<code>Installed Packages</code>目录之下即可。</p>
<h2><strong>Sublime Text 3插件推荐</strong></h2>
<p><strong>无插件,不神器!</strong>根据自己的需要定制属于自己的强大插件集;下面是一些常用的推荐。</p>
<ul>
<li><a href="https://link.segmentfault.com/?enc=D6c6q6fc0zxSMuP66sZRiA%3D%3D.BqDGeBOaleca8iHdEPw%2FkQzav2M6YfoxasYOT%2FUvsdWkLpuM4vos%2F6H9hpfwhgQK" rel="nofollow">Sublime Text3插件:增强篇</a></li>
<li><a href="https://link.segmentfault.com/?enc=bjU4jvxlXjOuEp4drAPU1w%3D%3D.W%2BDEC%2FgimftcLF2XermYw4fnmu8h1ihLKFzdtu9LpEojtuKYeUmrrAifYzz8HL7k" rel="nofollow">20个强大的SublimeText插件</a></li>
</ul>
<p>作为在移动端旧游之后,又Web端新游的自己,墙裂推荐以下这么几款插件:</p>
<h4><strong><a href="https://link.segmentfault.com/?enc=bAPgi3IZjfSTXtQJuRuENg%3D%3D.j7ei%2BohPnMHSSjZBxV7T74vcnsyOfLcdgdwbLDNnHaXzBZ4MMh33%2BdReWDkxcmCy4EcV8Sm0HQpHLR5t912gJw%3D%3D" rel="nofollow">MarkDown Editing</a></strong></h4>
<p>SublimeText不仅仅是能够查看和编辑 Markdown 文件,但它会视它们为格式很糟糕的纯文本。这个插件通过适当的颜色高亮和其它功能来更好地完成这些任务。关于如何在SublimeText下高效些东西可参见文章:<a href="https://link.segmentfault.com/?enc=mp9cXfq0tJ1aByoD6Gg95g%3D%3D.QqXNopTUJ6KBOpnfkrj5Fsic%2Fy0ZfWE1hN%2BvBVDiTvPj45DHl%2B4GFcrhf%2BVtPV4d" rel="nofollow">sublime text 2(3)下的Markdown写作</a> 抑或是前段时间写下的<a href="https://link.segmentfault.com/?enc=ly669JratU9si9n7FvIFCA%3D%3D.be4raOZOEi%2F07w%2BBXIAX9SXjoqJ0MjnKkCiUnmYraWYhlXd9R6aEw718wkLHuFK5sUXiiMxLWrOJkOm5V8iN%2FQ%3D%3D" rel="nofollow">追寻高效工作的一路折腾㈡</a></p>
<h4><strong><a href="https://link.segmentfault.com/?enc=UI33IrEE%2Fn27Qdr78X9Xmw%3D%3D.JUYWe5khkWT82oNJwwdyXf5i61q1im22fEuFm3M6BsuXwr0I6P%2FPB9nDCHDL1cEp" rel="nofollow">SideBarFolders</a></strong></h4>
<p>打开的文件夹都太多了? 来用这个来管理文件夹,世界原来也可以这么美好。</p>
<p><img src="/img/remote/1460000007394289?w=1954&h=672" alt="SideBarFolders" title="SideBarFolders"></p>
<h4><strong><a href="https://link.segmentfault.com/?enc=HsvHojwE3jGiznTO7likhA%3D%3D.%2FcGiHvP1YkQwQ4TbuIlSPHZbX9epJl2kNsgk7oi%2FwEM3Rrd%2FNDLEso4xN6I3but%2B" rel="nofollow">Sublime Terminal</a></strong></h4>
<p>这个插件可以让你在Sublime中直接使用终端打开你的项目文件夹,并支持使用快捷键。</p>
<h4><strong><a href="https://link.segmentfault.com/?enc=Zm9C%2FADJ1%2BMojMzhzvCmDg%3D%3D.8kHFeb1sS8hlOD9iqLviOu74gyoHcEXbShDhfsLzLWT2aKP46%2FKTX%2BYs8zCIrw9o" rel="nofollow">ColorPicker</a></strong></h4>
<p>通常,如果你想使用一个颜色选择器则可能打开 Photoshop 或 GIMP。而在 Sublime Text 中,你可以使用内置的颜色选择器。安装完成后,只要按下Ctrl / Cmd + Shift + C 快捷键。</p>
<h4><strong><a href="https://link.segmentfault.com/?enc=0l%2B1Cc7WdSlZOOSKjd%2BI6g%3D%3D.n4izJaen2ZBEkR3kGTppp%2FYqbIy5EQ1MbYeJElKrawnXQGoN7TNd55XmlvTif1pf" rel="nofollow">SublimeREPL</a></strong></h4>
<p>这可能是对程序员很有用的插件。SublimeREPL 允许你在 Sublime Text 中运行各种语言(NodeJS , Python,Ruby, Scala 和 Haskell 等等)。</p>
<h4><strong><a href="https://link.segmentfault.com/?enc=s0E7qt7Y5hJfO7t18zQRhw%3D%3D.eCe%2FINJqqMDDaBhft67H36iaQOip27sZE4jUug78fSNBJ5bT5nHR7vJZASPLJIDG" rel="nofollow">Ctags插件</a></strong></h4>
<p>有童鞋抱怨Sublime Text不能支持函数的跳转(比如像Eclipse那样,按住Control点击该方法或者对象,即可跳转到定义的地方; Alt+←即可回到原处)。其实Sublime Text也可以借助插件实现之(当然,有些情况下:Can not find defination)毕竟这个也是借助正则来匹配完成的。因此这个也就要求代码很规范。这个插件相对来讲会有些麻烦,具体的可以参见:<a href="https://link.segmentfault.com/?enc=mQuPtgmzNqH34gsmjqwUkQ%3D%3D.043BK8iJmLXbkfT58DQ1%2Fl5C3KjZUmrbVBJ135Mt1kwyJk6CDcoikDx%2FshNpwzdv%2BtI0AWC2aRNE054%2BAXlDpg%3D%3D" rel="nofollow">Sublime Text ctags 的配置</a>。</p>
<h4><strong><a href="https://link.segmentfault.com/?enc=EXKOKR0bR6pfcR6zQAv4ew%3D%3D.j0UTyvm9CsnF49wG9egYQm3LX6AtrsAi6QIvfKJCT79r0wHu7SuBOf4pDsOi3Cvx" rel="nofollow">SublimeLinter插件</a></strong></h4>
<p>SublimeLinter 是前端编码利器——<a href="https://link.segmentfault.com/?enc=7ruuV5tQKAC8hCKLH1183w%3D%3D.bmER%2FIL6vDsbOWSqmP06ggHH4hrbH8WiHoePvmukJDqq7XjmrKXDw3a10T9U7SixAxHqObz7RlX8pM4QdcMI%2FetY916qNFu4ZGUisIcKThkGsUQ6tAUHlaEGfclsZqPh" rel="nofollow"><strong>Sublime Text</strong></a> 的一款插件,用于高亮提示用户编写的代码中存在的不规范和错误的写法,支持 JavaScript、CSS、HTML、Java、PHP、Python、Ruby 等十多种开发语言。这篇文章介绍如何在 Windows 中配置 SublimeLinter 进行 JS & CSS 校验。</p>
<p>比如写例如像lua这样的弱语言脚本代码,有这个可以规避掉很多不该有的低级错误吧?当然这也需要你SublimeLinter安装完毕之后再安装一个<code>SublimeLinter-lua</code>即可。具体的使用可以参见:<a href="https://link.segmentfault.com/?enc=fVc%2FjBMuKo0CHPlIbFkPAg%3D%3D.UQgybzM5En3PAZwzBDD%2BpFlTrcPQDJDC7VKUAkkePfmfeRPlGo9TiopP21f7BnBfxc8cwqQaBVU4KWtHR%2FmuB8mRr%2Bmur6KryR8qOfQrgi1K%2BbEWjudLBG0WPQAhleU5" rel="nofollow">借助 SublimeLinter 编写高质量的 JavaScript & CSS 代码</a></p>
<h4><a href="https://link.segmentfault.com/?enc=TAa7mjRrOBRwtQfPdFwuvQ%3D%3D.WsqYRSv6SZFJd1WF1T1lLR%2B%2B%2FdNFr2GRF5aFWCaLhZrvkHF44qImSzrcCs7M9NO0EQr%2BHG6CI%2FnCN6oHlufKiA%3D%3D" rel="nofollow">SideBarEnhancements插件</a></h4>
<p>SideBarEnhancements是一款很实用的右键菜单增强插件;在安装该插件前,在Sublime Text左侧FOLDERS栏中点击右键,只有寥寥几个简单的功能;安装了就相当于给其丰了大胸一般。</p>
<p>更强大的是,该插件还能让我们自定义快捷键呼出某个浏览器以预览页面!这样就不用到项目目录下寻找和拖动到特定浏览器中预览了。</p>
<p>安装此插件后,点击菜单栏的 _preferences->package setting->side bar->Key Building-User_,键入以下代码:</p>
<pre><code class="python">[
{ "keys": ["ctrl+shift+c"], "command": "copy_path" },
//chrome
{ "keys": ["f2"], "command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "C:\\Users\\jeffj\\AppData\\Local\\Google\\Chrome\\Application\\chrome.exe",
"extensions":".*"
}
}
]</code></pre>
<p>这里设置按Ctrl+Shift+C复制文件路径,按F2即可在Chrome浏览器预览效果(如果需要的话,也可以根据自己的需要为Firefox,Safari,IE,Opera等加上),当然你也可以自己定义喜欢的快捷键,最后注意代码中的浏览器路径要以自己电脑里的文件路径为准。</p>
<h4><strong><a href="https://link.segmentfault.com/?enc=qXXL2YH2danx6peQd8RQJQ%3D%3D.aFPHeAOMiQ1xovs7gprenpxmh34TQOaDuG%2F1NIMtpXaTK230RvCxqa4QNhwQ5vtyxZkCClrCCrEOVf%2Bq74QCMg%3D%3D" rel="nofollow">HTML-CSS-JS Prettify</a></strong></h4>
<p>一款集成了格式化(美化)html、css、js三种文件类型的插件,即便html,js写在PHP文件之内。插件依赖于nodejs,因此需要事先安装nodejs,然后才可以正常运行。插件安装完成后,快捷键ctrl+shift+H完成当前文件的美化操作。插件对html、css文件的美化不是非常满意,但还可以,后面将说明如何修改css美化脚本。本人用起来超级爽的,鉴于篇幅,就不赘述,可以参见<a href="https://link.segmentfault.com/?enc=i9nsKnG31mHzroXZtyBkLw%3D%3D.WcYQYz5IR51rbE6A%2FWjIlvKW7u9y5mnR0Wh1Lo0w%2BjfWbvGhAwNQC1USzxiVciATgP6%2B5C7hMNY%2BaFyEAGcxXOAhC0w91OH1y04kEX84JKjBF%2FL4oovcfm%2Flw4mBvKZK" rel="nofollow">这篇</a>介绍。</p>
<h4><strong><a href="https://link.segmentfault.com/?enc=9r1sMIAsIVvg5rgMgzMwLg%3D%3D.7zIiZM8B%2BLgH7vfHJBjIr9zPBRUCgNKj4HqILVBsDPrp6ZesYML1cA9%2FOW9C9kVn" rel="nofollow">CSScomb CSS属性排序</a>:</strong></h4>
<p>有时候看看自己写的CSS文件,会不会觉得属性很乱查找不易维护难?CSScomb可以按照一定的CSS属性排序规则,将杂乱无章的CSS属性进行重新排序。选中要排序的CSS代码,按Ctrl+Shift+C,即可对CSS属性重新排序了,代码从此简洁有序易维护,如果不款选代码则插件将排序文件中所有的CSS属性。当然,可以自己自定义CSS属性排序规则,打开插件目录里的CSScomb.sublime-settings文件,更改里面的CSS属性顺序就行了。因为这个插件使用PHP写的,要使他工作需要在环境变量中添加PHP的路径,具体请看github上的说明。</p>
<h4><strong><a href="https://link.segmentfault.com/?enc=TtvId0Nk%2F6BjbDEWW48qUA%3D%3D.AmIc489q6ccUGZWMwuj6B4U84t9YoYTbd8FkfAlRKjwy%2BE0vO%2F7ukstxJGwmmZ77" rel="nofollow">SublimeTmpl 快速生成文件模板</a></strong></h4>
<p>一直都很奇怪为什么sublime text 3没有新建文件模板的功能,像html头部的DTD声明每次都要复制粘贴。用SublimeTmpl这款插件终于可以解脱了,SublimeTmpl能新建html、css、javascript、php、python、ruby六种类型的文件模板,所有的文件模板都在插件目录的templates文件夹里,可以自定义编辑文件模板。</p>
<p>SublimeTmpl默认的快捷键:</p>
<pre><code>ctrl+alt+h html
ctrl+alt+j javascript
ctrl+alt+c css
ctrl+alt+p php
ctrl+alt+r ruby
ctrl+alt+shift+p python</code></pre>
<p>如果想要新建其他类型的文件模板的话,先自定义文件模板方在templates文件夹里,再分别打开Default (Windows).sublime-keymap、Default.sublime-commands、Main.sublime-menu、SublimeTmpl.sublime-settings这四个文件照着里面的格式自定义想要新建的类型,这里就详细介绍了,请各位自己折腾哈~</p>
<h4><strong><a href="https://link.segmentfault.com/?enc=kUm2NCkx63zrFRK9dFMeSQ%3D%3D.vExIdJPe42FYxxTN3%2FEjVTuDkfA2Fkt4v3JjTOViyqlsVTr%2F9%2BydqjiIZ1eowqFhcFiwAWwGzNuLR0mE1uIruXDMRABo7OANi2Wa796miZ0%3D" rel="nofollow">Javascript-API-Completions</a></strong></h4>
<p>支持Javascript、JQuery、Twitter Bootstrap框架、HTML5标签属性提示的插件,是少数支持sublime text 3的后缀提示的插件,HTML5标签提示sublime text3自带,不过JQuery提示还是很有用处的,也可设置要提示的语言。<br><img src="/img/remote/1460000007393658" alt="sublime-jq-plugin" title="sublime-jq-plugin"></p>
<h4><strong>SFTP:快速编辑远程服务器文件</strong></h4>
<p>在Win下用<code>Xftp</code> 和 <code>WinScp</code>,被这种需要切换点击or F5刷新的手动操作蛋疼到无语;故此一遇见这<code>SFTP</code>,顿觉这世界都美好了许多。当然Sublime下面也有些其他同步插件,比如<code>FtpSnyc</code>,但是配置起来的错误提示一点都不人性化,就毫不留情的舍弃了。Sublime下有<code>SFTP</code>,只要<code>Ctrl+S</code>即可同步本地到服务器,妥妥的爽歪歪有么有?如何配置,请参见<a href="https://link.segmentfault.com/?enc=GqDnfm40o%2BTX92zEyWN0%2Bg%3D%3D.NnNRr2ACwETpJfFTw5%2F2rmsbXW6i5gQOpwWFufhwrRs5WxaDVWTIsmY7PwbbQrup" rel="nofollow">在 Sublime Text中使用 SFTP 插件快速编辑远程服务器文件</a>;如欲使用<code>FtpSync</code>可参见<a href="https://link.segmentfault.com/?enc=VkEs9zYFw64Q3CnpvuqyFg%3D%3D.JKT1nMlXLyB8QannKQhXgD1tPCWVxpR4GwoY2fWIfk%2BQBSISaGOagiDVmYBjpZEM1D6aTnEGmdrlfJ2sCPBxSU8EKoS71ej0kBzfRB8dS2c%3D" rel="nofollow">Sublime使用及FtpSync远程同步</a>;大道至简,因简而悦;开心垒码,值得折腾。</p>
<h4>
<strong><a href="https://link.segmentfault.com/?enc=GEkhyI13uJMEO8hn0XJuZQ%3D%3D.zx2hyAAqjcAsAt6Ru9AxlLaVesNR4r6FqvqjvsIHqp0%3D" rel="nofollow">WakaTime</a></strong> —— 记录你的Code时间</h4>
<p><a href="https://link.segmentfault.com/?enc=lytsd448wNLwwh4K3xe6jw%3D%3D.Yty3ktDjQVATC01kntvMutui9F2Zyar%2Fn98pIKTxF6c%3D" rel="nofollow">WakaTime</a>可以做到精确地统计到你花在某个项目上的时间;WakaTime针对不同的IDE,拥有不同的插件,在Sublime上安装着<a href="https://link.segmentfault.com/?enc=AwUI2U1Inx5m8aYXxjjTlQ%3D%3D.g18Wl6BIUqAGHnWiFRAfWdIb9lr1ztsNvyZWiJOfOpeKkMCXo7vuos%2FrgviYBg6o" rel="nofollow">插件</a>,就能统计到我使用Sublime进行的所有项目的行为。可以高效管理和知晓自己code时间;并且,统计完善, 适合发朋友圈装逼(如果你喜欢的话)~</p>
<blockquote>Waka的基本设计和rescuetime类似。每个人注册完将获取一个key,装一个客户端,把key输进去(登陆是同一个道理),然后它就把本地的所有行为带个key扔给服务器来统计,一段时间之后给你个报表。不过Waka做的真的很精准,精确到每一个文件用了多少秒,每一种语言用了多少时间。</blockquote>
<p><img src="/img/bVrZuT" alt="82950-b9d7380d0608ecb1.png" title="82950-b9d7380d0608ecb1.png"></p>
<p>安装和使用都很简单,请参见<a href="https://link.segmentfault.com/?enc=S5dE41cTnifJ5kKVIguQ8A%3D%3D.ysaDLiaYhlh1yzFg9brNbpcc9L56At6NmIXNtVWCCiUqYs32llIjHMc4MwdbU8Gw" rel="nofollow">这里</a>。另外一篇比较详细的文章<a href="https://link.segmentfault.com/?enc=7KB0Si31VUw9Jt9l43e36w%3D%3D.hPFcMa0FfikS0FFjWD%2FGjHvk%2BaP6WBz%2B7jGMpcg2UqHvhdWiKptdCg7Tes7Y4TCm" rel="nofollow">时间都去哪了?用RescueTime和WakaTime来记录你的时间</a>,对RescueTime和WakaTime有一个更为详细的叙述,可以一读。</p>
<p>剩下些许其他的可以按需安装的插件,比如:</p>
<ul>
<li>
<strong>ConvertToUTF8</strong>:支持 GBK, BIG5, EUC-KR, EUC-JP, Shift_JIS 等编码的插件</li>
<li>
<strong>Bracket Highlighter</strong>:用于匹配括号,引号和html标签。对于很长的代码很有用。安装好之后,不需要设置插件会自动生效</li>
<li>
<strong>DocBlockr</strong>:可以自动生成PHPDoc风格的注释。它支持的语言有Javascript, PHP, ActionScript, CoffeeScript, Java, Objective C, C, C++</li>
<li>
<strong>Emmet(Zen Coding)</strong>:快速生成HTML代码段的插件,强大到无与伦比:可以超快速编写HTML/CSS/JS,当然这个插件还支持多种编译环境,如常见的:Eclipse/Aptana、Coda、Notepad++、Adobe Dreamweaver、TextMate等,web开发必备。</li>
<li>
<strong>jsFormat</strong>:格式化js代码,懂者自懂;强迫症Coder必备!默认快捷键Ctrl+Alt+F。</li>
<li>
<strong>phpFormat</strong>:格式化php代码,懂者自懂;强迫症Coder必备!</li>
<li>
<strong>CSS Compact Expand CSS 属性展开收缩</strong>:写CSS的盆友,喜欢将其写多行还是一行(个人喜欢将其格式化为多行)?如果阅读别人的代码不符合自己的习惯,可以用CSS Compact Expand这个插件将CSS格式化一下,按 Ctrl+Alt+[ 收缩CSS代码为一行显示,按 Ctrl+Alt+] 展开CSS代码为多行显示;强迫症Coder必备!。</li>
<li>
<strong>Autoprefixer</strong>:这是一款CSS3私有前缀自动补全插件;该插件使用CanIUse资料库(当然,SublimeText自然也有CanIUse这个插件咯),能精准判断哪些属性需要什么前缀,与CssComb插件一样,该插件也需要系统已安装Node.js环境;使用方法:在输入CSS3属性后(冒号前)按Tab键即可。</li>
<li>
<strong>YUI Compressor</strong>:压缩JS和CSS文件,按F7键后,若压缩当前文件(demo.js),则压缩后的文件(demo.min.js)保存在该文件的同级目录,需要安装java的JDK。使用方法:<a href="https://link.segmentfault.com/?enc=fr%2Bv9r1giOX%2BWkt%2Ff6ohVQ%3D%3D.EsbR6IStAr%2FtVAV%2FXc7zQjCeMcC%2BjSUXsOMFJmgZOgVKnSAGtu4vImnlnfEu%2FonFhZADpGQ%2F8DRJxZgbQcjzSnd9vTh3%2Fn6v31dMSdoCgRU%3D" rel="nofollow">YUI Compressor</a>
</li>
<li>
<strong>ClickableURLs</strong>:可点击的URL,使用小插件<a href="https://link.segmentfault.com/?enc=23z4KV%2BrmaR5HWjEQQisuw%3D%3D.UAMFu1XQU8ghSKCIcNrG%2BSJBjDrgc2RXZambono6NfGmlzVoIHBgBsX7ShUMG5LeADFqKcM%2FRg6qwdKwiR3oVQ%3D%3D" rel="nofollow">ClickableURLs</a>可以让文件中的URL能够点击。</li>
<li>
<strong>终极王道</strong>:自己编写专用的Sublime Text插件。虽然说各个方面比如移动端,Web前段,服务器端,非Coder的Writer所需要的方便已经被集成在了不同的插件中。但譬如,需要快捷打开PC端的某个模拟器,便捷的进行某些校验,只要你想的到的基本都可以将其在插件内,以快捷键处理之。至于如何编写SublimeText插件,请参看这里<a href="https://link.segmentfault.com/?enc=BZZz%2BSW0ZhqG5fgZwKNSOA%3D%3D.dL3dTDB9r%2FG9gYBqKJvY3xKA%2Bz7iOWsVYKmhkn%2BJtkgh%2BU2lG6xIWnxOJQXB7Bm2CiB0ola7x2jE0LHucKx90xgIu5iY5QVvOX2Pv2ZOXqE%3D" rel="nofollow">编写自己的Sublime Text2 插件</a>
</li>
</ul>
<h2><strong>定制属于自己的快捷键</strong></h2>
<p>首先要会使用SublimeText内置的快捷键:比如 <code>Commond Shift P</code> 打开命令面板:例如打开Package Control安装各种插件;可以可以输入Set(Snytax)来改变使用的语言环境,瞬间切换等等。</p>
<p>设置快捷键。在SublimeText里,打开Preferences -> Key Bindings - User,我设置的快捷键:</p>
<pre><code>[
{ "keys": ["ctrl+f9"], "command": "build" },
{ "keys": ["f10"], "command": "build", "args": {"variant": "Run"} },
{ "keys": ["ctrl+shift+x"], "command": "toggle_comment", "args": { "block": true } },
]</code></pre>
<p>具体可参见这边文章<a href="https://link.segmentfault.com/?enc=j3bUPQ1%2F4R3K74JOehrZGw%3D%3D.GFPemSnVMP26f071Ek7Lt1NxrpXCpogBWsC9bGbyaqj6xx7X4ijT3vioqkyxHXUF33ihKEPsCdWUSrFcMCrJgg%3D%3D" rel="nofollow">Sublime Text3 快捷键汇总及设置快捷键配置环境变量</a></p>
<p>定制属于自己的专属快捷键:比如就拿定制Sublime Text(2/3)编译lua 的快捷键来说:</p>
<ul>
<li>
<p>首先:下安装lua环境(MAC)</p>
<pre><code class="rudix">curl -s https://raw.githubusercontent.com/rudix-mac/rpm/2014.10/rudix.py | sudo python - install rudix
或者:
curl -O https://raw.githubusercontent.com/rudix-mac/rpm/2014.10/rudix.py
sudo python rudix.py install rud</code></pre>
</li>
<li>
<p>安装IED:SublimeText3;完毕后上面选择:Build System--New Build System 输入:</p>
<pre><code>{
"cmd": ["/usr/local/bin/lua", "$file"],
"file_regex": "^(...*?):([0-9]*):?([0-9]*)",
"selector": "source.lua"
} </code></pre>
</li>
</ul>
<p>保存为Lua.sublime-build,然后Tools-Build System上就能选择lua来编译脚本了)</p>
<p>PS:网上找到的大多数都是 "cmd": ["lua", "$file"]可能我是用rudix自动来安装lua的,需要改一下路径。</p>
<p>新建一个xx.lua文件,随便写个语句,选择lua为build system,按一下<code>command+b</code>,就能跑出来了。 如下图所示:</p>
<p><img src="/img/remote/1460000004836700" alt="LuaShortCutSublimeText" title="LuaShortCutSublimeText"></p>
<p>WindowS下面的定制请参看这里 <a href="https://link.segmentfault.com/?enc=gfETSfcurnQdZ6%2BTstOkCA%3D%3D.hEl3PWkrSft9Tyt5Ku3U701Xmw00niQ2aqACfaoOl%2BruGE2KCvhoCNy6huHsnPKT" rel="nofollow">Sublime Text(2/3)编译lua</a>。</p>
<h2>Sublime 不可不知的实用技巧</h2>
<p>---更新2015.05.21 15:50 ShenZhen@nanshan0---</p>
<p>对于这个依赖于插件的强大性感无比开源编辑器;优雅的适用之,就在于合理的使用需要的插件,走一条快准狠的键盘一刀流。这个当然可以自己用python来写,但是一般的需求基本上都已经有人完成,还是不浪费时间自己造轮子了。今儿就再赘述一些使用的经验,让使用她可以更加优雅。</p>
<ol>
<li>Ctrl+O(Command+O)可以实现头文件和源文件之间的快速切换</li>
<li>通过 View -> Side bar 可在左侧显示当前打开的文件列表</li>
<li>ST3虽然不像notepad++可以在sidebar上显示函数列表,但是可通过Ctrl+R查看</li>
<li>通过 Preference -> Key binding user 可根据个人操作习惯自定义快捷键(包括ST3自带的和插件的)</li>
<li>双击可选中光标所在单词,三击可选中光标所在行(等同于<code>Ctrl+L</code>(Command+L));</li>
<li>Ctrl+Shift+T可以打开之前关闭的tab页,这点同chrome是一样的</li>
<li>Ctrl+R定位函数;Ctrl+G定位到行;</li>
<li>
<p>单个文件批量修改:</p>
<ul>
<li>__纯相同的内容__:选中需要修改的内容<code>Alt+F3</code>(Mac下默认的是<code>Ctrl+Command+G</code>) , 或者连续 Ctrl+D(Win) /连续 Command+D(Mac)之后重新写即可,使用<code>Ctrl + U</code>进行回退,使用Esc退出多重编辑。</li>
<li>
<p>__不纯相同却有一定规律可循的内容__:这个就需要借助SublimeText强大正则的支持了。可以使用<code>Ctrl+H</code>(Mac下是<code>Alt+Command+F </code>)调出:<br><img src="/img/remote/1460000004836813" alt="SublimeText" title="SublimeText"><br> 正则表达式是非常强大的文本查找&替换工具,Sublime Text中使用Alt + R切换正则匹配模式的开启/关闭。Sublime Text的使用<a href="https://link.segmentfault.com/?enc=svCFdY7jIdty4SB8TnFL2A%3D%3D.7CmwmUFDL10Xghrxd99uXU8mI8rmeGtaMLMCyTJV1Psy6SgbOTIaY0yju64lQVeohHiehhjUsl4tdld6PTFu2LtotKfk4Jk0kAEZd2C5VQHMsk%2B9zCHeHkRzMp2fBjN3" rel="nofollow">Boost里的Perl正则表达式风格</a>。鉴于篇幅,加之本身就对这个不甚熟悉,这里就不再多啰嗦;以下是一些可以参考的文章:</p>
<ul>
<li><a href="https://link.segmentfault.com/?enc=lLXZlkgWaYxHnooecbDYXA%3D%3D.4W09n%2FEgvgxxha5oaWhlHEowNmGTA9qd6mrPu2%2FU7NzfBc561EZVCowALIKKkz0C" rel="nofollow">开源中国~正则表达式30分钟入门教程</a></li>
<li><a href="https://link.segmentfault.com/?enc=CLM3ZuC8B2xm63pxXCq4iQ%3D%3D.qgfl53euWwHkI2h0oC6GEFzI469QIR6q2iQHtG%2FwWrgW9BJbcHee%2FHizfKdoSiME1wqSANGy69oHoLmEtEGmRjCIjTQ7OnHib%2BQDyEXL5cA%3D" rel="nofollow">59分钟学会正则表达式</a></li>
<li>
<a href="https://link.segmentfault.com/?enc=6rWOFJRI089afuRjafJXSw%3D%3D.vdfL%2FhQG4RA7tjlZZKLFP1oxGDh3AtGz4tknyhXSBx4erF3NWr%2BP3kBg9%2B%2BpGM6kcxBEelROtKUGVYAJFF%2B%2BOg%3D%3D" rel="nofollow">MSDN~正则表达式语法</a>.aspx)</li>
<li><a href="https://link.segmentfault.com/?enc=zvqYlnh1KiWcFRlQmx%2FoyA%3D%3D.nmQ%2BjNlowti74NSjNIuKM1%2FrNza1chD%2FVey3p%2BQ9N9%2FlgD%2BmQWAY8Z1IIW0JjEnj" rel="nofollow">月光博客~常用正则表达式</a></li>
</ul>
</li>
</ul>
</li>
<li>有时我们需要对一片区域的所有行进行同时编辑,<code>Ctrl+Shift+L</code>可以将当前选中区域打散,然后进行同时编辑:<br><img src="/img/remote/1460000004836819" alt="SublimeText" title="SublimeText">
</li>
<li>有打散自然就有合并,<code>Ctrl + J</code>(mac下Command+J)可以把当前选中区域合并为一行:<br><img src="/img/remote/1460000004836821" alt="SublimeText" title="SublimeText">
</li>
<li>
<p>在<code>Ctrl + P</code>(Command+P)匹配到文件后,我们可以进行后续输入以跳转到更精确的位置:</p>
<ul>
<li>@ 符号跳转:输入<code>@symbol</code>跳转到symbol符号所在的位置</li>
<li># 关键字跳转:输入<code>#keyword</code>跳转到keyword所在的位置</li>
<li>: 行号跳转:输入<code>:12</code>跳转到文件的第12行。</li>
</ul>
</li>
<li>
<code>Ctrl + Enter</code>(Mac~Command+Enter)在当前行下面新增一行然后跳至该行;<code>Ctrl + Shift + Enter</code>在当前行上面增加一行并跳至该行。</li>
<li>
<p>Sublime Text的查找有不同的模式:<code>Alt + C</code>切换大小写敏感(Case-sensitive)模式,Alt + W切换整字匹配(Whole matching)模式,除此之外Sublime Text还支持在选中范围内搜索(Search in selection),这个功能没有对应的快捷键,但可以通过以下配置项自动开启。</p>
<pre><code>"auto_find_in_selection": true</code></pre>
<p>这样之后在选中文本的状态下范围内搜索就会自动开启,配合这个功能,局部重命名(Local Renaming)变的非常方便:<br><img src="/img/remote/1460000004836862" alt="SublimeText" title="SublimeText"></p>
</li>
<li>Windows下<code>Ctrl + ←/→</code>进行逐词移动,相应的,<code>Ctrl + Shift + ←/→</code>进行逐词选择。<br><img src="/img/remote/1460000004836865" alt="SublimeText" title="SublimeText"><br>而Mac下的<code>Command+←/→</code>是从一端移动到另一端;相应的,<code>Command + Shift + ←/→</code>是从一端选择到另一端;Mac 下 option 加上左右键可以逐词移动。</li>
<li>Windows下<code>Ctrl + ↑/↓</code>移动当前显示区域,<code>Ctrl + Shift + ↑/↓</code>移动当前行。<br><img src="/img/remote/1460000004836870" alt="SublimeText" title="SublimeText"><br>而Mac下的<code>Command + ↑/↓</code>是从当前行移动到头/尾;相应的,<code>Command + Shift + ↑/↓</code>是从当前行选择到头/尾;</li>
<li>使用<code>Ctrl + N</code>在当前窗口创建一个新标签,<code>Ctrl + W</code>关闭当前标签,<code>Ctrl + Shift + T</code>恢复刚刚关闭的标签。</li>
<li>编辑代码时我们经常会开多个窗口,所以分屏很重要。Windows下:<code>Alt + Shift + 2</code>进行左右分屏,<code>Alt + Shift + 8</code>进行上下分屏,<code>Alt + Shift + 5</code>进行上下左右分屏(即分为四屏)。</li>
<li>Sublime Text基本的手动格式化操作包括:<code>Ctrl + [</code>向左缩进(等同于将一块选中Shift+Tab),Ctrl + ]向右缩进(等同于将一块选中后Tab键),__注解:__ Ctr+[ 和 Ctr+[ 针对一块连续内容使用,无需选中;此外Ctrl + Shift + V可以以当前缩进粘贴代码(非常实用)。</li>
<li>
<del><code>Ctrl+Shift+V</code></del>(好吧,尝试了下Windows下的这个,目测不行,看来须得安装下<a href="https://link.segmentfault.com/?enc=HnN1o5IflocFqwW%2B%2FwVijQ%3D%3D.N1SSazLRoPtodVv%2BRe%2BBFqWAb9cgPjBCKFY7aVPvOio6fT400zJnZ1PPwjup1t3o18TRmH0mkGJ8OX5YbN0t3A%3D%3D" rel="nofollow">Clipboard-history</a>插件~(粘贴板历史记录)才行啊)(Mac下Command+Shift+V),粘贴之时可以调出之前粘贴过的内容(以一个轻量弹框显示以供选择),哇哦,才发现这个功能,感觉棒棒哒😄😄。<br><img src="/img/remote/1460000007394290?w=1810&h=694" alt="SublimeText" title="SublimeText">
</li>
<li>Sublime text 删除插件步骤:“Ctrl+Shift+P”—“Remove Package”—“找到需要删除的插件,并点击即可删除”;</li>
<li>作为强大而小巧,性感且快捷的SublimeText,怎么能够允许不时弹个框提醒你购买或者别的,并且顶部有未注册这样破坏美感的存在呢?OK,输入<a href="https://link.segmentfault.com/?enc=0k0tyysNMDBkk3zsnVRR5w%3D%3D.7aNBpyCv5LvkMAzM86n3M%2BCVS4dVQF5%2B1LD87fYLa4RBklFQN1fSybo96e7mO5JG" rel="nofollow">Sublime text 3最新版破解方法</a>中提供的注册码,就妥妥的哦了。</li>
</ol>
<h2><strong>定制属于自己的个性化主题</strong></h2>
<p>SublimeText 她不仅仅是作为性感无比,强大可大编辑器的存在;要知道在如今这么靠脸吃饭的时代,她的美者这方面怎么可能不臻至完美呢?Mac和Windows都默认十多种不同风格的主题,想必会有您喜欢😍的。即便没有也没关系,我们可以自己定制自己喜欢的风格主题。<a href="https://link.segmentfault.com/?enc=nq4UIJTob91ryftXNKCVNQ%3D%3D.AFJlhiYOPz%2B8WGk22eMpvqycUdr9wYY6Wyf9Fxl8OJFhL25UdoF%2BBsEmyRirppxo7xsK3wJiqPpTw4zXzG%2FxnQ%3D%3D" rel="nofollow">在线制作专属Sublime Text主题</a>。这个网址可以轻松按照自己的意愿制作喜欢的主题。完毕之后将生成的xx.sublime.theme文件,点开Preferences -> Browsr Packages这个,放在这个直属目录之下,即可在Theme处选择这个主题了,亲测没有问题。</p>
<p>后记:作为如此便捷的她(Sublime Text3),值得分享肯定不止这些,在Coding and Writing路上,要继续去发现和发扬她的美,未完待续...</p>
<p>--写于2015.04.17 22:49 ShenZhen@nanshan---</p>
<h2>Sublime锦上添花些许设置</h2>
<p>---更新2015.08.31 11:59 ShenZhen@nanshan---</p>
<h3><strong>Sublime Text内运行javascript(ES6)</strong></h3>
<h4>首先安装 <a href="https://link.segmentfault.com/?enc=R4RbaT%2BarHujdI62AIVCKA%3D%3D.efaJpNfqvatFo%2BeKrf8oFViSB1TtZqISi43WW5kyIE4%3D" rel="nofollow">nodejs</a>
</h4>
<p>当然你可以使用其它诸如<a href="https://link.segmentfault.com/?enc=B8wXN1kFf4o9JDLSAPX4NA%3D%3D.KZvT87v01GJiUi6yEAWmfuoPnFlfaoy%2BTIRJyNxLcQav8yVVKS1jsZvl36tN%2F1%2BW" rel="nofollow">jsc</a>之类的环境来运行js, 本文使用的是<a href="https://link.segmentfault.com/?enc=09SbZTwlEm3kps7TVEsnfw%3D%3D.uI5DiYvccEz57kGG78x8SKbNnNlYqqatgiDBd4AYzQw%3D" rel="nofollow">nodejs</a>. 首先确保你的电脑已经安装好nodejs, 并已将其添加到环境变量中 (一般安装时自动添加或者询问是否添加)</p>
<h4>添加 <a href="https://link.segmentfault.com/?enc=ZDswJPY1ipPdk%2FWVprwg5w%3D%3D.d75Byc9AAExnZtwMulxyutuXMvqM%2F6V%2FF0emeY%2Bw4LWC7KQiQXh3tdFzUMYVRaRruEJk0nG8diX%2B8Fw9euMaeIJwZqwEm0JZGbtiUfLZYIigQajtZ8rQT9rAzH4MA2Ep1%2B8Yd29UseA9C1TEY7fGX67rIGtxBt6OOD%2FQcmWJmt0%3D" rel="nofollow">build system</a>
</h4>
<p>在sublime text中依次打开 <em>Tools -> Build System -> New Build System...</em> 粘贴以下代码后保存(如Node.sublime-build),然后把Build System设成Automatic</p>
<pre><code>{ "cmd": ["node", "--use-strict", "--harmony", "$file"], "selector": "source.js"}</code></pre>
<h4>附加说明</h4>
<p>在以上的build文件中(Node.sublime-build),node是执行命令,<code>--harmony</code>和<code>--use-strict</code>是执行参数, $file是当前文件名,所以一次build操作实际上相当于在命令行中执行了</p>
<pre><code>node --use-strict --harmony filename</code></pre>
<p><code>--harmony</code>表示启用<a href="https://link.segmentfault.com/?enc=O95itNzUru1W%2Blt6k6sEeA%3D%3D.oeJSVyx4XnN9DhS9%2FhZ2nY7agm%2BKp2yknqfrW%2Fd5TgpHUi8NarWjagliwZqgc40I" rel="nofollow">ES Harmony features</a>, 而这些features目前只能在strict模式下运行,所以需要同时添加use-strict参数(详见<a href="https://link.segmentfault.com/?enc=SPqfUGMh7j1IU1v4ibi9yw%3D%3D.MmldkyhD8yH2GMkQmasHfVaU%2Ftz%2BV9QTFktNq%2FTTNfAXF7DfD0o8y8N3Fv0CKNzBVzrpkWup6vAKXvQuTwXsUNFFwI7FL170ZoFTaTwnhwc%3D" rel="nofollow">what-is-extended-mode</a>)。如果不想启用es6的特性,把build文件更改成以下代码保存即可。</p>
<pre><code>{ "cmd": ["node", "$file"], "selector": "source.js"}</code></pre>
<h4>具体使用</h4>
<p>在sublime test中新建一个test.js文件,然后输入你的测试代码,比如:</p>
<pre><code class="javascripts">for (let i = 0; i < 3; i++) {
console.log('i:', i);
}</code></pre>
<p>使用快捷键 <code>ctrl + b</code>将得到以下执行结果:</p>
<pre><code>i: 0i: 1i: 2[Finished in 0.1s]</code></pre>
<p><strong>温馨注解:</strong></p>
<ol>
<li>文件必须是存在于磁盘中的, 而不是untitled的, 否则sublime无法找到相应的文件.</li>
<li>Nodejs安装目录需要加入path环境变量中,否则Ctrl+B运行 会出现:[WinError 2] 系统找不到指定的文件。</li>
</ol>
<h3><strong>更换Sublime Text程序图标</strong></h3>
<p>不仅主题可以更换,图标也可以。在<a href="https://link.segmentfault.com/?enc=1ttvWi7AYfBUs6F26VGtQg%3D%3D.e0kIS6eKtSR1kC5wsonc4n00JyuHGaGa5h%2BHQTDbyJw%3D" rel="nofollow">Dribbble</a>上有大量重新设计的Sublime Text精美图标。更换方法:</p>
<ol>
<li>下载一个图标,有<code>.icn</code>s格式的最好。如果没有,用iConvert转换之。</li>
<li>终端执行:<code>open /Applications/Sublime\ Text.app/Contents/Resources/</code>
</li>
<li>替换<code>Sublime Text 3.icns</code>或<code>Sublime Text 2.icns</code>文件。<br><img src="http://segmentfault.com/img/bVchAA" alt="Sublime" title="Sublime">
</li>
</ol>
<h3><strong>Sublime 拼写检查</strong></h3>
<p>如果你经常使用SublimeText从事英文创作,那么启用拼写检查就非常有用处了。选择<code>Preferences > Settings – User</code>菜单,添加以下代码:</p>
<pre><code>"spell_check": true, </code></pre>
<h2><strong>写在一路更来的结语</strong></h2>
<p>不得不说的是此篇文章的命名,较之于内容来讲是大了很多。毕竟要优雅使用某个工具,并不是件很容易的事。一边发现学习,一边总结更新,到此已5个月整。然而,对她~SublimeText3三的使用和了解也是仅仅限于一般水平而已。只能说:每个人都工具的使用都怀有不同的态度和追求;但是,__工欲善其事,必先利其器__;此一点总是没错的。因此,在投资自己这里,除学习知识之外,工具的使用大抵就是最应该投资学习的,再次可以是蓝股等等,一如Google工程师@徐宥<a href="https://link.segmentfault.com/?enc=sHRzkkKQBKWk8q%2FmcIMtrQ%3D%3D.p185%2FtsaH7t%2FHVpabmoe7ZaW0kcyp1VQ%2BgwPLi%2FdyePqxLjniHqXjMf5Re4O1uMR%2F4lfcEYJDg20TIg2URnHow%3D%3D" rel="nofollow">工具的强是无敌的</a>所言。</p>
<p>所谓,一个好汉三个帮:欲要优雅使用一个工具,辅助器具是必不可少的。而在于Win下以SublimeText来编程或者写作,譬如__AutoHotKey__,__Listary__等对个人来讲着实已成必备工具(在Mac下,有Alfred在手,可以说是天下我有);其给人带来的方便快捷和意想不到的惊喜,足以可以令其称为Win下小众软件中实用最。当然,像__AutoHotKey__这种在乎于人强,其功能愈发强的工具,其修行之路漫漫,还当上下以求索之(15.09.17更)。</p>
<p>当然,也不能盲目停留在SublimeText这孤傲的世界里。虽性感强大如斯,毕竟也已逝老牌儿范儿了。新的时代总会崛起些新秀,比如Github出品的<code>Atom</code>许有赶超Sublime之势,目测充盈着些许不同的理念;有时间定当去学习下,知乎有话题:<a href="https://link.segmentfault.com/?enc=Gn02P%2FqBjMNgk%2F7zd1liJA%3D%3D.rEM36z5l1qCuQims6bswYh8hXy0vfpZfdI%2BU9dA3Gfy%2B9Owi%2BP8PXb4fu7rJNhRr" rel="nofollow">如何评价 Github 发布的文本编辑器 Atom?</a>,可预先了解下。</p>
<p>最后寄语:<br><strong>工欲善其事,必先利其器!</strong><br><strong>公欲善其事,必先利其器!</strong></p>
<h2>参考文章出处</h2>
<ul>
<li><a href="https://link.segmentfault.com/?enc=b%2BLh2Th6752GaZmsHcN8%2BA%3D%3D.%2F7gBDUslu855VBu3I%2BmAySoFk0nRuCIGXVUdQMirDc2FCNCCu8KmFGNyqUtdD2jGS03rgSN5KWj5K6hyxY3PgdpO2Ns8GTNU3azKb0A%2FgtY%3D" rel="nofollow">Sublime Text 全程指引 by Lucida</a></li>
<li><a href="https://link.segmentfault.com/?enc=obxLzrrZJoQnrahIqG2EgA%3D%3D.2BX15VnwHf7GleMsH%2FoRM5iye04tu5qTBTzXrmxhZ3jkCEc9lQwz2IWgQ4UmpaHr" rel="nofollow">Sublime Text 3能用支持的插件推荐</a></li>
<li><a href="https://link.segmentfault.com/?enc=aCkHWyBG5p%2BCtE%2FsVrfVJg%3D%3D.fWoGK9RoRPGlgBfG%2FLfQMzihnBCydeAyNC8Tu%2BgCzF2WTvFcHixeAYo5DPktBVYV" rel="nofollow">Wakatime 测试工作时间</a></li>
</ul>
<hr>
<p><strong>您可能感兴趣(/有用)的文章:</strong></p>
<ul>
<li><a href="https://link.segmentfault.com/?enc=AaO2YCI3IdgWraSICvUoBQ%3D%3D.0%2FT6x1Lnrba5SLGDghhFO6ZEFtgDLF%2BAfblRv05ZtGA0d31WebWegxAHZC9jp2fEKEVXx72cUQ54W5vNA%2B1JuA%3D%3D" rel="nofollow">那些所倚靠的利器记载</a></li>
<li><a href="https://link.segmentfault.com/?enc=XgUMEGfmvMwaTSBznnQPVw%3D%3D.EJrMuQBgGYiLH3sh0GPvC3yB5PYYn%2BksRbz6DdrrLGKQqQZ9BIVOM%2FkI3kT5KKvekEGg2xXEgMSL%2Fpokg4hhkw%3D%3D" rel="nofollow">Win下最爱效率神器:AutoHotKey</a></li>
<li><a href="https://link.segmentfault.com/?enc=WtRwOwBaGDhdvjK50MBfVg%3D%3D.CbrvfoBRHuLyFxbcNLH7GWLA00wH7UB3hosBJnKEXgbZaqln0GC7ENYCC9JIhbyhtAp%2BZRE3SI4T2eZV5J9UipF7Vjrudmj8KzUezfv7kh8%3D" rel="nofollow">Win下必备神器之Cmder</a></li>
<li><a href="https://link.segmentfault.com/?enc=wUAuSzKZ7aOv5rQInre9NA%3D%3D.cLtSX9SjJKJV7rb2eP8XbFBBjBwfCojoiNP01V9QGV%2BMprAC8IYThCrY0yXC%2FImSJZxe0jkyHZTysIR5IOQVAg%3D%3D" rel="nofollow">新编码神器Atom使用纪要</a></li>
<li><a href="https://link.segmentfault.com/?enc=qDPZ5X7w45PSHZiosSvIfg%3D%3D.X3JYeiXH6fYaHFxQ%2B%2BcHkWJfbDhxvhvOdQ3f9GPc9cEGIjexZzADgl5dgaHooudx" rel="nofollow">sublime text 下的Markdown写作</a></li>
<li><a href="https://link.segmentfault.com/?enc=znnn9POyFoD5t%2Fc9Rs9lyA%3D%3D.ot3wISzrvWwHV8uaE6CgvREz6aS6tOVJ%2F9owcBJAA23YgYp30VnhkfuFDaJUuewhVUme5Xft6GzJ5Aby061%2BRA%3D%3D" rel="nofollow">SublimeText下写作利器之MarkdownEditing</a></li>
<li><a href="https://link.segmentfault.com/?enc=0Oi%2BeGDtMMx2xdSVhyXeRA%3D%3D.AHdXsaihOs%2BpHIbgzR2dJIi%2B1fZNnPq%2FbMD%2Ff0se4QtfN1c6K6Bo0LmZVWPpRxVKI66iKwqby4%2FFZEQe%2BX3JXGiOZM4%2FJa%2FIm2StI7tqQ1o%3D" rel="nofollow">Mac必备软件渐集之ZSH-终极Shell</a></li>
<li><a href="https://link.segmentfault.com/?enc=%2BznwgDqN39iUcU551R0aTw%3D%3D.W13EpG4x9CHescHjEnHjyfBobmYPyGAfSXD9CRPVlbN%2B%2FfK34Rqg8rlindgljary4VA%2FIj5UzyXCQNxW6CXmLA%3D%3D" rel="nofollow">Vimium~让您的Chrome起飞</a></li>
</ul>