页脚魔改(Nuxt版本)

前言

之前已经对页脚进行大规模的魔改过，但是效果一直不是很理想，而现在采用模块化来进行魔改是最为简单的一种。

注意

本组件尚未完成整体优化与魔改，请勿使用！在优化与魔改后会自行撤下。

页脚组件

注意

如何导入组件：

vue

<script lang="ts" setup>
// 导入组件位置（位置可以进行变换，只要能被导入位置引入即可）
import CopyrightCard from '../card/footer/copyrightCard.vue';
import InfoCard from '../card/infoCard.vue';
</script>

<template>
  <!-- 导入位置 -->
  <导入的位置-1 />
  <!-- 省略其余代码 -->
  <导入的位置-2 />
</template>

infoCard.vuevue

<template>
  <div class="FooterCard">
    <div class="head">
      <p class="title">
        {{ blogConfig.title }}
      </p>
      <p class="desc" v-for="(info, index) in footer_card_info" :key="index">
        {{ info.desc }}
      </p>
    </div>
    <div class="footer">
      <div class="button_div">
        <a class="button" v-for="(info, index) in footer_card_info" :key="index" :href="info.link" target="_blank">
          {{ info.link_button_name }}
        </a>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
// 提前导入配置，减少运行时延迟
import blogConfig from '~~/blog.config'

// 使用const声明，确保编译时常量优化
const footer_card_info = [{
  desc: '欢迎来到我的博客',
  link: '/about',
  link_button_name: '关于我的'
}]
</script>

<style lang="scss" scoped>
.FooterCard {
  text-align: center;
  
  .head {
    .title {
      font-size: 1.2rem;
      font-weight: 900;
    }
    
    .desc {
      font-size: 1rem;
    }
  }
  
  .footer {
    margin-top: 1rem;
    
    .button_div {
      padding: 0.5rem;
      background: var(--c-bg-2);
      border-radius: 1rem;
      margin: 0 auto;
      max-width: 20%;
      
      .button {
        // 移除默认链接样式
        text-decoration: none;
        color: inherit;
        display: inline-block;
        // 添加过渡效果提升用户体验
        transition: opacity 0.2s ease;
        
        &:hover {
          opacity: 0.8;
        }
      }
    }
  }
}
</style>

更新内容

V20260306-PRE

1.PUG更换为VUE写法，并且修复引入的数据在ts中无法正常显示的问题

V20251210-PRE

1.优化CSS样式
2.优化TS数据表项目

V20251109-PRE

1.使用PUG语法为组件展示
2.使用CSS语法为组件样式

前言

页脚组件

更新内容

页脚魔改(Nuxt版本)

作者

絮语

许可协议

评论