博客2.0装修

2020年1月30日凌晨

1.2k 字 10 分钟

经过将近两个星期的折腾，博客2.0终于装修完毕，在装修过程中吸取了其他一下博客的灵感进行设计。

首页

本来首页是参考~~（抄袭）~~樱花庄的白猫的首页。
但后来看到闪烁之狐的首页页头是一个幻灯片，中间大而醒目的文案，能够承载多个主题级别的元素。
就觉得放在首页里非常合适，也与我原本的设计类似。所以现在首页用于展示重要的，较长时间不修改的素材。

导航其实只是进行了优化，设计还是参考樱花庄的白猫的。但我发现了个有趣的现象。
导航默认状态下隐藏，鼠标点击时显示，这里可以用到v-if和v-show。v-if是如想象中的控制是否显示，但是加上后v-show却有式文本渐变出现的功能。

<template>
  <b-navbar @mouseenter="show=true" @mouseleave="show=false">

    <!--这里的v-if自然是控制是否显示，但是v-show却有式文本渐变出现的功能-->
    <b-collapse id="nav-collapse" is-nav v-if="show" v-show="show">
      <b-navbar-nav align="center">
        <b-nav-item v-for="(nav,i) in config.navs?config.navs:[]" :key="i" :href="nav.url">
          <b>{{nav.text}}</b>
        </b-nav-item>
      </b-navbar-nav>
    </b-collapse>

  </b-navbar>
</template>