feat: 为各个路由设置title

axetroy · May 6, 2017 · c5204a2 · c5204a2
1 parent bfa00cf
commit c5204a2
Show file tree

Hide file tree

Showing 12 changed files with 922 additions and 825 deletions.
diff --git a/src/component/document-title/index.js b/src/component/document-title/index.js
@@ -0,0 +1,48 @@
+/**
+ * Created by axetroy on 17-4-6.
+ */
+import React, { Component, PropTypes } from 'react';
+
+class DocumentTitle extends Component {
+  constructor(props) {
+    super(props);
+    this.root = `Axetroy's NeverLand`;
+  }
+  PropTypes = {
+    title: PropTypes.string,
+    suffix: PropTypes.string
+  };
+
+  componentWillMount() {
+    if (!this.__originTitle) this.__originTitle = document.title;
+    const { title, suffix } = this.props;
+    if (title) {
+      this.setTitle(title, suffix);
+    }
+  }
+
+  componentWillReceiveProps(nextPros) {
+    const { title, suffix } = nextPros;
+    if (title) {
+      this.setTitle(title, suffix);
+    }
+  }
+
+  componentWillUnmount() {
+    // recover the title before set
+    if (this.__originTitle) document.title = this.__originTitle;
+  }
+
+  setTitle(title, suffix) {
+    document.title =
+      title +
+      (suffix ? ' | ' + suffix.join('|') + ' ' : '') +
+      ` | Axetroy's NeverLand`;
+    return this;
+  }
+
+  render() {
+    return this.props.children || '';
+  }
+}
+export default DocumentTitle;
diff --git a/src/pages/about/index.js b/src/pages/about/index.js
@@ -10,6 +10,8 @@ import github from '../../lib/github';
 
 import * as aboutAction from '../../redux/about';
 
+import DocumentTitle from '../../component/document-title';
+
 class About extends Component {
   componentDidMount() {
     const { owner, repo } = pkg.config;
@@ -42,31 +44,33 @@ class About extends Component {
 
   render() {
     return (
-      <Spin spinning={!this.props.ABOUT_ME}>
-        <div className="edit-this-page-container">
-          <div className="edit-this-page">
-            <Tooltip placement="topLeft" title="编辑此页" arrowPointAtCenter>
-              <a
-                href={`https://github.com/${pkg.config.owner}/${pkg.config.repo}/edit/master/ABOUTME.md`}
-                target="_blank"
-              >
-                <Icon
-                  type="edit"
-                  style={{
-                    fontSize: '3rem'
-                  }}
-                />
-              </a>
-            </Tooltip>
+      <DocumentTitle title="关于我">
+        <Spin spinning={!this.props.ABOUT_ME}>
+          <div className="edit-this-page-container">
+            <div className="edit-this-page">
+              <Tooltip placement="topLeft" title="编辑此页" arrowPointAtCenter>
+                <a
+                  href={`https://github.com/${pkg.config.owner}/${pkg.config.repo}/edit/master/ABOUTME.md`}
+                  target="_blank"
+                >
+                  <Icon
+                    type="edit"
+                    style={{
+                      fontSize: '3rem'
+                    }}
+                  />
+                </a>
+              </Tooltip>
+            </div>
+            <div
+              className="markdown-body"
+              dangerouslySetInnerHTML={{
+                __html: this.props.ABOUT_ME
+              }}
+            />
           </div>
-          <div
-            className="markdown-body"
-            dangerouslySetInnerHTML={{
-              __html: this.props.ABOUT_ME
-            }}
-          />
-        </div>
-      </Spin>
+        </Spin>
+      </DocumentTitle>
     );
   }
 }