default.vue 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. <template>
  2. <div class="wrapper">
  3. <div class="content">
  4. <div class="columns">
  5. <sidenav />
  6. <div class="main" id="main">
  7. <pw-header />
  8. <nuxt />
  9. <pw-footer />
  10. </div>
  11. <!-- <aside class="nav-second"></aside> -->
  12. </div>
  13. </div>
  14. </div>
  15. </template>
  16. <script>
  17. export default {
  18. components: {
  19. sidenav: () => import("../components/layout/sidenav"),
  20. "pw-header": () => import("../components/layout/header"),
  21. "pw-footer": () => import("../components/layout/footer"),
  22. },
  23. beforeMount() {
  24. // Load theme settings
  25. ;(() => {
  26. // Apply theme from settings.
  27. document.documentElement.className = this.$store.state.postwoman.settings.THEME_CLASS || ""
  28. // Load theme color data from settings, or use default color.
  29. let color = this.$store.state.postwoman.settings.THEME_COLOR || "#50fa7b"
  30. let vibrant = this.$store.state.postwoman.settings.THEME_COLOR_VIBRANT || true
  31. document.documentElement.style.setProperty("--ac-color", color)
  32. document.documentElement.style.setProperty(
  33. "--act-color",
  34. vibrant ? "rgba(32, 33, 36, 1)" : "rgba(255, 255, 255, 1)"
  35. )
  36. })()
  37. },
  38. mounted() {
  39. if (process.client) {
  40. document.body.classList.add("afterLoad")
  41. }
  42. document
  43. .querySelector("meta[name=theme-color]")
  44. .setAttribute("content", this.$store.state.postwoman.settings.THEME_TAB_COLOR || "#202124")
  45. console.log(
  46. "%cWe ❤︎ open source!",
  47. "background-color:white;padding:8px 16px;border-radius:8px;font-size:32px;color:red;"
  48. )
  49. console.log(
  50. "%cContribute: https://github.com/liyasthomas/postwoman",
  51. "background-color:black;padding:4px 8px;border-radius:8px;font-size:16px;color:white;"
  52. )
  53. },
  54. beforeDestroy() {
  55. document.removeEventListener("keydown", this._keyListener)
  56. },
  57. }
  58. </script>