_slug.vue 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. <template>
  2. <div class="blog-editor-container">
  3. <div class="container">
  4. <div class="blog-section-user">
  5. <user-tile
  6. :name="blog.author.name"
  7. :avatar="blog.author.avatar"
  8. :date="blog.createdAt | formatDate"
  9. />
  10. </div>
  11. <!-- <div class="blog-content" v-html="blog.content"></div> -->
  12. <editor-view :initialContent="blog.content" />
  13. </div>
  14. </div>
  15. </template>
  16. <script>
  17. import UserTile from '~/components/shared/UserTile'
  18. import EditorView from "~/components/editor/EditorView";
  19. export default {
  20. head() {
  21. return {
  22. title: this.blog.title,
  23. meta: [
  24. { hid: 'description', name: 'description', content: this.blog.subtitle }
  25. ]
  26. }
  27. },
  28. components: {
  29. UserTile,
  30. EditorView
  31. },
  32. computed: {
  33. blog() {
  34. return this.$store.state.blog.item
  35. }
  36. },
  37. async fetch({store, params}) {
  38. await store.dispatch('blog/fetchBlogBySlug', params.slug)
  39. }
  40. }
  41. </script>
  42. <style scoped lang="scss">
  43. .blog-content, .blog-section-user {
  44. max-width: 800px;
  45. margin: 10px auto;
  46. }
  47. </style>