添加设置前端

nuxt.config.js

@@ -52,6 +52,7 @@ module.exports = {
     ],
     script: [
       { src: 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js', async: true, 'data-ad-client': 'ca-pub-2143583075951360' }
+      // { src: 'https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js' }
     ]
   },
 

pages/post/_id.vue

@@ -6,92 +6,168 @@
     .articalMeta
       ul
         li
-          Icon(:icon="['far', 'calendar-alt']")
+          Icon(:icon='["far", "calendar-alt"]')
           |   {{ articels.post_date }}
         li
-          Icon(:icon="['far', 'bookmark']")
+          Icon(:icon='["far", "bookmark"]')
-          nuxt-link(v-for='(relationships, index) in articels.term_relationships', :key='index', v-if='relationships.term_taxonomy && relationships.term_taxonomy.term && relationships.term_taxonomy.taxonomy === "category"', :to="'/' + relationships.term_taxonomy.term.slug")
+          nuxt-link(
+            v-for='(relationships, index) in articels.term_relationships',
+            :key='index',
+            v-if='relationships.term_taxonomy && relationships.term_taxonomy.term && relationships.term_taxonomy.taxonomy === "category"',
+            :to='"/" + relationships.term_taxonomy.term.slug'
+          )
             span
               |   {{ relationships.term_taxonomy.term.name }}
         li(v-if='articels.postmetum.meta_value !== 0')
-          Icon(:icon="['fas', 'thermometer-' + articels.hotValue]")
+          Icon(:icon='["fas", "thermometer-" + articels.hotValue]')
           |   {{ articels.postmetum.meta_value }}
-    #articelToc.articelToc(v-if="articels.post_toc_show")
+    #articelToc.articelToc(v-if='articels.post_toc_show')
       .articelTitle 目录
-      .articelTocList(v-html="articels.post_toc")
+      .articelTocList(v-html='articels.post_toc')
     .articelContent(v-html='articels.post_content', v-viewer)
     .tools
-      .reward(@click="reward") 打赏
+      .reward(@click='reward') 打赏
-    .comment(id="comment")
+    #comment.comment
       .comment-title 交流区
-        span(v-if="comments.length") ({{ commentAmount }})
+        span(v-if='comments.length') ({{ commentAmount }})
-      .comment-item(v-for="(item, index) in comments", :id="'comment_ID_' + item.comment_ID", :key="index")
+      .comment-item(
+        v-for='(item, index) in comments',
+        :id='"comment_ID_" + item.comment_ID',
+        :key='index'
+      )
         .comment-avatar
-          img(:src="item.comment_author_avatar_url ? item.comment_author_avatar_url : 'https://picsum.photos/100/100/?blur=' + item.user_id")
+          img(
+            :src='item.comment_author_avatar_url ? item.comment_author_avatar_url : "https://picsum.photos/100/100/?blur=" + item.user_id'
+          )
         .comment-area
           .comment-author {{ item.comment_author }}
-            span(class="comment-status", v-if="item.comment_approved === '0'")   此内容正在审核中...
+            span.comment-status(v-if='item.comment_approved === "0"')   此内容正在审核中...
-          .comment-content(v-html="item.comment_content_html", v-viewer)
+          .comment-content(v-html='item.comment_content_html', v-viewer)
           .comment-info {{ item.comment_date }}
