add oss

.gitlab-ci.yml

@@ -20,21 +20,21 @@ cache:
 #     - sh utils/imageCompress.sh
 
 
-# deploy:
-#   stage: deploy
-#   when: manual
-#   environment:
-#     name: release
-#   only:
-#     - master
-#   script:
-#     - yarn
-#     # - sh utils/imageCompress.sh
-#     - npm run export
-#     - rm -rf /home/gitlab-runner/deploy/official/out/
-#     - echo "预览页面已清除"
-#     - cp -r out /home/gitlab-runner/deploy/official
-#     - /home/gitlab-runner/sh/ossutil64 cp -f out oss://gaorong-web/ -r
+deploy:
+  stage: deploy
+  # when: manual
+  environment:
+    name: release
+  only:
+    - master
+  script:
+    - yarn
+    # - sh utils/imageCompress.sh
+    - npm run export
+    - rm -rf /home/gitlab-runner/deploy/cms/ronghui/out
+    - echo "预览页面已清除"
+    - cp -r out /home/gitlab-runner/cms/ronghui
+    - /home/gitlab-runner/sh/ossutil64 cp -f out oss://touhou-cms/ -r
 
 
 preview:

admin/config.yml

@@ -8,128 +8,35 @@ backend:
   api_root: https://git.gaorongvc.cn/api/v4
   base_url: https://git.gaorongvc.cn
   authENdpoint: oauth/authorize
-media_folder: media/ronghui
+media_folder: static/img
 collections:
-  - name: "newsPage"
-    label: "newsPage"
-    files: 
-      - label: "newsPage"
-        name: "newsPage"
-        file: "content/newsPage.md"
-        fields:
-          - { label: "Title", name: "title", widget: "string"}
-          - { label: "TitleEN", name: "titleEN", widget: "string"}
-          - { label: "SearchPlaceholder", name: "searchPlaceholder", widget: "string"}
-          - { label: "SearchPlaceholderEN", name: "searchPlaceholderEN", widget: "string"}
-          - { label: "AllNews", name: "allNews", widget: "string"}
-          - { label: "AllNewsEN", name: "allNewsEN", widget: "string"}
- 
   - name: "News"
     label: "News"
     sortable_fields: ['type', 'title','createDate', 'highLight','source']
     create: true
-    view_filters:
-      - label: "新技术"
-        field: type
-        pattern: '新技术'
-      - label: '新消费'
-        field: type
-        pattern: '新消费'
-      - label: '医疗健康'
-        field: type
-        pattern: '医疗健康'
-      - label: '榕报'
-        field: type
-        pattern: '榕报'
-      - label: '榕汇'
-        field: type
-        pattern: '榕汇'
-      - label: '分享'
-        field: type
-        pattern: '分享'
-      - label: '高榕分享'
-        field: type
-        pattern: '高榕分享'
-      - label: '荣誉'
-        field: type
-        pattern: '荣誉'
-      - label: '高榕特写'
-        field: type
-        pattern: '高榕特写'
-      - label: '高榕新闻'
-        field: type
-        pattern: '高榕新闻'
-      - label: '高榕转载'
-        field: type
-        pattern: '高榕转载'
-      - label: '声明'
-        field: type
-        pattern: '声明'
-      - label: '榕问'
-        field: type
-        pattern: '榕问'
-      - label: '高榕动态'
-        field: type
-        pattern: '高榕动态'
-    view_groups:
-      - label: "新技术"
-        field: type
-        pattern: '新技术'
-      - label: '新消费'
-        field: type
-        pattern: '新消费'
-      - label: '医疗健康'
-        field: type
-        pattern: '医疗健康'
-      - label: '榕报'
-        field: type
-        pattern: '榕报'
-      - label: '榕汇'
-        field: type
-        pattern: '榕汇'
-      - label: '分享'
-        field: type
-        pattern: '分享'
-      - label: '高榕分享'
-        field: type
-        pattern: '高榕分享'
-      - label: '荣誉'
-        field: type
-        pattern: '荣誉'
-      - label: '高榕特写'
-        field: type
-        pattern: '高榕特写'
-      - label: '高榕新闻'
-        field: type
-        pattern: '高榕新闻'
-      - label: '高榕转载'
-        field: type
-        pattern: '高榕转载'
-      - label: '声明'
-        field: type
-        pattern: '声明'
-      - label: '榕问'
-        field: type
-        pattern: '榕问'
-      - label: '高榕动态'
-        field: type
-        pattern: '高榕动态'
     identifier_field: name
     folder: "content/news"
     summary: "{{title}} {{createDate}}"
     fields:
           - { label: "Title", name: "title", widget: "string" }
-          - { label: "TitleEN", name: "titleEN", widget: "string", required: false }
-          - { label: "Source", name: "source", widget: "string", required: false }
-          - { label: "SourceEN", name: "sourceEN", widget: "string", required: false }
-          - { label: "hide", name: "hide", widget: "boolean", required: false, default: false }
           - { label: "type", name: "type", widget: "string", required: false}
-          - { label: "typeEN", name: "typeEN", widget: "string", required: false}
           - { label: "createDate", name: "createDate", widget: "datetime" }
           - { label: "Abstract", name: "abstract", widget: "text" }
