本篇其实主要就是二改我上一篇的友链添加方法！important
因为之前我一直觉得我的友链会很少，页脚很容易就可以放下，但是后来呢我觉得这部分内容扩充可能性是很大的，谁都不想后期看着一个页脚比正文内容都长的页面发怔🙄
话不多说，我们现在导航栏新开一个页面
<li><a href="{{ '/flink' | relative_url }}" {% if page.url == "/flink/" %}class="active"{% endif %}>友链</a></li>
然后按照创建一个页面的常规方法：
- 创建md文件
- 创建layout页面模板
- 创建css文件 但是我们这次要多一步，并且是为了以后能更加方便的管理友链数据
- 创建yml文件管理信息
对应的markdown文件还是要有文件抬头，创建flink.md文件！
---
layout: flink
title: 友情链接🔗
permalink: /flink/
---
然后再_layout文件夹中创建一个flink.html
---
layout: flink
---
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{{ page.title }}</title>
<link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
<link rel="stylesheet" href="{{ '/assets/css/flink.css' | relative_url }}">
</head>
<body>
<div class="fixed-background"></div>
<div class="flink-page">
<div class="flink-header">
<img src="{{ '/assets/images/avatar.jpg' | relative_url }}" class="flink-avatar">
<h1 class="flink-title">友链🔗</h1>
</div>
{% include navigation.html %}
<div class="content-container">
{% if site.data.flink %}
<div class="friends-grid">
{% for friend in site.data.flink %}
<a href="{{ friend.url }}" target="_blank" rel="noopener noreferrer" class="friend-card">
<img src="{{ friend.avatar | relative_url }}" alt="{{ friend.name }}" class="friend-avatar">
<div class="friend-info">
<h4 class="friend-name">{{ friend.name }}</h4>
<p class="friend-desc">{{ friend.desc }}</p>
</div>
</a>
{% endfor %}
</div>
{% else %}
<p class="no-friends">暂无友链，期待与您相遇！</p>
{% endif %}
</div>
{% include announcement.html %}
<script src="/assets/js/script.js"></script>
</body>
</html>
然后是创建flink.css文件，不要忘了是assets/css文件夹，还有就是不要添加到site文件夹里的assets/css（别问，问就是笔者弄错好几次惹😭）
.flink-page {
background: transparent;
min-height: 100vh;
padding: 40px 0;
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
}
.flink-header {
text-align: center;
margin-bottom: 50px;
position: relative;
z-index: 10;
}
.flink-avatar {
width: 150px;
height: 150px;
border-radius: 50%;
border: 4px solid white;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
object-fit: cover;
}
@media (max-width: 768px) {
.content-container {
width: 90%;
}
}
.blank{
background-color: transparent;
height:3rem;
}
.content-container {
width: 90%;
max-width: 900px;
margin: 0 auto;
padding: 20px 0;
}
.friends-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px;
justify-content: center;
margin-top: 3rem;
}
.friend-card {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
padding: 0px;
text-align: center;
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.friend-avatar:hover {
transform: translateY(-7px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
}
.friend-avatar {
width: 100px;
height: 100px;
border-radius: 50%;
border: 3px solid #fff;
object-fit: cover;
}
.friend-info {
margin-top: 15px;
width: 100%;
}
.friend-name {
font-size: 1.2rem;
font-weight: bold;
color: #fff;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
margin: 0;
}
.friend-desc {
font-size: 0.9rem;
color: #ddd;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
margin-top: 5px;
line-height: 1.2;
}
@media (max-width: 768px) {
.friends-grid {
grid-template-columns: 1fr;
gap: 20px;
}
}
有什么不满意的就调一下参数就行，还是比较方便的；
对于我的页面当时valine的评论系统，对应css有覆盖，在此处去掉了。/
（对于没学过css的宝子建议看着网页检查器的元素检查然后看参数慢慢调就学会了，系统地学真的很麻烦，有些量真的不太会用到，不如边用边学😁）
然后对于flink.yml文件，记得创建在_data文件夹，里面的内容是
- name: 名字1
url: https://www.example1.com
avatar: /assets/images/flink/flink1.jpg
desc: 描述1
- name: 名字2
url: https://www.example2.com
avatar: /assets/images/flink/flink2.jpg
desc: 描述2
然后嘛…bundle exec jekyll serve试试呢
