-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.xml
More file actions
132 lines (132 loc) · 36.8 KB
/
index.xml
File metadata and controls
132 lines (132 loc) · 36.8 KB
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
<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Frank Wang 的编程世界</title><link>http://frankwang0909.github.io/</link><description>Recent content on Frank Wang 的编程世界</description><generator>Hugo</generator><language>zh-CN</language><lastBuildDate>Wed, 02 Aug 2017 21:23:27 +0800</lastBuildDate><atom:link href="http://frankwang0909.github.io/index.xml" rel="self" type="application/rss+xml"/><item><title>在 CentOS 上搭建 WordPress 博客</title><link>http://frankwang0909.github.io/centos_wordpress.html</link><pubDate>Wed, 02 Aug 2017 21:23:27 +0800</pubDate><guid>http://frankwang0909.github.io/centos_wordpress.html</guid><description><p>在资金预算或人力资源有限的情况下， <code>WordPress</code> 仍然是快速地搭建博客或者企业网站的不二选择。</p>
<p>最近，边学边干地使用 <code>WordPres</code>s 给兄弟公司搭建一个简单的官网。代码在本地调试好了。今天学习了如何学在服务器上发布这个程序。</p></description></item><item><title> window 系统的 Node 版本管理工具 nvm-windows</title><link>http://frankwang0909.github.io/nvm_for_window.html</link><pubDate>Thu, 20 Jul 2017 07:54:41 +0800</pubDate><guid>http://frankwang0909.github.io/nvm_for_window.html</guid><description><h2 id="简介">简介:</h2>
<p>nvm-windows 是一款用 Go 语言写的 用于 window 操作系统的 Node 版本管理工具。<a href="https://github.com/coreybutler/nvm-windows">GitHub 主页</a></p>
<h2 id="下载安装">下载安装：</h2>
<p><a href="https://github.com/coreybutler/nvm-windows/releases">下载地址：https://github.com/coreybutler/nvm-windows/releases</a></p>
<h2 id="常用命令">常用命令：</h2>
<p>1.安装指定版本的 Node：</p>
<pre><code>nvm install &lt;version&gt;
</code></pre>
<p>示例：</p>
<pre><code>nvm install 6.2.0
</code></pre>
<p>命令行出现如下内容，表示正在下载安装 6.2.0 版本的 Node.js， 安装好之后，下载并安装对应的包管理工具 npm。</p></description></item><item><title>TypeScript 入门</title><link>http://frankwang0909.github.io/typescript_basic.html</link><pubDate>Sun, 16 Jul 2017 21:43:35 +0800</pubDate><guid>http://frankwang0909.github.io/typescript_basic.html</guid><description><h2 id="1简介">1.简介：</h2>
<p><a href="http://www.typescriptlang.org/">TypeScript</a> 是微软2012年推出的一种编程语言，属于 JavaScript 的<code>超集</code>，可以编译为 JavaScript 执行。它拓展了 JavaScript 的语法，给 JavaScript 添加可选的<code>静态类型</code>和<code>基于类</code>的面向对象编程。</p>
<p>TypeScript文件拓展名为 <code>.ts</code>。</p></description></item><item><title>快速入门 Angular2 核心概念</title><link>http://frankwang0909.github.io/angular2_basic.html</link><pubDate>Sat, 15 Jul 2017 17:13:18 +0800</pubDate><guid>http://frankwang0909.github.io/angular2_basic.html</guid><description><p><img src="http://frankwang0909.github.io/images/2017071501.jpg" alt=""></p>
<h2 id="1components-组件">1.Components 组件</h2>
<p><img src="http://frankwang0909.github.io/images/2017071502.jpg" alt=""></p>
<h3 id="11-组件及示例代码">1.1 组件及示例代码</h3>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-typescript" data-lang="typescript"><span style="display:flex;"><span><span style="color:#75715e">//装饰器
</span></span></span><span style="display:flex;"><span><span style="color:#66d9ef">@Component</span>({
</span></span><span style="display:flex;"><span> <span style="color:#75715e">//元数据
</span></span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">selector</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;hello&#39;</span>,
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> <span style="color:#75715e">//定义组件的模板
</span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">template</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;&lt;p&gt;{{greeting}}&lt;/p&gt;
</span></span></span><span style="display:flex;"><span><span style="color:#e6db74">})
</span></span></span><span style="display:flex;"><span><span style="color:#e6db74">
</span></span></span><span style="display:flex;"><span><span style="color:#e6db74">//组件类
</span></span></span><span style="display:flex;"><span><span style="color:#e6db74">export class HelloComponent {
</span></span></span><span style="display:flex;"><span><span style="color:#e6db74"> private greeting: string;
</span></span></span><span style="display:flex;"><span><span style="color:#e6db74"> constructor() {
</span></span></span><span style="display:flex;"><span><span style="color:#e6db74"> this.greeting = &#39;</span><span style="color:#a6e22e">Hello</span>, <span style="color:#a6e22e">Welcome</span> <span style="color:#a6e22e">to</span> <span style="color:#a6e22e">Angular</span> <span style="color:#ae81ff">2</span><span style="color:#f92672">!</span><span style="color:#960050;background-color:#1e0010">&#39;</span>;
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span>}
</span></span></code></pre></div><p><img src="http://frankwang0909.github.io/images/2017071505.jpg" alt=""></p>
<ol>
<li>装饰器：@Component</li>
</ol>
<p>赋予一个类更丰富的信息,即将<code>元数据</code> 注入到组件类中。</p></description></item><item><title>JavaScript 的 Number 需要注意的一些特性</title><link>http://frankwang0909.github.io/js-number.html</link><pubDate>Sun, 09 Jul 2017 21:45:51 +0800</pubDate><guid>http://frankwang0909.github.io/js-number.html</guid><description><h2 id="一nan">一、NaN：</h2>
<p>1.定义：<code>NaN</code> 是 JavaScript 的一个特殊值，表示“非数字”（Not a Number），主要出现在将字符串解析成数字出错的场合。</p>
<p>2.<code>NaN</code> 不是一种独立的数据类型，而是一种特殊数值，它的数据类型依然属于 <code>number</code> ，使用 <code>typeof</code> 运算符可以看得很清楚。</p></description></item><item><title>撸了Google Cloud，自建了个梯子</title><link>http://frankwang0909.github.io/ss.html</link><pubDate>Sun, 09 Jul 2017 11:37:11 +0800</pubDate><guid>http://frankwang0909.github.io/ss.html</guid><description><p>鉴于最近科学上网变得越来越不方便了，不少之前坚挺的 VPN 都被迫停止服务了，只好自己动手，搭个梯子。网上找找资料，意外发现了<a href="https://cloud.google.com/">谷歌的云服务 (Google Cloud Platform)</a>有免费试用服务（其实亚马逊云也有一年的免费试用）。 新用户注册赠送300刀，一年有效期，完全可以用来搭建个梯子玩玩。</p></description></item><item><title>MySQL学习笔记：修改数据表的常用命令</title><link>http://frankwang0909.github.io/mysql_notes_3.html</link><pubDate>Tue, 27 Jun 2017 22:57:29 +0800</pubDate><guid>http://frankwang0909.github.io/mysql_notes_3.html</guid><description><h2 id="1新增或删除列">1.新增或删除列</h2>
<p>1.1 添加单列</p>
<p>语法：<code>ALTER TABLE tbl_name ADD [COLUMN] col_name col_definition [FIRST | AFTER col_name];</code></p>
<p>指定位置关系的关键字：</p>
<p>1.FIRST：表示在数据表的第一列</p>
<p>2.AFTER: 参数col_name为某个数据列的名称，表示指定在该数据列的后面。</p></description></item><item><title>一个Geek的评论系统Gitment</title><link>http://frankwang0909.github.io/use_gitment_as_comment_system_for_your_blog.html</link><pubDate>Sat, 24 Jun 2017 17:04:42 +0800</pubDate><guid>http://frankwang0909.github.io/use_gitment_as_comment_system_for_your_blog.html</guid><description><p><a href="https://github.com/imsun/gitment">Gitment</a>是一个使用GitHub Issues 搭建的评论系统。本文教你如何使用Gitment作为自己博客的评论系统。</p>
<h2 id="先简单介绍下优缺点">先简单介绍下优缺点：</h2>
<h3 id="1优点">1.优点：</h3>
<p>Gitment支持在前端直接引入，不需要任何后端代码，可以在页面进行登录、查看、评论、点赞等操作，同时有完整的 Markdown / GFM 和代码高亮支持，尤为适合各种基于 GitHub Pages 的静态博客或项目页面。</p></description></item><item><title>Python操作MySQL学习笔记</title><link>http://frankwang0909.github.io/python_mysqldb.html</link><pubDate>Tue, 20 Jun 2017 07:44:01 +0800</pubDate><guid>http://frankwang0909.github.io/python_mysqldb.html</guid><description><h2 id="一应用架构">一、应用架构</h2>
<p>客户端 &ndash;&gt; 业务逻辑层 &ndash;&gt; 数据访问层 &ndash;&gt; 数据库</p>
<h2 id="二-python-db-api">二、 Python DB API</h2>
<p>Python应用程序（包含SQL) &ndash;&gt; Python DB API（访问数据库的统一规范接口MySQLdb） &ndash;&gt; MySQL / Oracle / SQLServer等数据库</p></description></item><item><title>MySQL数据库的基本数据类型、表的操作和记录的操作</title><link>http://frankwang0909.github.io/mysql-basic-2.html</link><pubDate>Thu, 08 Jun 2017 07:32:57 +0800</pubDate><guid>http://frankwang0909.github.io/mysql-basic-2.html</guid><description><h2 id="一mysql的基本数据类型">一、MySQL的基本数据类型：</h2>
<h3 id="1-数值类型">1. 数值类型：</h3>
<p>包括严格数值数据类型(INTEGER、SMALLINT、DECIMAL和NUMERIC)，以及近似数值数据类型(FLOAT、REAL和DOUBLE PRECISION)。</p></description></item><item><title>MySQL入门：语句规范及常用命令</title><link>http://frankwang0909.github.io/mysql-basic.html</link><pubDate>Sat, 03 Jun 2017 22:38:52 +0800</pubDate><guid>http://frankwang0909.github.io/mysql-basic.html</guid><description><h2 id="一mysql语句规范">一、MySQL语句规范：</h2>
<p>1.关键字、函数名全部大写；</p>
<p>2.数据库名、表名、字段名一律小写；</p>
<p>3.SQL语句必须以分号结尾。</p>
<h2 id="二mysql常用命令">二、MySQL常用命令：</h2>
<p>1.显示当前数据库版本</p>
<pre><code>SELECT VERSION();
</code></pre>
<p>2.显示当前时间:</p>
<pre><code>SELECT NOW();
</code></pre>
<p>3.显示当前用户：</p></description></item><item><title>Win7系统MySQL报错ERROR1045及其处理方法</title><link>http://frankwang0909.github.io/mysql-error-1045.html</link><pubDate>Sat, 03 Jun 2017 21:52:09 +0800</pubDate><guid>http://frankwang0909.github.io/mysql-error-1045.html</guid><description><p>最近自学数据库，在<code>Win7</code>系统下使用<code>MySQL</code>遇到了一些报错，做个记录，方便以后查阅。</p>
<p>MySQL官网下载的<code>MySQL 5.5.56</code>的社区版，安装正常。当我在命令行输入<code>mysql -u root -p</code> 出现了报错信息，无法连接数据库。</p></description></item><item><title>两个Safari浏览器不兼容的坑</title><link>http://frankwang0909.github.io/safari-not-support.html</link><pubDate>Thu, 01 Jun 2017 07:35:15 +0800</pubDate><guid>http://frankwang0909.github.io/safari-not-support.html</guid><description><h2 id="一-苹果手机的safari浏览器不兼容--new-date日期转换格式的坑">一、 苹果手机的Safari浏览器不兼容 new Date()日期转换格式的坑</h2>
<p>做Web项目的开发，<code>倒计时</code>是个很常见的需求。我的需求是做一个演唱会门票开售时间的倒计时。</p></description></item><item><title>用border-image+SVG实现切角效果</title><link>http://frankwang0909.github.io/bevel-corners-svg.html</link><pubDate>Sat, 06 May 2017 16:19:48 +0800</pubDate><guid>http://frankwang0909.github.io/bevel-corners-svg.html</guid><description><p>之前写了一篇文章，介绍了<a href="http://frankwang0909.github.io/bevel-corners.html">基于CSS渐变来实现切角效果</a>的方法。今天再来介绍另一种方法，即使用<code>border-image</code>+<code>SVG</code>的方式来实现<code>切角效果</code>。</p>
<h2 id="border-image的工作原理">border-image的工作原理</h2>
<p>给一个元素设置边框，我们会使用<code>border</code>这个属性。<code>border</code>是<code>border-width</code>、<code>border-style</code>、<code>border-color</code>等3个属性的简写形式。</p></description></item><item><title>CSS实现切角效果</title><link>http://frankwang0909.github.io/bevel-corners.html</link><pubDate>Tue, 02 May 2017 22:52:17 +0800</pubDate><guid>http://frankwang0909.github.io/bevel-corners.html</guid><description><p>扁平化设计风格中，很流行斜面切角，即把元素的一个或多个角切成45度的缺口。大多数网页开发者倾向于使用背景图片来实现切角效果。但使用背景图片会增加额外的HTTP请求，增加网页加载的时间，难以修改和维护。实际上，CSS已经足够强大，可以提供纯CSS的解决方案，我们仅用CSS代码就能实现切角效果。</p></description></item><item><title>如何用CSS代码实现网页设计中的菱形图片</title><link>http://frankwang0909.github.io/diamond-picture.html</link><pubDate>Mon, 01 May 2017 22:00:03 +0800</pubDate><guid>http://frankwang0909.github.io/diamond-picture.html</guid><description><!-- raw HTML omitted -->
<!-- raw HTML omitted -->
<p>在网页设计中，我们常常能够看到被裁切成菱形的图片。</p>
<p>传统的实现方式是预先在图像处理软件中把图片裁切好，当然这种方式的可维护性差。</p></description></item><item><title>用CSS创建内容不倾斜的平行四边形</title><link>http://frankwang0909.github.io/parallelograms.html</link><pubDate>Sun, 30 Apr 2017 16:44:06 +0800</pubDate><guid>http://frankwang0909.github.io/parallelograms.html</guid><description><h2 id="1平行四边形">1.平行四边形</h2>
<p>普通的网页元素是矩形的。但有时候，我们需要创建可以传达出一种动感的形状，比如平行四边形。</p>
<p>说到<code>倾斜</code>，我们会想到使用<code>transform</code>属性的<code>skew()</code>方法来对普通的矩形元素进行<code>斜向拉伸</code>。</p></description></item><item><title>用CSS绘制椭圆、半椭圆、四分之一椭圆</title><link>http://frankwang0909.github.io/ellipse-border-radius.html</link><pubDate>Sun, 30 Apr 2017 11:25:58 +0800</pubDate><guid>http://frankwang0909.github.io/ellipse-border-radius.html</guid><description><h2 id="1-border-radius">1. border-radius</h2>
<p><code>border-radius</code> 可以为元素添加圆角边框，比如 按钮。</p>
<!-- raw HTML omitted -->
<h2 id="2-兼容性-ie9以上都很好地能够兼容--border-radius">2. 兼容性： IE9+以上都很好地能够兼容 border-radius</h2>
<h2 id="3-border-radius-绘制圆形">3. border-radius 绘制圆形</h2>
<p>如果我们给一个正方形的元素设置一个足够大的border-radius值（只要大于等于正方形边长的一半）的话，就可以被这个元素变成圆形。
但考虑到元素的高宽可能不是固定的，那么，我们可以设置百分比，这个百分比是基于元素的尺寸大小来解析的。当我们给一个正方形的元素设置border-radius：50%时，我们会得到一个自适应的圆形。</p></description></item><item><title>用CSS实现图片翻转的动画效果</title><link>http://frankwang0909.github.io/css-flip.html</link><pubDate>Sat, 29 Apr 2017 21:24:00 +0800</pubDate><guid>http://frankwang0909.github.io/css-flip.html</guid><description><!-- raw HTML omitted -->
<!-- raw HTML omitted -->
<h2 id="用css实现页面或图片翻转的动画效果">用CSS实现页面或图片翻转的动画效果</h2>
<p>Web开发中常常会有动画的交互效果，以前我们只能用JavaScript来实现，随着浏览器对CSS3新特性的支持度越来越好，很多的特效都可以通过CSS代码来实现。</p></description></item><item><title>CSS预处理器之Less</title><link>http://frankwang0909.github.io/less.html</link><pubDate>Sun, 23 Apr 2017 16:28:38 +0800</pubDate><guid>http://frankwang0909.github.io/less.html</guid><description><h2 id="1css">1.CSS</h2>
<p><code>CSS</code>层叠样式表(Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。</p></description></item><item><title>ES6的块级作用域以及let、const命令</title><link>http://frankwang0909.github.io/es6-let-const.html</link><pubDate>Fri, 07 Apr 2017 20:18:56 +0800</pubDate><guid>http://frankwang0909.github.io/es6-let-const.html</guid><description><h2 id="1-块级作用域">1. 块级作用域</h2>
<p><code>ES5</code> 只有<code>全局作用域</code>和<code>函数作用域</code>，没有<code>块级作用域</code>。</p>
<p>在函数外部声明的变量，都是全局变量，容易导致变量冲突。因此，我们不得不使用<code>立即执行函数</code>来避免全局变量的冲突。另外，在循环内用来计数的变量也会泄露成全局变量。</p></description></item><item><title>JavaScript数组的常用方法总结</title><link>http://frankwang0909.github.io/js-array.html</link><pubDate>Thu, 06 Apr 2017 22:31:32 +0800</pubDate><guid>http://frankwang0909.github.io/js-array.html</guid><description><h2 id="不改变原数组的方法">不改变原数组的方法：</h2>
<p>1.<code>indexOf()</code> 和<code>lastIndexOf()</code></p>
<p>1.1 <code>indexOf()</code> : 返回元素在数组的索引，从<code>0</code>开始。若数组不存在该元素，则返回<code>-1</code>。</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">arr</span> <span style="color:#f92672">=</span> [<span style="color:#ae81ff">1</span>, <span style="color:#ae81ff">2</span>];
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">arr</span>.<span style="color:#a6e22e">indexOf</span>(<span style="color:#ae81ff">1</span>); <span style="color:#75715e">//0
</span></span></span><span style="display:flex;"><span> <span style="color:#a6e22e">arr</span>.<span style="color:#a6e22e">indexOf</span>(<span style="color:#ae81ff">10</span>); <span style="color:#75715e">//-1
</span></span></span></code></pre></div><p>1.2 <code>lastIndexOf()</code>:
返回元素在数组中最后一次出现的索引，如果没有出现则返回-1.</p></description></item><item><title>童鞋，放开那本词汇书</title><link>http://frankwang0909.github.io/throw-away-vocabulary-books.html</link><pubDate>Thu, 06 Apr 2017 20:33:42 +0800</pubDate><guid>http://frankwang0909.github.io/throw-away-vocabulary-books.html</guid><description><h2 id="词汇都是攒出来的">词汇都是攒出来的</h2>
<p>其实，语言学习的本质是相通的。我们不妨先来回顾一下学习汉语（普通话）的过程。有多少人在学习语文的过程中，遇到过要求背诵《新华字典》、《辞海》的语文老师或者家长？我想绝大部分人应该是没有这种经历的。</p></description></item><item><title>JavaScript实现复制内容到剪贴板的功能</title><link>http://frankwang0909.github.io/copy2clipboard.html</link><pubDate>Wed, 05 Apr 2017 20:29:51 +0800</pubDate><guid>http://frankwang0909.github.io/copy2clipboard.html</guid><description><h2 id="1zeroclipboardjs">1.ZeroClipboard.js</h2>
<p>点击按钮实现复制链接或者一段文本到剪贴板，这个小功能想必不少人都见过。GitHub上就有这么一个点击按钮复制仓库地址的功能。如下图所示：</p>
<p><img src="http://frankwang0909.github.io/images/2017040501.jpg" alt=""></p>
<p><code>Github</code>用的是<a href="http://zeroclipboard.org/">ZeroClipboard</a>来实现这一功能。这个库是用一个不可见的Flash来完成剪贴操作的。即将 Flash 做成透明的，以便于我们放在诸如链接、按钮等需要放置的任何地方。这样，用户界面看起来没有变化，当点击链接或按钮时，实际上点击是却是 Flash，从而实现复制操作。具体实现方法，可以参考官方文档http://zeroclipboard.org。</p></description></item><item><title>通过 userAgent 识别移动设备，自动跳转移动端站点</title><link>http://frankwang0909.github.io/useragent.html</link><pubDate>Tue, 04 Apr 2017 21:02:50 +0800</pubDate><guid>http://frankwang0909.github.io/useragent.html</guid><description><p>不少互联网公司的网站都分为PC端和手机端。如果用户用手机访问PC站点，受限于手机网络，很可能会出现加载网页缓慢的情况。
因此，如何识别用户访问网站的设备，并且自动跳转到对应的站点呢？</p></description></item><item><title>快速启动Node服务器，调试本地静态文件代码</title><link>http://frankwang0909.github.io/anywhere-npm.html</link><pubDate>Tue, 04 Apr 2017 17:41:35 +0800</pubDate><guid>http://frankwang0909.github.io/anywhere-npm.html</guid><description><h2 id="如何在移动设备上测试静态文件">如何在移动设备上测试静态文件？</h2>
<p>现在移动端优先的情况下，前端工程师写好静态页面后，通常是需要测试不同的设备上效果，看看有没有兼容性的问题。谷歌浏览器有一个模拟手机的调试功能，一般，我们先用谷歌调试好。但毕竟是模拟的，为了保险起见，还是需要用真机测试的。</p></description></item><item><title>人人都能说英语</title><link>http://frankwang0909.github.io/everybody-can-speak-english.html</link><pubDate>Tue, 04 Apr 2017 15:31:56 +0800</pubDate><guid>http://frankwang0909.github.io/everybody-can-speak-english.html</guid><description><h2 id="1为什么要学习英语">1.为什么要学习英语？</h2>
<h3 id="11真的有必要学习英语吗">1.1真的有必要学习英语吗？</h3>
<p>对于学生而言，英语是一门必修课，不得不学。对于上班族而言，有人因为工作需要而学习英语，比如外企员工、涉外导游、外贸从业者；有人出于兴趣爱好而学习英语，比如想看原版的英美电影、听英文歌，甚至看英文小说。</p></description></item><item><title>用Hugo快速搭建个人静态博客</title><link>http://frankwang0909.github.io/build-blog-with-hugo.html</link><pubDate>Mon, 03 Apr 2017 20:49:23 +0800</pubDate><guid>http://frankwang0909.github.io/build-blog-with-hugo.html</guid><description><p>最近心血来潮，想要重新折腾一番自己的博客。于是，发现了 Hugo 比之前使用的 Jekyll 更好用。本文是个人参照<a href="https://gohugo.io/overview/quickstart/">Hugo官网</a> 搭建个人博客的记录。</p>
<h2 id="step-1-install-hugo-下载安装-hugo">Step 1. Install Hugo 下载、安装 Hugo</h2>
<p>下载地址：<a href="https://github.com/spf13/hugo/releases">https://github.com/spf13/hugo/releases</a>。
根据自己的操作系统，下载对应的安装包。我的操作系统是<code>Win7 64bit</code>， 选择了<code>hugo_0.19_Windows-64bit.zip</code>。</p></description></item><item><title>代码换行导致的inline元素间距bug</title><link>http://frankwang0909.github.io/fix-inline-bug.html</link><pubDate>Wed, 11 Jan 2017 21:48:19 +0800</pubDate><guid>http://frankwang0909.github.io/fix-inline-bug.html</guid><description><h2 id="1-inline-元素">1. inline 元素：</h2>
<p>如果inline元素(span, strong, b, em, i等)代码换行，它们之间会产生我们不希望的间隔。通过设置<code>margin:0</code>或者<code>padding:0</code> , 这个都间隔仍然存在，说明这个间隔并不是margin或者padding。</p></description></item><item><title>JavaScript的正则表达式</title><link>http://frankwang0909.github.io/js-reg.html</link><pubDate>Sun, 18 Dec 2016 21:56:37 +0800</pubDate><guid>http://frankwang0909.github.io/js-reg.html</guid><description><h2 id="1基本概念">1.基本概念</h2>
<p>正则表达式(<code>Regular Expression</code>)是一个字符串，定义了某个规则，按照这种规则来描述、匹配一系列符合条件的字符串。</p>
<h2 id="2通配符">2.通配符</h2>
<p>当前目录下查找文件(linux 命令行)</p></description></item><item><title>推荐几个常用的CDN公共库</title><link>http://frankwang0909.github.io/cdn.html</link><pubDate>Sat, 20 Aug 2016 21:07:46 +0800</pubDate><guid>http://frankwang0909.github.io/cdn.html</guid><description><h2 id="cdn">CDN</h2>
<p>CDN的全称是Content Delivery Network，即内容分发网络。是指一种通过互联网互相连接的电脑网络系统，利用最靠近每位用户的服务器，更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户，来提供高性能、可扩展性及低成本的网络内容传递给用户。</p></description></item><item><title>前端工程师应该具备的SEO基础知识</title><link>http://frankwang0909.github.io/seo.html</link><pubDate>Mon, 01 Aug 2016 21:49:40 +0800</pubDate><guid>http://frankwang0909.github.io/seo.html</guid><description><h2 id="seo-是什么">SEO 是什么？</h2>
<p>SEO 是“Search Engine Optimization”（搜索引擎优化）或“Search Engine Optimizer”（搜索引擎优化服务商）的首字母缩略词。通俗地说，SEO就是通过对网站内部调整优化及站外优化，使网站满足搜索引擎收录排名需求，在搜索引擎中提高关键词排名，从而把精准用户带到网站，获得免费流量，产生直接销售或品牌推广。</p></description></item><item><title> CSS3 动画效果</title><link>http://frankwang0909.github.io/css3_transition.html</link><pubDate>Mon, 11 Jul 2016 21:03:27 +0800</pubDate><guid>http://frankwang0909.github.io/css3_transition.html</guid><description><h2 id="作用">作用</h2>
<p>用来定义样式变化的过渡效果, 在某些情况下（移动端），可以代替JavaScript代码来实现动画效果。</p>
<p><code>transition</code>属性是一个简写属性，用于设置四个过渡属性：</p></description></item><item><title>Markdown 学习笔记</title><link>http://frankwang0909.github.io/markdonw-notes.html</link><pubDate>Sun, 05 Jun 2016 22:05:46 +0800</pubDate><guid>http://frankwang0909.github.io/markdonw-notes.html</guid><description><h2 id="定义">定义：</h2>
<p><a href="https://zh.wikipedia.org/zh-cn/Markdown">维基百科</a>上的介绍：</p>
<p>Markdown 是一种轻量级标记语言，创始人为约翰·格鲁伯（John Gruber）。它允许人们“使用易读易写的纯文本格式编写文档，然后转换成有效的XHTML(或者HTML)文档”。这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。</p></description></item><item><title>Sublime Text 学习笔记</title><link>http://frankwang0909.github.io/sublimetext-notes.html</link><pubDate>Fri, 13 May 2016 00:14:00 +0800</pubDate><guid>http://frankwang0909.github.io/sublimetext-notes.html</guid><description><p>自从把主力代码编辑器改为<a href="https://www.sublimetext.com/">Sublime Text</a>之后，写代码的效率明显高了许多。最近，我开始尝试着给身边的朋友推荐这款编辑器。</p>
<h2 id="一sublime-text-的优点">一、Sublime Text 的优点</h2>
<p>1.跨平台；</p>
<p>2.轻量级，可拓展：有大量插件可由用户自行选择安装(首推<code>Emmet</code>插件)。</p></description></item><item><title>实现Tab切换的几种方式</title><link>http://frankwang0909.github.io/tab.html</link><pubDate>Sun, 08 May 2016 23:36:44 +0800</pubDate><guid>http://frankwang0909.github.io/tab.html</guid><description><p>Tab 切换是网页中常见的组件。适当地使用，可以节省页面空间，在同一个大小的页面中展现更多的内容。Tab 切换的效果千差万别，只需要学会基本的思路，便可变换出各种各样的效果。下面我分别使用了原生js和jQuery来实现四种不同的Tab切换效果。</p></description></item><item><title>实现返回顶部效果的3种方式</title><link>http://frankwang0909.github.io/back-to-top.html</link><pubDate>Fri, 22 Apr 2016 22:56:30 +0800</pubDate><guid>http://frankwang0909.github.io/back-to-top.html</guid><description><p>现在的网页内容比较多，基本上无法在一屏完全显示出来。这个时候，用户需要移动滚动条（滑动鼠标滚轮）来查看全部内容，如果想要返回顶部同样需要移动滚动条。如果页面太长，这样的体验显然不够好。因此，<code>返回顶部</code>的按钮就应运而生了。</p></description></item><item><title>Git学习笔记</title><link>http://frankwang0909.github.io/git-intro.html</link><pubDate>Sun, 03 Apr 2016 22:43:39 +0800</pubDate><guid>http://frankwang0909.github.io/git-intro.html</guid><description><p><code>Git</code>是一款分布式的代码管理工具，方便多人协作时的代码管理。在<code>win7</code>系统中使用Git管理代码有2种主要的方式。</p>
<h2 id="方式一-msysgit">方式一： msysgit</h2>
<h3 id="step-1-下载并安装--msysgit">Step 1: 下载并安装 msysgit</h3>
<p><a href="https://git-for-windows.github.io">msysgit</a> 是Windows版的Git。下载，然后按默认选项安装即可。安装完成后，在开始菜单里找到“ Git ”-&gt;“ Git Bash ”，点击会弹出一个命令行窗口，说明Git安装成功。</p></description></item><item><title>常见的下拉菜单</title><link>http://frankwang0909.github.io/dropdown-menu.html</link><pubDate>Thu, 03 Mar 2016 23:55:37 +0800</pubDate><guid>http://frankwang0909.github.io/dropdown-menu.html</guid><description><h2 id="html结构">HTML结构</h2>
<p>网页中导航栏是一个很常见的组件。通常，我们使用无序列表来制作导航栏。比如</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-html" data-lang="html"><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;nav&#34;</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">ul</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;navMenu&#34;</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">li</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;&#34;</span>&gt;首页&lt;/<span style="color:#f92672">a</span>&gt;&lt;/<span style="color:#f92672">li</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">li</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;&#34;</span>&gt;跟团游&lt;/<span style="color:#f92672">a</span>&gt;&lt;/<span style="color:#f92672">li</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">li</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;&#34;</span>&gt;自助游&lt;/<span style="color:#f92672">a</span>&gt;&lt;/<span style="color:#f92672">li</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">li</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;&#34;</span>&gt;游轮&lt;/<span style="color:#f92672">a</span>&gt;&lt;/<span style="color:#f92672">li</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">li</span>&gt;&lt;<span style="color:#f92672">a</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;&#34;</span>&gt;自驾&lt;/<span style="color:#f92672">a</span>&gt;&lt;/<span style="color:#f92672">li</span>&gt;
</span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">ul</span>&gt;
</span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">div</span>&gt;
</span></span></code></pre></div><p>有些导航栏有下拉的二级菜单，那么我们在相应的位置上再加上列表构成二级菜单，比如</p></description></item></channel></rss>