-          - { label: "AbstractEN", name: "abstractEN", widget: "text", required: false }
           - { label: "content", name: "content", widget: "markdown"}
-          - { label: "contentEN", name: "contentEN", widget: "markdown", required: false}
-          - { label: "Picture", name: "pic", widget: "image" }
-          - { label: "HighLight", name: "highLight", widget: "boolean", required: false}
+          - { label: "coverpic", name: "coverpic", widget: "image" }
+
+  - name: "Richtext"
+    label: "richtext"
+    sortable_fields: ['type', 'title','createDate', 'highLight','source']
+    create: true
+    identifier_field: name
+    folder: "content/richtext"
+    summary: "{{title}} {{createDate}}"
+    fields:
+          - { label: "Title", name: "title", widget: "string" }
+          - { label: "type", name: "type", widget: "string", required: false}
+          - { label: "createDate", name: "createDate", widget: "datetime" }
+          - { label: "Abstract", name: "abstract", widget: "text" }
+          - { label: "content", name: "content", widget: "markdown"}
+          - { label: "coverpic", name: "coverpic", widget: "image" }
   
\ No newline at end of file

components/Title/index.css

+.title {
+  color: #201714;
+  font-size: 32px; /* px */
+  line-height: 180%;
+  font-weight: 500;
+}
+.en .title {
+  font-family: 'IBM Plex Serif' !important;
+  line-height: 150%;
+}
+.sub-title {
+  color: #444;
+  font-size: 20px; /* px */
+  line-height: 180%;
+  margin-top: 32px; /* px */
+  margin-bottom: 40px; /* px */
+  text-align: justify;
+}
+.en .sub-title {
+  text-align: left;
+  font-size: 18px; /* px */
+  line-height: 150%;
+}
+
+@media screen and (max-width: 1088px) {
+  /* width for top image root in gray */
+  .title {
+    font-size: 24px; /* px */
+  }
+  .title-svg {
+    height: 24px; /* px */
+  }
+  .title-svg.title-two-line {
+    height: 54px; /* px */
+  }
+  .sub-title, .en .sub-title {
+    font-size: 16px; /* px */
+  }
+}
+
+@media screen and (max-width: 380px) {
+  .title-svg {
+    height: 20px; /* px */
+  }
+}
+

components/Title/index.js

+// eslint-disable-next-line no-unused-vars
+import React from 'react'
+import classnames from 'classnames'
+import './index.css'
+
+function Title(props) {
+  const { children, className } = props
+ 
+  if (typeof children === 'object') {
+    return (
+      <div
+        className={classnames({
+          title: true,
+          [className]: !!className
+        })}
+      >
+        {children}
+      </div>
+    )
+  }
+  return (
+    <div
+      className={classnames({
+        title: true,
+        [className]: !!className
+      })}
+      dangerouslySetInnerHTML={{ __html: children }}
+    ></div>
+  )
+}
+
+function SubTitle(props) {
+  const { children, className } = props
+  return (
+    <div
+      className={classnames({
+        'sub-title': true,
+        [className]: !!className
+      })}
+      dangerouslySetInnerHTML={{ __html: children }}
+    ></div>
+  )
+}
+
+export { Title, SubTitle }

pages/_app.js

+import React from 'react'
+import App, { Container } from 'next/app'
+import classnames from 'classnames'
+// import * as Sentry from '@sentry/browser'
+import initReactFastclick from 'react-fastclick'
+const ThemeContext = React.createContext('theme')
+
+// Sentry.init({
+//   dsn: 'https://3dcf09b0b1fa47c68140a350f02a80fe@sentry.io/1729008'
+// })
+export function ThemeDecorator(Component) {
+  return (
+   class extends React.Component {
+     render() {
+     return <ThemeContext.Consumer>
+        {(val) => {
+            const { en, setLang } = val
+            return <Component en={en} setLang={setLang} {...this.props} />
+        }}
+      </ThemeContext.Consumer>
+     }
+   }
+  
+  )
+}
+function getQueryVariable(variable)
+{
+       var query = window.location.search.substring(1);
+       var vars = query.split("&");
+       for (var i=0;i<vars.length;i++) {
+               var pair = vars[i].split("=");
+               if(pair[0] == variable){return pair[1];}
+       }
+       return(false);
+}
+
+export { ThemeContext }
+// const injectTapEventPlugin = require('react-tap-event-plugin')
+
+if (process.browser) {
+  // injectTapEventPlugin()
+  initReactFastclick()
+}
+class MyApp extends App {
+  constructor(...props) {
+    super(...props)
+    this.ctx = {
+      en: null,
+      setLang: (isEnglish, set = true) => {
+        if (this.ctx.en === isEnglish) {
+          return
+        }
+        this.ctx.en = isEnglish
+        if (set) {
+          window.localStorage.setItem('lan', isEnglish ? 'en' : 'zh')
+        }
+        this.forceUpdate()
+      } 
+    }
+  }
+  // componentDidCatch (error, errorInfo) {
+  //   Sentry.withScope(scope => {
+  //     Object.keys(errorInfo).forEach(key => {
+  //       scope.setExtra(key, errorInfo[key])
+  //     })
+
+  //     Sentry.captureException(error)
+  //   })
+
+  //   super.componentDidCatch(error, errorInfo)
+  // }
+  componentDidMount() {
+    // window.location.href.
+    var lan = getQueryVariable("lang");
+    if(lan) {
+      window.localStorage.setItem('lan', lan == "en" ? 'en' : 'zh')
+      this.ctx.setLang(lan == "en", false)
+    } else {
+      this.ctx.setLang(window.localStorage.getItem('lan') === 'en', false)
+    }
+  }
+  static async getInitialProps({ Component, ctx }) {
+    let pageProps = {}
+    if (Component.getInitialProps) {
+      pageProps = await Component.getInitialProps(ctx);
+    }
+
+    return { pageProps };
+  }
+
+  render() {
+    const { Component, pageProps } = this.props;
+
+    return (
+      <React.Fragment>
+      <ThemeContext.Provider value={this.ctx}>
+        <Container>
+          <Component {...pageProps} />
+          <div className={classnames({
+            en: this.ctx.en,
+            zh: this.ctx.en === false
+          })} id="modal-anchor"/>
+        </Container>
+      </ThemeContext.Provider>
+      </React.Fragment>
+    );
+  }
+}
+
+
+export default MyApp

