前言
新增博客平台功能，友人链内容实现
由于该博文处理博客平台更新期间发布，因此图片信息通过路过图床进行存储。
环境版本
没什么特别的版本要求，感觉只要满足就行
前期考察
通过了解网络中友人链部分的实现方式，发现分为如下几种
通过主题自带功能实现
Next主题莫得，直接否（严格来讲没有独立平台，仅通过Link实现。但是通过Link一个个加，后续会十分冗余）
更改相关配置信息，修改渲染方式等
过于复杂和过于DIY化。我只是个前端小白。。。并且后续主题、平台更新需要重新Fork解决问题。很麻烦。。。
通过Markdown自带HTML功能实现
相对简单，虽然没有那么多花里胡哨，但是方便添加修改，适合懒人小白（我）
参考资源
实现
在主题文件夹中的languages文件夹中找到zh-CN.yml文件，找到menu标题，创建内容：
在根目录下找到环境配置文件主题配置文件 _config.next.yml，在其中的Menu Settings中添加信息：
1
2
| menu:
links: /links/ || fa fa-book-heart
|
创建友人链文件内容
在sources文件夹中创建links文件夹，并在里面创建一个index.md文件，内容填充如下：
这里有参考部分，但是为了保证自身友人链的与众不同，因此请教了下GPT关于前端CSS的知识点（好吧，用GPT修改了一点）（后续精进CSS后这里会有完善，实现真正友人帐显示【Big Cake】）
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
| <div class="post-body">
<div id="links">
<style>
body {
background-color: #f0f0f0; /* 设置整个页面的背景颜色为浅灰色 */
}
.links-content {
margin-top: 1rem;
display: flex;
flex-wrap: wrap; /* 允许换行 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
.card {
width: 130px; /* 设置卡片宽度 */
height: 160px; /* 设置卡片高度 */
font-size: 1rem;
padding: 20px;
border-radius: 10px; /* 圆角 */
transition-duration: 0.15s;
margin: 1rem; /* 设置卡片的上下左右间距 */
display: flex;
flex-direction: column; /* 竖向排列 */
align-items: center; /* 内容居中 */
justify-content: center; /* 内容居中 */
text-align: center; /* 文字居中 */
background-color: #fff; /* 卡片背景颜色 */
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* 阴影 */
}
.card:hover {
transform: scale(1.05); /* 鼠标悬停时放大 */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* 鼠标悬停时阴影变化 */
}
.card .ava {
width: 60px; /* 图像宽度 */
height: 60px; /* 图像高度 */
margin-bottom: 10px; /* 图像与标题之间的间距 */
border-radius: 50%; /* 圆形图像 */
}
.card .card-header {
font-weight: bold; /* 粗体 */
margin: 5px 0; /* 标题上下间距 */
transition: color 0.5s; /* 颜色变化过渡 */
}
.card .card-header a {
color: #2bbc8a; /* 标题颜色 */
text-decoration: none; /* 去掉下划线 */
}
.card .card-header a:hover {
animation: rainbow 1.5s infinite; /* 鼠标悬停时彩虹效果 */
}
.card .info {
color: #a3a3a3; /* 描述颜色 */
font-size: 14px; /* 描述字体大小 */
margin-top: 20px; /* 增加标题与描述之间的距离 */
}
@keyframes rainbow {
0% { color: red; }
14% { color: orange; }
28% { color: yellow; }
42% { color: green; }
57% { color: blue; }
71% { color: indigo; }
85% { color: violet; }
100% { color: red; }
}
</style>
<div class="links-content">
<--在此处添加卡片信息-->
<div class="card">
<img class="ava" src=https://zhycarge.github.io/images/1.gif" />
<div class="card-header">
<a href="https://zhycarge.github.io/">ZHYCarge的个人博客</a>
</div>
<div class="info">总是要记录些什么……</div>
</div>
</div></div></div>
|
新人添加
只需要在后面添加这段代码即可
1
2
3
4
5
6
7
| <div class="card">
<img class="ava" src=https://zhycarge.github.io/images/1.gif" />
<div class="card-header">
<a href="https://zhycarge.github.io/">ZHYCarge的个人博客</a>
</div>
<div class="info">总是要记录些什么……</div>
</div>
|
实现效果
尾言
后续可能会考虑更换方法，等待后续进一步学习NexT与Hexo对于传值内容及相关自定义页面的设立。。。