Hexo个人博客自定义友链页面

2023-11-07 13:56| 来源: 网络整理| 查看: 265

[TOC]

一、常规操作：在主题配置文件中添加

在next主题的配置文件\themes\next_config.yml 中添加友链

12345678910# Blog rollslinks_icon: linklinks_title: Links# links_layout: blocklinks_layout: inlinelinks: 博采众长: https://lruihao.cn/ 乐余地: https://www.leridy.pw/ 同盟源: https://tmy123.com/ Yremp: https://yremp.live

next主题的友链，默认是在主题配置文件中 links 下添加，当链接变多以后，侧栏页面的排版很不美观。当友链达到10+以上，那么侧边栏就会很不雅观。

二、骚操作：自定义友链页面

这时候就需要给友链新增一个单独的页面了，下面说一下具体步骤。

2.1 新增 links 页面

在控制台使用命令创建：

1hexo new page links

也可在博客根目录 /source 下手动创建 links 文件夹和里边的 index.md 文件

然后在博客根目录 /source 下会生成一个 links 文件夹，打开其中的 index.md 文件，在头部写入 type = “links”，这个一定要写，如下：

12345---title: 友情链接date: 2019-12-08 03:21:39type: "links"--- 2.2 配置 menu

主题配置文件中menu下添加：

1links: /links/ || link

在 /themes/next/languages/zh-Hans.yml 文件中 menu 下增加中文描述

1links: 友链

做完这些工作，接下来就是要增加友链页面的样式了

2.3 友链页面样式

效果图：

2.3.1新增 links.swig 页

在 /themes/next/layout/ 新建 links.swig，内容如下：

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104 {% block content %} {######################} {### LINKS BLOCK ###} {######################} #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; } {% for link in theme.mylinks %} {{ link.nickname }} 关注 {{ link.info }} {% endfor %} {{ page.content }} {##########################} {### END LINKS BLOCK ###} {##########################}{% endblock %} 2.3.2 修改 page.swig

修改 /themes/next/layout/page.swig 文件，在开头的 block title 内部

12#}{% elif page.type === "tags" and not page.title %}{# #}{{ __('title.tag') + page_title_suffix }}{#

这个位置下添加代码：

123#}{% elif page.type === 'links' and not page.title %}{# #}{{ __('title.links') + page_title_suffix }}{#

效果如下：

2.3.3引入 links.swig

接着在 /themes/next/layout/page.swig 中 PAGE BODY 内部，引入刚才新建的 page.swig :

123{% elif page.type === 'links' %} {% include 'links.swig' %}

比如我是在

1{% elif page.type === 'categories' %}

这个if下追加的：

到这里就完成页面样式的配置了。

2.4 配置友链

接下来，在 /themes/next/_config.yml 文件中配置友链，末尾处新增 mylinks ，如下

12345678910111213141516171819202122232425262728mylinks:# 友链交换已经添加贵站# 名称：AnFrank# 地址：https://enfangzhong.github.io/# 描述：既可以早九晚五又可以浪迹天涯。# 头像：https://enfangzhong.github.io/images/avatar.jpg- nickname: AnFrank #友链名称 site: https://enfangzhong.github.io/ #友链地址 info: 既可以早九晚五又可以浪迹天涯。 #友链说明 avatar: https://enfangzhong.github.io/images/avatar.jpg #友链头像- nickname: 博采众长 #友链名称 site: https://lruihao.cn/ #友链地址 info: 分享一些有趣程序、干货、技巧、开发教程、心情和学习记录等等。 #友链说明 avatar: https://lruihao.cn/images/avatar.png #友链头像- nickname: Yremp site: https://yremp.live info: 流年，谁给过的倾城 avatar: https://cdn.jsdelivr.net/gh/yremp/[email protected]/img/custom/head.jpg - nickname: Leaf's Blog avatar: https://leafjame.github.io/images/beichen.png site: https://leafjame.github.io info: Java狮北漂男摄影旅行赚钱

这里是配置了四个友链，多个的配置方式相同。

hexo 部署命令三连，看看效果吧~

1hexo c && hexo g -d

【本文地址】

公司简介

联系我们