pages/_document.js

+// _document is only rendered on the server side and not on the client side
+// Event handlers like onClick can't be added to this file
+import Document, { Head, Main, NextScript } from 'next/document'
+// import * as Sentry from '@sentry/browser'
+
+// process.on('unhandledRejection', err => {
+//   Sentry.captureException(err)
+// })
+
+// process.on('uncaughtException', err => {
+//   Sentry.captureException(err)
+// })
+export default class MyDocument extends Document {
+  static async getInitialProps(ctx) {
+    const initialProps = await Document.getInitialProps(ctx)
+    return { ...initialProps }
+  }
+
+  render() {
+    return (
+      <html>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
+        <meta httpEquiv="X-UA-Compatible" content="IE=Edge，chrome=1"></meta>
+        <meta name="keywords" content="高榕资本,Gaorong Capital,高榕,Banyan Capital"/>
+        <Head>
+        <link rel="icon" type="image/x-icon" href="../static/favicon.ico" />
+        <script src='/static/px2rem.js'></script>
+        <script src='/static/statepolyfill.js'></script>
+        <script type="text/javascript" src='/static/babel-polyfill7.4.4.min.js'></script>
+        </Head>
+        <body className="custom_class">
+          <script src="/static/respond.matchmedia.addListener.min.js"></script>
+          <script src="/static/respond.min.js"></script>
+          <Main />
+          <NextScript />
+          <script type="text/javascript" crossOrigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?flags=gated&features=es2015%2CPromise"></script>
+          {/* <script src="/static/eruda.min.js"></script>
+          <script>eruda.init();</script> */}
+        </body>
+      </html>
+    )
+  }
+}
\ No newline at end of file

pages/base.css