-            span.reply(@click="reply(item.comment_ID, null, true)" v-if="replyLastID === null && item.comment_ID === replyID") 取消回复
+            span.reply(
-            span.reply(@click="reply(item.comment_ID, null)" v-else) 回复
+              @click='reply(item.comment_ID, null, true)',
-            span.reply(@click="check(item.comment_ID)" v-if="item.comment_approved === '0' && visitorInfo.manage") 通过审核
+              v-if='replyLastID === null && item.comment_ID === replyID'
-            span.reply(@click="check(item.comment_ID, 2)" v-else-if="visitorInfo.manage") 设为垃圾评论
+            ) 取消回复
-        .comment-item(v-for="(i, inx) in item.children", :id="'comment_ID_' + i.comment_ID", :key="inx", style="margin-top: 15px; margin-left: 50px; background-color: #eeeeee; border-radius: 4px;")
+            span.reply(@click='reply(item.comment_ID, null)', v-else) 回复
+            span.reply(
+              @click='check(item.comment_ID)',
+              v-if='item.comment_approved === "0" && visitorInfo.manage'
+            ) 通过审核
+            span.reply(
+              @click='check(item.comment_ID, 2)',
+              v-else-if='visitorInfo.manage'
+            ) 设为垃圾评论
+        .comment-item(
+          v-for='(i, inx) in item.children',
+          :id='"comment_ID_" + i.comment_ID',
+          :key='inx',
+          style='margin-top: 15px; margin-left: 50px; background-color: #eeeeee; border-radius: 4px;'
+        )
           .comment-avatar
-            img(:src="i.comment_author_avatar_url ? i.comment_author_avatar_url : 'https://picsum.photos/100/100/?blur=' + i.user_id")
+            img(
+              :src='i.comment_author_avatar_url ? i.comment_author_avatar_url : "https://picsum.photos/100/100/?blur=" + i.user_id'
+            )
           .comment-area
             .comment-author {{ i.comment_author }}
-              span(class="comment-status", v-if="i.comment_approved === '0'")   此内容正在审核中...
+              span.comment-status(v-if='i.comment_approved === "0"')   此内容正在审核中...
-            .comment-content(v-html="i.comment_content_html")
+            .comment-content(v-html='i.comment_content_html')
             .comment-info {{ i.comment_date }}
-              span.reply(@click="reply(item.comment_ID, i.comment_ID)" v-if="replyLastID !== i.comment_ID") 回复
+              span.reply(
-              span.reply(@click="reply(item.comment_ID, i.comment_ID, true)" v-else) 取消回复
+                @click='reply(item.comment_ID, i.comment_ID)',
-              span.reply(@click="check(i.comment_ID)" v-if="i.comment_approved === '0' && visitorInfo.manage") 通过审核
+                v-if='replyLastID !== i.comment_ID'
-              span.reply(@click="check(i.comment_ID, 2)" v-else-if="visitorInfo.manage") 设为垃圾评论
+              ) 回复
-      p(v-if="!comments.length", style="color: #cecece; text-align: center; margin-top: 40px") 暂无内容
+              span.reply(
+                @click='reply(item.comment_ID, i.comment_ID, true)',
+                v-else
+              ) 取消回复
+              span.reply(
+                @click='check(i.comment_ID)',
+                v-if='i.comment_approved === "0" && visitorInfo.manage'
+              ) 通过审核
+              span.reply(
+                @click='check(i.comment_ID, 2)',
+                v-else-if='visitorInfo.manage'
+              ) 设为垃圾评论
+      p(
+        v-if='!comments.length',
+        style='color: #cecece; text-align: center; margin-top: 40px'
+      ) 暂无内容
       .comment-default-commit
-        .login(v-show="!visitorToken")
+        .login(v-show='!visitorToken')
-          .item(v-for="(item, index) in loginPlatform", :key="index")
+          .item(v-for='(item, index) in loginPlatform', :key='index')
-            transition(name="qrcode")
+            transition(name='qrcode')
-              img(v-show="!commentLoading && useWeixinLogin && currentLoginType === item.type", class="qrcode", :src="weixinLoginQrcode")
+              img.qrcode(
-            img(class="logo", :class="{active: currentLoginType === item.type && useWeixinLogin && !commentLoading, loading: commentLoading && currentLoginType === item.type}", :src="item.logo", @click.stop="login(item.type)")
+                v-show='!commentLoading && useWeixinLogin && currentLoginType === item.type',
+                :src='weixinLoginQrcode'
+              )
+            img.logo(
+              :class='{ active: currentLoginType === item.type && useWeixinLogin && !commentLoading, loading: commentLoading && currentLoginType === item.type }',
+              :src='item.logo',
+              @click.stop='login(item.type)'
+            )
         #editor
         .comment-toolbar
