说说页面（Nuxt版本）

前言

对于自身来讲，在为了区分闲言和文章的过程中总会用到这个的，但是一直在本地部署->无服务器部署->云服务器部署这三环里面绕圈。如果给3种不同部署方式来进行单独页面配置会导致页面开销极大。而自己的博客相较之前的不同框架来讲易用性会更好，所以我就一直想着要不做模块拆分+嵌套引入的方式来完成这个操作，从而通过v-if或者v-else-if来进行适配条件。那么话到此处，就先来上手吧。

魔改前的配置

既然要来实践了，在多模块的驱动下。如果每一个都需要单独配置，那就会导致后续重写的难度会逐步增加，这会导致整体易用性困难。那就需要我们来进行全局配置，通过调用app.config.ts或者blog.config.ts中的自定义配置项来解决这个问题。如以下配置:

'blog.config.ts'ts

  essay: {
    API: {
      ISPEAK: 'https://ispeak.api.wxuyu.top/',
      MEMOS: '',
    },
    CONFIG: {
      ISPEAK_CONFIG: {
        author: '69d21e1f84a9d355ffe37d55',
        error_image: 'https://lib.bsgun.cn/Hexo-static/img/avatar.256.avif'
      },
      LOCAL_ESSAY: {
        page_size: 10
      },
    },
    TYPE: 'local',
  },

配置项	功能
ESSAY_API	集合不同类别的API链接，通过在不同模块中调用该配置项中的特定内容来进行链接拼接的位置，例如：`${API.ISPEAK}/api`
ESSAY_CONFIG	集合不同类别的配置项，通过在不同模块中调用配置项中的特定内容来进行拼合链接或者作为显示多少数据量，例如：`${API.ISPEAK}/api/${test_config_post}?author${CONFIG.ISPEAK.author}`
TYPE	通过不同模块中的类别判定来驱动`v-if` 或者`v-else-is` 来进行显示隐藏

核心代码

页面配置

以下为整体的显隐逻辑页面，因为博客框架是用到纸鹿的博客源码进行构造，其他博客框架按照如何实现来进行适配

vue

<script setup lang="ts">
import Ispeak_Page_Main from '~/components/yjluo/essay/ispeak/Page_Main.vue';
import Local_Page_Main from '~/components/yjluo/essay/local/PageMain.vue';
// 全局配置
const appConfig = useAppConfig()
const layoutStore = useLayoutStore()

// 设置侧边栏组件
layoutStore.setAside(['blog-stats', 'blog-tech', 'blog-log'])
</script>

<template>
  <div v-if="appConfig.essay.TYPE === 'ispeak'">
    <Ispeak_Page_Main />
  </div>
  <div v-if="appConfig.essay.TYPE === 'memos'">

  </div>
  <template v-if="appConfig.essay.TYPE === 'local'">
    <Local_Page_Main />
  </template>
  
  <PostComment />
</template>

数据源

整体的数据源其实很杂，所以这边我用直观的展示方式来给到需要的人。

这个数据原版是采用了ispeak官方原版未构建成js时的源码来进行加入

export interface TagType {
  bgColor: string
  createAt: Date
  description: string
  name: string
  orderNo: number
  user: string
  _id: string
}
export interface SpeakType {
  author: { nickName: string; avatar: string }
  content: string
  createdAt: Date
  showComment: '1' | '0'
  tag: TagType
  title: string
  type: '0' | '1' | '2'
  updatedAt: Date
  _id: string
}

整体页面

未写完，请勿使用

说说页面（Nuxt版本）

前言

魔改前的配置

核心代码

页面配置

数据源

整体页面

说说页面（Nuxt版本）

评论区