Hexo添加友链

发表于 更新于 分类于 阅读次数： 本文字数： 498 阅读时长 ≈ 2 分钟

本文以Next主题为例，其他主题略有不同！

效果展示

效果展示1

效果展示2

创建友链页面

先在右键GBH里输入下面的命令并回车

1
2
3

hexo new page links

然后在主题配置文件里，按Ctrl加F，输入”links”，把那一行前面的”#”删掉即可

配置友链页面

想要改成我这样的，先到source/links/index.md，复制一下内容，粘贴到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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

<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://www.helloimg.com/i/2024/09/30/66fa65eacc59d.jpg" />
               <div class="card-header">
                  <div>
                     <a href="网址">网站名称</a>
                  </div>
                  <div class="info">网站描述</div>
               </div>
            </div>
            <div class="card">
               <img class="ava" src="网站图标" />
               <div class="card-header">
                  <div>
                     <a href="网址">网站名称</a>
                  </div>
                  <div class="info">网站描述</div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

------

<div style="text-align:center;">
  <span class="with-love" id="animate1"><i class="fa fa-heart"></i></span>
  留言互换友链 o ((>ω<)) o
  <span class="with-love" id="animate2"><i class="fa fa-heart"></i></span>
</div>

------

<div class="note success"><h2 id="友链格式"><a href="#友链格式" class="headerlink" title="友链格式"></a>友链格式</h2><ul>
<li>名称：</li>
<li>网址：</li>
<li>网站描述：</li>
<li>头像：</li>
</ul>
</div>

<div class="note success"><h2 id="注意事项"><a href="#注意事项" class="headerlink" title="注意事项"></a>注意事项</h2><ul>
<li>仅限个人博客</li>
<li>在提交友链前，请添加本站链接</li>
</ul>
</div>

以后想再加再加一个友链就继续粘贴下面的即可

1
2
3
4
5
6
7
8
9
<div class="card">
   <img class="ava" src="网站图标" />
   <div class="card-header">
      <div>
         <a href="网址">网站名称</a>
      </div>
      <div class="info">网站描述</div>
   </div>
</div>