利用 Github 所提供的 Github Page 去构建静态的网站已经变得越来越流行，如果还不了解怎么入门，可以阅读我之前的一篇文章「使用Hexo + Next搭建静态博客」。当然构建博客的方法不是只有一种，你也可以尝试其他方法，而本文主要是针对 Hexo 去叙述的。

可能看过「使用 Hexo + Next 搭建静态博客」这篇文章的同学都已经构建好了属于自己的博客了，那么接下来要说的就是关于 NexT 主题中遇到的一些问题和提示。

关于 RSS

很多同学在看到别人的博客时，都会发现有订阅的功能（即 RSS），但无奈官方介绍比较少，所以无从下手。

那么下面将教大家如何去做：

1. 准备
   你需要安装一个 Hexo 插件：

   1	$ npm install --save hexo-generator-feed

2. 配置
   接下来需要在 _config.yml 中配置一下，在 root 目录下的 _config.yml 中添加：

   1 2 3 4

   # Extensions ## Plugins: http://hexo.io/plugins/ plugins: hexo-generate-feed

然后在主题文件夹的 _config.yml 中配置：

1
2
3
4

# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link.
# Set rss to specific value if you have burned your feed already.
rss: /atom.xml

在写这篇文章之前，我已经接触 React 有大半年了。在初步学习 React 之后就正式应用到项目中，当时就想把自己的一些想法写出来分享一下，无奈不太会写文章，再则时间不是很充裕，所以也就搁下了。
本篇文章比较基础，没有深入的分析，大神们轻看。废话就不多说了，那么让我们来进入正题。

简介

首先想要介绍的是 React，看到这篇文章的朋友想必都有一些关于 React 的了解了，但对于刚接触的新人而言，在这就要简要地介绍一下了。然后就是关于使用 React 构建一个简单单页应用（下文用 SPA 代替，Single Page Application）的一些介绍和讲解。

关于 React

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。（更多相关介绍请看这）

特点：

• 仅仅只是 UI
• 虚拟 DOM：最大限度减少与 DOM 的交互（类似于使用 jQuery 操作 DOM）
• 单向数据流：很大程度减少了重复代码的使用

组件化：

• 可组合（Composeable）：一个组件易于和其它组件一起使用，或者嵌套在另一个组件内部。如果一个组件内部创建了另一个组件，那么说父组件拥有（own）它创建的子组件，通过这个特性，一个复杂的UI可以拆分成多个简单的UI组件
• 可重用（Reusable）：每个组件都是具有独立功能的，它可以被使用在多个UI场景
• 可维护（Maintainable）：每个小的组件仅仅包含自身的逻辑，更容易被理解和维护

测试是开发周期中的一个重要组成部分。没有测试的代码被称为：遗留代码。对于我而言，第一次学习 React 和 JavaScript 的时候，感到很有压力。如果你也是刚开始学习 JS/React，并加入他们的社区，那么也可能会有相同的感觉。想到的会是：

• 我应该用哪一个构建工具？
• 哪一个测试框架比较好？
• 我应该学习哪种流模式？
• 我需要用到流吗？

为了解决这些烦恼，我决定写这篇文章。经过几个小时的博客文章阅读，查阅 JS 开发者的源码，还有参加 Florida 的 JSConf，终于让我找到了自己的测试“槽”。开始让我觉得没有经过测试的 React 程序代码是如此的不标准和凌乱。我想活在一个没有这种感觉的世界，但后来想想，这是不对的。

本教程所有的代码都可以在我的 github 仓库中找到。

让我们开始吧！

你能想象网页中没有按钮吗？我打赌你不会。在网页中，拥有按钮并不奇怪，这些看似很小、主要以矩形表现（如导航栏，版权信息）的东西，其实是网页 UI 中基础之一。它们不仅使链接看起来更有分量、吸引人和鲜明，而且他们还能提高跳转率和用户体验，使之更方便和直观。这些 CTA （Call-to-action：行为召唤）能帮你获得更多的潜在客户和促进业务的扩展。

按钮的开发需要注意它的形状、颜色、空间、排版和前景，这些都很重要。前四个主要是依赖于网页的主题，而最后一个则是取决于你需要达成的目标。例如，你可以在用户点击后，等待的时间里在按钮上加入转轮点亮的动画；又或是，加入一些更吸引眼球的动画效果。如此一来，添加动画效果可以使按钮产生的效果最大化。那么，接下来为你介绍这 20 个很棒的按钮代码，它们能使按钮更加丰富，且用户体验超好。

波浪形按钮

作者：Nikolay Talanov

无论你信不信，JavaScript 和 CSS 已经开始重叠，并为 CSS 增加了更多的功能。当我在写 CSS 与 JavaScript 交互中你可能不知道的 5 种方式的时候，读者对于 CSS 与 JavaScript 已经重叠的事感到很惊讶。那么今天，我会着重为你介绍 7 个可以通过 CSS 完成的任务 —— 不使用 JavaScript 或图像处理！

CSS @supports

每个优秀的前端工程师都会在使用某个特性前测试一下，确保是否在浏览器中可以使用。而这类测试通常是由 JavaScript 完成的，当然，也有很多人用 Modernizr（拥有很多很好功能的测试工具）来测试特性。那么现在有一个 CSS 新的 API 可以让你去做特性测试：@supports，下面的例子将简单地教你如何使用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

/* basic usage */
@supports(prop:value) {
  /* more styles */
}

/* real usage */
@supports (display: flex) {
  div { display: flex; }
}

/* testing prefixes too */
@supports (display: -webkit-flex) or
          (display: -moz-flex) or
          (display: flex) {

    section {
      display: -webkit-flex;
      display: -moz-flex;
      display: flex;
      float: none;
    }
}