本站 - 导航站模块原创
笔记
主题自带的卡片列表不适合制作导航卡片，于是我稍微自己实现了它。
2021-01-11 @Young Kbt
# 前言
目前适用版本是 Vdoing v1.x。
导航卡片是什么，请先看我的导航站：https://notes.youngkbt.cn/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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
# 组件使用
docs 下的任意目录建立一个 md 文档，我在 docs 根目录下建立了 01.导航站.md 文档。
然后在文档里添加一些内容（开头的 frontmatter 需要配置你自己的）：
---
title: 本站 - 导航站模块 # 你自己的标题
date: 2022-01-11 14:03:46 # 你自己的时间
permalink: /about/website/tools/ # 你自己的链接
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.baidu.com/",
cardImgSrc:
"https://cdn.jsdelivr.net/gh/Kele-Bingtang/static/img/tools/20220104224044.png",
cardName: "百度",
cardContent:
"百度——全球最大的中文搜索引擎及最大的中文网站，全球领先的人工智能公司",
},
{
cardSrc: "http://www.google.com/",
cardImgSrc:
"https://cdn.jsdelivr.net/gh/Kele-Bingtang/static/img/tools/20220104225539.png",
cardName: "Google",
cardContent: "全球最大的搜索引擎公司",
},
{
cardSrc: "https://www.bing.com/",
cardImgSrc:
"https://cdn.jsdelivr.net/gh/Kele-Bingtang/static/img/tools/20220104224430.png",
cardName: "Bing",
cardContent: "微软公司推出的用以取代Live Search的搜索引擎",
},
],
cardData1: [
{
id: "1",
title: "Vue & UI",
cardSrc: "https://cn.vuejs.org/",
cardImgSrc:
"https://cdn.jsdelivr.net/gh/Kele-Bingtang/static/img/tools/20220105001047.png",
cardName: "Vue",
cardContent: "渐进式 JavaScript 框架",
},
{
cardSrc: "https://element.eleme.cn/#/zh-CN/",
cardImgSrc:
"https://cdn.jsdelivr.net/gh/Kele-Bingtang/static/img/tools/20220105001602.png",
cardName: "Element-UI",
cardContent:
"Element，一套为开发者、设计师和产品经理准备的基于 Vue 的桌面端组件库",
},
{
cardSrc: "https://next.antdv.com/docs/vue/introduce-cn/",
cardImgSrc:
"https://cdn.jsdelivr.net/gh/Kele-Bingtang/static/img/tools/20220105223748.svg",
cardName: "Ant Design Vue",
cardContent: "Vue UI 之 Ant Design Vue，蚂蚁金服的 Vue 框架",
},
{
cardSrc: "https://www.iviewui.com/",
cardImgSrc:
"https://cdn.jsdelivr.net/gh/Kele-Bingtang/static/img/tools/20220105001656.png",
cardName: "View UI",
cardContent: "View UI 是一套基于 Vue.js 的高质量UI 组件库",
},
{
cardSrc: "https://youzan.github.io/vant/#/zh-CN/",
cardImgSrc: "https://img01.yzcdn.cn/vant/logo.png",
cardName: "Vant",
cardContent: "轻量、可靠的移动端 Vue 组件库",
},
],
};
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
如果有多个内容，依次类推。
<ClientOnly> 大部分情况下可加可不加，少部分情况的官方介绍：https://v2.vuepress.vuejs.org/zh/reference/components.html#clientonly。
# 属性
Vue 组件可以传 4 个属性：
cardData
- 类型：
Array - 属性：
- id：代表当前
cardData的 id（仅限第一个对象填写）（必填） - title：该
cardData的标题（仅限第一个对象填写）（可选） - cardSrc：点击卡片跳转的地址
- cardImgSrc：卡片的图片
- cardName：卡片的名字
- cardContent：卡片的内容
- id：代表当前
卡片的具体数据。
cardListSize
- 类型：
number - 范围：1 - 4
- 默认值：3
页面的一行显示多少个卡片。
carTitlColor
- 类型：
string - 默认值：#000
卡片的名字颜色。
carHoverColor
- 类型：
string - 默认值：#000
卡片的内容鼠标悬停的颜色。
# 结束语
如果你还有疑惑，可以去我的 GitHub 仓库或者 Gitee 仓库查看源码。
如果你有更好的方式，评论区留言告诉我，或者加入 Vdoing 主题的 QQ 群：694387113。谢谢！
编辑此页 (opens new window)
更新时间: 2023/10/23, 10:58:52