为Hexo博客next主题添加友链

发表于 更新于 阅读次数： Waline：

🌈Description：
​ 本文将介绍如何为Hexo博客next主题添加友链，方便你与其他博主进行联系，同时可以引流。

20230427153826|left

效果展示

先看实际效果，如果感觉ok，就可以继续往下看，否则请节省时间逛逛别的文章：
链接在这里
20230427154005|left|500

添加友链的方法

修改hexo的next主题配置文件_config.next.yml

我的_config.next.yml是在根目录下，打开后，在menu节点下，添加这一行：
link: /links/ || fa fa-link

将配置文件中的link备注中文名称

打开目录Hexo_Blog\node_modules\hexo-theme-next\languages，打开文件zh-CN.yml，在menu节点下添加这一行：
link: 友链

添加友链页面

打开目录Hexo_Blog\source新建文件夹links，在Hexo_Blog\source\links下新建文件index.md，添加如下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
---
title: 友情链接
date: 2023-04-26 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://laosu.ml/images/laosu_wx.jpg" />
               <div class="card-header">
                  <div>
                     <a href="https://laosu.ml/">杨浦老苏</a>
                  </div>
                  <div class="info">聚沙成塔，集腋成裘 </div>
               </div>
            </div>
            <div class="card">
               <img class="ava" src="https://weicun.gitee.io/images/logo.png" />
               <div class="card-header">
                  <div>
                     <a href="https://weicun.gitee.io/">蓝色单车</a>
                  </div>
                  <div class="info">软件评测、AI、感悟，分享好玩的东东</div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>


如果你想单车一样用 obsidian 编辑器对 html 编辑不友好，建议在 VS code 或者 sublime text 里面编辑好在粘贴过来。（跟新：建议直接用 sublime text 去编辑就好，不要用 ob 去编辑）。
如果有小伙伴请求添加友链，你只需要在上述代码的技术上添加如下代码块即可：

1
2
3
4
5
6
7
8
9
<div class="card">
   <img class="ava" src="https://laosu.ml/images/laosu_wx.jpg" />
   <div class="card-header">
      <div>
         <a href="https://laosu.ml/">杨浦老苏</a>
      </div>
      <div class="info">聚沙成塔，集腋成裘 </div>
   </div>
</div>

这里添加了我最喜欢的一个博主：老苏的博客，虽然没有经过他的允许，但是我还是很想把他分享给大家，因为他的文章的确是纯纯的干货文章。

总结

好了，至此我们已经完成了全部工作，回顾下其实就三个步骤：

  • 修改hexo的next主题配置文件_config.next.yml
  • 将配置文件中的link备注中文名称
  • 添加友链页面
    现在你可以部署你的hexo博客看效果了（hexo clean、hexo g、hexo s、hexo d）,希望能看到你满意的效果。
    有什么问题欢迎留言。

对了，如果大家喜欢可以关注我的博客和微信公众号，平时会经常分享一下软件、AI、感悟、好玩的东东。谢谢啦。image-20220328170047757|left或者个人博客：https://weicun.gitee.io/ 蓝色单车

🌈参考：

1.
2.
3.