From 93f32fc016610be7fa49292f318963f51154553a Mon Sep 17 00:00:00 2001 From: yige Date: Fri, 21 Aug 2020 21:12:37 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=AE=BE=E7=BD=AE=E5=89=8D?= =?UTF-8?q?=E7=AB=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- nuxt.config.js | 1 + pages/post/_id.vue | 263 +++++++++++++++++++++++++++++++-------------- 2 files changed, 186 insertions(+), 78 deletions(-) diff --git a/nuxt.config.js b/nuxt.config.js index a4cf62c..012813c 100644 --- a/nuxt.config.js +++ b/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' } ] }, diff --git a/pages/post/_id.vue b/pages/post/_id.vue index 14086b4..779d051 100644 --- a/pages/post/_id.vue +++ b/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']") - 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") + 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' + ) 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") 打赏 - .comment(id="comment") + .reward(@click='reward') 打赏 + #comment.comment .comment-title 交流区 - span(v-if="comments.length") ({{ commentAmount }}) - .comment-item(v-for="(item, index) in comments", :id="'comment_ID_' + item.comment_ID", :key="index") + span(v-if='comments.length') ({{ commentAmount }}) + .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'")   此内容正在审核中... - .comment-content(v-html="item.comment_content_html", v-viewer) + span.comment-status(v-if='item.comment_approved === "0"')   此内容正在审核中... + .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(@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;") + span.reply( + @click='reply(item.comment_ID, null, true)', + v-if='replyLastID === null && item.comment_ID === replyID' + ) 取消回复 + 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'")   此内容正在审核中... - .comment-content(v-html="i.comment_content_html") + span.comment-status(v-if='i.comment_approved === "0"')   此内容正在审核中... + .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(@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") 暂无内容 + span.reply( + @click='reply(item.comment_ID, i.comment_ID)', + v-if='replyLastID !== i.comment_ID' + ) 回复 + 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") - .item(v-for="(item, index) in loginPlatform", :key="index") - transition(name="qrcode") - img(v-show="!commentLoading && useWeixinLogin && currentLoginType === item.type", class="qrcode", :src="weixinLoginQrcode") - img(class="logo", :class="{active: currentLoginType === item.type && useWeixinLogin && !commentLoading, loading: commentLoading && currentLoginType === item.type}", :src="item.logo", @click.stop="login(item.type)") + .login(v-show='!visitorToken') + .item(v-for='(item, index) in loginPlatform', :key='index') + transition(name='qrcode') + 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 .comment-toolbar - .comment-no-userinfo(v-if="!visitorToken") 尚未登陆 + .comment-no-userinfo(v-if='!visitorToken') 尚未登陆 .comment-userinfo(v-else) .comment-avatar - img(:src="visitorInfo.avatarURL") - .comment-nickname {{ visitorInfo.nickname ? visitorInfo.nickname : (visitorInfo.username || '匿名') }} - .comment-logout(@click="commentLogout") 退出 - .comment-btn(@click="commentCommit('editor')") 发布 - .comment-reply-commit(id="comment-reply-commit", v-show="replyID") - .login(v-show="!visitorToken") - .item(v-for="(item, index) in loginPlatform", :key="index") - transition(name="qrcode") - img(v-show="!commentLoading && useWeixinLogin && currentLoginType === item.type", class="qrcode", :src="weixinLoginQrcode") - img(class="logo", :class="{active: currentLoginType === item.type && useWeixinLogin && !commentLoading, loading: commentLoading && currentLoginType === item.type}", :src="item.logo", @click.stop="login(item.type)") + img(:src='visitorInfo.avatarURL') + .comment-nickname {{ visitorInfo.nickname ? visitorInfo.nickname : visitorInfo.username || "匿名" }} + .comment-setting(@click='commentSetting') 设置 + .comment-logout(@click='commentLogout') 退出 + .comment-btn(@click='commentCommit("editor")') 发布 + #comment-reply-commit.comment-reply-commit(, v-show='replyID') + .login(v-show='!visitorToken') + .item(v-for='(item, index) in loginPlatform', :key='index') + transition(name='qrcode') + 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") - .comment-nickname {{ visitorInfo.nickname ? visitorInfo.nickname : (visitorInfo.username || '匿名') }} - .comment-logout(@click="commentLogout") 退出 - .comment-btn(@click="commentCommit('editor-reply')") 发布 - 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") + img(:src='visitorInfo.avatarURL') + .comment-nickname {{ visitorInfo.nickname ? visitorInfo.nickname : visitorInfo.username || "匿名" }} + .comment-setting(@click='commentSetting') 设置 + .comment-logout(@click='commentLogout') 退出 + .comment-btn(@click='commentCommit("editor-reply")') 发布 + 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") - nuxt-link(:to="articels.last ? '/post/' + articels.last.ID : ''") - .btnFooter.btnPrevt(:style="'color: ' + (articels.last ? '#333' : '#ccc')") - Icon(:icon="['fas', 'chevron-left']") - |   上一篇 {{ articels.last ? '(' + decodeTitle(articels.last.post_name) + ')' : ''}} - nuxt-link(:to="articels.next ? '/post/' + articels.next.ID : ''") - .btnFooter.btnNext(:style="'color: ' + (articels.next ? '#333' : '#ccc')") - | 下一篇 {{ articels.next ? '(' + decodeTitle(articels.next.post_name) + ')' : ''}}   - Icon(:icon="['fas', 'chevron-right']") + .articelTocList(v-html='articels.post_toc') + nuxt-link(:to='articels.last ? "/post/" + articels.last.ID : ""') + .btnFooter.btnPrevt(:style='"color: " + (articels.last ? "#333" : "#ccc")') + Icon(:icon='["fas", "chevron-left"]') + |   上一篇 {{ articels.last ? "(" + decodeTitle(articels.last.post_name) + ")" : "" }} + nuxt-link(:to='articels.next ? "/post/" + articels.next.ID : ""') + .btnFooter.btnNext(:style='"color: " + (articels.next ? "#333" : "#ccc")') + | 下一篇 {{ articels.next ? "(" + decodeTitle(articels.next.post_name) + ")" : "" }}   + Icon(:icon='["fas", "chevron-right"]') + modal(name='setting') + div + | ok + .vue-module-buttons + button.vue-module-button( + type='button', + @click.stop='$modal.hide("setting")' + ) + | 关闭