进行了小升级

What: 暂时关闭播放器，修复若干小BUG

Why: 为了更好

How: 没有副作用

README.md

@@ -104,7 +104,7 @@ $ npm run lint
 - ~~添加app下载页~~
 - ~~app下载按钮的位置,下载按钮背景颜色改为模块背景色半透明，文件不能放在服务器，太慢了，和移动端下载页需要适配~~
 - http://music.163.com/#/playlist?id=638949385
-- movie的单独列表页和详情页
+- 播放器挂了，挂了就挂了吧
 - graphql-js + Restful查询数据库
 
 ## 目录结构

components/article/archive/carrousel.vue

@@ -49,13 +49,17 @@
     computed: {
       mobileLayout() {
         return this.$store.state.option.mobileLayout
+      },
+      userAgent() {
+        return this.$store.state.option.userAgent
       }
     },
     methods: {
       buildThumb(thumb) {
         if (thumb) {
           if (this.mobileLayout) {
-            return `${thumb}?imageView2/1/w/768/h/271/format/webp/interlace/1/q/80|watermark/2/text/U3VybW9uLm1l/font/Y2FuZGFyYQ==/fontsize/560/fill/I0ZGRkZGRg==/dissolve/30/gravity/SouthWest/dx/30/dy/15|imageslim`
+            let isIos  = (/(iPhone|iPad|iPod|iOS)/i.test(this.userAgent))
+            return `${thumb}?imageView2/1/w/768/h/271/format/${isIos ? 'jpeg' : 'webp'}/interlace/1/q/80|watermark/2/text/U3VybW9uLm1l/font/Y2FuZGFyYQ==/fontsize/560/fill/I0ZGRkZGRg==/dissolve/30/gravity/SouthWest/dx/30/dy/15|imageslim`
           } else {
             return `${thumb}?imageView2/1/w/1190/h/420/format/webp/interlace/1/q/80|watermark/2/text/U3VybW9uLm1l/font/Y2FuZGFyYQ==/fontsize/680/fill/I0ZGRkZGRg==/dissolve/30/gravity/SouthWest/dx/30/dy/15|imageslim`
           }

components/layout/header.vue

@@ -7,7 +7,7 @@
           <span class="navbar-slogan">Talk is cheap. Show me the code</span>
           <router-link to="/" class="navbar-link"></router-link>
         </div>
-        <div class="navbar-player">
+        <div class="navbar-player" v-if="false">
           <div class="panel">
             <button class="prev-song btn" @click="prevSong" :disabled="!playerState.ready">
               <i class="iconfont icon-music-prev"></i>
@@ -25,16 +25,16 @@
           <div class="song" v-if="currentSong">
             <nuxt-link to="/music" 
                        class="link" 
-                       :title="`${currentSong.name} / ${currentSong.album.type || 'unknow'}`">
+                       :title="`${currentSong.name} / ${currentSong.album.name || 'unknow'}`">
               <span>{{ currentSong.name }}</span>
               <span> By </span>
               <span v-for="artist in currentSong.artists">{{ artist.name }}</span>
               <span> / </span>
-              <span>{{ currentSong.album.type || 'unknow' }}</span>
+              <span>{{ currentSong.album.name || 'unknow' }}</span>
             </nuxt-link>
           </div>
-          <img :src="currentSongPicUrl" v-show="false">
-          <img src="/images/app-hot.png" v-show="false">
+          <!-- <img :src="currentSongPicUrl" v-show="false"> -->
+          <!-- <img src="/images/app-hot.png" v-show="false"> -->
         </div>
       </div>
     </nav>
@@ -44,6 +44,7 @@
 <script>
 export default {
   name: 'header',
+  /*
   computed: {
     player() {
       return this.$store.state.music.player
@@ -85,6 +86,7 @@ export default {
       }
     }
   }
+  */
 }
 </script>
 

layouts/default.vue

@@ -52,7 +52,7 @@
     mounted() {
       this.watchTabActive()
       if (!this.mobileLayout) {
-        this.$store.dispatch('loadMuiscPlayerList')
+        // this.$store.dispatch('loadMuiscPlayerList')
       }
       if (process.env.NODE_ENV === 'production') {
         console.clear()

nuxt.config.js

@@ -14,7 +14,7 @@ module.exports = {
     //   analyzerMode: 'static'
     // },
     // 对webpack的扩展
-    extend(webpackConfig) {
+    extend(webpackConfig, { dev, isClient, isServer }) {
       webpackConfig.resolve.alias['~utils'] = path.join(__dirname, 'utils')
       webpackConfig.resolve.alias['~static'] = path.join(__dirname, 'static')
       webpackConfig.resolve.alias['~filters'] = path.join(__dirname, 'filters')

package.json

@@ -15,7 +15,7 @@
     "howler": "^2.0.3",
     "idle-gc": "^1.0.1",
     "marked": "^0.3.6",
-    "nuxt": "^0.10.6",
+    "nuxt": "^0.10.7",
     "particles.js": "^2.0.0",
     "vue-awesome-swiper": "^2.3.8"
   },
@@ -37,6 +37,7 @@
     "eslint-plugin-html": "^2.0.0",
     "eslint-plugin-promise": "^3.4.0",
     "eslint-plugin-standard": "^2.0.1",
+    "html-minifier": "^3.5.0",
     "node-sass": "^4.5.0",
     "sass-loader": "^4.1.1"
   }

pages/about.vue

@@ -209,6 +209,8 @@
 
                 > .project-link {
                   height: auto;
+                  padding-top: 2rem;
+                  overflow: hidden;
 
                   > .title {
                     font-size: 2em;

pages/article/_article_id.vue

@@ -10,6 +10,14 @@
       <transition name="module" mode="out-in">
         <div class="content" v-html="articleContent" v-if="!fetching && article.content"></div>
       </transition>
+      <transition name="module" mode="out-in">
+        <div class="readmore" v-if="canReadMore">
+          <button class="readmore-btn" :disabled="readMoreLoading" @click="readMore()">
+            <span>{{ !readMoreLoading ? '阅读余下全文' : '渲染中...' }}</span>
+            <i class="iconfont icon-next-bottom"></i>
+          </button>
+        </div>
+      </transition>
     </div>
     <share-box class="article-share" v-if="!fetching && article.content"></share-box>
     <transition name="module" mode="out-in">
@@ -134,7 +142,10 @@
           grabCursor : true,
           slidesPerView: 'auto',
           spaceBetween: 14
-        }
+        },
+        canReadMore: false,
+        fullContentEd: false,
+        readMoreLoading: false
       }
     },
     mounted() {
@@ -147,11 +158,41 @@
       article() {
         return this.$store.state.article.detail.data
       },
-      articleContent () {
+      articleContent() {
         let content = this.article.content
         if (!content) return ''
         const hasTags = Object.is(this.tags.code, 1) && !!this.tags.data.length
-        return marked(content, hasTags ? this.tags.data : false, true)
+        if (content.length > 11688 && !this.fullContentEd) {
+          this.canReadMore = true
+          let shortContent = content.substring(0, 9888)
+          let lastH4Index = shortContent.lastIndexOf('#### ')
+          let lastH3Index = shortContent.lastIndexOf('### ')
+          let lastCodeIndex = shortContent.lastIndexOf('\n```')
+          let lastLineIndex = shortContent.lastIndexOf('\n')
+          let lastReadindex = 0
+          switch(true) {
+            case lastCodeIndex > -1:
+                lastReadindex = lastCodeIndex
+                            break
+            case lastLineIndex > -1:
+                lastReadindex = lastLineIndex
+                            break
+            case lastH4Index > -1:
+                lastReadindex = lastH4Index
+                            break
+            case lastH3Index > -1:
+                lastReadindex = lastH3Index
+                            break
+                          default:
+                lastReadindex = 9888
+                            break
+          }
+          shortContent = shortContent.substring(0, lastReadindex)
+          return marked(shortContent, hasTags ? this.tags.data : false, true)
+        } else {
+          this.canReadMore = false
+          return marked(content, hasTags ? this.tags.data : false, true)
+        }
       },
       fetching() {
         return this.$store.state.article.detail.fetching
@@ -164,6 +205,14 @@
       }
     },
     methods: {
+      readMore() {
+        this.readMoreLoading = true
+        this.$nextTick(() => {
+          setTimeout(() => {
+            this.fullContentEd = true
+          }, 0)
+        })
+      },
       clipboard() {
         if (this.article.title) {
           this.clipboard = new Clipboard(this.$refs.copy_url_btn)
@@ -432,6 +481,60 @@
           }
         }
       }
+
+      @keyframes readmorebtn {
+        0% { 
+          transform: translate3d(0, 0, 0);
+          background-color: $module-hover-bg;
+        }
+        25% { 
+          transform: translate3d(0, .5rem, 0);
+          background-color: $primary;
+          color: white;
+        }
+        50% { 
+          transform: translate3d(0, 0, 0);
+          background-color: $module-hover-bg;
+        }
+        75% { 
+          transform: translate3d(0, .5rem, 0);
+          background-color: $primary;
+          color: white;
+        }
+        100% { 
+          transform: translate3d(0, 0, 0);
+          background-color: $module-hover-bg;
+        }
+      }
+
+      > .readmore {
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        margin-bottom: .8rem;
+
+        > .readmore-btn {
+          width: 80%;
+          text-align: center;
+          height: 3rem;
+          line-height: 3rem;
+          background-color: $module-hover-bg;
+          animation: readmorebtn 4s linear infinite;
+
+          &[disabled] {
+            cursor: no-drop;
+          }
+
+          &:hover {
+            background-color: $primary!important;
+            color: white!important;
+          }
+
+          > .iconfont {
+            margin-left: .5rem;
+          }
+        }
+      }
     }
 
     .article-share {
@@ -440,7 +543,6 @@
       background-color: $module-bg;
 
       > .share-box {
-        
       }
     }
 

pages/music.vue

@@ -52,7 +52,7 @@
         <span> By </span>
         <span v-for="artist in currentSong.artists">{{ artist.name }}</span>
         <span> / </span>
-        <span>{{ currentSong.album.type || 'unknow' }}</span>
+        <span>{{ currentSong.album.name || 'unknow' }}</span>
       </h3>
     </div>
   </div>

plugins/marked.js

@@ -18,6 +18,9 @@ marked.setOptions({
 
 const renderer = new marked.Renderer()
 
+// 段落解析
+const paragraphParse = text => `<p>${text}</p>`
+
 // 对连接进行权重防流和新窗处理
 const linkParse = (href, title, text) => {
   const isSelf = href.includes('surmon.me')
@@ -26,7 +29,7 @@ const linkParse = (href, title, text) => {
              target="_blank" 
              class="${textIsImage ? 'image-link' : 'link'}"
              title="${title || (textIsImage ? href : text)}" 
-             ${isSelf ? '' : 'rel="external nofollow"'}>${text}</a>`
+             ${isSelf ? '' : 'rel="external nofollow"'}>${text}</a>`.replace(/\s+/g, ' ').replace('\n', '')
 }
 
 // 对图片进行弹窗处理
@@ -35,7 +38,7 @@ const imageParse = (src, title, alt) => {
   return `<img src="${src}" 
                title="${title || alt || 'surmon.me'}" 
                alt="${alt || title || src}" 
-               onclick="if(window.utils) window.utils.openImgPopup('${src}')"/>`
+               onclick="if(window.utils) window.utils.openImgPopup('${src}')"/>`.replace(/\s+/g, ' ').replace('\n', '')
 }
 
 // 代码解析器（行号处理）
@@ -48,24 +51,25 @@ const codeParse = function(code, lang, escaped) {
     }
   }
   const lineNums = code.split('\n').map((l, i) => {
-    return `<li class="code-line-number">${i + 1}</li>`
+    return `<li class="code-line-number">${i + 1}</li>`.replace(/\s+/g, ' ')
   }).join('')
   if (!lang) {
     return `<pre>
               <ul class="code-lines">${lineNums}</ul>
               <code>${(escaped ? code : escape(code, true))}\n</code>
-            </pre>`
+            </pre>`.replace('\n', '')
   } else {
     return `<pre data-lang="${lang}">
-            <ul class="code-lines">${lineNums}</ul>
-            <code class="${this.options.langPrefix}${escape(lang, true)}">${(escaped ? code : escape(code, true))}\n</code>
-          </pre>\n`
+              <ul class="code-lines">${lineNums}</ul>
+              <code class="${this.options.langPrefix}${escape(lang, true)}">${(escaped ? code : escape(code, true))}\n</code>
+            </pre>\n`.replace('\n', '')
   }
 }
 
 renderer.link = linkParse
 renderer.code = codeParse
 renderer.image = imageParse
+renderer.paragraph = paragraphParse
 
 export default (content, tags, parseHtml = false) => {
 

store/index.js

@@ -15,6 +15,7 @@ export const actions = {
     const userAgent = isServer ? req.headers['user-agent'] : navigator.userAgent
     const isMobile = /(iPhone|iPod|Opera Mini|Android.*Mobile|NetFront|PSP|BlackBerry|Windows Phone)/ig.test(userAgent)
     store.commit('option/SET_MOBILE_LAYOUT', isMobile)
+    store.commit('option/SET_USER_AGENT', userAgent)
     const initAppData = [
       // 配置数据
       store.dispatch('loadAdminInfo'),
@@ -223,8 +224,10 @@ export const actions = {
       const success = Object.is(response.statusText, 'OK') && Object.is(response.data.code, 1)
       if(success) commit('article/GET_DETAIL_SUCCESS', response.data)
       if(!success) commit('article/GET_DETAIL_FAILURE')
+      return Promise.resolve(response.data)
     }, err => {
       commit('article/GET_DETAIL_FAILURE', err)
+      return Promise.reject(err)
     })
   },
 

store/music.js

@@ -45,7 +45,7 @@ export const getters = {
 export const mutations = {
 
   INIT_PLAYER(state) {
-    musicPlayerBuilder(state)
+    // musicPlayerBuilder(state)
   },
 
   REQUEST_LIST(state) {

store/option.js

@@ -14,6 +14,8 @@ export const state = {
   mobileLayout: false,
   // 移动端侧边栏
   mobileSidebar: false,
+  // ua
+  userAgent: '',
 
   // 服务端博主信息
   adminInfo: {
@@ -38,6 +40,11 @@ export const getters = {
 
 export const mutations = {
 
+  // 设置UA
+  SET_USER_AGENT(state, action) {
+    state.userAgent = action
+  },
+
   // 设置是否移动端状态
   SET_MOBILE_LAYOUT(state, action) {
     state.mobileLayout = action

store/project.js

@@ -18,7 +18,7 @@ export const mutations = {
   REQUEST_GUTHUB_REPOSITORIES_SUCCESS(state, action) {
     state.repositories.fetching = false
     const newRepositories = action.result
-    .filter(rep => !Object.is(rep.description[0], '#'))
+    .filter(rep => !rep.description.startsWith('#'))
     .map(rep => {
       return {
         html_url: rep.html_url,