add: 讨论
This commit is contained in:
@ -2,43 +2,52 @@
|
||||
div
|
||||
article.articleDetails
|
||||
.articleTitle
|
||||
| {{ Articels.post_title }}
|
||||
| {{ articels.post_title }}
|
||||
.articalMeta
|
||||
ul
|
||||
li
|
||||
Icon(:icon="['far', 'calendar-alt']")
|
||||
| {{ Articels.post_date }}
|
||||
| {{ 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', :to="'/' + relationships.term_taxonomy.term.slug")
|
||||
nuxt-link(v-for='(relationships, index) in articels.term_relationships', :key='index', v-if='relationships.term_taxonomy', :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]")
|
||||
| {{ Articels.postmetum.meta_value }}
|
||||
#articelToc.articelToc(v-if="Articels.post_toc_show")
|
||||
li(v-if='articels.postmetum.meta_value !== 0')
|
||||
Icon(:icon="['fas', 'thermometer-' + articels.hotValue]")
|
||||
| {{ articels.postmetum.meta_value }}
|
||||
#articelToc.articelToc(v-if="articels.post_toc_show")
|
||||
.articelTitle 目录
|
||||
.articelTocList(v-html="Articels.post_toc")
|
||||
.articelContent(v-html='Articels.post_content')
|
||||
.articelTocList(v-html="articels.post_toc")
|
||||
.articelContent(v-html='articels.post_content')
|
||||
.tools
|
||||
.reward(@click="reward") 打赏
|
||||
.comment
|
||||
p(style="color: #777; margin-bottom: 30px") 交流区
|
||||
span(v-if="comments.length") ({{commentAmount}})
|
||||
#editor
|
||||
p 说点什么吧...
|
||||
.comment-item(v-for="(item, index) in comments" :key="index")
|
||||
.comment-avatar
|
||||
img(:src="item.comment_author_avatar_url ? item.comment_author_avatar_url : 'https://picsum.photos/200/200/?blur=' + item.user_id")
|
||||
.comment-area
|
||||
.comment-author {{ item.comment_author }}
|
||||
.comment-content {{ item.comment_content }}
|
||||
.comment-info {{ item.comment_date }}
|
||||
span.reply 回复
|
||||
p(v-if="!comments.length", style="color: #cecece; text-align: center; margin-top: 40px") 暂无
|
||||
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")
|
||||
.articelRightToc(v-show="articels.post_toc_show && showRightToc", @click="articelRightTocClick")
|
||||
.articelTitle 目录
|
||||
.articelTocList(v-html="Articels.post_toc")
|
||||
p(style="margin: 15px 0;")
|
||||
img(src="https://cdn.wyr.me/imgs/reward.jpg" style="max-width: 100%; width: 200px")
|
||||
p(style="margin: 15px 0;") 评论功能已被暂时关闭，请通过 a@wyr.me 联系我。
|
||||
nuxt-link(:to="Articels.last ? '/post/' + Articels.last.ID : ''")
|
||||
.btnFooter.btnPrevt(:style="'color: ' + (Articels.last ? '#333' : '#ccc')")
|
||||
.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) + ')' : ''}}
|
||||
| 上一篇 {{ 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']")
|
||||
.comment
|
||||
div(v-for="(item, index) in Comments" :key="index")
|
||||
| {{ item.comment_content }}
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -58,20 +67,40 @@ export default {
|
||||
|
||||
// 获取评论
|
||||
const tmp = await $axios.$get(`/public/comments/post?ID=${route.params.id}`)
|
||||
const comments = tmp.result
|
||||
console.log(comments)
|
||||
const comments = tmp.result.list || []
|
||||
const commentAmount = tmp.result.amount || 0
|
||||
|
||||
return {
|
||||
Articels: result,
|
||||
Comments: comments,
|
||||
articels: result,
|
||||
comments,
|
||||
commentAmount,
|
||||
showRightToc: false,
|
||||
tocIds: result.post_toc_ids
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
// 创建编辑器
|
||||
if (process.client) {
|
||||
if (!window.editorObj && window.WangEditor) {
|
||||
window.editorObj = new window.Vditor('editor', {
|
||||
toolbarConfig: {
|
||||
pin: true
|
||||
},
|
||||
cache: {
|
||||
enable: false
|
||||
},
|
||||
after: () => {
|
||||
this.contentEditor.setValue('hello, Vditor + Vue!')
|
||||
}
|
||||
})
|
||||
// window.editorObj.customConfig.uploadImgShowBase64 = true // 使用 base64 保存图片
|
||||
// window.editorObj.create()
|
||||
}
|
||||
}
|
||||
|
||||
this.$finishLoad()
|
||||
|
||||
if (this.Articels.post_toc_show) {
|
||||
if (this.articels.post_toc_show) {
|
||||
const tocShow = () => {
|
||||
if (window.addEvent) {
|
||||
window.addEvent(window, 'scroll', () => {
|
||||
@ -237,11 +266,17 @@ export default {
|
||||
const leftBoundingOnScreen = elementLeftToWindowRight >= onScreenWidth
|
||||
|
||||
return bottomBoundingOnScreen && topBoundingOnScreen && rightBoundingOnScreen && leftBoundingOnScreen
|
||||
},
|
||||
reward () {
|
||||
this.$modal.show('dialog', {
|
||||
title: '感谢支持',
|
||||
text: '<img src="https://cdn.wyr.me/imgs/reward.jpg" style="max-width: 100%; width: 400px"/>'
|
||||
})
|
||||
}
|
||||
},
|
||||
head () {
|
||||
return {
|
||||
title: `${this.Articels.post_title} - 轶哥`
|
||||
title: `${this.articels.post_title} - 轶哥`
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -312,6 +347,40 @@ export default {
|
||||
|
||||
.comment
|
||||
width 100%
|
||||
margin-top 45px
|
||||
|
||||
.comment-item
|
||||
margin-top 20px
|
||||
|
||||
.comment-avatar
|
||||
float left
|
||||
margin-top 3px
|
||||
|
||||
img
|
||||
border-radius 50%
|
||||
width 40px
|
||||
border-style none
|
||||
cursor pointer
|
||||
box-sizing border-box
|
||||
margin 0
|
||||
|
||||
.comment-area
|
||||
margin-left 50px
|
||||
|
||||
.comment-author, .comment-info
|
||||
font-size 10px
|
||||
|
||||
.comment-author
|
||||
color #a1887f
|
||||
|
||||
.comment-info
|
||||
color #777
|
||||
|
||||
.reply
|
||||
color #a1887f
|
||||
cursor pointer
|
||||
user-select none
|
||||
margin-left 10px
|
||||
|
||||
.btnFooter
|
||||
font-size 12px
|
||||
@ -347,6 +416,7 @@ footer .footer
|
||||
background-color #000
|
||||
padding 10px
|
||||
box-shadow 0 0 8px #000
|
||||
z-index 999999
|
||||
|
||||
.articelToc
|
||||
width 100%
|
||||
@ -393,6 +463,22 @@ footer .footer
|
||||
li
|
||||
font-weight 300
|
||||
|
||||
.tools
|
||||
margin-top 80px
|
||||
margin-bottom 10px
|
||||
text-align center
|
||||
user-select none
|
||||
|
||||
.reward
|
||||
margin 15px 0
|
||||
border 1px solid #888
|
||||
padding 5px 10px
|
||||
display inline-block
|
||||
color #888
|
||||
font-weight 300
|
||||
cursor pointer
|
||||
margin auto
|
||||
|
||||
@media (max-width: 768px)
|
||||
.articleDetails
|
||||
padding 20px
|
||||
|
||||
Reference in New Issue
Block a user