yige/blog-client
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

添加设置前端

Browse Source
This commit is contained in:
yi-ge 2020-08-21 21:12:37 +08:00
parent 295d959e6e
commit 93f32fc016
2 changed files with 186 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
nuxt.config.js
View File

@ -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' }
]
},

263
pages/post/_id.vue
View File

@ -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")'
)
| 关闭
</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)
.postPage
.articleDetails
padding 20px
margin-top 50px
.vue-module-buttons
display flex
flex 0 1 auto
width 100%
border-top 1px solid #eee
box-sizing border-box
text-align center
.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
.vue-module-button
font-size 12px !important
background transparent
padding 0
margin 0
border 0
cursor pointer
box-sizing border-box
line-height 40px
height 40px
color inherit
font inherit
outline none
text-align center
width 100%
.mobileToc
bottom 48px
@media (max-width 768px)
.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>