-          .comment-no-userinfo(v-if="!visitorToken") 尚未登陆
+          .comment-no-userinfo(v-if='!visitorToken') 尚未登陆
           .comment-userinfo(v-else)
             .comment-avatar
-              img(:src="visitorInfo.avatarURL")
+              img(:src='visitorInfo.avatarURL')
-            .comment-nickname {{ visitorInfo.nickname ? visitorInfo.nickname : (visitorInfo.username || '匿名') }}
+            .comment-nickname {{ visitorInfo.nickname ? visitorInfo.nickname : visitorInfo.username || "匿名" }}
-            .comment-logout(@click="commentLogout") 退出
+            .comment-setting(@click='commentSetting') 设置
-          .comment-btn(@click="commentCommit('editor')") 发布
+            .comment-logout(@click='commentLogout') 退出
-      .comment-reply-commit(id="comment-reply-commit", v-show="replyID")
+          .comment-btn(@click='commentCommit("editor")') 发布
-        .login(v-show="!visitorToken")
+      #comment-reply-commit.comment-reply-commit(, v-show='replyID')
-          .item(v-for="(item, index) in loginPlatform", :key="index")
+        .login(v-show='!visitorToken')
-            transition(name="qrcode")
+          .item(v-for='(item, index) in loginPlatform', :key='index')
-              img(v-show="!commentLoading && useWeixinLogin && currentLoginType === item.type", class="qrcode", :src="weixinLoginQrcode")
+            transition(name='qrcode')
-            img(class="logo", :class="{active: currentLoginType === item.type && useWeixinLogin && !commentLoading, loading: commentLoading && currentLoginType === item.type}", :src="item.logo", @click.stop="login(item.type)")
+              img.qrcode(
+                v-show='!commentLoading && useWeixinLogin && currentLoginType === item.type',
+                :src='weixinLoginQrcode'
+              )
+            img.logo(
+              :class='{ active: currentLoginType === item.type && useWeixinLogin && !commentLoading, loading: commentLoading && currentLoginType === item.type }',
+              :src='item.logo',
+              @click.stop='login(item.type)'
+            )
         #editor-reply
         .comment-toolbar
-          .comment-no-userinfo(v-if="!visitorToken") 尚未登陆
+          .comment-no-userinfo(v-if='!visitorToken') 尚未登陆
           .comment-userinfo(v-else)
             .comment-avatar
-              img(:src="visitorInfo.avatarURL")
+              img(:src='visitorInfo.avatarURL')
-            .comment-nickname {{ visitorInfo.nickname ? visitorInfo.nickname : (visitorInfo.username || '匿名') }}
+            .comment-nickname {{ visitorInfo.nickname ? visitorInfo.nickname : visitorInfo.username || "匿名" }}
-            .comment-logout(@click="commentLogout") 退出
+            .comment-setting(@click='commentSetting') 设置
-          .comment-btn(@click="commentCommit('editor-reply')") 发布
+            .comment-logout(@click='commentLogout') 退出
-    ins.adsbygoogle(style="display:block; text-align:center; margin-top:20px;", data-ad-layout="in-article", data-ad-format="fluid", data-ad-client="ca-pub-2143583075951360", data-ad-slot="4741804954")
+          .comment-btn(@click='commentCommit("editor-reply")') 发布
-    .articelRightToc(v-show="articels.post_toc_show && showRightToc", @click="articelRightTocClick")
+    ins.adsbygoogle(
+      style='display:block; text-align:center; margin-top:20px;',
+      data-ad-layout='in-article',
+      data-ad-format='fluid',
+      data-ad-client='ca-pub-2143583075951360',
+      data-ad-slot='4741804954'
+    )
+    .articelRightToc(
+      v-show='articels.post_toc_show && showRightToc',
+      @click='articelRightTocClick'
+    )
       .articelTitle 目录
