很多博客放友情链接都是放在 Next 主题配置文件下的 Social Link 下面,其实还是挺实用的,但是如果想要更美观一些的话,完全可以自定义一个友情链接页面,最近也有小伙伴问我的友链是怎么做的,下面我就分享一下我的友链界面制作教程。如果你喜欢的话可以在文章末尾给个五星好评或者留言点赞哦~
在 hexo/themes/next/layout
目录下新建一个 links.swig
文件,并写入以下内容:
//文件位置:hexo/themes/next/layout
{% block content %}
{######################}
{### LINKS BLOCK ###}
{######################}
<div id="links">
<style>
.container .main-inner {
width: 1100px;
}
.links-content{
margin-top:1rem;
}
.link-navigation::after {
content: " ";
display: block;
clear: both;
}
.card {
width: 45%;
font-size: 1rem;
padding: 10px 20px;
border-radius: 4px;
transition-duration: 0.15s;
margin-bottom: 1rem;
display:flex;
}
@media(max-width: 1400px){
.card{
width: 40% !important;
}
}
.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: 100%;
}
.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;
overflow: hidden;
white-space: nowrap;
}
span.focus-links {
font-style: normal;
margin-left: 10px;
position: unset;
left: 0;
padding: 0 7px 0 5px;
font-size: 11px;
border-color: #42c02e;
border-radius: 40px;
line-height: 24px;
height: 22px;
color: #fff !important;
background-color: #42c02e;
display: inline-block;
}
span.focus-links:hover{
background-color: #318024;
}
.friends-btn{
text-align: center;
color: #555!important;
background-color: #fff;
border-radius: 3px;
font-size: 15px;
box-shadow: inset 0 0 10px 0 rgba(0,0,0,.35);
border: none!important;
transition-property: unset;
padding: 0 15px;
margin: inherit;
}
.friends-btn:hover{
color: rgb(255, 255, 255) !important;
border-radius: 3px;
font-size: 15px;
box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
background-image: linear-gradient(90deg, #a166ab 0%, #ef4e7b 25%, #f37055 50%, #ef4e7b 75%, #a166ab 100%);
margin: inherit;
}
}
</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 }}"><span class="focus-links">关注</span></a></div>
<div class="info">{{ link.info }}</div>
</div>
</div>
{% endfor %}
</div>
{{ page.content }}
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
var randnum = function(n) {
return Math.round(Math.random() * n)
},
hexify = function(n) {
return ("0" + parseInt(n).toString(16)).slice(-2)
},
randex = function() {
return "#" + hexify(randnum(255)) + hexify(randnum(255)) + hexify(randnum(255))
},
blender = function() {
return Math.round(Math.random()) ? "radial-gradient(circle at " + randnum(100) + "% " + randnum(100) + "%, " +
randex() + ", " + randex() + ")" : "linear-gradient(" + randnum(360) + "deg, " + randex() + ", " + randex() + ")"
};
$(".card").each(function() {
var n = blender();
$(this).hover(function() {
$(this).css("background-image", n);
}, function() {
$(this).css("background-image", "none");
})
}), $(".card").click(function() {
var n = $(this).children(".card-header").children("div").children("a").attr("href");
window.location.href = n
});
</script>
{##########################}
{### END LINKS BLOCK ###}
{##########################}
{% endblock %}
然后修改 hexo/themems/next/layout/page.swig
文件,在下面所示地方:
#}{% elif page.type === "tags" and not page.title %}{#
#}{{ __('title.tag') + page_title_suffix }}{#
添加如下代码:
<!-- 友情链接-->
#}{% elif page.type === 'links' and not page.title %}{#
#}{{ __('title.links') + page_title_suffix }}{#
然后还是在这个 page.swig 文件中,引入刚才新建的 swig 页面:
<!-- 友情链接-->
{% elif page.type === 'links' %}
{% include 'links.swig' %}
这个代码位置可以放到下面:
{% elif page.type === 'categories' %}
<div class="category-all-page">
<div class="category-all-title">
{{ _p('counter.categories', site.categories.length) }}
</div>
<div class="category-all">
{{ list_categories() }}
</div>
</div>
+ {% elif page.type === 'links' %}
+ {% include 'links.swig' %}
{% else %}
{{ page.content }}
{% endif %}
</div>
然后我们使用 GitBash 新建一个菜单栏:
//命令位置:hexo根目录
hexo new page "links"
这样在 hexo/source 目录下会生成一个 links 文件夹,打开其中的 index.md 文件,在标题头中写入 type = "links" 这个属性头,如下:
---
title: 友情链接
date: 2019-06-28 20:46:16
+ type: "links"
---
如果需要关闭这个页面的评论的话,可以设置如下:
---
title: 友情链接
date: 2019-06-28 20:46:16
type: "links"
+ comments: false
---
最后,我们添加友链的话,需要在主题配置文件 hexo/themes/next/_config.yml 文件末尾添加:
# 友情链接
mylinks:
- nickname: Sanarous # 昵称
avatar: https://bestzuo.cn/images/touxiang.jpeg # 头像地址
site: https://bestzuo.cn #友链地址
info: 码农人生
- nickname: Sanarous # 昵称
avatar: https://bestzuo.cn/images/touxiang.jpeg # 头像地址
site: https://bestzuo.cn #友链地址
info: 码农人生
保持这个格式就行,然后就会从上往下渲染到 links 页面,当然,菜单栏汉化需要在 next 主题目录下 languages 文件中找到 zh-CN 或者 zh-Hans.yml 文件,新增 links :
menu:
home: 首页
archives: 归档
categories: 分类
tags: 标签
about: 关于
search: 搜索
schedule: 日程表
sitemap: 站点地图
commonweal: 公益404
top: 热门
+ links: 友链
然后就可以使用了!如果小伙伴们觉得好用记得在文章末尾点个赞或者留个言哦😄 ~
本文由 Sanarous 创作,如果您觉得本文不错,请随意赞赏
采用 知识共享署名4.0 国际许可协议进行许可,转载前请务必署名
本文链接:https://bestzuo.cn/posts/2016690040.html
最后更新于:2020-07-01 21:53:19
评论