-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathatom.xml
162 lines (108 loc) · 16.7 KB
/
atom.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>XINCONAN的博客</title>
<subtitle>这个家伙很懒</subtitle>
<link href="/atom.xml" rel="self"/>
<link href="https://xinconan.github.io/"/>
<updated>2017-06-23T01:40:04.529Z</updated>
<id>https://xinconan.github.io/</id>
<author>
<name>XINCONAN</name>
</author>
<generator uri="http://hexo.io/">Hexo</generator>
<entry>
<title>pxtorem在webpack中出现的问题</title>
<link href="https://xinconan.github.io/2017/06/22/pxtorem%E5%9C%A8webpack%E4%B8%AD%E5%87%BA%E7%8E%B0%E7%9A%84%E9%97%AE%E9%A2%98/"/>
<id>https://xinconan.github.io/2017/06/22/pxtorem在webpack中出现的问题/</id>
<published>2017-06-22T03:01:16.000Z</published>
<updated>2017-06-23T01:40:04.529Z</updated>
<content type="html"><![CDATA[<p>最近在使用<a href="https://mobile.ant.design" target="_blank" rel="external">antd-mobile</a>开发新项目，使用了它提供的<a href="https://github.com/ant-design/ant-design-mobile/wiki/antd-mobile-0.8-%E4%BB%A5%E4%B8%8A%E7%89%88%E6%9C%AC%E3%80%8C%E9%AB%98%E6%B8%85%E3%80%8D%E6%96%B9%E6%A1%88%E8%AE%BE%E7%BD%AE" target="_blank" rel="external">高清方案</a>。按照其设计规范，开发过程中使用<code>px</code>为css单位，build根据<code>1rem=100px</code>(dpr=2)换算，所以用到了<a href="https://github.com/cuth/postcss-pxtorem" target="_blank" rel="external">postcss-pxtorem</a>。</p>
<p>以下是项目中webpack.config.js的主要配置：<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line">loaders: [</div><div class="line">{</div><div class="line"> <span class="attr">test</span>: <span class="regexp">/\.scss$/</span>,</div><div class="line"> <span class="attr">loader</span>: ExtractTextPlugin.extract(<span class="string">'style-loader'</span>, <span class="string">'css-loader?sourceMap!sass-loader!postcss'</span>)</div><div class="line"> }],</div><div class="line"><span class="attr">postcss</span>: [</div><div class="line"> autoprefixer({<span class="attr">browsers</span>: [<span class="string">'last 5 versions'</span>]}),</div><div class="line"> pxtorem({<span class="attr">rootValue</span>: <span class="number">100</span>, <span class="attr">propWhiteList</span>: []})</div><div class="line">]</div></pre></td></tr></table></figure></p>
<p>然后出现了个“诡异”的问题，正常的<code>.scss</code>文件中的<code>px</code>都正常转成<code>rem</code>了，但是当<code>scss</code>文件中import了其他的<code>scss</code>文件，引入的文件中的px不会被转成<code>rem</code>。当时认为是<code>pxtorem</code>插件的问题，还傻傻的去<code>pxtorem</code>的GitHub上提了个<a href="https://github.com/cuth/postcss-pxtorem/issues/38" target="_blank" rel="external">issue</a>。后面在<a href="https://github.com/postcss/postcss-loader" target="_blank" rel="external">postcss-loader</a>的文档上找到了问题：</p>
<blockquote>
<p>You can use it standalone or in conjunction with <code>css-loader</code> (recommended). Use it after <code>css-loader</code> and <code>style-loader</code>, but before other preprocessor loaders like e.g <code>sass|less|stylus-loader</code>, if you use any.</p>
</blockquote>
<p>就是<code>postcss</code>要放到<code>sass-loader</code>之前执行，所以改成下面问题就解决了：<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">{</div><div class="line"> <span class="attr">test</span>: <span class="regexp">/\.scss$/</span>,</div><div class="line"> <span class="attr">loader</span>: ExtractTextPlugin.extract(<span class="string">'style-loader'</span>, <span class="string">'css-loader?sourceMap!postcss!sass-loader'</span>)</div><div class="line"> }</div></pre></td></tr></table></figure></p>
]]></content>
<summary type="html">
<p>最近在使用<a href="https://mobile.ant.design" target="_blank" rel="external">antd-mobile</a>开发新项目，使用了它提供的<a href="https://github.com/ant-desig
</summary>
<category term="前端" scheme="https://xinconan.github.io/tags/%E5%89%8D%E7%AB%AF/"/>
</entry>
<entry>
<title>使用svg创建icon-font图标</title>
<link href="https://xinconan.github.io/2017/03/29/create-icon-font-with-svg/"/>
<id>https://xinconan.github.io/2017/03/29/create-icon-font-with-svg/</id>
<published>2017-03-29T11:43:02.000Z</published>
<updated>2017-03-30T12:19:48.546Z</updated>
<content type="html"><![CDATA[<p>在开发webapp时，经常会用到UI给的小图标，UI一般会提供png和svg两种格式。使用png经常需要考虑不同分辨率和dpr设备的差异，一个图标UI可能会提供两到三种不同大小的图片，这样处理很不方便。直接使用svg的话，svg单独一个文件会耗网络请求，嵌入到html中又会使html变得臃肿，重复利用率不高。使用icon-font可以直接使用class的方式，显示图标，而且和字体一样，可以设置大小和颜色，非常方便。</p>
<p>介绍一种可以直接将svg创建icon-font字体的网站，<a href="https://icomoon.io/app" target="_blank" rel="external">https://icomoon.io/app</a>，如下图所示，直接导入UI给的svg（最好提前用class的方式进行命名，方便后续使用）。<br><img src="https://xinconan.oschina.io/blogimages/icomoon.png" alt="icomoon.io"><br>选择要导出的图标，点击“生成字体”按钮，在该页面可以预览要导出的字体图标及对应的编码。<br><img src="https://xinconan.oschina.io/blogimages/icomoon_preview.png" alt="icomoon.io"><br>点击设置，可以设置字体的名称和class前缀，还可以生成对应的sass、stylus、less文件等。<br><img src="https://xinconan.oschina.io/blogimages/icomoon_config.png" alt="icomoon.io"><br>点击“download”，就可以下载字体，然后进行使用啦。</p>
]]></content>
<summary type="html">
<p>在开发webapp时，经常会用到UI给的小图标，UI一般会提供png和svg两种格式。使用png经常需要考虑不同分辨率和dpr设备的差异，一个图标UI可能会提供两到三种不同大小的图片，这样处理很不方便。直接使用svg的话，svg单独一个文件会耗网络请求，嵌入到html中又会
</summary>
<category term="icon-font" scheme="https://xinconan.github.io/tags/icon-font/"/>
</entry>
<entry>
<title>ng-src图片加载失败怎么办</title>
<link href="https://xinconan.github.io/2017/01/05/if-ngSrc-not-work/"/>
<id>https://xinconan.github.io/2017/01/05/if-ngSrc-not-work/</id>
<published>2017-01-05T10:55:33.000Z</published>
<updated>2017-01-05T12:20:52.915Z</updated>
<content type="html"><![CDATA[<p>在Angular中，加载图片的方法是使用<code>ng-src</code>标签，如：<br><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="tag"><<span class="name">img</span> <span class="attr">ng-src</span>=<span class="string">"{{imgUrl}}"</span>/></span></div></pre></td></tr></table></figure></p>
<p>其中<code>imgUrl</code>为图片地址，如果图片正常能显示，那这么使用一点问题没有，但是，如果图片加载失败了（例如该图片已经不存在，从而出现404错误），在该放图片的地方就会出现一个难看的图片加载失败图标，如果想把这个图标换成你自定义的图片，可以如下这么做：<br><strong>一、自定义指令（推荐）</strong><br><strong>HTML:</strong><br><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="tag"><<span class="name">img</span> <span class="attr">ng-src</span>=<span class="string">"{{imgUrl}}"</span> <span class="attr">err-src</span>=<span class="string">"{{errUrl}}"</span>/></span></div></pre></td></tr></table></figure></p>
<p><strong>JavaScript:</strong><br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> app = angular.module(<span class="string">"MyApp"</span>, []);</div><div class="line"></div><div class="line">app.directive(<span class="string">'errSrc'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">return</span> {</div><div class="line"> <span class="attr">link</span>: <span class="function"><span class="keyword">function</span>(<span class="params">scope, element, attrs</span>) </span>{</div><div class="line"> element.bind(<span class="string">'error'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{</div><div class="line"> <span class="keyword">if</span> (attrs.src != attrs.errSrc) {</div><div class="line"> attrs.$set(‘src‘, attrs.errSrc);</div><div class="line"> }</div><div class="line"> });</div><div class="line"> }</div><div class="line"> }</div><div class="line">});</div></pre></td></tr></table></figure></p>
<p>这样一来，就把错误图标换成了你自己指定的地址<code>errUrl</code>，前提是<code>errUrl</code>这个图片是存在的。</p>
<p><strong>二、使用onerror属性</strong><br><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="tag"><<span class="name">img</span> <span class="attr">ng-src</span>=<span class="string">"{{imgUrl}}"</span> <span class="attr">onerror</span>=<span class="string">"this.src='/img/404.png'"</span> /></span></div></pre></td></tr></table></figure></p>
<p>使用这个方法，只适用于固定地址的图片，不能使用ng-bind的形式。</p>
<h2 id="参考："><a href="#参考：" class="headerlink" title="参考："></a>参考：</h2><blockquote>
<p><a href="http://www.mamicode.com/info-detail-653185.html" target="_blank" rel="external">AngularJS中如果ng-src 图片加载失败怎么办</a></p>
</blockquote>
]]></content>
<summary type="html">
<p>在Angular中，加载图片的方法是使用<code>ng-src</code>标签，如：<br><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</di
</summary>
<category term="angular" scheme="https://xinconan.github.io/tags/angular/"/>
</entry>
<entry>
<title>UC Browser Unsupported JavaScript</title>
<link href="https://xinconan.github.io/2016/12/21/UC-Browser-Unsupported-JavaScript/"/>
<id>https://xinconan.github.io/2016/12/21/UC-Browser-Unsupported-JavaScript/</id>
<published>2016-12-21T03:13:10.000Z</published>
<updated>2016-12-21T05:24:44.340Z</updated>
<content type="html"><![CDATA[<p>本文记录在开发过程中，使用UC Android浏览器遇到的一些问题。<br>不支持的JS方法：<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">console</span>.table();</div></pre></td></tr></table></figure></p>
]]></content>
<summary type="html">
<p>本文记录在开发过程中，使用UC Android浏览器遇到的一些问题。<br>不支持的JS方法：<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="li
</summary>
<category term="UC" scheme="https://xinconan.github.io/tags/UC/"/>
<category term="JavaScript" scheme="https://xinconan.github.io/tags/JavaScript/"/>
</entry>
<entry>
<title>typeerror-cannot-read-property-insertbefore-of-null</title>
<link href="https://xinconan.github.io/2016/10/14/typeerror-cannot-read-property-insertbefore-of-null/"/>
<id>https://xinconan.github.io/2016/10/14/typeerror-cannot-read-property-insertbefore-of-null/</id>
<published>2016-10-14T06:28:43.000Z</published>
<updated>2016-10-25T07:17:15.274Z</updated>
<content type="html"><![CDATA[<p>这两天在使用<code>angular</code>进行开发的时候，出现了如下错误：<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">TypeError</span>: Cannot read property <span class="string">'insertBefore'</span> <span class="keyword">of</span> <span class="literal">null</span></div></pre></td></tr></table></figure></p>
<p>在网上找了一些资料，总结了下，需要在<code>ng-repeat</code>、<code>ng-if</code>等标签外面再加个<code>div</code>标签，<br>加上了就没有报错。如果当前页面没有用到<code>ng-repeat</code>、<code>ng-if</code>之类的标签，就需要从父路由中找了。<br>错误前：<br><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="tag"><<span class="name">div</span> <span class="attr">ng-if</span>=<span class="string">"view.type !== 'ali'"</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span>其他内容<span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">div</span>></span></div></pre></td></tr></table></figure></p>
<p>修改后：<br><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="tag"><<span class="name">div</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">ng-if</span>=<span class="string">"view.type !== 'ali'"</span>></span></div><div class="line"> <span class="tag"><<span class="name">div</span>></span>其他内容<span class="tag"></<span class="name">div</span>></span></div><div class="line"> <span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"></<span class="name">div</span>></span></div></pre></td></tr></table></figure></p>
]]></content>
<summary type="html">
<p>这两天在使用<code>angular</code>进行开发的时候，出现了如下错误：<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1
</summary>
<category term="angular" scheme="https://xinconan.github.io/tags/angular/"/>
</entry>
<entry>
<title>jekyll转hexo</title>
<link href="https://xinconan.github.io/2016/10/09/change-to-hexo/"/>
<id>https://xinconan.github.io/2016/10/09/change-to-hexo/</id>
<published>2016-10-09T10:23:00.000Z</published>
<updated>2016-10-09T10:28:20.744Z</updated>
<content type="html"><![CDATA[<p>之前建的博客是基于<code>Jekyll</code>的，然后也没发过博客。现在试试<code>hexo</code>，以后就用它了。</p>
]]></content>
<summary type="html">
<p>之前建的博客是基于<code>Jekyll</code>的，然后也没发过博客。现在试试<code>hexo</code>，以后就用它了。</p>
</summary>
</entry>
</feed>