---

title: 1.hexo+next友情链接页面搭建 date: 2020-08-02 22:36:47 categories:

3.系统运维3.hexo相关1.hexo美化

---

安装next模板的初始设置，友情链接是直接放在侧边栏里的，少还好，一旦友情链接多了，就会显得侧边栏特别的杂乱，所以就打算专门做个页面来存放友链

---

新增Links页面

命令创建

$ hexo new page links

然后根目录下/source就新增了一个links文件夹，里面还有一个index.md文件

在文件中写入type: "links"，如果还想禁止评论的话就再写一个comments: false

创建友链栏

在blog\themes\next\_config.yml里找到menu，在其中添加

links: /links/|| link

在blog\themes\next\languages\zh-Hans.yml的menu里添加中文描述

links: 友链

增加友链页面样式

在blog\themes\next\layout创建links.swig，内容如下

{% block content %} {######################} {### LINKS BLOCK ###} {######################} <div id="links"> <style> #links{ margin-top: 5rem; } .links-content{ margin-top:1rem; } .link-navigation::after { content: " "; display: block; clear: both; } .card { width: 300px; font-size: 1rem; padding: 10px 20px; border-radius: 4px; transition-duration: 0.15s; margin-bottom: 1rem; display:flex; } .card:nth-child(odd) { float: left; } .card:nth-child(even) { float: right; } .card:hover { transform: scale(1.1); box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04); } .card a { border:none; } .card .ava { width: 3rem!important; height: 3rem!important; margin:0!important; margin-right: 1em!important; border-radius:4px; } .card .card-header { font-style: italic; overflow: hidden; width: 236px; } .card .card-header a { font-style: normal; color: #2bbc8a; font-weight: bold; text-decoration: none; } .card .card-header a:hover { color: #d480aa; text-decoration: none; } .card .card-header .info { font-style:normal; color:#a3a3a3; font-size:14px; min-width: 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } </style> <div class="links-content"> <div class="link-navigation"> {% for link in theme.mylinks %} <div class="card"> <img class="ava" src="{{ link.avatar }}"/> <div class="card-header"> <div> <a href="{{ link.site }}" target="_blank"> {{ link.nickname }}</a> <a href="{{ link.site }}" target="_blank"><span class="focus-links">关注</span></a> </div> <div class="info">{{ link.info }}</div> </div> </div> {% endfor %} </div> {{ page.content }} </div> </div> {##########################} {### END LINKS BLOCK ###} {##########################} {% endblock %}

修改blog\themes\next\layout\page.swig页面

在block title内部插入

<!-- 友情链接--> #}{% elif page.type === 'links' and not page.title %}{# #}{{ __('title.links') + page_title_suffix }}{#

在同页面的PAGE BODY内部引入page.swig

<!-- 友情链接--> {% elif page.type === 'links' %} {% include 'links.swig' %}

配置友链

在blog\themes\next\_config.yml里的末尾处新增mylinks，这里就是做友情链接的地方

mylinks: - nickname: 尘埃's blog avatar: https://dustca.xyz/image/avatar.jpeg site: https://Mint-Bh.github.io info: 一个搞安全的咸鱼

_config.yml`里的末尾处新增mylinks，这里就是做友情链接的地方

mylinks: - nickname: 尘埃's blog avatar: https://dustca.xyz/image/avatar.jpeg site: https://Mint-Bh.github.io info: 一个搞安全的咸鱼