目录
实现自定义导航栏
导航栏作为网站的一个元件，为了方便在各个页面随时引用，我们要在/_includes文件夹中新建一个navigation.html文件并且代码示例如下：
<nav class="site-nav">
<ul>
<li><a href="{{ '/' | relative_url }}" {% if page.url == "/" %}class="active"{% endif %}>首页</a></li>
<li><a href="{{ '/page1' | relative_url }}" {% if page.url == "/page1/" %}class="active"{% endif %}>栏目一</a></li>
<li><a href="{{ '/page2' | relative_url }}" {% if page.url == "/page2/" %}class="active"{% endif %}>栏目二</a></li>
<li><a href="{{ '/page3' | relative_url }}" {% if page.url == "/page3/" %}class="active"{% endif %}>栏目三</a></li>
</ul>
</nav>
其中page1、page2、page3替换成你已有页面的的链接🔗，引用页面的markdownown文件抬头编辑例如：
---
layout: (引用模板的名称)
title: (文章标题)
permalink: /(页面链接)/
---
根据nav class=”site-nav”，我们在main.css中添加以下内容：
/* 导航栏容器样式 */
.site-nav {
position: relative;
width: 80%; /* 关键：设置宽度 */
max-width: 630px; /* 关键：设置最大宽度 */
margin: 0 auto; /* 关键：水平居中 */
}
.site-nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 16px;
justify-content: center;
align-items: center;
}
.site-nav li {
padding: 10px 30px;
position: relative;
}
/* 正常情况下的样式 */
.site-nav a {
text-decoration: none;
font-size: 1.2rem;
color: #fff;
}
/* 点击状态下的样式 */
.site-nav a.active {
font-weight: bold;
color: #8abef7;
text-shadow: 1px 1px 6px rgba(54, 52, 52, 0.4);
}
可以根据注释修改必要的宽度，也可以用background-color修改底色和透明度
友链添加模版
在你想要添加友链模块的html文件具体位置添加以下代码
<div class="friends-links-container">
<div class="friends-links-header">
<p>Friend_Link</p>
</div>
<div class="friends-list">
<div class="friend-item">
<a href="(网址url)" target="_blank" rel="noopener noreferrer">
<img src="(头像路径)" alt="好友一" class="friend-avatar">
</a>
<span class="friend-name"></span>
</div>
<!-- <div class="friend-item">
<a href="https://another-example.com" target="_blank" rel="noopener noreferrer">
<img src="/path/to/friend-avatar2.jpg" alt="好友二" class="friend-avatar">
</a>
<span class="friend-name">好友二</span>
</div> -->
</div>
</div>
<p class="ps">—— 如果你也想添加友链，相见关于我的页面或者邮箱联系我！🍉</p>
将这部分代码修改后放到你想放的页面的layout模版处即可
文章归档统计
通过liquid模板语言来实现对站点所有标签的遍历然后取出重复的进行显示
<div class="archive-card1">
<h1>分类列表</h1>
<div class="categories-list">
{% for category in site.categories %}
<li>
🏷️ {{ category[0] }}：{{ category[1].size }} 篇
</li>
{% endfor %}
</div>
</div>
不过此处只有一个标签的显示作用而没有链接功能，至于对文章标签内容的检索功能 且听下回分解～🎉
