本站 - 导航站模块

笔记

主题自带的卡片列表不适合制作导航卡片，于是我稍微自己实现了它。

2021-01-11 @Jamey

一. 前言

目前适用版本是 Vdoing v1.x。

导航卡片是什么，请先看我的导航站：https://www.aligoogle.net/navigation/ (opens new window)

因为个人不使用本地主题，所以无法直接获取一个文章的内容来解析，只能一切都在本地代码制作。

二. Vue组件

导航卡片需要一个 Vue 组件，在 docs/.vuepress/components 下创建 Card.vue 组件，如果没有 components 文件夹，请创建。

组件添加如下内容：

<template>
  <div>
    <template v-if="cardData[0].title != undefined">
      <div style="text-align: center; font-weight: 900">{{ cardData[0].title }}</div>
    </template>
    <div class="kbt-row">
      <div
      class="card-nav-box"
      :style="
        cardListSize == 4
          ? 'width: 25%;'
          : cardListSize == 2
          ? 'width: 50%;'
          : 'width: 33.333%;'
      "
      v-for="(item,index) in cardData"
      :key="index"
    >
      <a :href="item.cardSrc" target="_blank">
        <div class="card-nav-item">
          <div class="card-nav-title">
            <img
              v-if="item.cardImgSrc && item.cardImgSrc != ''"
              :src="item.cardImgSrc"
              alt="正在加载 ..."
              class="card-nav-img"
            />
            <p class="card-nav-name" :style="'color:' + carTitleColor">
              {{ item.cardName }}
            </p>
          </div>
          <div :title="item.cardContent" class="card-nav-content">
            {{ item.cardContent }}
          </div>
        </div>
      </a>
    </div>
  </div>
  </div>
</template>

<script>
export default {
  props: {
    cardData: {
      type: Array,
      default: [],
    },
    cardListSize: {
      type: Number,
      default: 3,
    },
    carTitleColor: {
      type: String,
      default: "#000",
    },
    carHoverColor: {
      type: String,
      default: "#000",
    },
  },
  
  mounted() {
    this.cardHoverColor();
  },
  
  methods: {
    cardHoverColor() {
      if(!document.querySelector(".card")){
        const carHoverColor = this.carHoverColor;
        let style = document.createElement("style");
        style.className = 'card';
        style.innerHTML = `.card-nav-content:hover{color: ${carHoverColor}}`;
        document.head.appendChild(style);
      }
    },
  },
};
</script>

<style scoped>
.kbt-row {
  margin: 0.7rem 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.card-nav-box {
  padding: 0 10px 0 10px;
  box-sizing: border-box;
}
.card-nav-box a:hover {
  text-decoration: none !important;
}
.card-nav-item {
  min-height: 76px;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 10px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%);
  transition: all 0.4s;
}
.card-nav-item:hover {
  box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.7);
  transform: translateY(-3px) scale(1.01, 1.01);
}
.card-nav-title {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 15px;
  margin: 5px 0;
  height: 40px;
  line-height: 40px;
  white-space: nowrap;
}
.card-nav-img {
  height: 38px;
}
.card-nav-name {
  height: 40px;
  float: right;
  font-size: 15px;
  margin: 0 0;
  line-height: 40px;
  white-space: nowrap;
}
.card-nav-content {
  margin-top: 10px;
  font-size: 13px;
  color: #999;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  height: 37px;
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

三. 组件使用

docs 下的任意目录建立一个 md 文档，我在 docs 根目录下建立了 01.导航站.md 文档。

然后在文档里添加一些内容（开头的 frontmatter 需要配置你自己的）：

---
title: 本站 - 导航站模块     # 你自己的标题
date: 2022-01-11 14:03:46   # 你自己的时间
permalink: /whell/web/  # 你自己的链接
categories:
  - 
tags: 
  - 
---

## 搜索引擎
<ClientOnly>
  <Card :cardData="cardData0" :cardListSize=3 carTitlColor="#000" carHoverColor="#000" />
</ClientOnly>

## 前端开发
<ClientOnly>
  <Card :cardData="cardData1" :cardListSize=3 carTitlColor="#000" carHoverColor="#000" />
</ClientOnly>

<script>
export default {
  data() {
    return {
      cardData0: [
        {
          id: '0',
          cardSrc: "http://www.google.com/",
          cardImgSrc: "https://cdn.staticaly.com/gh/Kele-Bingtang/static/img/tools/20220104225539.png",
          cardName: "Google",
          cardContent:
            "全球最大的搜索引擎公司",
        },
        {
          cardSrc: "http://www.baidu.com/",
          cardImgSrc: "https://cdn.staticaly.com/gh/Kele-Bingtang/static/img/tools/20220104224044.png",
          cardName: "百度",
          cardContent:
            "百度——全球最大的中文搜索引擎及最大的中文网站，全球领先的人工智能公司",
        },
        {
          cardSrc: "https://www.bing.com/",
          cardImgSrc: "https://cdn.staticaly.com/gh/Kele-Bingtang/static/img/tools/20220104224430.png",
          cardName: "Bing",
          cardContent:
            "微软公司推出的用以取代Live Search的搜索引擎",
        },
      ],
      cardData1: [
        {
          id: '1',
          cardSrc: "https://github.com/",
          cardImgSrc: "https://img0.baidu.com/it/u=2382900870,3325593570&fm=26&fmt=auto",
          cardName: "Github",
          cardContent:
            "GitHub是一个面向开源及私有软件项目的托管平台",
        },
        {
          cardSrc: "https://gitee.com/",
          cardImgSrc: "https://cdn.staticaly.com/gh/Kele-Bingtang/static/img/tools/20220104231432.png",
          cardName: "Gitee",
          cardContent:
            "开源中国旗下的代码托管平台：码云",
        },
        {
          cardSrc: "https://coding.net/",
          cardImgSrc: "https://cdn.staticaly.com/gh/Kele-Bingtang/static/img/tools/20220104231517.png",
          cardName: "Coding",
          cardContent:
            "一站式 DevOps，提升研发效能",
        },
      ],
    };
  },
};
</script>

四. 属性

Vue 组件可以传 4 个属性：

cardData

• 类型：Array
• 属性：
  • id：代表当前 cardData 的 id（仅限第一个对象填写）（必填）
  • title：该 cardData 的标题（仅限第一个对象填写）（可选）
  • cardSrc：点击卡片跳转的地址
  • cardImgSrc：卡片的图片
  • cardName：卡片的名字
  • cardContent：卡片的内容

卡片的具体数据。

cardListSize

• 类型：number
• 范围：1 - 4
• 默认值：3

页面的一行显示多少个卡片。

carTitlColor

• 类型：string
• 默认值：#000

卡片的名字颜色。

carHoverColor

• 类型：string
• 默认值：#000

卡片的内容鼠标悬停的颜色。