+@font-face { /* General Copy */
+  font-family: 'IBM Plex Sans';
+  font-style: normal;
+  font-weight: 300;
+  src: url('/static/fonts/eot/IBMPlexSans-Light.eot');
+  src: url('/static/fonts/eot/IBMPlexSans-Light.eot?#iefix') format('embedded-opentype'),
+       url('/static/fonts/woff2/IBMPlexSans-Light.woff2') format('woff2'),
+       url('/static/fonts/woff/IBMPlexSans-Light.woff') format('woff'),
+       url('/static/fonts/ttf/IBMPlexSans-Light.ttf') format('truetype')
+}
+
+@font-face { /* Post Copy */
+  font-family: 'IBM Plex Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: url('/static/fonts/eot/IBMPlexSans-Regular.eot');
+  src: url('/static/fonts/eot/IBMPlexSans-Regular.eot?#iefix') format('embedded-opentype'),
+       url('/static/fonts/woff2/IBMPlexSans-Regular.woff2') format('woff2'),
+       url('/static/fonts/woff/IBMPlexSans-Regular.woff') format('woff'),
+       url('/static/fonts/ttf/IBMPlexSans-Regular.ttf') format('truetype')
+}
+
+@font-face { /* Title */
+  font-family: 'IBM Plex Sans';
+  font-style: normal;
+  font-weight: 500;
+  src: url('/static/fonts/eot/IBMPlexSans-Medium.eot');
+  src: url('/static/fonts/eot/IBMPlexSans-Medium.eot?#iefix') format('embedded-opentype'),
+       url('/static/fonts/woff2/IBMPlexSans-Medium.woff2') format('woff2'),
+       url('/static/fonts/woff/IBMPlexSans-Medium.woff') format('woff'),
+       url('/static/fonts/ttf/IBMPlexSans-Medium.ttf') format('truetype')
+}
+
+@font-face { /* English Title */
+  font-family: 'IBM Plex Serif';
+  font-style: normal;
+  font-weight: 500;
+  src: url('/static/fonts/eot/IBMPlexSerif-Medium.eot');
+  src: url('/static/fonts/eot/IBMPlexSerif-Medium.eot?#iefix') format('embedded-opentype'),
+       url('/static/fonts/woff2/IBMPlexSerif-Medium.woff2') format('woff2'),
+       url('/static/fonts/woff/IBMPlexSerif-Medium.woff') format('woff'),
+       url('/static/fonts/ttf/IBMPlexSerif-Medium.ttf') format('truetype')
+}
+
+@font-face {
+  font-family: "PingFang-SC";
+  font-weight: 100;
+  src: local("PingFangSC-Ultralight");
+}
+@font-face {
+  font-family: "PingFang-SC";
+  font-weight: 200;
+  src: local("PingFangSC-Thin");
+}
+@font-face {
+  font-family: "PingFang-SC";
+  font-weight: 300;
+  src: local("PingFangSC-Light");
+}
+@font-face {
+  font-family: "PingFang-SC";
+  font-weight: 400;
+  src: local("PingFangSC-Regular");
+}
+
+@font-face {
+  font-family: "PingFang-SC";
+  font-weight: 500;
+  src: local("PingFangSC-Medium");
+}
+
+@font-face {
+  font-family: "PingFang-SC";
+  font-weight: 700;
+  src: local("PingFangSC-Semibold");
+}
+
+@font-face {
+  font-family: "PingFang-SC";
+  font-weight: 800;
+  src: local("PingFangSC-Heavy");
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  background: white;
+  font-weight: 300;
+  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang-SC', 'Microsoft YaHei', 'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-size: 12px; /* no */
+}
+
+.limitw {
+  width: 100%;
+  margin: 0 auto;
+  box-sizing: border-box;
+  max-width: 1400px; /* px */
+  padding-left: 48px; /* px */
+  padding-right: 48px; /* px */
+}
+
+@media screen and (max-width: 779px) {
+  .limitw {
+    padding-left: 32px; /* px */
+    padding-right: 32px; /* px */
+  }
+}
+.two-column {
+  overflow: visible;
+}
+.two-column:before, .two-column:after {
+  content: "";
+  display: block;
+  clear: both;
+}
+.two-column > div {
+  float: left;
+}
+
+.two-column > div {
+  float: left;
+}
+
+.two-column > div.two-column-reverse-right {
+  float: right;
+}
+
+a.linka {
+  display: block;
+  color: black;
+  text-decoration: none;
+}
+
+.title-decorate {
+  position: absolute !important;
+  height: 1px; /* px */
+  width: 1px; /* px */
+  overflow: hidden;
+  clip: rect(1px 1px 1px 1px); /* px */
+  clip: rect(1px, 1px, 1px, 1px); /* px */
+  white-space: nowrap;
+}
+
+.bg {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  background: #F9F9F9;
+  opacity: 0.9;
+}
+.left-bg {
+  position: absolute;
+  width: 98%;
+  height: 100%;
+  z-index: -1;
+  background: #F9F9F9;
+  /* opacity: 0.9; */
+  left: 2%;
+}
+
+@media screen and (max-width: 500px) {
+  .left-bg {
+    left: 0;
+    width: 100%;
+  }
+}
+
+.clear {
+  clear: both;
+}
+
+.image-text-column-col1 {
+  width: 39%;
+  margin-right: 5%;
+}
+.image-text-column-col2 {
+ position: relative;
+ width: 55%;
+ padding-bottom: 42%;
+}
+
+/* Disable web font to void Yahei's missing font weight */
+.index-sub-title,
+.high-light-title,
+.article-title { 
+  font-family: -apple-system,BlinkMacSystemFont,'Helvetica Neue','PingFang-SC','Microsoft YaHei','Source Han Sans SC','Noto Sans CJK SC','WenQuanYi Micro Hei',sans-serif;
+}
+
+@media (max-width: 780px) {
+  .image-text-column-col1 {
+    width: 100%;
+  }
+  .image-text-column-col2 {
+    width: 100%;
+    padding-bottom: 82%;
+    margin-bottom: 15%;
+  }
+
+  .image-text-column-mask {
+    right: 38%;
+  }
+}
\ No newline at end of file

pages/post.css

@@ -36,7 +36,6 @@
 .post-outline-wrapper {
   width: 100%;
   box-sizing: border-box;
-  padding: 40px 0; /* px */
   position: relative;
   overflow: hidden;
 }
@@ -81,7 +80,7 @@
   width: 90%;
   box-sizing: border-box;
   max-width: 824px; /* px */
