site: add edit button for demo and doc, close: #2325

site/theme/static/demo.less

@@ -53,14 +53,24 @@
 .code-box:target .code-box-title {
   background: #fbfbfb;
   box-shadow: 0 -1.2px 0 #e9e9e9;
+
+  .edit-button {
+    display: inline;
+  }
 }
 
-.code-box .code-box-title a,
+.code-box .code-box-title {
-.code-box .code-box-title a:hover {
+  a,
+  a:hover {
     color: #666;
     font-size: 14px;
   }
 
+  .edit-button {
+    display: none;
+  }
+}
+
 .code-box .code-box-demo {
   border-bottom: 1px solid #E9E9E9;
   padding: 42px 20px 50px;

site/theme/template/Content/Article.jsx

@@ -2,6 +2,7 @@ import React, { Children, cloneElement } from 'react';
 import DocumentTitle from 'react-document-title';
 import { getChildren } from 'jsonml.js/lib/utils';
 import { Timeline } from 'antd';
+import EditButton from './EditButton';
 import * as utils from '../utils';
 
 export default class Article extends React.Component {
@@ -54,7 +55,7 @@ export default class Article extends React.Component {
     const content = props.content;
 
     const { meta, description } = content;
-    const { title, subtitle, chinese, english } = meta;
+    const { title, subtitle, chinese, english, filename } = meta;
 
     return (
       <DocumentTitle title={`${title || chinese || english} - Ant Design`}>
@@ -65,6 +66,7 @@ export default class Article extends React.Component {
               (!subtitle && !chinese) ? null :
                 <span className="subtitle">{subtitle || chinese}</span>
             }
+            <EditButton title="在 Github 上编辑此页！" filename={filename} />
           </h1>
           {
             !description ? null :

site/theme/template/Content/ComponentDoc.jsx

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import { Row, Col, Icon, Affix } from 'antd';
 import { getChildren } from 'jsonml.js/lib/utils';
 import Demo from './Demo';
+import EditButton from './EditButton';
 
 export default class ComponentDoc extends React.Component {
   static contextTypes = {
@@ -71,7 +72,7 @@ export default class ComponentDoc extends React.Component {
       );
     });
 
-    const { title, subtitle, chinese, english } = meta;
+    const { title, subtitle, chinese, english, filename } = meta;
     return (
       <DocumentTitle title={`${subtitle || chinese || ''} ${title || english} - Ant Design`}>
         <article>
@@ -87,6 +88,7 @@ export default class ComponentDoc extends React.Component {
                 (!subtitle && !chinese) ? null :
                   <span className="subtitle">{subtitle || chinese}</span>
               }
+              <EditButton title="在 Github 上编辑此页！" filename={filename} />
             </h1>
             {
               props.utils.toReactComponent(

site/theme/template/Content/Demo.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import classNames from 'classnames';
+import EditButton from './EditButton';
 
 export default class Demo extends React.Component {
   static contextTypes = {
@@ -74,6 +75,7 @@ export default class Demo extends React.Component {
             <a href={`#${meta.id}`}>
               {localizedTitle}
             </a>
+            <EditButton title="在 Github 上编辑此示例！" filename={meta.filename} />
           </div>
           {introChildren}
           <span className="collapse anticon anticon-circle-o-right"

site/theme/template/Content/EditButton.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Tooltip, Icon } from 'antd';
+
+const branchUrl = 'https://github.com/ant-design/ant-design/blob/1.x-stable/';
+const linkStyle = { color: 'inherit' };
+const iconStyle = { fontSize: 14, marginLeft: 8, cursor: 'pointer' };
+export default function EditButton({ title, filename }) {
+  return (
+    <Tooltip title={title}>
+      <a className="edit-button" href={`${branchUrl}${filename}`} style={linkStyle}>
+        <Icon type="edit" style={iconStyle} />
+      </a>
+    </Tooltip>
+  );
+}