-      .articelTocList(v-html="articels.post_toc")
+      .articelTocList(v-html='articels.post_toc')
-  nuxt-link(:to="articels.last ? '/post/' + articels.last.ID : ''")
+  nuxt-link(:to='articels.last ? "/post/" + articels.last.ID : ""')
-    .btnFooter.btnPrevt(:style="'color: ' + (articels.last ? '#333' : '#ccc')")
+    .btnFooter.btnPrevt(:style='"color: " + (articels.last ? "#333" : "#ccc")')
-      Icon(:icon="['fas', 'chevron-left']")
+      Icon(:icon='["fas", "chevron-left"]')
-      |   上一篇 {{ articels.last ? '(' + decodeTitle(articels.last.post_name) + ')' : ''}}
+      |   上一篇 {{ articels.last ? "(" + decodeTitle(articels.last.post_name) + ")" : "" }}
-  nuxt-link(:to="articels.next ? '/post/' + articels.next.ID : ''")
+  nuxt-link(:to='articels.next ? "/post/" + articels.next.ID : ""')
-    .btnFooter.btnNext(:style="'color: ' + (articels.next ? '#333' : '#ccc')")
+    .btnFooter.btnNext(:style='"color: " + (articels.next ? "#333" : "#ccc")')
-      | 下一篇 {{ articels.next ? '(' + decodeTitle(articels.next.post_name) + ')' : ''}}  
+      | 下一篇 {{ articels.next ? "(" + decodeTitle(articels.next.post_name) + ")" : "" }}  
-      Icon(:icon="['fas', 'chevron-right']")
+      Icon(:icon='["fas", "chevron-right"]')
+  modal(name='setting')
+    div
+      | ok
+    .vue-module-buttons
+      button.vue-module-button(
+        type='button',
+        @click.stop='$modal.hide("setting")'
+      )
+        | 关闭
 </template>
 
 <script>
@@ -723,6 +799,9 @@ export default {
           }
         }
       }
+    },
+    commentSetting () {
+      this.$modal.show('setting')
     }
   },
   head () {
@@ -915,7 +994,7 @@ $logo-width = 64px
     .comment-status
       color #ca7474
 
-    .comment-logout
+    .comment-logout, .comment-setting
       width 51px
       height 100%
       line-height 30px
@@ -925,16 +1004,20 @@ $logo-width = 64px
       box-sizing border-box
       display none
       text-align center
+      float left
+
+    .comment-logout
+      margin-left 10px
 
     .comment-userinfo:hover
       .comment-avatar, .comment-nickname
         display none
 
-      .comment-logout
+      .comment-logout, .comment-setting
         display block
 
     .comment-userinfo:active
-      .comment-logout
+      .comment-logout, .comment-setting
         background-color #586069
         color #fff
 
@@ -1189,23 +1272,47 @@ $logo-width = 64px
   .vditor--fullscreen
     z-index 9999
 
-@media (max-width: 768px)
+  .vue-module-buttons
-  .postPage
+    display flex
-    .articleDetails
+    flex 0 1 auto
-      padding 20px
+    width 100%
-      margin-top 50px
+    border-top 1px solid #eee
+    box-sizing border-box
+    text-align center
 
-      .articelRightToc
+    .vue-module-button
-        position fixed
+      font-size 12px !important
-        width 80%
+      background transparent
-        top 100px
+      padding 0
-        bottom 95px
+      margin 0
-        right 10px
+      border 0
-        background-color #000
+      cursor pointer
-        padding 10px
+      box-sizing border-box
-        overflow-y auto
+      line-height 40px
-        box-shadow 0 0 8px #000
+      height 40px
+      color inherit
+      font inherit
+      outline none
+      text-align center
+      width 100%
 
-      .mobileToc
+  @media (max-width 768px)
-        bottom 48px
+    .postPage
+      .articleDetails
+        padding 20px
+        margin-top 50px
+
+        .articelRightToc
+          position fixed
+          width 80%
+          top 100px
+          bottom 95px
+          right 10px
+          background-color #000
+          padding 10px
+          overflow-y auto
+          box-shadow 0 0 8px #000
+
+        .mobileToc
+          bottom 48px
 </style>