最简单的Hexo友情链接页面定制

发表于 2021-06-17 更新于 2023-02-08 分类于 Hexo 评论：阅读次数：

Hexo的NexT主题可以天然支持友链，即在NexT主题的配置文件_config.yml中有一个# Blog rolls块，可以添加友链，然后在左边栏的底端会显示它们。但这样的问题在于边栏的空间有限，友链比较多的话会影响布局，而且分散主题。于是考虑单独创建一个友链页面，搜索发现已经有成型的方案，大体思路与 # Hexo添加自定义分类菜单项并定制页面布局一样，增加菜单项和友链模版，再修改主页模板。这样做可以解决问题，但是不够优雅，属于侵入式的定制（直接修改了主题文件模板），但绝大多数人都采用了这种方案 :-)。

有没有更简单的方案呢？有！考虑到markdown天然支持内嵌html，我们要做的只是用html写一篇新博客。

可行方案选择

经过思考发现大概有几个方案：

直接使用NexT主题的Blog roll
定制友情链接模版
在markdown中内嵌友链css和html

第一种方案简单粗暴，但扩展性差；第二种方案能达到目的，但实现步骤繁琐，另外以后升级NexT主题就麻烦了，大概率需要手动merge代码，因为修改了NexT主题的模版文件；最后一种方案非常完美，非侵入式实现，不动源码，只改配置文件，扩展方便，copy一段html即可新增友链，唯一的缺点就是需要内嵌一段css，稍显丑陋。

在采用这种方法之前还走过一点弯路，考虑直接做一个不被渲染的HTML（利用 skip_render）放到source文件夹中，但发现这样做会丢失页面框架，与其他页面风格不一致。

最简单的友链页面定制

新建一个post

在source文件夹下建一个文件夹links，里面放一个文件index.md，即友链页面：

---
title: 友情链接
date: 2021-06-16 00:34:27
---

<div class="post-body">
   <div id="links">
      <style>
         .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;
         }
         .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;
         }
      </style>
      <div class="links-content">
         <div class="link-navigation">
            <div class="card">
               <img class="ava" src="https://cdn.jsdelivr.net/gh/hvnobug/assets/common/avatar.png" />
               <div class="card-header">
                  <div>
                     <a href="https://blog.hvnobug.com/">Emil’s blog</a>
                  </div>
                  <div class="info">这是一个分享IT技术的小站。</div>
               </div>
            </div>
            <div class="card">
               <img class="ava" src="https://yingwiki.top/avatar" />
               <div class="card-header">
                  <div>
                     <a href="https://yingwiki.top">越行勤's Blog</a>
                  </div>
                  <div class="info">努力学习的小菜鸟</div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

其实就是一段css再接上几个div，以后每加一个友链，只需要复制如下一段即可：

<div class="card">
   <img class="ava" src="{avatarurl}" />
   <div class="card-header">
      <div>
         <a href="{link}">{name}</a>
      </div>
      <div class="info">{description}</div>
   </div>
</div>

之后在每次hexo g时，就会生成一个links/index.html文件。同时由于它不在source/_posts文件中，hexo不会把它当成一篇新博客加入首页。

增加菜单项

在NexT主题的配置文件_config.yml中找到menu部分，加一行即可：

...
menu:
  tags: /tags/ || tags
  categories: /categories/ || th
...
  Links: /links/ || link
...

实现效果如图： Blogroll

欢迎留言交换友链：友情链接

本文上面的css和html借鉴了第二种方案的模板，参考： # Hexo个人博客自定义友链页面 # hexo博客next主题自定义友情链接页面