-  padding: 40px 4%; /* px */
+  padding: 40px 4% 80px; /* px */
 }
 .post-wrapper img, .post-wrapper video {
   width: 100%;

pages/post.js

@@ -16,7 +16,6 @@ export default class PostPage extends React.Component {
       article: [],
       mounted: false
     }
-
   }
 
   componentDidMount() {
@@ -60,7 +59,7 @@ export default class PostPage extends React.Component {
             <div className="post-page">
               <Head>
                 <title>
-                  {en === null ? '' : en ? post.titleEN : post.title}
+                  {post.title}
                 </title>
               </Head>
               <div className="post-outline-wrapper">
@@ -68,11 +67,11 @@ export default class PostPage extends React.Component {
                 <div className="post-wrapper">
                   {post.type && (
                     <div className="post-source">
-                      {en === null ? '' : en ? post.typeEN : post.type}
+                      { post.type}
                     </div>
                   )}
-                  <Title en={en}>
-                    {en === null ? '' : en ? post.titleEN : post.title}
+                  <Title >
+                    { post.title}
                   </Title>
                   <div className="post-dateshare-wrapper">
                     <div className="post-date">
@@ -82,7 +81,6 @@ export default class PostPage extends React.Component {
                   <div
                     className="post-content"
                     dangerouslySetInnerHTML={(() => {
-
                           if (post.content) {
                             return { __html: marked(post.content) }
                           } else {

static/img/logo-yellow.svg

+<svg fill="none" height="40" viewBox="0 0 40 40" width="40" xmlns="http://www.w3.org/2000/svg"><g clip-rule="evenodd" fill="#ffcb05" fill-rule="evenodd"><path d="m10.6912 40h-5.53191c-.26596-6.7553.05318-13.5106.90424-20.2659.21277-1.5426.42555-3.0851.6915-4.6809.53192 2.1809 1.06383 4.3617 1.48936 6.5426 1.2234 6.117 2.02131 12.234 2.44681 18.4042z"/><path d="m16.3834 40h-2.2873c-.6383-9.8404-3.2447-19.4149-5.90425-29.0426.95745-3.61697 2.18085-7.55314 3.40425-10.9574 3.7766 10.1064 6.0106 20.5319 6.7021 31.117-.4787 2.9787-1.1702 5.9043-1.9148 8.883z"/><path d="m28.8295 39.9999h-7.1808l.0532-.1064c1.9149-8.3511 1.9149-16.7021 1.5425-25.2659.7979-2.766 1.8617-5.26601 3.1915-7.71282 1.2234-2.23404 2.6596-4.30851 4.3085-6.276596-2.5 12.978716-3.4042 26.436216-1.9149 39.361716z"/><path d="m33.6179 0h6.383v40h-7.2872c-.1064-2.7128.1596-5.4255.8511-8.1383.851-3.4042 2.3404-6.9149 4.5212-10.4255l-1.4893-.0532c-2.1809 3.5638-3.7234 7.0744-4.5745 10.5319-.1064.3723-.1596.6915-.266 1.0638-.3723-4.1489-.4787-8.351-.4255-12.5.2128-6.8085.9043-13.67019 2.2872-20.4787z"/><path d="m21.9677 0h7.9255c-1.7021 2.02128-3.1383 4.14894-4.4149 6.43617-.9042 1.59575-1.6489 3.24468-2.2872 5.00003-.1064-3.77662-.5319-7.60641-1.2234-11.4362z"/><path d="m12.9258 0h5.7447c1.4894 8.03192 1.649 16.1702.7447 24.2021-.7979-8.0319-5.1596-20.74465-6.4894-24.2021z"/><path d="m4.62691 0h5.26596c-1.01064 2.39362-1.86171 5.05319-2.71277 7.65958-.58511-2.07447-1.48936-4.84043-2.55319-7.65958z"/><path d="m0 0h1.96809c1.2766 3.51064 2.97872 8.56383 3.82978 11.4362-.53191 2.7127-1.01064 5.4787-1.32979 8.1915-.85106 6.8085-1.1702 13.5638-.90424 20.3723h-3.457451v-40z"/></g></svg>
\ No newline at end of file

static/px2rem.js

+;(function(win, lib) {
+  var doc = win.document
+  var docEl = doc.documentElement
+  var metaEl = doc.querySelector('meta[name="viewport"]')
+  var flexibleEl = doc.querySelector('meta[name="flexible"]')
+  var dpr = 0
+  var scale = 0
+  var tid
+  var flexible = lib.flexible || (lib.flexible = {})
+
+  if (metaEl) {
+    var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/)
+    if (match) {
+      scale = parseFloat(match[1])
+      dpr = parseInt(1 / scale)
+    }
+  } else if (flexibleEl) {
+    var content = flexibleEl.getAttribute('content')
+    if (content) {
+      var initialDpr = content.match(/initial\-dpr=([\d\.]+)/)
+      var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/)
+      if (initialDpr) {
+        dpr = parseFloat(initialDpr[1])
+        scale = parseFloat((1 / dpr).toFixed(2))
+      }
+      if (maximumDpr) {
+        dpr = parseFloat(maximumDpr[1])
+        scale = parseFloat((1 / dpr).toFixed(2))
+      }
+    }
+  }
+
+  if (!dpr && !scale) {
+    var isIPhone = win.navigator.appVersion.match(/iphone/gi)
+    var devicePixelRatio = win.devicePixelRatio
+    if (isIPhone) {
+      // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
+      if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
+        dpr = 3
+      } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
+        dpr = 2
+      } else {
+        dpr = 1
+      }
+    } else {
+      // 其他设备下，仍旧使用1倍的方案
+      dpr = 1
+    }
+    scale = 1 / dpr
+  }
+
+  docEl.setAttribute('data-dpr', dpr)
+  if (!metaEl) {
+    metaEl = doc.createElement('meta')
+    metaEl.setAttribute('name', 'viewport')
+    metaEl.setAttribute(
+      'content',
+      'initial-scale=' +
+        scale +
+        ', maximum-scale=' +
+        scale +
+        ', minimum-scale=' +
+        scale +
+        ', user-scalable=no'
+    )
+    if (docEl.firstElementChild) {
+      docEl.firstElementChild.appendChild(metaEl)
+    } else {
+      var wrap = doc.createElement('div')
+      wrap.appendChild(metaEl)
+      doc.write(wrap.innerHTML)
+    }
+  }
+
+  function refreshRem() {
+    var width = docEl.getBoundingClientRect().width
+    if (width / dpr > 540) {
+      width = 540 * dpr
+    }
+    var rem = width / 10
+    docEl.style.fontSize = rem + 'px'
+    flexible.rem = win.rem = rem
+  }
+
+  win.addEventListener(
+    'resize',
+    function() {
+      clearTimeout(tid)
+      tid = setTimeout(refreshRem, 300)
+    },
+    false
+  )
+  win.addEventListener(
+    'pageshow',
+    function(e) {
+      if (e.persisted) {
+        clearTimeout(tid)
+        tid = setTimeout(refreshRem, 300)
+      }
+    },
+    false
+  )
+
+  if (doc.readyState === 'complete') {
+    doc.body.style.fontSize = 12 * dpr + 'px'
+  } else {
+    doc.addEventListener(
+      'DOMContentLoaded',
+      function(e) {
+        doc.body.style.fontSize = 12 * dpr + 'px'
+      },
+      false
+    )
+  }
+
+  refreshRem()
+
+  flexible.dpr = win.dpr = dpr
+  flexible.refreshRem = refreshRem
+  flexible.rem2px = function(d) {
+    var val = parseFloat(d) * this.rem
+    if (typeof d === 'string' && d.match(/rem$/)) {
+      val += 'px'
+    }
+    return val
+  }
+  flexible.px2rem = function(d) {
+    var val = parseFloat(d) / this.rem
+    if (typeof d === 'string' && d.match(/px$/)) {
+      val += 'rem'
+    }
+    return val
+  }
+})(window, window.lib || (window.lib = {}))
\ No newline at end of file

static/respond.matchmedia.addListener.min.js

+!function(a){"use strict";a.matchMedia=a.matchMedia||function(a){var b,c=a.documentElement,d=c.firstElementChild||c.firstChild,e=a.createElement("body"),f=a.createElement("div");return f.id="mq-test-1",f.style.cssText="position:absolute;top:-100em",e.style.background="none",e.appendChild(f),function(a){return f.innerHTML='&shy;<style media="'+a+'"> #mq-test-1 { width: 42px; }</style>',c.insertBefore(e,d),b=42===f.offsetWidth,c.removeChild(e),{matches:b,media:a}}}(a.document)}(this),function(a){"use strict";if(a.matchMedia&&a.matchMedia("all").addListener)return!1;var b=a.matchMedia,c=b("only all").matches,d=!1,e=0,f=[],g=function(){a.clearTimeout(e),e=a.setTimeout(function(){for(var c=0,d=f.length;d>c;c++){var e=f[c].mql,g=f[c].listeners||[],h=b(e.media).matches;if(h!==e.matches){e.matches=h;for(var i=0,j=g.length;j>i;i++)g[i].call(a,e)}}},30)};a.matchMedia=function(e){var h=b(e),i=[],j=0;return h.addListener=function(b){c&&(d||(d=!0,a.addEventListener("resize",g,!0)),0===j&&(j=f.push({mql:h,listeners:i})),i.push(b))},h.removeListener=function(a){for(var b=0,c=i.length;c>b;b++)i[b]===a&&i.splice(b,1)},h}}(this),function(a){"use strict";function b(){v(!0)}var c={};a.respond=c,c.update=function(){};var d=[],e=function(){var b=!1;try{b=new a.XMLHttpRequest}catch(c){b=new a.ActiveXObject("Microsoft.XMLHTTP")}return function(){return b}}(),f=function(a,b){var c=e();c&&(c.open("GET",a,!0),c.onreadystatechange=function(){4!==c.readyState||200!==c.status&&304!==c.status||b(c.responseText)},4!==c.readyState&&c.send(null))},g=function(a){return a.replace(c.regex.minmaxwh,"").match(c.regex.other)};if(c.ajax=f,c.queue=d,c.unsupportedmq=g,c.regex={media:/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi,keyframes:/@(?:\-(?:o|moz|webkit)\-)?keyframes[^\{]+\{(?:[^\{\}]*\{[^\}\{]*\})+[^\}]*\}/gi,comments:/\/\*[^*]*\*+([^/][^*]*\*+)*\//gi,urls:/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,findStyles:/@media *([^\{]+)\{([\S\s]+?)$/,only:/(only\s+)?([a-zA-Z]+)\s?/,minw:/\(\s*min\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/,maxw:/\(\s*max\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/,minmaxwh:/\(\s*m(in|ax)\-(height|width)\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/gi,other:/\([^\)]*\)/g},c.mediaQueriesSupported=a.matchMedia&&null!==a.matchMedia("only all")&&a.matchMedia("only all").matches,!c.mediaQueriesSupported){var h,i,j,k=a.document,l=k.documentElement,m=[],n=[],o=[],p={},q=30,r=k.getElementsByTagName("head")[0]||l,s=k.getElementsByTagName("base")[0],t=r.getElementsByTagName("link"),u=function(){var a,b=k.createElement("div"),c=k.body,d=l.style.fontSize,e=c&&c.style.fontSize,f=!1;return b.style.cssText="position:absolute;font-size:1em;width:1em",c||(c=f=k.createElement("body"),c.style.background="none"),l.style.fontSize="100%",c.style.fontSize="100%",c.appendChild(b),f&&l.insertBefore(c,l.firstChild),a=b.offsetWidth,f?l.removeChild(c):c.removeChild(b),l.style.fontSize=d,e&&(c.style.fontSize=e),a=j=parseFloat(a)},v=function(b){var c="clientWidth",d=l[c],e="CSS1Compat"===k.compatMode&&d||k.body[c]||d,f={},g=t[t.length-1],p=(new Date).getTime();if(b&&h&&q>p-h)return a.clearTimeout(i),i=a.setTimeout(v,q),void 0;h=p;for(var s in m)if(m.hasOwnProperty(s)){var w=m[s],x=w.minw,y=w.maxw,z=null===x,A=null===y,B="em";x&&(x=parseFloat(x)*(x.indexOf(B)>-1?j||u():1)),y&&(y=parseFloat(y)*(y.indexOf(B)>-1?j||u():1)),w.hasquery&&(z&&A||!(z||e>=x)||!(A||y>=e))||(f[w.media]||(f[w.media]=[]),f[w.media].push(n[w.rules]))}for(var C in o)o.hasOwnProperty(C)&&o[C]&&o[C].parentNode===r&&r.removeChild(o[C]);o.length=0;for(var D in f)if(f.hasOwnProperty(D)){var E=k.createElement("style"),F=f[D].join("\n");E.type="text/css",E.media=D,r.insertBefore(E,g.nextSibling),E.styleSheet?E.styleSheet.cssText=F:E.appendChild(k.createTextNode(F)),o.push(E)}},w=function(a,b,d){var e=a.replace(c.regex.comments,"").replace(c.regex.keyframes,"").match(c.regex.media),f=e&&e.length||0;b=b.substring(0,b.lastIndexOf("/"));var h=function(a){return a.replace(c.regex.urls,"$1"+b+"$2$3")},i=!f&&d;b.length&&(b+="/"),i&&(f=1);for(var j=0;f>j;j++){var k,l,o,p;i?(k=d,n.push(h(a))):(k=e[j].match(c.regex.findStyles)&&RegExp.$1,n.push(RegExp.$2&&h(RegExp.$2))),o=k.split(","),p=o.length;for(var q=0;p>q;q++)l=o[q],g(l)||m.push({media:l.split("(")[0].match(c.regex.only)&&RegExp.$2||"all",rules:n.length-1,hasquery:l.indexOf("(")>-1,minw:l.match(c.regex.minw)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:l.match(c.regex.maxw)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}v()},x=function(){if(d.length){var b=d.shift();f(b.href,function(c){w(c,b.href,b.media),p[b.href]=!0,a.setTimeout(function(){x()},0)})}},y=function(){for(var b=0;b<t.length;b++){var c=t[b],e=c.href,f=c.media,g=c.rel&&"stylesheet"===c.rel.toLowerCase();e&&g&&!p[e]&&(c.styleSheet&&c.styleSheet.rawCssText?(w(c.styleSheet.rawCssText,e,f),p[e]=!0):(!/^([a-zA-Z:]*\/\/)/.test(e)&&!s||e.replace(RegExp.$1,"").split("/")[0]===a.location.host)&&("//"===e.substring(0,2)&&(e=a.location.protocol+e),d.push({href:e,media:f})))}x()};y(),c.update=y,c.getEmValue=u,a.addEventListener?a.addEventListener("resize",b,!1):a.attachEvent&&a.attachEvent("onresize",b)}}(this);
\ No newline at end of file

static/respond.min.js

+!function(a){"use strict";a.matchMedia=a.matchMedia||function(a){var b,c=a.documentElement,d=c.firstElementChild||c.firstChild,e=a.createElement("body"),f=a.createElement("div");return f.id="mq-test-1",f.style.cssText="position:absolute;top:-100em",e.style.background="none",e.appendChild(f),function(a){return f.innerHTML='&shy;<style media="'+a+'"> #mq-test-1 { width: 42px; }</style>',c.insertBefore(e,d),b=42===f.offsetWidth,c.removeChild(e),{matches:b,media:a}}}(a.document)}(this),function(a){"use strict";function b(){v(!0)}var c={};a.respond=c,c.update=function(){};var d=[],e=function(){var b=!1;try{b=new a.XMLHttpRequest}catch(c){b=new a.ActiveXObject("Microsoft.XMLHTTP")}return function(){return b}}(),f=function(a,b){var c=e();c&&(c.open("GET",a,!0),c.onreadystatechange=function(){4!==c.readyState||200!==c.status&&304!==c.status||b(c.responseText)},4!==c.readyState&&c.send(null))},g=function(a){return a.replace(c.regex.minmaxwh,"").match(c.regex.other)};if(c.ajax=f,c.queue=d,c.unsupportedmq=g,c.regex={media:/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi,keyframes:/@(?:\-(?:o|moz|webkit)\-)?keyframes[^\{]+\{(?:[^\{\}]*\{[^\}\{]*\})+[^\}]*\}/gi,comments:/\/\*[^*]*\*+([^/][^*]*\*+)*\//gi,urls:/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,findStyles:/@media *([^\{]+)\{([\S\s]+?)$/,only:/(only\s+)?([a-zA-Z]+)\s?/,minw:/\(\s*min\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/,maxw:/\(\s*max\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/,minmaxwh:/\(\s*m(in|ax)\-(height|width)\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/gi,other:/\([^\)]*\)/g},c.mediaQueriesSupported=a.matchMedia&&null!==a.matchMedia("only all")&&a.matchMedia("only all").matches,!c.mediaQueriesSupported){var h,i,j,k=a.document,l=k.documentElement,m=[],n=[],o=[],p={},q=30,r=k.getElementsByTagName("head")[0]||l,s=k.getElementsByTagName("base")[0],t=r.getElementsByTagName("link"),u=function(){var a,b=k.createElement("div"),c=k.body,d=l.style.fontSize,e=c&&c.style.fontSize,f=!1;return b.style.cssText="position:absolute;font-size:1em;width:1em",c||(c=f=k.createElement("body"),c.style.background="none"),l.style.fontSize="100%",c.style.fontSize="100%",c.appendChild(b),f&&l.insertBefore(c,l.firstChild),a=b.offsetWidth,f?l.removeChild(c):c.removeChild(b),l.style.fontSize=d,e&&(c.style.fontSize=e),a=j=parseFloat(a)},v=function(b){var c="clientWidth",d=l[c],e="CSS1Compat"===k.compatMode&&d||k.body[c]||d,f={},g=t[t.length-1],p=(new Date).getTime();if(b&&h&&q>p-h)return a.clearTimeout(i),i=a.setTimeout(v,q),void 0;h=p;for(var s in m)if(m.hasOwnProperty(s)){var w=m[s],x=w.minw,y=w.maxw,z=null===x,A=null===y,B="em";x&&(x=parseFloat(x)*(x.indexOf(B)>-1?j||u():1)),y&&(y=parseFloat(y)*(y.indexOf(B)>-1?j||u():1)),w.hasquery&&(z&&A||!(z||e>=x)||!(A||y>=e))||(f[w.media]||(f[w.media]=[]),f[w.media].push(n[w.rules]))}for(var C in o)o.hasOwnProperty(C)&&o[C]&&o[C].parentNode===r&&r.removeChild(o[C]);o.length=0;for(var D in f)if(f.hasOwnProperty(D)){var E=k.createElement("style"),F=f[D].join("\n");E.type="text/css",E.media=D,r.insertBefore(E,g.nextSibling),E.styleSheet?E.styleSheet.cssText=F:E.appendChild(k.createTextNode(F)),o.push(E)}},w=function(a,b,d){var e=a.replace(c.regex.comments,"").replace(c.regex.keyframes,"").match(c.regex.media),f=e&&e.length||0;b=b.substring(0,b.lastIndexOf("/"));var h=function(a){return a.replace(c.regex.urls,"$1"+b+"$2$3")},i=!f&&d;b.length&&(b+="/"),i&&(f=1);for(var j=0;f>j;j++){var k,l,o,p;i?(k=d,n.push(h(a))):(k=e[j].match(c.regex.findStyles)&&RegExp.$1,n.push(RegExp.$2&&h(RegExp.$2))),o=k.split(","),p=o.length;for(var q=0;p>q;q++)l=o[q],g(l)||m.push({media:l.split("(")[0].match(c.regex.only)&&RegExp.$2||"all",rules:n.length-1,hasquery:l.indexOf("(")>-1,minw:l.match(c.regex.minw)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:l.match(c.regex.maxw)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}v()},x=function(){if(d.length){var b=d.shift();f(b.href,function(c){w(c,b.href,b.media),p[b.href]=!0,a.setTimeout(function(){x()},0)})}},y=function(){for(var b=0;b<t.length;b++){var c=t[b],e=c.href,f=c.media,g=c.rel&&"stylesheet"===c.rel.toLowerCase();e&&g&&!p[e]&&(c.styleSheet&&c.styleSheet.rawCssText?(w(c.styleSheet.rawCssText,e,f),p[e]=!0):(!/^([a-zA-Z:]*\/\/)/.test(e)&&!s||e.replace(RegExp.$1,"").split("/")[0]===a.location.host)&&("//"===e.substring(0,2)&&(e=a.location.protocol+e),d.push({href:e,media:f})))}x()};y(),c.update=y,c.getEmValue=u,a.addEventListener?a.addEventListener("resize",b,!1):a.attachEvent&&a.attachEvent("onresize",b)}}(this);
\ No newline at end of file